Blogunuzu Kullanışlı Yapacak 5 Süper Eklenti

Merhaba uzun bir aradan sonra tekrar yazmaya başladım Harunlog ile uzun süredir ilgilenemiyorum sebebi ise okul ve yoğun bir çalışma hayatında olmam fakat geçenlerde kafama dank etti ve bir daha yazmaya başlamalıyım dedim.Peki bugün ne yazacaksın derseniz size 5 adet eklenti tanıtıcam.Bu eklentiler blogunuzu daha kullanışlı hale getirecektir blogger eklentileri arasından 5 adet seçtim ve bu 5 adet blogger eklentisi çok kullanışlı ve ihtiyacınız olanlardandır.



  Blogger Sade Arama Kutusu Eklentisi :

Blogunuza fazlamı karışık o halde bir arama kutusuna ihtiyacınız var.Size sade bir arama kutusu sunuyorum bu arama kutusu sitenizde kalma oranını fazlasıyla etkileyecektir.Blogger eklentileri arasından en temel ihtiyaç diyebilirim.Her blogun bir arama kutusu olmalımıdır derseniz bence olmalıdır size aşağıda vereceğim kod ile arama kutusu eklentisini blogunuza ekleyebilirsiniz.

Kodu Nasıl Eklerim :

 Yerleşim > Gadget Ekle >HTML/JavaScript yolunu takip edip kodu yapıştır diyeceksiniz.Resimde nasıl yapılacağı anlatılmış resme bakarak yapabilirsiniz.Ve blogger eklentisi eklenmiş olacak.


<style> input.gsc-input { border:1px solid #d9d9d9;border-top:1px solid #c0c0c0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;height:28px;padding-left:4px;padding-right:4px;vertical-align:top;width:80% } input.gsc-input:hover { border:1px solid #b9b9b9;border-top:1px solid #a0a0a0;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);-ms-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);box-shadow:inset 0 1px 2px rgba(0,0,0,.1) } input.gsc-input:focus { border:1px solid #4d90fe;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);-ms-box-shadow:inset 0 1px 2px rgba(0,0,0,.3);box-shadow:inset 0 1px 2px rgba(0,0,0,.3);outline:none } input.gsc-search-button { background-color:#4d90fe;background-image:url('http://www.blogger.com/img/widgets/icon_wikipedia_search.png');background-position:center;background-repeat:no-repeat;border:1px solid #3079ed;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;border-radius:2px;color:transparent;font-size:11px;font-weight:bold;height:28px;text-align:center;float:right;width:38px } input.gsc-search-button:hover { background-color:#357ae8;border:1px solid #2f5bb7;color:transparent } </style> <form action='/search' id='search' method='get'> <input autocomplete="off" type="text" size="10" class=" gsc-input" name="q" title="ara" /> <input type="submit" value="Ara" class="gsc-search-button" title="ara" /> </form> <br /> Blog'da arama yap »
Blogger Yukarı Çık Eklentisi :

 Sırada ki eklenti ise çoğu blog yazarının vazgeçemediği yukarı çık butonu eklentisi.Bu blogger eklentisi sayesinde blogunuza gelecek ziyaretçi uzun yazılarda yukarı çıkmak için kısa yol olan yukarı çık butonunu kullanacak ve diğer yollara göre yorucu olmadan yukarı çıkacak.

 Blogger eklentileri arasında en çok kullanılan eklentilerden biridir ve bu eklenti blogunuza fazla olmasada bir yenilik getirecektir.Şimdi size eklentinin nasıl eklendiğini ve kodunu vereyim.

 Kodu Nasıl Eklerim :

Bu eklentiyi ekleyebilmek için bize Jquery kütüpanesi ve Font Awesome gerekecek.Öncelikle Bloggerdan Şablon > HTML 'yi düzenle deyip aşağıda ki kodu bulacaz.

</head>

Kodu bulduktan sonra üstüne aşağıda vereceğim kodları ekleyin eğer kod zaten varsa eklemenize gerek yoktur.


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Eğer kodu yazdıysanız ya da zaten varsa şimdi sıra aşağıda ki kodu bulmaya geldi.

</body>

Bu kodu bulduktan sonra üstüne şu kodları ekliyoruz.

<style> #yukari { display: none; border-style: hidden; padding: 10px; position: fixed; max-width: 19px; height: auto; bottom: 25px; background-color: rgb(98, 98, 98); overflow: hidden; right: 15px; cursor: pointer; -webkit-transform: translateZ(0); border-radius: 2px; transform: translateZ(0); z-index: 99; text-align: center; } a#yukari { text-decoration:none; color:#fff; } #yukari:hover{ transition: all 0.5s; background-color:#75b6df; } </style> <script> $(document).ready(function(){ // Goster $(window).scroll(function(){ if($(this).scrollTop() > 200){ $('#yukari').fadeIn(200); }else{ $('#yukari').fadeOut(200); } }); // Animasya $('#yukari').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, 500); }) }); </script> <a id="yukari" href="#" ><i class="fa fa-chevron-up"></i></a>

Artık blogger eklentimiz eklenmiştir.Blogger eklentilerine devam edelim.


Öne Çıkan Yayın Gadgeti

 Bu eklenti blogger tarafından son zamanlarda gelmiş ve istediğiniz yazıyı ön planda gösteren mükemmel bir blogger eklentisidir.Şimdi Nasıl eklendiğine bakalım.


Blogger hesabınızdan Yerleşim > Gadget Ekle yolunu takip edin ve Öne Çıkan Yayın Gadgeti seçin ve ardından ön planda göstermek istediğiniz yayını seçip ekle deyin.Blogger eklentileri arasında fazlasıyla rağbet gören bir eklentidir.


Blogger Çerezler için CSS eklentisi

 Bu eklenti Avrupa Birliği (AB) ziyaretçilerine blogunuzda bulunan çerezlerle ilgili bilgi vermeniz gereklidir.Bu yasalara göre ziyaretçiden onay alamanızda gereklidir şimdi bu eklentiyi nasıl ekleyeceğimizi görelim.

Blogger > Şablon  > Html yolunu takip edip aşağıdaki kodu bulun.

</style>

Bu kodu bulduktan sonra üstüne aşağıdaki beyaz veya siyah renk veren kodlardan birini yapıştırın.

/* Çerezler Siyah Arka plan */ .cookie-choices-info{background-color:rgba(56,66,75,.97)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;-webkit-transform:translateZ(0)} .cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#cee6ea!important} .cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear} .cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear} .cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#282f36!important;transition:all .1s linear}

/* Çerezler Beyaz Arka plan */ .cookie-choices-info{background-color:rgba(255,255,255,.99)!important;line-height:normal!important;top:initial!important;bottom:0!important;font-family:inherit!important;box-shadow:0 0 10px rgba(0,0,0,0.2);-webkit-transform:translateZ(0)} .cookie-choices-info .cookie-choices-text{font-size:14px!important;color:#222!important} .cookie-choices-info .cookie-choices-button{color:#fff!important;margin-left:5px!important;padding:3px 6px!important;background:#3fbdf3!important;border-radius:2px;transition:all .6s linear} .cookie-choices-info .cookie-choices-button:nth-child(2){background:#f68c2e!important;transition:all .6s linear} .cookie-choices-info .cookie-choices-button:hover,.cookie-choices-info .cookie-choices-button:nth-child(2):hover{background:#999!important;transition:all .1s linear} 

 Blogger Sosyal Ağlar Butonları :

Sırada ki blogger eklentisi ise vazgeçilmez sosyal paylaşım butonları.Bu eklenti sitenize sosyal ağlar ağırlıklı ziyaretçi getirecektir.Emin olun bu blogger eklentisi size yararlı olacaktır.Şimdi nasıl eklendiğine geçelim.


Önce Blogger > Şablon > HTML 'yi düzenle diyelim.

<data:post.body/>

Kodunu bulalım ve altına şu kodları ekleyelim.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='tombol-berbagi-arlina'> <div class='tombol-berbagi-arlina-fb'> <a class='tombol-berbagi-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a> </div> <div class='tombol-berbagi-arlina-tw'> <a class='tombol-berbagi-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a> </div> <div class='tombol-berbagi'> <a class='tombol-berbagi-lin' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'/> <a class='tombol-berbagi-lin-label' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;amp;url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title + &quot;&amp;amp;summary=&quot; + data:post.snippets' rel='nofollow' target='_blank'>Share on LinkedIn</a> </div> </div> </b:if>

 Kodu ekledikten sonra sıra aşağıdaki diğer kodu aratmaya geldi.

</style>

Bu kodu da bulduktan sonra  üstüne aşağıda vermiş olduğum kodları ekleyin.

/* CSS Share Button */ .tombol-berbagi-arlina{display:block;position:relative;height:43px;line-height:43px;padding:10px;border-top:1px solid #dadada;border-bottom:1px solid #dadada;margin:auto} .tombol-berbagi-arlina-fb,.tombol-berbagi{float:left;width:21%;padding:0 10px;height:inherit} .tombol-berbagi-arlina-tw,.tombol-berbagi,.tombol-berbagi-lk{float:left;width:21%;height:inherit;padding:0 10px;border-left:solid 1px #dadada} .tombol-berbagi-fb,.tombol-berbagi-tw,.tombol-berbagi-gp,.tombol-berbagi-lin,.tombol-berbagi-pi{float:left;display:block;background:url('http://2.bp.blogspot.com/-FYy1a99SDXE/VXuCSz_hYjI/AAAAAAAACbg/8dz4LkDIHYY/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px} .tombol-berbagi-fb-label{color:#2d609b} .tombol-berbagi-fb-label,.tombol-berbagi-tw-label,.tombol-berbagi-gp-label,.tombol-berbagi-lin-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px} .tombol-berbagi-tw{background-position:0 -43px} .tombol-berbagi-tw-label{color:#00c3f3} .tombol-berbagi-gp{background-position:0 -86px} .tombol-berbagi-gp-label{color:#f00} .tombol-berbagi-lin{background-position:0 -129px} .tombol-berbagi-arlina a{color:#999;transition:all .3s;} .tombol-berbagi-arlina a:hover{color:#7cb0ed} @media only screen and (max-width:640px){ .tombol-berbagi,.tombol-berbagi-arlina-fb{display:inline-block;float:none;width:48%;padding:0;height:inherit} .tombol-berbagi,.tombol-berbagi-arlina-tw,.tombol-berbagi-lk{float:left;width:48%;padding:0;border-left:0}}


Eğer bu kodları ve blogger eklentilerini eklediyseniz artık blogunuz daha güzel bir hal almıştır.Umarım paylaştığım eklentileri beğenmişsiniz dir.Bunlar sitenize fazlasıyla fayda getirecektir.Bu günlük blogger eklentisi paylaşma süremiz bitmiştir :) umarım sizlere daha faydalı yazılar yazarım ve siz blog yazarlarını daha yeniliklerle tanıştırabilirim.


Yorumlar