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
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>
.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'>
$('#note').slideNote({
closeImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixkgplJ9p6ldX97gAmN6KHgqOiea8V1mTkBWdEFJemRTg9B-FWkgDpVM8NuhXnkVbaaZd_xlwr81TOpg61g7Yt5EXxmbgjtwut6mdFS5Fx96IPlpxDj_tFjYWkAAOZTG47BRvLjmUcavY/s320/slidenote.close.png'
});
</script>
<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'>
$('#note').slideNote({
closeImage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixkgplJ9p6ldX97gAmN6KHgqOiea8V1mTkBWdEFJemRTg9B-FWkgDpVM8NuhXnkVbaaZd_xlwr81TOpg61g7Yt5EXxmbgjtwut6mdFS5Fx96IPlpxDj_tFjYWkAAOZTG47BRvLjmUcavY/s320/slidenote.close.png'
});
</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 :)
Artikel Terkait:
Widget dan Tips Blog
- Artikel Terkait atau Related Post Simple, Ringan dan Seo Friendly Widget
- Cara membuat widget Artikel terkait di blog tanpa edit template
- cara menggabungkan ccs dan html
- Membuat Menu Navigasi Bertingkat
- Membuat Navigasi Menu Fixed Full RotateX
- Membuat Menu Wrapper Melayang Di Atas Blog
- Daftar Artikel Terbaru Dalam Menu Navigasi
- Tampilan Menu Navigasi Blog Model Fly Out.
- Membuat Soal Online di Blog
- Cara Memasang Slide Show Postingan Di Blog
- Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog
- Cara Mudah Memasang Komentar Facebook Di samping komentar Blog
- Memasang Widget Random Ayat Al-Quran
- Cara Membuat Sumber Link Otomatis Saat Artikel Di copy Paste
- Cara Mengatasi dan Memulihkan Blog yang di Hack/Deface
- Cara Membuat Email dengan Nama Website sendiri
- Cara Membuat Hosting dan domain Gratis Di IdHostinger
- Membuat Animasi Flash Banner
- Cara Membuat Text Area
- Membuat Scroll Untuk Daftar Link
- Memasang Kategori Untuk Tiap Tulisan
- Memasang read more otomatis
- Memasang Tulisan Terkait
- Cara Mengganti Template Blog di Blogger
Tips dan Trik
- cara menggabungkan ccs dan html
- Membuat Soal Online di Blog
- Cara Memasang Slide Show Postingan Di Blog
- Cara Membuat Slide Show Foto / Gambar Pada Postingan Blog
- Cara membuat ID Blackberry BBM
- Free Download BBM Untuk Android dan iPhone
- Install Blackberry Massenger BBM di PC / Laptop Update 2014
- Pertolongan Pertama Pada STROKE
- Cara membuat text di Pivot
- cara cepat membuat animasi 3d dengan blender
- Cara Mudah Memasang Komentar Facebook Di samping komentar Blog
- cara Bajak CD Express Rip
- Cara Mengetahui IP Website Melalui CMD
- Cara Membuat Sumber Link Otomatis Saat Artikel Di copy Paste
- Cara Mengatasi dan Memulihkan Blog yang di Hack/Deface
- Cara Membuat Email dengan Nama Website sendiri
- Cara Hack Facebook All In One
- Cara Membuat Hosting dan domain Gratis Di IdHostinger
- Membuat Animasi Flash Banner
- Membuat Scroll Untuk Daftar Link
- Memasang Kategori Untuk Tiap Tulisan
- Memasang read more otomatis
- Memasang Tulisan Terkait
- Cara Mengganti Template Blog di Blogger
Tidak ada komentar:
Posting Komentar
JANGAN LUPA BERKOMENTAR DAN UNGKAPKAN PENDAPAT ANDA TENTANG ARTIKEL INI.
NO SARA
NO PORNOGRAFI
NO SPAM
NO LINK ON
NO LINK OFF
JANGAN LUPA UNTUK SELALU MEMBAGIKAN ARTIKEL INI KE JEJARING SOSIAL YANG ANDA SUKA YA :)