Blogger Widgets etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger Widgets etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

23 Şubat 2014 Pazar

Etiket Kategorinizi Küçük Resimlerle Sergileyin (Popüler Yayınlar Stili)

Etiket Kategorisini Popüler Yayınlar Gibi Yapma

Etiketler yayınlarınızın kolayca kategorilere ayrılmasını sağlayan bir yoldur. Bu eklenti sayesinde Blogger etiket kategorilerinizi Küçük Resimler ile istediginiz etiketi sidebarınızda ayrıntılı bir şekilde sergileyebileceksiniz. Eklenti sizin kendi belirlediğiniz bir etiket adıyla popüler yayınlar Stili dizaynıyla gösterir. Etiket sayısını, resim boyutlarını vb. kendiniz ayarlayabildiğiniz bir eklenti. Göze hoş ve güzel gelen bir etiket eklentisi. Okuyucular, örneğin Sosyal Medya üzerine olan tüm yayınlarınızı tek seferde sidebarınızda görüntüleyebilir. Farklı yaratıcı kullanımları denemekten çekinmeyin!



Blogger Kontrol Paneli ► Şablon ►HTML'yi Düzenle tıklıyoruz.
CTRL+F tuşuna basıp ]]></b:skin> kodunu buluyoruz ve aşağıdaki kodları hemen üstüne kopyalayıp yapıştırıyoruz.

img.label_thumb{float:left;margin-right:10px!important;height:65px;width:65px;border:1px solid #5e6367;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.4);-moz-box-shadow:0 1px 1px rgba(0,0,0,.4);}
ul.label_with_thumbs li{min-height:65px;margin-bottom:0;border-bottom: 1px solid #5e6367;padding:8px 0;}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 10px 2px 0;padding:0;}
.label_with_thumbs li{list-style:none;color:#888;font:11px georgia, Arial, Helvetica;padding-left:0!important;}
.label_with_thumbs a{text-decoration:none;font:12px Oswald, georgia, Arial;font-weight: 400;}
.label_with_thumbs strong{padding-left:0;}

Tekrar CTRL+F tuşuna basın ve </head> kodunu bulun aşağıdaki kodları hemen üstüne kopyalayıp yapıştırın.

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href}if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}var thumburl;try{thumburl=entry.media$thumbnail.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg'}var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Ocak";monthnames[2]="Şubat";monthnames[3]="Mart";monthnames[4]="Nisan";monthnames[5]="Mayıs";monthnames[6]="Haziran";monthnames[7]="Temmuz";monthnames[8]="Ağustos";monthnames[9]="Eylül";monthnames[10]="Ekim";monthnames[11]="Kasım";monthnames[12]="Aralık";document.write('<li class="clearfix">');if(showpostthumbnails==true)document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('')}else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('')}}var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1}if(showcommentnum==true){if(flag==1){towrite=towrite+' | '}if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1}if(displaymore==true){if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">Devamını Oku »</a>';flag=1}document.write(towrite);document.write('</li>');if(displayseparator==true)if(i!=(numposts-1))document.write('')}document.write('</ul>')}
//]]>
</script>

Şablonu Kaydet diyoruz ve Blogger Paneline giriyoruz oradan Yerleşim sonra eklentiyi görmek istedigimiz yere Gatget ekle sonra HTML/JavaScript'i buluyoruz. Sonra aşağıdaki kodları istediğiniz şekilde özelleştirerek içine kopyalayıp yapıştırın.
HTML/JavaScript

<script type='text/javascript'>
var numposts = 8;
var showpostthumbnails = true;
var displaymore = true;
var displayseparator = true;
var showcommentnum = true;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script>
<script type="text/javascript" src="/feeds/posts/default/-/Etiket Adı?published&alt=json-in-script&callback=labelthumbs">
</script>

Özelleştirme

  • Kırmızı renkle işaretlediğim Etiket Adı bölümüne istediğiniz Label/Etiketinizi yazın.
  • var numposts ← Etiket adeti kaç tane olmasını istiyorsak ayarlıyoruz.
  • var showpostthumbnails ← Resimleri göster/gösterme, true/false
  • var displaymore ← Devamını Oku göster/gösterme, true/false
  • var displayseparator ← ekran ayırıcı göster/gösterme, true/false
  • var showcommentnum ← Yorum sayısını göster/gösterme, true/false
  • var showpostdate ← Tarih göster/gösterme, true/false
  • var showpostsummary ← Yazı özetini göster/gösterme, true/false
  • var numchars ← Resim boyutlarını ayarlamak için bir boyut seçiyoruz.

  • Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

    9 Şubat 2014 Pazar

    Blogger akordiyon menü eklentisi

    Blogger akordiyon menü eklentisi

    Akordiyon Menü normal menülerden farklı olarak daha az alan kaplamasından dolayı gerçekten kullanışlı bir menü. Bu menüde Blogunuzun belli bölümlerinin görünmesini sağlayabilirsiniz. Bağlantılarınızın düzgün, temiz ve uzun bir liste şeklinde görüntülemek için etkili bir yol. JQuery ve Hareket Hızı Plugini kullanılarak yaratılmış bir eklentidir. Blogunuz ile uyumlu hale getirmek için bazı stil ve komut bölümlerini düzenleyebilir özelleştirebilirsiniz. Harika bir genişlet / Daralt Özelliği vardır. Kullanıcı tıklattığında varsayılan içindeki tüm içerik sekme bölümü genişleterek görüntülenir. Websitenizin, blogunuzun Sidebar bölümünde hertürlü içerik için kullanılabilir ilgi çekici güzel bir eklenti.


    Tarayıcı uyumluluk sorunları hakkında endişelenmenize gerek yok. IE8 + dahil olmak üzere tüm büyük tarayıcılar ile uyumludur.
    Aşağıdaki adımları takip edin:
    1. Blogger > şablon
    2. Şablonunuzu Yedekleyin!
    3. HTML'yi Düzenle tıklayın
    4. Ctrl+F yardımı ile </head> kodunu bulun.
    5. Bulduğunuz kodun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
    <script type="text/javascript">
    $(document).ready(function(){$.easing.def="easeOutBounce";$('li.button a').click(function(e){var dropDown=$(this).parent().next();$('.dropdownmenu').not(dropDown).slideUp('slow');dropDown.stop(false,true).slideToggle('slow');e.preventDefault()})});
    </script>

    6. </b:skin> kodunu bulun. kodu genişletmek için siyah oku (►) tıklayın.
    compressed blogger stylesheet

    7. </b:skin> kodunun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.
    ul.container{background:#26292c;width:98%;border:2px solid #7E7E7E;box-shadow:0 2px 7px #666;margin:0 auto;padding:2px 3px 0;}
    li.menu{width:100%;padding:5px 0;}
    li.button a{color:#b5bec4;display:block;font-family:Arial,georgia,sans-serif,Helvetica;font-size:13px;overflow:hidden;position:relative;width:100%;text-transform:capitalize;padding:0 0 5px;}
    li.button a:hover{text-decoration:none!important;}
    li.button a span{right:0;top:0;position:absolute;color:#ccc;display:block;}
    .dropdownmenu{display:none;padding-top:5px;width:100%;}
    .dropdownmenu li{border:1px solid #7E7E7E;color:#CCC;margin:5px 0;padding:4px 10px;}
    .dropdownmenu li:hover{border:1px solid #ccc;text-decoration:none;}
    .dropdownmenu li a:hover{text-decoration:none;}

    Not: Yukarıdaki bağlantıları, yazı tiplerinin görünümünü ve renk kodlarını düzenleyerek özelleştirelebilirsiniz. 8. şablonunuzu kaydedin.

    9. Akordiyon menüyü ekleme


    1. Blogger kontrol paneli > Yerleşim
    2. Gadget Ekle
    3. HTML/JavaScript seçin
    4. İçine aşağıdaki HTML kodunu kopyalayıp yapıştırın:

    <ul class="container">
    <!- BİRİNCİ SEKME -->
    <li class="menu">
    <ul>
    <li class="button"><a href="#" >BURAYA SEKME BAŞLIĞI EKLE<span>▼</span></a></li>
    <li class="dropdownmenu">
    <ul>
    <li>1. <a href="http://....blogspot.com/p/örnek.html" >Örnek</a></li>
    <li>2. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
    <li>3. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
    <li>4. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
    <li>5. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <!- İKİNCİ SEKME -->
    <li class="menu">
    <ul>
    <li class="button"><a href="#" >BURAYA SEKME BAŞLIĞI EKLE<span>▼</span></a></li>
    <li class="dropdownmenu">
    <ul>
    <li>1. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
    <li>2. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
    <li>3. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
    <li>4. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
    <li>5. <a href="BURAYA LiNK EKLE">BURAYA LINK METNİNİ EKLE</a></li>
    </ul>
    </li>
    </ul>
    </li>
    </ul>

    • Kırmızı renkle işaretlediğim bölümlere istediğiniz menü başlık isimlerini verin. BURAYA SEKME BAŞLIĞI EKLE
    • Menüye link vermek için Mavi renkle işaretlediğim yerlere linklerinizi yazın. BURAYA LiNK EKLE
    • Sarı renkle işaretlediğim bölümlerede link isimlerinizi yazın. BURAYA LINK METNİNİ EKLE
    • Örnekte sadece iki satır var ama siz bunu istediğiniz kadar çoğaltabilirsiniz. Son </ul> kodundan önce menünüze eklemeler yapabilirsiniz.

    Not:
  • Eğer uyguladınız ve düzenli olmadıysa 7. Adımdaki </b:skin> alanına yerleştirdiğimiz Style kodlarını başına <style type="text/css">, sonuna </style> ekleyerek 9. adımdaki eklediğimiz kodların üzerine ekliyoruz.

  • Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

    6 Şubat 2014 Perşembe

    Blogger Otomatik Devamını Oku Eklentisi

    otomatik_Devamini_Oku_Eklentisi

    Blogger için küçük resimli Otomatik Devamını Oku Eklentisi blogunuzun düzenli görünmesini sağlayan bir eklenti. Anasayfada yazı içerisindeki resimlerin boyutunu zevkinize göre otomatik küçültüp ve yazının sadece sizin istediğiniz kadarını gösterir. Bütün yazılılarınız anasayfanızda belli bir düzen içerisinde görünür. Normalde manuel olarak yaptığınız yazının belli kısmının anasayfada görüntülenmesi işini, her yazıda tek tek "More" tıklayıp kesmenize gerek kalmaz.


    Blogger yazılarınızda Otomatik Devamını Oku özelliğini kullanma


    1. Blogger kontrol paneli > şablon > HTML'yi Düzenle
    2. Kod alanı içinde herhangi bir yere tıklayın, Ctrl+F yardımı ile aşağıda bulunan kodu aratıp bulun.
    <data:post.body/>

    Not: Enter'a bastıktan sonra, birden çok kez bu kodu bulacaksınız ama <div class='post-body entry-content'> nin hemen altındaki ilk sıradaki aradığımız kod!.

    post-body-entry-content

    3. ve bu kodu silip yerine aşağıdaki kodları yerleştirin.
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    </b:if>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div class='readmore'>
    <a expr:href='data:post.url'>Devamını Oku</a>
    </div>
    </b:if>
    </b:if>

    4. Daha Sonra şu Kodu Bulun:
    </head>

    5. Hemen Üzerine Aşağıdaki kodları ekleyelim:
    <script type='text/javascript'>
    summary_noimg = 550;
    summary_img = 450;
    img_thumb_height = 150;
    img_thumb_width = 200;
    img_thumb_nosrc = "Buraya Resimsiz konularınızda görülecek resim linkinizi ekleyin";
    img_alt_nosrc = "Buraya Resimsiz konularınızda görülecek resmin tanım etiketi";
    </script>
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }
    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
    if(img.length<=1) {
    imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" alt="'+img_alt_nosrc+'"/></div>';
    summ = summary_noimg;
    }
    if(img.length>=1) {
    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" alt="'+img[0].alt+'"/></span>';
    summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
    //]]>
    </script>

    Özelleştirme


    ● Karakter sayısını değiştirmek için mavi renkle işaretlediğim bölümleri değiştirin.
    summary_noimg = 550; Resim olmadan, resimsiz Karakter sayısı.
    summary_img = 450; Kücük Resimli (thumbnail) Karakter sayısı.

    ● Konuya eklediğiniz ilk resmin anasayfada hangi boyutlarda thumbnail (küçük resimler) istiyorsanız, kırmızı değerleri (150X200) değiştirin.
    img_thumb_height = 150; küçük resmin (thumbnail) yükseklik boyutu.
    img_thumb_width = 200; küçük resmin (thumbnail) genişliği.

    6. Değişiklikleri kaydetmek için şablonu Kaydet butonunu tıklayınız. Bu kadar.

    Not!!!: Konu 5 kasım 2014 tarihinde tekrar düzenlendi. Ve kodlar sorunsuz çalışıyor. Blogunuza bu eklentinin uygulamasının zor olduğunu biliyorum. Ama bu kodların çalışmadığı anlamına gelmez. Yorum kısmına "yapamadım, çalışmıyor, olmuyor" yazmak yerine Şablonunuzu yedekleyip yedeğinizi bana Blogger yardım sayfamdan gönderin. Ben şablonunuza bu eklentiyi uygular size geri gönderirim ve sizde "güzel bir yorum" yapabilirsiniz.
    Barış, huzur, sağlık ve bereket Arkadaşlar! Herkeze kolay gelsin. iyi bloglamalar...

    4 Şubat 2014 Salı

    CSS Drop Down Açılır Menü Eklentisi


    Bloggerda kullandığınız temanızda profesyonel bir menü olsun istiyorsanız; Bu CSS Drop Down Açılır Menü Eklentisi tam size göre.Blogger kullanıcılarına uygun yatay menü css ile oluşturulmuş alt açılır menülere de sahip.Bu menüyü blogunuza ekleyerek isterseniz etikete bağlı olarak da kullanabilirsiniz.
    Css ile oluşturulmuş bu Menü, jQuery yada javascript kullanmaz, blogunuzun açılış hızına kesinlikle tesir etmez sade ve şık bir eklenti. Benim blogger temamda üst bölümde örneğini görebilirsiniz. Gelelim okuyucularınızın ve blogger kullanıcıların hoşuna gidecek bu sade eklentiyi nasıl ekleyeceğinize.CSS Drop Down Açılır Menü kurulumu için:

    • Blogger panelinize giriş yapın > Şablon > HTML'yi Düzenle
    • Ctrl+F yardımı ile aşağıda kodu aratıp bulun.

    ]]></b:skin>

  • Bulduğunuz kodun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

  • .menus,.menus *{list-style:none;list-style-type:none;line-height:1.0;margin:0;padding:0;}
    .menus ul{position:absolute;top:-999em;width:100%;}
    .menus ul li{width:100%;}
    .menus li:hover{visibility:inherit;}
    .menus li{float:left;position:relative;}
    .menus a{display:block;position:relative;}
    .menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99;}
    .sf-shadow ul{-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px;padding:0 8px 9px 0;}
    .menus .sf-shadow ul.sf-shadow-off{background:transparent;}
    .sf-with-ul{padding-right:20px;min-width:1px;}
    .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:15px 10px 0 0;}
    .menu-secondary-container{position:relative;height:44px;z-index:300;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOXEZjddAqXU3EDp6iTda23uguaEV_qcz_Z3vgiCjDYkvXmk5WvJKAvo8UbWUbwCrs_IsQwHMJ1PTz_je0j64IMRPdo6nD6QVyGAVKHKibt28JFMRyaFz7PwFmuSGOfLnv0vA6mxhs6Y/s0/menu-secondary-bg.png) left top repeat-x}
    .menu-secondary li a{color:#FFF;text-decoration:none;text-transform:uppercase;font:normal 13px/13px georgia,arial,sans-serif;padding:16px 15px 15px;}
    .menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeOXEZjddAqXU3EDp6iTda23uguaEV_qcz_Z3vgiCjDYkvXmk5WvJKAvo8UbWUbwCrs_IsQwHMJ1PTz_je0j64IMRPdo6nD6QVyGAVKHKibt28JFMRyaFz7PwFmuSGOfLnv0vA6mxhs6Y/s0/menu-secondary-bg.png) left -144px repeat-x;outline:0;}
    .menu-secondary li li a{color:#fff;background:#666;text-transform:none;font-weight:400;margin:0;padding:10px 15px;}
    .menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#fff;background:#FA7029;outline:0;}
    .menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px;}
    .menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:15px 13px 0 0;}
    .menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0;}
    .wrap-menu-secondary .sf-shadow ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1iZx4dL3pHitgPM6j0XLuZE0AuIPlMLAphWcjSEYcWwaEfnwmC2D2e9uYJp4VSPyy8vpQq6zjYXdVOfnuTCOmyn7NM26H8-oSB0D2cbo_BlfMHBYNvOj54iGUxY_8N59v8ltKeCVAHXk/s0/menu-secondary-shadow.png) no-repeat bottom right;}
    .menus li:hover li ul,.menus li.sfHover li ul,.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em;}
    .menus li li:hover ul,.menus li li.sfHover ul,.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0;}
    .menu-secondary ul{min-width:160px;}
    .span-24,div.span-24{width:960px;margin:0;}
    input.span-24,textarea.span-24{width:938px!important;border-left-width:1px!important;border-right-width:1px!important;padding-left:5px!important;padding-right:5px!important;}
    div.span-24{float:left;margin-right:10px;}

    • Kaydet butonuna tıklayıp bu ekrandan çıkın.
    • Daha sonra Blogger paneline tekrar giriş yapın. Yerleşim> Blog Kayıtlarının hemen üzerine Gadget Ekle>Html/Javascript'i seçin.
    • Aşağıdaki kodları Online HTML Editör ile isteginize göre ayarlayarak kopyalayıp yapıştırın ve kaydedin.

    <div class='span-24'>
    <div class='menu-secondary-container'>
    <ul class='menus menu-secondary'>
    <li><a href='http://meftun-demo.blogspot.com'>ANA SAYFA</a></li>
    <li><a href='#'>BLOGGER</a>
    <ul class='children'>
    <li><a href='http://meftunmede.blogspot.com/search/label/Blogger%20Eklentileri'>Blogger Eklentileri</a></li>
    <li><a href='http://meftunmede.blogspot.com/search/label/Html%20Kodlar%C4%B1'>Html Kodları</a></li>
    <li><a href='http://meftunmede.blogspot.com/search/label/%C4%B0nternet'>İnternet</a></li>
    </ul>
    </li>
    <li><a href='#'>DOWNLOADS</a>
    <ul class='children'>
    <li><a href='http://meftunmede.blogspot.com/search/label/Filmler'>Filmler</a></li>
    <li><a href='http://meftunmede.blogspot.com/search/label/Programlar'>Programlar</a></li>
    </ul>
    </li>
    <li><a href='#'>ARAÇLAR</a>
    <ul class='children'>
    <li><a href='http://meftunmede.blogspot.com/2013/02/online-html-editor.html'>Html Editor</a></li>
    <li><a href='http://meftunmede.blogspot.com/2013/03/html-renk-kodu-bulucu.html'>Renk Kodu Bulucu</a></li>
    <li><a href='http://meftunmede.blogspot.com/2014/01/kaynak-kodu-bicimlendirme-araci.html'>Kaynak Kodu Biçimlendirici</a></li>
    <li><a href='http://meftunmede.blogspot.com/2014/01/web-sitenizin-hizini-olcun.html'>Web Sitesi Hız Testi</a></li>
    </ul>
    </li>
    <li><a href='http://meftunmede.blogspot.com/search/label/Yemek%20Tarifleri'>YEMEK TARİFLERİ</a></li>
    <li><a href='#'>SOSYAL MEDYA</a>
    <ul class='children'>
    <li><a href='http://meftunmede.blogspot.com/search/label/Sosyal%20Medya'>Eklentiler</a>
    <ul class='children'>
    <li><a href='http://meftunmede.blogspot.com/search/label/Jquery'>Jquery</a></li>
    <li><a href='http://meftunmede.blogspot.com/search/label/Slider'>Slider</a></li>
    <li><a href='http://meftunmede.blogspot.com/search/label/Slayt'>Slayt</a></li>
    </ul>
    </li>
    <li><a href='http://meftunmede.blogspot.com/search/label/Blogger%20Widgets'>Blogger Widgets</a></li>
    </ul>
    </li>
    <li><a href='http://meftun-demo.blogspot.com/p/iletisim.html'>REKLAM VER</a></li>
    </ul>
    </div>
    </div>

    Özelleştirme

    1. Kod kısmında Kırmızı renkle işaretledigim bölümlere istediğiniz menü isimlerini veriniz.
    2. Menüye link vermek için Mavi renkle işaretledigim yerlere linkleri yazınız.
    3. Eklentinin style kodlarıyla oynayarak Renk, yükseklik "height" ve genişlik "width" bölümlerini isteğinize göre ayarlayabilirsiniz.

    Önemli Not!!!

    Blogger'ın kendi orjinal şablonlarından birini kullanıyorsanız. Menünün çalışması için aşağıdaki adımları uygulayın.
    1. Blogger Kontrol panelinde > Şablon > HTML'yi Düzenle
    2. Ctrl+F yardımı ile aşağıdaki kodları aratıp bulun ve silin.
    .tabs-inner .widget li a {
    display: inline-block;
    margin: 0;
    padding: .6em 1.5em;
    font: normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
    color: #ffffff;
    border-top: 1px solid #2d3037;
    border-bottom: 1px solid #2d3037;
    border-left: 1px solid #2d3037;
    height: 16px;
    line-height: 16px;
    }
    .tabs-outer {
    overflow: hidden;
    position: relative;
    background: #29aae1 url(//www.blogblog.com/1kt/awesomeinc/tabs_gradient_light.png) repeat scroll 0 0;
    }
    .tabs-inner .widget li:last-child a {
    border-right: 1px solid #2d3037;
    }

    3. /* Tabs bölümünden sildiğiniz bu kodların yerine aşağıdaki kodu ekleyin ve kaydedin.

    .tabs .widget ul, .tabs .widget ul {
    margin: 0px;
    padding: 0px;
    list-style: none outside none;
    overflow: visible;
    }

    Bu kadar. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

    31 Ocak 2014 Cuma

    Blogger çoklu sekmeli navigasyon menü

    Blogger çoklu sekmeli navigasyon menü

    ●Blogger için yeni çoklu sekmeli navigasyon menü (Multi tabbed widget)

    Blogger için yeni Multi Sekmeli Widget tamamen özelleştirilebilir ve düzenlenebilir. Aslında wordpress menü sekmesi olan bu eklenti, blogger için yeniden düzenlenmiştir. Tek fark, daha kolay ve hoş bir tasarım. Sekmeli Navigasyon Menüsü (Multi Tab Navigation System) özellikle sidebarı dar olanlar için şık, kullanışlı ve alternatif bir menü. Blogunuzun sidebarına ekleyeceğiniz bu eklenti ile tek bir gadgetlık alana birden fazla gadget sığdırabileceksiniz. umarım begenirsiniz. Şimdi işe koyulalım...


    Blogger'a ekleme
    Lütfen şu adımları izleyin
    1. Blogger'a Git > Tasarım > HTML'yi Düzenle 2. Şablonunuzu yedekleyin! 3. Ctrl+F yardımı ile ]]></b:skin> kodunu bulun. 4. Bulduğunuz kodun hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.
    .tabs-widget{height:33px;margin:0 0 10px;padding:0;}
    .tabs-widget li{list-style-type:none;float:left;margin:0 0 0 1px;padding:0;}
    .tabs-widget li a{color:#FFF;background:none repeat scroll 0 0 #282C2F;display:block;text-decoration:none;font:14px oswald,Helvetica,Sans-serif;box-shadow:4px 2px 9px #999;padding:8px 20px;}
    .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background:#38434B;color:#FA7029;text-decoration:none;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .2s ease 0;}
    .tabs-widget-content{background:none;}
    .tabviewsection{margin-top:10px;margin-bottom:10px;position:relative;left:0;}

    5. "Ctrl+F" yardımı ile alttaki kodu bulun;
    <div class='column-right-inner'>

    Ya da bu (başka şablonlarda degişebilir).
    <div id='sidebar-wrapper'>

    ve bulduğunuz kodun altına, aşağıdaki kodu yapıştırın
    <div class='tabviewsection'>
    <script type='text/javascript'>
    jQuery(document).ready(function($){ $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a&quot;).addClass(&quot;tabs-widget-current&quot;).show(); $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id:first&quot;).show(); $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).click(function() { $(&quot;ul.tabs-widget-widget-themater_tabs-1432447472-id li a&quot;).removeClass(&quot;tabs-widget-current a&quot;); $(this).addClass(&quot;tabs-widget-current&quot;); $(&quot;.tabs-widget-content-widget-themater_tabs-1432447472-id&quot;).hide(); var activeTab = $(this).attr(&quot;href&quot;); $(activeTab).fadeIn(); return false; }); });
    </script>
    <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'>
    <li><a href='#widget-themater_tabs-1432447472-id1'>Popüler Yayınlar</a></li>
    <li><a href='#widget-themater_tabs-1432447472-id2'>Label</a></li>
    <li><a href='#widget-themater_tabs-1432447472-id3'>Blog Arşivi</a></li>
    </ul>

    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:section class='sidebar' id='sidebartab1' preferred='yes'>
    <b:widget id='PopularPosts1' locked='false' title='' type='PopularPosts'>
    </b:section></div>

    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'>
    <b:section class='sidebar' id='sidebartab2' preferred='yes'>
    <b:widget id='Label1' locked='false' title='' type='Label'>
    </b:section></div>

    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'>
    <b:section class='sidebar' id='sidebartab3' preferred='yes'>
     
    <b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive'>
    </b:section></div>
    </div>
    <div style='height:5px;clear:both;'/>

    6. Şablonunuzu kaydettikten sonra Sayfa ögelerinizi görüntüleyin sütununuzun en üst kısmında Sekmeli Navigasyon Menüsünü görebilirsiniz. Menü başlıklarına tıklayarak eklenen gadgetleri düzenleyebilirsiniz.
    Sekmeli Navigation tema

    Eklentinin style kodlarıyla oynayarak Renk, yükseklik "height" ve genişlik "width" bölümlerini isteğinize göre ayarlayabilirsiniz. Mavi renkle işaretledigim bölümler örnektir (Popüler Yayınlar, Label, Blog Arşivi). Siz o bölümlere istediğiniz gadget HTML kodlarını ekleyebilirsiniz. Son Yazılar , Son yorumlar , Abone kutusu gibi. Örneğin Popüler yayınlar bölümünde Twitter Takipçi kutusu olsun istiyorsunuz; önce yeni gadgetinizi oluşturuyorsunuz. Sonra HTML kodlarınızdan gadgetinizin id'sini bulup kopyalayıp tab kodları arasına yapıştırıyorsunuz.

    Örnek:
    <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'>
    <b:section class='sidebar' id='sidebartab1' preferred='yes'>
    <b:widget id='HTML1' locked='false' title='' type='HTML'>
    </b:section>
    </div>

    Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

    9 Ocak 2014 Perşembe

    Twitter Takipçi kutusu - Yeni


    ♦ Blog ve Web Siteleri İçin Yeni Twitter Takipçi kutusu
    ♦ New Twitter Followers/FanBox Widget With Faces For Blog And Website

    Öncelikle belirtmek isterim; bu facebook gibi Twitter inc resmi eklentisi/Widget değildir. Bu eklenti MusicPaax tarafından oluşturulmuştur. Sitenizin tasarımına uyacak şekilde Twitter'da takip kutusu eklentisini özelleştirerek kullanılabilir seçenekleri vardır. Bu Facebook like-box tarzı widget basit ama güçlü bir jQuery eklentisi. Daha önce Mark carey tarafından geliştirilen eklenti son bulmasından sonra bu güzel bi alternatif. Yandan açılır sosyal medya takipçi Kutusu 3 in 1 yazımda çok sorulan "twitter çalısmıyor" sorununu bu eklentiyle çözecez.


    Özellikler:
    1.) Facebook gibi basit Takip Kutusu.
    2.) Takipci resimleri
    3.) Takip et Buttonu.
    4.) Hızlı yüklenme, Harika görünüm ve özellikler.
    5.) IFrame ve JavaScript ile 2 Style Kodu.
    6.) Tamamen özelleştirilebilir.
    7.) Açık Kaynak.
    8.) Kısa ve anlaşılır Kodu.
    9.) Ekstra CSS de ekleyebilirsiniz.
    10.) Çapraz Tarayıcı Çalışma.
    Açıklama:
    1.) İlk önce bu siteyi açalım. (Twitter FanBox).
    2.) Şimdi aşağıdaki sayfa açılacak, burada "Kod Oluştur" Butonuna basıyoruz.
    Kod olustur

    3.) Twitter Apps sayfasına yönlendirileceksiniz, "Giriş Yap" Buttonuyla hesabınıza giriş yapın ve uygulamaya izin verin.
    giris yap

    4.) Aşağıdaki ekran görüntüsünde görüldüğü gibi şimdi birkaç saniye için bu sayfayı göreceksiniz. Bekle ve sonraki Adıma geç...
    yonleniyorsunuz

    5.) Twitter FanBox ana sayfamıza geldik, isteğinize göre formu doldurun ve kodunuzu oluşturun.
    twitter fanbox

    Blogger'a Ekleme?
    1. Kumanda paneline giriş yapın.
    2. Yerleşim › Gadget ekle › HTML/Javascript bulun.
    3. Oluşturduğunuz kodu kopyalayıp yapıştırın.
    Not:
    Eğer eklentinin altındaki footer bölümünde yazan "MatiasMX tarafından plugin" yazısını istemiyorsanız, aşağıdaki iframe yada javascript kodlarından birini kullanın!
    Frame Kodu:
    Bu Twitter Takipçileri Kutusu Frame kodu içinde kullanımı.
    <iframe src="http://meftun-mede.googlecode.com/svn/trunk/twitter.html?user=MeftunMEDE&no=20&h=239&t=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:239px;" allowTransparency="true"> </iframe>

    JavaScript Kodu:
    Bu Twitter Takipçileri Kutusu JavaScript versiyonu.
    <div id="twitter-box"></div> <script> var tw_user = 'MeftunMEDE'; var tw_width = 290; var tw_height = 239; var no_face = 20; (function() { var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true; tw_box.src = 'http://meftun-mede.googlecode.com/svn/trunk/tw.js'; (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box); })(); </script>

    Özelleştirme:
    1.) Twitter kullanıcı adını tw_user= MeftunMEDE değiştirin.
    2.) Width,Height,No face ve Color alanlarını arzunuza göre değiştirebilirsiniz.
    3.) Style kodunda daha fazla CSS stil kolaylıkla ekleyebilirsiniz.
    4.) kaydedin ve bitti.

    6 Ocak 2014 Pazartesi

    Blogger Lightbox Eklentisi

    Blogger Lightbox Eklentisi

    Blogger Resimleri İçin Işık Kutusu Görünümü
    Blogger Lightbox Eklentisi

    Blog yayınındaki bir resim tıklandığında, söz konusu resim blog'unuzun üzerinde yer paylaşımlı olarak daha büyük bir görünümde sunulur. Bu görünüme ışık kutusu adı verilir. İster doğrudan bilgisayarınızdan yüklenmiş olsun isterse başka bir kaynaktan bağlanılmış olsun tüm blog resimleri bu ışık kutusu görünümünde gösterilir.
    Blog yayınında birden fazla resim varsa ışık kutusu görünümü açıldığında söz konusu resimlerin tümüne gözatılabilir.

    Kimi zaman görüntüleme için gerekli ayarlamayı yapsak bile lightbox özelliği aktif olmuyor. Bunun nedeni tema sırasında gereksiz görülüp silinen temel kodlar yada yeni tema ekleyip özelliştirirken bu özelliği yok ediyoruz.
    Sorunun çözümü için aşağıdaki adımları takip edin.

    Adım -1

    1- Ayarlar › Yayınlar ve Yorumlar kısmına gelin ve Resimleri Lightbox ile gösterin ? şıkkına 'Evet' deyip kaydedin.

    2- Kumanda Paneli › Blog Adı › Şablon › Html'yi Düzenle (Devam et) yolunu izleyin.
    ve daha sonra aşağıdaki kodu Ctrl+F komutu ile bulun.

    <data:post.body/>

    Yukarıdaki kodu bulduysanız onu aşağıdaki kodlarla değiştirin.
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'><data:post.body/></div>

    Adım -2

    1- Tekrar Kumanda Paneli › Blog Adı › Şablon › Html'yi Düzenle (Devam et) yolunu izleyin ve Ctrl+F komutu ile aşağıdaki kodun tema kodlarınız arasından olup olmadığını kontrol edin.
    <b:include data='blog' name='all-head-content'/>

    Bu kod bir tür bağlantı görevi görüyor. Çünkü temanızda olmadığı takdirde lightbox ve arama açıklaması özellikleri çalışmıyor.

    Eğer bu koddan varsa müdahale etmeden sayfayı kapatabilirsiniz. Eger bulamadıysanız, kodu, <head> etiketinin hemen altına ekliyoruz. Ve işlem tamamdır. Lightbox'unuz hayırlı olsun.Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

    3 Ocak 2014 Cuma

    Blogger iletişim formu oluşturma

    Blogger iletişim formu oluşturma


    Merhaba bu yazımda sizlerle google dökümanlarını, kullanarak iletişim formu oluşturacaz.
    Her blogda olması gereken iletişim sayfası ziyaretcilerin sizlerle iletişim kurması için önemli bir ayrıntıdır.İnternette biraz arama yaptığınızda iletişim formu oluşturabileceğiniz bir çok ücretsiz servisin olduğunu göreceksiniz. Ancak, ücretsiz olmaları sebebiyle size verdikleri hizmeti her an kesebileceklerini de unutmamanız gerekir. Eğer düzgün çalışan ve güvenli bir iletişim formuna sahip olmak istiyorsanız tek yapmanız gereken Google hesabına sahip olmak ve bir kaç dakikanızı ayırarak Google Dokümanlar'da bir form oluşturmak. Böylelikle size ulaştırılan görüş veya sorulara cevap verebileceksiniz. Google dökümanları ile iletişim formu oluşturma uygulamasına başlayalım.

    1. Adım : Google hesabımızı açıyoruz.
    2. Adım : Google Dökümanları giriş yapıyoruz.
    3. Adım : oluşturu tıklayarak açıyoruz.
    Google dökümanları ile iletişim formu ekleme

    4. Adım : Açılan pencerede form yazan yeri tıklıyoruz.
    Google dökümanları ile iletişim formu  ekleme

    5. Adım : başlıgımızı ve şablonumuzu seçdikden sonra tamam butonuna tıklıyoruz.
    Google dökümanları ile iletişim formu ekleme

    6. Adım : resimde gördüğünüz gibi yada kendinize uygun şekilde yazın.
    Google dökümanları ile iletişim formu ekleme

    7. Adım : ilk öğemizi hazırladık ikinci öğemizi hazırlamak için öğe ekle butonuna tıklıyoruz.
    Google dökümanları ile iletişim formu ekleme

    8. Adım : ikinci öğemizi oluşturduk. E-mail adresi zorunlu olması için "yanıtlanması zorunlu soru" kutucuğunu işaretleyiniz.
    Google dökümanları ile iletişim formu ekleme

    9. Adım : 2'ci öğe işlemimizi bitirdikden sonra, 3'cü öğe işlemine başlamak için tekrardan öğe ekle butonuna tıklıyoruz.
    Google dökümanları ile iletişim formu ekleme

    10. Adım : Metin yazan yeri tıklayarak açıyoruz.
    Google dökümanları ile iletişim formu ekleme

    11. Adım : metin yazan yeri tıkayarak açtıkdan sonra, paragraf yazan yeri tıklıyoruz. paragrafı tıklamamızın sebebi, mesaj yazılacak bölümü oluşturmamıza yaradığı için şeçiyoruz.
    Google dökümanları ile iletişim formu ekleme

    12. Adım : 3 öğeli google dökümanlar iletişim formumuz bitmişdir. ben 3'lü öğe iletişim formu oluşturdum sizler isterseniz bunu çoğaltabilirsiniz. veya farklı bir şekilde yapabilirsiniz.
    Google dökümanları ile iletişim formu ekleme

    13. Adım : sayfamızı aşağı indirerek aşağıdaki formu gönder butonuna tıklıyoruz.
    Google dökümanları ile iletişim formu ekleme

    14. Adım : formu gönder butonuna tıkladıkdan sonra açılan pencerede. ekle butonuna tıklıyoruz.
    Google dökümanları ile iletişim formu ekleme

    15. Adım : ekle butonuna tıkladıkdan sonra, açılan penceredeki kodu kopyalıyoruz ve google dökümanlarında olan işlemimiz bitmişdir.
    Google dökümanları ile iletişim formu ekleme

    16. Adım : Google dökümanlarında olan işlemimiz bitmişdir. şimdi kopyaladığımız iframe kodunu blogger blog sitemize uygulama işlemini tamamlamak için blogumuza giriş yapıyoruz. ve yeni sayfa oluşturuyoruz. html moduna geçerek kopyaladığımız kodu ekliyoruz. height ve widthkoduyla oynayarak kendi blog sayfamıza göre ayarlıyoruz. ve oluştur diyoruz. başlığımızı iletişim yazarak yayınla diyoruz. google dökümanlarıyla oluşturdugumuz iletişim formumuz bitmişdir.
    Google dökümanları ile iletişim formu ekleme

    17. Adım : iletişim formuna gelen mesajdan hemen haberdar ol
    son olarak size gelen mesajları her defasında google dökümanlarına girip kontrol edemem diyorsanız bunun kolayı var. yapmamız gereken google dökümanları anasayfasına giriş yapmak. giriş yapdıkdan sonra ki işlemimiz. iletişim yanıtları tıklayarak. açılan sayfada Araçlar sekmenine tıklayarak. açılan pencerede bildirim kuralları tıklayınız.
    Google dökümanları ile iletişim formu ekleme

    18. Adım : bildirim kuralları tıkladıgınızda. açılan pencerede yapmanız gereken uygulama aşağıda resimdeki uygulamayı yapınız. ve işlemimiz bitmişdir.
    Google dökümanları ile iletişim formu ekleme

    Google dökümanlarıyla oluşturduğumuz iletişim formu bitmişdir.Örnek iletişim Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

    25 Ağustos 2013 Pazar

    Yandan açılır Google+ takipçi kutusu

    Yandan acilir Google+ takipci kutusu

    Sliding Google+ Followers Box For Blogger
    Yandan açılır Google+ takipçi kutusu


    Google+ sayfanızı sitenize bağlayın. Google aramada siteniz için daha fazla öneri alın ve Google+ ürününde kitlenizi artırın.
    Google Plus için bu güne kadar +1 butonu ya da çevrelerine ekle butonu görmüş olabilirsiniz. Şimdi size tamamen yeni bir özellike tanıtacağız. Google Plus Yandan açılan Takipçi Kutusu. Tıpkı Facebook'unuzda oluşturduğunuz gibi sizi çevrelerine ekleyen insanları gösteren bir kutu. Ayrıca “Çevrelerine Ekle” butonuda yer alıyor.
    Blogunuzda hem fazla yer kaplamaması için hemde tasarım açısından görsel güzellik kazandırması açısından güzel bir eklenti.

    1. Kumanda paneline giriş yapın.
    2. Yerleşim → Gadget ekle → HTML/Javascript bulun.
    3. Aşağıda kodu kopyalayıp yapıştırın.
    Kırmızı ile belirtdiğim yere Google+ adresini yazın.

    Sağdan açılan versiyon

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<!--
    $(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({right: "-35"}, "medium");}, function() {$(this).stop().animate({right: "-373"}, "medium");}, 500);});
    //-->
    </script>
    <style type="text/css">
    .gplusbox{
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFP-7YFdqRNVncQSgPzL5loZK_OfZTPjqzuy3sKgjy3TD-zAuQx3lMHVtb9167IDPmiM29oN75vIpJe3SWspge9WaUkEY8Qa2oov1qr0LOzAJF1Jvpkb8OO_s8q0Ouo5es-xSDaXuzmfel/s1600/mef_gplus_sag.png") no-repeat scroll left center transparent !important;
    display: block;
    float: right;
    height: 275px;
    padding: 0 33px 0 33px;
    width: 340px;
    z-index: 99999;
    position:fixed;
    right:-373px;
    top:20%;
    }
    .gplusbox div{
    padding: 8px;
    background: white;
    border: 2px solid #D64937;
    border-radius: 15px;
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    }
    </style>
    <div class="gplusbox"><div>
    <div class="g-plus" data-action="followers" data-height="300" 
    data-href="https://plus.google.com/113884753756003696845" data-source="blogger:blog:followers" data-width="320">
    </div>
    <script type="text/javascript">

    (function() {
    window.___gcfg = {'lang': 'tr'};
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
    })();
    </script>
    </div></div>


    Soldan açılan versiyon

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    //<!--
    $(document).ready(function() {$(".gplusbox").hover(function() {$(this).stop().animate({left: "-35px"}, "medium");}, function() {$(this).stop().animate({left: "-373"}, "medium");}, 500);});
    //-->
    </script>
    <style type="text/css">
    .gplusbox{
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwpUjxU9_6BnIBjTc-7N-XaY4vnitLNoBSVwdfWXJ9eArm1pOSNcZMSmDYmrgEFuLcuRHZooFk4kPQLzGlLvKnJcJBh-z2fsQD9pHpXNDSD-n-AHSVHKPPkFG-R0PuhmM5ag93Bh5mb2q2/s1600/GPlus2.png") no-repeat scroll right center transparent !important;
    display: block;
    float: left;
    height: 275px;
    padding: 0px 33px 0px 33px;
    width: 340px;
    z-index: 99999;
    position:fixed;
    left:-373px;
    top:20%;
    }
    .gplusbox div{
    padding: 8px;
    background: white;
    border: 2px solid #D64937;
    border-radius: 15px;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    }
    </style>
    <div class="gplusbox"><div>
    <div class="g-plus" data-action="followers" data-height="300" 
    data-href="https://plus.google.com/113884753756003696845" data-source="blogger:blog:followers" data-width="320">
    </div>
    <script type="text/javascript">

    (function() {
    window.___gcfg = {'lang': 'tr'};
    var po = document.createElement('script');
    po.type = 'text/javascript';
    po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
    })();
    </script>
    </div></div>

    Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

    17 Ağustos 2013 Cumartesi

    Flash Animasyonlu Etiket Bulutu Oluşturma

    Flash Animasyonlu Etiket Bulutu Oluşturmaadvertise here

    Flash Animasyonlu Etiket Bulutu Oluşturma
    Flash Animated Label Cloud Widget


    Websitenize, blogunuza hareketli etiket bulutu ekleyerek görsellik katabilirsiniz. Flash olduğu için google bir indexleme yapmıyor yararı ise görsellik kattığı için ziyaretcilerin dikkatini çekerek ziyaret süresini uzatmayı amaçlamaktadır. Blog yazılarınızda kullandığınız etiketleri flash animasyonlu bir bulut olarak sidebarınıza ekleyebilirsiniz.

    Live Demo

    1. Kumanda paneline giriş yapın.
    2. Yerleşim → Gadget ekle → HTML/Javascript bulun.
    3. Aşağıda kodu kopyalayıp yapıştırın.
    4. Kod içinde;
    blogurl: Blog adresiniz.
    color : Yazı rengi.
    hoverColor: Etiketin üzerine gelindiginde oluşan renk.
    backgroundColor: Arka plan rengi.
    size: Yazı boyutu.
    speed: Hızı.
    width: Flash etiket bulutunuzun genişliği.
    height: Flash etiket bulutunuzun yüksekliği.
    transparency: Flash etiket bulutunuzun şeffaflığı.
    Html Renkleri için HTML Renk Kodu Bulucu'yu kullanabilirsiniz.

    <div id="MEFFlashContent"></div>  
    <script type="text/javascript">
    /*<![CDATA[*/ var MEFFlashLabelSettings = {
    blogurl : "http://meftunmede.blogspot.com/",
    color : "000000",
    hoverColor : "333333",
    backgroundColor: "FFFFFF",
    size : 12,
    speed : 100,
    width : 250,
    height : 300,
    transparency :true };
    /*]]>*/ </script>
    <script type="text/javascript" src="https://meftun-mede.googlecode.com/svn/trunk/MEFflash_label_cloud.js">
    </script>

    Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

    11 Haziran 2013 Salı

    Blogger Resimli Son Yazılar Eklentisi (Animasyonlu)

    Blogger animasyonlu, Resimli Son Yazılar Eklentisi

    Blogunuza ekleyebileceğiniz bu eklenti animasyonlu, Resimli, son yazdığınız yazılarınızın kayarak aşşağı doğru akarak, listeleyen, bir jquery eklentisi. Bu klasik son yazılar eklentisilerinden farklı, dönerek zoom resim animasyonuyla sitenize renk katacak çok şık bir eklenti. Örnek için blogumun alttaki footer bölümüne bakabilirsiniz.
    ● Blogger animasyonlu, Resimli Son Yazılar Eklentisi.
    ● Aşağıya doğru kayan Jquery stil.
    ● Animated Scrolling Recent Post Widget.

    Aşşağıdaki eklenti oluşturucuyla eklentinizi oluşturabilir,blogunuza ekleyebilirsiniz.

    1. Kumanda paneline giriş yapın.
    2. Yerleşim › Gadget ekle › HTML/Javascript bulun.
    3. Aşağıda Oluşturduğunuz kodu kopyalayıp yapıştırın.


    Yada aşağıdaki kodu manuel olarak blogunuza ekleyebilirsiniz.

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
    <style type="text/css" media="screen">
    #MEF-widget{overflow:hidden;margin-top:5px;height:385px;padding:0;}
    #MEF-widget ul{width:295px;overflow:hidden;list-style-type:none;margin:0;padding:0;}
    #MEF-widget li{width:282px;list-style-type:none;float:none;height:80px;overflow:hidden;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiamPG3F6IhSVvb5_-ux7lr85wHxT1P1hSxbGCV55pn5YPlcI1QMVdN2y95OHUTq5Kj6cnsxI_ePJeV_DaR1EN5TTOXrvfscKdS0d4dKlfzVwCVlxJc_RDjB20rUmlxKS55CgIkPddE4-s0/s1600/Son_Konularmef.jpg) repeat-x;border:1px solid #ddd;margin:0 0 5px;padding:5px;}
    #MEF-widget li a{text-decoration:none;color:#4B545B;font-size:13px;height:18px;overflow:hidden;margin:0;padding:0 0 2px;}
    #MEF-widget img{float:left;margin-top:10px;margin-right:15px;background:#EFEFEF;border:0;}
    #MEF-widget img{-webkit-transition:all .5s ease;-moz-transition:all .5s ease;transition:all .5s ease;background:-webkit-gradient(linear, left top, left bottom, from(#eee), color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa));
    background: -moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 0 3px rgba(0,0,0,.7);-moz-box-shadow:0 0 3px rgba(0,0,0,.7);box-shadow:0 0 3px rgba(0,0,0,.7);padding:4px;}
    #MEF-widget img:hover{-moz-transform:scale(1.2) rotate(-350deg);-webkit-transform:scale(1.2) rotate(-350deg);-o-transform:scale(1.2) rotate(-350deg);-ms-transform:scale(1.2) rotate(-350deg);transform:scale(1.2) rotate(-350deg);-webkit-box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow:0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
    .spydate{overflow:hidden;font-size:10px;color:#0284C2;height:15px;font-family:Tahoma,Arial,verdana, sans-serif;margin:1px 0 0;padding:2px 0;}
    .spycomment{overflow:hidden;font-family:Tahoma,Arial,verdana, sans-serif;font-size:10px;color:#262B2F;margin:0;padding:0;}
    </style>
    <script type='text/javascript'>
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
    imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
    imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
    imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
    imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4kR55PcuhJ2LjhNKBe5iUGby8KLwnSsQLp8ay1snnRgvggyPamQWxPdhCB2yJcOdnA9O8XxFgihJraMxCaDHf1UD_97EMB5TLib3DVjluBED_g0rZDwLulfPWBh04DrNTb7cwR78K_tQ/s1600/no-photo-available.jpeg";
    showRandomImg = true;
    boxwidth = 255;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 50;
    thumbheight = 50;
    fntsize = 13;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "Yorum";
    showPostDate = true;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;
    home_page = "http://MeftunMede.Blogspot.com/";
    limitspy=4;
    intervalspy=4000;
    </script>
    <div id="MEF-widget">
    <script src='http://meftun-mede.googlecode.com/svn/trunk/Resimli_kayan_son_konular_eklentisi.js' type='text/javascript'></script>
    </div>

    Kod içinde;
    boxwidth : Eklentinin genişliğini ayarlayabilirsiniz.
    numposts : Konu sayısını ayarlayabilirsiniz.
    limitspy : Eklentide görünen kolon sayısı.
    intervalspy : kaydırma hızı.
    home_page: blogunuzun adresini yazın.(Sonundaki "/" slash sembolu kalacak.)

    Kodu denemek için Online html editor'ü kullanabilirsiniz.Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...

    26 Mayıs 2013 Pazar

    Blogger Avatarlı Son Yorumlar Eklentisi


    3 değişik stil Blogger Avatarlı Son Yorumlar Eklentisi.
    Recent Comment Widget With Avatar for Blogger.
    Blogger Resimli Son Yorumlar Eklentisi (widget).
    Blogspot Blogger Son Yorumlar Avatarlı Widget Eklentisi.

    3 değişik stil resimli son Yorumlar eklentisi blogunuzun sidebar'ını renklendirecek güzel bir araç. Bu araç sayesinde blogunuzda yorum yapan kişiler avatarıyla birlikte yaptığı yorumun kısa özetini içeren bir kısım görebilecekler. Ziyaretcilerinizin ilgisini çekebilecek güzel bir eklenti.

    Live Demo


    1. Kumanda paneline giriş yapın.
    2. Yerleşim → Gadget ekle → HTML/Javascript bulun.
    3. Aşağıda Beğendiğiniz yorum kutusunun kodunu kopyalayıp yapıştırın.
    4. Kod içinde;
    numComments : Yorum sayısını ayarlayabilirsiniz.
    avatarSize : Avatar boyutu.
    defaultAvatar : Blogger standard avatarını değiştirebilirsiniz.
    characters : Yorum karakter sayısı.
    Kırmızı ile belirtdiğim yerede blogunuzun adresini yazın.

    Style #1

    <div id="wrapper">
    <style type="text/css">
    #wrapper{width:300px!important;}
    .mef_recent_comments li{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;border:2px solid transparent;background:none!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px!important;padding:5px!important;}
    .mef_recent_comments li:hover{-webkit-transform:scale(1.2) translate(15px);box-shadow:0 0 20px 1px #aaa;}
    ul.mef_recent_comments{list-style:none;margin:0;padding:0;}
    .mef_recent_comments li .avatarImage{background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;position:relative;overflow:hidden;margin:0 6px 0 0;padding:3px;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .mef_recent_comments li img{position:relative;overflow:hidden;display:block;padding:0;}
    .mef_recent_comments li span{margin-top:3px;color:#666;display:block;font-size:12px;line-height:1.4;font-family:georgia,arial;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    // Son Yorumlar Ayarları
    var
    numComments = 5,
    showAvatar = true,
    avatarSize = 45,
    roundAvatar = true,
    characters = 40,
    showMorelink = false,
    moreLinktext = "More ?",
    defaultAvatar = "http://img1.blogblog.com/img/anon36.png",
    hideCredits = true;
    //]]>
    </script>
    <script type="text/javascript" src="http://meftun-mede.googlecode.com/files/blogger-recent-comments.js"></script>
    <script type="text/javascript" src="http://meftunmede.blogspot.com/feeds/comments/default?alt=json&amp;callback=mef_recent_comments&amp;max-results=5">
    </script>
    </div>

    Style #2

    <div id="wrapper">
    <style type="text/css">
    #wrapper{width:300px!important;}
    .mef_recent_comments li{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;background:none!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px!important;padding:5px!important;}
    .mef_recent_comments li:hover{background:#C9FD7A!important;border-radius:100%;}
    ul.mef_recent_comments{list-style:none;margin:0;padding:0;}
    .mef_recent_comments li .avatarImage{background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;position:relative;overflow:hidden;margin:0 6px 0 0;padding:3px;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .mef_recent_comments li img{position:relative;overflow:hidden;display:block;padding:0;}
    .mef_recent_comments li span{margin-top:3px;color:#666;display:block;font-size:12px;line-height:1.4;font-family:georgia,arial;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    // Son Yorumlar Ayarları
    var
    numComments = 5,
    showAvatar = true,
    avatarSize = 45,
    roundAvatar = true,
    characters = 40,
    showMorelink = false,
    moreLinktext = "More ?",
    defaultAvatar = "http://img1.blogblog.com/img/anon36.png",
    hideCredits = true;
    //]]>
    </script>
    <script type="text/javascript" src="http://meftun-mede.googlecode.com/files/blogger-recent-comments.js"></script>
    <script type="text/javascript" src="http://meftunmede.blogspot.com/feeds/comments/default?alt=json&amp;callback=mef_recent_comments&amp;max-results=5">
    </script>
    </div>

    Style #3

    <div id="wrapper">
    <style type="text/css">
    #wrapper{width:300px!important;}
    .mef_recent_comments li{-webkit-transition:.5s;-moz-transition:.5s;-ms-transition:.5s;-o-transition:.5s;transition:.5s;border:2px solid transparent;background:none!important;display:block;clear:both;overflow:hidden;list-style:none;margin:5px!important;padding:5px!important;}
    .mef_recent_comments li:hover{border:2px Solid red;}
    ul.mef_recent_comments{list-style:none;margin:0;padding:0;}
    .mef_recent_comments li .avatarImage{background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;position:relative;overflow:hidden;margin:0 6px 0 0;padding:3px;}
    .avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
    .mef_recent_comments li img{position:relative;overflow:hidden;display:block;padding:0;}
    .mef_recent_comments li span{margin-top:3px;color:#666;display:block;font-size:12px;line-height:1.4;font-family:georgia,arial;}
    </style>
    <script type="text/javascript">
    //<![CDATA[
    // Son Yorumlar Ayarları
    var
    numComments = 5,
    showAvatar = true,
    avatarSize = 45,
    roundAvatar = true,
    characters = 40,
    showMorelink = false,
    moreLinktext = "More ?",
    defaultAvatar = "http://img1.blogblog.com/img/anon36.png",
    hideCredits = true;
    //]]>
    </script>
    <script type="text/javascript" src="http://meftun-mede.googlecode.com/files/blogger-recent-comments.js"></script>
    <script type="text/javascript" src="http://meftunmede.blogspot.com/feeds/comments/default?alt=json&amp;callback=mef_recent_comments&amp;max-results=5">
    </script>
    </div>

    Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

    19 Mayıs 2013 Pazar

    Yandan açılır sosyal medya takipçi Kutusu 3 in 1

    Yandan açılır sosyal medya takipçi Kutusu 3 in 1


    3 in 1 Sağdan-Soldan Açılır sosyal medya takipçi Kutusu
    Hareketli sosyal medya takipçi pencereleri
    Yandan Açılır Facebook, Twitter ve Google+ Kutusu
    Sliding Facebook, Twitter, Google+ Followers Box


    Bu eklenti sayesinde Facebook hayran sayfanızı beğenenleri, Twitter hesabınızı ve hazırladığınız Google + sayfasını veya hesabınızı takip edenleri, blogunuzun sağ veya soluna sabitlediğiniz butonların üzerine gelince açılan pencereler sayesinde sergileyebileceksiniz.

    Not:Bu eklenti 09 Ocak 2014 tarihinde yenilenmiştir. Mark carey tarafından geliştirilen twitter eklentisi son bulduğu ve çalışmadığı için yeni eklenti entegre edilerek değiştirilmiştir. Twitter eklentisinin çalısmaşı için lütfen Yeni Twitter Takipçi kutusu yazımı okuyun ve uygulayın!

    Sağdan açılan versiyon

    <link rel="stylesheet" href="http://meftun-mede.googlecode.com/svn/trunk/3in1_right.css" type="text/css"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="http://social-media-dosyalari.googlecode.com/files/social-js-right.js"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript" src="http://social-media-dosyalari.googlecode.com/files/jquery.followbox.min.js"></script> <div id="box-content"> <div id="pointer"><div id="facebook_box" ><img id="facebook_box_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3IsGZN3LYi4bd3qZL-jcREXuVGBDLMgUvEpTc8z8IJKNxGxKon0xB2OG1WibvdMiklzCYOKzynw5Ovhd19Iyfu5g5wneKjg_CEVrBELMxxmh8NiJtuG7QmSgLe43ZK6TSHEPHD7XZ6Yy/s1600/smtabs_facebook_box.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/meftunmede.blogger&amp;width=290&amp;height=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:240px;" allowtransparency="true"> </iframe></div></div> <div class="clear"></div> <div id="pointer"><div id="twitter_box" ><img id="twitter_box_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3BHzVeoIummjxcWg_tCHPyYFA38ZDiMhdqYco0TFGRng1xXK9yUjzPvqH8oQaDzwL3w2nG3V4MnzEn7EPOaKXymF0GdlRmGY2Gq8VAWqzVYuPMjw1dvPS1eWBjQbUxEaKWgD-2nTvFRuY/s1600/smtabs_twitter_box-1.png" alt="" /><div id="mytwitterfollowbox" class="follow-box-container"><iframe src="http://meftun-mede.googlecode.com/svn/trunk/twitter.html?user=MeftunMEDE&no=20&h=239&t=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:239px;" allowTransparency="true"> </iframe> </div> </div></div> <div class="clear"></div> <div id="pointer"><div id="google_box" ><img id="google_box_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo5kLeeQNRlUewTDhzjVNcJE-EOs-tJZK0EfR65p7eyAWie_Gu6aI5NaHkZ4kOAsbi5_So2kOo8-wb_5SpLUdhCWi0yxD3w7hR1BzqOl-8Dd-LMp-Od4VrYQsikwD-0a8IvcKHXvx0LEga/s1600/smtabs_googleplus_right-1.png" alt="" /><div class="g-plus" data-href="https://plus.google.com/111555326072108216342"></div></div></div> <div class="clear"></div></div></div>



    Soldan açılan versiyon

    <link rel="stylesheet" href="http://meftun-mede.googlecode.com/svn/trunk/3in1_left.css" type="text/css"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script type="text/javascript" src="http://meftun-mede.googlecode.com/files/social-js-left.js"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript" src="http://social-media-dosyalari.googlecode.com/files/jquery.followbox.min.js"></script> <div id="box-content"> <div id="pointer"><div id="facebook_box" ><img id="facebook_box_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbsl6EKrEeCYmH2rbbPF1MVfaeegcpFUp4UGeieZemxyl3q60g0i4dnB5-hBx3WKbb7zdwL0sARGxb-kUA7YfOgO5dQtXim1tmeuX-KbeKjVsPqQta0Zjxl43svk3ILold2IIurobJrDc/s1600/facebook_left.png" alt="facebook_left" /><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/meftunmede.blogger&amp;width=290&amp;height=240&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:240px;" allowtransparency="true"></iframe></div></div> <div class="clear"></div> <div id="pointer"><div id="twitter_box" ><div id="twitter_div"><img id="twitter_box_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZm4QGtlsUitv65Snz12hGbCkQiBYLidwEBx5C5S-MdyIqEE5sJrscKeFVXKPbhuT-cQCOQ9ypsm0mfSm2Z5859yf2s-fNJqVakHbsWvcfYoVyB2KF6LUzcKHC6uF9TEdZ9DcUsOXBMRg/s1600/twitter_left.png" alt="twitter_left" /><iframe src="http://meftun-mede.googlecode.com/svn/trunk/twitter.html?user=MeftunMEDE&no=20&h=239&t=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:293px; height:239px;" allowTransparency="true"></iframe></div></div></div> <div class="clear"></div> <div id="pointer"><div id="google_box" ><div id="google_plus_div"><img id="google_box_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEkNQMo-lDFk_mTAToJsVqnIB2cTtmLGS5E4y_mRNMZxYZwH5A0S6Bq5ODycaT5k3Io7wO3dUu9rM1QvN8DXSIT7zrTPjE2Dgcy0ckj2x-jExviYFM3MgL_N0EgRB6SS0YqsbCDqMwLak/s1600/google_left.png" alt="google_left" /><div class="g-plus" data-href="https://plus.google.com/111555326072108216342"></div></div></div></div> <div class="clear"></div></div></div>



    Kod içinde kırmızı ile belirtdiğim yerlere , Facebook, Twitter ve google+ adreslerinizi yazın. Kodu kopyalayıp bloğunuza yada websitenizin istediğiniz bölümüne yapıştırın. Kodu denemek için Online html editor'ü kullanabilirsiniz. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz.iyi bloglamalar...