Tutorial 2 in 1 (Link Hover, Comment Box)

بِسْــــــــــــــــــمِ ﷲِالرَّحْمَنِ الرَّحِيم

ASSALAMUALAIKUM !

Hi =) Agak agak dah berapa bulan aku tak bermanja dengan blog. Blogwalking apatah lagi Rasanya kalau blog ni senang nak unfollow confirm ramai yang unfollow blog tak bermotif ni. Maaf ye aku tak follow back , serius tak sempat. Komputer aku dah elok, cuma masalahnya ada lagi yang timbul. 

Ok la membebel pula. Ihiks

Aku buat tutorial ni sebab ada orang request. Yaa agak lama juga T.T Ada la dalam tahun lepas. Kesian blog ni tidak berpenghuni selama berbulan bulan. Tbh aku buka blog dashboard guna phone. Jangan pelik pula kalau tengok aku reply komen orang tanya itu ini tentang blog. Aku reply balas cbox orang melalui telefon bimbit sahaja. Yg sekarang aku post ni pun sebab curi2 pakai laptop along. Peluang sebegini aku akan berkongsi tutorial dengan korang, Harap ada sudi yang toraii. 

Dashboard -- Template -- Dalam box HTML,

Ctrl +F untuk sonang cari

LINK HOVER :

Cari kod ,

a:link {

Jumpa kan ? Kalau tak jumpa cari yang hampir sama dgn kod tu pun boleh. Copy kod bawah ni pulak

-webkit-transition: 0.4s;
-moz-transition: 0.4s;
color:pink;
text-decoration:none;}
a:hover{
-webkit-transition: 0.4s;color: #000;
-moz-transition: 0.4s;
letter-spacing:2px;
}

 Kod yang berwarna itu sila ubah kalau nak. Cari di sini html-color-codes.html

Gempakkan Kotak Komen Anda !

Haha, tak ada la gempak mana pun. Tapi aku suka lah jugak sebab benda ni bila hover dengan cursor akan bergerak ke kanan. Tak percaya ? Try lah hover pada comment box aku dalam post yang ada komen. Nak cuba? Boleh.. boleh bela. Kekeke

Sila cari kod ini ,

#comments-block .comment-body p {

atau 

.comment-body p {

Tak jumpa ? Tak jumpa nangisslah. Hehe takla kalau tak jumpa aku pun tak tau nak kata apa. Sekarang ni aku pakai simple template. Lagipun neuron di otak aku banyak terputus tntg  kod dalam blog ni. Banyak yang aku tak ingat. Rasa nak hantuk kepala

Kalau jumpa, pastekan kod ni di bawah kod tadi, Sila gantikan anak anak kod yang aku suruh cari tadi. Gantikan ye GANTIKAN.

 margin:0 0 .60em;
padding: 5px 5px 5px 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH2vhIvjUHRjzg2VYOUs0vcleDAnJq2n9B7xkEI81FRog1OJmo9AXSSH8vidCvCsH-PnEHOnyackJ-BLkAPNc2wXklGJD7cou2QJI4Y4mfhX28eiJCWnXD2YpqNXDQqOFP-DGNBvaJrCE/s1600/sparkles.png);
-moz-border-radius: 20px 20px / 20px 20px;
border-radius: 5px 5px / 5px 5px;
border: 2px solid #E6ECF6;-webkit-transition: 2.5s;
-moz-transition: 2.5s;
box-shadow: inset 20px 0 0px 0  pink;
}
#comments-block .comment-body p:hover {
margin:0 0 .60em;
padding: 5px 5px 5px 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH2vhIvjUHRjzg2VYOUs0vcleDAnJq2n9B7xkEI81FRog1OJmo9AXSSH8vidCvCsH-PnEHOnyackJ-BLkAPNc2wXklGJD7cou2QJI4Y4mfhX28eiJCWnXD2YpqNXDQqOFP-DGNBvaJrCE/s1600/sparkles.png);
-moz-border-radius: 20px 20px / 20px 20px;
border-radius: 5px 5px / 5px 5px;
border: 2px solid pink;-webkit-transition: 2.5s;
-moz-transition: 2.5s;
box-shadow: inset 450px 0 0px 0 pink;
}

Yang berwarna merah tu boleh tukar warna feveret. Takkan tak de warna feveret kut. Kasi cerialah blog tu sikit. Kalau tak nak tukar pun boleh. Dah cantikk dan warna tu. Oh ya yang url background yang aku merahkan tu pun tukar la dengan background korang. Make sure la ianya tidak terlalu gelap warnanya. Nanti warna tulisan akan tenggelam dek arus background tu.

Preview dulu ye, kalau tiada error barulah save. Kalau tak preview dlu then terus save jangan saman aku kalau HTML anda hancuss. Huahua..

Kalau korang tak jumpa kod yang comment tu, cari lah kod

 ]]></b:skin>

Andd .. barulah pastekan kod

 #comments-block .comment-body p {
margin:0 0 .60em;
padding: 5px 5px 5px 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH2vhIvjUHRjzg2VYOUs0vcleDAnJq2n9B7xkEI81FRog1OJmo9AXSSH8vidCvCsH-PnEHOnyackJ-BLkAPNc2wXklGJD7cou2QJI4Y4mfhX28eiJCWnXD2YpqNXDQqOFP-DGNBvaJrCE/s1600/sparkles.png);
-moz-border-radius: 20px 20px / 20px 20px;
border-radius: 5px 5px / 5px 5px;
border: 2px solid #E6ECF6;-webkit-transition: 2.5s;
-moz-transition: 2.5s;
box-shadow: inset 20px 0 0px 0  pink;
}
#comments-block .comment-body p:hover {
margin:0 0 .60em;
padding: 5px 5px 5px 5px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH2vhIvjUHRjzg2VYOUs0vcleDAnJq2n9B7xkEI81FRog1OJmo9AXSSH8vidCvCsH-PnEHOnyackJ-BLkAPNc2wXklGJD7cou2QJI4Y4mfhX28eiJCWnXD2YpqNXDQqOFP-DGNBvaJrCE/s1600/sparkles.png);
-moz-border-radius: 20px 20px / 20px 20px;
border-radius: 5px 5px / 5px 5px;
border: 2px solid pink;-webkit-transition: 2.5s;
-moz-transition: 2.5s;
box-shadow: inset 450px 0 0px 0 pink;
}

Tukarkan sama je macam aku bagitahu tadi.. kalau jadi Alhamdulillah lah.

SEPATAH DUA KATA : Tutorial komen box ini bukan untuk blogskin ye sayangs. Ini untuk simple template, denim washed denim sahaja. Template minima aku tak tahu sebab aku dah lupa langsung.

Siapa nak tau aku dapat berapa A dalam PMR ? Hehehehe lupakan, asal ada A alhamdulillah..

Aku akan buat review blog sponsors part 2. Stay tuned. Sekali lagi aku minta maaf. =(

-- Disebabkan aku tak mohon sekolah asrama teknik sbp mahupun mrsm, aku akan mengumpul lemak di rumah. Hehe no lah. Ada seorang kawan baik aku ni pindah Melaka. Selangor dengan Melaka tu jauh. Hm takpelah demi cita cita kan . Aku pun makin terasa bengong dengan subjek-subjek baru. .

Banyak pula aku menaip dalam ni. Padahal tajuknya tutorial. Ok lah, assalam, bye
annyeong. ^3^

 

---

THANKS FOR READING. DROP YOUR COMMENT PLEASE?

---