Gadget Recent Post Horizontal

Kalau kita jumpai pada beberapa blog yang ada saat ini, pasti ada yang namanya Gadget Recent Post. Beberapa variasi Gadget Recent Post bermunculan baik di Sidebar maupun pada footer atau yang sering saya sebut lawbar.

Dari pengalaman melirik Gadget Recent Post dengan CSS ( Colong Sana Sini ), saya menemukan modifikasi Gadget Recent Post dengan posisi horizontal.

Untuk lebih jelasnya, silahkan praktekkan kode dibawah ini pada blog anda.


Setelah kita Login di Blogger, silahkan masuk pada Tata Letak | Element Halaman | kemudian tambahkan gadget | pilih HTML/ Javascript. Setelah itu masukkan kode dibawah ini :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://librarysupporter.googlepages.com/thumb.jpg";
imgr[1] = "http://librarysupporter.googlepages.com/thumb1.jpg";
imgr[2] = "http://librarysupporter.googlepages.com/thumb2.jpg";
imgr[3] = "http://librarysupporter.googlepages.com/thumb3.jpg";
imgr[4] = "http://librarysupporter.googlepages.com/thumb4.jpg";
imgr[5] = "http://librarysupporter.googlepages.com/thumb5.jpg";
imgr[6] = "http://librarysupporter.googlepages.com/thumb6.jpg";
imgr[7] = "http://librarysupporter.googlepages.com/thumb7.jpg";
imgr[8] = "http://librarysupporter.googlepages.com/thumb8.jpg";
imgr[9] = "http://librarysupporter.googlepages.com/thumb9.jpg";

showRandomImg = true;

tablewidth = 980;
cellspacing = 7;
borderColor = "#000000";
bgTD = "transparant";

imgwidth = 113;
imgheight = 100;

fntsize = 12;
acolor = "#ffffff";
aBold = true;
icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 0;
summaryFontsize = 11;
summaryColor = "#03f8fb";
icon2 = " ";

numposts = 8;

home_page = "http://ahn-bidikcom.blogspot.com/";

</script>
<script src="http://librarysupporter.googlepages.com/recentposts_horizontal_title_below_no.js" type="text/javascript"> </script>

Petunjuk modifikasi : (Berdasarkan pengalaman saya):

tablewidth = 980; adalah kelebaran dari gadget bila Content-Wrapper = 990px.
imgwidth = 113; ukuran lebar gambar
imgheight = 100; ukuran tinggi gambar
fntsize = 12; ukuran dari font
acolor = "#ffffff"; warna dari font
showPostDate = true; kode agar tanggal post muncul, diganti false bila tidak dikehendaki
numposts = 8; jumlah recent post yang ditampilkan
home_page = "http://ahn-bidikcom.blogspot.com/"; ini adalah alamat dari blog yang mana posting dari blog tersebut akan ditampilkan

Yang lainnya.. silahkan diotak-atik sendiri.

Adapun Gadget Recent Post Horizontal ini sudah saya praktekkan di modifikasi IRENGBLUE Style Blogger Theme yang penggarapannya baru mencapai 40 %.

Silahkan anda kunjungi demonya pada modifikasi template yang nantinya akan saya persembahkan buat anda semua secara gratis..tis...tis... cuma tinggal ngomentari doang... yang penting tidak dicaci maki, guwe udah senang..ha..h..


DEMO ( lihat diatas footer )

Prosedur Modifikasi MINIMA (III)

Merombak susunan Header.

Pada kesempatan Prosedur Modifikasi Minima (III) kali ini kita akan membahas bagaimana kita merombak susunan headernya, yang semula utuh akan kita bagi menjadi dua ruang.

Langkah yang harus kita lakukan adalah mengganti susunan Header Minima asli dari :

/* Header
-----------------------------------------------
*/

#header-wrapper {
...... dst ..... s/d ......


#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

dengan kode dibawah ini :

#header {
background: #ff55dd url(http://i288.photobucket.com/albums/ll179/ahnning/hdbg.png);
width: 980px;
height: 100px;
color: #FFF;
font-size: 11px;
margin: 0;
padding: 0;
overflow: hidden;
}
#header-inner {
background-position: left;
background-repeat: no;
}
#header h1 {
color: #FFF;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 15px 0 0 20px;
text-decoration: none;
}
#header h1 a, #header h1 a:visited {
color: #FFF;
font-size: 36px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 0;
text-decoration: none;
}
#header h1 a:hover {
color: #FFF;
text-decoration: none;
}
#header h3 {
color: #A91B33;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 0;
padding: 0;
}

#header p {
color: #FFF;
padding: 0 0 5px 20px;
margin: 0;
line-height: 20px;
}

.headerleft {
width: 480px;
float: left;
font-size: 14px;
margin: 0;
padding: 0;
}

.headerleft a img {
border: none;
margin: 0;
padding: 0;
}

.headerright {
width: 486px;
float: right;
margin: 0;
padding: 18px 0 0;
font-weight: bold;
}
.headerright a img {
border: 1px solid #FFF;
margin: 0 0 3px;
padding: 0;
}
#header .description {
color: #A91B33;
font-size: 16px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin-left: 25px;
padding: 0;
}


Kemudian kita juga akan menambahkan Nav bar dibawah header dengan menambahkan kode dibawah ini :


/*navigasi
-----------------------------*/


#NavbarMenu {
background: #bd027d;
width: 980px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFFFFF;
font-weight: bold;
margin: 0px;
padding: 0px;
}

}
#NavbarMenuleft {
width: 680px;
float: left;
margin: 0px;
padding: 0px;
}

#NavbarMenuright {
width: 300px;
font-size: 11px;
float: right;
margin: 0px;
padding: 6px 0px 0px 0px;

}
#nav {
margin: 0px;
padding: 0px;
}

#nav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#nav li {
list-style: none;
margin: 0px;
padding: 0px;
}

#nav li a, #nav li a:link, #nav li a:visited {
color: #f9ea01;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
margin: 0px;
padding: 9px 15px 8px 15px;
}

#nav li a:hover, #nav li a:active {
background: #EBE6D4 url(images/navhov.png);
color: #495D5C;
margin: 0px;
padding: 9px 15px 8px 15px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #E1DCCA;
width: 150px;
color: #495D5C;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0px;
padding: 7px 10px 7px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#nav li li a:hover, #nav li li a:active {
background: #85ACAC;
color: #FFFFFF;
padding: 7px 10px 7px 10px;
}

#nav li {
float: left;
padding: 0px;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0px;
padding: 0px;
}

#nav li li {
}

#nav li ul a {
width: 140px;
}

#nav li ul a:hover, #nav li ul a:active {
}

#nav li ul ul {
margin: -32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE !important;
width: 220px;
color: #202020;
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 0;
padding: 4px 0 3px 5px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
}
#searchbutton {
background: #fc06b9;
color: #FFF;
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 0 0 5px;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#subscribe {
margin: 0;
padding: 5px 0 0;
overflow: hidden;
}
#subbox {
background: #EEE !important;
width: 200px;
color: #202020;
font-size: 12px;
font-family: Georgia, Times New Roman, Trebuchet MS;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#subbutton {
background: #f9099c;
color: #FFF;
font-size: 11px;
font-family: Georgia, Times New Roman, Trebuchet MS;
margin: 0 0 0 7px;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#name, #email, #url {
background: #EEE !important;
width: 250px;
color: #202020;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#submit {
background: #000000;
color: #FFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 3px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#words {
background: #EEE;
width: 460px;
color: #202020;
font-size: 12px;
font-weight: normal;
margin: 5px 0 0;
padding: 3px 0 3px 5px;
border-top: 1px solid #666;
border-right: 1px solid #DDD;
border-left: 1px solid #666;
border-bottom: 1px solid #DDD;
display: inline;
}
#subnavbar {
background: #666666;
width: 980px;
height: 24px;
color: #FFFFFF;
margin: 0px 0px 2px 0px;
padding: 0px;
}

#subnav {
margin: 0px;
padding: 0px;
}

#subnav ul {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li {
float: left;
list-style: none;
margin: 0px;
padding: 0px;
}

#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFFFFF;
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}

#subnav li a:hover, #subnav li a:active {
background: #85ACAC;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 5px 0px 0px;
padding: 6px 13px 6px 13px;
}

#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #666666;
width: 140px;
float: none;
margin: 0px;
padding: 6px 10px 6px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#subnav li li a:hover, #subnav li li a:active {
background: #85ACAC;
margin: 0px;
padding: 6px 10px 6px 10px;
}

#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0px;
padding: 0px;
}

#subnav li li {
}

#subnav li ul a {
width: 140px;
}

#subnav li ul a:hover, #subnav li ul a:active {
}

#subnav li ul ul {
margin: -25px 0 0 161px;
}

#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}

#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}

#subnav li:hover, #subnav li.sfhover {
position: static;
}


Langkah selanjutnya adalah merubah susunan kode pada body :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'/>
</div>

dengan kode dibawah ini :

<div id='header'>

<div class='headerleft'>
&lt;img src=&quot;http://i288.photobucket.com/albums/ll179/ahnning/header-CA-animasi.gif&quot; border=&quot;0&quot; alt=&quot;Photobucket&quot;&gt;
</div>

<div class='headerright'>

&lt;script type=&#39;text/javascript&#39;&gt;&lt;!--
google_ad_client = &quot;pub-7181952237540333&quot;;
google_ad_host = &quot;pub-1556223355139109&quot;;
/* 468x60, created 6/18/08 */
google_ad_slot = &quot;5864627181&quot;;
google_ad_width = 468;
google_ad_height = 60;
//--&gt;
&lt;/script&gt;
&lt;script src=&#39;http://pagead2.googlesyndication.com/pagead/show_ads.js&#39; type=&#39;text/javascript&#39;&gt;
&lt;/script&gt;

</div>

</div>


Headerleft pada magazine blogger "Edel2xMinima" merupakan background Animasi yang kita buat dengan Adobe Photoshop dan diupload di Photobucket dengan ukuran 475px X 100px (GIF). (akan dibahas selanjutnya bagaimana membuat Animasi header).

Headerrightnya merupakan kode Adsense dengan ukuran 468px X 60px


KODE TAMBAHAN NAVBAR DIBAWAH HEADER :

Selanjutnya kita tambahkan kode dibawah ini :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='url anda'>Categori, misalnya Tutorial</a>
<ul>
<li><a href='url anda'>item tutorial anda</a></li>
<li><a href='url anda'>item tutorial anda</a></li>
<li><a href='url anda'>item tutorial anda</a></li>
</ul>
</li>
<li><a href='#'>item Post lainnya</a></li>
</ul>
</div>

<div id='NavbarMenuright'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='255' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this website...&quot;;}' onfocus='if (this.value == &quot;Search this website...&quot;) {this.value = &quot;&quot;}' type='text' value='Search this website...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>

</div>
</div>

<div style='clear:both;'/>

<div id='subnavbar'>
<ul id='subnav'>
<li>
<a href='#'>Community Events</a>
<ul>
<li>
<a href='#'>Sub Category #1</a>
<ul>
<li>
<a href='#'>Sub Sub Category #1</a>
</li>
<li>
<a href='#'>Sub Sub Category #2</a>
</li>
<li>
<a href='#'>Sub Sub Category #3</a>
</li>
</ul>
</li>
<li>
<a href='#'>Sub Category #2</a>
</li>
<li>
<a href='#'>Sub Category #3</a>
</li>
</ul>
</li>
<li>
<a href='#'>item anda</a>
</li>
<li>
<a href='#'>item Anda</a>
</li>
</ul>
</div>

<div style='clear:both;'/>

Pemasangan kode diatas, dibawah kode header diatas dan diatas kode :

<div id='content-wrapper'>

Silahkan dimodifikasi sendiri, dan jangan putus asa.

Prosedur Modifikasi MINIMA (II)

MENAMBAH TOPNAVBAR

Prosedure Modifikasi Minima bagian kedua kali ini merupakan lanjutan Prosedure modifikasi Minima bagian pertama yang membahas tentang bagaimana memodifikasi template minima menjadi "Edel2XMinima", kali ini kita akan membahas bagaimana menambahkan TopNavbar, yaitu ruang navigasi diatas Header.

Untuk meodifikasi ini, kita perlu menyembunyikan Navbar Blogger terlebih dahulu, pasang kode

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

setelah kode berikut :

/* Use this with templates/template-twocol.html */


kemudian kita tambahkan kode berikut, diatas kode : ]]></b:skin>


/*topnavbar
------------------------*/
#topnavbar {
background: #2c4755;
width: 980px;
height: 30px;
color: #FFFFFF;
margin: 0px 0px 2px 0px;
padding: 0px;
}

#topnavbar a, #topnavbar a:visited {
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
}

#topnavbar a:hover {
text-decoration: underline;
}

#topnavbar p {
font-size: 11px;
font-weight: bold;
padding: 0px;
margin: 0px;
}

.topnavbarleft {
width: 250px;
float: left;
margin: 0px;
padding: 8px 0px 0px 10px;
}

.topnavbarright {
width: 600px;
float: right;
margin: 0px;
padding: 7px 10px 0px 0px;
text-transform: uppercase;
text-align: right;
}

.topnavbarright a img {
border: none;
margin: 0px 3px 3px 0px;
padding: 0px;
}


pada body kita tambahkan : topnavbar yang isinya realtime, post feed & comment feed dari blog kita.

rubah <body> dengan <body onLoad='goforit()'> lalu tambahkan kode real time dibawah ini :


&lt;script&gt;

var dayarray=new Array(&quot;Sunday&quot;,&quot;Monday&quot;,&quot;Tuesday&quot;,&quot;Wednesday&quot;,&quot;Thursday&quot;,&quot;Friday&quot;,&quot;Saturday&quot;)
var montharray=new Array(&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;,&quot;August&quot;,&quot;September&quot;,&quot;October&quot;,&quot;November&quot;,&quot;December&quot;)
function getthedate(){
var mydate=new Date()
var year=mydate.getYear()
if (year &lt; 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()
var daym=mydate.getDate()
if (daym&lt;10)
daym=&quot;0&quot;+daym
var hours=mydate.getHours()
var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()
var dn=&quot;AM&quot;
if (hours&gt;=12)
dn=&quot;PM&quot;
if (hours&gt;12){
hours=hours-12
}
if (hours==0)
hours=12
if (minutes&lt;=9)
minutes=&quot;0&quot;+minutes
if (seconds&lt;=9)
seconds=&quot;0&quot;+seconds
//change font size here
var cdate=&quot;&lt;small&gt;&lt;font color=&#39;000000&#39; face=&#39;Arial&#39;&gt;&lt;b&gt;&quot;+dayarray[day]+&quot;, &quot;+montharray[month]+&quot; &quot;+daym+&quot;, &quot;+year+&quot; &quot;+hours+&quot;:&quot;+minutes+&quot;:&quot;+seconds+&quot; &quot;+dn
+&quot;&lt;/b&gt;&lt;/font&gt;&lt;/small&gt;&quot;
if (document.all)
document.all.clock.innerHTML=cdate
else if (document.getElementById)
document.getElementById(&quot;clock&quot;).innerHTML=cdate
else
document.write(cdate)
}
if (!document.all&amp;&amp;!document.getElementById)
getthedate()
function goforit(){
if (document.all||document.getElementById)
setInterval(&quot;getthedate()&quot;,1000)
}

&lt;/script&gt;

kemudian cari kode <div id='header-wrapper'> lalu tambahkan kode dibawah ini di atas kode tersebut


<div id='topnavbar'>

<div class='topnavbarleft'>
<span id='clock'/>
</div>

<div class='topnavbarright'>

<p><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'><img src='http://i288.photobucket.com/albums/ll179/ahnning/rssnatal.gif' style='vertical-align:middle'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts</a>

<a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'><img alt='' src='http://i288.photobucket.com/albums/ll179/ahnning/rssnatal.gif' style='vertical-align:middle;margin-left:10px;'/></a><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments</a></p>

</div>
</div>

(Bersambung.... )

Prosedur Modifikasi MINIMA ( Bag. I )

Prosedur modifikasi template MINIMA yang hasilnya menjadi Magazine Blogger "Edel2XMinima" adalah sebagai berikut :

1. Buat blog baru pada blogger, kemudian pilih minima. Dalam proses awal jangan centang kotak Expand. Kemudian cobalah membuat dua postingan sekaligus untuk mengetahui kondisi kolom posting saat kita modifikasi.

2. Langkah awal dalam proses modifikasi adalah, terlebih dahulu fokus kita pada pembagian ruang Main-wrapper & Sidebar . Mengingat pada bagian ini merupakan sasaran yang saya inginkan, sedangkan untuk bagian header dan footer belakangan, setelah kita berhasil dalam membagi ruang antara kolom posting dan sidebar.


3. Kita rubah dulu ukuran Header/footer-nya , coba perhatikan kode asli header & footer MINIMA :

#header-wrapper {
width:660px;
dst...... hingga }

kode footer :

/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
dst...... hingga }

Ganti width:660px; dengan width: 980px
(Selanjutnya akan kita bahas pada modifikasi header MINIMA)

4. Saatnya memodifikasi Outer dan Main-wrapper, Cari kode dibawah ini :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Ganti width : 660px; menjadi width: 980px;


5. Dibawah kode diatas terdapat kode berikut :

#main-wrapper {
width: 410px; ( ganti ukurannya menjadi 640px)
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 220px;( ganti ukurannya menjadi 310px)
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Sisa 30px digunakan untuk ukuran Margin & Padding ( selanjutnya disebut M & P )


6. Sekarang kita akan membagi dan memodifikasi kolom Main-wrapper.

#main-wrapper {
width: 640px;
border-right:3px solid $bordercolor; ( ini adalah kode tambahan pembatas kanan, ketebalan 3px bisa anda rubah sesuai kemauan )
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Tambahkan kode berikut :

#main-left {
width: 640px;
float: left;
margin: 4px 4px 0px 0px;
padding: 0px;
color: #000000;
background: $bgcolor;
border-right:.5px dotted $bordercolor; ( dotted = titik-titik, bisa anda rubah SOLID agar nampak utuh garisnya )
}

#main-left .widget {
margin:0 0 1.5em;
padding:0 1.5em 1.5em .75em;
}

#main-right{
float:right;
margin: 4px 4px 4px 4px;
padding: 0px;
background:$bgcolor;
width:220px; ( ini adalah lebar kolom kanan )
line-height:1.2em
}

#main-right h2{
margin-bottom:5px;
padding-bottom:5px;line-height:1.1em;
font:normal normal Trebuchet, Trebuchet MS, Arial, sans-serif;color:#996600;
}

#main-right img{margin-bottom:4px;border:1px solid #000000}

#main-right .widget {
margin:0 0 1.5em;
padding:0 1.5em 1.5em .75em; }

7. Cari kode :

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Hapus .main .widget


8. Kemudian cari kode : ]]></b:skin> dan tambahkan kode berikut dibawah kode tersebut.

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
#main-left {
width:400px;
}
.post-body img{
width:390px;
}
</b:if>
</style>

Kode ini untuk menampilkan kolom kiri pada ruang Main-Wrapper, ukuran 400px berasal dari 640 - 220 - 20 (M+P).


9. Langkah selanjutnya menuju pada bagian <body>, cari kode dibawah ini :

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Perhatikan susunan setelah modifikasi :

<div id='main-wrapper'>

<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='main-right'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='main-right' id='main-right' preferred='yes'/> ( jangan lupa memberi tanda "/" agar tidak error )
</b:if>
</div>

kode berwarna merah adalah kode modifikasi

Susunan Kode setelah dimodifikasi adalah sebagai berikut :

<div id='main-wrapper'>

<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

<div id='main-right'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='main-right' id='main-right' preferred='yes'/>
</b:if>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->

Selanjutnya kita preview, apabila masih tidak teratur cobalah rubah ukuran M & P-nya. Bila sudah berhasil silahkan save


to bo continued bin bersambung..............

Blue magazine blogger template

Judul di atas merupakan finishing dari meodifikasi "Edel2Xtemplate", yang sekarang template tersebut digunakan "Sharing Post".

Template ini termodifikasi berkat rasa penasaran yang sangat kuat di hati saya saat melihat model template Magazine Blogger yang dijual dengan harga $ 50 s/d $ 85. Coba anda lihat di model situs tersebut di sini.

Semula saya mengejar turorial dari Kang Jaloee, namun nampaknya masih ada teka-teki besar yang perlu saya pecahkan. Karena info dari beliau kita harus download dulu template Cellar Heat kemudian mengganti beberapa kode pada template yang akan kita modifikasi. Padahal saya ingin murni dari template yang ada, misal MINIMA yang merupakan sasaran empuk untuk di EDEL2X.

Langkah yang aku gunakan adalah melihat kode sumber dari template "Allsporting" di atas, kemudian aku copas dalam MSword. Kalau kita melihat dari susunan template gratis dengan template "Premium" jelas berbeda. Susunan HTML pada template ini tidak dikelompokkan per bagian misal untuk Main-Wrapper sendiri, Sidebar juga sendiri dan seterusnya. Justru dalam kode sumber template ini, pengelompokkan didasarkan berdasarkan pengaturan ukuran Padding, Margin, Color dst....

Selama dua hari saya mreteli satu persatu dan aku selundupkan di MINIMA yang ada. Setelah berduel dengan ERROR, justru akhirnya saya menemukan cara bagaimana membagi Kolom Main ( tempat Posting ) menjadi 2 atau 3, tergantung selera kita.

Berikut langkah-langkah yang aku kerjakan :

Sebaiknya praktekkan di MINIMA dulu ( Namun saya menerapkan pada template yang sudah saya modifikasi sebelumnya ), masuk pada edit HTML kemudian buat susunan kode seperti ini ( Ingat jangan centang kotak Expand ):


/* ----- MAIN ----- */

#content-wrapper {
width: 998px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
text-align: left;
background: $contentbgColor;
border: 1px solid $contentBorderColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
float: left;
width: 654px;
margin: 0px 4px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Tambahkan kode berikut :

#main-left {
width: 654px;
float: left;
margin: 4px 4px 4px 0px;
padding: 0px;
color: $textColor;
font: $textFont;
background: $postbgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-right{
float:right;
margin: 4px 4px 4px 4px;
padding: 0px;
background:$postbgColor;
width:260px;
line-height:1.2em}

#main-right h2{
margin-bottom:5px;
padding-bottom:5px;line-height:1.1em;
font:normal normal 148% Trebuchet, Trebuchet MS, Arial, sans-serif;color:#996600;border-bottom:1px solid #000000}
#main-right img{margin-bottom:4px;border:1px solid #000000}


#main-left .widget{
margin: 0px 5px 5px 5px;
padding: 0px 10px 10px 4px;
}

#main-right .widget {
margin: 0px 0px 5px 0px;
padding: 10px 10px 10px 10px;
}

Langkah selanjutnya adalah tambahkan kode dibawah ini di atas kode </head>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

#main-left {
width:376px;
}
.post-body img{
width:350px;
}
</b:if>
</style>

Kemudian pada bagian body, buat susunan dibagian <div id='content-wrapper'>

<div id='main-wrapper'>, dengan susuna seperti ini:

<div id='content-wrapper'>

<div id='main-wrapper'>
<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='main-right'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='main-right' id='main-right' preferred='yes'/>
</b:if>
</div>
</div>

Sebelum anda menyimpan template, coba preview dulu apa sudah berhasil atau belum.
Setelah berhasil baru di save.

Fungsi dari kode <b:if cond='data:blog.pageType != &quot;item&quot;'> adalah untuk menyembunyikan kolom kanan pada sub halaman, dan saat anda mengklik "Label atau Kategori maka kolom kanan Main tetap ada di Homepage.

SIlahkan anda rubah ukuran Margin, Padding, Color, font sesuai dengan kondisi template anda. Meskipun hasilnya tidak sebagus template yang aku "Intip" namun teka-teki selama ini terjawab sudah, dan ini sebagai modal saya untuk edel2x template selanjutnya.

Saya bisa, pasti anda bisa... yang penting semangat.

gAjax RSS Pausing Scroller

Judul aneh diatas saya temukan di situs www.dynamicdrive.com, yang maksudnya untuk menampilkan cssfeed dari beberapa media yang online. Di situs ini anda akan disuguhi tiga demo sekaligus, yang mana masing-masing demo berisikan rssfeed dari Yahoo News, BBC dan MSNBC. Sedangkan untuk di Indonesia mungkin anda bisa mendapatkan di Republika Online ( info ini saya dapat setelah ngintip kode sumber halaman dari blognya kang Jalooe.... untuk kang Jalooe, sorry ya.... semua saya lakukan demi komunitas Blogger ).

Namun sebelum kita memasang gAjax RSS Pausing Scroller (hosted) ini, kita harus mempunyai "Google AJAX Feed API key", mengingat kode ini harus terpasang nantinya dibagian head. Disini saya akan menjelaskan sesuai pengalaman yang sudah saya lakukan.

Silahkan anda Sign Up untuk mendapatkan "Google AJAX Feed API Key".
Perhatikan gambar dibawah ini, dan kerjakan sesuai gambar :


Setelah menekan "Generate API Key", kita akan dihadapkan pada halaman yang mencatumkan kode "Google AJAX Feed API key" dari URL blog yang kita daftarkan, berikut dengan contoh pemasangan kode tersebut. Coba perhatikan gambar dibawah ini :


Silahkan Copy paste kode yang saya kotak merah pada notepad.

Dalam situs www.dynamicdrive.com kita diminta untuk mendowload "gajaxscroller.js" dan "gfeedfetcher.js" kemudian silahkan upload di situs dimana kita menyimpan file secara online.
Namun bila anda malas mengerjakannya, disini sudah saya siapkan url dari kedua file JS tersebut.

Setelah kita masuk Blogger, backup dulu template anda dan jangan mencentang "Expand Template Widget"

Masukkan kode berikut di atas kode </head>( Disini ada tiga pilihan demo,Pilih salah satu sesuai selera. Sengaja saya cantumkan semua agar bisa dipilih ) :

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_ijQ9pLfP7s30p5_16DuihRbZ2PHfPU3bWI4_oTtwnMJ8ZGOSRRs8Jw68to7EQKiFvZwQ2zTa6CCRw"></script>

<script type="text/javascript" src="http://www.geocities.com/nataludin5/gfeedfetcher.js"></script>

<script type="text/javascript" src="http://www.geocities.com/nataludin5/gajaxscroller.js">

/***********************************************
* gAjax RSS Pausing Scroller- (c) Dynamic Drive (www.dynamicdrive.com)
* Requires "gfeedfetcher.js" class
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<style type="text/css">

.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;
}

.labelfield{ /*CSS for label field in general*/
color:brown;
font-size: 90%;
}

.datefield{ /*CSS for date field in general*/
color:gray;
font-size: 90%;
}

#example1{ /*Demo 1 main container*/ width: 450px; height: 30px; border: 1px solid black; padding: 4px; background-color: lightyellow; }

#example2{ /*Demo 2 main container*/ width: 600px; height: 180px; border: 1px dashed black; padding: 4px; background-color: #EEEEEE; } #example2 div ul{ /*Demo 2 UL container*/ margin: 0; padding-left: 18px; } #example2 div ul li{ /*Demo 2 LI that surrounds each entry*/ margin-bottom: 4px; }

#example3{ /*Demo 3 main container*/ width: 250px; height: 280px; border: 1px solid navy; padding: 4px; } #example3 div p{ /*Demo 3 P element that separates each entry*/ margin-top: 0; margin-bottom: 7px; }
code{ /*CSS for insructions*/
color: red;
}

</style>


Selanjutnya tinggal menempatkan kode HTML dalam bagian body, berdasarkan pengalaman saya memilih demo3 yang saya letakkan di sidebar melalui tambah elemen "HTML/Javacript"

Ini adalah kode Example/ demo - 1 :

<script type="text/javascript"> var cssfeed=new gfeedpausescroller("example1", "example1class", 2000, "_new") cssfeed.addFeed("CSS Drive", "http://www.cssdrive.com/index.php/news/rss_2.0/") //Specify "label" plus URL to RSS feed cssfeed.displayoptions("date") //show the specified additional fields cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date cssfeed.entries_per_page(1) cssfeed.init() </script>


Example 2:

<script type="text/javascript"> var socialfeed=new gfeedpausescroller("example2", "example2class", 3000, "") socialfeed.addFeed("Slashdot", "http://rss.slashdot.org/Slashdot/slashdot") //Specify "label" plus URL to RSS feed socialfeed.addFeed("Digg", "http://digg.com/rss/index.xml") //Specify "label" plus URL to RSS feed socialfeed.displayoptions("label datetime") //show the specified additional fields socialfeed.setentrycontainer("li") //Display each entry as a DIV socialfeed.filterfeed(20, "label") //Show 15 entries, sort by label socialfeed.entries_per_page(5) socialfeed.init() //Always call this last </script>


Example 3:

<script type="text/javascript"> var newsfeed=new gfeedpausescroller("example3", "example3class", 2500, "_new") newsfeed.addFeed("BBC", "http://newsrss.bbc.co.uk/rss/newsonline_uk_edition/front_page/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("MSNBC", "http://www.msnbc.msn.com/id/3032091/device/rss/rss.xml") //Specify "label" plus URL to RSS feed newsfeed.addFeed("Yahoo News", "http://rss.news.yahoo.com/rss/topstories") //Specify "label" plus URL to RSS feed newsfeed.displayoptions("datetime snippet") //show the specified additional fields newsfeed.setentrycontainer("p") //Display each entry as a paragraph newsfeed.filterfeed(8, "date") //Show 8 entries, sort by date newsfeed.entries_per_page(2) newsfeed.init() //Always call this last </script>

Perhatikan dari masing-masing kode HTML yang tercetak tebal adalah letak penempatan dari Feed yang kita pasang.

Dan dibawah ini adalah contoh pemasangan feed untuk Republika On line, yang ditempatkan langsung pada saat Edit HTML pada bagian <body> .

<p><script type='text/javascript'>

var cssfeed=new gfeedrssticker("example10", "example10class", 2000, "_new")
cssfeed.addFeed("CSS Drive", "http://feedproxy.google.com/republika") //Specify "label" plus URL to RSS feed
cssfeed.displayoptions("") //show the specified additional fields
cssfeed.setentrycontainer("div") //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, "date") //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()

</script></p>

Silahkan and bereksperimen dengan masing-masing demo, dan atur ukuran width dan heightnya disesuaikan kondisi ruang body template anda. Ingat !!! salah satu demo yang dipasang pada template kita.

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA_ijQ9pLfP7s30p5_16DuihRbZ2PHfPU3bWI4_oTtwnMJ8ZGOSRRs8Jw68to7EQKiFvZwQ2zTa6CCRw"></script>

teks berwarna merah diatas adalah tempat kode "Google AJAX Feed API key", ganti kodenya dengan milik anda.

Untuk melihat demonya, kunjungi situs di atas atau anda dapat melihat hasilnya di situs Kang Jaloe untuk demo 1 dan disini pada sidebar untuk demo 3.

Semoga bermanfaat

Kanibal Template Blogger

Pada minggu kemarin saya mencoba memodifikasi template Minima yang ada dengan menggunakan sistem campur aduk tutorial yang saya dapatkan dari beberapa sumber, termasuk di dalamnya menggunakan sistem CSS ( Contak Sana Sini ) dari beberapa Website berbasis wordpress.

Dari kode sumber halaman website tersebut, saya copas ke notepad. Lalu saya pelajari kode CSS & javascript yang ada bersama eyang google. Meski sudah menghabiskan weekend dan 3 pack "123" akhirnya hasilnya sangat memuaskan bagi saya, namun saya tidak tahu apa sangat jelek bagi rekan-rekan blogger.

Saya menyebutnya sebagai "KANIBAL TEMPLATE MAGAZINE BLOGGER", sebab mulai dasar template hingga Javascript yang terpasang merupakan hasil copas dari beberapa sumber. Dengan menggunakan kemampuan CSS ( Contek Sana Sini ),ASP (Asal Sedot Pakai praktek ) dan PHP (Pakai Hancur Pugar lagi ) akhirnya jadi juga template kanibal ini.

Dan template ini merupakan draft blog yang saya gunakan untuk satuan dimana saya "Nebeng" makan dan ngasih belanja mbok dhewor.

Yang perlu saya garis bawahi adalah, bagaimana cara menambahkan kolom-kolom dibawah Main-wrapper ( tempat posting ) yang ukurannya sama besar. Berikut bentuk kolom-kolom yang saya tambahkan :


Kalau anda berkenan untuk sharing mari kita bahas cara membuatnya :

Langkah awal tentunya backup dulu template anda, tapi saya sarankan untuk praktek ini buatlah blog baru saja.... seperti apa yang saya kerjakan dalam memodifikasi template.

1. Masuk ke blogger lalu tambahkan CSS ini sebelum kode ]]></b:skin>

/* ----- fblock ----- */
.fblock1 h2{
margin: 0px 0 0px 0;
padding: 0px 0px 3px 5px;
text-align: left;
font-size: 11px;
overflow:hidden;
height:30px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock1 h2 a:link, .fblock1 h2 a:visited{
color:#fff;
}
.fblock1 {
width: 305px;
float:left;
margin: 0px 0px 0px 5px;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock1:hover {
width: 305px;
float:left;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
}
.fblock1 p{
margin:5px 5px;
color:#fb7305;
}
.fblock1 img {
float:left;
border:1px solid #393F42;
margin:5px 5px 5px 5px;
padding:0 0;
}
#fblock1 .widget {
margin: 0px 0px 0px 0px;
padding: 15px 15px 15px 15px;
background: #ffffff;
border: 1px solid #e6e6e6;
}

.fblock2 h2{
margin: 0px 0 0px 0;
padding: 0px 0px 3px 5px;
text-align: left;
font-size: 11px;
overflow:hidden;
height:30px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock2 h2 a:link, .fblock2 h2 a:visited{
color:#fff;
}
.fblock2 {
width: 302px;
float:right;
margin: 0px 4px 5px 0px;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.fblock2:hover {
width: 302;
float:right;
padding: 5px;
background:#ffffff;
border: 1px solid #f3f3f3;
display:inline;
color:#000;
font-family:century gothic,Arial,verdana, sans-serif;
}
.fblock2 p{
margin:5px 5px;
color:#fb7305;
}
.fblock2 img {
float:left;
border:1px solid #393F42;
margin:5px 5px 5px 5px;
padding:0 0;
}
.fcats{
overflow:hidden;
font-size:11px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:1px 0 0px 0;
height:15px;
}
.fcats a:link,.fcats a:visited {
overflow:hidden;
font-size:9px;
color:#841c0a;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
height:13px;
}
.auth{
overflow:hidden;
font-size:9px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}
.fmeta{
overflow:hidden;
font-size:9px;
color:#9e5c1b;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}
.fmeta a:link,.fmeta a:visited{
overflow:hidden;
font-size:9px;
color:#841c0a;
padding: 0 0 0 0px;
margin:0px 0 0px 0;
}


2. Selanjutnya kita pasang kode dibawah ini pada bagian bawah Main-wrapper dibawah: </b:section>

<div class='fblock1'>
<b:section class='content1' id='content1' showaddelement='yes'/>
</div>

<div class='fblock2'>
<b:section class='content2' id='content2' showaddelement='yes'/>
</div>

Kemudian simpan template anda.

3. Langkah selanjutnya adalah masuk pada " Tambahkan elemen halaman " pada bagian HTML/ Javascript, lalu tambahkan kode berikut :

<img src='YOUR-IMAGE-LINK' width='100' height='60' alt=''/>

<div class='fcats'><a href='YOUR-CATEGORY-LINK' title='YOUR-CATEGORY-TITLE' rel='category'>YOUR-CATEGORY-TITLE-HERE</a></div>

<h2><a href='YOUR-POST-LINK' title='YOUR-POST-TITLE-HERE'>YOUR-POST-TITLE</a></h2>

<div class='auth'> Posted by Author </div>
<div class='fmeta'> POST-DATE |
<a href='YOUR-POST-LINK' title='Comment on YOUR-POST-TITLE'>ADD COMMENTS</a>
</div>

4. Langkah ke empat silahkan anda berpusing ria dalam mengatur width dan height di masing-masing tambahan kode di atas.

Pada modifikasi kali ini beberapa bagian saya hilangkan dengan menambahkan kode :

visibility: hidden;
display: none;

Juga saya menambahkan kode tabpage agar tampilan menjadi "ciamik".

Untuk melihat demo dari hasil template kanibal ini, silahkan klik DEMO

Komentar anda bersifat membangun... sangat 10000 x saya hargai

Streaming Radio di Blog kita

Apabila anda masuk kemudian menatap, mungkin sedikit mengagumi tampilan blog saya ( ceileeeeeee... GR banget ) lalu tanpa sadar bibir anda yang indah ( khusus cewek nich ) berdecak.... dan telinga anda mendengar alunan musik yang diiringi celotek cewek atau cowok..... nah itu pasti dari streaming radio online yang aku pasang di bagian Lowbar kiri pada blog "ITEM JELEK" ini.

Sengaja saya merombak total penampilan dari si "ITEM" ini, mulai dari bentuk template yang supaya bisa dibilang mirip majalah sesuai dengan nama design template itu sendiri.

Lalu saya tambahkan widget dari Wowzio yang terkesan mewah da ini gratis tentunya, hingga streaming radio online. Semoga saja tidak begitu berat dibuka, karena menurut saya tidak.... mungkin konektifitas internet di tempatku ngacir kali.

Mau tahu cara memasang Streaming Radio On line? Saya rasa banyak dari kalangan blogger sudah tahu. Nah bagi yang belum tahu, silahkan copy kode dibawah ini :

<center><object width="275" height="310"><param value="http://kodelagu.net/radio.swf" name="movie"/><param value="transparent" name="wmode"/><embed width="275" src="http://kodelagu.net/radio.swf" wmode="transparent" height="310" type="application/x-shockwave-flash"></embed></object></center>

Kemudian pasang di page elements blog anda. Silahkan rubah ukuran Width dan height-nya sesuai ukuran page elements blog anda. Jangan lupa menginstall Shockwave-flash atau adobe flash platyer agar aplikasi ini berjalan.

Selamat mencoba dan semoga berhasil

Navigasi Linkbar pada Minima Template

Minima template yang tersedia disaat awal kita membuat sebuah blog di blogger biasanya tidak dilengkapi dengan navigasi menu. Navigasi menu disamping mempercantik tampilan blog kita, dapat berfungsi untuk memasang link penting atau link utama seperti Home, Service, Contact Us dan lain-lain.

Berdasarkan pengalaman saya saat memodifikasi template minima agar mirip sebuah majalah pribadi, maka saya mencoba sharing pengalaman ini dengan rekan-rekan.

Oke berikut langkah-langkahnya.

1. Login di Blogger, kemudian masuk pada "Tata letak" dan klik Edit HTML. Ingat jangan dicentang "Expand Template Widget"

2. Membuat Variable definitions untuk memudahkan pengaturan warna dengan mudah apabila kita ingin merubah warna di menu "Tata Letak" pada bagian "Font dan Warna"

Kita membuat variable seperti dibawah ini.

<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#C94093" value="#808080">
<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#b3b3b3">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#9D1961" value="#333333">
<Variable name="linkbarTextColor" description="Linkbar Text Color"
type="color" default="#ffffff" value="#b3b3b3">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff" value="#f2984c">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#9D1961" value="#0D8F63">

kemudian sisipkan dibagian Variable definitions.

/* Variable definitions

...........dst hingga

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#f2984c">

(sisipkan kode variable yang telah kita buat disini )


<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 99% Arial, sans-serif">

3. Kemudian tambahkan variable definitions tentang besarnya huruf. Kodenya seperti ini

<Variable name="linkbarTextFont" description="Linkbar Text Font"
type="font"
default="normal normal 77% Verdana, sans-serif"
value="normal bold 67% Arial, sans-serif">

kode variable definitions diatas , pasang setelah kode dibawah ini :

<Variable name="descriptionfont" description="Blog Description Font"
type="font" default="normal normal 0% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 0% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">

4. Buat kode CSS seperti dibawah ini

/* ----- LINKBAR ----- Modify by nataludin */

#linkbar-wrapper {
margin: 2px 0px 5px 0px;
padding: 0px 0px 0px 0px;
width: 940px;
position: relative;
background: $linkbarbgColor;
border: 0px solid $linkbarmainBorderColor;
}

#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 0px 7px 0px;
text-align: left;
}

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

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 7px 10px 7px 10px;
width:100%;
text-decoration:none;
font: $linkbarTextColor;
color: $linkbarTextColor;
text-transform: uppercase;
border-right: 1px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}

#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}

Catatan : width: 940px; sesuaikan dengan lebar dari " outer-wrapper "

Kode CSS diatas dipasang di atas kode ]]></b:skin>


5. Kemudian buat kode CSS dibawah ini :

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'/>
</b:section>
</div>
<div style='clear: both;'/>

Pasang kode diatas <div id='main-wrapper'>

Pemasangan ditempat ini bila kita menginginkan posisi Linkbar berada dibawah header.

Apabila anda ingin memasang diatas Header, maka kode CSS dipasang di atas kode : <div id='header-wrapper'>


Saya rasa demikian cara modifikasi Minima Template, bila ada kesalahan mohon diberi masukan. Karena ini berdasarkan pengalaman saya saat modifikasi template model majalah "Sharing Post".

Mohon ditambahkan kekurangannya pada komentar anda, sebagai sharing pengetahuan sesame blogger.

Create Box style links with mouseover effect

CSS berikut ini dapat digunakan untuk menampilkan link dalam blok persegi dengan efek berubah warna bila pointer mouse berada di atasnya.

Link yang dipasang bisa berupa angka atau judul yang mewakili link tersebut.

1. Setelah anda Login di Blooger, silahkan anda menuju ke " Layout" lalu klik EDIT HTML

2. Backup dulu template anda, kemudian copi kode dibawah ini lalu tambahkan dibagian/ di atas kode </head>

<title>CSS used in Pagination</title>
<style>

#pagin a
{
font-family:Tahoma;
font-size:11px;
display:block;
float:left;
cursor:pointer;
color:#00c;
text-decoration:none;
display:inline-block;
border:1px solid #ccc;
padding:.3em .7em;
margin:0 .38em 0 0;
text-align:center
}

#pagin a:hover
{
background:#f0f7e8;
border:1px solid #83bc46
}

#pagin a.sel
{
color:#333;
font-weight:normal;
background:#f0f7e8;
cursor: default;
border:1px solid #83bc46
}
</style>

3. Setelah itu simpan template.

4. Untuk kode dibawah ini anda bisa memasangnya dibagian <body>....</body>, namun bisa juga lewat Page Elemen dengan menekan Add a Gadget dibagian yang anda suka.

<div id="pagin">
<a class="sel">1</a><a href="...">2</a>
<a href="...">3</a>
</div>

Isikan alamat URL dari link yang anda kehendaki pada ".....", apabila anda ingin menambah jumlah link maka tinggal copi kode <a href="...">3</a> dan rubah angka 3 dengan angka selanjutnya atau judul dari link tersebut.

Contoh hasilnya bisa anda klik di kotak 1 s/d 4 pada bagian bawah.

Selamat mencoba

Membuat Animasi Flas Label/ Tag Cloud pada Blogger.

Anda ingin membuat animasi flash Label/ Tag Cloud pada blog kesayangan kita ? Tentu bukan ?
Dengan tampilan Animasi Flash pada Label/ Tag Cloud pada blogger kita tentu akan menambah kesan tersendiri.

Coba perhatikan Animasi Label di bagian sidebar... menarik bukan??

Sebenarnya tutorial ini saya dapatkan di sini (Blogger Buster - Amanda ), namun saya mencoba menerjemahkan ke bahasa kita agar nantinya para blogger Indonesia dapat membuatnya dengan mudah. Mari kita coba bersama-sama cara menginstalnya.

1. Kita langsung menuju ke Layout > Edit HTML pada Dasboard Blogger.

2. Cari kode dibawah ini :

<b:section class='sidebar' id='sidebar' preferred='yes'>

3. Kemudian copy dan paste kode dibawah ini persis dibawah kode di atas :

<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

4. Anda bisa memodifikasi pada :

* Width is set to 240px
* Height is set to 300px;
* Background color is white
* Test color is grey
* Font size is "12"

Perhatikan kode berikut ini :

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

Kode di atas adalah tempat untuk merubah nilai Width (merah), Height (biru) dan background (ungu)

Kemudian untuk merubah ukuran text coba perhatikan kode dibawah ini :

so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Anda bisa merubah ukuran di bawah 12 atau lebih

Nah selamat mencoba

Membuat Tab Horizontal dengan CSS

Tanpa sengaja saat saya blogging, berselancar di dunia maya saya temukan Aplikasi CSS Tab Designer Versi 2.

Mumpung si Net lagi ngebirit larinya maka IDM segera meluncur untuk membongkar persembunyian CSS Tab Designer V.2 tersebut di RS.

Kemudian seharian aku pelajari dan hasilnya, akan saya coba untuk dipaparkan disini.

Kode  HTML yang dibawah ini dipasang di elemen halaman bagian "<>"           ( tahu khan maksudnya )

<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">HOME</a></li>
<li><a href="#">OPO MANING</a></li>
<li><a href="#">OPO MANING</a></li>
<li><a href="#">MANING OPO</a></li>
<li><a href="#">NING OPO MA</a></li>
</ul>
</div>

Nah sekarang untuk kode  CSS saya pasang semabrangan, yang jelas di bagian <head>.  Atau karena posisi di bawah Header ( Judul blog kita ) maka saya pasang di bawah kode ini :

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

Dibawah ini kode yang harus dipasang :

#navcontainer
{
font-family: Arial,Sans-Serif;
margin: 0 auto;
width: 70%;
border-bottom: 1px solid #ddd;
}
#navlist
{
width: 60%;
text-align: center;
margin: 0 auto;
padding: 0;
text-indent: 0;
list-style-type: none;
}
#navlist li
{
padding: 0;
margin: 0;
text-indent: 0;
display: inline;
}
#navlist li a
{
letter-spacing: -1px;
text-decoration: none;
color: #ccc;
font-size: 1em;
padding: 0 2px;
border-top: .5em solid #eee;
}
#navlist li a:hover,#navlist a#current
{
color: #333;
border-top: none;
font-size: 1.5em;
}
#navlist a#current { color: #fc6; }

Nah bagi rekan-rekan yang ingin punya CSS Tab Designer Versi 2.  silahkan  :

Download :  DISINI    ( FIle ........RAR )

Contoh hasilnya : DISINI

Semoga bermanfaat dan dapat dijadikan tambahan bahan belajar.... ntar jangan lupa sama si bC, kalau udah pinter.... bC diajari.... biar bC tambah pinter

Bullet List Accordion Menu

bC mencoba untuk menambah referensi dalam blog "Horor" ini dengan membuat "Bullet List Accordion Menu" yang saya pelajari dari sini. Dalam mempelajari cara membuat "Bullet List Accordion Menu" ini, dua kali saya gagal. Karena tutorialnya selain beringgris ria, pengetahuan tentang kode-kode html atau javascript bC dangkal sekali.

Alhamdulillah setelah mencoba dan mencoba ......... kemudian memodifikasi isi dari tiap item kategori akhirnya berhasil juga.

Kalau anda mempelajari dari sumbernya, tentu anda akan dihadapkan kumpulan kode dari "Bullet List Accordion Menu" yang sekilas ribet. Terutama cara menaruh kode-kodenya ke dalam blog kita. Untuk itu pengalaman menarik ini akan saya bagi ke rekan blogger yang belum mempunyai bentuk "Bullet List Accordion Menu" di Sidebarnya. Dengan tampilan bullet list accordion menu pada sidebar, tentu akan lebih menambah nilai bagi blog kita.

Langkah-langkahnya adalah sebagi berikut :

1. Login ke Blogger, kemudian masuk pada "edit Html".

2. Cari kode <head>

3. Copy kode di bawah ini dan paste dibawah kode <head>.

<script type="text/javascript" src="http://nataludin.googlepages.com/jquery-1.2.2..txt"></script>
<script type="text/javascript" src="http://nataludin.googlepages.com/ddaccordion.txt.txt">
/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<script type="text/javascript">
ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable contentclass: "categoryitems", //Shared CSS class name of contents group revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing }})
</script>
<style type="text/css">
.arrowlistmenu{width: 180px; /*width of accordion menu*/}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)
*/font: bold 14px Arial; color: white; background: black url(http://nataludin.googlepages.com/titlebar.png) repeat-x center left; margin-bottom: 10px; /*bottom spacing between header and rest of content*/text-transform: uppercase; padding: 4px 0 4px 10px; /*header text is indented 10px*/ cursor: hand; cursor: pointer;}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/ background-image: url(http://nataludin.googlepages.com/titlebar-active.png);}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/ list-style-type: none; margin: 0; padding: 0; margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/}

.arrowlistmenu ul li{padding-bottom: 2px; /*bottom spacing between menu items*/}

.arrowlistmenu ul li a{color: #A70303; background: url(http://nataludin.googlepages.com/arrowbullet.png) no-repeat center left; /*custom bullet list image
*/ display: block; padding: 2px 0; padding-left: 19px; /*link text is indented 19px*/ text-decoration: none; font-weight: bold; border-bottom: 1px solid #dadada; font-size: 90%;}

.arrowlistmenu ul li a:visited{color: #A70303;}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/ color: #A70303; background-color: #F3F3F3;} </style>

4. Kemudian simpan template anda.

5. Langkah selanjutnya masuk ke "Tata Letak" kemudian ke "Elemen Halaman" dan tambahkan elemen halaman "HTML". Pada proses ini, sesuai dari sumber aslinya sebenarnya berisikan pautan link, namun saya mencoba untuk mengisikan "Shoutbox, Blogroll dan beberapa tautan link" sebagai contoh untuk memudahkan rekan-rekan.

6. Copy kode dibawah ini dan tambahkan ke elemen halaman HTML.

<div class="arrowlistmenu">

<h3 class="menuheader expandable">Shoutbox</h3>
<ul class="categoryitems">
<div style="height: auto;" class="bd">
<div class="fixed">
<p>

Ini tempat shoutbox anda

</p>
</div>
</div>
</ul>

<h3 class="menuheader expandable">Link Sobat</h3>
<ul class="categoryitems">
<div style="overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px;font-size: 12px; height: 200px;width: 94%;text-align: left;">
<li><a href="alamat link teman" target="_blank">Nama Link</a></li>
<li><a href="alamat link teman" target="_blank">Nama Link</a></li>
<li><a href="alamat link teman" target="_blank">Nama Link</a></li>
<li><a href="alamat link teman" target="_blank">Nama Link</a></li>
</div>
</ul>
<h3 class="menuheader expandable">Artkel Menarik</h3>
<ul class="categoryitems">
<li><a href="Alamat Link" target="_blank">Nama artikel</a></li>

<li><a href="Alamat Link" target="_blank">Nama artikel</a></li>
</ul>
<h3 style="cursor: default" class="menuheader">Coretan Asal</h3>
<div>
Silahkan anda variasi sendiri isinya, jangan mudah menyerah
</div>

</div>


7. Simpan dan coba lihat hasilnya.

Untuk Shoutbox, Link sobat dan isinya silahkan anda ganti sesuai selera anda

Hasil daripada tutorial ini bisa anda lihat di sini

Selamat mencoba.

AJAX Labels with Label Cloud

Sebenarnya "Ajax Labels with Label Cloud " tidak asing lagi bagi kalangan blogger, karena tutorialnya banyak kita jumpai. Salah satunya ada di blog Kang Jaloe atau kunjungi sumbernya Blogger-hacked dan Phydeaux3.

Namun disini saya ingin menerjemahkan tutorial tersebut ke dalam versi "bahasa saya" dengan harapan dapat dengan mudah untuk dimengerti.

Pertama-tama kita instal Label Cloud.

1. Cari kode ]]></b:skin>, kemudian copi dan paste kode dibawah ini sebelum kode ]]></b:skin>.

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

2. Copy dan paste kode dibawah ini diatas kode </head>.

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

Simpan template anda.

3. Sekarang kita akan memasang widget, cari kode dibawah ini : (pada bab ini berdasarkan pengalaman, jangan centang kotak Expand Template Widget, karena apabila kita simpan template maka akan ada pesan error dari blogger ).

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Ganti kode diatas dengan kode di bawah ini :

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>

for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

4. Langkah selanjutnya kita akan menginstall Ajax Labels, klik Page Layout kemudian ke Edit HTML. Centang kotak "Expand Widget Templates" kemudian cari kode </head> tag di dalam template. Masukkan kode berikut tepat di atas kode </head>.

<style type='text/css'>
#indicator {position:fixed;z-index:1000;padding:15px 0;top:40%;background-color:#FFFFFF;border:1px solid #AAAAAA;width:176px;left:50%;margin-left:-88px;text-align:center;}
#search-result {border:1px solid #AAAAAA;padding:10px;padding-bottom:30px;font-size:85%;}
.search-result-meta {background:#EFEFEF;padding:2px;}
.search-result-meta img {border-width:0;vertical-align:text-bottom;}
.search-title {font-size:1em;padding-bottom:3px;font-weight:bold;text-align:left;text-decoration:underline;}
.search-cat {display:block;padding:3px;font-size:1em;margin-top:5px;margin-bottom:5px;border-bottom:1px solid #C0C0C0;font-weight:bold;}
.search-close {color:silver;float:right;border:1px solid #F5F5F5;margin-top:10px;cursor:pointer;}
.search-result-nav {font-size:1.4em;font-weight:bold;padding:5px 0pt;text-align:center;}
</style>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/prototype.js' />
<script type='text/javascript'>
//<![CDATA[
// User customisable parameters
// ----------------------------
// maxresults - Number of results to show per page
// navFlag - Set Navigation ON or OFF. Give 1 for ON and 0 for OFF.
// feedLabel - Text to show for the label feed link.
// catLabel - Label for categories.
// closeLabel - Label for Close button. You can use hypertext also.
var maxresults = 5;
var navFlag = 1; //ON by default
var feedLabel = "Subscribe to";
var catLabel = "Sorted into:";
var closeLabel = "Click to close";
//]]>
</script>
<script type='text/javascript' src='http://bloggerhacked.googlepages.com/ajaxlabels.js' />

5. Sekarang cari kode

<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

Ganti kode di atas dengan kode di bawah ini :

<b:loop values='data:post.labels' var='label'>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"' rel='tag'><data:label.name/></a>

Simpan template anda.

6. Sekarang buka Tata letak klik elemen halaman. Silahkan anda tentukan tempat penambahan elemen halaman yang nantinya berfungsi untuk memunculkan tampilan ringkasan posting saat label cloud di klik baik oleh anda maupun pengunjung blog anda. Masukkan kode di bawah ini dengan menambahkan elemen halaman "HTML/JavaScript "
(Lebih praktis di taruh di atas postingan. Untuk tampil di atas postingan, sebelumnya pada edit HTML di template, cari kode
<b:section class='main' id='main' showaddelement='no'> ganti "no" dengan "yes")

<div id="indicator" style="display:none"><img alt="Indicator" src="http://bloggerhacked.googlepages.com/indicator.gif"/> Loading...</div><div id="search-result" style="display:none"><a name="sres"></a><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div><div id="show-result"></div><div class="search-close" onclick="javascript:Element.hide('search-result')"><script type="text/javascript">document.write(closeLabel);</script></div></div>

Simpan dan coba cek dengan lihat blog anda.

7. Jika pada proses ini tidak berjalan silahkan anda kembali ke edit html pada template anda, cari kode di bawah ini :

'"javascript:getCat(\"" + data:label.name + "\")"'

ganti dengan kode di bawah ini :

'"javascript:getCat(\"" + data:label.name + "\",null)"'

Selamat mencoba, ingat jangan putus asa untuk mencoba. Sebagai saran terapkan pada awal pembuatan blog baru anda. Kalaupun anda ingin menerapkan ke blog kesayangan anda, back up dulu blog anda.

(Bagi anda yang kurang puas dengan terjemahan ini, silahkan kunjungan link yang saya pasang di awal posting ini)