Okay semalam aku dah kongsikan cara macam mana nak "tweak" widget "Popular Posts (Official Widget by Blogger)". Kali ni aku nak kongsikan pula dengan para pengguna template Thesis Blogger Template ataupun sinonim dengan panggilan TFBv2 & TFBv1. Ini pun atas permintaan rakan-rakan dari Group Support TFB di Facebook.
Langkah 1: Menambah Effect Hover & Transition.
Sila cari code CSS seperti dibawah ini:
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
Selepas anda jumpa barisan code CSS berkenaan. Sila copy dan paste kan code CSS dibawah selepas code CSS berkenaan.
border:4px groove #FF0000;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-webkit-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
Code yang berwarna merah itu adalah code untuk border bila kita menghalakan mouse ke arah kotak popular posts. Default adalah berwarna merah.
4px - Ini adalah ketebalan border. Boleh ubah ikut suka u all lah.
groove - Ini untuk border, boleh tukar kepada double / dashed / dotted / solid.
#FF0000 - Ini pula kod kepada warna border. Pun boleh diubah mengikut citarasa masing-masing.
Langkah 2: Menambah Bilangan Kotak Popular Posts & Perubahan Pada Penampilan Nombor Posts.
Langkah yang ke-2 ni aku rasa memang panjang sikit dan mungkin akan mengelirukan segelintir manusia yang bakal menggunakan tutor ni. jadi nasihat aku. Buatlah secara teliti dan fokus 100% pada part ni ya.
U all perlu cari barisan code CSS sama seperti dibawah ini. Rasanya tak susah kot nak cari code ni. Sebab code ni memang unik dan mudah untuk dijumpai didalam TFBv2.
#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{position:absolute;top:10px;right:-5px;order-radius:50%;background:#353535;width:40x;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
Selepas u all jumpa dengan code CSS berkenaan. Sila gantikan dengan CSS Code dibawah ini. Make sure u all gantikan semua code diatas tu dengan yang dibawah ni ya. Tak mau ada yang tertinggal walau sebaris sekalipun.
#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%;-moz-border-radius:50%;-webkit-border-radius:50%;border:2px solid #ccc;background:#353535;-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 +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 + 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 {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
Langkah 2.2: Customize Kotak Nombor 8-10.
Okay arahan untuk customize kotak Popular Posts yang bernombor 8,9, dan 10 itu. U all just ubah code warna yang ditandakan dengan warna cinta (merah) tu dengan code warna lain. Manakala yang berwarna biru sejuk mata memandang tu pula adalah size bagi kotak Popular Posts.
Kalau nak lagi cantik. Aku sarankan u all ubah kesemua size kotak kepada 90%. Tapi kalau u all nak buat macam bentuk tangga terbalik tu. Boleh jer, ubah 90% pada 3 baris code diatas mengikut kesesuain korang. Tapi bagi aku, aku lebih prefer semuanya mempunyai size yang sekata. Baru nampak cun melecun. The rest tu cari sendiri sama macam yang berwarna biru tu ya.
Langkah 3: Mengubah Bentuk Kotak.
Selepas siap menambah code untuk kotak yang ke 8-10. Sekarang tiba masanya untuk mengubah rupa paras / rupa bentuk kotak Popular Posts. Sila cari code sama seperti dibawah ini:
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}Sila gantikan dengan code dibawah ini....
#PopularPosts1 ul li{position:relative;margin:8px 0;border-radius:25px 0px 25px 0px;Dah siap menggantikan semua code yang sepatutnya. Sila klik "PREVIEW" terlebih dahulu. Takut-takut ada error pula nanti.
-moz-border-radius: 25px 0px 25px 0px;-webkit-border-radius: 25px 0px 25px 0px ;border:4px groove #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
Kalau u all memang dah siap-siap pasang widget Popular Posts. Anda boleh nampak sama ada rupa bentuk Popular Posts u all dah mengalami perubahan ataupun sebaliknya. Insyallah kalau anda buat dengan teliti. Ianya akan berjaya. Bila dah tiada error. Sila klik "SAVE". Tamat sudah tutor kita.
Ekstra Info.
Kalau u all dah ikuti tutor ini dan hasilnya menghampakan. The Best Solution adalah dengan memadamkan semua CSS Code Popular Post pada template TFBv2 dan followlah tutor yang sebelum ini.
- Official Popular Posts Tweak v1. (Khas untuk TFBv1 dan Custom Template).
Buat mereka yang masih menggunakan template TFBv1. U all boleh teruskan dengan Tutor "Official Popular Posts Tweak v1.
Post a Comment