Blogger Etikete Bağlı Manşet Eklentisi Nasıl Yüklenir

Blogger'da önceden bloglara manşet veya bir diğer adıyla slider eklentisini eklemek çok uğraştırıyordu. Çünkü teker teker manşete resim, açıklama ve link eklemek gerekiyordu. Hala bu tür manşet eklentileri mevcut fakat şimdilerde bu tür manşet eklentileri yerlerini otomatik çalışan manşetlere bıraktı. Bu konuda açıklayacağım manşet eklentisi belirli bir etikete bağlı olarak çalışıyor. Yani tamamen otomatik bir şekilde çalışıyor.

400x150-blogger-etiket-sistemiyle-calisan-manset-eklentisi-2

Manşet eklentisinde ileri ve geri tuşları bulunuyor. Bu son derece kullanışlı ve otomatik çalışan manşet eklentisini anlatmaya hemen başlayalım.

İlk olarak Kumanda Paneli >>> Blog İsmi >>> Şablon >>> HTML'yi Düzenle yolunu izleyin. CTRL+F yaparak aşağıdaki kodu bulun.

</head>

Yukarıdaki kodu bulduktan sonra hemen üzerine aşağıdaki kodları yapıştırın.

/* Blogger Etiket Sistemiyle Çalışan Manşet Eklentisi */
imgr = new Array();
imgr[0]= &quot;http://lh3.ggpht.com/_kViOplhgIHI/TKxBIScZTiI/AAAAAAAAAWE/PM7AQ1lf6ME/
noimages.jpg&quot;;
showRandomImg = true;
aBold = true;
summaryPost = 140;
numposts1 = 5;
label1 = &quot;Featured&quot;;
function removeHtmlTag(strx,chop){var s=strx.split(&quot;&lt;
&quot;);for(var i=0;i&lt;s.length;i++){if(s[i].indexOf
(&quot;&gt;&quot;)!=-1){s[i]=
s[i].substring(s[i].indexOf(&quot;&gt;&quot;)+1,s[i].length)}}s=s.join(&quot;&quot;);s=s.substring(0,chop-1);return s}
function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)
*Math.random()):0;img=new Array();for(var i=0;i&lt;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&lt;entry.link.
length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k&lt;entry.link.length;k++){if(entry.link[k].rel=='replies'&amp;&
amp;entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(&quot;&quot;)
[0];break}}
if (&quot;content&quot; in entry) {
var postcontent = entry.content.$t;}
else
if (&quot;summary&quot; in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = &quot;&quot;;
postdate = entry.published.$t;
if(j&gt;imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent    ; a = s.indexOf(&quot;&lt;img&quot;);
b = s.indexOf(&quot;src=\&quot;&quot;,a);
c = s.indexOf(&quot;\&quot;&quot;,b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&amp;&amp;(b!=-1)&amp;&amp;(c!=-1)&amp;
&amp;(d!=&quot;&quot;)) img[i] = d;
var month=[1,2,3,4,5,6,7,8,9,10,11,12];var
month2=[&quot;Jan&quot;,&quot;Feb&quot;,&quot;Mar&
quot;,&quot;Apr&
quot;,&quot;May&quot;,&quot;Jun&quot;,&quot;Jul&
quot;,&quot;Aug&
amp;quot;,&quot;Sep&quot;,&quot;Oct&quot;,&quot;Nov&
amp;quot;,&quot;
Dec&quot;];var day=postdate.split(&quot;-&quot;)[2].substring(0,2);
var m=postdate.split(&quot;-&quot;)[1];var y=postdate.split(&
quot;-&quot;)[0];for(var u2=0;u2&lt;month.length;u2++)
{if(parseInt(m)==month[u2]){m=month2[u2];break;
}}
var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '&lt;div class=&quot;contentdiv&
quot;&gt;&lt;div class=&quot;sliderPostPhoto&
quot;&gt;&lt;a href=&quot;'+posturl+'&quot;&
gt;&lt;img width=&quot;590&quot; height=
&quot;240&quot; class=&quot;alignnone&quot;
src=&quot;'+img[i]+'&quot;/&gt;&lt;/a&gt;&lt;div class=&quot;sliderPostInfo&quot;&gt;&lt;/div&gt;&lt;/
div&gt;&
lt;div class=&quot;featuredPost&quot;&gt;&lt;
h2&gt;&lt;a href=&quot;'+posturl+'&quot;&gt;'+posttitle+'&lt;/a&gt;
&lt;/h2&gt;
&lt;span&gt;'+daystr+'&lt;/span&gt;&lt;p&gt;'
+removeHtmlTag(postcontent,summaryPost)+'...&lt;/p&gt;&lt;/div&gt;&lt;/div&gt;';
document.write(trtd);
j++;
}}
&lt;/script&gt;

Yukarıdaki kodu yapıştırdıktan sonra temanızı kaydetmeden devam edin, aşağıdaki kodu bulun.

</body>

Daha sonra aşağıdaki kodları bu kodun hemen üzerine yapıştırın.

Not: Aşağıdaki kodlarda yer alan Previous ve Next yazan yeri Türkçe yapabilirsiniz. İleri ve Geri olarak değiştirebilirsiniz.

Not: Aşağıdaki kodlarda yer alan mavi renkle belirttiğim .js dosyasını kendi Dropbox vb. hesabınıza yükleyebilirsiniz veya kendi hostunuzda barındırabilirsiniz.

&lt;script src='<span style="color: blue;">http://dl.dropbox.com/u/12924430/contentslider.js</span>
'&gt;&lt;/script&gt;
&lt;script&gt;
featuredcontentslider.init({
id: &quot;slider1&quot;, //id of main slider DIV
contentsource: [&quot;inline&quot;, &quot;&quot;],
//Valid values: [&quot;inline&quot;, &quot;&quot;] or
[&quot;ajax&quot;, &quot;path_to_file&quot;]
toc: &quot;#increment&quot;, //Valid values:
&quot;#increment&quot;, &quot;markup&quot;,
[&quot;label1&quot;, &quot;label2&quot;, etc]
nextprev: [&quot;<span style="color: red;">Previous</span>
&quot;, &quot;<span style="color: red;">Next</span>
&quot;], //labels for &quot;prev&quot; and &
quot;next&quot; links. Set to &quot;&quot; to hide.
enablefade: [true, 0.5], //[true/false, fadedegree]
autorotate: [true, 6000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired
whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
&lt;/script&gt;

Daha sonra aşağıdaki kodu bulmanız gerekecek fakat bazı temalarda bu kod olmayabiliyor. Bu yüzden crosscol-wrapper adlı kodu bulursanız o da işinize yarayacaktır. O da yoksa temanıza yazıların üstündeki bölümü bularak oraya yapıştırabilirsiniz.

<div id='main-wrapper'>

Bu kodu bulduktan sonra hemen üzerine aşağıdaki kodları ekleyin.

<b:if cond='data:blog.pageType == "index"'>
<div id='featured'>
<div class='sliderwrapper' id='slider1'>
<script>
document.write("<script src=\"/feeds/posts/default/-/
"+label1+"?max-results="+numposts1+"&orderby=
published&alt=json-in-script&callback=showrecentposts1\
"><\/script>");
</script>
</div>
<div class='pagination' id='paginate-slider1'>
</div>
</div>
</b:if>

Daha sonra aşağıdaki kodu bulun.

]]></b:skin>

Ve hemen üzerine aşağıdaki kodları yapıştırın.

#featured{margin-bottom:35px}
.sliderwrapper{position: relative;overflow: hidden;border: 10px
solid #dedde5;border-bottom-width: 6px;height: 250px}
.sliderwrapper .contentdiv{background:#68667B;visibility:
hidden;position: absolute;left: 0;top: 0;padding: 5px;height: 100%;filter:progid:DXImageTransform.Microsoft.alpha
(opacity=100);-moz-opacity: 1;opacity: 1;}
.pagination{text-align: right;background-color:#dedde5;
padding: 2px 10px 10px}
.pagination a{font-size:11px;color:#dedde5;padding: 0 5px;
background:#68667B}
.pagination a:hover, .pagination a.selected{color:#68667B;
background-color:#fff}
.featuredPost{width:95%;padding:5px 10px 10px;
background:#68667b;background:rgba(104, 102, 123, 0.9);
color:#dedde5;position:absolute;bottom:0}
.featuredPost a{color:#fff}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{margin:0;font-size:16px;line-height:1}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}

Tüm bunları yaptıysanız etiket sistemiyle çalışan manşet eklentisini blogunuza eklemiş oluyorsunuz.

Not: Blog yazılarınızı yazarken etiketler kısmın featured yazarsanız yazdığınız yazı otomatik olarak manşette yer alacaktır. Featured etiketini değiştirmek için şablonunuz içerisinde manşet kodları arasından featured etiketini bularak Türkçe bir şey yazabilirsiniz.

Not: Manşet içerisinde yer alan Previous ve Next butonlarını Türkçeleştirmek mümkün. Bunun için yine temanınız içerisinde Previous ve Next kelimelerini arayarak İleri ve Geri olarak değiştirmeniz yeterli olacaktır.

Not: Eklentiyi temanıza kurmadan önce temanızın bir yedeğini almanız ileride eski haline geri dönmek için gerekli olabilir.

Blogger Etikete Bağlı Manşet Eklentisi Nasıl Yüklenir

Ozan Başer

2 yorum:

Ehli Blog 'da Arayın

Google+'da Takip Edin

Kategoriler

Sponsor Reklam

Arşiv

Popüler Yazılarım

Tavsiye Bağlantı

Özel Yazılarım

Alakalı İçerik

Liste Yazılarım