TUTORIAL : POPULAR POST MINE VERSION

Asalamualaikum w.b.t + Salam sejahtera . Hope this day is the best than yesterday ! 

Wau ramai jugak request . Hehehe . Asal nya dari tuto INI . Tapi yaya adjust sikit-2 . Comel kan kan . 

Dashboard > Layout > Add a Gadget > Popular Posts

Untick pada image thumbnail dan snippet Save ! Dashboard > Template > Edit HTML > Tekan seperti gambar dibawah .

#BARU !BARU ! Search code ]]> Copy code dibawah  dan paste sebelum code ]]> Save . 

/* Rainbow Popular Post by http://hzndi.blogspot.com*/#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Scada, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#FE4949;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}#PopularPosts1 ul li:first-child + li + li + li{background:#FF98F6;width:90%}#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}#PopularPosts1 ul li:first-child + li + li{background:#74C3FC;width:90%}#PopularPosts1 ul li:first-child + li + li:after{content:"3"}#PopularPosts1 ul li:first-child + li{background:#FF98F6; width:90%}#PopularPosts1 ul li:first-child + li:after{content:"2"}#PopularPosts1 ul li:first-child{background:#74C3FC;width:90%}#PopularPosts1 ul li:first-child:after{content:"1"}#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

NOTES : YAYA - untuk no 1 YAYA -untuk no 2 YAYA - untuk no 3 YAYA - untuk no 4 YAYA - untuk no 5
HARAP MEMBANTU KORANG !! PLEASE HARGAI USAHA YAYA . JANGAN COPY .

TUTORIAL : IMAGE HOVER - GREY

Asalamualaikum w.b.t + Salam sejahtera . Hope this day is the best than yesterday ! 
Fuhh , ada jugak orang request . Kalau tak , Tak tahu nak hupdate apa . 

Mula-mula yaya pening sangat , Macam mana nak buat nih . Last-last yaya pergi dekat sini . Ikut kod asli tapi ada perubahan sedikit . 
Bila korang cursor gambar korang , Dia akan bertukar ke warna grey . Cun tak ? Jum ikut tuto ini .
Blogskins/ Classic template : 
Paste codes ni sebelum code
Template designer : 
Cari kod a img { dan paste dekat bawah kod itu .

CONTOH :

a img{
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
a img:hover{
-webkit-filter: grayscale(0.8);
}

Semoga berjaya!

Tutorial : Buang Underline bawah Link

Asalamualaikum w.b.t + Salam sejahtera . Hope this day is the best than yesterday ! 

Hye korang! Hari ni Yaya nak ajar korang macam mana nak buang underline link. Underline membuatkan link  tu buruk kan? Huhu. So, kalau nak remove, jom ikut tutorial ini.
pergi Dashboard > Design > Edit HTML. Tekan CTRL + F dan cari kod ini

a:link {

Lepastuuu, paste code ini bawah a:link { tadi kay.

text-decoration:none;

Kalau dah ada code tu, mesti code korang macam ni kan : text-decoration: underline; , so tukarkan perkataan underline kepada none.

TUTORIAL : TUKAR NAMA GOOGLE+

Asalamualaikum w.b.t + Salam sejahtera . Hope this day is the best than yesterday ! 
Mesti ramai yang ternanti-2 kan tuto ni . Okey perasan ! ><
DON'T REPOST , DON'T RETUTORIAL .
Kenapa . Sebab bayang kan dari kol 1 petang yaya cari dekat google , takde . Then yaya pun godek-2 google ni . Kol 2.30 petang baru terjumpa . Dan rupanya depan mata kita sahaja ! Memang tergelak sorang-2 . So appreciate my work please . 
 Follow mine . KLIK HERE . Sign in korang punya google account . Tekan EDIT PROFILE yang sebelah gambar korang .  Tekan nama korang . Macam gambar dibawah ini

Lepas itu save . 

WARNING ! , PERUBAHAN NAMA HANYA BOLEH DIBUAT 3 KALI DALAM MASA 2 TAHUN .

TUTORIAL : BUTTON LIKE DEKAT HEADER

Asalamualaikum w.b.t + Salam sejahtera . Hope this day is the best than yesterday ! 

 Tuto agains . Sorry late .  Maksud si gadis ini ialah macam ni kot .

P/S : harap-2 yela kot .

Nak buat , But , Yaya bukan guna add widget atas header tu tau . Ni korang paste kat sidebar atau bawah header pun boleh , Cuma nanti pandai-2 lah adjust kod terapung dia . 

FOR SIMPLE + DENIM TEMPLATE

  Log in > Dashboard > Design > Add gadget > HTML / Javascript 

  Copy kod bawah ini , dan pastekan dalam ruangan tersebut

< div style='padding-left:0px; position: absolute; z-index: 300; margin-left:11px;margin-top: -42px; background:#;'title='Like Plis'>
KOD KORANG

 Save !  NOTES :  YAYA : Makin kecil nombor , Makin kekiri YAYA : Makin besar nombor , Makin ke atas YAYA : Ayat tooltips manis  YAYA : Apa-2 kod yang korang nak letak , Subscribe , Like facebook. #komen pliss

TUTORIAL : IMAGE HOVER [ Like Yaya ]

Asalamualaikum w.b.t + Salam sejahtera .
Hope this day is the best than yesterday !

Sudah berabad tak buat tuto , Muncul pulak seorang blogger mintak buat kan tuto . Heee tau-2 je , yaya nak buat tuto . Yela yaya bukan pemes sangat sampai semua nak mintak tuto kat yaya kan . Dah kita terus kan .

#Tengok tu 16 dec . Hari ini 24 , baru nak buat . Memang pemalas betul yaya ni .

Hover yang macam mana tu ye kawan-2 . Hmm camni lah

                                     
Comel tak .? Haha habaikan . Lets do it .

 Log in > Dashboard > Design > Add gadget > HTML / Javascript 

  Copy kod bawah ini , dan pastekan dalam ruangan tersebut 

<style type="text/css"> #side{margin-right:-1px;width:250px;height:150px;overflow:hidden;}
#text{text-align:center;width:250px;height:200px;padding:5px;overflow:auto;color:#363636;background-color:#fff;}

#picture{margin-left:-280px;width:280px;height:220px;overflow:hidden;-webkit-transition: opacity 0.9s linear;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;}
#side:hover #picture{margin-left:-550px;}
</style>
<table id="side" border="0" cellpadding="0" cellspacing="0" ><tr><td><div id="text">You can put anything at here.</div></td><td><div id="picture"><img src="
http://i.imgur.com/wGuOM.jpg"></div></td></tr></table>

NOTES:
YAYA : : Terserah apa korang nak letak
YAYA : : image korang yang comel

#Komen sebelum guna

TUTORIAL : LINK HOVER [ PELANGI ]

Asalamualaikum w.b.t + Salam sejahtera . 

Hope this day is the best than yesterday 

Today is friday and im not going to school . Yeahhh , Haha . Dan hari ini yaya nak buat tuto pasal link: hover .Bila korang pergi dekat link , dia akan jadi warna-warni . Cun tak ? So lets learn the step :>
 Klik HERE  ,
 Dashboard > Design > Edit HTML > Tick Expand Widget Template
 Tekan CTRL + F , Cari kod dibawah ini

a:link {

 Copy kod bawah ini dan pastekan BAWAH kod yang korang cari tadi .

a:hover { -webkit-background-clip: text; color: white; -webkit-text-fill-color: transparent; background-image:-webkit-gradient(linear, left top, right top, from(#ea8711), to(#d96363)); background-image:-webkit-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image:-moz-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image:-ms-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); background-image:-o-linear-gradient(left, #ea8711, #d96363, #73a6df, #9085fb, #52ca79); cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNIbX8wd2GTfBa9gKmM2k08EcRpdjFoQiJHWeJRS99U920rweY9nnpkGnsY56UnnhdxajZIRXvUOg4i8u1he-LDivNfB96VGEn_qAQeXbdPA5vFp5frfsLc35P6W2M7JTUzfVDmbR9Mgw/s1600/comel+je+cursor.png), progress; }

TUTORIAL : HEADER BERPUSING DAN HILANG

Asalamualaikum w.b.t + Salam sejahtera .  Hope this day is the best than yesterday 
Satu hari di hari raya , aku rasa sangat lah bosan . Aku rasa nak tidur , Ku mengantuk ~ Lalalala .#Mrepek Jangan layan lagu diatas . Hahaha . Bosan . So yaya nak buat tuto sahaja .

 Dashboard > design > edit html > tick expand widget
 Tekan CTRL + F , cari kod dibawah 

h1.title {

 Pastekan kod dibawah ini di ATAS kod yang korang cari tadi .

.header:hover { padding-left:160px; -webkit-transition: 2s; -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); opacity:.01; }

  Save !

TUTORIAL : CENTERKAN HEADER

Asalamualaikum w.b.t + Salam sejahtera .  Hope this day is the best than yesterday 
Hai readers . ! Thanks sebab sudi jejak kaki kat blog yaya ni .  . So tuto yaya kali ini berkenaan dengan menyenterkan header korang yang kekiri sangat atau kanan sangat . Tanpa membuang masa , Jom belajar ABC bersama-2 . Huu  .
 Dashboard > Design > Edit html > Tick expand widget 
 Tekan CTRL + F dan cari kod dibawah ini

/* content

 Copy kod bawah ini pulak dan pastekan dekat ATAS kod yang korang cari tadi .

.Header img {margin-$startSide: auto;margin-$endSide: auto;}

 Preview dulu oke . Kalau jadi komen sepantas petir . Lala