Zone Widget Blog

Showing posts with label Zone Widget Blog. Show all posts

Widget Artikel Terkini By Label (Recent Post By Label)

November 8, 2012

Okay sebentar tadi aku dah kongsikan macam mana nak buat widget "Artikel Terkini/Recent Post". Kali ni aku akan kongsikan widget yang sama tapi versi ini memaparkan artikel mengikut label yang telah disetkan. Maksudnya artikel terkini mengikut labellah lebih kurang macam "Page Tutorial" dalam blog ni. Kalau nak tengok demo, just klik tab Menu Tutorial kat atas tu okay.

Cara Install Widget

Macam biasalah perkara pertama yang u all kena buat adalah add widget > HTML/JavaScript > Copy and Paste code kat bawah ni.

<style>
#recentposts ol {
border : medium none;
margin : 3px 5px 0px 28px;
padding : 0;display:block;
}

#recentposts ol {
font-size: 13px;
font-variant:small-caps;
font-family: Georgia, &#39;Times New Roman&#39;, Times, serif;
text-align:justify;
display:block;
margin-bottom:5px;
}

#recentposts ol img.thumbnail {
border: 1px solid #DDD;
padding: 2px;
background-color: white;
float: left;
margin: 0 8px 0 0;
display:yes;
}

.recentposts ol a:link, .recentposts ol a:visited, .recentposts ol a:active {
display: block; 
color: #727272; 
padding: 8px; 
background-image: none !important;
display:block;
} 

#recentposts ol span.meta {
display: block;
font-size: 10px;
text-transform: uppercase;
color: #777;
line-height: 20px;
}
</style>
<div  id="recentposts"><ol>
<script type="text/javascript" src="http://yourjavascript.com/22683011251/recent.js"></script>
<script style='text/javascript'>
var numposts = 1000;
var showpostthumbnails = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
</script>
<script src='http://www.sembangcyber.com/feeds/posts/default/-/Label?max-results=1000&alt=json-in-script&callback=recent'></script>
</ol></div>

Customize Widget:

Sila tukar www.sembangcyber.com kepada url blog u all sendiri.
1000 tu terpulang pada u all nak tukar ataupun tidak.
Label tu sila tukar dengan label yang u all mahu paparkan. Kalau label tu lebih dari 2 perkataan, sila tambah %20 untuk dijadikan jarak diantara perkataan. Contohlah andai kata u all nak paparkan label Zone Cinta. Anda perlu buat seperti ini Zone%20Cinta. Kalau u all tak letak %20, widget berkenaan tidak akan berfungsi.
Kalau bilangan artikel banyak sangat. u all gunalahkan fungsi scroll. Sila rujuk artikel "Widget Artikel Terkini (Recent Post)".

{ 0 ♥ comment }

Artikel Penuh..»

Widget Artikel Terkini (Recent Post)

Okay hari ni aku nak berkongsi dengan rakan-rakan blogger sekalian 1 widget yang berkepentingan dan wajib ada didalam blog u all, tak lain tak bukan adalah widget "Artikel Terkini / Recent Post". Pasai apa wajib ?

Wajib tu sebenarnya bergantung pada u all sendirilah. Sebabnya widget ni mampu meningkatkan "Page View" artikel-artikel lama dalam blog u all tu.

Okay, sebenarnya widget ni asalnya adalah widget "Recent Post" untuk memaparkan artikel terkini mengikut label yang disetkan. Tapi aku dah ubah kepada jenis yang memaparkan feed blog. Ini adalah kerana versi asal hanya boleh memaparkan 22-25 artikel sahaja. Jadi aku telah tweak widget ni mengikut citarasa aku sendiri.

Okay dah ar tu jom ikuti langkah-langkah installation widget ni.

Cara Install Widget Artikel Terkini.

Pergi ke Layout.
Add Widget > HTML/JavaScript
Copy and Paste code di bawah ni.
Klik "SAVE". Jangan lupa ikuti arahan untuk customize widget terlebih dahulu sebelum save.

<style>
#recentposts ol {
border : medium none;
margin : 3px 5px 0px 28px;
padding : 0;display:block;
}

#recentposts ol {
font-size: 13px;
font-variant:small-caps;
font-family: Georgia, &#39;Times New Roman&#39;, Times, serif;
text-align:justify;
display:block;
margin-bottom:5px;
}

#recentposts ol img.thumbnail {
border: 1px solid #DDD;
padding: 2px;
background-color: white;
float: left;
margin: 0 8px 0 0;
display:yes;
}

.recentposts ol a:link, .recentposts ol a:visited, .recentposts ol a:active {
display: block; 
color: #727272; 
padding: 8px; 
background-image: none !important;
display:block;
} 

#recentposts ol span.meta {
display: block;
font-size: 10px;
text-transform: uppercase;
color: #777;
line-height: 20px;
}
</style>
<div  id="recentposts"><ol>
<script type="text/javascript" src="http://yourjavascript.com/22683011251/recent.js"></script>
<script style='text/javascript'>
var numposts = 1000;
var showpostthumbnails = false;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
</script>
<script src='http://www.sembangcyber.com/feeds/posts/default?max-results=1000&alt=json-in-script&callback=recent'></script>
</ol></div>

Customize:

Sila tukar www.sembangcyber.com dengan url blog u all sendiri.
1000 tu adalah jumlah bilangan artikel yang hendak dipaparkan. u all boleh ubah atau biarkan jer angka 1000 tu. Tapi kalau u all nak paparkan kesemua artikel. Sila guna fungsi scroll.

Cara Memasukkan Fungsi Scroll.

Okay cara yang aku gunakan adalah dengan menge-hack widget "Artikel Terkini/Recent Post" di bahagian "Edit HTML". Apa yang u all perlu buat adalah:

Selepas selesai dengan langkah memasukkan widget. Sila pergi ke "Template" > "Edit HTML" > Tick "Expand Widget Template" > Ctrl + F, sila cari title widget artikel terkini u all tu dan cari barisan code <div class='widget-content'>.
Selepas jumpa code berkenaan. Sila tambah style='overflow:auto;height:300px;'. Code berkenaan akan menjadi seperti berikut:

<div class='widget-content' style='overflow:auto;height:300px;'>

Credit to: Smashing Tips.

{ 0 ♥ comment }

Artikel Penuh..»

Multicoloured RSS Feed Widget v2

August 3, 2012

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 .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{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 .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 .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{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 .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{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}

{ 0 ♥ comment }

Artikel Penuh..»

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 .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 .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{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 .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{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.

{ 0 ♥ comment }

Artikel Penuh..»

Official Popular Post Tweak v1

August 2, 2012

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].

{ 0 ♥ comment }

Artikel Penuh..»

July 19, 2012

Sebelum ni saya telah mengajar cara membuat "Related Post MagzEvo Version | Customize Thesis For Blogspot". Kali ini tutor yang sama, tapi ianya telah di tweak sedikit. Di mana tutor kali ini hanya memaparkan tajuk sahaja. Ianya tidak akan memaparkan "Summary Post & Gambar + Read More". Kalau anda dah lupa, sila rujuk:

Related Post MagzEvo Version | Customize Thesis For Blogspot.

1. Log In ke Dashboard:

Okay, macam biasalah. Perkara pertama yang perlu anda buat adalah anda perlu log in ke dashboard > template > edit HTML > Proceed.

Sila tanda tick pada "Expand Widget Templates".

2. Memasukkan Code CSS/Style Sheet:

Sekarang kita teruskan dengan langkah-langkah memasukkan code yang berkaitan ke dalam ruangan edit HTML. Anda dinasihatkan untuk membuat back up sebelum melakukan proses ini.

Sila cari code </head> dengan menggunakan button "Ctrl + F". Bila dah jumpa, sila copy dan paste code dibawah sebelum code </head>.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
<style>
#main-wrapper {width: 610px;}
.post {border-bottom: 1px solid #ddd;}
}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<style>
#related_posts{}
#related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C}
#relpost_img_sum{/* height:65px; overflow:auto; */margin:0; padding:0px; line-height:16px}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none; margin:0; padding:0}
#relpost_img_sum li{border:1px dashed #ccc; background:#fff; margin:0 0 5px; padding:5px; height:20px; list-style:none}
#relpost_img_sum .news-title{display:block; font-weight:bold !important}
#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}
#relpost_img_sum img{float:left;display:none; margin-right:5px; padding:4px; border:solid 1px #ccc; width:0px; height:0px; background:#fff}
#related_posts a:link {color:#222;text-decoration:none;}
#related_posts a:visited {color:#F87431;text-decoration:none;}
#related_posts a:hover {color:#F87431;text-decoration:underline;}
</style>
<script type='text/javascript'>//<![CDATA[
var relnum = 0;
var relmaxposts = 5;
var numchars = 0;
var morelink = "";

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))
//]]></script>
</b:if>

3. Langkah Memasukkan Code HTML:

Selepas selesai dengan langkah ke 2. Kita teruskan dengan langkah ke 3 iaitu memasukkan code HTML Related Post.

3.2 Code HTML Untuk Pengguna Sistem Komen Asal:

Ini pula arahan buat mereka yang masih menggunakan sistem komen asal template D.I.Y Theme: Thesis For Blogspot. Anda cuma perlu mencari code:

<span class='st_sharethis_hcount' displayText='ShareThis'/></div></div>

Selepas anda menjumpai code berkenaan sila copy dan paste code di bawah selepas code </div> dan pastikan anda meletakkannya sebelum code </b:if>.

<h4 style='color:#fff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#000;'>Related Posts</h4>

<b:loop values='data:post.labels' var='label'>

</b:loop>

</ul>

</div>

3.2.1 Arahan Untuk Customize Code HTML:

Code yang di highlight dengan warna biru itu adalah code warna tulisan bagi perkataan "Related Post" dan ianya berwarna putih.
Code yang di highlight dengan warna hijau itu pula adalah code warna latar bagi perkataan "Related Post" dan ianya berwarna hitam.
Perkataan "Related Post" yang di highlight dengan warna merah itu. Anda boleh ubah dengan ayat anda sendiri.

Note:

Tutor ini boleh digunapakai untuk TFBv1 & TFBv2. Pengguna custom template lain pun boleh try guna juga. Tapi kena tahu nak letak kat mana jer code di step 3 tu.

{ 0 ♥ comment }

Artikel Penuh..»

February 1, 2012

Related Post adalah merupakan widget yang akan memaparkan beberapa artikel yang berkaitan dengan sesuatu artikel. Kebiasaannya ianya akan memaparkan minimum 5 artikel yang berkaitan dengan sesuatu artikel di bahagian bawah artikel yang dibaca.

Kali ni M'Rie nak kongsikan dengan anda semua. Bagaimana hendak memasukkan widget berkenaan ke dalam template D.I.Y Theme: Thesis For Blogspot.

1. Log In ke Dashboard:

Okay, macam biasalah. Perkara pertama yang perlu anda buat adalah anda perlu log in ke dashboard > template > edit HTML > Proceed.

Sila tanda tick pada "Expand Widget Templates".

2. Memasukkan Code CSS/Style Sheet:

Sekarang kita teruskan dengan langkah-langkah memasukkan code yang berkaitan ke dalam ruangan edit HTML. Anda dinasihatkan untuk membuat back up sebelum melakukan proses ini.

Sila cari code </head> dengan menggunakan button "Ctrl + F". Bila dah jumpa, sila copy dan paste code dibawah sebelum code </head>.

<b:if cond='data:blog.url != data:blog.homepageUrl'>

<style>

#main-wrapper {width: 610px;}

.post {border-bottom: 1px solid #ddd;}

}

</style>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<style>

#related_posts{}

#related_posts h4{ border-top:1px solid #333; border-bottom:1px solid #333; color:#333; font-size:14px; letter-spacing:0; line-height:20px; margin:0 0 5px; padding:5px 10px; background:#03C}

#relpost_img_sum{/* height:320px; overflow:auto; */margin:0; padding:0px; line-height:16px}

#relpost_img_sum:hover{background:none}

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

#relpost_img_sum li{border:1px solid #ccc; background:#fff; margin:0 0 5px; padding:5px; height:65px; list-style:none}

#relpost_img_sum .news-title{display:block; font-weight:bold !important}

#relpost_img_sum .news-text{display:block; text-align:justify; font-weight:normal; text-transform:none; color:#333}

#relpost_img_sum img{float:left; margin-right:5px; padding:4px; border:solid 1px #ccc; width:50px; height:50px; background:#fff}

</style>

var relnum = 0;

var relmaxposts = 5;

var numchars = 200;

var morelink = "readmore";

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 4=f g();2 5=f g();2 9=f g();2 b=f g();s K(L,M){2 7=L.19("<");l(2 i=0;i<7.3;i++){8(7[i].N(">")!=-1){7[i]=7[i].O(7[i].N(">")+1,7[i].3)}}7=7.1a("");7=7.O(0,M-1);y 7}s 1b(z){l(2 i=0;i<z.P.6.3;i++){2 6=z.P.6[i];4[n]=6.A.$t;u="";8("Q"B 6){u=6.Q.$t}C 8("R"B 6){u=6.R.$t}9[n]=K(u,1c);8("S$T"B 6){D=6.S$T.1d}C{D="1e://1f.1g.1h/1i/1j/1k/1l/d/1m.1n"}b[n]=D;l(2 k=0;k<6.E.3;k++){8(6.E[k].U==\'1o\'){5[n]=6.E[k].v;F}}n++}}s V(a,e){l(2 j=0;j<a.3;j++)8(a[j]==e)y 1p;y 1q}s 1r(){2 m=f g(0);2 o=f g(0);2 p=f g(0);2 q=f g(0);l(2 i=0;i<5.3;i++){8(!V(m,5[i])){m.3+=1;m[m.3-1]=5[i];o.3+=1;o[o.3-1]=4[i];p.3+=1;p[p.3-1]=9[i];q.3+=1;q[q.3-1]=b[i]}}4=o;5=m;9=p;b=q;l(2 i=0;i<4.3;i++){2 c=w.W((4.3-1)*w.X());2 Y=4[i];2 Z=5[i];2 10=9[i];2 11=b[i];4[i]=4[c];5[i]=5[c];9[i]=9[c];b[i]=b[c];4[c]=Y;5[c]=Z;9[c]=10;b[c]=11}2 x=0;2 r=w.W((4.3-1)*w.X());2 12=r;2 h;2 13=14.1s;1t(x<15){8(5[r]!=13){h="<16 G=\'H-A 1u\'>";h+="<a v=\'"+5[r]+"\' U=\'1v\' I=\'J\' A=\'"+4[r]+"\'><1w 1x=\'"+b[r]+"\' /></a>";h+="<a v=\'"+5[r]+"\' I=\'J\'>"+4[r]+"</a>";h+="<17 G=\'H-18\'>"+9[r]+" ... <a v=\'"+5[r]+"\' I=\'J\'>"+1y+"</a><17 G=\'H-18\'>";h+="</16>";14.1z(h);x++;8(x==15){F}}8(r<4.3-1){r++}C{r=0}8(r==12){F}}}',62,98,'||var|length|reljudul|relurls|entry|cuplik|if|relcuplikan||relgambar|informasi|||new|Array|relhasil||||for|tmp|relnum|tmp2|tmp3|tmp4||function||postcontent|href|Math|rangkumanPosts|return|json|title|in|else|postimg|link|break|class|news|target|_top|saringtags|suchas|panjang|indexOf|substring|feed|content|summary|media|thumbnail|rel|contains|floor|random|tempJudul|tempUrls|tempCuplikan|tempGambar|rini|dirURL|document|relmaxposts|li|span|text|split|join|relpostimgthum|numchars|url|http|lh3|ggpht|com|_xcD4JK_dIjU|SnamIh0KTCI|AAAAAAAADMA|hLjqmEbdtkw|noimagethumb|gif|alternate|true|false|relatpost|URL|while|clearfix|nofollow|img|src|morelink|write'.split('|'),0,{}))

//]]></script>

</b:if>

3. Langkah Memasukkan Code HTML:

Selepas selesai dengan langkah ke 2. Kita teruskan dengan langkah ke 3 iaitu memasukkan code HTML Related Post.

3.1 Code HTML :

Ini pula arahan buat mereka yang masih menggunakan sistem komen asal template D.I.Y Theme: Thesis For Blogspot. Anda cuma perlu mencari code:

<span class='st_sharethis_hcount' displayText='ShareThis'/></div></div>

Selepas anda menjumpai code berkenaan sila copy dan paste code di bawah selepas code </div> dan pastikan anda meletakkannya sebelum code </b:if>.

<h4 style='color:#fff; text-shadow:none; border-radius:5px; border:2px solid #ddd; background:#000;'>Related Posts</h4>

<b:loop values='data:post.labels' var='label'>

</b:loop>

</ul>

</div>

Bagi pengguna template TFBv2. Sila cari "", paste kan code related post selepas barisan ayat berkenaan (Jika anda tidak jumpa dengan code share this yang dimaksudkan diatas).

3.1.1 Arahan Untuk Customize Code HTML:

Code yang di highlight dengan warna biru itu adalah code warna tulisan bagi perkataan "Related Post" dan ianya berwarna putih.
Code yang di highlight dengan warna hijau itu pula adalah code warna latar bagi perkataan "Related Post" dan ianya berwarna hitam.
Perkataan "Related Post" yang di highlight dengan warna merah itu. Anda boleh ubah dengan ayat anda sendiri.

Note:

Tutor ini boleh digunapakai untuk TFBv1 & TFBv2. Pengguna custom template lain pun boleh try guna juga. Tapi kena tahu nak letak kat mana jer code di step 3 tu.

Tutor Related Post di atas akan memaparkan gambar (artikel yang ada gambar). Bagi artikel yang tiada gambar, gambar default akan terpapar.

{ 0 ♥ comment }

Artikel Penuh..»

Widget Get Connect Versi Sembang Cyber

January 25, 2012

Hari ni M'Rie nak kongsikan dengan anda semua. Bagaimana nak membuat widget "Get Connect" sama seperti dalam blog Sembang Cyber. Contohnya adalah seperti dibawah ini.

Sebenarnya tutorial ini dihasilkan atas permintaan rakan blogger. Di mana rakan blogger berkenaan berkenan dengan widget "Get Connect" tersebut.

Sebenarnya widget berkenaan dicipta adalah untuk mengurangkan masa loading blog. Di mana widget asal bagi Google Friend Connect dan juga Google Plus telah mempengaruhi masa loading blog. Disebabkan itu, M'Rie membuat kajian dengan mencipta widget berkenaan. Alhamdulillah ianya dapat membantu meringankan loading blog ini.

Download & Upload Imej

Okay perkara pertama yang anda perlu lakukan adalah memuat turun imej-imej dibawah ke dalam komputer anda. Kemudian sila upload kesemua gambar yang telah di muat turun tadi ke dalam Picasa Web Album ataupun Picture Hosting yang anda mahukan.

Tujuan anda disuruh berbuat demikian adalah untuk mengelakkan widget ini hilang fungsi. Kerana tiada jaminan imej-imej dibawah akan terpapar di blog anda jika anda menggunakan link imej yang ada di dalam tutor ini. Tetapi anda boleh cuba dulu memasang widget ini ke dalam blog anda dan jika imej-imej dibawah terpapar. Anda tidak perlu lakukan seperti yang disuruh tadi. Tapi anda nak buat pun boleh juga. Ianya sebagai sokongan jika saya terdelete imej-imej berkenaan dari Picasa Web Album saya.

Langkah-langkah Pemasangan

Selepas anda selesai dengan langkah utama tadi. Silalah Log In ke dashboard blog anda, kemudian pilih "Layout" diikuti "Add a Gadget" dan seterusnya pilih "HTML/JavaScript".

Copy and Paste code dibawah ke dalam ruangan HTML/JavaScript tadi.

HTML/JavaScript

</div>

Langkah untuk Customize Widget Get Connect

Sekarang kita teruskan dengan arahan untuk customize widget berkenaan.

Okay yang berwarna merah tu anda perlu gantikan dengan ID anda sendiri. Untuk yang gambar sampul surat tu. Anda perlu aktifkan fungsi email di feedburner. Kerana jika anda tidak aktifkan. Ianya tidak akan berfungsi.
Manakala yang berwarna hijau itu pula adalah link/url bagi imej button yang anda download dan upload ke dalam hosting gambar anda sendiri. Anda boleh tukar dengan link anda sendiri.
Sekian itu sahaja. Apa-apa hal boleh roger saya di facebook ataupun hantar email kepada saya melalui ruangan feedback. Nak lagi senang, anda boleh tinggalkan komen anda dibawah.

Serupa Tapi Tak Sama

Mesti anda berasa pelik. Kerana hasil yang anda akan dapat dari tutor di atas tidak sama dengan di sidebar. Okay sebenarnya widget "Get Connect" yang terdapat didalam blog ini adalah gabungan dari widget "Label Blogspot" dan juga widget "Get Connect".

Anda boleh buat sama seperti yang saya lakukan. Tapi anda haruslah men-tweak widget label kepada versi dropdown terlebih dahulu. Jika anda mahukan yang sama seperti di blog ini sila tinggalkan komen dibawah. Jika terdapat banyak permintaan. Baru saya akan buat tutor penuh widget berkenaan.

{ 0 ♥ comment }

Artikel Penuh..»

Widget Subscribe dan Social Network

December 30, 2011

As Salam, kali ni saya ingin berkongsikan dengan anda. Salah satu widget yang saya ambil dari template mana entah saya tak berapa nak ingat. Kalau tak silap saya widget ni dari theme WP. Sebab saya suka menghasilkan widget-widget yang pada saya nampak cantik & jika berkenan di hati. Saya akan cuba sedaya upaya membinanya dengan usaha sendiri.

Kebanyakkan tutorial widget-widget yang ada di dalam blog ini, kebiasaannya saya ambil dari template. Di mana widget-widget berkenaan telah sedia ada dalam template (widget yang digabungkan dengan template). Tapi bukan semualah. Ada juga yang saya ambil dari blog-blog lain & saya simpan di blog saya untuk buat rujukan.

Okay, mari kita teruskan dengan langkah-langkah meng-install widget ini ke dalam blog.

Macam biasalah. Kenalah Log In ke Dashboard.
Klik Layout > Add a Gadget > HTML/JavaScript. (Interface Baru).
Klik Design > Page Elements > Add a Gadget > HTML/JavaScript. (Interface Lama).
Copy & Paste code dibawah di dalam ruang HTML/JavaScript tadi.

<a href="http://feeds.feedburner.com/your-feed-id" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVqKUsLoAE2kF2lq2F7wnrBKIZjB2BAeW3BakVTMtwmtbqTIZrMOT0zlYD1EXPKGok_iaIm9icGuP9txzoxJPcOYoh0tMNrSQYNB7lqdANPKs7zNByhsoFuW-EeL1LxP9o0B2hdM1vHOiy/s299/rss.png" width="270"  /></a>      <a href="http://feedburner.google.com/fb/a/mailverify?uri=your-feed-id&loc=en_US" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0jlSIJ_0Q9Z_-rKqU5xlYoc5prp6XGjWCYkMERMMsexPv1ZJ5c8XkKaYJqO_XRSQz6WcS02M1zJlK7_vnCLQ2jRc7nTW1htYJ7iICH5e5oYT9mSTbO2dXKnsm4-g8y-NA75-iyuAV0DYt/s299/mail.png" width="270" /></a>      <a href="change-with-your-fb-page-url" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim0tnjJdwlvyOCVCDfH3mICr8DPKbq5REIZNAbwQoKnR340zfIMgrQkQCfauJM17PMF4IWCTRWjhdhS0kPgG8xhNXk3OIqVFurj6is-xBUADvvmLSWhcUcsf1Bo2bBJC28aoeOdsRod39w/s299/facebook.png" width="270"/></a>      <a href="http://twitter.com/your-twitter-id" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIChdv69GVZ4VNJxXPQUN-M6QJMHAAVRlYbE8l1TpQ925neoF3dhNuYV2QJRa0PaigBYIHbIyFLrbO3YV2ODWmhM41ckqC6CaAOTMRfqNwr52A5N8YLAqCfryXBXnQk6GFhIxgJ8ug61Y4/s299/twitter.png" width="270" /></a>

Arahan untuk mengedit code di atas:

Sila copy & paste code di atas di dalam WordPad.
Sila tukar your-feed-id dengan id feedburner anda.
Sila tukar change-with-your-fb-page-url dengan url fanpage ataupun facebook profile anda.

Okay itu sahaja. Selesai anda meng-edit code berkenaan. Sila copy & paste masukkan dalam widget HTML/JavaScript. Kemudian klik "SAVE". Harus di ingat, kelebaran sidebar anda haruslah 280px - 300px. Ini kerana widget berkenaan kelebarannya adalah 270px. Peringatan: Sila download gambar-gambar di atas & hostkan di dalam Picasa Web Album anda sendiri. Selepas itu anda boleh tukar url image di dalam code diatas. Ini adalah jika saya terdelete gambar-gambar berkenaan dari hosting Picasa Web Album saya, anda ada back up untuk cover widget anda itu.

Sekiranya ada kemushkilan. Sila hubungi saya diruangan Contact Us. Saya akan bantu anda jika terdaya. Sekian, Terima Kasih.

{ 0 ♥ comment }

Artikel Penuh..»

Pages

November 8, 2012

Cara Install Widget

Customize Widget:

document.write(ultimaFecha);

Cara Install Widget Artikel Terkini.

Customize:

Cara Memasukkan Fungsi Scroll.

August 3, 2012

Multicoloured RSS Feed Widget v2.0 [Normal Version]

Multicoloured RSS Feed Widget v2.1 [Transition Rotate & Hover Effect]

Multicoloured RSS Feed Widget v2.2

Multicoloured RSS Feed Widget v2.3

document.write(ultimaFecha);

Multicoloured RSS Feed Widget v1.0

Multicoloured RSS Feed Widget v1.1

Multicoloured RSS Feed v1.2

August 2, 2012

Basic Step:

CSS Code Official Popular Post Tweak v1 [WAJIB].

Customize Official Popular Post Tweak v1 [OPTIONAL].

Size Popular Post & Warna Background.

Bentuk & Bebayang Kotak (Box Shadow) Popular Posts.

Hover Effect.

Keunikkan Tutor Official Popular Posts Tweak v1.

July 19, 2012

1. Log In ke Dashboard:

2. Memasukkan Code CSS/Style Sheet:

3. Langkah Memasukkan Code HTML:

3.2 Code HTML Untuk Pengguna Sistem Komen Asal:

3.2.1 Arahan Untuk Customize Code HTML:

Note:

February 1, 2012

1. Log In ke Dashboard:

2. Memasukkan Code CSS/Style Sheet:

3. Langkah Memasukkan Code HTML:

3.1 Code HTML :

3.1.1 Arahan Untuk Customize Code HTML:

Note:

January 25, 2012

Download & Upload Imej

Langkah-langkah Pemasangan

HTML/JavaScript

Langkah untuk Customize Widget Get Connect

Serupa Tapi Tak Sama

December 30, 2011

Artikel Terkini