Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Blogger için Kayan Son Yazılar Eklentisi (Yeni)


FacebookTwitterPinterestTumblrYazdır


Geçtiğimiz senelerde kayan son yazılar eklentisi ile ilgili kodları paylaşmış idim. Ancak Google Code'un kapanmasının ardından birçok bağlantı da çalışmamaya başladı. Bu yüzden sizler için yeni bir kayan yazılar eklentisi paylaşmak istiyorum. İlgili eklenti tarafımca düzenlendi, tüm tarayıcılar ile de uyumlu olarak çalışmaktadır. Aşağıdaki kodları HTML/JavaScript Ekle bölümüne eklemeniz yeterli olacak olup, farklı bir ayar veya işlem gerçekleştirmenize ise gerek bulunmamaktadır.

AYRICA: Blogger için Açıklamalı Son Yazılar Eklentisi

Blogger'da Kayan Yazılar Eklentisi Nasıl Yapılır?

<style>
.head_brnews{
height:45px;
background:#fff;
border:1px solid #ccc;
margin:15px auto;
overflow: hidden;
}
.breaking-news{
float:left;
height:45px;
position:relative;
overflow:hidden;
margin-bottom:20px;
}
.breaking-news {
background: #fff;
display:block;
float:left;
padding:0 10px;
height:32px;
line-height:45px;
color:#000;
font-size:15px;
}
.breaking-news a{color:#444}
.breaking-news ul{
float:left
}
.breaking-news a:hover{
color:#222;
}
.breaking-news ul li{
float:left;
display:block;
list-style:none;
}
.breaking-news ul a{
padding:1px;
display:block;
color:#333;
white-space:nowrap;
float:left;
line-height:45px;
font-size:15px;
display:hidden;
}
.breaking-news span{
display:block;
float:left;
padding:1px 10px;
color:#333;
font-size:15px;
line-height:45px;
}
.samazhlo{
background:#374760;
border:1px solid #444;
float:left;
left:0;
padding: 0 20px;
height:45px;
line-height: 45px;
color: #FFF;
font-size: 17px;
margin-right: 10px;
}
</style>
<div class="samazhlo">Son Yazılar</div>
<div class='head_brnews'>
<div class='breaking-news'>
<script>
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sHeadlineTerminator;
var sPostLinkLocation;
try {
sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
if (nWidth) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
} else {
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}
if (nScrollDelay) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if (sDirection) {
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";
if (sDirection == "left" || sDirection == "right") {
sHeadlineTerminator = " ";
} else {
sHeadlineTerminator = "\<br/\>";
}
}
if (sOpenLinkLocation == "N") {
sPostLinkLocation = " target= \"_blank\" ";
} else {
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"
sHeadLines = " ";
for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
var objPost = json.feed.entry[nFeedCounter];
if (nFeedCounter == json.feed.entry.length) break;
for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
if (objPost.link[nCounter].rel == 'alternate') {
sPostURL = objPost.link[nCounter].href;
break;
}
}
sHeadLines = sHeadLines + "" + sBulletChar + " \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}
if (sDirection == "left") {
sHeadLines = sHeadLines + "";
} else if (sDirection == "right") {
sHeadLines = "" + sHeadLines;
} else if (sDirection == "up") {
sHeadLines = sHeadLines + "\<br/\>";
} else {
sHeadLines = "\<br/\>" + sHeadLines;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
alert(exception);
}
}
</script>
<script type='text/javascript'>
var nMaxPosts =10;
var nWidth = 100;
var nScrollDelay = 160;
var sDirection = "left";
var sOpenLinkLocation = "N";
var sBulletChar = "»";
</script>
<script src='/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2&max-results=10' type='text/javascript'></script>
</div>
</div>

Örnek Görünüm


    • Ahmet Barut
    • 2 Mayıs 2018, 22:20

    Hocam harika bir eklenti ellerinize sağlık.

      • Doğan Gezici
      • 30 Mayıs 2018, 17:53

      Merhaba,

      Yapıcı yorumunuz için çok teşekkürler.

    • Bilgimsel Blog
    • 14 Mayıs 2020, 17:33

    Güzel bir eklenti. Yazıların kayma hızını nasıl ayarlarız hocam

      • Doğan Gezici
      • 2 Haziran 2020, 18:48

      Merhaba,

      Değerli yorumunuz için teşekkür ederiz. Kayma hızını ise, kodlar içerisinde yer alan "nScrollDelay" parametresinin yanındaki sayıyı artırarak veya azaltarak, değiştirebilirsiniz. Bilginize.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yukarı Çık