Cara Membuat Random Post Bergerak Di Blog



Kali ini mau berbagi bagaimana membuat recent post random/mengacak dengan thumbail.. mungkin ini bisa membantu sobat kalau ada posting yang lama dan jarang di lihat orang lain lagi, dengan adanya recent post ini, karena berkerja menampilkan posting secara random, ada kesempatan posting sobat yang sudah lama dan kusam akan muncul kembali dan pengunjung pun bisa melihatnya juga.. lumayankan untuk menambahkan popularitas untuk post sobat yang sudah lama.. :b:

Fitur
  • Berganti post dengan cara Bergerak Ke Bawah
Cara
  1. masuk ke Tata Letak
  2. Tambahkan Gadget
  3. cari HTML/JavaScript
  4. masukan kode di bawah ini...
  5. Lalu save.. :)
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>

Keterangan :
  1. kode yang warna Hijau adalah kecepatan untuk berpindahnya post ke post lain,, jika perlu sobat bisa ubah kecepatannya..
  2. kode yang warna Pink adalah waktu berhentinya post/di pause.. bisa di ubah juga jika perlu..
  3. kode yang warna Orange adalah jumlah post yang akan di tampilkan di recent post. sobat bisa mengubahnya sesuka hati..  :)
nanti hasilnya akan seperti ini..
Cara Membuat Random Post Bergerak Di Blog
saya ambil dari blog saya sendiri.. hehee.. :D ,menarik tidak..? :D semoga bermanfaat saja untuk sobat semuanya.. saya hanya berbagi.. berbagi itu indah loh sobat.. hahaa.. :D ,jangan lupa tinggalkan komen yaa..? terima kasih.. :)

cara menambahkan emotion di kotak komentar blog



kali ini saya akan memberikan tutorial cara menambahkan emotion di kotak komentar blog sobat 
seperti ini contohnya :


Berikut langkahnya
1. Sign in ke blog - Rancangan - Edit HTML
2. Download Template Lengkap sebagai backup
3. Centang Expand Template Widget
4. Cari (gunakan Ctrl + F pada papan keyboard) kode </body>
5. Pasang kode berikut diatasnya <script src='http://moalmules.googlecode.com/files/comment-content-p-emoticon.js' type='text/javascript'/>

 
6. Cari kode <b:if cond='data:post.embedCommentForm'>
7. Pasang kode ini dibawahnya,apa bila kode tersebut ada 2 buah maka pilih lah yang pertama

<div style='width:550px;text-align: center;border: 1px solid #ccc;padding:  2px 2px;margin-top:  15px;font-style:bold;color:#000;font-weight:normal;font-size:10px;'> <b> <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-001.gif' width='30'/> :a: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-005.gif' width='30'/> :b: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-009.gif' width='30'/> :c: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-013.gif' width='30'/> :d: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-003.gif' width='30'/> :e: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-020.gif' width='30'/> :f: <img border='0' height='30' src='http://moalmules.googlecode.com/files/boy-emoticon-018.gif' width='30'/> :g: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-001.gif' width='30'/> :h: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-002.gif' width='30'/> :i: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-005.gif' width='30'/> :j: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-007.gif' width='30'/> :k: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-009.gif' width='30'/> :l: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-008.gif' width='30'/> :m: <img border='0' height='30' src='http://moalmules.googlecode.com/files/emo-girl-004.gif' width='30'/> :n: </b>     </div>
 atau download kode emotionnya di sini
8.kemudian letakan sekali lagi kode emotion di atas tepat  di bawah kode   <h4 id='comment-post-message'><data:postCommentMsg/></h4>

9. Simpan Template dan tes hasilnya

Catatan: Tips ini akan berhasil bila template mempunyai kode comment-body atau dengan trik mengganti kode kolom komentarnya dengan kode comment-body


selamat mencoba dan semoga berhasil :c:

Back to Top