Line’da Arkadaş Nasıl Eklenir?

Telefonunuza LINE indirdiniz ancak arkadaşlarınızı nasıl bulacağınızı bilmiyorsanız, bu yazıyı okumanızda fayda var.

LINE’da arkadaş nasıl eklenir?

Telefonunuzda kayıtlı LINE kullanıcısı arkadaşlarınız varsa otomatik olarak arkadaş listenize ekleniyor. Bunun dışında LINE’ın ana ekranında yer alan “Arkadaşlar Ekle” menüsünde dört ayrı seçenek bulunuyor:

 

• Kişiler: “Kişiler” seçeneğinden SMS ve e-posta seçenekleri ile LINE kullanmayan arkadaşlarınızı uygulamaya davet edebiliyorsunuz.
• QR Kodu: QR kodu size özel bir barkod gibi düşünebilirsiniz. Menüye girdiğinizde karşınıza QR kod okuyucu çıkar.

Ekranın altında ise kendi QR kodunuzu görebileceğiniz “QR kodum” tuşu bulunuyor. Buraya tıkladığınızda sizin için özel olarak oluşturulan QR kodunu görebilirsiniz. Telefonunuzun menü tuşuna bastığınızda karşınıza “E-posta ile gönder”, “Galeriye kaydet” ve “Yeni QR kodu oluştur” gelecektir.

• “E-posta ile gönder” seçeneğini kullanarak QR kodunuzu arkadaşınıza gönderebilirsiniz.
• “Galeriye kaydet” seçeneğini kullanarak ise QR kodunuzu mobil cihazınıza kaydedebilirsiniz. Böylece istediğinizde Facebook veya Twitter gibi hesaplarınızda paylaşabilirsiniz. Arkadaşlarınız bu kodu okutarak sizi kolayca ekleyebilir.

QR Kodu okutarak arkadaş eklemek için “QR kod okuyucu” aktifken arkadaşınızın QR kodunu (bulanık ve karanlık olmayacak şekilde) ekrandaki karenin içerisinde tutmanız yeterlidir.

E-posta veya diğer yollarla size resim dosyası olarak gelen QR kodları okutmak için öncelikle cihazınıza kaydetmelisiniz. Ardından QR kod okuyucu aktifken “Galeri” butonuna tıkladıktan sonra QR kod içeren dosyayı seçmeniz gerekiyor.

• Salla!: Yakın mesafede olduğunuz arkadaşınızla birlikte (GPS’in açık olması gerekir) “Salla!” butonuna tıkladıktan sonra telefonlarınızı karşılıklı sallayarak birbirinizin arkadaş listesine eklenebiliyorsunuz.

 

• ID ile ara: LINE ID’si, sizin LINE kimliğiniz olarak düşünebilirsiniz. Sizi eklemek isteyen kişilere telefon numaranız yerine LINE ID’nizi vererek sizi eklemelerini sağlayabiliyorsunuz. Sizi LINE ID üzerinden ekleyen kişiler telefon rehberinizde kayıtlı değilse sizin telefon numaranızı göremiyor.
  • LINE ID’nizi belirlemek veya unuttuysanız hatırlamak için LINE ana ekranında yer alan Profil butonunu ya da LINE > Daha fazlası > Ayarlar > Profil menüsünü kullanabilirsiniz.
  • LINE ID ile LINE adınız farklıdır:
    • LINE adınızı değiştirebilirsiniz ancak LINE ID’nizi bir kere belirledikten sonra değiştiremezsiniz.
    • LINE adınıza sahip başka kişiler olabilir ama LINE ID’niz tamamen size özeldir.

LINE’da kişi nasıl engellenir, silinir ya da gizlenir?

Arkadaş listenizdeki kişileri silmek için ilk adım olarak onu engellemeniz gerekiyor.

LINE’da kişi engellemek için iki yol bulunuyor:

1. Sohbet ekranının üst köşesinde yer alan aşağı ok işaretine tıklayarak “Engelle” seçeneği işaretlemek

 

    2.  Arkadaşlar menüsünde silmek istediğiniz kişinin adına basılı tutarak “Engelle” seçeneğini işaretlemek

 

 

Engellediğiniz kişiyi silmek için ya da engelini kaldırmak için Daha Fazlası > Ayarlar > Arkadaşlar menüsünde yer alan “Engellenenler Listesi”ne girerek “Düzenle” butonunu kullanabilirsiniz.

Eğer listenizdeki bir kişinin telefonunuzu kurcalayan meraklı kişiler tarafından görünmesini istemiyorsanız yine “Arkadaşlar” menüsünde kişinin adına basılı tutarak açılan menüde “Gizle” seçeneğini kullanabilirsiniz. Gizlenen kişiler yalnızca “Arkadaşlar” listesinden gizlenirler, engellenmezler. Gizlediğiniz kişileri görünür yapmak için Daha Fazlası > Ayarlar > Arkadaşlar menüsünde yer alan “Gizlenmiş Kullanıcılar” listesine girerek “Düzenle” butonunu kullanabilirsiniz.

 

Sık görüştüğünüz kişiler için kısa yollar oluşturun

LINE’da sık görüştüğünüz kişilerle hızlıca sohbet etmek çok kolay. Kısayol oluşturmak istediğiniz sohbet ekranının sağ üstünde yer alan aşağı ok işaretine tıkladıktan sonra açılan “Sohbet Ayarları” menüsü içerisindeki  “Sohbetler İçin Kısayol Oluştur” ve “Ücretsiz Aramalar İçin Kısayol Oluştur” seçeneklerinden istediklerinizi seçebilirsiniz.

Bir boomads advertorial içeriğidir.

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.

Akordiyon Menü Önizleme

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.


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

Blogger Otomatik Devamını 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.

ÖNİZLEME

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



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

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.

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.

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