Slide Out Recommended Blog Post

Menjaga supaya pengunjung menjadi betah mengunjungi blog sobat dan hal ini merupakan trik jitu untuk meningkatkan trafik pengunjung blog. Slide Out Recommended Blog Post merupakan widget yang menampilkan link postingan artikel yang ada di blog sobat secara acak dan saling terkait dengan label postingan artikel yang sedang di baca pengunjung blog. Widget ini menggunakan animasi slide out untuk animasi tampilan dan akan tampil ketika pengunjung blog berada di akhir halaman blog.

Cara Pemasangan :

Klik tombol "Add to Blogger" untuk memasang script

<script>var mzcslidein_custom_css=true;</script> <style> #mzcslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-radius:5px;border:3px solid #619bb9;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;} #mzcslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;} #mzcslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;} #mzcslidein a,#mzcslidein a:hover,#mzcslidein_title{text-decoration:none;color:#1616F5;} #mzcslidein .close,#mzcslidein .expand,#mzcslidein .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;} #mzcslidein .help{right:35px;} #mzcslidein_title,#mzcslidein_image{float:left;width:80px;} #mzcslidein_title{width:290px;} </style> <div id="mzcslidein" style="display:none;"> <div class="help">?</div> <div class="expand">+</div> <div class="close">X</div> <p>Recommended for you</p> <div id="mzcslidein_image"></div> <div id="mzcslidein_title">Loading..</div> </div> <script> if (document.location.href.split("/").length == 6 && document.location.href.indexOf(".html") != -1) { if (typeof mzc_onload_queue == 'undefined') var mzc_onload_queue = []; if (typeof mzc_dom_loaded == 'boolean') mzc_dom_loaded = false; else var mzc_dom_loaded = false; if (typeof mzc_async_loader != 'function') { function mzc_async_loader(src, callback, id) { var script = document.createElement('script'); script.type = "text/javascript"; script.async = true; script.src = src; script.id = id; var previous_script = document.getElementById(id); if (previous_script) if (previous_script.readyState == "loaded" || previous_script.readyState == "complete") { callback(); return } else { script = previous_script } if (script.onload != null) previous_callback = script.onload; script.onload = script.onreadystatechange = function () { var newcallback; if (previous_script && previous_callback) newcallback = function () { previous_callback(); callback() }; else newcallback = callback; if (mzc_dom_loaded) { newcallback() } else mzc_onload_queue.push(newcallback); script.onload = null; script.onreadystatechange = null }; var head = document.getElementsByTagName('head')[0]; if (!previous_script) head.appendChild(script) } } if (typeof mzc_domLoaded != 'function') function mzc_domLoaded(callback) { mzc_dom_loaded = true; var len = mzc_onload_queue.length; for (var i = 0; i < len; i++) { mzc_onload_queue[i]() } } mzc_domLoaded(); mzc_async_loader("", function () { mzc_async_loader("http://monozcore-project.googlecode.com/files/recent_post_slide.js", function () {}, "mzc-out-slide") }, "jQueryjs") } </script>
Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.

Pasang penanda akhir halaman yang akan digunakan sebagai batas tulisan artikel dan menampilkan widget. Cari kode dibawah ini pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian).
```
<div class='post-footer-line post-footer-line-1'>
```
atau
```
<p class='post-footer-line post-footer-line-1'>
```
atau
```
<data:post.body/>
```
Setelah kode di atas sudah ketemu, selanjutnya copy-paste kode di bawah ini dan letakan kode tepat di bawahnya.
```
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='mzcslidein_place_holder' style='display:none'/>
</b:if>
```

Klik "Save" dan lihat hasilnya...

Kustomisasi Tampilan :

Sobat blogger dapat merubah tampilan kode CSS widget Slide Out Recommended Blog Post, tetapi sebelumnya pasang script berikut ini di atas kode </Head> pada template blog sobat.

<script>var mzcslidein_custom_css=true;</script>

Jika variabel diatas tidak dimasukan (diset) maka tampilan kode CSS widget Slide Out Recommended Blog Post akan menampilkan kode CSS default. Apabila variabel sudah di pasang maka sobat dapat merubah kode CSS tampilan widget berikut ini. Silakan kreasikan tampilan widget menurut selera sobat.

<style>
#mzcslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-radius:5px;border:3px solid #619bb9;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;}
#mzcslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;}
#mzcslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;}
#mzcslidein a,#mzcslidein a:hover,#mzcslidein_title{text-decoration:none;color:#1616F5;}
#mzcslidein .close,#mzcslidein .expand,#mzcslidein .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;}
#mzcslidein .help{right:35px;}
#mzcslidein_title,#mzcslidein_image{float:left;width:80px;}
#mzcslidein_title{width:290px;}
</style>

Silakan "Save" dan coba lihat hasilnya...

.: Semoga Bermanfaat :.

Slide Out Recommended Blog Post

Tidak ada komentar:

Posting Komentar