“Jaga agar pengunjung terpaku lama di situs Anda” Inilah yang ingin dilakukan oleh setiap blogger di luar sana. Widget Slide Out Tulisan yang Disarankan tidak hanya itu. Ini semacam undangan kepada pembaca untuk membaca posting baru setelah dia membaca salah satu entri blog Anda. Anda mungkin pernah melihat widget semacam ini di banyak situs web populer seperti New York Times, Mashable, Times of India dll.
Saya juga menyukai gagasan itu dan menemukan bahwa ada orang lain yang telah membuat cuplikan jQuery yang melakukan hal yang sama. Anda dapat membaca tentang kode luar biasa ini di blog Mary Lou di http://tympanus.net/codrops/2010/04/13/end-of-page-slide-out-box/
Saya telah membuat beberapa modifikasi pada cuplikan sehingga dimuat secara asinkron tanpa mempengaruhi pemuatan laman. Slide Out akan menampilkan posting acak dari Blog Anda. Posting acak diambil dari Umpan Blog Anda menggunakan Ajax.
Demo Slide Out
Gulir ke bawah ke bagian bawah posting dan Anda akan melihat Recommended Slide Out.
Tambahkan Widget Geser Tulisan yang Disarankan
Untuk menambahkan widget ke blog Anda, Anda dapat menggunakan penginstal satu klik ini.
Menyesuaikan Slide yang Disarankan
1. Penanda Akhir Posting - Slide keluar ketika pengguna menggulir ke titik tertentu di Blog Anda. (Bagian bawah halaman secara default) Untuk menandai titik ini, Anda dapat menambahkan elemen HTML di sana. Elemen harus memiliki id bpslidein_place_holder
mis: <div id = 'bpslidein_place_holder'> </div> akan melakukan pekerjaan itu. Tempat terbaik untuk menambahkan penanda ini adalah di akhir posting. Jika Anda ingin melakukannya dengan mudah, Anda dapat menambahkan ini ke Template Blogger Anda.
Di template Anda Temukan, (Anda harus memperluas Template Widget)
<div class = 'post-footer-line post-footer-line-1'>
atau
<p class = 'post-footer-line post-footer-line-1'>
atau
<data: post.body />
Segera di bawah ini, tambahkan potongan berikut dan simpan templat kami
<b: if cond = 'data: blog.pageType == "item"'> <div style = 'display: none' id = 'bpslidein_place_holder'> </div> </ b: jika>
Sekarang ketika pembaca menggulir ke bawah ke div ini, slide akan terbuka.
2. Menyesuaikan Tampilan dan Perasaan Slide keluar.
Anda jelas dapat menata Slide yang Direkomendasikan. Tetapi sebelum Anda melakukannya, Anda harus menambahkan definisi variabel ini ke template Anda
<script> var bpslidein_custom_css = true; </script>
Ini harus ditambahkan di suatu tempat di atas Widget Slide Out. Jika variabel ini tidak disetel, StyleSheet default akan digunakan untuk meningkatkan Recommended Slide out.
Setelah variabel ini disetel ke true, Anda dapat menambahkan definisi CSS Anda sendiri. Anda dapat menambahkan CSS di Templat Perancang > Lanjutan > Tambah CSS
Ini adalah set standar definisi Gaya yang diterapkan pada Widget. Anda dapat memodifikasinya dan menggunakannya.
#bpslidein {z-index: 5; lebar: 400px; tinggi: 100px; bantalan: 10px; warna latar: #fff; batas atas: 3px padatan # 1616F5; posisi: tetap; kanan: -430px; bawah: 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: huruf besar; font-family: Arial, Helvetica, sans-serif; spasi huruf: 1px; warna: # 555;} #bpslidein_title {color: # 555; font-weight: 700; font-size: 16px; margin: 10px 20px 10px 0;} #bpslidein a, # bpslidein a: hover, # bpslidein_title {teks-dekorasi: tidak ada; warna: # 1616F5;} #bpslidein .close, # bpslidein .expand, # bpslidein .help {border: 2px solid #EEE; kursor: pointer; warna: # 9A9AA1; lebar: 13px; tinggi: 15px; bantalan: 2px 0 0 5px; posisi: absolut; kanan: 10px; ukuran font: 17px; font-berat: 700; font-family: Arial, Helvetica, sans-serif; ukuran font: 12px;} #bpslidein .help {right: 35px;} # bpslidein_title, # bpslidein_image {float: left; width: 80px;} #bpslidein_title {width: 290px;}
3. Hal-hal lain yang dapat Anda edit
Anda dapat mengedit Judul Widget dan teks Memuat dengan mengedit Konten Widget.
Rencana masa depan
Ini adalah versi awal dari widget ini, dan versi yang lebih baik akan disediakan berdasarkan umpan balik yang saya dapatkan :) .. Jika Anda menyukai Slide Out, jangan bagikan dengan teman Blogger Anda. Saran Anda pasti akan membantu saya dalam meningkatkan widget. :)
