Membuat Pemberitahuan Admin Dengan Efek Slide -
Tips Blog baru kali ini mau share tentang notifikasi yang lumayan keren untuk dipasang pada blog kita, Info ini dibuat dengan jQuery dan yang membuat widget ini menarik yaitu terdapat tombol buka tutup, dan kita bisa mengisinya dengan apa saja yang kita inginkan,. untuk pemasangannya sangatlah mudah, cukup simak saja yang dibawah ini.
Cara Membuat Info Admin dengan jQuery
1. Login saja ke blogger saudara masing-masing
2. Cari kode ]]></b:skin> atau </style> dengan menggunakan CTRL+F
3. Masukkan CSS dibawah ini tepat diatas ]]></b:skin> atau </style>
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}
4. Kemudian cari kode </head> dan pastekan kode berikut tepat diatasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>
Note: jangan ikutkan kode jQuery yang digaris bawahi jika sudah terdapat jQuery pada template sobat.
5. Masih Pada Edit HTML, silahkan Cari kode </body> dan masukkan kode HTML berikut tepat diatas </body>
<div class='panel'>
<h3>welcome to my blog</h3>
<p style='text-align:justify'>Selamat datang di blog mas aab, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang kembali. Silahkan anda mencari hal-hal yang baru di blog saya ini <a href='http://tipsblogbaru.blogspot.com/' title='Tips Dan Trik Belajar Seo Blog'>Selengkapnya tentang blog ini</a></p>
<h3>Sekilas tentang admin</h3>
<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzl7sPOGm4Bg8Eud9ht2xwIhanbXkB0AvIsBAbdMYSoulIZeElBVaMVNfv3lFC4yGRcDWIRwlwUDlkBywQzoNtLqsCodvW9aGZcYKSCgBGgVs5D58l4tSu3FbUwXskAQIAY1iz3QXk4s/s1600/cewek+cantik+18.jpg' width='73px'/>
<p>Photo di samping itu bukan saya dan juga bukan pacar saya, pokoknya bukan siapa-siap saya. Nama saya aab saya seorang yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan Desember 2013, dan blog ini saya buat pada bulan january 2014</p>
<div style='clear:both;'/>
<div class='columns'>
<div class='colleft'>
<h3>Navigasi</h3>
<ul>
<li><a href='#' title='home'>Home</a></li>
<li><a href='#' title='about'>About</a></li>
<li><a href='#' title='portfolio'>Portfolio</a></li>
<li><a href='#' title='contact'>Contact</a></li>
<li><a href='#' title='blog'>Blog</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='http://www.facebook.com/bahriezt' title='Facebook'>Facebook</a></li>
<li><a href='http://www.blogger.com/profile/4044901182701978600' title='About Me'>About Me</a></li>
<li><a href='aab_jackcull@gmail.com' title='Gmail'>Gmail</a></li>
</ul>
</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Info</a>
Silahkan ganti yang berwarna
hijau dengan keinginan sobat.
Simpan dan lihat hasilnya.
Source Code:
www.maskolis.com/2011/02/membuat-info-panel-slide-vertikal.html
Dimohon kerjasamanya untuk tidak menyertakan link aktif dalam komentar. Lihat penjelasan mengenai tata cara berkomentar Disini