Cara Membuat Widget Slidenote Blog

      Slidenote / Pesan Notifikasi Untuk Blogger - Sekarang ini saya akan membagikan sebuah widget yang tutorwidget rasa cukup menarik yaitu membuat sebuah info berbentuk slidenote. Bisa dikatakan hampir mirip dengan recommended slidepost, namun kalau widget slidenote ini hanya digunakan untuk menampilkan pesan saja, bukan untuk menampilkan postingan (walaupun bisa untuk menampilkan postingan namun hanya berupa pesan singkat saja). Hasilnya bisa kalian lihat seperti gambar dibawah.

Baca juga :  Membuat menu slide info di blog

Ketika Menyorot Bagian Atas Blog

Ketika Menyorot Bagian Bawah Blog

     Pesan di slidenote ini akan terlihat pada saat kamu mensecrol ke bagian bawah blog dan akan menghilang dengan sendirinya saat kamu mensecrol kembali kebagian atas blog. Saya sendiri sebenarnya sudah mencoba plugin dari Jquery ini, jadi buat sahabat blogger yang tertarik bisa mencobanya sekarang.

1. Login ke Blogger.com

2. Klik Template

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/AVvXsEg5E78p_nTdsl-mnBNh2Bzen_b3vfZ_htnZj2jUDeR643FO5id1gqSLepOYFJdgvrBJ2hbzfGps9VpF9ps_sU5LG6Ccrt2Ew6gjOANU1wVaKyD4GNANr0I4Aj6bxKhNrbyTGQ4Yzj4Z4hI/s320/slidenote.close.png&#39;
});
</script>

NOTE : 

Untuk memasukkan kata-kata baru yang sobat inginkan, bisa anda lakukan dengan cara memasukkan kata-kata diantara kode <p>masukkan kata-kata disini</p>

7. Jika sudah, kamu simpan dan lihat hasilnya.