Widget Rekomendasi Post Slide Show

Cara Kerja Widget Slide Out
Scroll halaman sampai ke bawah posting dan anda akan melihat Recommended Slide Out seperti pada gambar di bawah ini.

Tambahkan Recommended Post Slide out Widget ke Blog Anda
Untuk menambahkan widget ke blog anda, Anda bisa memakai tombol widget installer di bawah ini.
Pengaturan Recommended Slide out
Jika anda ingin melakukan editing /pengaturan widget tersebut, berikut ini beberapa tutorialnya.
1. Penanda Akhir Post – Slide muncul ketika pengguna meng-scrolls turun ke bawah halaman post dalam Blog anda.(bagian bawah halaman secara default) Untuk menandari titik ini, anda bisa menambahkan sebuah elemen HTML di sana. Element hasrus emmiliki id bpslidein_place_holder
misalnya : <div id='bpslidein_place_holder'></div> yang akan melakukan pekerjaan tersebut.
Tempat terbaik untuk menambahkan penanda ini ada di akhir dari posting. Jika anda ingin melakukannya dengan mudah, anda bisa menambahkannya ke Blogger Template anda.
Di dalam template anda cari salah satu kode berikut,(Jangan lupa mencentang expand Widget Templates)
<div class='post-footer-line post-footer-line-1'>
atau
<p class='post-footer-line post-footer-line-1'>
atau
<data:post.body/>
Tepat di bawah kode yang anda temukan di atas, tambahkan kode berikut dan simpan/save template
<b:if cond='data:blog.pageType == "item"'> <div style='display:none' id='bpslidein_place_holder'></div> </b:if>
Sekarang ketika pembaca men-scrolls ke bawah, slide akan terbuka.
2. Pengaturan Tampilan dan Feel dari Slide out.
Anda bisa dengan jelas mengatur gaya dari Recommended Slide out. Tetapi sebelum anda melakukannya, anda harus menambahkan definisi variable ini ke template anda:
<script>var bpslidein_custom_css=true;</script>
Ini harus di tambahkan di tempat di atas Slide Out Widget. Jika variable ini tidak di set, akan dipakai default StyleSheet untuk memisahkan Recommended Slide out.
Sekali variable ini di-set menjadi true, anda bisa menambahkan definisi CSS anda sendiri. Anda bisa menambahkan CSS anda di Template Designer > Advanced > Add CSS
Ini adalah set default dari Style definitions yang diterapkan ke Widget. Anda bisa memodifikasinya dan memakainya.
#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;} #bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;} #bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;} #bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;} #bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;} #bpslidein .help{right:35px;} #bpslidein_title,#bpslidein_image{float:left;width:80px;} #bpslidein_title{width:290px;}
3. Hal lain yang bisa anda edit
Anda bisa mengedit Judul dari Widget dan menambahkan teks dengan mengedit Konten Widget.
Selamat Mencoba
langkah2nya buanya banget tuh,,
BalasHapusDipersingkat bisa gak ya? hehe..
BalasHapus