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.

Blogger için Twitter Kutusu Sağdan Açılan Pencere Şeklinde

Blogger için Twitter Kutusu Sağdan Açılan Pencere Şeklinde


Blogger için ekliyeceğiniz twitter kutusu sayesinde blogunuza gelen ziyaretçiler, blogunuz üzerinden twitterde sizi takip etme imkanını bulacak.Bu eklenti sayesinde takipçi sayınızda ki artışı zamanla fark edeceksiniz.Doğal olarak attığınız twittlerin okunma oranında da bir artış göeceksiniz.Daha önce buna benzer bir şekilde sağdan açılan pencere şeklinde facebook eklentisini de sizlerin kullanımına sunmuştuk, hem facebook hemde twitter kutularının ve yanında google + penceresi bulunan bir başka eklentinin kurulumu için  de başka bir anlatım yapmıştık.Şimdi ise sadece sağdan açılan pencere şeklindeki twitter kutusunu blogunuza nasıl ekliyebileceğinizi anlatacağız.

1.Adım:Blogumuza twitter takipçi kutusu ekliyoruz.

Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip,aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıyoruz.
<script type="text/javascript" src="http://makingdifferent.googlecode.com/files/fanbox_init.js"></script><div id="twitterfanbox"></div><script type="text/javascript">fanbox_init
("TWİTTER ADRESİNİZ");</script>
Kod içerisinde; kırmızı renkle yazdığımız TWİTTER ADRESİNİZ (Örnek:blogokulu) yazan yere kendi twitter adresinizi yazıp gadgeti kaydediyoruz.
2.Adım: Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip edip widget şablonlarını genişlet kutucuğunu işaretliyoruz.Kodlar içerisinde Ctrl+F yardımı ile </ head> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuz </ head> kodundan önceki kısma yapıştırıyoruz.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
Şablonumuzu kaydedip çıkıyoruz.
3.Adım: Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip,aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıyoruz.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".mdslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">.mdslikebox{background: url("http://3.bp.blogspot.com/-erfRWcXzmgU/TwFo5Voq2oI/AAAAAAAACLA/9sdI9M7iwhg/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 275px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}.mdslikebox div{border:none;position:relative;display:block;}.mdslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.mdslikebox span a{color: #808080;text-decoration:none;}.mdslikebox span a:hover{text-decoration:underline;}</style>
<div class="mdslikebox" style=""><div>
<div id="twitterfanbox"><script type="text/javascript"
>fanbox_init
("TWİTTER ADRESİNİZ");</script>
</div id="twitterfanbox"><span>By <a href="http://www.blogokulu.org">Blog Okulu</a> / <a href="http://blogokulu.blogspot.com/2012/04/blogger-icin-twitter-kutusu-sagdan.html">+Sitene Ekle!</a></span></div></div>

Kod içerisinde; kırmızı renkle yazdığımız TWİTTER ADRESİNİZ (Örnek:blogokulu) yazan yere kendi twitter adresinizi yazıp gadgeti kaydedip çıkıyorsunuz.JQuery ile sağdan açılan pencere şeklinde twitter kutusu kullanıma hazır.
Blogger için Twitter Kutusu Soldan Açılan Pencere Şeklinde:
Pencerenin soldan açılmasını istiyorsanız 3.Adımda verdiğimiz kodun yerine aşşağıdaki kodu kullanın.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".mdslikebox").hover(function() {$(this).stop().animate({left: "-47px"}, "medium");}, function() {$(this).stop().animate({left: "-346"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">.mdslikebox{background: url("http://img823.imageshack.us/img823/4932/twitterdym.png") no-repeat scroll right center transparent !important;display: block;float: left;height: 275px;padding:0px 4px 0 46px;width: 333px;z-index: 99999;position:fixed;left:-346px;top:25%;}.mdslikebox div{border:none;position:relative;display:block;}.mdslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;left: 6px;text-align: left;z-index: 99999;}.mdslikebox span a{color: #808080;text-decoration:none;}.mdslikebox span a:hover{text-decoration:underline;}</style>
<div class="mdslikebox" style=""><div>
<div id="twitterfanbox"><script type="text/javascript"
>fanbox_init
("TWİTTER ADRESİNİZ");</script>
</div id="twitterfanbox"><span>By <a href="http://www.blogokulu.blogspot.com/">Blog Okulu</a> / <a href="http://blogokulu.blogspot.com/2012/04/blogger-icin-twitter-kutusu-sagdan.html">+Sitene Ekle!</a></span></div></div>

Sosyal Paylaşım Siteleri Açılan Pencere Şeklinde Bir Arada (Facebook-Twitter-Google+-E-posta Takip)

Sosyal Paylaşım Siteleri  Açılan Pencere Şeklinde Bir Arada (Facebook-Twitter-Google+-E-posta Takip)

Önceki yazılarımızda faceboook penceresini  sağdan açılan pencere şeklinde blogumuza eklemeyi sizlere anlatmıştık.Bu yazımızın yoğun ilgi görmesinden dolayı bu defa facebook, twitter, google+  ve e posta ile takip et pencerelerinin bir arada olduğu bir eklentiyi anlatacağız.Blogunuzun ziyaretçi sayısını arttırmada  sosyal paylaşım sitelerinin etkisinden defalarca bahsettiğimiz için eklentinin faydalarından tekrardan bahsetme gereği duymuyorum.Eklentiyi blogunuza eklemek çok basit,
 normal gadget ekleme yöntemi ile  facebook, twitter, google+  ve e posta ile takip et pencerelerini blogunuza ekliyebilirsiniz.
facebook, twitter, google+  ve e posta ile takip et  açılır pencerelerini blogunuza eklemek için;
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip ediyoruz aşşağıdaki kodu kopyalayıp açılan gadgetimizin içerisine yapıştırıyoruz.

<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}/* right side style */#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}#google_plus_right{z-index:10003;background-color:#f2f2f2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px;}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0;}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px;}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0;}#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px;}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0;}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px;}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0;}#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}.box-title1{border:1px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;margin:10px 0;}.enteryouremail{background:#fff !important;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px;}.submitbutton{background:#f2f2f2;border:1px solid #F66303;/*box-shadow*/-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;border-radius:5px;cursor:pointer;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj13CttdaSdE4LpYVqbn0jdGYA7sxlo-YJ8yhyphenhyphenqOMpBXEuC2UfAkDVI_HyGIjzMWOCg-3abRC7hQqXgOdx5bwRcYU3Mz2QafSL9KfGH6CB8OKmnhHXxfxMyhI4M_eOyNurD5fwC0-tcu-M/s1600/helperblogger.com-facebook-icon.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Blog-Okulu/270630239670726&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"   scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS-nR8zHYcMAurRL-vTduZL5YcClMKDFIsAMzYA5Hg1fu0o0MqkGLFrSpPcYoVytlJG0tkDVL_GSVyKtQxrFMVRKzeSwzFgB6TLTrxThe3XdUax44SsnEmMS-wfOOpZbvsN-TQk6CnLh8/s1600/helperblogger.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('blogokulu').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBoe5Mgl6tCg-6OZ2syAqA1KG629QAi0yrzTcaTR-IFqSb-GRRCJTw0UAO6ZJPebiHWLVPQ-btAgebuC2n9gOp_rW9Awl2fsdD_EAs2wvzFG27WeVqDh8lLDIwMJKhDIF4ipWHI2UV4I8/s1600/helperblogger.com-google-plus-icon.png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">Yazılarımızdan E-Mail ile Haberdar Ol:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feeds.feedburner.com/blogokulu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="E-mail adresinizi Buraya Yazınız..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;E-mail Adresinizi Buraya Yazınız...&#39;;}" onfocus="if (this.value == &#39;E-mail ile Haberdar Olmak için...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="blogokulu" name="uri" type="hidden" /><input value="Ekle" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="http://img9.imageshack.us/img9/2365/aboneolkopya.png" /><br /><span><a href="http://blogokulu.blogspot.com/2012/02/facebook-begen-kutusu-ekle-sagdan.html" target="_blank"><b>++Sitene Ekle</b></a></span></div></div></div></div>
Kod içerisinde:
http://www.facebook.com/pages/Blog-Okulu/270630239670726 yerine kendi facebook sayfamızın adresini yazıyoruz.
User('blogokulu') :yazan yere twitter kullanıcı adımızı yazıyoruz.
http://feeds.feedburner.com/BlogOkulu: yerine kendi feedburner adresimizi yazıp gadgetimizi kaydediyoruz.Eklentimiz kullanıma hazır.

Blogger İçin RSS ve Sosyal Simgeler

Blogger İçin RSS ve Sosyal Simgeler

Şekilde gördüğünüz Facebook, Twitter, Google+ ve RSS butonlarını  blog sayfanıza gadget ekleme yöntemi ile ekleyip görüntülenmesini istediğiniz yere sürükleyip bırakabilirsiniz.Tasarım olarak biraz basit ama gayet kullanışlı bir eklenti.Kumanda Paneli>Tasarım>Gadget Ekle> Html/Javascript yolunu takip edip aşşağıdaki kodu kopyalayıp açılan gadgetimizin içine yapıştırıyoruz.

Sosyal Medya İconlarınızı Açılan Kalp İçerisinde Yayınlayın

Sosyal Medya İconlarınızı Açılan Kalp İçerisinde Yayınlayın

Web dünyasında yayılmada, sosyal paylaşım sitelerinin gücünü bilmeyen yoktur, yazdığınız yazıların hızlı bir şekilde ve daha fazla kişiye yayılmasına olanak sağlayacak en önemli araç sosyal paylaşım siteleridir.Yazılarınızı, sosyal paylaşım sitelerinde paylaşmak için blogunuzda kullanacağanız sosyal paylaşım sitelerine ait iconlar, nekadar dikkat çekici olursa, ziyaretçilerin sosyal medyada yazınızı paylaşma olasılığı o kadar artıyor.Bu sebeplerden dolayı, ziyaretçilerinizi cezbedecek, dikkatini çekecek olan, şık tasarımlı kalp içerisine facebook, twitter, pinterest, linkedin gibi sosyal paylaşım sitelerine ait iconlar yerleştirilmiş kalbi blogunuza nasıl ekliyeceğinizi anlatacağız.Ziyaretçi, maus ile kalbin üzerine geldiği zaman, kalp ikiye ayrılıyor ve içerisinden sosyal paylaşım sitelerine ait iconlar çıkıyor.İconlardan birine tıkladığında ziyaretçi sosyal medyada sayfanızı paylaşmış oluyor.Bu eklentiyi blogunuza eklemek için;
Demo Görünüm için Tıklayın
1.Adım:Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip,Widget Şablonlarını Genişlet kutucuğunu işaretledikten sonra kodlar içerisinde Ctrl+F yardımı ile </head> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuız </head> kodundan önceki satıra yapıştırıyoruz.
<!-- Start Heart Bookmarking Gadget Code From http://www.blogokulu.blogspot.com/ -->
<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: &quot;ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee&quot;, onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>
<!-- End Heart Bookmarking Gadget Code From http://www.blogokulu.blogspot.com/ -->
2.Adım:Yine kodlarımız içerisinde </body> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuz </body> kodundan önceki satıra yapıştırıyoruz.
<!-- Start Heart Share Code From http://www.blogokulu.blogspot.com/ -->
<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareHeart&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;pinterest&#39;,&#39;linkedin&#39;,&#39;stumbleupon&#39;,&#39;email&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareheart&#39;});</script><a href="http://www.blogokulu.blogspot.com/">BlogOkulu Gadgets</a>
<!-- End Heart Share Code From http://www.blogokulu.blogspot.com/ -->
Yukarıdaki koda göre eklentimiz sayfamızın sol alt köşesinde olacak.Ama siz eklentinin sol altta değilde başka bir yerde olmasını istiyorsanız, kod içerisinde kırmız ile belirttiğim yerde ufak bir değişiklik yapmanız yeterli olacak.
alt sol için:bottom/left
alt sağ için:bottom/right
üst sol için:top/left 
üst sağ için:top/right 
Son olarak şablonumuzu kaydediyoruz.Kalp içerisinde sosyal medya eklentimiz kullanıma hazır.

Facebook Beğen Kutusu Ekle-Sağdan Açılan Pencere-2

Facebook Beğen Kutusu Ekle-Sağdan Açılan Pencere-2




Daha önce  bir başka facebook sağdan açılan pencere butonunu sayfanıza nasıl ekleyebileceğinizi anlatmıştık.Şimdi anlatacağımız ise aynı işlevi gören, fakat tasarım olarak farklı olan facebook begen kutusu sağdan açılan pencere-2 diye adlandırdığım eklenti.Eğer bir facebook  hayran syfanız yoksa burdan,facebook beğen kutunuz yoksa onu da burdan açabilirsiniz.eklenti hakkında kısaca bilgi veecek olursak;blogunuzda fazla yer kaplamayan, blogunuza tasarım açısından görsel güzellik kazandıran, blogunuza eklediğiniz facebook beğen kutusunu, örnek resimde de gördüğünüz gibi sağdan açılan pencere haline getiren blogunuzu farklılaştıracak güzel bir eklenti.
1.Adım:Bloggerde oturumunuzu açın.Kontrol Paneli>Tasarım>Htmlyi Düzenle yolunu izleyin.Kodlar içerisinde Ctrl+F yardımıyla aratıp </head> kodunu bulun.Aşşağıdaki kodu bulduğunuz </head> kodundan hemen önceki kısma yapıştırın.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
2.Adım Widget Ekleme: Tasarım>Gadget Ekle>Html/Javascript yolunu izliyoruz.Html/Javascript gadgetinin içine aşşağıdaki kodu ekliyoruz.
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=FACEBOOK SAYFANIZA AİT URL&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="
http://blogokulu.blogspot.com/2012/03/facebook-begen-kutusu-ekle-sagdan.html
">++Sitene Ekle</a></span></div></div>
Kod içerisinde;FACEBOOK SAYFANIZA AİT URL diye kırmızı renkle belirttiğimiz yere kendi facebook URL adresinizi(Örnek:http://www.facebook.com/pages/Blog-Okulu/270630239670726) yazıyorsunuz ve kaydediyorsunuz.Eklentimiz kullanıma hazır.
Videolu Anlatım:

Blogger "Twitter" Butonu Ekle (15 Farkli Eklenti)

Blogger "Twitter" Butonu Ekle (15 Farkli Eklenti)

Daha önce twitterin süzülerek gerçek bir kuş gibi uçan kuşunu blogunuza nasıl ekleyebileceğinizi anlatmıştık.Şimdi ise birbirinden farklı  animasyonlu 15 adet twitter butonunu biraraya toplayıp hoşunuza gideni seçip blogunuza ekleme imkanını sizlere sunuyoruz.Yapmanız gereken işlem çok basit, Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıda beğendiğiniz twitter butonunun karşısındaki kodu kopyalayıp açılan gadgetinizin içine yapıştırmak. Kod içerisinde username=blogokulu yazan yere kendi twitter adresinizi yazın, width:150 (genişlik) ve height:150 (yükseklik) değerlerini değiştirip kendi isteğinize göre butonları boyutlandırabilirsiniz.



Widget for Blogger by blogokulu.blogspot.com/a>
Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>


Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>

Widget for Blogger by blogokulu.blogspot.com/a>