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

    5 Şubat 2014 Çarşamba

    Minimal Süper Menü

    Blogger için menü alternatiflerine “minimal süper menü” isminde yeni bir menü daha ekleyelim. Son zamanlarda dağıtılan Blogger temalarında çok sık gördüğümüz bu menüyü ben de hazır bir temanın içinden aldım ve bazı küçük değişiklikler yaparak paylaşmak istedim.

    Blogger için minimal süper menü

    Menüye neden bu ismi verdiğimi açıklamak istiyorum. Menüde küçük yazı boyutu ve ikonlar kullanlmış. Bu yüzden az yer kaplıyor ve minimal. Ayrıca menünün sağ köşesinde sosyal ikonlar mevcut. Yani menü hem blog içi navigasyonu, hem de sosyal platformlardaki hesaplarınız arasındaki navigasyonu sağlıyor. Bu yüzden süper :)

    Menüde istediğiniz yerleri açılır sekme gibi göstererek alt menü öğeleri de ekleyebilirsiniz. Aşağıdaki demo videoyu izlediğiniz Menü linkinin üzerine geldiğin açıldığını ve alt öğeler çıktığını göreceksiniz.


    Bu menüye blogunuza eklemek için öncelikle Blogger kumanda paneline girip Şablon > HTML’yi düzenle  diyerek şablonun kodlarını açın ve Ctrl + F kuş kombinasyonuyla açılan arama kutusunun yardımıyla ]]></b:skin> kodunu bulun. Bunun hemen üzerine aşağıdaki stil kodlarını yapıştırın.

     

    /* BH Minimal Süper Menü Stil Kodları
    ----------------------------------------------- */
    #itbnav {
    background:#F1921A;
    padding:0;
    height: 29px;
    font-size:12px;
    position: relative;
    border:1px dotted #000;

    }
    #itbnav .wrapnya,
    #nav .wrap,
    #headisi,
    #content-wrapper {
    margin:0 auto;
    width:98%;
    }
    #itbnav .tgltop {
    float:left;
    color:#E2E2E2;
    display:block;
    line-height:20px;margin-top: 4px;
    }

    .sf-menu,
    .sf-menu * {
    margin:0;
    padding:0;
    list-style:none;
    }
    .sf-menu li {
    position:relative;
    }
    .sf-menu ul {
    position:absolute;
    display:none;
    top:100%;
    left:0;
    z-index:99;
    }
    .sf-menu > li {
    float:left;
    margin:0 1px;
    }
    .sf-menu li:hover > ul,
    .sf-menu li.sfHover > ul {
    display:block;
    }
    .sf-menu a {
    display:block;
    position:relative;
    }
    #menunav > li > a {
    font: normal normal 90% 'Open Sans', serif ,Sans-serif;
    line-height: 50px;
    text-transform: uppercase;
    font-weight: 600;
    height: 50px;
    }
    .sf-menu ul ul {
    top:0;
    left:100%;
    }
    .sf-menu {
    float:left;
    }
    .sf-menu ul {
    min-width:12em;
    *width:12em;
    }
    .sf-menu a {
    padding:0 10px;
    height:50px;
    line-height:50px;
    text-decoration:none;
    zoom:1;
    }
    .sf-menu a.home, .sf-menu > li > a.home.current {
    background-color:#007ABE;
    text-indent:-9999px;
    padding:0;
    width:50px;
    }
    .sf-menu a {
    color:#E6E6E6;
    font-size:11px;
    }
    #itbnav .sf-menu a {
    color:#fff;
    height: 29px;
    line-height: 29px;
    }
    .sf-menu li {
    white-space:nowrap;
    *white-space:normal;
    -moz-transition:background-color .2s;
    -webkit-transition:background-color .2s;
    transition:background-color .2s;
    position:relative;
    }
    .sf-menu ul li {
    background-color:#007ABE;
    margin:1px 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    }
    #itbnav .sf-menu ul li, #itbnav .sf-menu ul ul li {
    background-color:#F1921A;
    }
    .sf-menu ul a {
    font-weight:normal;
    height:28px;
    line-height:28px;
    }
    #itbnav .sf-menu ul a {
    height:25px;
    line-height:25px;
    }
    .sf-menu ul a:hover {
    padding-left:12px;
    }
    .sf-menu ul ul li {
    background:#007ABE;
    margin:0 0 1px 2px;
    }
    .sf-menu li:hover > a,
    .sf-menu li.sfHover > a,
    .sf-menu > li > a.current {
    background-color:#000;
    -moz-transition:none;
    -webkit-transition:none;
    transition:none;
    color:#E6E6E6;
    }
    #itbnav .sf-menu li:hover > a,
    #itbnav .sf-menu li.sfHover > a,
    #itbnav .sf-menu > li > a.current {
    background-color:#679EC9;
    color:#E2E2E2;
    }
    .sf-arrows .sf-with-ul {
    padding-right:2em;
    *padding-right:1em;
    }
    .sf-arrows .sf-with-ul:after {
    content:'';
    position:absolute;
    top:50%;
    right:0.85em;
    margin-top:-2px;
    height:0;
    width:0;
    border:4px solid transparent;
    border-top-color:#E6E6E6;
    }
    #itbnav .sf-arrows .sf-with-ul:after  {
    border-top-color:#007ABE;
    }
    .sf-arrows > li > .sf-with-ul:focus:after,
    .sf-arrows > li:hover > .sf-with-ul:after,
    .sf-arrows > .sfHover > .sf-with-ul:after {
    border-top-color:#E6E6E6;
    }
    #itbnav .sf-arrows > li > .sf-with-ul:focus:after,
    #itbnav .sf-arrows > li:hover > .sf-with-ul:after,
    #itbnav .sf-arrows > .sfHover > .sf-with-ul:after {
    border-top-color:#E2E2E2;
    }
    .sf-arrows ul .sf-with-ul:after {
    margin-top:-4px;
    margin-right:-3px;
    border-color:transparent;
    border-left-color:#E6E6E6;
    }
    #itbnav .sf-arrows ul .sf-with-ul:after {
    border-left-color:#007ABE;
    }
    .sf-arrows ul li > .sf-with-ul:focus:after,
    .sf-arrows ul li:hover > .sf-with-ul:after,
    .sf-arrows ul .sfHover > .sf-with-ul:after{
    border-left-color:#E6E6E6;
    }
    #itbnav .sf-arrows ul li > .sf-with-ul:focus:after,
    #itbnav .sf-arrows ul li:hover > .sf-with-ul:after,
    #itbnav .sf-arrows ul .sfHover > .sf-with-ul:after {
    border-left-color:#E2E2E2;
    }
    .sf-menu li > i {
    position:absolute;
    top: 3px;
    right: 3px;
    width: 27px;
    height: 22px;
    cursor:pointer;
    display:none;
    background-color:#c00000;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    outline:0;
    }
    .sf-menu li > i:after {
    content: '+';
    color: #fff;
    font-size: 19px;
    position: absolute;
    left: 5px;
    top: -2px;
    }
    .sf-menu li > i.active:after {
    content:'-';
    font-size:39px;
    top:-14px;
    }
    #itbnav .sf-menu li > i {
    width: 23px;
    height: 19px;
    top: 6px;
    }
    #itbnav .sf-menu li > i:after {
    top: -4px;
    left: 3px;
    }
    #itbnav .sf-menu li > i.active:after {
    top: -13px;
    font-size: 31px;
    left: 4px;
    }
    .sf-menu a.home:before,

    .sf-menu a.home:before, #searchnya button:before, #view a:before, .breadcrumbs .homex:before {
    text-indent: 0;
    }
    .sf-menu a.home:before {
    width: 30px;
    height: 30px;
    }
    .sf-menu a.home:before {
    content: "\f015";
    top: 0;
    font-size: 29px;
    left: 11px;
    color: #FBFBFB;
    }


    #icon-socialmn {
    margin: 0;
    float: right;
    }
    #icon-socialmn li {
    float: left;
    }
    #icon-socialmn a {
    display: block;
    text-indent: -9999px;
    width: 26px;
    height: 29px;
    background-image: url(
    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPj5PNzfQt6bkBoRNb92jIcHlYMneFE-mjIxj4t-kKXrX_0-16BdqLfpk6vbz0JlCNSIDY8BZuhvdrrW7-A6Q9k9l_UzNxGFbP6_6PpNZP5jjs7opiwe1CMgnoKNcmyH6Yn9QzOU4vwnY_/s575/beyaz-sosyal-ikonlar.png);
    background-repeat: no-repeat;
    -webkit-transition: background .2s ease-out;
    -moz-transition: background .2s ease-out;
    -o-transition: background .2s ease-out;
    transition: background .2s ease-out;
    }
    #icon-socialmn .sotw a {
    background-position: 1px 2px;
    }
    #icon-socialmn .sofb a {
    background-position: -24px 2px;
    }
    #icon-socialmn .sogo a {
    background-position: -49px 2px;
    }
    #icon-socialmn .sorss a {
    background-position: -74px 2px;
    }
    #icon-socialmn .solinkn a {
    background-position: -99px 2px;
    }
    #icon-socialmn .sopint a {
    background-position: -150px 2px;
    }
    #icon-socialmn .sotw a:hover {
    background-color: #2DAAE1;
    }
    #icon-socialmn .sofb a:hover {
    background-color: #3C5B9B;
    }
    #icon-socialmn .sogo a:hover {
    background-color: #F63E28;
    }
    #icon-socialmn .sorss a:hover {
    background-color: #FA8C27;
    }
    #icon-socialmn .solinkn a:hover {
    background-color: #0173B2;
    }
    #icon-socialmn .sopint a:hover {
    background-color: #CB2027;
    }

     

    Sıra HTMLkodlarını eklemeye geldi. HTML kodlarını ekleyeceğiniz yer ile ilgili şu bilgiyi vermek istiyorum:

    1. Blogger’ın kendi temalarından birini kullanıyorsaız HTML kodlarını  <div class='tabs-outer'> kodnun hemen üstüne ekleyin.

    2. Özel bir Blogger teması kullanıyorsanız HTML kodlarını <div id='content-wrapper'>  kodunun hemen altına ekleyin.

     

    <!--BH Minimal Süper Menü HTML Kodları-->
    <div id='itbnav'>
    <ul class='sf-menu' id='topmenunav'>
      <li><a href='
    http://bloghocam.blogspot.com/'>Ana Sayfa</a></li>
      <li><a href='
    http://bloghocam.blogspot.com/p/hakkmda.html'>Hakkımda</a></li>
      <li><a href='
    http://bloghocam.blogspot.com/p/misafir-blogculuk.html'>Misafir Blogculuk</a></li>
      <li><a href='
    http://bloghocam.blogspot.com/p/destek-ol.html'>Destek Ol</a></li>
      <li><a href='
    http://bloghocam.blogspot.com/p/takip-et.html'>Takip Et</a></li>
      <li><a href='
    http://bloghocam.blogspot.com/p/ne-dediler.html'>Ne Dediler?</a></li>
      <li><a href='
    http://bloghocam.blogspot.com/p/arsiv.html'>Arşiv</a></li>
      <li><a href='
    http://bloghocam.blogspot.com/p/galeri.html'>Reklam</a></li>
      <li><a href='
    http://bloghocam.blogspot.com/p/iletisim.html'>İletişim</a></li>
      <li><a href='#'>Menü</a>
        <ul>     

    <li><a href='http://bloghocam.blogspot.com/2011/04/feedburner-kurulumu-ve-ayarlar.html'>Feedburner</a></li>
          <li><a href='
    http://bloghocam.blogspot.com/2012/06/acemiler-icin-google-analytics-rehberi.html'>Google Analytics</a></li>
          <li><a href='
    http://bloghocam.blogspot.com/2012/08/herkesin-bir-gravatar-olsun.html'>Gravatar</a></li>
          <li><a href='
    http://bloghocam.blogspot.com/2013/09/paypal-nedir-bloggerlar-icin-neden.html'>Paypal</a></li>

        </ul>
      </li>
     
    </ul>
    <ul class='sociico' id='icon-socialmn'>
      <li class='sotw'><a href='
    https://twitter.com/BlogHocam' target='_blank'>twitter</a></li>
      <li class='sofb'><a href='
    http://www.facebook.com/bloghocam' target='_blank'>facebook</a></li>
      <li class='sogo'><a href='
    http://www.google.com/+BloghocamBlogspot' target='_blank'>google</a></li>
      <li class='sorss'><a href='
    http://feeds.feedburner.com/bloghocam' target='_blank'>rss</a></li>
      <li class='solinkn'><a href='
    http://linkedin.com' target='_blank'>linkedin</a></li>
      <li class='sopint'><a href='
    http://pinterest.com/bloghocam' target='_blank'>pinterest</a></li>
    </ul>
    </div>

     

    HTML kodlarında menü öğelerini kendinize göre düzenleyeblir, istemediğiniz öğelere ait kod satırını silerek menüden kaldırabilirsiniz.

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

    3 Şubat 2014 Pazartesi

    Alexa Kullanım Kılavuzu

    1996’da, dünyadaki tüm web sitelerinin istatistiklerini tutmak amacıyla kurulan Alexa, bugün internet dünyasında sitelerin popülaritesini belirlemede en güvenilir kaynaklardan biridir.

    Chrome, Explorer, Firefoz gibi internet tarayıcılarına yüklenen toolbar sayesinde kullanıcıların internette ziyaret ettikleri sitelerin datasını tutan Alexa, bu datalara göre sitelere bazı değerler verir. Bir sitenin Alexa sayfasını ziyaret ettiğinide şu bilgileri görebilirsiniz:

    1. Türkiye Ve Dünya Sıralaması

    How popular is ……” başlığının altında, o sitenin Alexa verilerine göre Türkiye’nin ve Dünya’nın kaçıncı popüler sitesini olduğunu görebilirsiniz.

    alexa sıralaması


    Örneğin Blog Hocam’ın Alexa sayfasını ziyaret ettiğinizde Türkiye’nin 894. Dünya’nın 49.375. popüler sitesi olduğu yazar.

    2. Etkileşim

    How engaged are visitors to ……?” başlığının altında ise ziyaretçilerin siteye olan bağlılığı ile igili veriler gözükmektedir.

    alexa etkileşim


    Alexa verilerine göre Blog Hocam’ı ziyaret edenlerin siteden hemen çıkma oranı %58.1. Kullnaıcılar Blog Hocam’ı ziyaret ettiğinde ortalama 2.17 sayfa görüntülüyor. Kullanıcıların Blog Hocam’da kalma süresi ise ortalama 1.6 dakika.

    3. Demografi

    Who visits ……?” başlığının aktında ziyretçilerin kitlesel ve coğrafik demografik blgilerini görebiliyorsunuz.

    alexa demografi


    Blog Hocam’ın ziyaretçi profilinde arasında erkeklerin biraz daha ağır bastığını görebilirsiniz. Ayrıca ziyaretçilerin %87.9’u Türkiye’den bağlanırken, %6.2’sinin Kırgızistan’dan, %2.5’inin ise ABD’den bağlandığını görebilirsiniz.

    4. Trafik Kaynakları

    Where do ……'s visitors come from?” başlığının altında ise ziyaretçilerin o siteye hangi kaynaklardan ulaştığını görebiliyorsunuz.

    Alexa trafik kaynakları


    Alexa’ya göre Blog Hocam’ın trafiğinin %23.9’u arama motorlarından geliyor. İnsanlar arama motoruna en çok “blog hocam”, “bloghocam”, “kişisel blog”, “blogger arama kutusu”, “hocam” yazarak Blog Hocam’a ulaşıyor. Alexa’ya göre Google dışında Blog Hocam’a en çok trafik gönderen siteler ise Blogger, Facebook ve Hürriyet.

    5. Backlinkler

    What sites link to ……?”  başlığının altnda o sitnin kaç adet backlinki olduğunu ve backlinkin yer aldığı sayfaları görebiliyorsunuz.

    alexa backlinkler


    Alexa Blog Hocam’a 495 farklı siteden link geldiğini algılamış ve bunlardan bazılarını göstermiş. Pinterest, Blogger, Hürriyet, Milliyet gibi sitelerden Blog Hocam’a bağlantı olduğunu görebilirsiniz.

    6. Benzer Siteler

    ”What sites are related to ……?” başlığının altında ise o siteyle benzer konsepte sahip siteler görünmektedir.

    Alexa benzer siteler


    Benzer siteler Blog Hocam’da ve çoğu sitede gözükmüyor. Kriteri nedir bilmiyorum. Ama öneri olarak DMOZ’de bulunduğu kategoriyi gösteriyor. Buradan benzer sitelere ulaşabilirsiniz.

    7. Subdomainler

    Where do visitors go on ……?” başlığının altında ise sitede en çok ziyaret edlen alt domainler gözükmektedir.

    alexa-subdomain
    Blog Hocam’ın kendisi zaten bir subdamin olduğu için bu bölümde başka bir veri gözükmaz. Ama sitenin adresi bloghocam.com olsaydı ve bu sitenin forum.bloghocam.com gibi bir alt domaini olsaydı bu bölümde görebilirdiniz.

    8. Site Hızı

    How fast does …… load?” başlığının altında sitenin ne kadar hızlı yüklendiğini ve diğer sitelerle kıyaslamasını görebilirsiniz.

    alexa site hızı
    Örneğin Alexa’ya göre Blog Hocam 3.9 saniyede yükleniyormuş ve internetteki sitelerin %87’sinden daha yavaşmış.

    9. Site Bilgileri

    Where can I find more info about ……?” başlığının altında sitenin açıklaması, eskiden nasıl göründüğü ve site sahibinin iletişim bilgileri yer almaktadır.

    Allexa Site Bilgileri
    Site açıklaması ve iletişim bilgilerini siz oluşturuyorsunuz fakat site geçmişi, web.archive.org tarafından kendiliğinden kaydedilir. Örneğin 7 Ekim 2011’de Blog Hocam şu şekilde görünüyordu.


    Alexa Verileri Ne Kadar Doğru?

    Alexa bu verileri Alexa toolbarı yüklü olduğu tarayıcılardan topladığı için kesin doğruyuz diyemeyiz elbette. Google Analytics’den bounce rate, demografi, trafik kaynakları gibi verileri incelediğinizde bazı farklılıklar olduğunu göreceksiniz.  Bu yüzden Alexa’da ciddiye almanız gereken tek verinin 1 numarada belirttiğim sıralamalar olduğunu söleyebilirim. Kendi blogunuzla ilgili diğer verileri Google Analytics’den çok daha net elde edebilirsiniz ama hakkında hiçbirşey bilmediğiniz bir site için Alexa verileri size fikir verebilir.

    Alexa’ya Kayıt Ve Site Ekleme

    1. Öncelikle Alexa kayıt sayfasına giderek e-mail adresiniz ya da Facebook hesabınızla kayıt yapın.

    2. Mail adresinizle kayıt yaptıysanız Alexa’dan bir mail gelecektir. Buradaki linke tıkladıktan sonra kayıt işleminiz tamamlanır. Açılan sayfada Alexa hesabınıza girnek için kullanacağınız şifreyi belirlemeniz istenecek.

    3. Şifreyi belirledikten sonra artık Alexa hesabınıza gimiş olursunuz. Şimdi üst taraftaki My Account linkine tıklayarak şu yolu izleyin: Dashboard > Add It Now > Free Sign Up

    4. Açılan sayfadaki kutuya blog adresinizi yazarak devam edin. Ardın sizden sitenizi onaylamanızı isteyecek. Bunun 2 yolu var. Biz 2. seçenek olan meta seçeneğini kullanacağız.

    alexa-onay
    Sayfada size özel üretilen bir Alexa ID’si göreceksiniz. Bunu blogunuza şu şekilde eklemeniz gerekmektedir:

    - Blogger kumanda panelindenŞablon > HTML’yi Düzenle yolunu takip edin ve <head> kodunun altına şu satırı ekleyin:

     

    <meta name="alexaVerifyID" content="Alexa ID’niz" />

     

    Kırmızı renkli yere Alexa’dan aldığınız ID’yi yazdıktan sonra şablonu kaydedin ve Alexa’ya geri dönün. Alexa ID’nizi aldığınız sayfanın altındaki Verify My ID butonuna tıklayın.

    5. “Your site is successfully claimed.” yazısını gördüyseniz blgunuz artık Alexa’ya eklenmiş ve onaylanış demektir. Continue butonuna basarak site bilgilerini yazmaya geçebilirsiniz.

    6. Burada bazı özellikler sadece pro üyeler içindir. Fakat yukarıda 9. adımda bahssettiğim site başlığı, site açıklaması, ülke ve iletişim gibi bilgileri buradan seçebiliyorsunuz. Bu bilgileri girdikten sonra kaydedip işlemi sonlandırbilirsiniz. 

    Son olarak  şunu belirtmeliyim ki blogunuza Alexa’ya ekledikten hemen sonra istatistikler ve veriler gözükmez. Bu verilerin oplanıp işlenmesi için süreye ihtiyacınız olacak.

    Alexa Widgetları

    Sitesinde Alexa verilerini göstermek isteyen kişiler için farklı tür ve boyutlarda Alexa widgetları mevcut. Dilerseniz kendi widgetınızı oluşturarak blogunuza ekleyebilirsiniz.

    Widget oluşturmak için Alexa Site Widgets sayfasına giderek, eklemek istediğiniz widgetın yanındaki kutuya blog adrresinizi yazın ve Build Widget butonuna basın. Devamında açılan sayfasında seçtğiniz widget türünün farklı boyutları ve yanlarında kodları çıkacak. Burada ekleyeceğiniz widgetın kodunu kopyalayarak Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleyin ve kodları yapıştırın.

    İnternet Tarayıcınız İçin Alexa Toolbar

    Alexa Toolbar internet tarayıcınza ücretsiz olarak ekleyebileceğiniz, siz internette dolaşırken arkaplanda çalışarak girdiğiniz sitelerle ilgili bilgileri Alexa databaseine gönderen bir eklentidir. Yani Alexa toolbar yüklü bir tarayıcıyla internet sitelerini ziyaret ettiğinizde, o sitelerin verilerinin hesaplanmasında siz de dikkate alınacaksınız.

    Alexa toolbarı ücretsiz indirmek ve tarayıcınıza eklemek için Alexa Toolbar sayfasını ziyaret edebilirsiniz.

     

    !!! Alexa verileri hergün güncellendiği için şuanki değerlerle yazıda yer alan değerler arasında küçük farklar olabilir. Yazıyı yaklaık 1 hafta önce yazmıştım.