Blogger Rastgele Yazılar Eklentisi

Blogger Rastgele Yazılar Eklentisi ile bloglarınız da bulunun yazıları rastgele olarak, giren kullanıcılara sunabilir bu sayede farklı konulardaki yazılarınıza dikkat çekebilirsiniz. Ayrıca bu ve benzeri rastgele sunum eklentileri botlar için sürekli güncellenen bir site imajı oluşturacaktır.

Blogger Rastgele Yazılar Eklentisi Kullanımı

Eklentiyi kullanmak için Şablon >> Gadget Ekle >> HTML/Java Script kutucuğunu kullanarak Aşağıdaki kodları eklemelisiniz.

<style>#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}</style> <ul id='random-posts'> <script type='text/javaScript'> var rdp_numposts=5; var rdp_snippet_length=150; var rdp_info='yes'; var rdp_comment='Yorum Var'; var rdp_disable='Comments Disabled'; var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum}; </script> <script type='text/javaScript'> function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrnAgG0KEOM1UH2CauhiPNacmK8j7rCvAvR-SDIG1qPX5zrQSgQcNgDctKIcsuGCN6XuwzgxPRe5v4JMm7qPVrdIwv7TVrPTNI0YvD4VfGKDdi4u2L9lvLJb6fMptr7KDGixPyDEjT97Q/s1600/na_image.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')}; </script> </ul>

CSS3 İle Oluşturulmuş, Hover Efektli Sosyal Takip Eklentisi

Sosyal medya hesaplarınızdaki takipçi sayınızı arttırmak istiyorsanız, ziyaretçilerinizin dikkatini çeken sosyal widgetlar kullanmanız gerekir.Ancak dikkat çekici ve görsel açıdan zengin widgetlar genellikle script kullanarak yapıldığından blog hızını olumsuz yönde etkiliyor. Bu yazıda paylaşacağım sosyal takip eklentisi, Jquery ve Java Script kullanılmamasına rağmen görsellik katan hover efekti ile ziyaretçilerin ilgisini çekecek bir widget. Eklentiyi blogunuza ekemek için Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleyerek aşağıdaki kodları yapıştırın.

<style> 
#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} 
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} 
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} 
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCXy_CwDAr9DeahfFKlzvscWKws8qhSV4_fH5UVngm5kDl9lmEvkShVcMb4YgsZp1jfYFTn6SzNrw7x2tj7PhhxDogGvLVGeEElL6V4T7De2SJ1Ba45pBqH0mHpoWhhONNn9xzf_7j1Xo/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;} 
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;} 
#tbisose .icon{overflow:hidden; color:#fafafa;} 
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} 
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} 
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} 
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} 
#tbisose .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} 
#tbisose li:hover .icon, 
.touch #tbisose li .icon{width:210px;} 
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} 
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} 
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} 
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} 
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} 
</style>
<ul id="tbisose"> 
<li data-alt="Fcebook'ta takip et"><a class="icon facebook" href="http://facebook.com/weblatnok">Facebook'ta Takip Et</a></li> 
<li data-alt="Twitter'da takip et"><a class="icon twitter" href="http://twitter.com/weblatnok">Twitter'da Takip Et</a></li> 
<li data-alt="Google+'da takip et"><a class="icon googleplus" href="http://plus.google.com/1weblatnok">Google+'da Takip Et</a></li> 
<li data-alt="Pinterest'te takip et"><a class="icon pinterest" href="http://pnterest.com/kweblatnok">Pinterest'te Takip Et</a></li> 
<li data-alt="RSS İle Takip Et"><a class="icon rss" href="http://feeds.feedburner.com/weblatnok">RSS İle Takip Et</a></li> 
</ul>

Kodların son bölümündeki sosyal medya hesaplarıma ait adresleri kendi hesabınıza ait adreslerle değiştirin.Bunun dışında bir değişiklik yapmanıza gerek yok.

Blogger İçin YouTube Eklentisi

YouTube ile ilgili gelişmiş bir Blogger eklentisi bulmak pek mümkün olmuyor. Halbuki YouTube kanalına özen gösteren ve yüzlerce video yükleyen blogger olduğunu biliyorum. Paylaşacağım bu YouTube eklentisi seyesinde YouTube kanalanızı blogunuzun kenar çubuğunda gösterebileceksiniz. Bu eklentide kanalınıza ait bir YouTube abonelik kutusunun altında kanalınızdaki videolar listelenir. Videolardan birine tıkladığınızda ise eklentinin üst kısmında küçük bir video oynatıcı açılır ve tıkladığınız video oynamaya başlar. Eklentiyi blogunuzda kullanmak için YouTube’da videolarınız olmasına gerek yok. Mevcut bir YouTube kullanıcısının videolarını da bu eklentide gösterebilirsiniz.Öncelikle Blogger kumanda panelinde Şablon > HTML’yi Düzenle yolunu izleyerek Ctrl + F tuş kombinasyonunun yardımıyla kodunu bulun. Bu kodun üzerine aşağıdaki kodları ekleyerek şablonu kaydedin.

<script src='http://code.jquery.com/jquery-latest.js'/> 
<script type='text/javascript'> 
    var youTubeURL = &quot;http://www.youtube.com/user/kullanıcıadı&quot;; 
    //optional--------------------------------------- 
    var yuneroWidgetHeight = 400; 
    var yuneroWidgetWidth = 270; 
    
    function goClicked() { 
        $(&#39;#yunero&#39;).empty().append(&#39; loading ...&#39;); 
        youTubeURL=$(&#39;#youTubeUrl&#39;).val(); 
        
        loadYunero(); 
    }
    </script>

Burada kullanıcıadı yazan yere YouTube kullanıcı adını yazın. 400 yazan yer eklentinin yüksekliğini, 270 yazan yer eklentinin genişliğini belirler. Bu değerleri blogunuza uygun şekilde değiştirebilirsiniz. Ardından Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek şu kodları ekleyin.

<div id="yunero"></div>    
<script src="https://dl.dropbox.com/u/60346665/BH-Youtube/yunero.min.js"></script>

Bu eklenti hem YouTube kanalınızın abone sayısını arttırmanıza, hem de ziyaretçileri blogunuzda daha uzun süre tutmaya yarayacaktır. Eğer eklentiyi faydalı bulduysanız aşağıdaki paylaşım butonlarını kullanarak arkadaşlarınıza önerirseniz sevinirim. Teşekkürler!

Dönme Efektli Sosyal Takip Eklentisi

Google’dan sonra en önemli trafik kaynaklarından biri olan sosyal medya kanallarında yer almaya dikkat etmeliyiz. Facebook, Twitter, Google+ gibi popüler sosyal platformlarda takipçi sayımız ne kadar çok olursa, blog trafiğimiz o kadar artar. Bu yüzden blogumuza sosyal medya butonları koyarak ziyaretçilerimizi bu platformlardaki hesaplarımıza yönlendirmeliyiz. İşte blogunuzun kenar çubuğuna ekleyebileceğiniz, hover efektli şık bir sosyal takip eklentisi…

Eklentiyi blogunuzda kullanmaya karar verdiyseniz Blogger kumanda paneline girdikten sonra Yerleşim > Gadge Ekle > HTML/JavaScript Gadget yolunu izleyerek aşağıdaki kodları eklemeniz yeterli.

<!--WebLatnok Metro Spinning Sosyal Takip Eklentisi-->
<div class="subscribe"> 
<ul> <li class="rss"><a href="http://feeds.feedburner.com/weblatnok" target='_blank'><span></span>RSS</a></li> 
<li class="twitter"><a href="http://twitter.com/weblatnok" target='_blank'><span></span>Twitter</a></li> 
<li class="gplus"><a href="https://plus.google.com/weblatnok" target='_blank'><span></span>Google Plus</a></li> 
<li class="facebook"><a href="http://facebook.com/weblatnok" target='_blank'><span></span>Facebook</a></li> </ul> 
</div> 
<style> 
.subscribe li { 
display: block !important; 
margin-right: 0 !important; 
width: auto !important; 
} 
.subscribe li a span { 
display: block; 
height: 32px; 
left: 0; 
position: absolute; 
top: 2px; 
transform: rotate(-20deg); 
-webkit-transform: rotate(-20deg); 
transition-duration: 0.8s; 
transition-property: all; 
width: 32px; 
} 
.subscribe .twitter span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh980H2ruaim-GqpvdE8FHzzzvkaFGfr9DVisooPUtqFX-SEsGsFPKXDv7jX3naRU4qJxmCtJpB83yw7EfpxbsSiNJtfRPEfQTnztfuhz359tCkybWQfUOPtL6yLp9bJXvVxKfMF-oCNbE/s1600/twitter_icon.png) no-repeat; 
} 
.subscribe .twitter a { 
background: #91C661; 
} 
.subscribe li a:hover span { 
transform:rotate(340deg); 
-webkit-transform:rotate(340deg);    
}    
ol, ul { 
list-style: none outside none; 
} 
.subscribe li { 
display: block !important; 
margin-right: 0 !important; 
width: auto !important; 
} 
.subscribe li { 
display: inline-block; 
margin: 0 20px 10px 0; 
position: relative; 
width: 200px; 
} 
.subscribe .rss span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdA3oqyJQJCSHbjGXq5lrFjWXyZqmQTNMyMzppjUsj4UY_U9uYzEx2VqAWyAyuXqpFRAu0n4Uj253cQsi22gAIyRNsfUjsby1zHFXMHpWeix16CjOmUxPEx3VJq8XPgaP69ky_IyH8YpQ/s1600/rss-icon.png) no-repeat; 
} 
.subscribe .rss a { 
background: #F67F00; 
} 
.subscribe li a { 
color: #FFFFFF; 
display: block; 
font-family: verdana; 
font-size: 12px; 
padding: 10px 10px 10px 40px; 
text-decoration: none; 
font-weight: bold; 
} 
.subscribe li a span { 
display: block; 
height: 32px; 
left: 0; 
position: absolute; 
top: 2px; 
transform: rotate(-20deg); 
-webkit-transform: rotate(-20deg); 
transition-duration: 0.8s; 
-webkit-transition-duration: 0.8s; 
transition-property: all; 
width: 32px; 
} 
.subscribe li a:hover span { 
transform:rotate(340deg); 
-webkit-transform:rotate(340deg); 
}  
.subscribe .twitter span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh980H2ruaim-GqpvdE8FHzzzvkaFGfr9DVisooPUtqFX-SEsGsFPKXDv7jX3naRU4qJxmCtJpB83yw7EfpxbsSiNJtfRPEfQTnztfuhz359tCkybWQfUOPtL6yLp9bJXvVxKfMF-oCNbE/s1600/twitter_icon.png) no-repeat; 
} 
.subscribe .twitter a { 
background: #91C661; 
} 
.subscribe .gplus span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg54ApPdIF9BG3L7UaiyK9OWE7_h6amL3MCl7CC4N3_HKH791izfVJm5uKVK9BYATgkMx_MmNx1WemTADbWrd1CEBOKiz1HBRlu9TFwj6SIxEgFwYMuyANtPK84SmjpaLMFOMYjoJh1b8g/s1600/googleplus.png) no-repeat; 
} 
.subscribe .gplus a { 
background: #D74D2F; 
} 
.subscribe .facebook span { 
background-color: transparent; 
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaKoe5nEVSLHWfGEvtvXormBFC-p1pOfcbbgQXy5wUPHdJerIIynt1YQB8RpByATGSAoGrbYJI5dGXDyH1tvORAHMBNMyTuuuNBhsbmNYglcOPup51gubb4vvFpCBOZtWTTNxOUjV6s_g/s1600/facebook-icon.png) no-repeat; 
} 
.subscribe .facebook a { 
background: #3B5998; 
} 
</style>
<!--WebLatnok Metro Spinning Sosyal Takip Eklentisi-->

Yukarıdaki WebLatnok’a ait hesap adreslerinin yerine kendi adreslerinizi yazmayı unutmayın!

Blogger İçin git.php Şeklinde URL Yönlendirme Özelliği

Wordpress altyapısında olan bir çok blogda kullanılan git.php özelliği artık blogger içinde var. blogger dünyasında tektir kodun kullanımdaki asıl amacı dışarıya olan linklerin siteden çıkmadan açılmasını sağlamak yani bu özelliği kullandığımızda linklerimiz dışarıya link olarak görünmeyecektir. Kodları nasıl ekleyeceğimiz hakkındaki anlatım ise hemen aşağıda mevcut. Blogger kumanda panelimizi açalım ve sayfalar kısmına girdikten sonra yeni sayfa oluştur butonuna basalım ve aşağıdaki kodları olduğu gibi sayfamıza yapıştıralım;

<div height="100%" id="iframe-container" width="100%">
<div height="100%" id="iframe-container" width="100%">
<style type='text/css'>body ,html{
margin:0;
padding:0;
width:100%;
height:100%;
}

html {
overflow:hidden;
}

#frame {
height:100%;
width:100%;
border:0;
}
#iframe-container {
overflow: hidden;
background: none!important;
}
</style>
<iframe frameborder="0" id="frame" src="" width="100%"> </iframe>
</div>
<script> 
document.documentElement.style.overflow = 'hidden';  // firefox, chrome 
document.body.scroll = "no"; // ie only 
var query = window.location.search.substring(1); 
query = query.replace("url=", ""); 
$('#frame').attr('src', query); 
var str = $('#iframe-container').html(); 
$('body').html(str); 
$('iframe').height($(window).height()); 
</script>

Kodlarımı ekledikten sonra sağ tarafında bulunan seçenekler adlı butona basalım ve seçenekler bölümünü aşağıdaki gibi yapalım;

Sayfamızı kaydedelim ve şimdi sırada linklerimizi nasıl oluşturacağımız var. Linklerimizi aşağıdaki gibi oluşturacağız,

http://www.weblatnok.blogspot.com/p/git.html?url=http://yonlendirileceksite.com

Buraya şimdi dikkat edelim arkadaşlar, en çok takılabileceğiniz alan burası olabilir, linkimizi ekledikten sonra benim sayfa ismim git.html olduğundan ben bu şekilde yönledirme yapıyorum eğer siz sayfaya isim vermez iseniz sayfayı oluşturduktan sonra sayfanızı önizleme yapıp, www.siteismi.com/p/sayfaismi.html renkli olarak belirttiğim bölümü kopyalayıp kendinize göre düzenlemelisiniz. Adımları tek tek uyguladıysanız eklenti sorunsuz bir şekilde çalışacaktır, yinede yapamadınız yer olursa yorum formunu kullanabilirsiniz. Ayrıca bu eklenti her temada çalışmayabilir bunu da unutmayalım, iyi bloglamalar.

Blogger Yazar Hakkında Eklentisi

Blogger sitenizde yazılarınızın altında yazar hakkında bölümü eklemek. Sade ve kullanışlı bu kısa ve kolay eklenti sayesinde blogunuz da yazılarınızın altında kendi tanıtımınız ve resminizi ekleyebilirsiniz. Her renge ve boyuta ayarlanabilen bu eklenti kesinlikle çok işinize yarayacaktır.


Hemen kurulum gelelim;

]]></b:skin>

Etiketinin hemen üstüne aşağıdaki kodları ekleyelim;
Kod:

/* Yazar Hakkinda Taner Cİhan =======================*/
.author-box { border:1px solid#e0e0e0; margin: auto; margin: 5px 3px; padding: 5px; overflow: auto; background:#FFF; }
.author-box a { color: #005594; font-size: 14px; font-weight: Bold; letter-spacing: 0px; margin: 0 0 1em; }
.author-box p { margin: 0; padding: 0; font-size: 14px; } .author-box img { float: left; margin: 0 5px 0 0; padding: 2px; }

Şimdide aşağıdaki etiketi bulalım

<div class="post-footer">

Etiketin hemen altına aşağıdaki kodlarımızı ekleyelim
Kod:

<br /><div class='author-box'><p><img alt='' border='0' class='' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT94vCEOA_JGWdrVLG_oLFEhSytIXctfoJ3Z-oyF7e3xN4MWEIC4r7_KrINazqgXXiJE-kb0yux1vdxs3jmCscebCeaT8SwjAD8qK1ewDHqO5XXEe6IFoLfJZJD3TMHgHla2jhd7O_ZIY/s1600/yazarresim.jpg' width='70'/><b>Taner Cihan (Yazar Hakkında)</b><br />Web tasarım, grafik tasarım, domain-host alım satım işleriyle uğraşan, Sanal alemde adını duyurmuş, tanınmış bir sanal alem çocuğu, Facebook, twtitter, google+ ve bir çok sosyal ağlarda üyeliği olan sanalda ve normalde takma ismi leforce olan bir insan..<br /><div style='text-align: center;'/><p style='margin:1px 0'/></p></div></b:if>