Disqus for Blog Okulu

Bumerang - Yazarkafe

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

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 İç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.