Blog Kayıtları Üzerinde Otomatik Manşet Slider Etiket Eklentisi

Blogger, yazılarınıza eklediğiniz etiketleri kullanarak menü çubuğunun altında, blog kayıtlarının üstünde otomatik olarak ilerleyen Manşe...

...

Blogger, yazılarınıza eklediğiniz etiketleri kullanarak menü çubuğunun altında, blog kayıtlarının üstünde otomatik olarak ilerleyen Manşet formatında Slider Etiket Eklentisi. Otomatik Manşet Slider Eklentisinin mantığı, blog yazılarınıza eklediğiniz etiketlerin şablon kodlarınızda bulunan Feeds yardımı ile okunarak, Yazı başlık linki, Yazı resmi ve Yazı kısa açıklamanın flim şeridi gibi akıcı olarak  dönüşümünden oluşuyor. Eklentide en büyük rolü etiketiniz üstleniyor.

Eklentinin diğer özelliklerine gelince, etiketinize bağlı olarak, kaç adet resimli açıklamalı yazınızın görülmesini belirleyebiliyorsunuz. Ancak, Blogger şablon kodlarından kaynaklanan bir sorun var. Manşet Slider Etiket Eklenti genişliği yatay tam sayfa genişliğinde düzenlenmiyor. Bu nedenle yazılarınızın genişlik ayarına göre tanzim edip kullanmanız gerekiyor. Yani, görülmesi gereken (şablon yazı genişliğine göre 4 adet) etiket sayısı, genişlik ayarı, slayt hızı, gibi ayarları yapabiliyorsunuz. İlerleyen zaman içinde sorun çözüldüğünde Manşet Slider Etiket Eklentisini tam sayfa genişlik olarak kullanabileceksiniz. Hazırsanız Manşet Slider Etiket Eklentisinin kurulum aşamalarına başlayalım.

DEMO

Otomatik Manşet Slider Etiket Eklenti Kurulumu :

1. Blogger kumanda penelinize girerek, öncelikle “Çok önemli” Blogunuzun yedeğini alın.
2. Blogger kumanda paneli → Şablon → Html’yi Düzenle yolunu takip ederek şablon kodlarınızı açın ve (CTRL + F) ile, ( ]]></b:skin> ) bu etiketi bulun. Etiketi bulduğunuzda aşağıdaki kodları kopyalayın ve bulduğunuz etiketin üstüne yapıştırıp kaydedin.

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAvkf6c5A88FiflkW8WPGY5RWCaUWbl9VQBmth6fqEINindkLLtiQT4JgB5lPIGeUfXvNfVIa2FgJADL_lev3tNU0XwqzKsbihaEElzVx3FYXmgsUsE5ZBaa0uQpdDxC12xl6QX6pM9No/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLWOBRjHuDqkmi-cL9xbObC1sJiF-ds4ZDp12rmtjQYtOTRXC8rTQsFxlMq2U8NSJnVW8UUBWc7BrGALq4vs0IL4p6lPXAM-LDP0Z8z5a_2-A0ggSbFvekncB4X4XAUg3d36pLKWb353U/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLXziQRWpsirZAa_fs8mPIjmr8s-92pSICO723X8HwK_XEVzCYNakDHdKcTGPu1xdW1-7dGeXaIPgRxZEquczvCwO_oRnozSMxV2jyEWStDJpbgw-PJVi0vA_iULuJeKFqKMUb0WbrEQ8/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisLy7zI5nGHh1AeT7eD1Y5ehPtC_xBzZoh-4xUjXw7_P2f01GF_PAyJFrY8NmzuFlz2c64BAO0cj3EPpcZmOO4_xgdWe_x-R_nn0tNPhU0CNovypQvq8gvZKfkh-knRlfs7r2Szu2arNw/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0WEdYMPpcJB25tIbcUZG4NMtZKeBZg5dihzkCCWmotbKddTI2Wi3zwURHAZCV55ZeLGL_-vTjkHF3Y8a0kgKaWxYevscTNS9PmIPsFosMYSGQWI4MmsX3EyoGI8-QIomEqKlEG9XJVko/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWgVRwaxxYjXylD4kFdxUFAMh0W4oMmAjsECvzStasV6nTObGGIotFZx2PZjbl2Tot5xIMktFb1LcuWpDaz8OaQxP0N0i8kUoAmi-qz0HvSVCtM_57ZP6Qbd0EUBeeBhIYOH3ppr43O2E/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

3. Yukarıda verilen Kod içinde, width ( genişlik ) ve height ( yükseklik ) değerlerini şablon ebatlarına göre değiştirin.
4. Aşağıda verilen kod içinde ( 1.7.2/jquery.min.js ) kırmızı renkli olan. Blogunuzda daha önceden kullandığınız bir eklentide varsa bu satırdaki kodları silin. Daha önceden kullanmadı iseniz olduğu gibi bırakın. ( 1.7.2/jquery.min.js ) kodu isterseniz yeni versiyon ile kullanabilirsiniz.
5. Şimdi, Şablon, Html kodlarınız içinde bulunan ( </head> ) kapanış etiketini, CTRL+F penceresinde aratıp bulun.
6. Aşağıdaki kodları kopyalayıp bulduğumuz ( </head> ) etiketinin üst kısmına yapıştırın.

<!-- Start Otomatik Manşet Slider Etiket Eklentisi http://www.adnanguney.com/ -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8z0giXP7szS4oJxx1xCvUITRzyIDbQuQzhyPisXQUG3-f4NLamLDFV-J8num4IqgjVvXeX7NMwUovjc8aD7gcekVCfiuXbtsWMiivYCZPjsIJmaXz9wIJ5p_qSEcbvkObaGBr356VD0I/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "news";

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>
<!-- End Otomatik Manşet Slider Etiket Eklentisi http://www.adnanguney.com/ -->

7. Yukarıda mavi ile belirtilen, numposts1 = 15; : Eklenti slayt görselinizde görüntülenecek resim sayısını belirler. Ancak uygulamamızda 4 adet resim ile sınırlı kalacağımızdan olduğu gibi durabilir. label1 = "news"; : Etiketinizi yazmanız gereken alan. ( "news" ) news, yazan yere kullanmak istediğiniz etiketinizi girin. Etiketi doğru girebilmeniz için kullanacağınız etiketinize tıklayın ve çıkan ismi kopyalayıp bu kısma yapıştırın. Aşağıdaki etiket alma resmini inceleyin.

8. Html kodlarınızda Ctrl+F yardımı ile, aşağıdaki etiketi bulun ; <div class='column-center-outer'> Bulduğunuz bu etiketin hemen üst kısmına aşağıda verilen kodları yapıştırın.
9. Özel şablonlarda bu etiket <div id='main-wrapper'> olarak bulunmaktadır. Kullandığınız şablon özelliğine göre arayacağınız etiketi belirleyin.

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script> 
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
 auto:4000,
 scroll: 1,
 speed: 800, 
 visible: 4,
 start: 0,
 circular: true,
 btnPrev: &quot;#previous_button&quot;,
 btnNext: &quot;#next_button&quot;
 });
 })})(jQuery) 
</script>
</b:if>

10. visible: 4, : Yukarıda kod içinde mavi ile belirtilmiş olup, slayt görselinizdeki resim adetini belirler. Şablon genişliğinize göre rakamı değiştirin. Yukarıda, 3’uncü adımda anlatılan genişlik ayarlarınızı değiştiğinizde slayt sayısınında değişebileceğini hatırlatmak isterim. Otomatik Manşet Slider Etiket Eklentisi ile ilgili tüm yapmanız gereken işlemler bunlardan ibaret. Umarım yavaş yavaş, dikkat ederek uygulamayı kurup kullanırsınız. Farklı eklentilerde buluşmak üzere kolay gelsin.