Webkankam » Blogger Eklenti

Blogger Başlıkların Yanına Yorum Sayacı Balonu

Ctrl + f ile aşağıdaki kodu bulunuz

Eğer bulamazsanız aşağıdaki kodu arayın.

Blogger temanızın durumuna göre yukarıdaki kodların hangisini bulabildiyseniz, kodların sonrasına aşağıda verilen Blogger Başlıkların Yanına Yorum Sayacı Balonu Eklentisi kodlarını ekleyin.
Ardından kodlar içerisinde ]]> kodunu bularak hemen öncesine aşağıdaki kodları ekliyoruz.
.comment-bubble { float : right; width : 48px; height : 48px; background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK7a8KSddrIXAEFUPJqrsD1pMpdaFEPHj7F2FRnmdb_HfjcWfVAXPtU9SLG9nIHlQguMCTcB8bUXe7S7JTsBTWkL4jCw8Y4R00_qDYOkz0SZHiPyeq79BCibIaEdvVj3MOnhM9Aepjk1BN/s1600/speech+bubble+green.png); background-repeat: no-repeat; font-size : 18px; margin-top : -15px; margin-right : 2px; text-align : center; }

Ilgili Aramalar Eklentisi

Her blogda mutlaka bulunması gereken eklentilerden birisidir.

Çünkü seo konusunda blogunuza katkı sağlar ve arama motorların da üst sıralara çıkmanıza yardımcı olur. Ayrıca css kodlarından gerekli düzenlemeleri yaparak sitenizin tasarımına ve renklerine uyumlu hale getirebilirsiniz bu sayede ek bir görsellikte katmış olursunuz.

Eklenti Önizlemesi :

Eklenti Kurulumu :

Şablon>Html'yi Düzenle içerisinde alttaki kodu bulun

]]></b:skin>

Hemen üstüne alttaki kodu ekleyin

.ikaz {margin-top: 0.5em;margin-bottom: 0.5em;padding: 1em 1.5em 1em 5.5em;border-bottom: 2px solid #fff;border-top: 2px solid #fff;color:#444;background: #FFF6BF url() 2.2em center no-repeat; border-color: #EB1885;}.ikaz .kapat{ position:relative; float:right; top:-5px; right:-5px; }.ikaz .kapat img{border:none; background:none;}.ikaz a&nbsp; {color: #817134;}.ikaz2 {color:#444444;background:#BFE5F2 url(http://i50.tinypic.com/oqyjo3.jpg) no-repeat 25px center;border: 1px solid #0098CA;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";}.ikaz3 {color:#444444;background:#FFF8AF url(http://i50.tinypic.com/oqyjo3.jpg) no-repeat 25px center;border: 1px solid #DDDDDD;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";}.ikazyeni {color:#444444;background:#ebf1f1 url() no-repeat 25px center;border: 1px solid #DDDDDD;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";}#yukari h1 {text-indent: -9999px;}#yukari h1 a {background: url(http://i37.tinypic.com/15yxcsn.png);padding:0;display: block;height:83px;width: 344px;cursor:pointer;}.ikaz3-reklam {color:#444444;background:#FFF8AF url() no-repeat 50px center;border: 1px solid #DDDDDD;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";}.ikaz27 {color:#444444;background:#E9FFDD url(http://i25.tinypic.com/5cexvl.png) no-repeat 10px center;border: 2px solid #72C868;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";}.ikaz-sinema {color:#444444;background:#e3e8d5 url() no-repeat 1px center;border: 2px solid #bedd66;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 10px;margin: 5px 30px;font-family: "Verdana";}.ikazbilgi {color:#444444;background:#FF9933 url(http://i32.tinypic.com/defpz.png) no-repeat 10px center;border: 2px solid #FF8000;-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;padding: 9px 35px 9px 65px;margin: 5px 30px;font-family: "Trebuchet MS";} a.linkopacity img{filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;} a.linkopacity:hover img{filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}

Son Olarak, Ayarlar > Yayınlar ve Yorumlar kısmından Kayıt Şablonu Ekleye tıklayın ve alttaki kodu yapıştırıp ayarları kaydedin.

<div class="ikaz27">İlgili Aramalar: </div>

Bu ayarları yaptıktan sonraki her yazınızın altında otomatik olarak Ilgili Aramalar kısmı görünecektir.

Resimli Benzer Yazılar Eklentisi

Her blogda mutlaka bulunması gereken eklentilerden hatta olmazsa olmazlardan birisidir.
Çünkü okuyucu yazımızın sonuna geldiğinde berzer konudaki diğer yazılar hemen gözüne ilişecek ya merak edip tıklayacak yada aradığı bir yazıyı görüp tıklayacak haliyle site içi dolaşım da artacak, bunlarla beraber görsellik olarakta blogumuza zenginlik katan bir eklenti.
Kurulum

Şablon => Html'yi Düzenle kısmına gelip alttaki kodu Ctrl+F tuşlarına basarak bulun

</head>

Bu kodun hemen üstüne alttaki kodları yapıştırın

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrOB4RSvRXOxz6XT3x8xWtpEZUYwwCG6nL_jGtuGtYVqmILLm96-_ygHZAibA9wAv9g2l7qzBnUd7yJP89tO3eXK7LoWCC4p2VwLi768I8h2TE6SeMiF0LepOUCyaUpFOxtjWNcMJeqkk2/s1600/no_image.jpg"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Ä°lgili YazÄ±lar"; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> </b:if>

Son olarak alttaki kodu da Ctrl+F tuşlarına basarak bulun

<data:post.body/>

Hemen altına bu kodları ekleyin

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> </b:if></b:if>

Önemli not: Blogda 3 farklı yerde bulunuyor. İlk olarak 3.cünün altına ekleyin olmazsa diğerlerini de deneyin.

Blogger | Blogger Eklenti Devamı » OĞULCAN TURAN URUN 0 yorum

Belirli Etiketten Yazıları Göstermek

Blogun Sidebar kısmında belirlediğiniz bir etiketten yazıları gösterme.
Çok faydalı ve aranan bir eklentidir, Sitemizde de aynını kullanmaktayız.
Ayrıca kurulumu çok basittir, zahmetsizce kullanabilirsiniz.
Kurulum

Öncelikle düzenlemeniz gereken kısımlar :

Kırmızı kısım gösterilmesini istediğiniz yazı adedi Yeşil kısım yazının açıklama kısmının karakter sayısı Mavi kısım site adresiniz ve yazı gösterilecek etiketin ismi

Yerleşim => Gadget Ekle => HTML/JavaScript yolunu izleyin ve alttaki kodları yapıştırın.

Blogger | Blogger Eklenti Devamı » OĞULCAN TURAN URUN 0 yorum

Blogger'da Yazı Altına Sosyal Paylaşım Butonları Ekleme nasıl yapılır?

Blogger'da yazılarınızın hemen altına ekliyeceğiniz sosyal paylaşım butonları ve beğenme butonları sayesinde blogger blogunuzu sosyal paylaşım siteleri ile iç içe geçirip müthiş bir köprü atacak, Bu bölümde blogger'da yazı altına yatay sosyal paylaşım butonlarını blogunuza nasıl ekliyebileceğinizi anlatacağım.

Unutmayın ki Blog yazmak, blog hazırlamak zor değil, blogumuza ziyaretçi çekmek yazdıklarımızın okunurluluğunu artırmak, asıl bu işin zor kısmıdır. Herkes birşeyler yazıyor çiziyor,ama kim okuyor? kime ne faydası var? bunların, diye kimse sormuyor kendine. Ortalık blog çöplüğüne dönüşmüş adeta.

Blogger yazı altı eklentisini eklediğinizde bir kişi yazınızı okuduğunda ve yazı sonuna geldiğinde, eğer yazınızı beğenmişse sosyal paylaşım sitesinde paylaşacak ve burdan size ziyaretçi kazandıracak faydalı bir eklentiyi blogunuza nasıl ekliyebileceğinizi anlatalım:

Eklenti içinde bulunan butonlar:

Facebook beğen butonu
Twitter Paylaş butonu
Google+ Butonu
Blogger Paylaş Butonu
Linkedin Butonu
Pinterest Butonu
E-Posta Abonelik Butonu

1) Blogger hesabımızla giriş yapın.
2) Her ihtimale karşı blogger şablonlonuzun yedeğini alın.
3) Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edin.
4) Widget Şablonlarını Genişlet Kutucuğunu işaretlin.
5) Ctrl+F yardımı ile kodlar içerisinde </head> kodunu aratıp bulun.
6) Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodunun hemen üst tarafına yapıştırın. (Kodun tamamı kutuda gözükmediğinden kopyalarken mausunuzu sağ alt köşeye kaydırın)

<script type="text/javascript">var switchTo5x=true;</script>

<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>

<script type="text/javascript">stLight.options({publisher: "ab0ca80d-f3e2-4a23-96ba-c400631a4619", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>

7) Yine Html kodlarımız içinde <data:post.body/> kodunu aratıp bulun.

8) Aşağıdaki kodu kopyalayıp bulduğumuz <data:post.body/> kodunun hemen altına yapıştırın.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.doncaprio-share-buttons
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid #BBBBBB;
background-color:#FFFFFF;
-webkit-box-shadow: #B3B3B3 5px 5px 5px;
-moz-box-shadow: #B3B3B3 5px 5px 5px;
box-shadow: #B3B3B3 5px 5px 5px;
padding: 5px;
margin: 10px;
}
</style>
<p align='center' class='doncaprio-share-buttons'>
<span class='st_fblike_hcount' displayText='Facebook Like'></span>
<span class='st_twitter_hcount' displayText='Tweet'></span>
<span class='st_googleplus_hcount' displayText='Google +'></span>
<span class='st_blogger_hcount' displayText='Blogger'></span>
<span class='st_linkedin_hcount' displayText='LinkedIn'></span>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
<span class='st_email_hcount' displayText='Email'></span>
</p>
</b:if>

9) Bir ön izleme yapalım,şablonda sıkıntı yoksa ,şablonumuzu kaydedip çıkın.Bu haliyle, bir yazınız tıklandığında yazı sonunda blogger sosyal paylaşım butonlarınız görünecektir. İstemediğiniz bir paylaşım butonu var ise 8. adımda verdiğim kodlar içinde mavi renkle verdiğimiz satırlardan sildiğinizde o paylaşım butonu kaldırılmış olur.Örnek olarak linkedin payşaım butonunu istemiyorsunuz.

<span class='st_linkedin_hcount' displayText='LinkedIn'></span>

satırını kaldırdığınızda linkedin paylaşım butonunu da kaldırmış olursunuz.
Not:Blogger yazı altı sosyal paylaşım butonlarını yazı üstünde de göstermek istiyorsanız yada sadece yazı üstünde çıksın istiyorsanız,yapmanız gereken;
8.adımda verdiğimiz kodu <data:post.body/> kodunun hemen üst tarafına yapıştırıyoruz.
Blogger sosyal paylaşım butonlarınız kullanıma hazır hayırlı olsun:)

Blogger | Blogger Eklenti Devamı » OĞULCAN TURAN URUN 0 yorum

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. AddThis

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:

- Paylaş butonları: 4 yatay, 3 de dikey versiyonu olan paylaşım butonlarını özelleştirerek hangi butonların gözükmesini istediğinizi belirleyebiliyorsunuz.

- Takip butonları: 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.

- Hoşgeldin çubuğu: 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.

- Trend içerikler: 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.

- Akıllı katmanlar: 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 burayı ziyaret edebilirsiniz.

2. ShareThis

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.

Son olarak get the code butonuna basarak kodunuzu ve blogunuza nasıl eklemeniz gerektiğini görebilirsiniz.

3. Flare

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.

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. Markerly

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.

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.

Blogger Eklenti Devamı » 10 Mart 2014 Pazartesi OĞULCAN TURAN URUN 0 yorum

Blogger Mesaj Kutusu Eklentisi

Merhaba arkadaşlar bu günkü yazımda kendimde kullandığım blogger mesaj kutusu eklentisini sizlere sunuyorum. Ön izleme üst resimdeki gibidir. Hemen anlatıma geçeyim.

İlk olarak aşağıdaki kodu buluyoruz.

]]></b:skin>

Bulduğumuz kodun hemen üstüne aşağıdaki kodları ekliyoruz.

/* Bu CSS Dökümanı Bloglamazamani tarafından duzeltilmistir  */
body
{
    background-color:#f9f9f9;
    width:600px;
    padding:10px 0 0 0;
    margin:0 auto;
    font:12px/23px Tahoma, Geneva, sans-serif;
}
.logo
{
    margin:10px 0 20px 0;
    text-align:center;
}
.basarili
{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4cbRrabofssg33Wi1jzTzU9yggqSNhXEs31FEZ67NrSeMObfW94o_MQtkYEwO6txZ58_n8x5DwRMRKrFZs_1M74IotGV_RNrgfdWq65ZhWpCBf-oZweB3pPhDgJaYLMpyE-DvVIMLxqQ/s1600/buton-sprite.png) #eefec2 no-repeat left;
    background-position: left -11px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #badc5d;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}
.uyari
{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4cbRrabofssg33Wi1jzTzU9yggqSNhXEs31FEZ67NrSeMObfW94o_MQtkYEwO6txZ58_n8x5DwRMRKrFZs_1M74IotGV_RNrgfdWq65ZhWpCBf-oZweB3pPhDgJaYLMpyE-DvVIMLxqQ/s1600/buton-sprite.png) #ffe59d no-repeat left;
    background-position: left -89px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #c8b26f;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}
.hata
{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4cbRrabofssg33Wi1jzTzU9yggqSNhXEs31FEZ67NrSeMObfW94o_MQtkYEwO6txZ58_n8x5DwRMRKrFZs_1M74IotGV_RNrgfdWq65ZhWpCBf-oZweB3pPhDgJaYLMpyE-DvVIMLxqQ/s1600/buton-sprite.png) #fcd5d5 no-repeat left;
    background-position: left -159px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #a76464;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}
.bilgilendirme
{
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4cbRrabofssg33Wi1jzTzU9yggqSNhXEs31FEZ67NrSeMObfW94o_MQtkYEwO6txZ58_n8x5DwRMRKrFZs_1M74IotGV_RNrgfdWq65ZhWpCBf-oZweB3pPhDgJaYLMpyE-DvVIMLxqQ/s1600/buton-sprite.png) #e9f1f4 no-repeat left;
    background-position: left -229px;
    height:60px;
    line-height:60px;
    padding:0 0 0 60px;
    margin:0 0 10px 0;
    border:1px solid #566a76;
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;
}

Şablonu kaydedip çıkıyoruz.

Aşağıdaki kodları kullanarak CSS uyarı mesajlarını kullanabilirsiniz. Kodları istediğiniz yere ekleyebilirsiniz.

<div class="basarili">
BLOGLAMA ZAMANI onay kutusudur.</div>
<div class="hata">
BLOGLAMA ZAMANI hata  kutusudur.</div>
<div class="uyari">
BLOGLAMA ZAMANI uyari kutusudur.</div>
<div class="bilgilendirme">
BLOGLAMA ZAMANI bilgilendirme kutusudur.</div>

Blogger Eklenti Devamı » 5 Mart 2014 Çarşamba Adsız 3 yorum

Blogunuza veya Sitenize Beğeni Arttırma Bölümü Ekleyin [6 Renk]

Websitenize kendi sitem üzerinden beğeni çekebilirsiniz.

Özellikleri

*Kendi siteme ait reklam yoktur.
*6 adet renk seçeneği mevcut
*Karşılama mesajı mevcut
*Basit ve güzel bir tema
*Hızlı ve türk kişiler
*Gönderilen beğeni sayısı gösterilir.
*Reklamsızdır. (Link kısaltma mevcut)
*Kendi sitemize yönlendirme yapmaz.
*İframe tabanlı
*20 ile 40 arasında beğeni

Tüm kodlar ve önizleme için

BURAYA TIKLAYIN
goo. gl/4E60MG

Anasayfa

Mavi