Pages

DonkeyMails.com: No Minimum Payout
Server : Channel :
Use List | DalNet Commands (Open) | Help

Saturday, May 26, 2012

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 :
  • Login ke blog sobat...

  • Klik tombol "Add to Blogger" untuk memasang 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 :.
DMCAProtected by CopyscapeMyFreeCopyright.com Registered & Protected
Share :
Comments
Tweets
4 Comments

4 comments:

  1. ga pake java script? bisa ya bos....? btw aku dah follow nih, follback ya, thanks..

    ReplyDelete
  2. iklan yang diatas kok , ada kotak pinggirannya ?? gimana bikinnya ya ??

    ReplyDelete
  3. @ihgilailmam: Sudah dikirim bos caranya lewat email...

    ReplyDelete
  4. @monozcore : Ok,terimakasih atas bantuannya...

    ReplyDelete