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?

---

Giveaway 7 HARI by Syira Lokman

Assalammualaikum and Hello Blogger's

Jom join giveaway ni. Kot2 rezeki mana lah tahu. Boleh ramah tamah dengan blogger lain jugak. JOM3! Click je banner dekat atas untuk join. Esok dah date dia. sempat lagi tau! cepat3.. hehe..

---

Hai! Selamat membaca. Jangan lupa tinggal komen ya?

---