Disqus for Blog Okulu

Bumerang - Yazarkafe

bloggerde sosyal medya etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
bloggerde sosyal medya etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

Blogger İnstagram Eklentisi ~ Blogger İnstagram Resimleri

Blogger İnstagram Eklentisi ~ Blogger İnstagram Resimleri

Son zamanlarda etkin kullanılan ve kullanımı bir hayli yaygınlaşan instagram ile paylaştığınız resimleri blogunuzda da görüntüleyebilmek için bloggere özel üretilen blogger instagram eklentisi ile instagram hesabınızda paylaştığınız bir resmi aynı zmanda blogunuzda da yayınlama imkanını bulabilirsiniz.Eğer ilgi çekici resimler paylaşırsanız blogunuzu takip eden kişiler bir süre blogger instagram eklentisi sayesinde instagram hesabınızı da takip etmeye başlayacaktır böylelikle instagramda takipçilerinizi arttırmak için blogunuzu da kullanmış olursunuz ve blogunuzu yeni bir eklenti (blogger instagram eklentisi) kazandırmış olursunuz.
Demo Görünüm
Blogger İnstagram Eklentisini Bloguma Nasıl Eklerim?
1-Buraya tıklayarak siteye giriş yapıyoruz.
2-Açılan Sayfadaki formu aşağıdaki gibi dolduruyoruz.
3-Oluşturduğumuz blogger instagram eklentisinin nasıl göründüğüne bakmak isterseniz, yukarıdaki resimde görünen mavi renkli Preview butonuna basın.
4-Kod Oluşturmak için de yeşil renkli Generate code butonuna basın.Butona bastığınızda aşağıdaki gibi bir kod sayfası açılacak.
5-Yukarıdaki resimde gördüğünüz pencerede açılan ve sizin ayarlarınızı barından kodu kopyalıyoruz.
6-Blogger hesabımızla giriş yapıyoruz.
7-Kumanda Paneli>Yerleşim modunu açıyoruz ve buradan Gadget Ekle>HTML/JavaScript gadgetini seçiyoruz.
8-Açılan Gadget penceresine 4.adımda resimde gördüğümüz ve kopyaladığımız kodu yapıştırıyoruz.
9-Kaydet butonuna basıp çıkıyoruz.
10-Blogger İnstagram eklentisi blogunuza eklenmiş oldu.
Dilerseniz eklediğiniz Blogger İnstagram eklentisini yerleşim modundayken sürükle bırak yöntemi ile blogunuzda istediğiniz bir alana sürükleyip bırakabilirsiniz.
İnstagram hesabımızı burdan takip edebilirsiniz. @blogokulu

Blogger Yazı Altına Sosyal Paylaşım Butonları Ekleme

Blogger Yazı Altına Sosyal Paylaşım Butonları Ekleme

Blogger de yayınladığınız yazıları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 yazı altı, yatay sosyla paylaşım butonlarını blogunuza nasıl ekliyebileceğinizi anlatacağız.Unutmayalım arkadaşlar blog yazmak zor değil,blog hazırlamak da zor değil,blogumuza ziyaretçi çekmek yazdıklarımızın okunurluluğunu arttırmak, asıl bu işin zor kısmı.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.Bundan dolayı blog okulu blogların gerçekten işine yarayacak, sadece blogunuzda var olsun diye eklentiler paylaşmıyor.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çeriisnde bulunan butonlar:
  1. Facebook beğen butonu
  2. Twitter Paylaş butonu
  3. Google+ Butonu
  4. Blogger Paylaş Butonu
  5. Linkedin Butonu
  6. Pinterest Butonu
  7. E-Posta Abonelik Butonu 
DEMO GÖRÜNÜM
1)Blogger hesabımızla giriş yapıyoruz.
2)Her ihtimale karşı blogger şablonlonumuzu yedeğini alıyoruz.
3)Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip ediyoruz.
4)Widget Şablonlarını Genişlet Kutucuğunu işaretliyoruz.
5)Ctrl+F yardımı ile kodlar içerisinde </head> kodunu aratıp buluyoruz.
6)Aşağıdaki kodu kopyalayıp bulduğumuz </head> kodunun hemen üst tarafına yapıştırıyoruz.
<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çerisinde <data:post.body/> kodunu aratıp buluyoruz.
8)Aşağıdaki kodu kopyalayıp bulduğumuz <data:post.body/> kodunun hemen altına yapıştırıyoruz.
<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ıyoruz.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ğimiz kodlar içerisinde 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 Abonelik Eklentisi (Ahşap Modelli)

Blogger Abonelik Eklentisi (Ahşap Modelli)


Blogger Sosyal Paylaşım ve Abonelik Butonları Eklentisinin ingilizcesi "wood model" olan ahşap modellisini sunuyoruz.İçerisinde Blogger sayfanızdan direkt olarak Facebook,Twitter,RSS ve blog aboneliği, yani ziyaretçilerin e mail adreslerini girip kaydet butonuna bastıkları takdirde yazılarınızın kişilerin mail adreslerine gitmesini sağlayacak eklentiyi blogunuza nasıl ekliyebileceğinizi anlatacağız.

Demo Görünüm
1-Blogger Hesabımızla Giriş Yapıyoruz.
2-Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip ediyoruz.
3-Aşağıdaki kodu kopyalayıp Açılan Gadget içerisine yapıştırıyoruz.
<!-- Start Gadget Code From http://www.oyun04.com/ -->
<style type="text/css">
 /* Delete form Here*/  
img.beintouch:hover {
    background: none repeat scroll 0 0 #D6D6D6;
    border-radius: 16px 16px 16px 16px;
    box-shadow: 0 0 10px #565656;
}
/* Delete to Here*/
.emailtext {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS_k7AbksumOcG6iKF6AIxtJWtLDEtn3ggs9U_a6CHs6VwlCiOXmDVnNEMb-lWiV_A1PSh5NyC0Wih3-oSVbD62j8tAXTFhyphenhyphenEsaSStC8nGKJPnFlYwbqF5zl42VsMj0Wypirt-SdQzVu4/s1600/mailbox.png") no-repeat scroll 4px center transparent;
    border: 1px solid #7E4E27;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 1px 1px 4px #7E4E27 inset;
    color: #444444;
    font-weight: bold;
    margin-left: 2px;
    padding: 7px 15px 7px 35px;
    text-decoration: none;
    width: 176px;
}
.ebutton {
    background: -moz-linear-gradient(-45deg, #3C1F0E 0%, #D28A47 30%, #F9E183 30%, #D28A47 55%, #3C1F0E 100%) repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    border-radius: 4px 4px 4px 4px;
    color: black;
    cursor: pointer;
    font-weight: bold;
    margin-left:0 auto ;
    margin-top: 5px;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 6px #000000;
}
</style>
<table align="center" width="317px" cellspacing="0px" cellpadding="1px"><tbody><tr><td><a target="_blank" rel="nofollow" href="http://www.facebook.com/pages/Blog-Okulu/270630239670726"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsrjcZUz7bj2NuIICcMPcEdXenQMOABjNBfnk4j1P5ArNGgtXK5DdNcqHqePY7uuGp_2m51uspkgGJODoAo6bcFsLnwjDR2VCmRbBz-Bl7J-YP78QE0oiFPdHJYKDXdjH7hyrvU1pCzoM/s1600/woden+board+facebook_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://twitter.com/blogokulu/" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn2PUJ1D2sUIhNPqPAkxg1HMhPMaGECgG2EsQCckdK0goI-w5RWaqYAkwTQtX_1-s94kBlA5qgsxXMmnNa21nJhTXc1ohpzzv1RuIq9xzVBg7v7wDoySNOi6jv7JErxQ4bMdvJBWxlftM/s1600/woden+board+twitter_netoops.png" class="beintouch" /></a></td><td><a target="_blank" href="http://feeds.feedburner.com/blogokulu" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijEQitYgCf6a9gnoezBmfcaJwjbnPhcIyncl6-FZhHi6zlfycWt8XyESj7N9Oi8qR7LDZ-ELTv3cFNrBMWqxVDHec6atwVMam0bA4ZUPLwZcj6NH7IOPquQ4mlSalKTmDMM6deS8LazzA/s1600/woden+board+RSS1_netoops.png" class="beintouch" /></a><a href="http://netoopsblog.blogspot.com"></a></td></tr></tbody></table>
<div><b>Yazılarımız E-Mail Adresinize Gelsin</b></div>
<form target="popupwindow" style="margin: 0pt;" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=netoopsbloggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="emailform" action="http://feedburner.google.com/fb/a/mailverify">
<input type="hidden" value="NetOopsBloggerTricks" name="uri" />
<input type="hidden" value="en_US" name="loc" />
<input type="text" value="Mail Adresinizi Girin..." onfocus="if (this.value == &quot;Mail Adresinizi Girin...&quot;) {this.value = &quot;&quot;}" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Mail Adresinizi Girin...&quot;;}" name="email" class="emailtext" />
<input type="submit" value="Kaydet" title="" class="ebutton" alt="" />
</form>
<!-- End Gadget Code From http://www.oyun04.com/ -->
Kod içerisnde renkli olarak belirttiğimiz:

  1. http://www.facebook.com/pages/Blog-Okulu/270630239670726 Adresi yerine kendi facebook adresinizi.
  2. http://twitter.com/blogokulu Adresi yerine kendi Twitter adresinizi.
  3. http://feeds.feedburner.com/blogokulu Adresi yerine kendi RSS adresinizi yazıyorsunuz.

Blogger 3D Sosyal Simgeler 360 derece dönüyor

Blogger 3D Sosyal Simgeler 360 derece dönüyor

Bugün sizlere  maus ile üzerine geldiğinizde kendi etrafında 360 derece dönen göze hoş gelen animasyonlu sosyal paylaşım butonlarını blogunuza nasıl ekliyebileceğinizi anlatacağız.3 boyutlu olan sosyal paylaşım butonları yazılarınızın ve blogunuzun sosyal medyada gücünü attıracak, daha çok paylaşılacak ve daha çok kişi tarafından tıklanmayı sağlayacak çekicilik ve cazibeye sahip.İçeriklerinizin paylaşımı arttıkça tıklanma oranları artacak, tıklanma oranı artınca ve ziyaretçiler sosyal paylaşım sitelerinden direk sitenize gelince SEO açısısından epey bir fayda görecek ve arama motorlarında üst sıralara tırmanacaksınız.  Blogger dönerli 3D Sosyal Paylaşım butonlarını blogunuza eklemek için gadget ekleme yöntemini kullanacağız.
BLOGGER 3D SOSYAL SİMGELERGÖRÜNÜMÜ

Icon Icon Icon Icon Follow Me on Pinterest

  1. Blogger hesabımızla Giriş yapıyoruz.
  2. Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip ediyoruz.
  3. Aşağıdaki kodu kopyalayıp açılan gadget içerisine yapıştırıyoruz. 
<!-- 3D SosyalPaylasim blogokulu.org Kodu Baslat --><style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Baslangic Rss Icon--> <a title="Grab Our Rss Feed" href="FEED-URL-ADRESİNİZ" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhndNljQKE4TbuDDnRqPJ3jPdi_iwz9YO-YtgYt28wdeyGf3AcTgSVlkNZ6VgHeyyxJGVWG7x86so3E2CUyyUyZubC13Epelur6sbn8TqsR4Rdr7gTh5ovaUzW4IPWi-IrnT32f-HB3CGyd/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Rss Icon--> <!--Baslangic Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="E-MAİL-RSS-ADRESİNİZ" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1s7ErJ9uf4zAbt7enOqz_kufj7iAqK3zchyphenhyphen4jlBUUjS3sMpFpTZztcYIjhB8WqZWFJKRShXVyry8T8191WmLg-N8LfaCanObadSJG09JEP5KC0OCKpM2xoXZnIKteoLhxSq8SO2PlzskV/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Email Rss Icon--> <!--Baslangic Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="FACEBOOK-SAYFANIZIN-URL-ADRESİ" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6rGWS-_0rOXHUJq1uaQX6W9WKKFelnvH1evYNu871UupS6wvT5Fz-0-5mpuUab6tvTRGaJulihECNPawOcIbNshMhjhUs3n8jffCarb4TfGtZxl-EYPU3VOaGHl0Urhd27TpD2GJmlYZc/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Facebook Icon--> <!--Baslangic Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="TWITTER-URL-ADRESİ" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHC78nkCLoqquNLuJc9NA5G1neJ4e5rZknz082h1vpghnBfv_Gk9nMUvcmdxTU9hcV-BXt12mmR-SC4tgA5UoKtQiZO2L9mqGG2ooj9SbvRPrY2bcFZOpsD-IZVXeLpknxBg86mvb99Wek/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--Bitis Twitter Icon--> <!--Baslangic Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="GOOGLE-PLUS-URL-ADRESİNİZ" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjDCnNDVbqd9r_57fTeSykTUHdvnazD4qzd2K51HAbw7B82z8NBwP_K5uvyaMgm9BjrORRoV8zeNoiZdbrJ4xUsqxkkAGk7pYz0MO6ZQiMV8rRyZxu1k7qCTEqraoq1mgr7U4TaKgXOp9k/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--Bitis Google+ Icon--> <!--Baslangic Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="PINTEREST-URL-ADRESİNİZ" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQi5Km3v4ppSlGRBzQ4qaY18IifoqKyBJnS_Acup1hpit3nxgletfprkl9sBXHcUurwsPJ7NTGNHeM8YDVihjPA9Wf1zuvAA6w_Rv3uRvGRZny5UvS2JDkPNAN5LguDuEEMJ2GZypVexN/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--Bitis Pinterest Icon--> </div><br/> <!--Baslangic Feed Count Button--> <a href="FEEDBURNER-URL-ADRESİNİZ" target="_blank"><img alt="blog okulu" src="http://feeds.feedburner.com/~fc/BlogOkulu?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--Bitis Feed Count Button--> </center><!-- 3D SosyalPaylasim blogokulu.org Kodu Bitir -->
kod içerisinde mavi renkle koyu olarak belirttiğimiz yerleri kendinize göre düzenleyin,kullanmak istemediğiniz paylaşım butonunu kaldırmak isterseniz;
Örnek olarak pinterest kuıllanmıyorum, bu butonu kaldıracağım dediğinizde bunun için kodlar içerisinde
<!--Baslangic Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="PINTEREST-URL-ADRESİNİZ" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipQi5Km3v4ppSlGRBzQ4qaY18IifoqKyBJnS_Acup1hpit3nxgletfprkl9sBXHcUurwsPJ7NTGNHeM8YDVihjPA9Wf1zuvAA6w_Rv3uRvGRZny5UvS2JDkPNAN5LguDuEEMJ2GZypVexN/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--Bitis Pinterest Icon-->
kodunu kaldırmanız yeterli olacaktır.Yani kaldırmak istediğiniz icon <!--Baslangic ...........--> ile başlayıp <!--Bitis ...........--> ile son bulan koddur.
     4.Gerekli düzenlemeleri yaptıktan sonra gadgeti kaydedip çıkıyoruz.Blogger 3D Sosyla Paylaşım Butonları gadgetini Sosyal paylaşım iconlarının görünmesini istediğimiz yere sürükleyip bırakıyoruz.

Blogger Sosyal Paylaşım Widgeti

Blogger Sosyal Paylaşım Widgeti

Way2Blogging’s Social Subscription Widget for Blogger / Blogspot Preview
Blogunuza widget olarak ekliyebileceğiniz sosyal paylaşım butonları, e-posta ile takip et ve rss butonu bulunan widgeti sizlerin kullanımına sunuyoruz.Widgeti blogunuza eklediğinizde resimdeki gibi bir görünüm elde edeceksiniz..Sosyal Paylaşım Butonları widgetini blogunuza eklemek için;
1.Adım:Kumanda Paneli>Şablon>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretledikten sonra kodlar içeriisnde Ctrl+F yardımı ile ]]></b:skin> kodunu bulun.Aşağıdaki kodu kopyalayıp bulduğunuz ]]></b:skin> kodundan önceki kısma yapıştırın.
@import url("http://fonts.googleapis.com/css?family=Oswald&amp;text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20");
.w2bOldSocial ul {
    font-family: 'Oswald', sans-serif;
    margin: 15px 0;
    overflow: hidden;
}
.w2bOldSocial ul li {
    float: left;
    width: 90px;
    padding: 0 0 0 55px !important;
    margin: 0 0 0 5px !important;
    line-height: 48px !important;
}
.w2bOldSocial ul li a {
    font-size: 20px !important;
    text-decoration:none;
    padding:0 !important;
    margin:0 !important;
    text-decoration:none;
}
.w2bOldSocial ul li a:hover {
    text-decoration:underline;
}
.w2bOldSocial ul li.w2brss {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisIiy_J-Ok5GPk20dVsr6fsmk65LiSTq-8CrxSDlerHOfRDi-zlwTNLBr_lKyjVhj4gckIXSr_5TifhIFYM0rkBQfecZab3vIH-XMJbeAy8oYwZcpJVEmo7Cyqpt8_RjBB226jiDibgTFl/s48/RSS.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bmail {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ3Q6ih252itJ7DwgF0mhtLFGcpe5WV4HS3_decrR1XWvwyfVLYsld4WITVIBVcvCaXbpNNKRe6jyqivvTtC4WpVYS5L0xIaWEyPcT4A4kgYp5AJnrhJumpWUeHE9m2NIcejuulghhB4my/s48/Mail.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2btwitter {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2_6ARnNs_mI8o8ArhMFF5VWRGh_Rh8C_k7JcHkFzBJhpLV43ivgFgGcJfIExaIoMXk4HFR3NzgqMnA2A34QRXuPVKv70CkIF5mtD6Ueg7g3MwTGw3TAUjE1hmHDKG-YSnSTk7lhtDG8OW/s48/Twitter2.png") no-repeat scroll left center transparent !important;
}
.w2bOldSocial ul li.w2bfacebook {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyYDIyPFRSPJipMY6RRvJfS7MouLm8uDs7i891ZeSa1rKd7-PMlTBuid9jjzpuTGdtwB2WiFlxCB3RbU5SIvLnQ2hwZjPMDAYZ0p58iCmFkUFzEfa6w2NgNknO3pUmU_V7gALgt96ovN6S/s48/Facebook.png") no-repeat scroll left center transparent !important;
}
#w2bEmailsub {
    display: block;
    clear: both;
    margin: 10px 0;
}
form.w2bEmailform {
    margin: 20px 0 0;
    display: block;
    clear: both;
}
.emailText {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZgUbDnSqRZHNb8U93tPYO9Z1oI01v4_vHQwxqfkPEzv6F4DPoQddIxrx8qlUJAuANH57rBLrQAJpKafg5z0eA4YDCQi8Y8oXU_fDvMsIg8l_nnAFJnPCWJy8-XFxPWn2PrpaOBh-g2UO3/s28/w2b-mail.png") no-repeat scroll 4px center transparent;
    padding: 7px 15px 7px 35px;
    color: #444;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #D3D3D3;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}
.emailButton {
    color: #444;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 15px;
    border: 1px solid #D3D3D3;
    cursor: pointer;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;

    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
    background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}

2.Adım: Kumanda Paneli>Yerleşim>Gadget Ekle>Html/Javascript yolunu takip edip açılan gadgetin içerisine aşağıdaki kodu yapıştırın.
<div class="w2bOldSocial">
    <ul>
        <li class="w2brss"><a href="http://feeds.feedburner.com/blogokulu">RSS</a></li>
        <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=blogokulu" >Email</a></li>
        <li class="w2btwitter"><a href="http://twitter.com/blogokulu">Twitter</a></li>
        <li class="w2bfacebook"><a href="http://facebook.com/blogokulu">Facebook</a></li>
    </ul>
</div>
<div id="w2bEmailsub">
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Way2blogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform">
        <input type="hidden" value="BlogOkulu" name="uri" />
        <input type="hidden" name="loc" value="en_US" />
        <input type="text" onblur="if (this.value == &quot;&quot;) {this.value = &quot;E-Mail Adresiniz...&quot;;}" onfocus="if (this.value == &quot;E-Mail Adresiniz...&quot;) {this.value = &quot;&quot;}" value="E-Mail Adresiniz..." name="email" class="emailText" />
        <input type="submit" class="emailButton" value="Abone Ol" title='' />
    </form>
</div>
Kod içerisnde;
  • http://feeds.feedburner.com/blogokulu feed burner url
  • http://feedburner.google.com/fb/a/mailverify?uri=blogokulu Feedburner ID
  • http://twitter.com/blogokulu Twitter URL
  • http://facebook.com/blogokulu Facebook Sayfanızın URL
  • <input type="hidden" value="BlogOkulu" name="uri" /> Feedburner ID 
adreslerini kendinize göre değiştirip gadgeti kaydediyoruz ve görünmesini istediğimiz yere sürükleyip bırakıyoruz.Sosyal paylaşım widgeti blogumuzda kullanıma hazır.

Blogger için Animasyonlu Püskürtme Şeklinde Abonelik ve Sosyal Paylaşım Butonları

Blogger için Animasyonlu Püskürtme Şeklinde Abonelik ve Sosyal Paylaşım Butonları

Önceki yayınlarımızda  açılan kalp içerisinde sosyla paylaşım sitelerine ait butonları blogunuza eklemeyi sizlere anlatmıştık.Şimdi ise koordinat olarak onunla aynı yerde bulunan fakat görünümü ve açılımı farklı olan sosyal paylaşım butonlarını blogunuza eklemeyi sizlere anlatacağız.Görünüm olarak sayfanın dışında sol alt tarafta bulunan, maus ile üzerine tıkladığınızda açılan bir buton.Bu butonu blogunuza eklemek için,
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip ediyoruz.Aşağıdaki kodu kopyalayyıp açılan gadgetin içerisine yapıştırıyoruz.

Blogger Sosyal Paylaşım Butonları (Sayfayla Birlikte Hareket Eden)

Blogger Sosyal Paylaşım Butonları (Sayfayla Birlikte Hareket Eden)

Blogunuzda sol tarafta,boşlukta sayfayla birlikte hareket eden, istediğiniz renk ve boyut ayarlamasını yapabileceğiniz sosyal paylaşım butonlarını blogunuza eklemek için aşağıda bulunan modüldeki ayarlar kısmından gerekli düzenlemeleri yaptıktan sonra oluştur ve ardından bloguna ekle butonlarına tıklayarak bu sosyal paylaşım butonlarını blogunuza ekliyebilirsiniz.Renk kodlarına burdan ulaşabilirsiniz.

Blogger için Uçan Twitter Kuşlari (7 farklı Kuş Eklentisi)

Blogger için Uçan Twitter Kuşlari (7 farklı Kuş Eklentisi)

Uçan twitter kuşu eklentisini diğer konularda sizlere anlatmıştık.şimdi ise farklı 7 uçan twitter kuşunu(5 tanesi pek kuşa benzemiyor:)), yine uçan tarzda blogunuza eklemek için gerekli kodları sizlere sunuyoruz.
Aşşağıda verdiğimiz kodu kopyalayıp Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip açılan gadgetin içerisine kopyaladığımız kodu yapıştırıyoruz.Kod içerisinde "TWİTTER ADRESİNİZ" yazan yere kendi twitter adresinizi  yazıyorsunuz.