Multicoloured RSS Feed Widget v1

Bulan Ogos adalah merupakan bulan menjahanamkan widget-widget di blog...hahaha. 

Bulan ni aku terlebih rajinlah pula membuat tutorial & bereksperimen dengan widget-widget. 

Jangan ditanya kenapa. Entah mengapa, sejak dari bulan Julai sampailah sekarang. Aku jadi terlebih rajinlah pula mengemaskini blog. Mungkin disebabkan rahmat dibulan yang mulia iaitu bulan Ramadan kot.. agaknyalah.

Okay, berbalik kepada topik asal kita. Kali ni aku nak berkongsi dengan u all semua. Cara nak mendesign widget "Feed (Official Blogspot Widget)" menjadi berwarna-warni sama seperti widget Popular Posts.

Layout --> Add a Gadget --> Feed

Widget Name : Feed.
Platform        : Blogger/Blogspot.

Multicoloured RSS Feed Widget v1.0

Okay, Multicoloured RSS Feed Widget v1.0 ni adalah basic punya style. Maksudnya, tiada sebarang effect istimewa dimasukkan ke dalam versi ini. Versi 1 ni designnya lebih klasik, iaitu mengekalkan design petak kotak 4 segi tepat.

Sekarang u all hanya perlu memasukkan CSS Code dibawah sebelum code ]]></b:skin>

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

#Feed1 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;}

#Feed1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#Feed1 ul li:first-child:after,

#Feed1 ul li:first-child + li:after,

#Feed1 ul li:first-child + li + li:after,

#Feed1 ul li:first-child + li + li + li:after,

#Feed1 ul li:first-child + li + li + li + li:after,

#Feed1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:10px;right:5px;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}

#Feed1 ul li:first-child + li + li + li + li{background:#FA58F4;width:90%}

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

#Feed1 ul li:first-child + li + li + li{background:#9A2EFE;width:90%}

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

#Feed1 ul li:first-child + li + li{background:#2E9AFE;width:90%}

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

#Feed1 ul li:first-child + li{background:#9AFE2E; width:90%}

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

#Feed1 ul li:first-child{background:#FE9A2E ;width:90%}

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

#Feed1 ul{margin:0;padding:0px 0;list-style-type:none}

#Feed1 ul li{position:relative;margin:3px 0;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

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

color: #706f5c;}

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

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

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

Lepas u all dah masukkan CSS Code diatas sebelum code ]]></b:skin>, u all bolehlah klik "SAVE". Tapi aku nasihatkan, u all klik "PREVIEW" dulu. Kalau dah menjadi, barulah u all klik "SAVE".

Multicoloured RSS Feed Widget v1.1

Versi 1.1 ni aku cuma tambahkan effect hover dan juga transition rotate. Masih mengekalkan bentuk dan design yang sama. Cuma perbezaannya hanyalah penambahan effect sahaja. Arahan sama sahaja seperti di versi 1.0 cuma CSS Code sahaja yang  berlainan.

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

#Feed1 ul li:hover { 

border:4px groove #222; 

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

}

#Feed1 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;}

#Feed1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#Feed1 ul li:first-child:after,

#Feed1 ul li:first-child + li:after,

#Feed1 ul li:first-child + li + li:after,

#Feed1 ul li:first-child + li + li + li:after,

#Feed1 ul li:first-child + li + li + li + li:after,

#Feed1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:10px;right:5px;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}

#Feed1 ul li:first-child + li + li + li + li{background:#FA58F4;width:90%}

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

#Feed1 ul li:first-child + li + li + li{background:#9A2EFE;width:90%}

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

#Feed1 ul li:first-child + li + li{background:#2E9AFE;width:90%}

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

#Feed1 ul li:first-child + li{background:#9AFE2E; width:90%}

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

#Feed1 ul li:first-child{background:#FE9A2E ;width:90%}

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

#Feed1 ul{margin:0;padding:0px 0;list-style-type:none}

#Feed1 ul li{position:relative;margin:3px 0;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

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

color: #706f5c;}

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

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

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

Dalam versi 1.1 ni. Aku cuma tambah CSS Code yang diwarnakan dengan warna merah tu ke dalam CSS Code versi 1.0.

Multicoloured RSS Feed v1.2

Versi 1.2 ni aku menggunakan CSS Code Version 1.1, tetapi aku mengubah size kotak bagi setiap kotak feed. Style ni lebih menyerupai seperti gambar signal/coverage line handphone.

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

#Feed1 ul li:hover { 

border:4px groove #222; 

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

}

#Feed1 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;}

#Feed1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#Feed1 ul li:first-child:after,

#Feed1 ul li:first-child + li:after,

#Feed1 ul li:first-child + li + li:after,

#Feed1 ul li:first-child + li + li + li:after,

#Feed1 ul li:first-child + li + li + li + li:after,

#Feed1 ul li:first-child + li + li + li + li + li:after{position:absolute;top:10px;right:5px;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}

#Feed1 ul li:first-child + li + li + li + li{background:#FA58F4;width:74%}

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

#Feed1 ul li:first-child + li + li + li{background:#9A2EFE;width:78%}

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

#Feed1 ul li:first-child + li + li{background:#2E9AFE;width:82%}

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

#Feed1 ul li:first-child + li{background:#9AFE2E; width:86%}

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

#Feed1 ul li:first-child{background:#FE9A2E ;width:90%}

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

#Feed1 ul{margin:0;padding:0px 0;list-style-type:none}

#Feed1 ul li{position:relative;margin:3px 0;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

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

color: #706f5c;}

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

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

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

Okay, kalau u all tak nak ada effect transition rotate pada Multicoloured RSS Feed Widget v1.2 ni. U all cuma perlu buang code yang diwarnakan dengan warna biru tu jer. Dah settle, sila klik SAVE.