Official Popular Post Tweak v1

Permulaan Ramadan hari yang ke 13 (2 Ogos 2012) diganggu dengan perasaan bengang dengan seorang blogger blog tutorial dari negara tutt yang mencuri idea aku. Sebenarnya semalam (1 Ogos 2012), aku ada ar tweak code widget Popular Posts yang sedia ada dalam template TFBv2 yang dibuat oleh Forblogger[.]net.

Nak dipendekkan cerita. Lepas sahur pagi tadi. Aku usha jap dashboard blog, and aku ternampaklah satu updated post dari sebuah blog tutorial yang baru aku follow semalam. Alangkah terperanjatnya aku. Dia hasilkan tutorial untuk tweak widget Popular Posts sebiji sama macam aku punya. Bila aku periksa coding dalam tutorial tu. Memang sah dia cilok idea gua beb.

Tapi apa-apa pun biarlah dia tu. Nampak sangat dia tu seorang blogger yang tiada ETIKA. By the way hari ni aku nak berkongsikan dengan u all. Macam mana nak tweak widget Popular Post Blogspot (Official Widget not Custom). Tapi ni versi aku sendiri. Coding asal aku ambil dari template TFBv2.

Tutorial ni khas buat pengguna Blogspot sahaja. Sebab ianya adalah Tweak Tutorial Official Widget Popular Post by Blogger.

Layout > Add a Gadget > Popular Post.

Sila buang tanda pada kotak "image thumbnail & snippet". Jumlah post yang nak dipaparkan. U all boleh pilih diantara 5 / 7 / 10. Terpulang pada citarasa u all.

Basic Step:

Log In / Sign In ke Dashboard blog.
Pergi ke Template dan klik Edit HTML >>> Proceed.
Tak perlu klik Expand Widget Template.
Tekan butang "Ctrl + F" di keyboard komputer u all. Cari code ]]></b:skin>, dah jumpa code ni. Sila copy and paste CSS Code dibawah sebelum code berkenaan. Dalam erti kata lain, paste di atas code tu la ya.
Lepas paste code tu. Just klik SAVE jer. Dah siap, silalah tengok blog u all tu okay.

CSS Code Official Popular Post Tweak v1 [WAJIB].

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li:hover {

border:4px groove #fff;

-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;

}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, '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%;-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"}

#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 +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{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:#c7f25f;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child{background:#ff4c54 ;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;-moz-border-radius: 25px 0px 25px 0px;-webkit-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}

.PopularPosts .item-title a{font: normal bold 36px Segoe UI;font-size:16px;

color: #706f5c;}

.PopularPosts .item-title a:hover{color:#c22400;text-decoration:none}

.widget-content.popular-posts li{font: normal normal 16px Segoe UI}

.item-snippet {height:2.5em; overflow:hidden}

Customize Official Popular Post Tweak v1 [OPTIONAL].

Okay, kalau u all tak nak guna default style. U all boleh jer tukar beberapa code dalam code diatas, Just follow arahan dibawah ni.

Size Popular Post & Warna Background.

Size asal widget ni adalah 90% dari content 1-10. Tapi kalau u all nak nampak lain. U all boleh jer ubah size mengikut keperluan dan kehendak u all sendiri. Sama juga dengan warna background. Contoh

#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:85%}

#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:80%}

#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{background:#f6993d;width:75%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:70%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:70%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:75%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:80%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li{background:#ff764c; width:85%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

Yang berwarna biru tu adalah size content. Terpulang pada citarasa u all nak design size yang macam mana sekali pun. Maklumlah setiap orang ada citarasa mereka yang tersendiri. Manakala yang berwarna merah tu pula adalah warna latar belakang bagi content. Yang itu pun u all boleh ubah. Dimana nak dapatkan code warna tu. U all boleh refer di sini (Kod Warna).

Bentuk & Bebayang Kotak (Box Shadow) Popular Posts.

Bentuk kotak Popular Posts tu pun u all boleh ubah mengikut citarasa u all sendiri. Kalau diikutkan coding yang asal. Bentuk popular posts adalah petak 4 segi tepat. Itu kebanyakkan tutor yang aku jumpalah. Jadi untuk menjadikan ianya kelihatan berbeza. Aku tambahkan sedikit code.

Kalau u all nak ubah. Just cari barisan code seperti dibawah ni:

#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;-moz-border-radius:25px 0px 25px 0px;-webkit-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}

Keterangan Lanjut:

border-radius:25px 0px 25px 0px; -moz-border-radius:25px 0px 25px 0px;-webkit-border-radius:25px 0px 25px 0px; - Yang ni u all boleh ubah kepada 0px 25px 0px 25px ataupun boleh juga diubah kepada 25px 25px 25px 25px. Kalau nak kecilkan size lengkungan. Hanya perlu rendahkan nilai 25px tersebut.
border:2px solid #f7f7f7. Okay yang 2px itu merupakan ketebalan border. solid pula adalah jenis border. Kalau anda nak tukar kepada jenis border yang lain. Just tukar solid kepada groove, dashed, dotted, ataupun double. #f7f7f7 pula adalah code warna.
Untuk mengubah warna shadow box. U all cuma perlu mengubah code #000 kepada apa-apa code warna yang u all mahukan. Terpulang pada u all sendiri. Tapi cadangan dari aku, u all boleh menggantikannya dengan code warna #ccc / #ddd / #f7f7f7.

Hover Effect.

Part yang ni adalah salah 1 kelainan yang aku masukkan ke dalam widget ni. Iaitu ada animasi semasa kita menghalakan mouse ke arah content Popular Post tu.

#PopularPosts1 ul li:hover {

border:4px groove #fff;

-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;

}

Okay kalau u all tak nak effect ni ada dalam Popular Posts u all. Just buang keseluruhan code diatas daripada code penuh tu. Tapi elok kekalkan jer. Baru nampak unik sikit.

Yang berwarna merah tu. U all boleh ubah ikut suka u all. 4px (ketebalan border), groove (jenis border, boleh ubah kepada dotted, solid, double, dashed), dan #fff (warna border). Ubah jer ikut suka hati u all okay.

Keunikkan Tutor Official Popular Posts Tweak v1.

Sudah semestinya bentuk / paras rupa widget Popular Posts. Asal bentuk widget ni adalah petak 4 segi tepat.
Penambahan border dan box shadow pada kotak content.
Penambahan bilangan content. Asalnya widget ni boleh paparkan 7 content sahaja. Terbaru yang aku jumpa 9 content boleh dipaparkan. Tapi versi aku, 10 content boleh dipaparkan.
Kedudukan nombor-nombor. Asalnya nombor-nombor tu tak duduk dalam content / kotak content tu.
Jarak diantara content pun aku ubah juga.
Penambahan transasi ataupun fungsi animasi rotate.
Asalnya part yang nombor 1-10 tu dalam bentuk kotak 4 segi. Aku ubah kepada bulat dan aku tambah effect shadow dan juga border.

Psstt..kalau u all jumpa tutor yang sama macam aku punya ni dalam blog milik blogger India/Pakistan. Memang nampak sama. Tapi aku tak ambil coding ni dari blog dia. Tapi dia yang curi idea design aku <--realiti bukan fantasi ya.

CSS Code Source: ForBlogger[.net].
Design Idea : M'Rie R'Nie | Author of SembangCyber.
Transition Effect CSS Code Source : MyBloggerTricks[.com].

Pages