Kembali lagi dengan tutor yang seterusnya. Masih lagi bereksperimen dengan widget Feed. Tapi kali ni aku mengubah sikit rupa bentuk widget ni kepada yang lebih stylo dari sebelum ini, dalam erti kata lain. Versi Modern gitu.
Mesti u all tertanya-tanya. Kenapa setiap kali aku update blog. Mesti aku buat tutor.
D'Answer is...aku ni jenis yang suka belajar dan mencuba sesuatu yang baru. Bila aku dah mula buat, aku akan buat sampailah aku puas hati dan secara tidak langsung. Aku akan dapat kemahiran baru dalam dunia blogging ni.
Orang lama kata, kalau kita banyak kemahiran dalam dunia blogging. Nanti kita akan disegani + dihormati serta dipuja oleh blogger lain. Betul ataupun tak, itu hanya mereka dan yang seangkatan dengannya sahaja yang mengetahuinya. Yang tu aku tak ambil port sangat. Sebab selagi apa yang aku kongsikan tu boleh memberikan manfaat kepada orang lain. Bagi aku itu sudah cukup memuaskan hati aku. Okay stop merapu dan jom teruskan dengan tutornya ya sobat sekalian.
Multicoloured RSS Feed Widget v2.0 [Normal Version]
- Log In ke Dashboard.
- Layout --> Add a Gadget --> Feed.
- Template --> Edit HTML --> Proceed.
- Ctrl + F dan sila cari code ]]></b:skin>
- Copy & Paste 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-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}
#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:6px 0;border-radius:0px 25px 0px 25px;-moz-border-radius:0px 25px 0px 25px;-webkit-border-radius:0px 25px 0px 25px;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}
Multicoloured RSS Feed Widget v2.1 [Transition Rotate & Hover Effect]
#Feed1 ul li
a:hover{color:#fff;text-decoration:none}
#Feed1 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;
}
#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-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}
#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:6px 0;border-radius:0px 25px 0px 25px;-moz-border-radius:0px 25px 0px 25px;-webkit-border-radius:0px 25px 0px 25px;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}
Multicoloured RSS Feed Widget v2.2
#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-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}
#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: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}
.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}
Multicoloured RSS Feed Widget v2.3
#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-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}
#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:6px 0;border-radius:25px 25px 25px 25px;-moz-border-radius:25px 25px 25px 25px;-webkit-border-radius:25px 25px 25px 25px;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}
Post a Comment