Wednesday, August 15, 2012

Cara Membuat Widget Slidenote / Pesan Notifikasi Untuk Blogger

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
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:

51 comments:

  1. pertamax gan . .itu ada disebelah bawah ya gan

    ReplyDelete
  2. Tutorial nya dahsyat banget gan.. Berat gak ya kira-kira lo di pasang

    ReplyDelete
  3. Keren sob. Boleh nih disimpan dulu buat jaga-jaga nanti

    ReplyDelete
  4. wah ada tantangan model baru. Sip, ijin mencoba.

    ReplyDelete
  5. memank efect yang di timbulkan jquery mank mantep ya sobat, blog jadi lebih kelihatan atraktif dengan bantuan jquery mantep dech :)

    ReplyDelete
  6. wah manteb nih tutorialnya kapan kapan kalo butuh saya cobain deh

    ReplyDelete
  7. saya pokoknya selalu merujuk ke blog ini kalo ngeblog. cuma saya tulalit selalu. lama mikirnya. OK saya simpan nih.

    ReplyDelete
  8. langsung dicoba deh. do'ain sukses ya sob

    ReplyDelete
  9. mks sdh mampir ber x x . mf lom bs bewe maksimal y bro ;-)

    ReplyDelete
  10. itu kayak alert message ya ? maklum via hp :)

    ReplyDelete
  11. Dasyat sob... :)
    Rekam dulu deh buat referensi.. Hehe :)

    ReplyDelete
    Replies
    1. hehe boleh2 sob jangan lupa dcoba juga yah

      Delete
  12. tips yang mantap sob,ikut nyimak dulu ya sob...

    ReplyDelete
  13. widih mantabs stiki notesnya sobat...

    ReplyDelete
  14. sip banget ya slitenote nya
    buat aku ingin mencoba...

    ReplyDelete
  15. ehm menarik nie ga. tapi ko contohnya belum keluar ya di blog ini? apa lagi lemot ya inetku. coba lagi ah :D

    ReplyDelete
    Replies
    1. aku ga pake widget ini di blogku kang, sudah aku hapus heheh

      Delete
  16. Blog ini udah bahas tentang gimana cara bikin blogroll widget ga? saya pengen masang beberapa blog teman di sidebar. Cuma bingung gmana..(dulu udah pernah nyoba, tapi Gatot../Gagal Total)

    ReplyDelete
    Replies
    1. coba lihat disini

      http://hzndi.blogspot.com/2012/02/minimalisasi-widget-dengan-scroll-box.html

      Delete
  17. yaaaah ribet bang :D
    hehehe

    btw, link ane pasang donk bang -_-

    ReplyDelete
    Replies
    1. kalau gitu jangan di coba dulu hehe, oh iya ane ga nyediain link di homepage gan, ada di bagian link exchange tapi ane lagi hapus dulu, soalnya ane lagi daftar adsense. Nanti kalau sudah keterima akan ane pasang lagi. mohon maaf ya gan :)

      Delete
  18. menarik tapi saya kurang tertarik. :)
    nice info anyway!

    ReplyDelete
  19. Bedewe ini nanti hasilnya semacam notif facebook nggak? Saya pengennya kayak gitu. :D
    Trus kalau bisa berbalas komentar kayak kamu tu gimana? :D
    Terimakasih yaa. :)

    ReplyDelete
    Replies
    1. yang seperti itu belum ada :)

      coba cari di daftar isi di bagian komentar :)

      Delete
  20. Asik tuch...da yang baru,nanti tak nyoba..

    ReplyDelete
  21. Asik tuch...da yang baru,nanti tak nyoba..

    ReplyDelete
  22. Mantephh tutornya, perasaan nihh dari DTE lah, kok gag taruh sumber link?

    ReplyDelete

Komentarmu menunjukan kecerdasanmu, Kalau komentar cuma buat cari link buat apa ? :)

Twitter Delicious Facebook Digg Stumbleupon Favorites More