Cara Membuat Widget Slidenote / Pesan Notifikasi Untuk Blogger

Di postingan kali ini saya akan membagikan sebuah widget menarik berbentuk SlideNote. ya hampir mirip sama recommended Slied Post, namun kalau widget SlideNote ini hanya digunakan untuk menampilkan pesan saja, bukan untuk menampilkan postingan (walaupun bisa untuk menampilkan postingan namun hanya berupa pesan). Untuk Demo-nya bisa kalian lihat gambar diatas.

Widget ini akan muncul ketika kamu menyorot ke bagian bawah blog dan akan menghilang dengan sendirinya saat kamu naik kebagian atas blog. Saya sudah mencoba Plugin dari Jquery ini, dan bisa loh, jadi buat kalian yang tertarik bisa mencobanya.

1. Login ke Blogger.com

2. Klik Template --> Klik Template --> Back Up template kamu terlebih dahulu, Lihat caranya di bawah ini

• Untuk Antarmuka Blog yang lama klik disini
• Untuk Antarmuka Blog yang Baru klik disini

3. Masih di bagian Template, Klik Edit HTML --> Klik Lanjutkan --> Centang "Expand Template Widget" --> Cari kode </head>, gunakan CTRL + F untuk memudahkan Pencarian.

4. Salin kode di bawah ini dan letakkan di atas kode </head>

 <style type="text/css">
.slidenote { width: 540px; height: 140px; background: #FBEC78; padding: 1em;
-moz-box-shadow: -0.2em -0.2em 0.7em #333; -webkit-box-shadow: -0.2em -0.2em 0.7em #333;}
.slidenote img { float: left; margin-left: -2em; margin-top: -2em; }
.slidenote img:hover { margin-top: -1.95em; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://hzndi.googlecode.com/files/hzndi.blogspot.com-jquery.slidenote.min.js" type="text/javascript"></script>

5. Sekarang cari lagi kode </body> dan gunakan CTRL + F untuk memudahkan Pencarian.

6. Salin kode di bawah ini dan letakkan diatas kode </body>

<div class='slidenote' id='note'>
<div id='container'>
<h2>MASUKKAN JUDUL YANG KAMU SUKA</h2>
<span><em>MASUKKAN KATA-KATA YANG KAMU SUKA </em></span>
<p>MASUKKAN KATA-KATA YANG KAMU SUKA <a href='MASUKKAN URL YANG INGIN KAMU ALIHKAN'>MASUKKAN JUDUL URL-NYA</a></p>
</div>
</div>
<script type='text/javascript'>
$(&#39;#note&#39;).slideNote({
closeImage: &#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8oDFGSkjbqHEWzO-NR0DPFWDa6qBP3ncuUnvXUvA5Xo3JMeZ3pCYlkmNVGQtVI6ILnKNFqHV7uUlRYEPg-msK7wexqb34Z6QaZG3LbgX6nCLLHNWYFOYgft8tW-0QIm1ZAOtazDL1X5g/s320/slidenote.close.png&#39;
});
</script>

NOTE : 

Untuk memasukkan kata-kata baru, bisa dengan memasukkan kata-kata diantara kode  

<p>masukkan kata-kata disini</p>

7. Jika sudah, kamu simpan deh :)

Postingan Terkait:

Posted in: Blogger,CSS3,Jquery,Sticky Bar