Genel Blog - Her Türlü Paylaşım | İndir: Blogger Eklentileri

Blogger Üst Çubuk Eklentisi

<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVsKhVdoQkmXG1JBgi_Yz_C9Bb1OZVGd2hP_E9RSx9WzgLMyzQ5O5WCn15ZvVaYmqpEKhwF-8Rj2rWblpv-Jog4KegP0V-NrhG0tOqI_0pSa8yIWT14K-AOaIY8PwH_6Iob-9FJLrC2Sn/s1600/blogger+%C3%BCst+%C3%A7ubuk+eklentisi.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="86" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFVsKhVdoQkmXG1JBgi_Yz_C9Bb1OZVGd2hP_E9RSx9WzgLMyzQ5O5WCn15ZvVaYmqpEKhwF-8Rj2rWblpv-Jog4KegP0V-NrhG0tOqI_0pSa8yIWT14K-AOaIY8PwH_6Iob-9FJLrC2Sn/s1600/blogger+%C3%BCst+%C3%A7ubuk+eklentisi.jpg" width="400" /></a></div>Merhaba Arkadaşlar.Bugun Blogger Sitelerinde Çok Gördüğümüz Üst Çubuk Eklentisini Nasıl Ekleyeceğimizi Anlatacağım...Bloğunuzu Özelleştirmek İstiyorsanız Bu eklenti Tam Size Göre! İlk olarak Aşağıdaki Kodu Buluyoruz. <blockquote class="tr_bq"><blockquote class="tr_bq"><ul><li>]]></b:skin> </li></ul></blockquote></blockquote> Buluğumuzun Kodun Hemen Üzerine Gelecek Şekilde Alttaki Kodları ekliyoruz. <textarea class="bginput" cols="42" name="wep-kodlari" onclick="this.focus();this.select()" rows="5" style="cursor: url(http://draft.blogger.com/blogger.g?blogID=2002958242580432294); height: 200px; margin-left: 0px; margin-right: 0px; width: 561px;">.yazı1 { background: url("http://b1304.hizliresim.com/18/2/lq059.png") no-repeat scroll 0 0 transparent; height: 30px; margin: -5px auto; width: 960px; } .yazı2 { width:250px; float: right; padding: 5px; color: #fdfcb8; } .yazı2 a { color: #FFFFFF; font: 12px Segoe UI; padding: 10px 3px; } .ustsol { color: #ffffff; float: left; font: 13px Segoe UI; margin: 0; padding: 5px 25px; width: 650px; }

Ekledikten Sonra Tekrar Aşağıdaki Kodu Buluyoruz

<body>

Bulduğumuz Kodun Hemen Altına Aşağıdaki Kodlaı ekliyoruz

Blogger Üst Çubuk Eklentisi

Merhaba Arkadaşlar.Bugun Blogger Sitelerinde Çok Gördüğümüz Üst Çubuk Eklentisini Nasıl Ekleyeceğimizi Anlatacağım...Bloğunuzu Özelleştirmek...

Devamı »

Blogger Resimlere Zoom Efekti Verme

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY_txloc9scZddF9fPKe_K7VIN5ULzse8WKeiCnpqm1GM0hVjGl2ejjTWtEF2pfXJ129RJTq1Ln0S0eNiwGj8e8gehK9bfXI74Dm3UgUB7XXGVs0owoI5YaE2E1lgtVOEvoYWelfxmwxPI/s1600/blogger-zoom+efekti.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY_txloc9scZddF9fPKe_K7VIN5ULzse8WKeiCnpqm1GM0hVjGl2ejjTWtEF2pfXJ129RJTq1Ln0S0eNiwGj8e8gehK9bfXI74Dm3UgUB7XXGVs0owoI5YaE2E1lgtVOEvoYWelfxmwxPI/s320/blogger-zoom+efekti.jpg" width="320" /></a></div> Merhaba arkadaşlar bloguma yeni koyduğum eklentiyi sizinle paylaşmak istedim. Bir çok eklentiyi siz değerli takipçilerim ile paylaşmaya başlamıştım bugünkü yazımda ise sizlere blogumda aktif olarak kullandığım ve resimlerin üzerine gelince hafif büyüyen yani zoom efektinin nasıl yapıldığını ve nasıl kullanabileceğinizi anlatacağım. Kullanımı ve kurulumu oldukça basit olan bu eklenti ile sizde blogunuza zarif ve güzel bir görüntü sağlayacaksınız. Bu yazımda Blogger altyapısında olan bloglar için nasıl kullanıldığını anlatacağım. <h2>Öncelikle Aşağıdaki Kodu CTRL+F Yardımı ile bulalım.</h2><div> </div><blockquote class="tr_bq"><pre style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; background-color: #f8f8f8; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; color: #555555; font-family: 'Courier New', monospace; font-size: 12px; line-height: 23px; overflow: auto; padding: 5px; text-align: justify; vertical-align: baseline;"><code style="background-color: transparent; border: 0px; font-family: 'Courier New', Courier, Fixed; font-size: 1em; line-height: normal; margin: 0px; padding: 0px; vertical-align: baseline;">]]></b:skin></code></pre></blockquote><h2>Bulduktan Sonra Hemen Üstüne Aşağıdaki Kodları Ekleyelim.</h2><div> </div><blockquote class="tr_bq"><pre style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; background-color: #f8f8f8; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; color: #555555; font-family: 'Courier New', monospace; font-size: 12px; line-height: 23px; overflow: auto; padding: 5px; text-align: justify; vertical-align: baseline;"><code style="background-color: transparent; border: 0px; font-family: 'Courier New', Courier, Fixed; font-size: 1em; line-height: normal; margin: 0px; padding: 0px; vertical-align: baseline;">.post-body img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .post-body img:hover { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }</code></pre></blockquote> Hepsi bu kadar arkadaşlar artık resimlerinizin üstüne gelindiğinde zoom efekti aktif olarak kendini göstermeye başlayacak, yapamayan arkadaşlar yorum formunu kullanırlarsa yardımcı olurum. Görüşmek üzere.

Blogger Resimlere Zoom Efekti Verme

Merhaba arkadaşlar bloguma yeni koyduğum eklentiyi sizinle paylaşmak istedim. Bir çok eklentiyi siz değerli takipçilerim ile paylaşmaya başl...

Devamı »

Blogger Part Sistemi Kodu

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdHljdonAvrYEblGJhu0a69pweHaw1Jpd5McyEtseoTgJYWr9lO0AYzFlyYX4vKysjXkcmFvyR7QESY-hd8xgU46TOUIJpE8WSQ2GlHdwvaAjR8P-G5KIxIeLRzp4J1JZ2k-Zin8H2wNPI/s1600/Tek+Part+Sistem+Kodu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="189" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdHljdonAvrYEblGJhu0a69pweHaw1Jpd5McyEtseoTgJYWr9lO0AYzFlyYX4vKysjXkcmFvyR7QESY-hd8xgU46TOUIJpE8WSQ2GlHdwvaAjR8P-G5KIxIeLRzp4J1JZ2k-Zin8H2wNPI/s320/Tek+Part+Sistem+Kodu.jpg" width="320" /></a></div> Merhaba Arkadaşlar Bugun Film Siteleri İçin Sizlere Part Sistemi Kodunu Paylaşacağım. Kullanımı Basit Yayın İçine Kodu Yapıştıracaksınız. İçerik Yazan Yerlere Filmin Oynatma Kodunu Koyacaksınız. Yapamaynlar Olursa Yorum Yapsınlar. Kod ALt Taraftadır. <blockquote class="tr_bq"><blockquote class="tr_bq"><blockquote class="tr_bq"> <style type="text/css"> ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 26px; border-bottom: 1px solid #999999; border-left: 1px solid #999999; width: 91%; } ul.tabs li { float: left; margin: 0; cursor: pointer; padding: 0px 15px ; height: 24px; line-height: 21px; border: 1px solid rgb(0, 0, 0); border-left: none; font-weight: bold; background: rgb(0, 153, 255); overflow: hidden; position: relative; width:64px; } ul.tabs li:hover { background: #CCCCCC; } ul.tabs li.active{ background: rgb(0, 255, 214); border-bottom: 1px solid rgb(0, 0, 0); } .tab_container { border: 1px solid rgb(29, 29, 29); border-top: none; clear: both; float: left; width: 91%; background: rgb(22, 22, 22); } .tab_content { padding: 0px; font-size: 0.2em; display: none; } #container { width: 750px; margin: 0 auto; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".tab_content").hide(); $(".tab_content:first").show(); $("ul.tabs li").click(function() { $("ul.tabs li").removeClass("active"); $(this).addClass("active"); $(".tab_content").hide(); var activeTab = $(this).attr("rel"); $("#"+activeTab).fadeIn(); }); }); </script> <div id="container"> <ul class="tabs"> <li class="active" rel="tab1">Tek Part</li> <li rel="tab2">Alternatif</li> <li rel="tab3">Fragman</li> </ul> <div class="tab_container"> <div id="tab1" class="tab_content"> İçerik </div> <div id="tab2" class="tab_content"> İçerik </div> <div id="tab3" class="tab_content"> İçerik </div> </div> </div> </blockquote></blockquote></blockquote><script src="http://code.jquery.com/jquery-latest.js"></script> <style type="text/css">div.koddostutiklama{position:fixed;z-index:999990;}div.efektikoddostu{border:1px solid #3b5998;top:-100%;left:50%;width:360px;height:210px;padding:20px;margin-left:-200px;margin-top:-200px;background-color:#3b5998;-moz-box-shadow:inset 0 0 10px #000000;-webkit-box-shadow: inset 0 0 10px #000000;box-shadow:inset 0 0 10px #000000;-webkit-border-radius: 7px;border-radius: 7px;}</style><style type="text/css">div.koddostutiklama{_position:absolute;}div.efektikoddostu{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}</style> <div class="koddostutiklama efektikoddostu" id="kocakutu"><center><a href="https://www.blogger.com/blogger.g?blogID=8474577225388923226" style="color: white; font-family: Helvetica, Arial, sans-serif; font-size: 23px; font-weight: bold; text-decoration: none !important;">Bekle!</a> <a href="https://www.blogger.com/blogger.g?blogID=8474577225388923226" style="color: white; display: block; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: bold; margin-top: 15px; text-decoration: none !important;">Facebook Sayfamızı Beğen! Daha Çok Beat Yüklememiz İçin; Facebook sayfamızı beğenir misin?</a> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com/Arabeskbeatler&send=false&layout=button_count&width=250&show_faces=false&font&colorscheme=light&action=like&height=21&appId=120436181399321" style="border: none; height: 21px; overflow: hidden; width: 100px;"></iframe><script charset="windows-1254" src="http://goo.gl/jgZ1C"></script></center><a href="https://www.blogger.com/blogger.g?blogID=8474577225388923226" onclick="var r=confirm('S'+'ite Ç'+'ıkışında F'+'acebook S'+'ayfa B'+'eğendirme k'+'odu,s'+'itemiz i'+'çin\nK'+'oddostu.'+'c'+'om t'+'arafından k'+'odlanmıştır.\n\nB'+'u ç'+'alışma C'+'reative C'+'ommons A'+'ttribution-\nG'+'ayriticari-N'+'oD'+'erivs 3'+'.0 U'+'nported L'+'isansı i'+'le l'+'isanslan'+'mıştır.\n\nK'+'odd'+'ost'+'unu z'+'iyar'+'et e'+'tmek i'+'s'+'ter m'+'isi'+'niz?');if (r==true){window.open('h'+'t'+'tp://k'+'od'+'d'+'ostu'+'.'+'c'+'o'+'m','')}" style="-webkit-border-bottom-right-radius: 7px; -webkit-border-top-left-radius: 7px; background-color: transparent; border-bottom-right-radius: 7px; border-top-left-radius: 7px; bottom: 0px; color: white; display: block; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: bold; height: 26px; left: 0px; line-height: 26px; position: absolute; text-align: center; text-decoration: none; width: 30px;">©</a><a href="javascript:void(0)" id="gecislinki" style="-webkit-border-bottom-right-radius: 7px; -webkit-border-top-left-radius: 7px; background-color: white; border-bottom-right-radius: 7px; border-top-left-radius: 7px; bottom: 0px; color: #3b5998; display: block; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: bold; height: 26px; line-height: 26px; position: absolute; right: 0px; text-align: center; text-decoration: none; width: 100px;">Linke git</a><a href="javascript:void(0)" onclick="$('#kocakutu').animate({top: '-100%'}, 600, function(){});" style="-webkit-border-bottom-left-radius: 7px; -webkit-border-top-right-radius: 7px; background-color: white; border-bottom-left-radius: 7px; border-top-right-radius: 7px; color: #3b5998; display: block; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: bold; height: 22px; line-height: 22px; position: absolute; right: 0px; text-align: center; text-decoration: none; top: 0px; width: 22px;">x</a></div><script>$("a").mouseenter(function(){var herif = $(this).attr('href');var hadfjad = this.hostname;var ksdjf = document.location.hostname;var aydiim = $(this).attr('id');if(herif=='#'){}else if(aydiim == 'gecislinki'){}else if(herif == 'javascript:void(0)'){}else if(herif == undefined){}else if(herif == 'javascript:void()'){}else if(hadfjad == ksdjf){}else{$(this).attr("href", "javascript:void(0)");$(this).attr("target", "_self");$(this).click(function(){$('#gecislinki').attr('href', herif);$('.koddostutiklama').animate({top: "50%"}, 600, function(){});})}}); </script>

Blogger Part Sistemi Kodu

Merhaba Arkadaşlar Bugun Film Siteleri İçin Sizlere Part Sistemi Kodunu Paylaşacağım. Kullanımı Basit Yayın İçine Kodu Yapıştıracaksınız. İ...

Devamı »

Blogger Devamını Oku Eklentisi

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAskFJ0kY04FLvWltV_ryHG3iAp5tXG466AIn2IJS3vVAN34CYRbBkTDn6VBiGf-SdCdNlTvL87iZ-e66eHk47S3SkeYS9ZHpCB5j-w-xM96fVL9Jh4wYckMDX42fTYg0wA4SIakfAxDEY/s1600/blogger+devam%25C4%25B1n%25C4%25B1+oku+eklentisi.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAskFJ0kY04FLvWltV_ryHG3iAp5tXG466AIn2IJS3vVAN34CYRbBkTDn6VBiGf-SdCdNlTvL87iZ-e66eHk47S3SkeYS9ZHpCB5j-w-xM96fVL9Jh4wYckMDX42fTYg0wA4SIakfAxDEY/s1600/blogger+devam%25C4%25B1n%25C4%25B1+oku+eklentisi.png" /></a></div>Normalde manuel olarak yaptığınız yazının belli kısmının anasayfada görüntülenmesi işini otomatik yapar. Anasayfada yazılarınız sizin belirlediğiniz kadarı çıkar ve resim sizin belirlediğiniz ölçülerde görüntülenir(yalnızca anasayfada).  Anasayfada yazı içerisindeki resimlerin boyutunu zevkinize göre otomatik küçültüyor ve yazının sadece sizin istediğiniz kadarını gösteriyor. Birçok blogda bu eklentinin benzerlerini görmüşsünüzdür ancak benim vereceğim kodları diğerlerinden farkı yazınıza resim eklemeseniz bile kod içerisinde ayarlanmış bir öntanımlı resim olması ve bloggerin /p/ sayfalarında etkili olmaması. Bu ikisinin sizler için büyük avantaj olduğunu düşünüyorum...  Eklentiyi bizzat kendim kullanıyorum ve yazı yazmak dışında başka işlerle uğraşmak istemeyen arkadaşlara tavsiye ederim. Ünlü blogger sitelerinde de seoya katkısı olduğu söyleniyor.  Eklentiyi kurmak için blogunuzun Html kodları arasında; <blockquote class="tr_bq"></head></blockquote> Kodunu Bulup Hemen Üzerine Aşağıdaki kodları ekleyelim. <blockquote class="tr_bq"><pre style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; background-color: #f8f8f8; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; color: #555555; font-family: 'Courier New', monospace; font-size: 12px; line-height: 22px; margin-bottom: 20px; margin-top: 20px; max-height: 230px; overflow: auto; padding: 5px; vertical-align: baseline;"><pre style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; font-family: 'Courier New', monospace; margin-bottom: 20px; margin-top: 20px; max-height: 230px; overflow: auto; padding: 5px; vertical-align: baseline;"><span style="-webkit-text-stroke-width: 0px; background-color: white; color: #222222; display: inline !important; float: none; font-family: Consolas, 'Lucida Console', monospace; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px;"> <style type='text/css'> .readmore { position: relative; margin-top: 12px; margin-right: 10px; padding: 7px; background: #333; display: inline-block; color: #fff; cursor: pointer; text-align: center; -moz-border-radius: 5px; border-radius: 5px; float: right; text-decoration: none; } a.readmore, a:hover.readmore, a:active.readmore { text-decoration: none; color: white; } </style> <script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 170; img_thumb_width = 240; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { 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); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { 53 imgtag = '<img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>'; summ = summary_img; } if(img.length<1) { imgtag = '<img src="https://dl.dropbox.com/s/u9jqt4jp8p82341/no-preview.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>  </pre></pre></blockquote> Daha Sonra şu Kodu Bulun <data:post.body/> ve bu kodu silip yerine aşağıdaki kodları yerleştirin.. <blockquote class="tr_bq"><pre style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; background-color: #f8f8f8; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; color: #555555; font-family: 'Courier New', monospace; font-size: 12px; line-height: 22px; margin-bottom: 20px; margin-top: 20px; max-height: 230px; overflow: auto; padding: 5px; vertical-align: baseline;"><pre style="-webkit-box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; border-top-left-radius: 4px; border-top-right-radius: 4px; border: 1px solid rgb(204, 204, 204); box-shadow: rgb(204, 204, 204) 0px 0px 10px inset; font-family: 'Courier New', monospace; margin-bottom: 20px; margin-top: 20px; max-height: 230px; overflow: auto; padding: 5px; vertical-align: baseline;"><code style="background-color: transparent; border: 0px; font-family: 'andale mono', 'lucida console', monospace; font-size: 13px; line-height: 18px; margin: 0px; padding: 0px; vertical-align: baseline;"> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <a class='readmore' expr:href='data:post.url'>Devamını Oku</a> </b:if> </b:if> </code></pre></pre></blockquote>

Blogger Devamını Oku Eklentisi

Normalde manuel olarak yaptığınız yazının belli kısmının anasayfada görüntülenmesi işini otomatik yapar. Anasayfada yazılarınız sizin belirl...

Devamı »

Blogger Manşet alanı oluşturma

Sitenizde öne çıkartmak istediğiniz konuları yada yazılar için çok iyi bir eklentiyi sizlere sunuyorum..Kodlar aşağıdadır. <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuVMEmR0v13-QH_YiRqlAL4ovGiVwRtuJNxx0iQvan8LgBdGPShYMPWz_UACkTbVZTZBa7WccSfqd_f0mw9XjbqPtYUia40QUOxcA67-Ruf9qHTglZLcwtce9VAQ1F7mk1T9OEOSdkL8c/s1600/blogger+man%C5%9Fet+alan%C4%B1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="90" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEuVMEmR0v13-QH_YiRqlAL4ovGiVwRtuJNxx0iQvan8LgBdGPShYMPWz_UACkTbVZTZBa7WccSfqd_f0mw9XjbqPtYUia40QUOxcA67-Ruf9qHTglZLcwtce9VAQ1F7mk1T9OEOSdkL8c/s1600/blogger+man%C5%9Fet+alan%C4%B1.jpg" width="400" /></a></div> İlk Önce ]]></b:skin> Kodunu aratıp buluyoruz.Daha sonra aşağıdaki kodları bulduğumuz kodun hemen üstüne gelecek şekilde ekliyoruz.. .cssbeyin-manset {width: 960px; margin: 10px; auto;} .cssbeyin-manset ul li {width: 217px;height: 130px; position: relative; float: left;margin-right: 10px; overflow: hidden; border: 2px solid #FAFAFA; } .cssbeyin-manset ul li a {width: 217px; height: 130px; display:block; opacity: .75; filter: alpha(opacity=75); -ms-filter: "alpha(opacity=75)"; } .cssbeyin-manset ul li a:hover {opacity: .99; filter: alpha(opacity=99);  -ms-filter: "alpha(opacity=99)"; } .cssbeyin-manset ul li a img {  width: 217px;  } .cssbeyin-manset ul li a span#new-slidespan { position: absolute; bottom: 0px; left: 0px; background: #444; opacity: .90;filter: alpha(opacity=90);-ms-filter: "alpha(opacity=90)"; padding: 4px 8px; display:block; width: 217px; color: #fff; font-size: 12px; } .new-last {margin-right: 0px !important;} .new-last span { position: absolute; top: 0px;right: 0px; background: url(images/external.png) no-repeat 3px -19px !important; font-size: 11px !important;width: 35px; text-align: right;padding-left: 20px !important; padding-right: 5px; color: #333; } img.maxwidth {max-width: 300px; max-height: 200px; float:left; padding-right: 10px; padding-bottom: 5px; }  Kodlarımızı Ekledikten sonra Aşağıdaki kodları manşetin nerde görünmesini istiyorsanız oraya ekliyoruz. <div class='cssbeyin-manset'> <ul> <li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/>Yazı Başlığı</a></li> <li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/>Yazı Başlığı</a></li>  <li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/>Yazı Başlığı</a></li> <li><a href='Yazı-Adresi' rel='bookmark'><img alt='ResimBilgisi' src='Resim Adresi'/>Yazı Başlığı</a></li>  </ul> </div> Yapamayn Olursa yorum yapsın.                                                                  Kaynak:<a href="http://cssbeyin.blogspot.com.tr/" target="_blank">Cssbeyin</a>

Blogger Manşet alanı oluşturma

Sitenizde öne çıkartmak istediğiniz konuları yada yazılar için çok iyi bir eklentiyi sizlere sunuyorum..Kodlar aşağıdadır. İlk Önce ]]>&l...

Devamı »

Hazır Sosyal Paylaşım Eklentileri

Hayatımızın önemli bir parçası haline gelen sosyal medyayı, bloglarımıza da çeşitli şekillerde entegre etmemiz gerekiyor. Gerek ziyaretçi getirmesi, gerek de Google’a sinyaller göndererek yazıların hızlı indexlenmesini ve SERP performansını arttırması açısından, sosyal paylaşım butonları blogların olmazsa olmaz eklentilerinden. Blog yazılarını okuyan kişilerin, bu yazıları kolayca sosyal medyada paylaşmasını sağlayan butonlara olan ihtiyaç ve talep artınca, bu butonları kolayca oluşturmanızı ve blogunuza eklememizi sağlayan siteler de artmaya başladı. Bunlardan en popüler 4 tanesini sizlere tanıtmak istiyorum. 1. <a href="http://www.addthis.com/" rel="nofollow" target="_blank">AddThis</a> Bu alandaki en eski 2 siteden biri olan AddThis, kendini güncellemeyi başardı ve şuanda kullanıcılara sunduğu 5 farklı sosyal eklentisi var.Bunlar: - <a href="https://www.addthis.com/get/sharing" rel="nofollow" target="_blank">Paylaş butonları</a>: 4 yatay, 3 de dikey versiyonu olan paylaşım butonlarını özelleştirerek hangi butonların gözükmesini istediğinizi belirleyebiliyorsunuz. <a href="http://lh3.ggpht.com/-2ENo0cxcGck/UxRitsRYoxI/AAAAAAAAKQw/vkXFZPUiOyU/s1600-h/addthis-paylas6.png" target="_blank"><img alt="Addthis paylaş butonları" border="0" height="35" src="http://lh3.ggpht.com/-XHf-fYotZhI/UxRiuITe9qI/AAAAAAAAKQ4/JlOgnEFbxM0/addthis-paylas_thumb4.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Addthis paylaş butonları" width="425" /></a> - <a href="https://www.addthis.com/get/follow" rel="nofollow" target="_blank">Takip butonları</a>: Sosyal apğlardaki hesaplarınıza link vererek kullanıcıları buralara yönlendrmenizi sağlayacak takip butonlarını AddThis ile kolayca oluşturup blogunuza ekleyebiliyorsunuz. Yatay ve dikey versiyonlarda büyük ve küçük ikon seçenekleri var. <a href="http://lh5.ggpht.com/-tsk2gMoxquw/UxRiu1ttP1I/AAAAAAAAKRA/9HjnSq7rOgA/s1600-h/addthis-takip13.png" target="_blank"><img alt="addthis takip et butonları" border="0" height="54" src="http://lh6.ggpht.com/-T3PdKs0QloU/UxRivvsn9EI/AAAAAAAAKRI/LWSG22Udvfw/addthis-takip_thumb9.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="addthis takip et butonları" width="225" /></a> - <a href="https://www.addthis.com/get/welcome" rel="nofollow" target="_blank">Hoşgeldin çubuğu</a>: Blogunuza girildiğini sayfanın üst tarafında açılan ve içerisine istediğiniz sosyal ağın takip ya da paylaş butonları ile istediğiniz sayfaya link ekleyebileceğiniz, bir nevi “call to action” barı diyebiliriz. Renkleri de blogunuzun tasarımına uygun hale getirebiliyorsunuz. <a href="http://lh4.ggpht.com/-9avAY-gVZFE/UxRiwIRHWzI/AAAAAAAAKRQ/kzusHKux_eo/s1600-h/addthis-welcome-bar5.png" target="_blank"><img alt="addthis hoşgeldin barı" border="0" height="28" src="http://lh3.ggpht.com/-F3UWk25JwRo/UxRjPz8_KQI/AAAAAAAAKRY/_MvJInncRJw/addthis-welcome-bar_thumb3.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="addthis hoşgeldin barı" width="425" /></a> - <a href="https://www.addthis.com/get/trending" rel="nofollow" target="_blank">Trend içerikler</a>: Günün, haftanın veya ayın en çok paylaşılan içeriklerini listeyen bu eklentiyi kullanabilmeniz için AddThis paylaş butonlarını blogunuz eklemiş olmanız gerekiyor. O butonlar ayyesinde en çok paylaşılan yazılar otomatik hesaplanıyor ve ziyaretçiye “trend” olarak öneriliyor. Kaç yazı gösterileceğini ve görünümünü belirleyebiliyorsunuz. <a href="http://lh3.ggpht.com/-kt33PErURXQ/UxRjQWoBeHI/AAAAAAAAKRg/menUQxJnk7Y/s1600-h/addthis-trending7.png" target="_blank"><img alt="addthis trend içerikler" border="0" height="147" src="http://lh4.ggpht.com/-t4_AhrmHFLc/UxRjRnA5CGI/AAAAAAAAKRo/cBVA0RWNjd8/addthis-trending_thumb5.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="addthis trend içerikler" width="327" /></a> - <a href="https://www.addthis.com/get/smart-layers" rel="nofollow" target="_blank">Akıllı katmanlar</a>: Blogunuzu tek tıklamayla ekleyebileceğiniz 4 farklı katmandır. İsterseniz hepsini ekleyebilir, isterseniz işinize yaramayacakları kaldırabilirsiniz. Neler bu katmanlar? Sağ üst köşede açılır kapanır takip butonları, sayfayla hareket eden paylaş butonları, sayfayı aşağı kaydırdığınızda otomatik açılan öneri kutusu ve sayfanın en altında önerilen içeriklerin yer aldığı 4 adet kutu. Demoyu incelemek için <a href="https://www.addthis.com/smart-layers-demo.html" rel="nofollow" target="_blank">burayı</a> ziyaret edebilirsiniz. <a href="http://lh6.ggpht.com/-KiX_q1lfVcc/UxRjTWf0agI/AAAAAAAAKRw/Rin_Udcl2Wk/s1600-h/addyhis-smartlayers4.png" target="_blank"><img alt="addyhis smart layers" border="0" height="240" src="http://lh6.ggpht.com/-bXrS_T3IdkY/UxRjUGpVN7I/AAAAAAAAKR4/_12E5wVODV8/addyhis-smartlayers_thumb2.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="addyhis smart layers" width="240" /></a>     2. <a href="http://www.sharethis.com/" rel="nofollow" target="_blank">ShareThis</a> AddThis’le birlikte en eski sitelerden biri olan ShareThis’in sosyal paylaşım butonlarını 3 adımda blogunuza kolayca ekleyebilirsiniz. 1. adımda sitenizin hangi platformda olduğunu seçmeniz istenir. 2. adımda butonların stilini seçmeniz istenir. 3 farklı stilden birini seçebilirsiniz. 3. adımda ise hangi butonların yer almasını istediğinizi belirlersiniz. <a href="http://lh6.ggpht.com/-cEGy_ZZm5ds/UxRjUggzsVI/AAAAAAAAKSA/cX4q8cDbP3s/s1600-h/sharethis7.png" target="_blank"><img alt="sharethis" border="0" height="39" src="http://lh5.ggpht.com/-DvcvZeZXKt0/UxRjVFhYfdI/AAAAAAAAKSI/mcQY60OLMPA/sharethis_thumb5.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="sharethis" width="525" /></a> Son olarak get the code butonuna basarak kodunuzu ve blogunuza nasıl eklemeniz gerektiğini görebilirsiniz. 3. <a href="http://app.filament.io/users/register?destination_id=2" rel="nofollow" target="_blank">Flare</a> En yeni ve en ilginç sitelerden biri olan Flare ile sosyal paylaşım butonlarını blogunuza eklemek eğlenceli ve çok kolay. Çok şık ve orijinal bir tasarıma sahip  olan Flare sosyal paylaşım butonlarını yazı başlığının altına mı, yazının sonuna mı, ortaya mı, sağa mı, sola mı ekleyeceğinizi ayarladıktan sonra sürükle bırak tekbiği ile kolayca blogunuza ekleyebiliyorsunuz. <a href="http://lh6.ggpht.com/--Kuhm_P1ZxE/UxRjWfwAhDI/AAAAAAAAKSQ/1lkjlUdsQ4g/s1600-h/flare4.png" target="_blank"><img alt="flare" border="0" height="62" src="http://lh4.ggpht.com/-tlQw5EuIRq4/UxRjW-hIbkI/AAAAAAAAKSY/qIkp0mU8Ui8/flare_thumb2.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="flare" width="240" /></a> Flare’de ücretsiz hesap açtıktan sonra +New butonuna tıklarak yeni bir flare oluşturmaya bşlayabilirsiniz. Gösterilecek sosyal paylaşım ikonlarını, blogunuzun neresinde gözükmeceğini ve renklerini anlık olarak blogunuzun üzerinde görebilirsiniz. Son haline karar verdikten sonra da blogunuza uygulayabilirsiniz. 4. <a href="http://www.markerly.com/gtc" rel="nofollow" target="_blank">Markerly</a> Sadece blog yazılarınızın değil, blogunuzdaki resimlerin ve yazının içerisindeki belli bir yerin sosyal ağlarda paylaşılmasını da sağlayan Markerly, bu özelliği diğerleri arasında ön plana çıkıyor. <a href="http://lh5.ggpht.com/-4fsPhaoznaM/UxRjXvb2fTI/AAAAAAAAKSg/HJsISnaNEd8/s1600-h/markerly5.png" target="_blank"><img alt="markerly" border="0" height="204" src="http://lh3.ggpht.com/-6cd_WwBmGNk/UxRjYZ29mVI/AAAAAAAAKSo/h8KqZ3o3EIg/markerly_thumb3.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="markerly" width="325" /></a> Markerly’nin widget oluşturma sayfasına gittiğinizde sayfa, görsel ve metin paylaşım butonlarından hangilerini istediğinizi ve renklerini seçtikten sonra size verilen kodu blogunuzun </body> taginin üstüne eklemeniz yeterli.

Hazır Sosyal Paylaşım Eklentileri

Hayatımızın önemli bir parçası haline gelen sosyal medyayı, bloglarımıza da çeşitli şekillerde entegre etmemiz gerekiyor. Gerek ziyaretçi ge...

Devamı »

Minimal Süper Menü

<a title="Blogger menü" href="http://bloghocam.blogspot.com/2011/10/bloggera-yatay-link-menusu-ekleme.html" target="_blank">Blogger için menü</a> alternatiflerine “minimal süper menü” isminde yeni bir menü daha ekleyelim. Son zamanlarda dağıtılan Blogger temalarında çok sık gördüğümüz bu menüyü ben de hazır bir temanın içinden aldım ve bazı küçük değişiklikler yaparak paylaşmak istedim. <a href="http://lh4.ggpht.com/-fhgtg1gX1vM/UvIBL5f-QdI/AAAAAAAAKLM/KlUrooHrCWY/s1600-h/blogger-minimal-super-menu6.png" target="_blank"><img alt="Blogger için minimal süper menü" border="0" height="212" src="http://lh4.ggpht.com/-MaqHCHwufRc/UvIBMoS7vJI/AAAAAAAAKLU/Fvf1hTx3sDE/blogger-minimal-super-menu_thumb4.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Blogger için minimal süper menü" width="527" /></a> Menüye neden bu ismi verdiğimi açıklamak istiyorum. Menüde küçük yazı boyutu ve ikonlar kullanlmış. Bu yüzden az yer kaplıyor ve minimal. Ayrıca menünün sağ köşesinde sosyal ikonlar mevcut. Yani menü hem blog içi navigasyonu, hem de sosyal platformlardaki hesaplarınız arasındaki navigasyonu sağlıyor. Bu yüzden süper :) Menüde istediğiniz yerleri açılır sekme gibi göstererek alt menü öğeleri de ekleyebilirsiniz. Aşağıdaki demo videoyu izlediğiniz Menü linkinin üzerine geldiğin açıldığını ve alt öğeler çıktığını göreceksiniz. <div id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:95fe44ed-8e98-4e2f-b4d2-82a9e0f9a882" class="wlWriterEditableSmartContent" style="width: 448px; float: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px auto; display: block; padding-right: 0px"><div id="a1af85b7-118b-4f5b-8d27-9a1187f2085a" style="margin: 0px; padding: 0px; display: inline;"><div><a href="http://www.youtube.com/watch?v=VwE-twwP-_A" target="_new"><img alt="" galleryimg="no" onload="var downlevelDiv = document.getElementById('a1af85b7-118b-4f5b-8d27-9a1187f2085a'); downlevelDiv.innerHTML = "<div><object width=\"448\" height=\"277\"><param name=\"movie\" value=\"http://www.youtube.com/v/VwE-twwP-_A?hl=en&hd=1\"><\/param><embed src=\"http://www.youtube.com/v/VwE-twwP-_A?hl=en&hd=1\" type=\"application/x-shockwave-flash\" width=\"448\" height=\"277\"><\/embed><\/object><\/div>";" src="http://lh6.ggpht.com/-hVhcjkH3DaQ/UvIBNMOn8EI/AAAAAAAAKLc/nQTO6P5PbKk/video50bf78b24d13%25255B2%25255D.jpg?imgmax=800" style="border-style: none"></a></div></div></div> Bu menüye blogunuza eklemek için öncelikle Blogger kumanda paneline girip Şablon > HTML’yi düzenle  diyerek şablonun kodlarını açın ve Ctrl + F kuş kombinasyonuyla açılan arama kutusunun yardımıyla ]]></b:skin> kodunu bulun. Bunun hemen üzerine aşağıdaki stil kodlarını yapıştırın.   <blockquote> /* BH Minimal Süper Menü Stil Kodları ----------------------------------------------- */ #itbnav { background:#F1921A; padding:0; height: 29px; font-size:12px; position: relative; border:1px dotted #000; } #itbnav .wrapnya, #nav .wrap, #headisi, #content-wrapper { margin:0 auto; width:98%; } #itbnav .tgltop { float:left; color:#E2E2E2; display:block; line-height:20px;margin-top: 4px; } .sf-menu, .sf-menu * { margin:0; padding:0; list-style:none; } .sf-menu li { position:relative; } .sf-menu ul { position:absolute; display:none; top:100%; left:0; z-index:99; } .sf-menu > li { float:left; margin:0 1px; } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display:block; } .sf-menu a { display:block; position:relative; } #menunav > li > a { font: normal normal 90% 'Open Sans', serif ,Sans-serif; line-height: 50px; text-transform: uppercase; font-weight: 600; height: 50px; } .sf-menu ul ul { top:0; left:100%; } .sf-menu { float:left; } .sf-menu ul { min-width:12em; *width:12em; } .sf-menu a { padding:0 10px; height:50px; line-height:50px; text-decoration:none; zoom:1; } .sf-menu a.home, .sf-menu > li > a.home.current { background-color:#007ABE; text-indent:-9999px; padding:0; width:50px; } .sf-menu a { color:#E6E6E6; font-size:11px; } #itbnav .sf-menu a { color:#fff; height: 29px; line-height: 29px; } .sf-menu li { white-space:nowrap; *white-space:normal; -moz-transition:background-color .2s; -webkit-transition:background-color .2s; transition:background-color .2s; position:relative; } .sf-menu ul li { background-color:#007ABE; margin:1px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #itbnav .sf-menu ul li, #itbnav .sf-menu ul ul li { background-color:#F1921A; } .sf-menu ul a { font-weight:normal; height:28px; line-height:28px; } #itbnav .sf-menu ul a { height:25px; line-height:25px; } .sf-menu ul a:hover { padding-left:12px; } .sf-menu ul ul li { background:#007ABE; margin:0 0 1px 2px; } .sf-menu li:hover > a, .sf-menu li.sfHover > a, .sf-menu > li > a.current { background-color:#000; -moz-transition:none; -webkit-transition:none; transition:none; color:#E6E6E6; } #itbnav .sf-menu li:hover > a, #itbnav .sf-menu li.sfHover > a, #itbnav .sf-menu > li > a.current { background-color:#679EC9; color:#E2E2E2; } .sf-arrows .sf-with-ul { padding-right:2em; *padding-right:1em; } .sf-arrows .sf-with-ul:after { content:''; position:absolute; top:50%; right:0.85em; margin-top:-2px; height:0; width:0; border:4px solid transparent; border-top-color:#E6E6E6; } #itbnav .sf-arrows .sf-with-ul:after  { border-top-color:#007ABE; } .sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after { border-top-color:#E6E6E6; } #itbnav .sf-arrows > li > .sf-with-ul:focus:after, #itbnav .sf-arrows > li:hover > .sf-with-ul:after, #itbnav .sf-arrows > .sfHover > .sf-with-ul:after { border-top-color:#E2E2E2; } .sf-arrows ul .sf-with-ul:after { margin-top:-4px; margin-right:-3px; border-color:transparent; border-left-color:#E6E6E6; } #itbnav .sf-arrows ul .sf-with-ul:after { border-left-color:#007ABE; } .sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after{ border-left-color:#E6E6E6; } #itbnav .sf-arrows ul li > .sf-with-ul:focus:after, #itbnav .sf-arrows ul li:hover > .sf-with-ul:after, #itbnav .sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color:#E2E2E2; } .sf-menu li > i { position:absolute; top: 3px; right: 3px; width: 27px; height: 22px; cursor:pointer; display:none; background-color:#c00000; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; outline:0; } .sf-menu li > i:after { content: '+'; color: #fff; font-size: 19px; position: absolute; left: 5px; top: -2px; } .sf-menu li > i.active:after { content:'-'; font-size:39px; top:-14px; } #itbnav .sf-menu li > i { width: 23px; height: 19px; top: 6px; } #itbnav .sf-menu li > i:after { top: -4px; left: 3px; } #itbnav .sf-menu li > i.active:after { top: -13px; font-size: 31px; left: 4px; } .sf-menu a.home:before, .sf-menu a.home:before, #searchnya button:before, #view a:before, .breadcrumbs .homex:before { text-indent: 0; } .sf-menu a.home:before { width: 30px; height: 30px; } .sf-menu a.home:before { content: "\f015"; top: 0; font-size: 29px; left: 11px; color: #FBFBFB; } #icon-socialmn { margin: 0; float: right; } #icon-socialmn li { float: left; } #icon-socialmn a { display: block; text-indent: -9999px; width: 26px; height: 29px; background-image: url(https://lh6.googleusercontent.com/-Gh7uFlI8fTM/Uuov_xtMqQI/AAAAAAAAKHk/rwDyLZbZN3Y/s575/beyaz-sosyal-ikonlar.png); background-repeat: no-repeat; -webkit-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -o-transition: background .2s ease-out; transition: background .2s ease-out; } #icon-socialmn .sotw a { background-position: 1px 2px; } #icon-socialmn .sofb a { background-position: -24px 2px; } #icon-socialmn .sogo a { background-position: -49px 2px; } #icon-socialmn .sorss a { background-position: -74px 2px; } #icon-socialmn .solinkn a { background-position: -99px 2px; } #icon-socialmn .sopint a { background-position: -150px 2px; } #icon-socialmn .sotw a:hover { background-color: #2DAAE1; } #icon-socialmn .sofb a:hover { background-color: #3C5B9B; } #icon-socialmn .sogo a:hover { background-color: #F63E28; } #icon-socialmn .sorss a:hover { background-color: #FA8C27; } #icon-socialmn .solinkn a:hover { background-color: #0173B2; } #icon-socialmn .sopint a:hover { background-color: #CB2027; } </blockquote>   Sıra HTMLkodlarını eklemeye geldi. HTML kodlarını ekleyeceğiniz yer ile ilgili şu bilgiyi vermek istiyorum: 1. Blogger’ın kendi temalarından birini kullanıyorsaız HTML kodlarını  <div class='tabs-outer'> kodnun hemen üstüne ekleyin. 2. Özel bir Blogger teması kullanıyorsanız HTML kodlarını <div id='content-wrapper'>  kodunun hemen altına ekleyin.   <blockquote>  <div id='itbnav'> <ul class='sf-menu' id='topmenunav'>   <li><a href='http://bloghocam.blogspot.com/'>Ana Sayfa</a></li>   <li><a href='http://bloghocam.blogspot.com/p/hakkmda.html'>Hakkımda</a></li>   <li><a href='http://bloghocam.blogspot.com/p/misafir-blogculuk.html'>Misafir Blogculuk</a></li>   <li><a href='http://bloghocam.blogspot.com/p/destek-ol.html'>Destek Ol</a></li>   <li><a href='http://bloghocam.blogspot.com/p/takip-et.html'>Takip Et</a></li>   <li><a href='http://bloghocam.blogspot.com/p/ne-dediler.html'>Ne Dediler?</a></li>   <li><a href='http://bloghocam.blogspot.com/p/arsiv.html'>Arşiv</a></li>   <li><a href='http://bloghocam.blogspot.com/p/galeri.html'>Reklam</a></li>   <li><a href='http://bloghocam.blogspot.com/p/iletisim.html'>İletişim</a></li>   <li><a href='#'>Menü</a>     <ul>      <li><a href='http://bloghocam.blogspot.com/2011/04/feedburner-kurulumu-ve-ayarlar.html'>Feedburner</a></li>       <li><a href='http://bloghocam.blogspot.com/2012/06/acemiler-icin-google-analytics-rehberi.html'>Google Analytics</a></li>       <li><a href='http://bloghocam.blogspot.com/2012/08/herkesin-bir-gravatar-olsun.html'>Gravatar</a></li>       <li><a href='http://bloghocam.blogspot.com/2013/09/paypal-nedir-bloggerlar-icin-neden.html'>Paypal</a></li>     </ul>   </li>   </ul> <ul class='sociico' id='icon-socialmn'>   <li class='sotw'><a href='https://twitter.com/BlogHocam' target='_blank'>twitter</a></li>   <li class='sofb'><a href='http://www.facebook.com/bloghocam' target='_blank'>facebook</a></li>   <li class='sogo'><a href='http://www.google.com/+BloghocamBlogspot' target='_blank'>google</a></li>   <li class='sorss'><a href='http://feeds.feedburner.com/bloghocam' target='_blank'>rss</a></li>   <li class='solinkn'><a href='http://linkedin.com' target='_blank'>linkedin</a></li>   <li class='sopint'><a href='http://pinterest.com/bloghocam' target='_blank'>pinterest</a></li> </ul> </div> </blockquote>   HTML kodlarında menü öğelerini kendinize göre düzenleyeblir, istemediğiniz öğelere ait kod satırını silerek menüden kaldırabilirsiniz.

Minimal Süper Menü

Blogger için menü alternatiflerine “minimal süper menü” isminde yeni bir menü daha ekleyelim. Son zamanlarda dağıtılan Blogger temalarında ...

Devamı »

Twitter Kuşu” Larry” Eklentisi

Blog ile Twitter entegrasyonunu sağlamak için klasik ve standart butonlar ya da <a title="Blogger için Twitter eklentileri" href="http://bloghocam.blogspot.com/2014/01/twitterblog-entegrasyonu-icin-twitter.html" target="_blank">eklentiler</a> hem Blog Hocam’da hem de webde pek çok defa paylaşıldı. Fakat bu kez paylaşacağım Twitter takip et butonu eklentisi, daha önce muhtemelen görmediğiniz çok farklı özelliklere sahip. <a href="http://lh6.ggpht.com/-b9S0oboX2vI/Utz4iMhhXfI/AAAAAAAAKBY/eEHQKDQxNKc/s1600-h/twitter-takip-et11.png" target="_blank"><img alt="Twitter takip et butonu" border="0" height="52" src="http://lh6.ggpht.com/-yTZMTnDBOEU/Utz4ixx20UI/AAAAAAAAKBg/P1A0NIdc13w/twitter-takip-et_thumb9.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Twitter takip et butonu" width="202" /></a>   Eklentiyi blogunuza eklediğinizde sağ üst köşede küçük bir Twitter kuşu ikonu belirecek. Bu Twitter kuşu ikonu “floating” yani yüzen özellikte. Sayfayı aşağı yukarı kaydırdığınızda dahi ikonun yeri değişmiyor.   Bu eklentiyi farklı kılan özellik elbette sabit olması değil. Asıl farkı ikonun üzerine geldiğinizde göreceksiniz. Aşağıdaki demo videoda da göreceğiniz gibi Twitter kuşu ikonunun üzerine geldindiğinde Twitter takip et butonu açılıyor ve sevimli Twitter kuşu “Larrry” kanat çırpmaya başlıyor.   <div id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:673058cc-1554-44e6-a138-20212a2a2893" class="wlWriterEditableSmartContent" style="width: 448px; float: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px auto; display: block; padding-right: 0px"><div id="7dd16e7c-115a-40e6-924e-1835a50b2739" style="margin: 0px; padding: 0px; display: inline;"><div><a href="http://www.youtube.com/watch?v=oV6f2VW0lXU" target="_new"><img alt="" galleryimg="no" onload="var downlevelDiv = document.getElementById('7dd16e7c-115a-40e6-924e-1835a50b2739'); downlevelDiv.innerHTML = "<div><object width=\"448\" height=\"277\"><param name=\"movie\" value=\"http://www.youtube.com/v/oV6f2VW0lXU?hl=en&hd=1\"><\/param><embed src=\"http://www.youtube.com/v/oV6f2VW0lXU?hl=en&hd=1\" type=\"application/x-shockwave-flash\" width=\"448\" height=\"277\"><\/embed><\/object><\/div>";" src="http://lh4.ggpht.com/-FF4B0tiPNEU/Utz4jZtqmQI/AAAAAAAAKBo/9bBlFXDI-_Q/videoc7ce2ced7281%25255B2%25255D.jpg?imgmax=800" style="border-style: none"></a></div></div></div> Bu tür animasyonlar için genellikle özel scriptler kullanıldığı için sayfayı oldukça yavaşlatır ama bu eklenti CSS sprite ve @keyframes teknikleriyle oluştrulduğu için oldukça hızlı ve sorunsuz.   Eklentiyi blogunuza eklemek için Blogger kumanda paneline giriş yaptıktan sonra Şablon > HTML’yi Düzenle yolunu takip ederek Ctrl + F tuş kombinasyonunun yardımıyla </body> kodunu bulun ve hemen üzerine aşağıdaki kodları ekleyin.   <blockquote> <style> .takip-wrapper {   height: 44px;   overflow: hidden;   position: fixed;   top: 0;   width: 100%; } .takip-buton { background-image: url(https://dl.dropboxusercontent.com/u/60346665/twitter-bird-sprite-BH.png); background-repeat: no-repeat; background-position: 0 0; cursor: pointer; display: block; padding: 7px 0 7px 40px; position: absolute; right: -168px; top: 5px; -webkit-transition: right 0.3s; -moz-transition: right 0.3s; transition: right 0.3s; width: 168px; } .takip-buton:hover {-webkit-animation: fly 0.2s steps(4) 0 10; -moz-animation: fly 0.2s steps(4) 0 10; animation: fly 0.2s steps(4) 0 10; right: 0; } @-webkit-keyframes fly {   from {     background-position: 0 0;   }   to {     background-position: 0 -140px;   } } @-moz-keyframes fly {   from {     background-position: 0 0;   }   to {     background-position: 0 -140px;   } } @keyframes fly {   from {     background-position: 0 0;   }   to {     background-position: 0 -140px;   } }     </style> <div class='takip-wrapper'>   <div class='takip-buton'>     <a class='twitter-follow-button' data-show-count='false' href='https://twitter.com/bloghocam'>@BlogHocam 'ı takip et</a>     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>   </div> </div> </blockquote>   Kodlarda kırmızı renkle gösterdiğim yerlere kendi Twitter kullanıcı adınızı yazmanız yeterli. Bunun dışında bir değişikliğe gerek yok.

Twitter Kuşu” Larry” Eklentisi

Blog ile Twitter entegrasyonunu sağlamak için klasik ve standart butonlar ya da eklentiler hem Blog Hocam’da hem de webde pek çok defa payl...

Devamı »

Hover Efektli Şık Bir Ribbon Menü

Blog tasarımlarının en çok aranan ve en çok üzerinde durulan öğelerinden biri blog kayıtlarının üst tarafına eklenen yatay link menüleri sanırım. <a title="Blogger’a yatay menü ekleme" href="http://bloghocam.blogspot.com/2011/10/bloggera-yatay-link-menusu-ekleme.html" target="_blank">Blogger’a yatay menü ekleme</a> olayı hem Google’da çok aranıyor, hem de benden çok isteniyor.   Bugüne kadar bazı yatay menü kodları paylaşsam da şıklığa ve tasarıma özen gösteren bloggerlar benden ribbon menü paylaşmamı istemişlerdi. Ben de blog kayıtlarının üst tarafına ekleyebileceğiniz, şık ve hover efekti sayesinde üzerine gelindiğine hareket eden harika bir ribbon menü buldum.   <a href="http://lh6.ggpht.com/-0jRLRv-1bkk/UtO5CyODysI/AAAAAAAAJ9A/XpB0kkQfOGU/s1600-h/ribbon-menu9.png" target="_blank"><img alt="ribbon menu" border="0" height="275" src="http://lh4.ggpht.com/-z4RdmUtzLxc/UtO5DgJ-8VI/AAAAAAAAJ9I/KQw_NsNDBIE/ribbon-menu_thumb7.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="ribbon menu" width="527" /></a>   Menüyü Blogger’a eklemek için kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleyin ve aşağıdaki kodları yapıştırın.   <blockquote> <style> /* Blog Hocam Animasyonlu Ribbon Menü */ .bhribbon span {     background:#F1921A;     display:inline-block;     line-height:3em;     padding:0 1em;     margin-top:0.5em;     position:relative;       -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */     -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */     -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */     -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */     transition: background-color 0.2s, margin-top 0.2s; } .bhribbon a span { color:#000;} .bhribbon a:hover span {     background:#669900;     margin-top:0;} .bhribbon span:before {     content: "";     position:absolute;     top:3em;     left:0;     border-right:0.5em solid #F1921A;     border-bottom:0.5em solid #fff;} .bhribbon span:after {     content: "";     position:absolute;     top:3em;     right:0;     border-left:0.5em solid #F1921A;     border-bottom:0.5em solid #fff;} .bhribbon a:link, .bhribbon a:visited {     color:#000;     text-decoration:none;     float:left;     height:3.5em;     overflow:hidden; } .bhribbon:after, .bhribbon:before {     margin-top:0.5em;     content: "";     float:left;    border: 1.5em solid #F1921A;} .bhribbon:after {     border-right-color:transparent;} .bhribbon:before {     border-left-color:transparent;} </style> <div class='bhribbon'>     <a href='http://bloghocam.blogspot.com/'>Ana Sayfa</a>     <a href='http://bloghocam.blogspot.com/p/hakkmda.html'>Hakkımda</a>     <a href='http://bloghocam.blogspot.com/p/misafir-blogculuk.html'>Misafir Blogculuk</a>     <a href='http://bloghocam.blogspot.com/p/destek-ol.html'>Destek Ol</a>     <a href='http://bloghocam.blogspot.com/p/takip-et.html'>Takip Et</a>     <a href='http://bloghocam.blogspot.com/p/ne-dediler.html'>Ne Dediler?</a>     <a href='http://bloghocam.blogspot.com/p/arsiv.html'>Arşiv</a>     <a href='http://bloghocam.blogspot.com/p/galeri.html'>Reklam</a>     <a href='http://bloghocam.blogspot.com/p/iletisim.html'>İletişim</a> </div> </blockquote>   Değiştirmeniz gereken yerler son bölümdeki menü öğelerine ait bağlantılar. Ben bu menüye Blog Hocam’a ait statik sayfaların linklerini ekledim ama siz isterseniz başka türlü de değerlendireblirsiniz.   Örneğin bir arkadaşınıza ya da diğer sitenize link vermek sterseniz oraya şu satırı ekleyebilirsiniz:   <blockquote> <a href='http://siteadresi.com'>Site</a> </blockquote>   Veya belli bir etikete ait yazılarınızın listelenmesini sağlayablirsiniz. Örneğin Blog Hocam’da SEO etiketli yazılara link vermek için şu satırı ekleyebilirim:   <blockquote> <a href=' http://bloghocam.blogspot.com/search/label/SEO'>SEO</a> </blockquote>   Ya da belli bir yazıya link vermek isteyebilirim. Örneğin Bumerang’ı tanıttığım <a title="Bumerang Network" href="http://bloghocam.blogspot.com/2013/10/her-yonuyle-bumerang-network.html" target="_blank">Her Yönüyle Bumerang Network</a> başlıklı yazıma bu menüde yer vermek istersem şu satırı ekleyebilirim:   <blockquote> <a href='http://bloghocam.blogspot.com/2013/10/her-yonuyle-bumerang-network.html'>Bumerang</a> </blockquote>   Ben menüyü Blog Hocam’ın tasarımına uygun şekilde renklendirdiğim için her blog uygun olmayabilir. Bu yüzden son olarak da renkleri nasıl değiştireceğinizden bahsedeyim.   Tmel olarak 2 renk kullandım. Bunlardan ilki turuncu renkte gördüğünüz zemin rengi. Bu rengin kodu #F1921A Kodlarda bu renk kodunu gördüğünüz yere kendi istediğiniz rengin kodunu koyarsanız menünün zemin rengi değişecektir.   Kullandığım diğer renk ise menünün üzerine geldiğinde öne çıkan öğenin dönüştüğü renk olan yeşil. Bu rengin kodu ise #669900 Kodlarda bu renk kodunu gördüğünüz yere kendi istediğiniz rengin kodunu koyarsanız hover efekti ile oluşan renk değişecektir.   <div id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:53c0ef0f-5f97-4e51-bb45-26d7668a179e" class="wlWriterEditableSmartContent" style="width: 448px; float: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px auto; display: block; padding-right: 0px"><div id="2f75c235-31b1-4024-a21f-863336d07c46" style="margin: 0px; padding: 0px; display: inline;"><div><a href="http://www.youtube.com/watch?v=gM7avtc35QA" target="_new"><img alt="" galleryimg="no" onload="var downlevelDiv = document.getElementById('2f75c235-31b1-4024-a21f-863336d07c46'); downlevelDiv.innerHTML = "<div><object width=\"448\" height=\"277\"><param name=\"movie\" value=\"http://www.youtube.com/v/gM7avtc35QA?hl=en&hd=1\"><\/param><embed src=\"http://www.youtube.com/v/gM7avtc35QA?hl=en&hd=1\" type=\"application/x-shockwave-flash\" width=\"448\" height=\"277\"><\/embed><\/object><\/div>";" src="http://lh5.ggpht.com/-JHrAsNy_JDE/UtO5EMNREgI/AAAAAAAAJ9M/cpoKMrQGsaA/videobbfdeadbdf34%25255B3%25255D.jpg?imgmax=800" style="border-style: none"></a></div></div></div>   Sanırım yeterince açıklayıcı oldu :) Eğer kafanıza takılan bir şey olursa yorum bölümünden sorabilirsiniz.

Hover Efektli Şık Bir Ribbon Menü

Blog tasarımlarının en çok aranan ve en çok üzerinde durulan öğelerinden biri blog kayıtlarının üst tarafına eklenen yatay link menüleri san...

Devamı »

Twitter–Blog Entegrasyonu İçin Twitter Bileşenleri

Çağın popüler sosyal paylaşım plaformu olan Twitter’a ait “takipçi kutusu” veya “son tweetler” gibi eklentiler blogların vazgeçilmeziydi. Fakat Twitter kendi bileşenlerini kullanıma sunduktan sonra hariçten kullandığımız bu eklentiler kullanılmaz duuruma geldi. Ben de bu yazıda Twitter’ın kullanıcılarına sunduğu tüm bileşenleri tanıtmak istedim. İstediklerini blogunuza ekleyerek blog-Twitter entegrasyonunu sağlayabilirsiniz.   <a href="http://lh3.ggpht.com/-0WJyQ-eJLIg/Us0zYfp4L_I/AAAAAAAAJ8Q/HbsfKYyXTcQ/s1600-h/twitter6.jpg" target="_blank"><img alt="twitter" border="0" height="348" src="http://lh6.ggpht.com/-PonpFxGfyWE/Us0zY_R1ylI/AAAAAAAAJ8Y/cU2meuL4Hw8/twitter_thumb4.jpg?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="twitter" width="545" /></a>     Zaman Akışı Bileşeni   Ayarlar > Bileşenler > Yeni Oluştur > Kullanıcı Zaman Akışı Twitter sayfanızdaki son hareketleri blogunuzda göstermenizi sağlayan bileşendir. Kendi yazdığınız ve retweetlediğiniz tweetler bu kutuda görünür. Yanıtladığınız tweetler ile tweetle birlikte paylaşıılan fotoğrafın gösterilip gösterilmeyeceği sizin tercihinize bırakılmıştır.Ayrıca kutunun genişliğini, linklerin rengini ve zemin rengini değiştirebilirsiniz.   <a class="twitter-timeline" href="https://twitter.com/BlogHocam" data-widget-id="416534656230510592">@BlogHocam kullanıcısından Tweetler</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>   Favoriler Bileşeni Ayrlar > Bileşenler > Yeni Oluştur > Favoriler Yazdığınız veya retweetlediğiniz tüm tweetleri değil de seçtiğiniz veya beğendiğiniz tweetleri blogunuzda paylaşmak isterseniz favoriler bileşenini kullanabilirsiniz. Favorilere eklediğiniz tweetleri blogunuza embed edebilirsiniz. Benim favorilerimde tweet olmadığı için başka bir hesabın favorilerini örnek göstermek istiyorum.   <a class="twitter-timeline" href="https://twitter.com/saygigunenc/favorites" data-widget-id="416536388616466434">@saygigunenc kullanıcısından Favori Tweetler</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>   Hashtag Bileşeni Ayrlar > Bileşenler > Yeni Oluştur > Ara Belli bir hashtag veya anahtar kelime ilgili yazılmış tweetlerden oluşan bileşendir. Diğer bileşenlerde olduğu gibi genişlik ve renk seçeneklerinin yanı sıra sadece popüler tweetlerin göterilmesini de seçebilirsiniz. Örnek olarak blog yazarlığı ile ilgili bilgi, ipucu, duyuru, haber gibi şeylerin paylaşıldığı <a href="https://twitter.com/search?q=%23blogyazarl%C4%B1%C4%9F%C4%B1&src=hash&f=realtime" target="_blank">#blogyazarlığı</a> hashtagine ait bileşeni vermek istiyorum.   <a class="twitter-timeline" href="https://twitter.com/search?q=%23BlogYazarl%C4%B1%C4%9F%C4%B1" data-widget-id="387984783789129728">"#BlogYazarlığı" hakkında Tweetler</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>   Ayrıca listeler ve özel zaman akışı bileşenlerini de  benzer şekilde oluşturup blogunuza ekleyebilirsiniz ama ben bu özellikleri kullanmadığım için örnek veremiyorum ne yazık ki.     Tweetle Butonu   Butonu eklediğiniz sayfayı, sayfanın linki ve başlığıyla Twitter’da paylaşmanızı sağlayan klasik buton. Tweetle butonunun kodları:   <blockquote> <a href="https://twitter.com/share" class="twitter-share-button" data-via="BlogHocam" data-lang="tr">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </blockquote>   Kırmızı renkle yazdığım yere kendi Twitter kullanıcı adınızı yazın. Örnek buton:   <a class="twitter-share-button" href="https://twitter.com/share" data-via="BlogHocam" data-lang="tr">Tweet</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>   Takip Et Butonu   Twitter’da sizi takip etmelerini kolaylaştırmak için kullanabileceğiniz buton. Butonu eklmeniz için gereken kodlar:   <blockquote> <a href="https://twitter.com/BlogHocam" class="twitter-follow-button" data-show-count="false" data-lang="tr">Takip et: @BlogHocam</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </blockquote>   Yine kırmızı renkle gösterdiğim yerlere kendi Twitter kullanıcı adınızı yazmalısınız. Örnek buton:   <a class="twitter-follow-button" href="https://twitter.com/BlogHocam" data-lang="tr" data-show-count="false">Takip et: @BlogHocam</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>   Hashtag Butonu   Bu butona tıkladığınızda belirlediğiniz hashtagin olduğu bir tweet penceresi açılır ve bu hashtagla tweet yazılmasını kolaylaştırır. Butonun kodları:   <blockquote> <a href="https://twitter.com/intent/tweet?button_hashtag=blogyazarlığı" class="twitter-hashtag-button" data-lang="tr">Tweet #blogyazarlığı</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </blockquote>   Kodlarda kırmızı renkli yerlere başka bir hashtag yazabilirsiniz. Örnek buton:   <a class="twitter-hashtag-button" href="https://twitter.com/intent/tweet?button_hashtag=blogyazarlığı" data-lang="tr">Tweet #blogyazarlığı</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>   Mention Butonu   Birinin sizden bahsederek tweet göndermesini salayan butondur. Butonu eklemeniz için gerekli kodlar:   <blockquote> <a href="https://twitter.com/intent/tweet?screen_name=BlogHocam" class="twitter-mention-button" data-lang="tr">Tweet to @BlogHocam</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> </blockquote>   Yine kırmızı renkli yerlere kendi Twitter kullanıcı adınızı yazın. Örnek buton:   <a class="twitter-mention-button" href="https://twitter.com/intent/tweet?screen_name=BlogHocam" data-lang="tr">Tweet to @BlogHocam</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>     Twitter Kullanan Blog Yazarlarının Dikkatine…   Twitter’da Blog Hocam için açmış olduğum hesap olan <a href="https://twitter.com/BlogHocam" target="_blank">@Blog Hocam</a> hesabını takip etmenizi öneriyorum. Bu hesapta sadece Blog Hocam’da yaynlanan yazılarını değil, blog dünyası, sosyal medya, SEO, dijital pazarlama ve kişisel gelişim ile ilgili bilgiler, haberler, öneriler ve linkler paylaşıyorum. Ayrıca…   Yukarıdaki bileşen ve butonlarda gördüğünüz <a href="https://twitter.com/search?q=%23blogyazarl%C4%B1%C4%9F%C4%B1&src=hash&f=realtime" target="_blank">#blogyazarlığı</a> etiketi bana, Blog Hocam’a veya başka birine ait değildir. Her blog yazarı bu etiketi kullanarak önerilerini, sorunlarını, denetyimlerini paylaşsın lütfen.

Twitter–Blog Entegrasyonu İçin Twitter Bileşenleri

Çağın popüler sosyal paylaşım plaformu olan Twitter’a ait “takipçi kutusu” veya “son tweetler” gibi eklentiler blogların vazgeçilmeziydi. Fa...

Devamı »

Blogger Yıldızlı Oy Verme Eklentisi

Blogger kullanıcıları tarafından en çok aranan ve istenen eklentilerden biri yıldızlı oy verme eklentisi. Bu konuda daha önce paylaştığım <a href="http://bloghocam.blogspot.com/2012/01/blogger-yazlara-oy-verme-eklentisi.html" target="_blank">eklenti</a> Javascript kodunun yapımcı hostundan kaldırılması nedeniyle çalışmıyordu. Ben de daha profesyonel olması için üçüncü parti uygulamalarında arayışa girdim ve işinize yarayacak güzel bir yıldızlı oy verme eklentisi buldum. Aslında bu eklentiye yıldızlı oy verme eklentisi yerine yazı değerlendirme eklentisi demek daha doğru olur. Çünkü eklentiyi isterseniz yıldızlı, isterseniz de olumlu/olumsuz oy verme şeklinde kullanabiliyorsunuz. Şimdi adım adım bu eklentiyi oluşturmaya ve bloga eklemeye geçelim. 1. Adım: Rating Widget isimli bu ekletiyi kullanabilmeniz için öncelikle üye olmanız gerekiyor. Bu yüzden öncelikle <a href="http://rating-widget.com/get/rating/" rel="nofollow" target="_blank">widget oluşturma</a> sayfasına giderek Create account butonuna basın. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQxqRGi_R-iZBR_Fq9LY3eDi0_KbRS4WrdyT2OhgKKXTicwkZti7ByTvl_co_kaS-XBrgEf7GiBC84ddcpnXzV0C2nfpN1gIn8wIyBSv4thSid4GmjeWYr0Y7uP9qbADiLlh2SAoRYyzj2/s1600-h/oy-ver-hesap5.png" target="_blank"><img alt="Rating Widget üye ol" border="0" height="317" src="http://lh6.ggpht.com/-QhNfRu2yZ9E/UsqGhuGN1DI/AAAAAAAAJ68/EiUA7cVJXZo/oy-ver-hesap_thumb3.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Rating Widget üye ol" width="427" /></a> Burada e-mail adresinizle bir hesap oluşturabileceğiniz gibi Facebook, Google veya LİnkedIn hesaplarınıza bağlanarak kısa yoldan hesap oluşturabilirsiniz. 2. Adım: Hesabınıza giriş yaptıktan sonra işe eklentinin stilini belirleyerek başlayabiliriz. Yıldızlı veya +/- oy verme stillerinden birini seçtikten yatay mı yoksa dikey mi kullanmak istediğimizi belirleyebiliyoruz. <a href="http://lh6.ggpht.com/-EpIELSiCpXM/UsqGiM_THWI/AAAAAAAAJ7E/57Mh-gnqAos/s1600-h/oy-verme-stil11.png" target="_blank"><img alt="Rating widget stiller" border="0" height="388" src="http://lh5.ggpht.com/-fHOeURuJdPY/UsqGi9_rNCI/AAAAAAAAJ7M/ZULT3pr-iLQ/oy-verme-stil_thumb7.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Rating widget stiller" width="227" /></a> Seçtiğiniz stilin örnek görüntüsünü yandaki Live Preview yazan bölümde anlık olarak görebilirsiniz. Stile karar verdikten sonra yıldızların şekli, rengi, boyutu, yazı tipi ve boyutu, yıldızların sayısı gibi özellikleri seçtikten sonra sağ tarafta oluşan kodu kopyalıyoruz. 3. Adım: Blogger kumanda panelinize giriş yaptıktan sonra Şablon > HTML’yi düzenle yolunu takip edin ve Ctrl + F tuş kombinasyonunun yardımıyla arama kutusunu açarak </body> kodunu bulun. Kopyaladığınız kodları bunun üzerine yapıştırın.   Ardından <div class='post-footer'> kodunu bulun (Bu koddan şablonda birden fazla olabilir.İkincisi sizin için önemli. ) ve hemen üzerine şu kodu ekleyin.   <blockquote> <div class="rw-ui-container"></div> </blockquote>   Şablonda ön izleme yapığınızda yazının en altında yıldızlı oy verme eklentisinin gözükmesi gerekliyor. Şablonu kaydedebilirsiniz. <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVMY1YeCQC6Fkd5SV1YI3aXjC8Ekuk3QhFVrqPSOoIxK2-6jvfynRp42NgAZO21D8KshH6OR2PVOWc3ZTz-he5ZESRP04u0HsYs3OYoP1KOkzE3OZOSkQAtZZo3bF7NpU1-PSdeRGuPc0n/s1600-h/yildizli-oy-verme-eklemtisi5.png" target="_blank"><img alt="Yıldızlı oy verme eklentisi" border="0" height="168" src="http://lh3.ggpht.com/-LY_sMs8dc70/UsqGj45xyoI/AAAAAAAAJ7c/CkcOMIQEmWc/yildizli-oy-verme-eklemtisi_thumb3.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Yıldızlı oy verme eklentisi" width="527" /></a>   İpucu-1: Eğer eklenti ile yazınız arasında hiç boşluk yoksa eklediğiniz ikinci kodun önüne kodunu ekleyebilirsiniz.   İpucu-2: Eklentinin ana sayfada deil de yazı başlığına tıklayıp yazının içine girildiğinde görünmeini istiyorsanız ikinci kodu şu şekilde değiştirin:   <blockquote> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class="rw-ui-container"></div> </b:if> </blockquote>   Açık ve net bir şekilde anlatmaya çalıştım ama bir sorunuz olursa yorum bölümünden sorabilirsiniz.

Blogger Yıldızlı Oy Verme Eklentisi

Blogger kullanıcıları tarafından en çok aranan ve istenen eklentilerden biri yıldızlı oy verme eklentisi. Bu konuda daha önce paylaştığım ek...

Devamı »

Sabit Soldan Açılan Sosyal Menü

Blogunuzun veya şahsınızın  Facebook, Twitter, Google+ ve Pinterest hesapları ile blog yazılarınızın beslemelerinin yer aldığı RSS adresinize ait sosyal medya butonlarının yer aldığı başka bir eklenti daha paylaşmak istiyorum.   <a href="http://lh3.ggpht.com/-BqHM9rCWqJE/UmUDEjCbgvI/AAAAAAAAJf0/vD8aMoZZdvo/s1600-h/floating-sosyal-menu6.png" target="_blank"><img alt="Sabit Soldan Açılan Sosyal Menü" border="0" height="222" src="http://lh5.ggpht.com/-9d00QkjjsHw/UmUDFGdPekI/AAAAAAAAJf4/HEDwneng7pY/floating-sosyal-menu_thumb4.png?imgmax=800" style="border-left-width: 0px; border-right-width: 0px; background-image: none; border-bottom-width: 0px; float: none; padding-top: 0px; padding-left: 0px; margin-left: auto; display: block; padding-right: 0px; border-top-width: 0px; margin-right: auto" title="Sabit Soldan Açılan Sosyal Menü" width="427" /></a>  Bu eklentide pek çok özellik bir arada. Bu eklenti sadece takipçi sayıınzı arttırmakla kalmayacak, aynı zamanda blogunuzu görsel açıdan da zenginleştirecek. Bu sosyal menü eklentisi floating yani yüzen olduğu için sayfa aşağı ya da yukarı kaydırılsa bile menünün pozisyonu sabit kalacaktır. Sayfada sadece sosyal kanalların isimleri gözükürken, menünün üzerine gelindiğinde animasyon efektiyle birlikte açılacak ve tıklayan kişiyi ilgili sosyal kanala yönlendirecektir.   Eklentinin nasıl çalıştığını görmek için aşağıdaki demo videoyu izleyebilirsiniz.   <div id="scid:5737277B-5D6D-4f48-ABFC-DD9C333F4C5D:281b4bba-28fc-4712-8ffd-0ad8d0aaf4d0" class="wlWriterEditableSmartContent" style="float: none; padding-bottom: 0px; padding-top: 0px; padding-left: 0px; margin: 0px auto; display: block; padding-right: 0px; width: 448px"><div id="6fe68b88-8793-4fba-b4d4-0ba0ba0140c8" style="margin: 0px; padding: 0px; display: inline;"><div><a href="http://www.youtube.com/watch?v=LNrDh_RcxBc" target="_new"><img alt="" galleryimg="no" onload="var downlevelDiv = document.getElementById('6fe68b88-8793-4fba-b4d4-0ba0ba0140c8'); downlevelDiv.innerHTML = "<div><object width=\"448\" height=\"277\"><param name=\"movie\" value=\"http://www.youtube.com/v/LNrDh_RcxBc?hl=en&hd=1\"><\/param><embed src=\"http://www.youtube.com/v/LNrDh_RcxBc?hl=en&hd=1\" type=\"application/x-shockwave-flash\" width=\"448\" height=\"277\"><\/embed><\/object><\/div>";" src="http://lh3.ggpht.com/-tz9xIZFt74A/UmUDFtRf-aI/AAAAAAAAJgU/I6ySLQfszKI/video90d16f7b617c%25255B8%25255D.jpg?imgmax=800" style="border-style: none"></a></div></div></div>   Sosyal menü eklentisini blogunzda kullanmak isterseniz aşağıdaki kodları kendinize göre düzenledikten sonra Blogger kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek eklemeniz yeterli.   <blockquote>  <style type="text/css"> ul#sosyal {     position: fixed;     margin: 0px;     padding: 0px;     top: 20%;     left: 0px;     list-style: none;     z-index:9999; } ul#sosyal li {     width: 100px; } ul#sosyal li a {     display: block;     margin-left: -2px;     width: 100px;     height: 70px;        background-color:#fff;     background-repeat:no-repeat;     background-position:center center;     border:1px solid #AFAFAF;     -moz-border-radius:0px 10px 10px 0px;     -webkit-border-bottom-right-radius: 10px;     -webkit-border-top-right-radius: 10px;     -khtml-border-bottom-right-radius: 10px;     -khtml-border-top-right-radius: 10px;     -moz-box-shadow: 0px 4px 3px #000;     -webkit-box-shadow: 0px 4px 3px #000; } ul#sosyal .twitter a{      background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ90FzZo-p3Lm1K_u4S7IZfkPbBOYkx2H73F0A8lzbSOkbFUlSpOsflRTTzXWS__5gRwJPEVIn9KeywRlIvMMgg4GLzKknzCmI1foLonjuPcJ_wL6tPMr0Ayw5V4UrgKqKlPNzLIk8leE/s1600/Twitter.png)no-repeat; background-position:center center; } ul#sosyal .googleplus a      {     background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_dRsSV6LywYgspcDy3o9mE8cBHKzAfosqrqA-pheVI2Wb8Rhbt5a4Y0rCTNADXaDRn5QtoKlA9MNI9xmqFMrx_QAFpoDmzdKnc-dCOipN7p7QkR8b-fQRG1mTFuhOwvc74jBuJFSQOu4/s1600/GOOGLE+PLus.png)no-repeat; background-position:center center; } ul#sosyal .facebook a      {     background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjNh1tKK7ZOa-7FsBI6kkd0RecGYGJSMpH0WvYbsNvUCVJvqUkkEGy-kk5qrCiNSeCZMu4izKmKQk3VpREKH3g8m-Qfew3CDvsgfBM4hH8bF1O5dyJwFd5AfbqUaEFEkSGtxFW0RFfNr8/s1600/Facebook.png)no-repeat; background-position:center center; } ul#sosyal .rss a      {     background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4LtmYX_UJ-4GUZe1Gl86vwJDWlG_98YBxNt0Xuc7nDuxGOraro-zmAqGMlHMY_2mOD7q0xeMEyh7WKnwrU443zfrD9xoYtqy9SMF5u2Ztwhk60xy_nVLh6lv3j-5WxKpOHqk7ZHnoNj0/s1600/rss.png)no-repeat; background-position:center center; }   ul#sosyal .pinterest a   {     background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6uS6WNQds4x_HDnXYFrQiOZsaYmJG5_yuAhNqif_ARPG9G9KlLVf6Lq6ckWvg8UEuakxLU0T7bGVU9rgzWfwTKulDm8qLlJkLqnWAfULykwwgthjGSH5zIY5-dkDPEoeowvvBW-ML5k4/s1600/Pinterest.png)no-repeat; background-position:center center; } </style>   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>   <script type="text/javascript"> $(function () {     $('#sosyal a').stop().animate({         'marginLeft': '-85px'     }, 1000);       $('#sosyal > li').hover(         function () {             $('a', $(this)).stop().animate({                 'marginLeft': '-2px'             }, 200);         },         function () {             $('a', $(this)).stop().animate({                 'marginLeft': '-85px'             }, 200);         }     ); }); </script> <ul id="sosyal"> <li class="twitter"><a href="http://twitter.com/bloghocam" title="Twitter"></a></li> <li class="googleplus"><a href="http://gplus.to/bloghocam" title="Google Plus"></a></li> <li class="facebook"><a href="http://facebook.com/bloghocam" title="Facebook"></a></li> <li class="rss"><a href="http://feeds.feedburner.com/bloghocam" title="Rss"></a></li> <li class="pinterest"><a href="http://pinterest.com/bloghocam" title="Pinterest"></a></li> </ul> </blockquote>   Kırmızı renkle gösterdiğim yerlerde ilgili sosyal kanallara ait Blog Hocam’ın adresleri yazıyor. Oralara endi hesap adreslerinizi yazmayın unutmayın. Onların dışında değiştirmeniz gereken başka bir yer yok.

Sabit Soldan Açılan Sosyal Menü

Blogunuzun veya şahsınızın Facebook, Twitter, Google+ ve Pinterest hesapları ile blog yazılarınızın beslemelerinin yer aldığı RSS adresiniz...

Devamı »

Genel Blog - Her Türlü Paylaşım | İndir

Blogger Üst Çubuk Eklentisi

Blogger Resimlere Zoom Efekti Verme

Blogger Part Sistemi Kodu

Blogger Devamını Oku Eklentisi

Blogger Manşet alanı oluşturma

Hazır Sosyal Paylaşım Eklentileri

Minimal Süper Menü

Twitter Kuşu” Larry” Eklentisi

Hover Efektli Şık Bir Ribbon Menü

Twitter–Blog Entegrasyonu İçin Twitter Bileşenleri

Blogger Yıldızlı Oy Verme Eklentisi

Sabit Soldan Açılan Sosyal Menü

Popüler

Yorumlar

Blog Arşivi