RSS menu yang Powerfull dengan JS

Beberapa pembaca yang belum tahu bagaimana cara membuat RSS secara vertikal yang disertai image, dan dengan bantuan javascript agar lebih powerfull. Pada dasarnya fungsi javascript ini adalah untuk membuka dan menutup menu RSS tersebut. Style RSS ini sangat cocok untuk dipasang di sidebars ataupun dibawah artikel pada blog kita.


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

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

 
© 2010 - 2012 Mas Dowi | Powered by Blogger | Built on the Blogger Template