Cara Membuat Avatar komen Menjadi Bulat

     

    Cara Membuat Avatar Comments Bulat,mungkin sudah banyak bloggeryang share tutorial ini.tapi tidak ada salahnya jika saya juga ikut berbagi dengan sobat blogger semua,kebetulan saya juga baru membuat comments avatar menjadi bulat pada blog ini.
Comments Avatar atau photo komentar yang ada pada blog kita pada umumnya adalah berbentuk persegi atau kotak.
Untuk mempercantik tampilan pada blog kita salah satunya denganmembuat comments avatar menjadi bulat.

Sebelum

Sesudah

Bagi sobat yang ingin membuat comments avatar menjadi bulat seperti pada blog saya,silahkan ikuti langkah-langkah
Cara Membuat Avatar Comments Bulat dibawah ini :

1. Login blog Kamu
2. Klik Design > Edit HTML > centang pada Expand widget template
3. Cari kode ]]></b:skin>
   Gunakan CTRL+F agar lebih mudah dalam mencari kodenya

4. Copy kode dibawah ini dan letakan diatas kode ]]></b:skin>

.comments .avatar-image-container{
        max-height:50px;
        max-width:50px;
        height:50px;
        width:50px;
        border-radius:29px;
        padding:2px;
        border:2px solid #39E939;
        box-shadow:-1px -1px 1px #444,2px 2px 4px #444;
        background:#1B3CFA;
        margin:2px 4px 2px 2px;  
}
.comments .avatar-image-container img{
        width:50px;
        max-width:50px;
        height:50px;
        max-height:50px;
        border-radius:25px;
        border:0 solid #FE081C !important;  
}
.comments .comment-block{
        margin-left:75px;
}

5. Klik Pratinjau,jika tiada kesalahan silahkan Klik Simpan dan lihat hasilnya pada kolom komentar

Keterangan : Untuk warna background dan warna border sesuaikan dengan keinginan sobat.

Semoga tutorial Cara Membuat Avatar Comments Bulat ini bermanfaat
Salam Blogger

Sumber : Shaka InghetS

untuk membina jquery log-in panel-di.html

Untuk membina Jquery Sliding login panel di atas header blog, seperti yang boleh anda lihat di sini (Demo), sila ikut beberapa langkah di bawah.

 1. Log in dashboard--> Template --> Edit HTML --> Proceed.

 2. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod ]]></b:skin>

 3. Copy dan paste kod css ini, di atas atau sebelum kod ]]></b:skin> 

#slide-panel{
background-color:#000;
border-bottom:2px solid #838383;
display:none;height:80px;
margin:auto;padding-top:20px;
}

.slide{width:950px;
margin:auto;
}

.btn-slide:link,.btn-slide:visited{
color:#fff;
float:right;
display:block;
font-size:14px;
font-weight:bold;
height:28px;
padding:3px 0 3px 0;
line-height:28px;
text-align:center;
text-decoration:none;
width:70px;
font-family:Arial;
background:#000;
margin-top:-2px;
-moz-border-radius:0px 5px 0px 5px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
}

.loginform{
width:950px;
margin:0 auto;
color:#999;
font-family:Arial,Helvetica,sans-serif;
}

.formdetails{
color:#FFF;
font-size:12px;
padding:5px;
}

.formdetails input{
border:none;
padding:2px 5px;
background-color:#EFEFEF;
}

.loginregister{
color:#999;padding:5px;
}

.loginregister a:link,.loginregister a:visited{
color:#90fff6;
font-size:12px;
}

.loginregister a:hover{
color:#fff';
}

.loginform h2{
padding:10px 10px 10px 0;
font-size:18px;
font-weight:normal;
text-transform:uppercase;
}

.loginform ul li{
display:inline;
}

.loginform ul li a:link,.loginform ul li a:visited{
color:#FFF;
font-size:12px;
text-decoration:underline;
}

input#signIn{
color:#fff;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzwuoJZrtHTy5VGDQjVehfTYI_JRdO7nfkCySriPfzfNViHfsLpVkMF6e81v6grV02QqKa6X9_G3HaLLNg9YlgEw4LBMD3_3NS0QZmhPs_RyI8dNIg4phEwDEP2xZB4-ptKbkhc8B-JBc/) no-repeat;
width:94px;
height:25px;
cursor:pointer;
padding-bottom:5px;
}

input#Email,input#Passwd{
background:#414141;color:#fff;
}

input:focus#Email,input:focus#Passwd{
background:#545454;
}

 4. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod </head>

 5. Copy dan paste kod ini, di bawah atau selepas kod </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&quot;.btn-slide&quot;).click(function(){$(&quot;#slide-panel&quot;).slideToggle(&quot;slow&quot;);});});
</script>

<div id='slide-panel'><div class='loginform'><div class='formdetails'>
<form action='https://www.google.com/accounts/ServiceLogin?service=blogger&amp;continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A%252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;ltmpl=start&amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8#s01' method='post'>

<label for='log'>Username : </label><input id='Email' name='Email' size='20' type='text'/>

<label for='pwd'>Password : </label><input id='Passwd' name='Passwd' size='20' type='password'/>

<input id='signIn' name='signIn' type='submit' value='Masuk'/>

<label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/>Ingatkan saya</label>
</form></div>

<div class='loginregister'>
<a href='https://www.blogger.com/signup.g' target='_blank'>Daftar&#173;</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Lupa kata laluan anda?</a>
</div></div></div>

<div class='slide'><a class='btn-slide' href='#'>Sign in </a></div>

6. Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save.

p/s: Untuk menukar warna background panel dan button, sila edit kod yang di highlightkan dengan warna merah.

ranking blogger ..nak tahu ??

Cara Ketahui Ranking Blog Pada Pandangan Google

1. Klik PageRank Prediction.

2. Letakkan url blog anda , lakukan pengesahan kata dan klik Continue.

r

.

Tutorial - letak Komen dlm entri

Ok..cara nya lebih kurang sama je dengan tutorial letak button subscribe di blog. 

Mula-mula klik link ni 

http://developers.facebook.com/docs/plugins/ 

Lepas tu klik Comment

Kemudian, lepas dah publish post..copy link post tu then paste dekat sini. Boleh adjust-adjust ikut suka.

Dah siap, klik pada Get Code. Copy kod tu.

Buka balik post korang tadi dan tukar kepada Edit HTML..klik je. 

Paste kan kod tadi di bawah post..kalau nak letak tempat komen ni kat bawah la. Boleh letak ikut suka hati masing-masing :) 

Dah siap..tekan Compose kat atas tu dan Publish post tu balik.

cerdit by http://atikaahmadiah.blogspot.com/2012/06/letak-komen-fb-di-entri-blog.html

Oke..dah siap. Memang leceh sebab kena buat satu-satu dan secara manual. Tapi, ini yang saya dapat buat. Try buat cara lain mesti tak jadi.
Selamat mencuba !!

 والسلام