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.

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