Bilgi birikim bankası. | Oyun | Teknoloji | Hayat | Yaşam

Blogger Facebook Yorum Kutusu Ekleme Eklentisi

Blogger Blogunuzda bulunan yorum panelini , facebook yorum paneli ile değiştirmek istermisiniz ?

Bu eklentimizle , Ziyaretçileriniz yorumlarını facebook yardımı ile blogunuza gönderebilecek , biraz karışık olan bu eklentimizi , dikkatli şekilde uygularsanız blogger blogunuza ekleyebilirsiniz..

Anlatıma geçelim..

Blogunuzun ayarlar menüsüne girin , resimde gösterilen gibi, 1-2-3 ve 4 yollarını izleyin, ve Gizle seçeneğini seçin..Ayarları kaydet butonu ile çıkın..

Ardından BU adrese girerek , facebookta yeni bir uygulama oluşturalım..

Açılan panelde, Aşağıdaki resimdeki gibi 1 ve 2. adımları izleyin..

Açılan Güvenlik kontrolü Panelinde , aşağıdaki resimdeki gibi 1 ve 2. adımları izleyin..

Aşağıdaki panel açılacaktır..

Yukarıdaki panelde , ID Numaranız lazım olacaktır , isterseniz bir yere not alabilirsiniz, Resimdeki bütün adımları uygulayın..

Artık facebook ile işimiz bitti , şimdi blogunuzun şablon kısmına girerek aşağıdaki adımları takip edin...

Aşağıdaki kodu bulun..

<head>

Hemen bir satır altına , aşağıdaki kodu ekleyin , ID NUMARASI yerine kendi ID numaranızı yazınız ( Yukardaki resimde belirtmiştik )

<meta content='ID NUMARASI'   property='fb:app_id'/>

Şimdi ise aşağıdaki kodlardan birini bulalım..

<div class='post-footer-line post-footer-line-3'>


YADA 


<p class='post-footer-line post-footer-line-3'>


YADA


<data:post.body/>

Bir satır altına aşağıdaki kodlarımızı ekleyelim.

<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='500' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>

Son olarak aşağıdaki kodu bulun

<html

Bu kodumuza xmlns:fb="https://www.facebook.com/2008/fbml" kodunu ekliyeceğiz , örnek olarak aşağıdaki gibi

<html xmlns:fb="https://www.facebook.com/2008/fbml" b:version='2' class='v2' expr:dir='data:blog.languageDirection' 



Sadece Kırmızı yerde gösterilen gibi olacak , Mavi yazılar Örnek amaçlı yazılmıştır eklemeyiniz !!

Mavi yazılar sizde farklı olabilir..Kodu nasıl ekliyeceğinz amaçlı örnektir..

Artık blogunuzda , Blogger Facebook Yorum Kutusu Ekleme eklentisine sahipsiniz, bol yorumlar..DEMO

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Facebook Yorum Kutusu Ekleme , Blogger Facebook Yorum Kutusu , Facebook Yorum Kutusu Ekleme , Yorum Kutusu Ekleme , Facebook Yorum Formu , Facebook Yorum Formu Blogger ekle , Facebook Eklentisi

Devamını Gör

Aşağı Açılan Sayfayla Kayan Menü Eklentisi

Bu eklentimizde , blogger blogunuzun sağ tarafında , sayfayla hareket eden , fare üstüne getirilince aşağı doğru açılan menü eklentisi yapımını anlatacağız..

Demosunu görmek için TIKLAYIN.

Aşağı Açılır Sayfayla Kayan Menü Eklentisi Anlatımı.

Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyelim..

<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#2059DC;
border-radius:10px;
-moz-border-radius:10px;
border:2px solid #FFF;
width:202px;
height:20px;
color:#FFFFFF;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#9AB2EA;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}

#bmenu li a:hover{
color:#fff;}

#bmenu:hover{
z-index:5;
height:175px;
</style>

<div id="bmenu">
<h3>
Açılır Menü</h3>
<ul>
<li><a href="#">MENÜ 1</a></li>
<li><a href="#">MENÜ 2</a></li>
<li><a href="#">MENÜ 3</a></li>
<li><a href="#">MENÜ 4</a></li>
<li><a href="#">MENÜ 5</a></li>
</ul>
</div>

Yukarıdaki kodlar içinde dikkat etmemiz gereken yerler renkli olarak belirtilmiştir..

Kırmızı yere >> Görüntü başlığınız...

Mavi yere >> Menü Başlıklarınız

Sarı Yere >> Menü Linkleriniz..

<<< Bu Yazı için Arama Sonuçları >>>

Aşağı Açılan Sayfayla Kayan Menü Eklentisi , Aşağı Açılan Menü Eklentisi , Aşağı Açılan Kayan Menü Eklentisi , Aşağı Açılır Menü Eklentisi , Blogger Menü Yapımı , Blogger Menü Eklentisi

Devamını Gör

Blogger Rastgele Link Eklentisi

Blogger blogunuz için rastgele link eklentisi istermisiniz ?

Bu eklentimiz ile , sayfanızın istediğiniz bir yerinde rastgele link oluşturabileceksiniz, ziyaretçiler linke bastığında , blogger blogunuzda bulunan yazılardan biri rastgele açılacaktır..

Blogger Rastgele Link Eklentisini kullanmak için aşağıdaki yolları takip edin..

Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele aşağıdaki kodlarımızı ekleyin , herhangi bir başlık kullanmayın...

<script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Rastgele Sayfa'; document.getElementById('Rastgele').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

Yukarıdaki kod içinde kırmızı ile geçen Rastgele Sayfa , link eklediğinizde gözükecek yazıdır , dilediğiniz gibi düzenleyebilirsiniz..

Yukarıdaki işlemi yaptıysanız , şimdi ise link eklememiz için aşağıdaki kodu yine Yerleşim - Gadget Ekle - HTML/JavaScript seçeneği ile açılan panele ekleyiniz , yada nerde kullanmak istiyorsanız orayada ekleyebilirsiniz..

<div id="Rastgele"></div>

Kod içinde bulunan Rastgele yazısına dokunmayın , o yazı gözükmeyecek , gözükecek yazı bir üst kodda kırmızı ile gösterilen yer..DEMO

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Rastgele Link Eklentisi , Blogger Rastgele Link , Blogger Rastgele Link Eklentisi ekleme , Blogger Rastgele Link ekleme , Blogger Rastgele Eklentisi , Blogger Rastgele Yazı Gösterme , Blogger Rastgele Yazı Eklentisi

Devamını Gör

4in1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisi

4 in 1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisi

Blogger blogunuzda , yandan açılan facebook takipçi kutusu , Twitter son yazılarınız , Google + butonu ve email takip eklentisi istermisiniz..

Oldukça kullanışlı ve güzel bir eklenti olan 4in1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisini blogger blogunuza eklemek için aşağıdaki yolu izleyin , Aşağıdaki kodu blogunuza Gadget olarak ekleyin..Kod için bulunan Kırmızı yazılmış yerlere , facebook twitter ve feedburner adreslerinizi yazınız , ( https://www.facebook.com/XXXXX , TWİTTERADRES , FEEDBURNERADRES Kısımlarına kendi adreslerinizi yazınız..) DEMO

<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}/* right side style */#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}#google_plus_right{z-index:10003;background-color:#f2f2f2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px;}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0;}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px;}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0;}#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px;}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0;}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px;}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0;}#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}.box-title1{border:1px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;margin:10px 0;}.enteryouremail{background:#fff !important;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px;}.submitbutton{background:#f2f2f2;border:1px solid #F66303;/*box-shadow*/-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;border-radius:5px;cursor:pointer;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilRXS3KrIwXYcz0RPLeVrUfRebbeRoMjvKnV3dQ5lYhKOt0zKVuRUAH3iQXdSwIUSfk0Zxvd10a8PTYp9RHWqz-x29LABbyzS8ouuGue8x6r-unqQUMGNW6j1E9XPO_jV6c5mW6gWpe0Q/s1600/helperblogger.com-facebook-icon.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/XXXXX&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"   scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6BDAMrO5wFD33Mf8Qa_Dx5iwF1wkzXcI9C4uQyNn5QR2D2C6HLzCqUWvEuoXU2zmJro313gr9NIve_FBinmaiC1TG12mcqnvNk8D2PSu7FE25_c8o48hnQT_r0eEva38AOs8vZT6qKAo/s1600/helperblogger.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('TWİTTERADRES').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheELcRDNDEykoT2VpAWVxaKNdq8bo2oiI8YXH78qyOqJdFtRQpfWFMhFCaqFekAoFSJnWrnug7Qn6En9srgT7fIOGCUxSVyI62NBocPkuQTefAsRz5ynNPjp6EbbXenffv6AyY1cYX6qU/s1600/helperblogger.com-google-plus-icon.png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">You can also receive Free Email Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNERADRES', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="FEEDBURNERADRES" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVi9vakGCQmvV3i0GW3ISB4aRNB0Zi-fe4UAVM7ypOlZs7u4lM902jycMRjwmFDO56viLsLV4wnOMzcONffu3kmGAaV5qqHksyD8SgcGTu8LgKKAV4_PyMgHw9EVHaS2wn2C1jdgUCGrU/s1600/helperblogger.com-subscribe-icon.png" /></div></div></div></div>

<<< Bu Yazı için Arama Sonuçları >>>

4in1 Yandan Açılan Facebook , Twitter , Google , Email Eklentisi , Blogger yandan açılan , Blogger yandan açılan facebook , blogger yandan açılan twitter kutusu

Devamını Gör

Sıkca Sorulan Sorular..S.S.S.

Soru - Blogumda Gerekli kodu bulamıyorum , Ne yapmalıyım ?

1 - Şablon kısmında Widget Şablonlarını Genişlet kutucuğunu seçin ve öyle arayın...

2 - Bazı temalarda kodlar farklı olabiliyor , <.div class='blog-pager' id='blog-pager'.> olan bir kod sizin blogunuzda <.div style='blog-pager' id='blog-pager.'> olabilir , bu yüzden kodun hepsini değil , bu örnekteki gibi sadece 'blog-pager' id='blog-pager' kodunu arayıp bulun...

Soru - Kodları eklediğim halde eklenti çalışmıyor , Ne Yapmalıyım ?

1 - Eklentileri.blogspot.com sayfamızdaki , tüm eklentiler denenerek yayınlanır , Kodu anlatılan şekilde doğru eklediğinizden emin olun..

2 - Bazı kodlarda facebook , twitter vs. tarzı sayfa adreslerinizi yazmanız yada blog adresinizi yazmanız gerekebilir , Yazmanız gereken yerler kodlar içinde farklı renkte gösterilir , Bu kısımları boş bırakmış yada yanlış yazmış olabilirsiniz..

3 - Gerekirse Eklemek istediğiniz Eklentinin sayfasındaki , yorum panelini kullanabilir ve bize sorabilirsiniz..

Soru - Eklentiler Blogum için bir sorun oluşturur mu ?

1 - Eklediğiniz blogger eklentileri , blogunuz için bir sorun oluşturmaz..

2- Bazı eklentiler , başka sunuculardam JavaScript dosyaları içermektedir , Blogunuza onlarca Javascript dosyası içeren eklenti eklerseniz, blogunuzda azda olsa açılışta bir yavaşlama olabilir..

Soru - Eklediğim eklentiyi kaldırmak istiyorum , Nasıl kaldırırım ?

1 - Bazı eklentiler widget şeklindedir , Yerleşim sekmesinden , eklediğiniz eklentiyi düzenle butonu yardımı ile kaldırabilirsiniz..

2 - Eklediğiniz eklenti , css kodları içeriyor ve şablon yardımı ile eklediyseniz, eklentiyi eklerken kullandığınız yolların tam tersini yaparak eklentiyi kaldırabilirsiniz..

Benzer sorularınız için bu sayfadaki yorum panelini yada eklemek istediğiniz eklentinin sayfasında bulunan yorum panelini kulanabilirsiniz..

Devamını Gör

Blogger Renkli Popüler Yayınlar Eklentisi

Bu eklentimizde , blogunuzda bulunan popüler yayınlarınız renkleniyor , Popüler yayınlarınıza renk katmak isterseniz bu eklenti tam size göre..

Görsel açıdan oldukça şık olan Blogger Renkli Popüler Yayınlar Eklentisini tavsiye ediyoruz..

Anlatıma geçelim hemen..

Şablona girerek , Widget Şablonlarını Genişlet diyoruz ve Aşağıdaki kodumuzu buluyoruz

/* Variable definitions
   ====================

Bu kodumuzun hemen altına aşağıdaki kodlarımızı ekliyoruz..

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>

Şimdi ise bu kodu bulalım.

]]></b:skin>

Hemen üstüne aşağıdaki kodlarımızı ekliyoruz..

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

Yukarıdaki işlemleri yaptıysanız eklentimiz şuan için çalışacaktır , ama popüler yayınlarda resim kullanıyorsanız aşağıdaki anlatımıda yapmanızı öneririz , yoksa resimler düzgün görüntülenmeyebilir , resim kullanmıyorsanız üstte anlatılanlar yeterli..

Öncelikle popüler yayınları blogunuza eklediğinizden emin olun , standart olarak popüler yayınlar başlığınız , "Popüler Yayınlar" şeklindedir..Bu yüzden biz popüler yayınlar kelimesini arayacağız , farklı bir isim kullandıysanız siz o ismi aratın..

<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts'>
x
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
</b:widget>

Yukarıdaki kodlar , popüler yayınların bulunduğu kodlar , burada yapmamız gereken ilk kod ile son kod arasını silip , aşağıdaki kodlarımızı sildiğiniz yere eklemek , yukarda silmeniz gereken yerleri kırmızı x ile gösterdim( sizde x yerine kodlar olacak) diğer ilk ve son koda dokunmayın...aralarını silip aşağıdaki kodlarımı ekleyin..

<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinpfY8EwRHi6c_nVEGw0JPlnn1GShbJOnCenQoBH8gdi1hVki7HOb2sEKDsf_NRzE3FVSYg6Ys3CWoL6L2v8UpLRTIXDY3txrgAZd08xfIXsQE4vaRKl5zOryMq_jYFLWfkd9MzzJdQLk/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinpfY8EwRHi6c_nVEGw0JPlnn1GShbJOnCenQoBH8gdi1hVki7HOb2sEKDsf_NRzE3FVSYg6Ys3CWoL6L2v8UpLRTIXDY3txrgAZd08xfIXsQE4vaRKl5zOryMq_jYFLWfkd9MzzJdQLk/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>

Yukarıdaki kodlarıda eklediyseniz , Blogger Renkli Popüler Yayınlar Eklentisine artık sahipsiniz, güle güle kullanın..DEMO

<<< Bu Yazı için Arama Sonuçları >>>

Blogger Renkli Popüler Yayınlar Eklentisi , Blogger Renkli Popüler Yayınlar Gösterme , Renkli Popüler Yayınlar eklentisi , Popüler Yayınlar , Popüler Yayınlar eklentisi , Blogger Popüler Yayınlar Eklentisi

Devamını Gör

Widget Sadece Ana Sayfada Gösterme

Blogger blogunuzda eklediğiniz widget(eklenti)leri sadece ana sayfada göstermek istermisiniz ?

Bu eklentimizle , eklediğiniz eklentiler , sadece ana sayfada gözükür , diğer sayfalarda (yazı,arama vs.) gözükmez..

Hemen anlatıma geçelim.

Öncelikle dikkat etmemiz gereken , blogunuza eklediğiniz gadgetin bir ismi olması , Mesela biz BU SAYFAdaki JQUERY SLIDER MENU DENEME widgetini sadece ana sayfada göstermeyi deneyeceğiz..Widget başlığı neden gerekli derseniz, kodlarla uğraşmamanız ve hemen bulmamız için gerekli..

Blogumuzun şablon kısmına giriyoruz , Widget Şablonlarını Genişlet kutucuğunu işaretliyoruz , ctrl+f yardımı ile JQUERY SLIDER MENU DENEME yazısını arıyoruz ( siz kendi eklenti başlığı isminizi arayacaksınız.. )


<b:widget id='HTML4' locked='false' title='Jquery Slider Menu Deneme' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>

</b:includable>
</b:widget>

Yukarıdaki kod aramamız sonucunda çıkar , kırmızı olan yerleri aşağıdaki kod ile değiştiriyoruz ( sadece kırmızı olanları silip yerine aşağıdakileri ekliyoruz.. )

<b:includable id='main'>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- only display title if it's non-empty -->

<b:if cond='data:title != &quot;&quot;'>

<h2 class='title'><data:title/></h2>

</b:if>

<div class='widget-content'>

<data:content/>

</div>



<b:include name='quickedit'/>

</b:if>

</b:includable>

</b:widget>