Widget Rekomendasi Post Slide Show

5/14/2012

Recommended Post Slide out for BloggerSatu lagi widget cantik dari blogger pluggin. Widget ini oleh pembuatnya diberi nama Recomended Post Slide Widget. Widget hanya aktif di halaman posting. Widget ini berisi rekomendasi posting blog, yang akan muncul ketika halaman ter-scroll ke bawah di bagian paling bawah postingan. Jendela munculan dari bagian bawah kanan yang berisi rekomendasi posting widget

Cara Kerja Widget Slide Out

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

widget slide out 

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

All posts here about online store, tips, tricks, SEO, Store Service, store builder with Blogspot, Wordpress or Opencart.
Contact me if You need help or more question about service. Enjoy reading.....

Artikel Terkait

Previous
Next Post »

2 komentar

Write komentar
11 Maret 2013 10.48 delete

langkah2nya buanya banget tuh,,

Reply
avatar
rajanedesa
AUTHOR
5 April 2013 15.40 delete

Dipersingkat bisa gak ya? hehe..

Reply
avatar

#/ Dilarang melakukan SPAM.
#/ Dilarang Komentar mengandung Link/URL di kolom komentar
#/ Dilarang Komentar SARA dan Makian
#/ Dilarang ngiklan
Melanggar ketentuan di atas, komentar langsung dihapus..!!!
Emoticon