Blogger Hareketli Duyuru Çubuğu Eklentisi

Blogger Hareketli Duyuru Çubuğu Oluşturmak 

Blogunuzu ziyaret eden kullanıcıların mümkün olduğu kadar sitenizde zaman geçirmesini sağlamak ve sayfalar arasında geçiş yapmasını teşvik etmek zorundasınız. Bu  sayede uzun vadeli etkili bir seo çalışması yürütebilir ve daha fazla takipçi edinebilirsiniz. Kullanıcılarınızın siteniz içerisinde fazlaca zaman geçirmesini sağlamak için iç linklendirmeler oldukça önemlidir.

İç linklendirmeleri için kullanabileceğiniz bir sistem olan  Resimli Benzer Yazılar Eklentisini >> daha önce sizlere sunmuştum. Şimdi ise özellikle hak ettiği değeri görmediğine inandığınız eski yazılarınızı canlandırabilecek bir eklentiyi sizlere sunuyorum. Hareketli Duyuru Çubuğu Blogger Eklentisi sayesinde blogunuzu ziyaret eden kişilerin sayfalar arasında gezinerek daha fazla vakit geçirmesini sağlayabilir ve gerekli ilgiliyi görmediğini düşündüğünüz sayfaları takipçilerinize sunabilirsiniz.

Blogger Hareketli Duyuru Çubuğu Demo

Blogger Hareketli Duyuru Çubuğu Eklentisi Kodları 

• Kodları Yerleşim > Gadget Ekle > HTML/Java Script kutucuğunu açarak istediğiniz yere ekleyebilirsiniz. 

<style type="text/css">
/*Example CSS for the two demo scrollers*/
#pscroller2{ 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio4aLtUnFjiO7OE0mHMJLg4Jx0MQGIkDYgm4S1_mu1sA4wFDhRCteStcGBKg9tTZfG3xcefsujBVHEMjd8E0dnvrAq7-6CwvZsTFQoY-qDRsvebH3GyB9HgbUk70k1YZB9u_NhM8Hxx9w/s400/updates1.gif) no-repeat top left; 
width: 430px; 
height: 20px; 
border: 1px solid #ddd; 
padding: 3px 3px 3px 40px; 
margin:10px 0; 
}
#pscroller2 a{ 
text-decoration: none; 
color:#0080ff; 
}
#pscroller2 a:hover{ 
text-decoration: underline; 
}
.someclass{ 
}
</style>
<script type="text/javascript">
/*Example message arrays for the two demo scrollers*/

var pausecontent2=new Array() 
pausecontent2[0]='<a href="LİNK BURAYA1">İÇERİK BURAYA1</a>' 
pausecontent2[1]='<a href="LİNK BURAYA2">İÇERİK BURAYA2</a>' 
pausecontent2[2]='<a href="LİNK BURAYA3">İÇERİK BURAYA3</a>' 
pausecontent2[3]='<a href="LİNK BURAYA4">İÇERİK BURAYA4</a>'
</script>
<script type="text/javascript"> 
function pausescroller(content, divId, divClass, delay){ 
this.content=content //message array content 
this.tickerid=divId //ID of ticker div to display information 
this.delay=delay //Delay between msg change, in miliseconds. 
this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is) 
this.hiddendivpointer=1 //index of message array for hidden div 
document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"><div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1">'+content[0]+'</div><div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2">'+content[1]+'</div></div>') 
var scrollerinstance=this 
if (window.addEventListener) //run onload in DOM2 browsers 
window.addEventListener("load", function(){scrollerinstance.initialize()}, false) 
else if (window.attachEvent) //run onload in IE5.5+ 
window.attachEvent("onload", function(){scrollerinstance.initialize()}) 
else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec 
setTimeout(function(){scrollerinstance.initialize()}, 500) 
}
// ------------------------------------------------------------------- 
// initialize()- Initialize scroller method. 
// -Get div objects, set initial positions, start up down animation 
// -------------------------------------------------------------------
pausescroller.prototype.initialize=function(){ 
this.tickerdiv=document.getElementById(this.tickerid) 
this.visiblediv=document.getElementById(this.tickerid+"1") 
this.hiddendiv=document.getElementById(this.tickerid+"2") 
this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv)) 
//set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2) 
this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px" 
this.getinline(this.visiblediv, this.hiddendiv) 
this.hiddendiv.style.visibility="visible" 
var scrollerinstance=this 
document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1} 
document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0} 
if (window.attachEvent) //Clean up loose references in IE 
window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null})
setTimeout(function(){scrollerinstance.animateup()}, this.delay) 
}

// ------------------------------------------------------------------- 
// animateup()- Move the two inner divs of the scroller up and in sync 
// -------------------------------------------------------------------
pausescroller.prototype.animateup=function(){ 
var scrollerinstance=this 
if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){ 
this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px" 
this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px" 
setTimeout(function(){scrollerinstance.animateup()}, 50) 
} 
else{ 
this.getinline(this.hiddendiv, this.visiblediv) 
this.swapdivs() 
setTimeout(function(){scrollerinstance.setmessage()}, this.delay) 
} 
}
// ------------------------------------------------------------------- 
// swapdivs()- Swap between which is the visible and which is the hidden div 
// -------------------------------------------------------------------
pausescroller.prototype.swapdivs=function(){ 
var tempcontainer=this.visiblediv 
this.visiblediv=this.hiddendiv 
this.hiddendiv=tempcontainer 
}
pausescroller.prototype.getinline=function(div1, div2){ 
div1.style.top=this.visibledivtop+"px" 
div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px" 
}
// ------------------------------------------------------------------- 
// setmessage()- Populate the hidden div with the next message before it's visible 
// -------------------------------------------------------------------
pausescroller.prototype.setmessage=function(){ 
var scrollerinstance=this 
if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it) 
setTimeout(function(){scrollerinstance.setmessage()}, 100) 
else{ 
var i=this.hiddendivpointer 
var ceiling=this.content.length 
this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1 
this.hiddendiv.innerHTML=this.content[this.hiddendivpointer] 
this.animateup() 
} 
}
pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any 
if (tickerobj.currentStyle) 
return tickerobj.currentStyle["paddingTop"] 
else if (window.getComputedStyle) //if DOM2 
return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top") 
else 
return 0 
}
</script>

<script type="text/javascript">
//new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) 
new pausescroller(pausecontent2, "pscroller2", "someclass", 3000)
</script>

Blogger Hareketli Duyuru Çubuğu Eklentisi Modifiye

• Kırmızı ile belirleniş resim, link duyuru satırının ucunda bulunan semboldür, isterseniz farklı bir ikon ile değiştirebilirsiniz. 
• Mavi olarak işaretlenmiş alan uyarı çubuğunun boyutunu belirler kullanacağınız alana göre düzenleyebilirsiniz. 
• Pembe 1x işareti ise uyarı satırının etrafında oluşacak olan çizgi kalınlığını belirler. Çizgiyi kaldırmak istiyorsanız 0 olarak ayarlayın. Daha kalın çizgi elde etmek için sayısal veriyi artırın. 
• Yeşil ve Aqua renkleri birbirlerine bağlıdır. İçerik buraya kısmına görünmesini istediğiniz başlığı , link yerine ise başlığa tıklayınca yönlenecek sayfayı ekleyin. 
• Son olarak en altta koyu siyah yazılmış 3000 sayısı , satırların geçiş hızını belirler , hızı artırmak için sayıyı azaltın , hızını azaltmak için ise sayıyı artırın.