Moda Blogları İçin Kampanyon

Yeni medyanın son yıllarda en çok öne çıkan öğelerinden biri şüphesiz moda blogları ve bloggerları. Artık hanımlar moda dergileri kadar moda bloglarını da takip ediyorlar. Yeni ürünler keşfetmek, fırsatlardan haberdar olmak, almayı düşündükleri ürün hakkındaki yorumları okumak için moda bloglarını takip ediyorlar.

Moda bloglarına ilgi bu kadar artınca, moda blogları arasında rekabet de o denli fazla oluyor doğal olarak. Artık modayla ilgilenen orta seviyede iher internet kullanıcısı hanım, bir moda blogu oluşturuyor. Kiminin amacı bir moda dergisinde adının geçmesi, kiminin amacı bir gazetenin hafta sonu ekinde köşe sahibi olmak, kimi de moda konusunda bir internet fenomeni olmak istiyor. Peki rekabetin bu kadar yoğun olduğu bir ortamda moda bloggerları neler yapmalı? Nasıl fark yaratabilirler? Rakiplerinin arasında nasıl öne çıkabilirler?

Bir moda blogunun fark yaratabilmesi için işine çok yarayacak bir siteden ve yöntemlerden bahsetmek istiyorum.

Tanıtacağım sitenin ismi Kampanyon. Kampanyon nedir diye soracak olursanız; tüm alışveriş sitelerinin ürünlerini bir arada görmenizi, incelemenizi ve ilgilendiğiniz ürünlerin hangi alışveriş sitesinde satıldığını kolayca bulmanızı sağlayan bir ürün arama motorudur şeklinde özetleyebilirim. Gelelim Kampanyon’u kullanarak moda blogunuza nasıl fayda sağlayabileceğinize…

1. Moda Blogunuzda Tanıtacağınız Onbinlerce Ürün

Moda bloglarının işleyişi satın aldıkları ürünleri kombinleyip takipçileriyle paylaşmak olduğu içiniçin online alışveriş sitelerinin önemi çok büyüktür. Fakat online alışveriş siteleri o kadar çok ki hepsini tek tek dolaşıp zevkinize uygun ürün aramaya ömür yetmez. Kampanyon ise tüm alışveriş sitelerindeki ürünlere tek bir yerden ulaşmanızı sağladığı için istediğiniz ürüne en hızlı şekilde ulaşıp satın almanızı sağlar.

2. Okurlarınıza En Uygun Ürünleri Önerin

Moda bloggerlarının en çok parayı alıverişe harcadıkları tahmin etmek hiç zor değil :) Bu yüzden online alışverişin nimetlerinden faydalanmak gerekiyor. Online alışveriş siteleri arasındaki rekabet fiyatlara da yansıyor ve bazı ürünler arasında fiyat farkları olabiliyor. Ancak tek tek siteleri dolaşarak fiyat kıyaslaması yapmak hiç kolay değil. Bu aşamada Kampanyon devreye giriyor aradığınız marka ve modelin hangi sitede hangi fiyata satıldığını sizin için araştırarak sonuçları birkaç saniyede önünüze getiriyor.

3. Blogunuzda Tanıtacağınız Ürünleri İndirimli Alın

Online alıveriş yapmanın avantajlarından biri de indirim kuponları ve hediye çekleri sayesinde ürünleri daha hesaplı temin edebilmeniz. Kampanyon bu konuda da size yardımcı oluyor. Online alışveriş sitelerinin Kampanyon’a özel indirim kuponlarını kullanabiliyorsunuz. Yapmanız gereken tek şey satın almak istediğiniz ürüne Kampanyon üzerinden gitmek.

4. Kimsede Olmayanı Sunun

Rekabette ayakta kalmanın temel şartlarından biri fark yaratmaktır. Bir moda blogu yazarı olarak fark yaratmak istiyorsanız ziyaretçilerin başka hiçbir yerde bulamayacakları ürünleri tanıtabilirsiniz. Bunu yaparken de Kampanyon’dan faydalanablirsiniz. Kampanyon’da

ünlü markaların Türkiye mağazalarında bulamayacağınız ürünlerine ulaşabilirsiniz. Kampanyon bu özelliğiyle yurt dışından alışveriş yapmak isteyip de fırsat bulamayan moda bloggerlarına büyük kolaylık sağlıyor.

Özetlemek gerekirsek; Kampanyon güvenilir ve hızlı alışverişin kapılarını açan, kişiye aradığı ürünleri bulmada yardımcı olan ve ona farklı fikirler, alternatifler sunan, bunu sunarken tüketiciye yönelik farklı kampanyalarla alışverişi daha zevkli ve kazançlı hale getiren, üstelik bunu tek bir tıkla gerçekleştiren bir site. Sonuç olarak bu site bizi ürün bulma angaryasından kurtarmayı başarıyor, seçme ve karar verme işini zevkle yapmanızı sağlıyor diyebiliriz.

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://lh6.googleusercontent.com/-Gh7uFlI8fTM/Uuov_xtMqQI/AAAAAAAAKHk/rwDyLZbZN3Y/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.