Cara Membuat Widget Recent Comment

Widget - Sebelumnya saya sudah pernah bahasa cara membuat widget recent comments (komentar terbaru) dengan Avatar namun yang kali ini lain tanpa ada avatar dan lebih simpel. Dengan nama yang berkomentar serta artikel mana yang dikomentari dan deskripsi komentar. Itu merupakan fasilitas yang ada dalam widget recent commentes.

1. Login ke blog kamu.
2. Pilih Rancangan.
3. Pilih Tata Letak > Add Gadget > HTML/JavaScript > Copy kode di bawah ini.

<div class="recent-comments">
<div id="recent-comjudul">Yang Berkomentar</div>
<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=0;</script><script src=http://blazerracing.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script>
</div>

• Kode yang berwarna biru itu adalah jumlah kata pada setiap komentar.
• Kode yang berwarna merah adalah jumlah komentar terbaru yang ingin ditampilkan.
• Kode yang berwarna orange adalah judul widget. 
• Ganti kode yang berwarna ungu dengan URL blog Anda. 

4. Simpan. Sekarang kamu pilih menu EDIT HTML > cari kode </head> letakan kode di bawah ini tepat di atas kode </head>

<style type=text/css> .rcw-comments a {text-transform: capitalize;text-decoration:none;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;text-decoration:none;}
.recent-comments {width:300px;color:#000;font-size:12px Arial;border:1px solid #ccc;padding:0px;padding:3px;}
.recent-comments a {color:#333;font-weight:bold;text-decoration:none;}
.recent-comments a:hover {color:#ff6600;text-decoration:none;}
#recent-comjudul {color:#333;font-weight:bold;text-decoration:none;font:size:13px;background:#ccc;padding:3px;}
</style> 

5. Simpan dan lihat hasilnya.

Sumber: http://blazerracing.blogspot.com/2012/09/cara-membuat-widget-recent-comment.html

Read More »

Cara Memasang Widget Twitter di Blog

Langsung saja ikuti langkah-langkah berikut:

1. Daftar di Twitter.com terlebih dahulu pastinya hehehe :D
2. Login ke Blog agan. 
3. Klik Rancangan/Tata Letak. Kemudian klik Tambah Gadget pada Elemen Halaman. 
4. Pilih HTML/Javascript 
5. Copy paste kode HTML dibawah ini



<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='<iframe name="fbfanIFrame_0" frameborder="0" allowtransparency="true" src="http://s.moopz.com/connect.html?user='+screen_name+'" class="FB_SERVER_IFRAME" scrolling="no" style="width:245px; height:160px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; "></iframe>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("GANTI DENGAN NAMA TWITTER ANDA (jangan salah)");</script
type="text>

semoga bermanfaat

Read More »

Cara Memasang Tombol Like di Setiap Postingan

Tombol Like langsung terhubung dengan jejaring sosial Facebook, sehingga apabila da seseorang yang mengklik tombol like maka secara otomatis postingan diblog kita ajan tershare ke beranda orang tersebut.

Like Button

Dengan kata lain Tombol Like adalah cara alternatif untuk mempromosikan blog kita ke khalayak ramai. Jika sobat tertarik untuk memasang tombol like, caranya cukup mudah kok. Sobat hanya perlu mengikuti tahap-tahapnya yang akan saya share kali ini.

Screenshoot :

Cara Memasang Tombol Like di Setiap Postingan :

1. Login Blogger
2. Masuk ke Menu Template - Edit HTML - Lanjutkan
3. Beri Tanda Centang Expand Template Widget
4. Cari Kode :

<data:post.body/>

     5. Letakan kode berikut tepat dibawah kode <data:post.body/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:310px; height:31px;'/>

     6. Simpan Template.

Catatan :
Jika dalam pencarian kode <data:post.body/> sobat menemukan lebih dari 1 kode, maka pilih saja kode yang kedua.

Sekian saja postingan saya tentang Cara Memasang Tombol Like di Setiap Postingan, semoga dapat bermanfaat bagi sobat :)

Read More »

Cara Membuat Recent Post Berjalan di Blog

Cara/trik mengatur/mensetting recent post bisa berjalan/bergerak atau cara menjadikan artikel-artikel terbaru berjalan atau cara agar recent post bisa berjalan pada/di blog.

Beberapa waktu yang lalu, saya pernah posting artikel mengenai cara membuat/memberi recent post di blog, dimana artikel tersebut memang trik membuat recent post di blog, tapi recent post biasa. Nah, pada kesempatan ini saya akan berbagi artikel yang masih terkait dengan postingan tersebut yaitu trik mensetting recent post bisa berjalan diblog. Banyak cara untuk menampilkan recent post pada blog kita, sehingga blog kita bisa tampil lebih cantik. Selain dapat mempermudah pengunjung untuk lebih banyak membaca artikel kita yang lainya, sama halnya dengan artikel terkait atau related post, recent post juga bisa dengan tampilan thumbnail, nah kali ini saya akan memberi tutorial tentang cara membuat recent post berjalan yang pastinya sangat mudah untuk dilakukan.

Lalu bagaimana cara agar recent post dapat berjalan di blog? Ikuti tutorial dibawah ini:

1. Masuk ke dashbor blog sobat.
2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script.
3. Masukan kode berikut ke dalam box HTML/Java Script tadi

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;

Read More »