Son Yorumlar / Son Yazılar Kayan Yazı eklentisi (Feed)

Yukarıdaki resimlerden de anlaşılacağı gibi hiçbir reklam içeriği bulundurmayan üç çeşit eklenti için örnek olarak yaptığıma bakabilirsiniz. Bu üç çeşit eklentiyi isteğiniz zaman bir diğerine çevirebilir veya boyutlarını değiştirerek bloğunuzun istediğiniz köşesine koyabilirsiniz. İsteyen arkadaşlar için önce bir uyarı ile başlayalım.


Lütfen şablonunuzun yedeğini alın


1. gfeedfetcher.js ve gajaxscroller.js dosyalarını hotlinkfiles google page veya varsa kendi bildiğiniz iyi bir site (bana da söyleyin) yükleyin.(Sağ click/Farklı kaydet)






2. Yerleşim---> Widget Şablonunu Genişlet dedikten
sonra aşağıdaki kodu aratıyoruz.

</head>

Yukarıda bulduğumuz kodun hemen üstüne (alttaki resimdende bakabilirsiniz.) aşağıdaki kodu yapıştırın.

<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY"></script>

<script type="text/javascript" src="gfeedfetcher.js"></script>

<script type="text/javascript" src="gajaxscroller.js">

</script>

Daha sonra upload ettiğimiz ".js" uzantılı dosyalarımızı url'sini isimlerine göre renkli gösterilen yerlere yapıştırıyoruz. Ayrıca yine yukarıda bulunan "YOUR-API-KEY" için bu adresi kullanarak giriş yapın ve blog adresini altta gösterilen yere yazarak karşınıza çıkacak olan uzun bir API-KEY'i alıp yerine yapıştırın.
3. Aşağıda bulunan kodu aratıyoruz.

body {

bu kodun hemen üst satırına alttaki kodu yapıştırıyoruz. (Buraya koymamızda ki amaç bazı temalara göre çıkan sorunları ortadan kaldırmak.)

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

Böylece bir önizlemeden sonra hemen kaydediyoruz. böylece burda işimiz bitiyor.
Sayfa Öğeleri---> Gadget ekle diyoruz.

Tek satır kayan yazı için; (A).......

<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")
cssfeed.setentrycontainer("div")
cssfeed.filterfeed(10, "date") //10 yazı görüntüler
cssfeed.entries_per_page(1)
cssfeed.init()

</script>

Yukarıda ki resimde arka planı gri renkte olan için; (B)......

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

Bu aşağıdaki ise benim kullandığım örnek için;

<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") //8 yazı; gösterir ve 2 rss içerir
newsfeed.entries_per_page(2)
newsfeed.init() //Always call this last

</script>

Not: Burda gösterilen yazı sayısını değiştirmek veya tarihi gösterip göstermemek size kalmış. üzerinde oynamalar yapabilirsiniz. Eğer arka plan rengini değiştirmek isterseniz

#scrollerid div p{
background-color: yellow;
}

kodunu ya da farklı sitiller vermek isterseniz

#scrollerid div ul{
background-color: yellow;
}

#scrollerid div ul li{
margin-bottom: 5px;
}

kodlarını kullanabilirsiniz...
Bir sorun çıkarsa ben burdayım :))))