memasang widget burung Twitter terbang di Blogger

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot


Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget burung twitter terbang ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

Pertama-tama silahkan login di Blogger


Klik Layout > Add Gadget > Html/Javascript
Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjccxpnPYpc-un3k7okU0FNnWh2uAcFcw-zkdKFz-xmiNpskE4zJRk_v3HIXboiBN94C_RmAXAy0T4H1NDOEid0tbUV8jt8_ZkPqz0EO2caMJX-KzouoKvwP6q03KkdDMNzFsGz-2UUsts/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>





Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat
Simpan dan lihat hasilnya
Warna Pilihan Burung Terbang Twitter

Untuk membuat warna burung twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicV7JZMxO98COHoa3Oa0Q2nEFjjnwpC4q1cL6MKeGYov0kv_d3kS6PxFdd8Mpp3lrIkdL8AmS9yxUyvjxXB4FXC77-MIvhyS5NsCFbu9bontALpjJVv6MZlttr3ZMQeNy3Bd6NPRMbwwQ/s1600/yellow+bird.pngWarna Hitam


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJJSS6TrtPZgr3H2nxD1hSR3BgKz-CwpEDaCMRZWXl6JwCYYPME1p4lJlvJ8yIgHvEl-gO5f0p4ENCgu99Lu6-xlXhaNo45bDjSetctETvtgrIvZ0PNNcWKZz0UPlVD-8qk02sYtH-_Q/s1600/black+bird.pngWarna Biru


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgshYIwMotxs7vDuITBtXlsbp1RMgtiLsIt2joWGkzN91Kxy5Dc6s-cH2pLS6eYjcKI8FQqjeVrxSvRwzacE7HTMD63gUX1pKpkclwaWzSQAYEbffqn5a6rrMvh-Dl9rv7b_7-8xhndlKk/s1600/Blue+bird.pngWarna Coklat


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSl5c8_bcLHbE1idOwCZQwT0XhUcLjGuILij-OH2PrwGC9EsxecU7zlokzIdkMDXLgEvRq3kVGobL5jEsmHEfYAGbq1Ta_Tk39JW064uREvmg2hyphenhyphenl2l1LrOvM69KMohCjznMDEuHSbFHI/s1600/brown+bird.pngWarna Hijau


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbTsLh0K-dDJ_ez_R8swoCXTOJQasryk1TT670cOZOgkshtTnAB_539Cg8wbRcsQS6f40RPKfXveki66GPEz-leDudIm7j8EnDwHV6VuXzXVhyfFjUhU1FcylX5PXZhLI9EkcFE9ECftA/s1600/Green+bird.pngWarna Ungu


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI6elF7yXC6HD684BhK-10I-GD9EO0XIPwjEdHNQ-MoStx4nmzKJTqQA8Cj6MKsPj2lzGh1T3yIu2IqSxs92RVW4O_CfAMb2bSHBFMIQnN5JegYbn47Hsk7jF36VZymOEh0Z_Aoa9kaqk/s1600/purple+bird.pngWarna Putih


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiMyoPD2j7mIsEYv3pGYtyYwxnQgudNc73k0i2t0jXLlN6dIItBQDDi_9IPj3VZl8O_q4d00G41zr8DoVAgnLZkz3YPVlXYuMd_S-ndtoj4Z0jQbT6lyINVwK6FyR1_NwAtBP2cIi2nc/s1600/white+bird.pngWarna Merah


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtKBUDJmZrKaHdC1mDSC8ybW6aB_gZcKOpinYfB97_fIDs5TwCXYonE5QVsYk-xpEqtmQavd_ZtXeBSF5MBf87t73YGQ4_j1bGWxkux2XuWhex1Mzk9mx1_8u5uwriSeHZocnpiyL1HHw/s1600/red+bird.png
Dan terakhir jangan lupa disimpan
Good luck Sob..!

cara membuat headline news di blog

Pernah lihat berita? dan lihat tulisan berjalan di bawah layar berita? nah itulah yang akan kita buat saat ini langkah pertama:
Berikut Langkah Membuat Headline News :
1. Login ke akun blogger sobat
2. Masuk ke Rancangan pilih Elemen laman
3. Klik Add Gadget pilih HTML/JavaScript
4. Masukkan kode berikut

<script type="text/javascript">
var hn_url_blog="http://berbagiuntuk-sahabat.blogspot.com/";
var hn_jumlah_post= 15;
var hn_warna_latar="#333333";
var hn_warna_garis="#000000";
var hn_posisi="top";
var hn_tampilkan_judul=true;
var hn_backlink= true;
</script>
<script src="http://naughtyric.googlecode.com/files/Headlinenews.js"></script>

5. Simpan

Perhatikan kode yang berwarna biru ganti sesuai dengan keterangan berikut :
hn_url_blog adalah URL blog Sobat.
hn_jumlah_post adalah jumlah judul artikel yang mau ditampilkan.
hn_warna_latar adalah kode warna untuk latar belakang headline news.
hn_warna_garis adalah kode warna untuk garis bingkai headline news.
hn_posisi untuk menentukan posisi headline news, apakah di atas ("top") atau di bawah ("bottom").
hn_tampilkan_judul bernilai true untuk menampilkan tulisan "Headline news of NAMA BLOG SOBAT" di bagian kiri dan false jika tidak ingin menampilkannya.

Sekedar tambahan kalo ingin mengganti kode warna bisa gunakan HTML Color Code
Jika artikel Cara Membuat Headline News di Blog bermanfaat atau ada yang kurang bisa ditambahkan, silahkan berikan komentar sobat.
Selamat mencoba .

widget efek banjir diblog

buat sobat blogger yg pada doyan mempercantik blog, ada widget yang menarik nih, sobat bisa liat diatas, cara masangnya gampang kok sob, tinggal klik tata letak-->add widget--->pilih html/java script
copykan deh script dibawah ini :

<script language="javascript">
nd_mode="flood";
nd_vAlign="bottom";
nd_hAlign="right";
nd_vMargin="10";
nd_hMargin="10";
nd_taget=_blank;
</script>
<script language="javascript" src="http://aksota.googlecode.com/files/efek_banjir.js">
</script>
good luck

Cara Menghilangkan Tanda Obeng dan Tang di Blog

Tanda obeng sebenarnya bukan merupakan suatu masalah, karena tanda tersebut hanya muncul jika pemilik blog sedang login di account blognya dan hanya muncul di komputer orang tersebut, terkadang memang tanda tersebut muncul sewaktu orang lain melihat blog kita tapi kejadian itu jarang terjadi.

Cara menghilangkan tanda tersebut seperti dibawah ini:
1. login ke akun blogger sobat
2. masuk ke rancangan--> edit html --> centang kolom expand widget template
3. cari kode ini
]]></b:skin>
4. copy dan paste kode dibawah ini tepat diatas kode nomer 3 tersebut


.quickedit{
display:none;
}

5. Klik tombol Simpan Template dan lihat hasilnya .
6. Selesai.

blog sobat ditolak adsense yah

Google Adsense - sampai saat ini masih menjadi program PPC terbaik. Mengapa dikatakan sebagai program PPC Terbaik? Salah satu alasannya ialah karena pembayaran per kliknya yang cukup tinggi serta iklannya yang mampu beradaptasi dengan tema blog kita. Sudah banyak blogger yang bisa menghasilkan ratusan bahkan ribuan dollar dari bisnis PPC ini. Memang sangat menggiurkan bukan? Tapi sayang menjadi member dari google adsense tidak semudah yang kita bayangkan. Banyak juga blogger yang mendapatkan penolakan ( termasuk saya sendiri ), karena tidak lulus dalam tahap review dsb.

Perasaan saya waktu ditolak oleh google adsense rasa itu seperti hilang harapan saya. Mungkin waktu itu di blog saya masih terdapat konten yang hasil copas atau ada konten yang memiliki hak cipta. Tapi entahlah saya juga tidak tahu apa alasan pastinya, karena pihak google tidak memberitahuakan alasan mengapa blog saya ditolak. Tapi yang pasti, blog saya masih belum memenuhi persyaratan untuk dapat menjadi member dari google ads.


Nah, bagi sobat yang pernah mengalami hal yang sama dengan saya, jangan bersedih hati, karena ternyata masih banyak program PPC yang bisa kita ikuti untuk bisa mendapatkan uang dari internet. Penasaran? Berikut selengkapnya :


1. Indonesia Blog Network
Indonesia Blog Network atau lebih dikenal dengan IBN adalah penyedia layanan PPC Indonesia yang menarik untuk diikuti karena mereka berani membayar publishernya dengan bayaran yang cukup tinggi yaitu rata-rata per klik dibayar Rp.2000. Pembayarannya dilakukan dengan cara ditransfer ke rekening bank yang kita miliki dengan batas minimal PO Rp.300.000. Sampai saat ini IBN sudah mempunyai sebanyak 11.255 member. Namun ingat, untuk bergabung di IBN tidak semudah yang kita bayangkan, karena harus melewati beberapa proses dulu. Tapi bagi sobat yang berminat untuk mencobanya, silahkan kunjungi langsung situs resminya : http://www.idblognetwork.com/

2. SITTI
SITTI.co.id adalah situs penyedia layanan PPC yang juga menarik untuk dicoba karena mereka juga berani membayar publishernya Rp.600 hingga Rp.2000 / kliknya. Pemabayaran dilakukan dengan cara transfer uang melalui rekening yang kita miliki dengan minimal PO Rp.100.000. Bagaimana apakah anda berminat? jika anda berminat silahkan langsung kunjungi situs resminya : http://www.sitti.co.id/

3. KlikSaya.com
Klik saya adalah PPC Indonesia yang membayar publishernya antara Rp.300 hingga Rp.800 / kliknya, lumayanlah buat nambah-namah penghasilan dari ngeblog hehe. Pebayaran dapat dilakukan via rekening bank yang kita miliki. Nah bagi anda yang berminat silahkan kunjungi langsung situs resminya :
http://www.kliksaya.com/

4. Bidvertiser

Bidvetiser merupakan penyedia layanan PPC terbaik setelah google adsense menurut saya. Selain itu bidvertiser tidak memberikan batasan untuk bisa menjadi membernya. Tidak seperti google adsense yang mengharuskan kita untuk memnuhi banyak syarat. PPC ini lebih cocok diikuti oleh blog yang berisi tentang download konten, karena iklan dari bidvertise biasanya berisi tombol download dan play, ataupun make money online. Proses pembayarannya pun menurut saya lebih gampang karena kita dapat melakukan PO via Paypal, Cek, ataupun western Union. Nah, bagi sobat yang berminat untuk mendaftar, silahkan klik tombol bidvertise berikut ini :



5. Chitika

Chitika merupakan program periklanan untuk Advertiser maupun Publisher berbasis PPC (Pay per Click) seperti halnya Google Adsense. Tapi chitika punya kelebihan diantaranya tidak mempunyai banyak syarat seperti google ads. Nah bagi sobat yang berminat untuk bergabung sebagai advertiser / publisher di chitika, silahkan kunjungi langsung situs resminya : https://chitika.com/

Sebenarnya "mungkin" masih ada banyak program PPC bagus lainnya, namun untuk saat ini hanya ini yang dapat saya share. Tapi jika sobat penasaran sobat juga dapat mencari daftar PPC terbaik lainnya di google.com. Itulah cara bagaimana menghasilkan uang dari internet khusunya untuk para blogger.


Demikian yang dapat saya sampaikan mengenai Blog sobat Ditolak Google Adsense? Ini Solusinya!. Mohon maaf atas segala kekurangannya. Semoga artikel ini dapat memberikan manfaat. Terimakasih

Cara Membuat Slider Carousel Otomatis Dari Label

berikut caranya sob :

Masuk dulu ke akun Blogger sobat
Pada Dasbor pilih Template - Edit HTML - jangan lupa expand widget templatenya dicentang
Cari tag ]]></b:skin>
Copas Script berikut diatas ]]></b:skin>

#bbccarousel{
width: 980px;
height:125px;
border-bottom:1px solid #ccc;
position:relative;
display:block;
background:#5599e6;
margin-bottom:8px;
}
#bbccarousel h3{
color:#555;margin:2px;
}
#bbccarousel .container{
position:absolute;left:24px;
width:930px;
height:125px;
overflow:hidden;
}
#bbccarousel .thumb{float:left;margin-right:5px;}
#bbccarousel #previous_button{
position:absolute;
width:24px;height:125px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyUsHLwWl-OmOlvdBHpqXtrzvTv3rLl3Upe8JBBilhJo0sAZVrBdB-CEo8q1LkrFO0OBsg0cR8wronnnlngBfh2oY9P0soZNTN0j2cyxfBJg2-mSuQXl7fVjePKl8M57Y7fG4qHFTWEVZ0/s1600/previous.png) center;z-index:100;cursor:pointer;}
#bbccarousel #next_button{
position:absolute; right:0;
width:24px;height:125px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVe8BmU2yeHv0h6aUWrK3rLGBBNaO-bIKwIN28FFuapFUMi8Y0MYxJOdAQXMyR9WILyHM0KkAYV9SjOcWrWdEIVWuoAQ00mr4B0fZigp-fo2Qmc2DSAhAqDvbJorrMNKCD9icxbpufuwqV/s1600/next.png) center;z-index:100;cursor:pointer;}
#bbccarousel #next_button:hover,#bbccarousel .thumb:hover,#bbccarousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
#bbccarousel ul{
width:100000px;
position:relative;
margin-top:10px;
}
#bbccarousel ul li{
background:#ebebeb;
display:inline;
float:left;text-align:left;
font:bold 11px Arial;
border:0px solid #ccc;
width:212px;
height:90px;
margin:0 2px 20px 6px;
padding:6px;
}
#bbccarousel ul li a.slider_title{
color:#222;
display:block;
margin-top:0;
padding-top:0;
}
#bbccarousel ul li a.slider_title:hover{color:#1b5d97}
#bbccarousel a img{
display:block;
background:#fff;
margin-top:0;
}

Selanjutnya Copas script berikut dibawah ]]></b:skin> atau diatas </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/blogbegocreation/javascript/bbccarousel.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqijErhiyYT5jNjV0wJn2iztQsBwgQM4r2UZvLZoZb19pdv8eL4Ic8lYpSvkaY1h4i4ePt9WYlII0ubj4Lmyau6iP0SXo6XQuNtz_zHvd0YoNVhNTnOVvcWkD9IUthvxRZ0l7TsuFoCTg/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryTitle = 25;
numposts1 = 50;
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Ags","Sep","Okt","Nov","Des"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h3>'+daystr+'</h3><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Simpan Template sobat
Teks yang saya beri warna merah, seandainya pada Template sobat sudah berisi walaupun serialnya berbeda - bisa dihilangkan, cukup pasang satu saja
Teks yang saya beri warna Kuning adalah jumlah Posting yang dipakai Slider, bisa dirubahLangkah terakhir adalah memanggil Slide, disini ada dua cara

» Langsung di Template dan » Tambah Gadget [INGAT Pilih salah satu lho]

» Langsung di Template :

Beri tanda centang disamping Expand Template Widget
Cari <div id='main-wrapper'>
Copas script berikut diatasnya [sebelumnya di Parse dulu]» Tambah Gadget :

Pada Tata Letak pilih Tambah Gadget - HTML / JavaScript
Copas script berikut kedalamnya :

<div id='bbccarousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(" <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<div class='clear'/></div>
<div id='next_button'/></div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$("#bbccarousel .container").bbcCarousel({
auto:4000,
scroll: 3,
speed: 800,
visible: 4,
start: 1,
circular: true,
btnPrev: "#previous_button",
btnNext: "#next_button",
});
})})(jQuery)
</script></div></div></div>

Simpan Kembali Template / Blog sobat

Kelebihan Slider Carousel untuk Daftar Isi ini selain bisa dipanggil lewat Gadget juga bisa dipakai untuk Slider berdasarkan Label / Katagori

Caranya sebagai berikut :
misalnya sobat ingin Slide dengan Label tutorial maka

numposts1 =50, bisa sobat sesuaikan dengan jumlah Label yang ingin dipakai Slide
Tambahkan label1="tutorial", dibawah numposts1 = 50; 

Ganti <script src=\"/feeds/posts/default?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"> dengan <script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\">

klo udh siap Simpan deh Template sobat

skian dulu sob, smoga sukses

Cara memasang Drop Down dengan sub tag

Cara memasang Drop Down dengan sub tag :

Silahkan Login ke blogger sobat
pilih Rancangan > Edit Html ( jangan lupa Centang " Expands Template Widget")
cari kode </head> tekan ctrl+f  atau f3untuk memudahkan sobat mencarinya.
lalu taruh kode dibawah ini diatas kode </head>

<link rel="stylesheet" type="text/css" href="http://dsai.588.googlepages.com/slidemenu_hori.css" />
<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="http://dsai.588.googlepages.com/slidemenu_horiz.js"></script>
lalu di save deh sob

slanjutnya buka menu elemen halaman (tata letak)
Lalu add a gadget pilih HTML/JavaScript
masukkan kode dibawah ini :

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://vikrymadz.blogspot.com">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://vikrymadz.blogspot.com">Item</a></li>
</ul>
<br style="clear: left" />
</div>
lalu di save deh sob, dan letakkan gadget ini persis dibawah header lalu di save lagi. Sekian sob postingan Blogger Tutorial tentang Cara membuat menu dropdown dengan sub tag nya., semoga sukses.

Cara Membuat Widget Recent Post Berupa Gambar Kotak-Kotak diblog

Dari gambar di atas kita sudah bisa melihat bahwa yang akan ditampilkan adalah gambar dari masing-masing postingan di blog sobat. Maka dari itu akan membuat blog sobat lebih menarik untuk dilihat dan pasti juga akan lebih hemat tempat dan fungsional. kbanyakan para blogger menggunakan widget ini karna lebih efisien dan efektif.

Berikut ini adalah langkah-langkah nya :

1. Masuk ke blogger >> Dashboard >> Tata Letak >> Add Gadget
2. Pilih Gadget HTML/Javascript.
3. Masukkan kode javascript di bawah ini.

<div id='bp_recent'></div>
<script style='text/javascript' src='http://bloggergadgets.googlecode.com/files/recentposts_orig.js'></script>
<script style='text/javascript'>
var numberOfPosts = 20;
var showPostDate = false;
var showSummary = false;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
</script>
<script src='http://rabbitfikri.blogspot.com/feeds/posts/summary?max-results=20&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
</div>

Ganti http://rabbitfikri.blogspot.com/  dengan alamat blog sobat,

Cara Membuat Tombol Share Keren di Blog

bagi sobat blogger yang ingin membuat tombol share keren seperti gambar diatas, silahkan sobat ikuti cara berikut :

1. sobat Login di Blogger.com

2. Masuk ke Tata Letak

3. Tambahkan Gadget

4. Pilih HTML/JavaScript

5. sobat Masukin ja Kode berikut ini :

<!-- Start Shareaholic Sassy Bookmarks HTML-->
<div class='shr_ss shr_publisher'>
</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<!-- End Shareaholic Sassy Bookmarks script -->

lalu simpen deh sob.......

smoga berhasil

Membuat Komentar Slide Keren Di Blog

Langsung saja Langkah-langkahnya Bro :
Cari kode ]]></b:skin> Letakkan kode berikut di Atasnya

a.openpanel { 

display:block; 

clear:both; 

width:auto; 

padding:0px 0px; 

text-align:center; 

font-weight:bold; 

line-height:32px; 

background-color:#39f; 

color:white; 

text-decoration:none; 

margin:0px 0px; 

-webkit-box-shadow:0px 1px 1px rgba(0,0,0,0.2);

 -moz-box-shadow:0px 1px 1px rgba(0,0,0,0.2); 

box-shadow:0px 1px 1px rgba(0,0,0,0.2); 

position:relative; } 

a.openpanel em { width:0px; 

height:0px; 

display:block; 

position:absolute; 

top:15px;right:15px; 

border:6px solid transparent; 

border-top-color:white; 

} 

a.openpanel.active {background-color:#900;} 

a.openpanel.active em { 

top:6px; 

border-color:transparent transparent white transparent; 

} 

div.paneline { 

height:0px; 

border-bottom:4px solid #39b; 

} 

div.hompiPanel { 

padding:10px 20px 20px; 

-webkit-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2); 

-moz-box-shadow:inset 0px 1px 7px rgba(0,0,0,0.2); 

box-shadow:inset 0px 1px 7pxrgba(0,0,0,0.2); 

margin:0px 0px !important; 

}


Langkah ke dua :Salin kode ini dan letakkan di atasnya: kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' 

type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Blogger Sejati Selalu Meninggalkan Komentar",
closePanelText = "Terimakasih Atas Komentarnya",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-slide-panel-comments.js' type='text/javascript'/>

langkah ke tiga : prantinjau dulu sob syapa tau ada yg salah , klo udh pasti bner.... di save deh .

smoga sukses

Memberikan Scroll pada Blog Archive/Arsip Blog

oke sobat tampilan yang satu ini sangat bagus bagi para blogger yang ingin merapikan blognya. dengan blog yang rapi,, otomatis pengunjung yang Kesasar pada kecantol ama blog kita,, wkwkwkwk nglike deh ^_^ ,,

Arsip Blog merupakan hal utama dalam sebuah blog, No Arsip, No Pengunjung, dan No MONEY tentunya.. ^_^

Nah,, bagaimana ketika Arsip blog Kita banyak,,?  tentu akan memakan banyak tempat, istilah keren dalam bloger Banyak Lahan yang Terbuang, Nah bagaimana Cara Mengatasi Lahan Yang terbuang itu, salah satunya dengan memberikan Scroll bar pada Salah satu Widget di blog kita, dengan demikian, kita dapat mengatur berapa tinggi dan lebar sebuah widget

Oke sobat tanpa buang2 waktu kita langsung aja yuk...

seperti biasa,

· Login dulu ke Blogger.com

· klik Rancangan

· klik Edit Html

· jangan sampe lupa sob Expand Template Widgetnya dicentang

Lalu cari Kode di bawah ini.

<div id='ArchiveList'> 

(untuk lebih mudah, tekan "Ctrl+F"  atau f3 lalu Pastekan disana dan Enter)

Kalo dah ketemu, Copy kode di bawah ini. lalu Paste TEPAT DIATAS kode  <div id='ArchiveList'>

<div style='overflow:auto; width:ancho; height:100px;'> 

Selanjutnya...
Cari Kode di bawah ini.

<b:include data='data' name='menu'/>
</b:if>
</div>
</div> 

Kemudian letakkan Kode di Bawah ini TEPAT DIBAWAH kode diatas tadi.

</div> 

Setelah itu,, save template, dan lihat hasilnya.

Perhatikan:
1. untuk HEIGHT pada kode <div style='overflow:auto; width:ancho; height:100px;'>merupakan Tingginya silahkan diganti sesuai dengan keinginan sobat.

trimakasih, smoga bermanfaat.

Cara Buat Efek Zoom / Perbesar Foto Di Blog v3

assalamuallaikum wr wb , kali ini saya akan share lagi tentang blog , lebih tepatnya Cara Buat Efek Zoom / Perbesar Foto Di Blog v3 , jika sebelumnya saya sudah share tentang Membuat Efek Zoom Pada Gambar di Blog dan Cara Membuat Efek Zoom / Perbesar Foto Di Blog v2 , sekarang giliran v3 nya , hehe

oke berikut Cara Buat Efek Zoom / Perbesar Foto Di Blog v3

· Login dulu ke akun blogger Sobat, 

· Klik Template --> Klik Edit html 

· Centang Expand Template Widget (Cepat pakai F3) 

· Cari kode : ]]></b:skin> 

Copy paste kode di bawah ini tepat di atasnya. 

.post img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}.post img:hover{-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}

lalu Save Template.

Maka secara otomatis semua gambar pada postingan blog sobat akan ber-efek zoom dengan rotasi ketika disorot, sudah saya coba dan 100% bekerja pada blog saya.

Semoga bermanfaat.

Cara Membuat Menu Vertikal di Blog

Sobat blogger pasti sudah tahu apa yang saya maksud. Pada tutorial kali ini kita mau berbagi tentang cara membuat menu navigasi dropdown vertikal, Sobat bisa lihat di sidebar kanan sebagai contohnya. Caranya cukup mudah hanya tinggal memasukkan kode ke dalam gadget. Menu vertikal ini cukup unik karena akan bergeser turun saat cursor mouse diarahkan ke menu.
nid dia codingnya sob :

<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
nav {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 300px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #9DB6D7;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #0A0A0A;
display: block;
width: 250px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #B2D8E0;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: 115px;
}
</style>
<nav>
<div class="menu-item">
<h4><a href="http://namablog.com" target="_blank"">idm 6.15 full patch </a></h4>
<ul>
<li><a href="http://namablog.com" target="_blank">Membuat Email </a></li>
<li><a href="http://namablog.com" target="_blank">Membuat tabel </a></li>
<li><a href="http://namablog.com" target="_blank">Promosi Blog</a></li>
<li><a href="http://namablog.com" target="_blank">Setelan Blogger</a></li>
<li><a href="http://namablog.com" target="_blank"> Membuat Gmail</a></li>
</ul>
</div>

<div class="menu-item">
<h4><a href="masukkan URL/Link postingan">Widget</a></h4>
<ul>
<li><a href="masukkan URL " target="_blank">Cara Pasang widget</a></li>
<li><a href="masukkan URL " target="_blank">Cara Buat Laman Statis</a></li>
<li><a href="masukkan URL " target="_blank">Cara Ganti Favicon</a></li>
<li><a href="masukkan URL " target="_blank">Ganti Template Blog</a></li>
<li><a href="masukkan URL " target="_blank">Cara Ubah Background Blog</a></li>
</ul>
</div>

<div class="menu-item">
<h4><a href="masukkan URL/Link postingan disini" target="_blank"">Widget</a></h4>
<ul>
<li><a href="masukkan URL disini" target="_blank">Cara Pasang Gadget</a></li>
<li><a href="masukkan URL disini" target="_blank">Menu Vertikal</a></li>
<li><a href="masukkan URL disini" target="_blank">Cara Ganti Favicon</a></li>
<li><a href="masukkan URL disini" target="_blank">Ganti Template Blog</a></li>
<li><a href="masukkan URL disini" target="_blank">Ubah Background Blog</a></li>
</ul>
</div>

</nav>

Cara memasang

1. Masuk ke Dasbor Blog sobat >>pilih Tata Letak >> Tambahkan Gadget >> Pilih HTML/Javascript

2. Masukkan kode di atas.

Yang perlu sobat perhatikan antara lain;


1. Ukuran lebar menu disini adalah 300px, jangan lupa disesuaikan dengan ukuran sidebar blog sobat dgn mengurangi atau menambahnya.

2. Jumlah URL/Post maksimal 5. Jika sobat mengisi dengan 6 Link,saya rasa gak bakalan tampil semua.

3. Untuk menambah navigasi, silahkan copy saja kode yang sudah saya beri warna merah sebagai contoh, kemudian ganti URL dan Judul Postnya

4. Kode berwarna hijau, sebagai judul/anchor text, sesuaikan dengan artikel sobat.

5. Untuk pewarnaan menunya silakan sobat otak atik sendiri yah, wkwkwkwk. contoh pewarnaan nya ada pada kode color: #0A0A0A; sobat klik aja disini untuk mengetahui kode warna yg sobat inginkan
6. Selamat Mencoba. Salam persahabatan.

Cara Memasang Threaded Comment Paling Keren di Blog

hai sahabat berbagi Pada kesempatan kali ini kita akan membahas hal-hal yang berkaitan dengan tutorial blog yaitu mengenai bagaimana cara memasang fitur threaded comment di blog. Tapi sebelum kita membahas lebih jauh, mari kita cari tahu dulu apa yang dimaksud dengan threaded comment!

Apa itu threaded comment?
Theaded comment yaitu fitur komentar / form komentar yang lebih interaktif yang fungsi utamanya adalah untuk memudahkan admin dan pengunjung blog dalam membalas komentar yang masuk ke blog dengan fitur Reply-nya,  jika sobat gunakan, komentar balasan sobat tidak akan masuk menjadi komentar paling akhir di dalam postingan itu, melainkan akan muncul tepat dibawah komentar yang ingin sobat balas. Bingung ya? dari pada bingung mending langsung saja lihat gambar dibawah ini :

Bagaimana, sekarang sobat sudah tahukan, apa itu threaded comment? bagaimana apakah sobat juga berminat untuk memasangnya di blog sobat ? Jika jawabannya ya, silahkan ikuti beberapa langkah mudah memsang fitur threaded comment pada blog dibawah ini :

Langkah Pertama | Mengaktifkan Fitur Threaded Comment

1. Login ke akun blogger sobat

2. Klik "Template"

3. Lalu klik "Edit HTML"

4. Setelah itu centang pada :

 Expand Widget Templates

---

  

5. Kemudian cari kode script berikut ini :

<b:include data='post' name='comments'/>

biasanya sobat akan menemukan 4 kode semacam ini,

6. Jika kode pada langkah no.5 sudah ditemukan, selanjutnya ganti semua kode tersebut dengan kode dibawah ini :

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

---

7. Jika sudah, silahkan simpan template!

Sampai disini fitur threaded comment pada blog sobat sudah aktif, selanjutnya tinggal merubah tampilan dari threaded comment tersebut. Untuk lebih jelasnya, mari kita lanjut baca!

Langkah Kedua | Memodifikasi Tampilan Threaded Comment di Blog!

1. Silahkan login ke akun blogger

2. Klik menu "Template"

3. Lalu klik "Edit HTML"

4. ups...sobat jangan sampai lupa centang pada :

 Expand Widget Templates

5. Kemudian cari kode berikut ini :

]]></b:skin>

5. kemudian anda letakkan kode dibawah ini tepat dibawah kode pada langkah no.4 :

/*------------- START Blogger Threaded Comments  -------------*/
    .comments {
      clear: both;
      margin-top: 10px;
      margin-bottom: 0px;
      line-height: 1em;
    }
    .comments .comments-content {
    font-size: 12px;
    margin-bottom: 16px;
    font-weight: normal;
    text-align:left;
    line-height: 1.4em;
    }
    .comments .comment .comment-actions a {
    display: inline-block;
    margin: 0;
    padding: 1px 6px;
    border: 1px solid #C4C4C4;
    border-top-color: #E4E4E4;
    border-left-color: #E4E4E4;
    color: #424242 !important;
    text-align: center;
    text-shadow: 0 -1px 0 white;
    text-decoration: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #EDEDED;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
    background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
    font: 11px/18px sans-serif;
    padding:2px 8px; margin-right:10px;
    }
    .comments .comment .comment-actions a:hover {
    text-decoration: none; background:#fff; border:1px solid #5AB1E2;
    }
    .comments .comments-content .comment-thread ol {
      list-style-type: none;
      padding: 0;
      text-align: none;
    }
    .comments .comments-content .inline-thread {
      padding: 0.5em 1em;
    }
    .comments .comments-content .comment-thread {
      margin: 8px 0px;
    }
    .comments .comments-content .comment-thread:empty {
      display: none;
    }
    .comments .comments-content .comment-replies {
      margin-top: 1em;
      margin-left: 40px;   font-size:12px; background:#EBF5FE;
    }
    .comments .comments-content .comment {
      margin-bottom:16px;
      padding-bottom:8px;

    }
    .comments .comments-content .comment:first-child {
      padding-top:16px;
    }
    .comments .comments-content .comment:last-child {
      border-bottom:0;
      padding-bottom:0;
    }
    .comments .comments-content .comment-body {
      position:relative;
    }
    .comments .comments-content .user {
      font-style:normal;
      font-weight:bold;
    }
    .comments .comments-content .user a {
    color:#2D5E7B; font-size:14px; font-weight: bold;text-decoration: none;
    }
    .comments .comments-content .icon.blog-author {
      width: 18px;
      height: 18px;
      display: inline-block;
      margin: 0 0 -4px 6px;
    }
    .comments .comments-content .datetime {
    color: #999999;
    float: right;
    font-size: 11px;
    text-decoration: none;
    }
    .comments .comments-content,
    .comments .comments-content .comment-content {
      margin:0 0 8px;
    }

    .comment-header {background-color: #F4F4F4;
        border: thin solid #E6E6E6;
        margin-bottom: 5px;
        padding: 5px;
    }
    .comments .comments-content .comment-content {
      text-align:none;
    }
    .comments .comments-content .owner-actions {
      position:absolute;
      right:0;
      top:0;
    }
    .comments .comments-replybox {
      border: none;
      height: 250px;
      width: 100%;
    }
    .comments .comment-replybox-single {
      margin-top: 5px;
      margin-left: 48px;
    }
    .comments .comment-replybox-thread {
      margin-top: 5px;
    }
    .comments .comments-content .loadmore a {
      display: block;
      padding: 10px 16px;
      text-align: center;
    }
    .comments .thread-toggle {
      cursor: pointer;
      display: inline-block;
    }
    .comments .continue {
      cursor: pointer;
    }
    .comments .continue a {
    display: inline-block;
    margin: 0;
    padding: 1px 6px;
    border: 1px solid #C4C4C4;
    border-top-color: #E4E4E4;
    border-left-color: #E4E4E4;
    color: #424242 !important;
    text-align: center;
    text-shadow: 0 -1px 0 white;
    text-decoration: none;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    background: #EDEDED;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
    background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
    font: 11px/18px sans-serif;
    padding:2px 8px; margin-right:10px;
    }
    .comments .comments-content .loadmore {
      cursor: pointer;
      max-height: 3em;
      margin-top: 3em;
    }
    .comments .comments-content .loadmore.loaded {
      max-height: 0px;
      opacity: 0;
      overflow: hidden;
    }
    .comments .thread-chrome.thread-collapsed {
      display: none;
    }
    .comments .thread-toggle {
      display: inline-block;
    }
    .comments .thread-toggle .thread-arrow {
      display: inline-block;
      height: 6px;
      width: 7px;
      overflow: visible;
      margin: 0.3em;
      padding-right: 4px;
    }
    .comments .thread-expanded .thread-arrow {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
    }
    .comments .thread-collapsed .thread-arrow {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
    }
    .comments .avatar-image-container {background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position: center center;background-repeat: no-repeat;float: left;width: 36px;max-height: 36px;margin: 0;outline: 1px solid #FFFFFF;padding: 3px;vertical-align: middle;overflow: hidden;
    border: 1px solid #DDDDDD;}
    .comments .avatar-image-container img {
      width: 36px;
    }
    .comments .comment-block {
      margin-left: 48px;
      position: relative;
    }

    /* Responsive styles. */
    @media screen and (max-device-width: 480px) {
      .comments .comments-content .comment-replies {
        margin-left: 0;
      }
    }

    /*------------- End of Blogger Threaded Comments  -------------*/

---

6. Terakhir, simpan template! dan lihat hasilnya.

 gimana ? ? ? gampangkan sob....?