Berikut ini adalah panduan sederhana, bagaimana caranya membuat style RSS tersebut.
Langkah 1: CSS code untuk menu RSS
Copy and paste HTML code dibawah ini pada sebuah template blogger kamu, tempatkan diantara <style> </style>
/* -------------------------------- */
/* RSS MENU */
#rss-menu{
padding:10px;
padding-top:0px;
width:270px;
border:solid 1px #CCCCCC;
margin-top:10px;
font-size:11px;
position:absolute;
background:#FFFFFF;
margin-left: 446px; /* Change it with your custom distance from the left margin */
top: 82px; /* Change it with your custom distance from top */
z-index:2;
}
Langkah 2 : Image/* RSS MENU */
#rss-menu{
padding:10px;
padding-top:0px;
width:270px;
border:solid 1px #CCCCCC;
margin-top:10px;
font-size:11px;
position:absolute;
background:#FFFFFF;
margin-left: 446px; /* Change it with your custom distance from the left margin */
top: 82px; /* Change it with your custom distance from top */
z-index:2;
}
Kamu dapat mengganti image icon sesuka hati kamu. Atau kamu dapat menggunakan sumber image yang ada pada kode dibawah ini
/* FEED ICONS */
.feed-yahoo{
background:url(http://lh5.ggpht.com/antonio.lupetti/
SGkbSeViXCI/AAAAAAAABq0/VKFk--P6rzg/s144/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZt949soI/AAAAAAAABqk/0K_xT635iWc/s144/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZsku-McI/AAAAAAAABqc/geaegB--2R0/s144/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZlVYv_1I/AAAAAAAABqM/HSGE2JRVGA8/s144/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZvPomXRI/AAAAAAAABqs/hXOtnqszlws/s144/feed-xml.png) no-repeat;
}
.feed-google{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZrkp8XCI/AAAAAAAABqU/Yp-Rb_1L98k/s144/feed-google.png) no-repeat;
}
Kamu dapat menyimpan image pada penyedia image hosting, saya menyarankan di Picasa web album.feed-yahoo{
background:url(http://lh5.ggpht.com/antonio.lupetti/
SGkbSeViXCI/AAAAAAAABq0/VKFk--P6rzg/s144/feed-yahoo.png) no-repeat;
}
.feed-newsgator{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZt949soI/AAAAAAAABqk/0K_xT635iWc/s144/feed-newsgator.png) no-repeat;
}
.feed-netvibes{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZsku-McI/AAAAAAAABqc/geaegB--2R0/s144/feed-netvibes.png) no-repeat;
}
.feed-bloglines{
background:url(http://lh6.ggpht.com/antonio.lupetti/
SGkZlVYv_1I/AAAAAAAABqM/HSGE2JRVGA8/s144/feed-bloglines.png) no-repeat;
}
.feed-xml{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZvPomXRI/AAAAAAAABqs/hXOtnqszlws/s144/feed-xml.png) no-repeat;
}
.feed-google{
background:url(http://lh4.ggpht.com/antonio.lupetti/
SGkZrkp8XCI/AAAAAAAABqU/Yp-Rb_1L98k/s144/feed-google.png) no-repeat;
}
Langkah 3 : Javascript untuk membuka dan menutup menu
Masukkan javascript ini sebelum </head>
pada template blogger kamu
Finish. Jika kamu memerlukan bantuan dalam panduan ini , Hubungi kami :)
Download source code
source:woork.blogspot.com
0 komentar:
Posting Komentar