TUTORIAL : Cantikkan comment box 2

Assalammualaikum and Hye Blogger's//



Hari ni, una nak buat tutorial untuk korang cantikkan kotak komen korang. cara-caranya ialah :

1.DASHBOARD > DESIGN > EDIT HTML > tekan ctrl + F dan cari code ini :
/* Comments
dah dapat cari kannn ? then nanti korang akan jumpa dengan anak-anakcoding dia kan ? delete je sume code yang ade kat bawah tuh then korunk ganty kan dengan coding baru yang una bagi ni :) okee ?
.h4 {
background:#fff;
text-align:center;
color:#fff;
text-shadow:2px 2px 3px #888;
font:30px ttn !important;
}
.comments {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
background: #ffffff;
border:0px solid #E0ECF8;
padding: 10px;
}
.comment-content{
background:#FEF3F3;
padding:13px;
border-radius:10px;
color:#666;
border:3px dashed #FEE8E8;
}
.datetime{
background:#fff;
padding:5px;border:2px solid #FEE8E8;
float:right;
border-radius:10px;
font:10px arial;
margin-top:10px;
}
.secondary-text{
padding:5px;
background:#fff;
border-radius:5px;
float:-left;
border-bottom:2px solid #FEE8E8;
}
.avatar-image-container{
background:#FFE2E2;padding:6px;border-radius:50%;
}
.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;
}
.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}
.comments .comments-content .loadmore a {
border-top: 1px solid #FFF;
border-bottom:2px solid #FEC9C9;
}
.comments .comment-thread.inline-thread {
background-color: #FFF7F7;
}
.comments .continue {
border-top:2px solid #FEC9C9;
}
#comments {
height:300px;
overflow:auto;
}
Korang tweak code dia je ya untuk ubah background colour, or apa-apa pun. semoga membantu. kalau tak faham silakan bertanya una :D


Hai! Selamat membaca. Jangan lupa tinggal komen ya?

TUTORIAL : Horizontal Menu Bar

Assalammualaikum and Hye Blogger's//

Nampak x gambar di atas? Hari ni kita belajar tutorial nak buat horizontal menu bar/menu bar mendatar macam yang di atas ya. Jadi, jom mulakan :
  • Pertama korunk kene Sign in Blog dulu lah kan ? then pergi ke DESIGN > ADD A GADGET > HTML/JavaScript 
  • Then korunk copy & paste code dekat bawah ni okey?? 

<style>
.navi{
padding:5px;
display: inline-block;
font:11px verdana;
font-weight:bold;
text-align:center;
margin:2px;
color:white;
text-decoration:none;
letter-spacing:2px;
-webkit-transition-duration:0.5s;
}
.navi:hover{
background:#ffffba;
border-radius:5px;
text-decoration:none;
-webkit-transition-duration:0.5s;
color:black;
}
</style>
<center><div style="padding:3px;background:#fed5d5; width:980px;">
<a class="navi" href="URL LINK/">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
<a class="navi" href="URL LINK">PERKATAAN ANDA</a>
</div></center>

  • OKAY! Dah selesai copy paste now save dan view blog korang. Kalau nak cantikkan navbar tuh korang ubah je mana yang una higlight kan tuh yer? :D semoga dapat membantu 

ungu : untuk bahagian backgroun navbar
hijau : untuk bahagian yang bila cursor sentuh link
kuning : bahagian lebar dan background luar navbar

NOTA BIT BOT :
Kena pandai mix and match tau! tq guys


Hai! Selamat membaca. Jangan lupa tinggal komen ya?