teknoloji haberleri - internet haberleri

Blog tasarımlarının en çok aranan ve en çok üzerinde durulan öğelerinden biri blog kayıtlarının üst tarafına eklenen yatay link menüleri sanırım. Blogger’a yatay menü ekleme olayı hem Google’da çok aranıyor, hem de benden çok isteniyor.

Bugüne kadar bazı yatay menü kodları paylaşsam da şıklığa ve tasarıma özen gösteren bloggerlar benden ribbon menü paylaşmamı istemişlerdi. Ben de blog kayıtlarının üst tarafına ekleyebileceğiniz, şık ve hover efekti sayesinde üzerine gelindiğine hareket eden harika bir ribbon menü buldum.

Menüyü Blogger’a eklemek için kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript yolunu izleyin ve aşağıdaki kodları yapıştırın.

<style>
/* Blog Hocam Animasyonlu Ribbon Menü */
.bhribbon span {
    background:#F1921A;
    display:inline-block;
    line-height:3em;
    padding:0 1em;
    margin-top:0.5em;
    position:relative;
      -webkit-transition: background-color 0.2s, margin-top 0.2s;  /* Saf3.2+, Chrome */
    -moz-transition: background-color 0.2s, margin-top 0.2s;  /* FF4+ */
    -ms-transition: background-color 0.2s, margin-top 0.2s;  /* IE10 */
    -o-transition: background-color 0.2s, margin-top 0.2s;  /* Opera 10.5+ */
    transition: background-color 0.2s, margin-top 0.2s;
}
.bhribbon a span {
color:#000;}

.bhribbon a:hover span {
    background:#669900;
    margin-top:0;}
.bhribbon span:before {
    content: "";
    position:absolute;
    top:3em;
    left:0;
    border-right:0.5em solid #F1921A;
    border-bottom:0.5em solid #fff;}

.bhribbon span:after {
    content: "";
    position:absolute;
    top:3em;
    right:0;
    border-left:0.5em solid #F1921A;
    border-bottom:0.5em solid #fff;}

.bhribbon a:link, .bhribbon a:visited {
    color:#000;
    text-decoration:none;
    float:left;
    height:3.5em;
    overflow:hidden;
}
.bhribbon:after, .bhribbon:before {
    margin-top:0.5em;
    content: "";
    float:left;
   border: 1.5em solid #F1921A;}

.bhribbon:after {
    border-right-color:transparent;}

.bhribbon:before {
    border-left-color:transparent;}
</style>
<div class='bhribbon'>
    <a href='http://bloghocam.blogspot.com/'><span>Ana Sayfa</span></a>
    <a href='http://bloghocam.blogspot.com/p/hakkmda.html'><span>Hakkımda</span></a>
    <a href='http://bloghocam.blogspot.com/p/misafir-blogculuk.html'><span>Misafir Blogculuk</span></a>
    <a href='http://bloghocam.blogspot.com/p/destek-ol.html'><span>Destek Ol</span></a>
    <a href='http://bloghocam.blogspot.com/p/takip-et.html'><span>Takip Et</span></a>
    <a href='http://bloghocam.blogspot.com/p/ne-dediler.html'><span>Ne Dediler?</span></a>
    <a href='http://bloghocam.blogspot.com/p/arsiv.html'><span>Arşiv</span></a>
    <a href='http://bloghocam.blogspot.com/p/galeri.html'><span>Reklam</span></a>
    <a href='http://bloghocam.blogspot.com/p/iletisim.html'><span>İletişim</span></a>
</div>

Değiştirmeniz gereken yerler son bölümdeki menü öğelerine ait bağlantılar. Ben bu menüye Blog Hocam’a ait statik sayfaların linklerini ekledim ama siz isterseniz başka türlü de değerlendireblirsiniz.

Örneğin bir arkadaşınıza ya da diğer sitenize link vermek sterseniz oraya şu satırı ekleyebilirsiniz:

<a href='http://siteadresi.com'><span>Site</span></a>

Veya belli bir etikete ait yazılarınızın listelenmesini sağlayablirsiniz. Örneğin Blog Hocam’da SEO etiketli yazılara link vermek için şu satırı ekleyebilirim:

<a href=' http://bloghocam.blogspot.com/search/label/SEO'><span>SEO</span></a>

Ya da belli bir yazıya link vermek isteyebilirim. Örneğin Bumerang’ı tanıttığım Her Yönüyle Bumerang Network başlıklı yazıma bu menüde yer vermek istersem şu satırı ekleyebilirim:

<a href='http://bloghocam.blogspot.com/2013/10/her-yonuyle-bumerang-network.html'><span>Bumerang</span></a>

Ben menüyü Blog Hocam’ın tasarımına uygun şekilde renklendirdiğim için her blog uygun olmayabilir. Bu yüzden son olarak da renkleri nasıl değiştireceğinizden bahsedeyim.

Tmel olarak 2 renk kullandım. Bunlardan ilki turuncu renkte gördüğünüz zemin rengi. Bu rengin kodu #F1921A Kodlarda bu renk kodunu gördüğünüz yere kendi istediğiniz rengin kodunu koyarsanız menünün zemin rengi değişecektir.

Kullandığım diğer renk ise menünün üzerine geldiğinde öne çıkan öğenin dönüştüğü renk olan yeşil. Bu rengin kodu ise #669900 Kodlarda bu renk kodunu gördüğünüz yere kendi istediğiniz rengin kodunu koyarsanız hover efekti ile oluşan renk değişecektir.

Sanırım yeterince açıklayıcı oldu :) Eğer kafanıza takılan bir şey olursa yorum bölümünden sorabilirsiniz.

Çağın popüler sosyal paylaşım plaformu olan Twitter’a ait “takipçi kutusu” veya “son tweetler” gibi eklentiler blogların vazgeçilmeziydi. Fakat Twitter kendi bileşenlerini kullanıma sunduktan sonra hariçten kullandığımız bu eklentiler kullanılmaz duuruma geldi. Ben de bu yazıda Twitter’ın kullanıcılarına sunduğu tüm bileşenleri tanıtmak istedim. İstediklerini blogunuza ekleyerek blog-Twitter entegrasyonunu sağlayabilirsiniz.

Zaman Akışı Bileşeni

Ayarlar > Bileşenler > Yeni Oluştur > Kullanıcı Zaman Akışı

Twitter sayfanızdaki son hareketleri blogunuzda göstermenizi sağlayan bileşendir. Kendi yazdığınız ve retweetlediğiniz tweetler bu kutuda görünür. Yanıtladığınız tweetler ile tweetle birlikte paylaşıılan fotoğrafın gösterilip gösterilmeyeceği sizin tercihinize bırakılmıştır.Ayrıca kutunun genişliğini, linklerin rengini ve zemin rengini değiştirebilirsiniz.

@BlogHocam kullanıcısından Tweetler

Favoriler Bileşeni

Ayrlar > Bileşenler > Yeni Oluştur > Favoriler

Yazdığınız veya retweetlediğiniz tüm tweetleri değil de seçtiğiniz veya beğendiğiniz tweetleri blogunuzda paylaşmak isterseniz favoriler bileşenini kullanabilirsiniz. Favorilere eklediğiniz tweetleri blogunuza embed edebilirsiniz. Benim favorilerimde tweet olmadığı için başka bir hesabın favorilerini örnek göstermek istiyorum.

@saygigunenc kullanıcısından Favori Tweetler

Hashtag Bileşeni

Ayrlar > Bileşenler > Yeni Oluştur > Ara

Belli bir hashtag veya anahtar kelime ilgili yazılmış tweetlerden oluşan bileşendir. Diğer bileşenlerde olduğu gibi genişlik ve renk seçeneklerinin yanı sıra sadece popüler tweetlerin göterilmesini de seçebilirsiniz. Örnek olarak blog yazarlığı ile ilgili bilgi, ipucu, duyuru, haber gibi şeylerin paylaşıldığı #blogyazarlığı hashtagine ait bileşeni vermek istiyorum.

"#BlogYazarlığı" hakkında Tweetler

Ayrıca listeler ve özel zaman akışı bileşenlerini de  benzer şekilde oluşturup blogunuza ekleyebilirsiniz ama ben bu özellikleri kullanmadığım için örnek veremiyorum ne yazık ki.

Tweetle Butonu

Butonu eklediğiniz sayfayı, sayfanın linki ve başlığıyla Twitter’da paylaşmanızı sağlayan klasik buton. Tweetle butonunun kodları:

<a href="https://twitter.com/share" class="twitter-share-button" data-via="BlogHocam" data-lang="tr">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Kırmızı renkle yazdığım yere kendi Twitter kullanıcı adınızı yazın. Örnek buton:

Tweet

Takip Et Butonu

Twitter’da sizi takip etmelerini kolaylaştırmak için kullanabileceğiniz buton. Butonu eklmeniz için gereken kodlar:

<a href="https://twitter.com/BlogHocam" class="twitter-follow-button" data-show-count="false" data-lang="tr">Takip et: @BlogHocam</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Yine kırmızı renkle gösterdiğim yerlere kendi Twitter kullanıcı adınızı yazmalısınız. Örnek buton:

Takip et: @BlogHocam

Hashtag Butonu

Bu butona tıkladığınızda belirlediğiniz hashtagin olduğu bir tweet penceresi açılır ve bu hashtagla tweet yazılmasını kolaylaştırır. Butonun kodları:

<a href="https://twitter.com/intent/tweet?button_hashtag=blogyazarlığı" class="twitter-hashtag-button" data-lang="tr">Tweet #blogyazarlığı</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Kodlarda kırmızı renkli yerlere başka bir hashtag yazabilirsiniz. Örnek buton:

Tweet #blogyazarlığı

Mention Butonu

Birinin sizden bahsederek tweet göndermesini salayan butondur. Butonu eklemeniz için gerekli kodlar:

<a href="https://twitter.com/intent/tweet?screen_name=BlogHocam" class="twitter-mention-button" data-lang="tr">Tweet to @BlogHocam</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

Yine kırmızı renkli yerlere kendi Twitter kullanıcı adınızı yazın. Örnek buton:

Tweet to @BlogHocam

Twitter Kullanan Blog Yazarlarının Dikkatine…

Twitter’da Blog Hocam için açmış olduğum hesap olan @Blog Hocam hesabını takip etmenizi öneriyorum. Bu hesapta sadece Blog Hocam’da yaynlanan yazılarını değil, blog dünyası, sosyal medya, SEO, dijital pazarlama ve kişisel gelişim ile ilgili bilgiler, haberler, öneriler ve linkler paylaşıyorum. Ayrıca…

Yukarıdaki bileşen ve butonlarda gördüğünüz #blogyazarlığı etiketi bana, Blog Hocam’a veya başka birine ait değildir. Her blog yazarı bu etiketi kullanarak önerilerini, sorunlarını, denetyimlerini paylaşsın lütfen.

Blogger kullanıcıları tarafından en çok aranan ve istenen eklentilerden biri yıldızlı oy verme eklentisi. Bu konuda daha önce paylaştığım eklenti Javascript kodunun yapımcı hostundan kaldırılması nedeniyle çalışmıyordu. Ben de daha profesyonel olması için üçüncü parti uygulamalarında arayışa girdim ve işinize yarayacak güzel bir yıldızlı oy verme eklentisi buldum.

Aslında bu eklentiye yıldızlı oy verme eklentisi yerine yazı değerlendirme eklentisi demek daha doğru olur. Çünkü eklentiyi isterseniz yıldızlı, isterseniz de olumlu/olumsuz oy verme şeklinde kullanabiliyorsunuz. Şimdi adım adım bu eklentiyi oluşturmaya ve bloga eklemeye geçelim.

1. Adım: Rating Widget isimli bu ekletiyi kullanabilmeniz için öncelikle üye olmanız gerekiyor. Bu yüzden öncelikle widget oluşturma sayfasına giderek Create account butonuna basın.


Burada e-mail adresinizle bir hesap oluşturabileceğiniz gibi Facebook, Google veya LİnkedIn hesaplarınıza bağlanarak kısa yoldan hesap oluşturabilirsiniz.

2. Adım: Hesabınıza giriş yaptıktan sonra işe eklentinin stilini belirleyerek başlayabiliriz. Yıldızlı veya +/- oy verme stillerinden birini seçtikten yatay mı yoksa dikey mi kullanmak istediğimizi belirleyebiliyoruz.

Seçtiğiniz stilin örnek görüntüsünü yandaki Live Preview yazan bölümde anlık olarak görebilirsiniz. Stile karar verdikten sonra yıldızların şekli, rengi, boyutu, yazı tipi ve boyutu, yıldızların sayısı gibi özellikleri seçtikten sonra sağ tarafta oluşan kodu kopyalıyoruz.

3. Adım: Blogger kumanda panelinize giriş yaptıktan sonra Şablon > HTML’yi düzenle yolunu takip edin ve Ctrl + F tuş kombinasyonunun yardımıyla arama kutusunu açarak </body> kodunu bulun. Kopyaladığınız kodları bunun üzerine yapıştırın.  

Ardından <div class='post-footer'> kodunu bulun (Bu koddan şablonda birden fazla olabilir.İkincisi sizin için önemli. ) ve hemen üzerine şu kodu ekleyin.

<div class="rw-ui-container"></div>

Şablonda ön izleme yapığınızda yazının en altında yıldızlı oy verme eklentisinin gözükmesi gerekliyor. Şablonu kaydedebilirsiniz.

İpucu-1: Eğer eklenti ile yazınız arasında hiç boşluk yoksa eklediğiniz ikinci kodun önüne <br/> kodunu ekleyebilirsiniz.

İpucu-2: Eklentinin ana sayfada deil de yazı başlığına tıklayıp yazının içine girildiğinde görünmeini istiyorsanız ikinci kodu şu şekilde değiştirin:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="rw-ui-container"></div>
</b:if>

Açık ve net bir şekilde anlatmaya çalıştım ama bir sorunuz olursa yorum bölümünden sorabilirsiniz.

Blogunuzun veya şahsınızın  Facebook, Twitter, Google+ ve Pinterest hesapları ile blog yazılarınızın beslemelerinin yer aldığı RSS adresinize ait sosyal medya butonlarının yer aldığı başka bir eklenti daha paylaşmak istiyorum.

 
Bu eklentide pek çok özellik bir arada. Bu eklenti sadece takipçi sayıınzı arttırmakla kalmayacak, aynı zamanda blogunuzu görsel açıdan da zenginleştirecek. Bu sosyal menü eklentisi floating yani yüzen olduğu için sayfa aşağı ya da yukarı kaydırılsa bile menünün pozisyonu sabit kalacaktır. Sayfada sadece sosyal kanalların isimleri gözükürken, menünün üzerine gelindiğinde animasyon efektiyle birlikte açılacak ve tıklayan kişiyi ilgili sosyal kanala yönlendirecektir.

Eklentinin nasıl çalıştığını görmek için aşağıdaki demo videoyu izleyebilirsiniz.

Sosyal menü eklentisini blogunzda kullanmak isterseniz aşağıdaki kodları kendinize göre düzenledikten sonra Blogger kumanda panelinden Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek eklemeniz yeterli.

<!--Blog Hocam Sosyal Menü-->
<style type="text/css">
ul#sosyal {
    position: fixed;
    margin: 0px;
    padding: 0px;
    top: 20%;
    left: 0px;
    list-style: none;
    z-index:9999;
}
ul#sosyal li {
    width: 100px;
}
ul#sosyal li a {
    display: block;
    margin-left: -2px;
    width: 100px;
    height: 70px;   
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    border:1px solid #AFAFAF;
    -moz-border-radius:0px 10px 10px 0px;
    -webkit-border-bottom-right-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -khtml-border-top-right-radius: 10px;
    -moz-box-shadow: 0px 4px 3px #000;
    -webkit-box-shadow: 0px 4px 3px #000;
}
ul#sosyal .twitter a{
     background:#0F96C6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4pgTkf3waG3ck2GFqIVlhZAKbJBSi1kvSdviHbPENipZNW1iyjvlnUK6ndc-FtXEitRRd8etZNp82iUu_YqZ3lXaU5Sx2x-ZcdZS-VtC_phLIptDLyuo-Fxbz0rF4cIGChwJbHMk8hck/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#sosyal .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM-zQ90MBgbPvNZ6lqqp6t3mLUUp-B7eufEe4re5MRjjVZYB6beVyvGmyoKsgemxF_0H17EIVCDanniTWNf9k7xxcdH8_d7BEvyIFAnHIi2PehcH9ZE3fuuFWGRevXe2h7rkUTeeLi6TE/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#sosyal .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8sfwrppQhaYX-2Hgzb2ugZrg0tW-t22gPIOlgtNRfLeKG0Ixl0y32pfF6iaqw_RsCdFTbtCTpYN_qCBi3A0XbPXfhFOeAqPAKcCflf7ndf47BB9GOitOPkwk0fvui1cRarEgbkr1mAUM/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#sosyal .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS4bUW7fBzrIkxmcT_GJWeOSt3WpnjkCOM6rzuwdNr9gomz6h3xRL42OKDGpKddiFvwVZy4ZISNL0QNl41d0RbiJAeUPQHp6Qx0vYwUYIyR58_V3Ps6_nvJTX2s-pZi53HXl-FEElWfnk/s1600/rss.png)no-repeat;
background-position:center center;
}
 
ul#sosyal .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisA5Y4Y1xxO19IuUnFg-Yyjs05QNV20AB-o3lL9Kte8WZobzfNIgi9VB1TDjsdyBo2q8NyebifNz6AhyphenhyphenbTBtOEaPfarfK__m-0tjw45hWFI0SadRy-hxIn3hJxlSQSp7lRjD5CGA9WrHU/s1600/Pinterest.png)no-repeat;
background-position:center center;
}
</style>
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 
<script type="text/javascript">
$(function () {
    $('#sosyal a').stop().animate({
        'marginLeft': '-85px'
    }, 1000);
 
    $('#sosyal > li').hover(
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-2px'
            }, 200);
        },
        function () {
            $('a', $(this)).stop().animate({
                'marginLeft': '-85px'
            }, 200);
        }
    );
});
</script>
<br />
<ul id="sosyal">
<li class="twitter"><a href="http://twitter.com/bloghocam" title="Twitter"></a></li>
<li class="googleplus"><a href="http://gplus.to/bloghocam" title="Google Plus"></a></li>
<li class="facebook"><a href="http://facebook.com/bloghocam" title="Facebook"></a></li>
<li class="rss"><a href="http://feeds.feedburner.com/bloghocam" title="Rss"></a></li>
<li class="pinterest"><a href="http://pinterest.com/bloghocam" title="Pinterest"></a></li>
</ul>

Kırmızı renkle gösterdiğim yerlerde ilgili sosyal kanallara ait Blog Hocam’ın adresleri yazıyor. Oralara endi hesap adreslerinizi yazmayın unutmayın. Onların dışında değiştirmeniz gereken başka bir yer yok.

Blogunuzun sidebarını güzelleştirecek ve işlevsellik katacak, yine BH okuyucularına özel bir eklentiyi sizlerle paylaşmak istiyorum.

Bu droplink eklentisi bildiğiniz açılır menü mantığıyla çalışıyor ancak görsellik olarak oldukça orijinal ve dikkat çekici.  İmaj olarak eklediğim ve bizzat hazırladığım “Bağlı Kalın” (isterseniz değiştirebilirsiniz) yazısına tıklandığında, ziyaretçilerin sizinle bağlantı kurabileceği sosyal hesaplarla takip kanalların listesi çıkıyor. Her seçeneğin yanında da o kanala ait ikon bulunuyor.  Olabildiğince fazla kanal eklemeye çalıştım ancak kullanmadıklarınızı kaldırabilir veya yeni kanallar ekleyebilirsiniz.

Bu widgetı blogunuza eklemek için Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izleyin ve aşağıdaki kodları yapıştırın.

<!--Blog Hocam Droplink Widget-->
<div class="droplink">
    <h3><a href="#"><img src="https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/bagli-kal.png"/></a></h3>
    <ul>
      <li class="facebook"><a href="http://www.facebook.com/bloghocam" target="_blank">Facebook</a></li>
      <li class="twitter"><a href="http://twitter.com/bloghocam" target="_blank">Twitter</a></li>
      <li class="google"><a href="https://plus.google.com/108761595756468128383/" target="_blank">Google+</a></li>
      <li class="pinterest"><a href="http://pinterest.com/bloghocam" target="_blank">Pinterest</a></li>
      <li class="instagram"><a href="http://instagram.com" target="_blank">Instagram</a>
</li>
      <li class="linkedin"><a href="http://www.linkedin.com/" target="_blank">LinkedIn</a>
</li> 
      <li class="youtube"><a href="http://youtube.com" target="_blank">YouTube</a>
</li>
      <li class="rss"><a href="http://feeds.feedburner.com/bloghocam" target="_blank">RSS</a></li>
      <li class="mail"><a href="http://bloghocam.blogspot.com/p/iletisim.html" target="_blank">E-Mail</a></li>
     
    </ul>
</div>
<style>
.droplink {
    width: 200px;
    position:absolute;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;}
.droplink ul, .droplink h3, .droplink h3 a{
    padding: 0px;
    margin: 0px;}
.droplink:hover {
    height: auto;
    background-color: #3E403D;
    border: solid 1px #3A3C39;}
.droplink h3 a {
    text-align: center;
    width: 100%;
    display: block;
    padding: 2px 0px;
    color: #333;
    letter-spacing: 3px;
    text-decoration: none;
    text-transform: uppercase;}
.droplink h3 a img{
    border: none;}
.droplink:hover h3 a {
    color: #FFF;
    font-weight: bold;}
.droplink:hover h3 a {
    position: absolute;
    left: -1px;
    top: -1px;}
.droplink ul{
    list-style: none;   
    display: none;}
.droplink:hover ul{
    display: block;
    margin-top: 40px;}
.droplink li{
    display: block;}
.droplink li a{
    padding: 5px 12px 4px 34px;   
    margin: 1px;
    background-color: #484A47;
    display: block;
    color:#FFF;
    text-decoration: none;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    background-repeat:no-repeat;
    background-position: 10px 3px;}
.droplink li a:hover {
    background-color: #CC3B1F;}
.droplink .facebook a {
    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/facebook.png");}
.droplink .linkedin a {
    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/linkedin.png");}
.droplink .twitter a {
    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/twitter.png");}
.droplink .google a {
    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/gplus.png");}
.droplink .youtube a {
    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/youtube.png");}
.droplink .rss a {
    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/rss.png");}
.droplink .pinterest a {
    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/pinterest.png");}
.droplink .instagram a {
    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/instagram.png");}
.droplink .mail a {
    background-image:url("https://dl.dropboxusercontent.com/u/60346665/BH-droplink-icons/email.png");}
</style>
<!--Blog Hocam Droplink Widget-->

Düzenlenecek yerler:

Kodlarda kırmızı renkle gösterdiğim link “Bağlı Kalın”  ikonuna ait link. Buraya kendi hazırlayacağınız “takip et, iletişim kur, sosyalleşelim… vb” şeklindeki ikonların linkini koyabilirsiniz. Mavi renkle gösterdiğim yerlere ise kendi hesap adreslerinizi yazcaksınız.

Listeden bir öğeyi kaldrmak:

Yazının başında da belirttiğim gibi olabildiğince fazla kanal eklemye çalıştım ancak siz bunların hepsini kullanmak istemeyebilirsiniz. Listeden kaldırmak istediğiniz öğe hangisiyse o öğenin <li> ve </li> kodları arasında bölümünü silmeniz yeterli. Örneğin bir Youtube kanalınız yoksa ve YouTube öğesini listeden kaldırmak istiyorsanız şu kodları silmeniz yeterli olacaktır:

<li class="youtube"><a href="http://youtube.com" target="_blank">YouTube</a>
</li>

Listeye yeni öğe eklemek:

En çok kullanalan sosyal ve iletişim kanallarını eklemeye çalıştım ama bunların dışında bir öğe de eklemek isteyebilirsiniz. Bunu 2 adımda gerçekleştireceksiniz. Bir örnekle anlatırsam daha alaşlır olacak sanırım. Flickr hesabımızı listeye eklemek istediğimizi düşünelim.

1. Adım: Öncelikle kodların HTML bölümünde </ul> taginin hemen üstüne Flickr’ın HTML kodunu şu şekilde ekleyeceğiz:

<li class="flickr"><a href=http://flickr.com/kullanıcıadı target="_blank">YouTube</a>
</li>

2. Adım: Şimdi de listedeki Flickr öğesinin yanında gösterilecek ikonu tanıtacağız. Bunun için </style> taginin hemenüzerine şu kodu ekliyoruz:

.droplink .flixkr a {
    background-image:url(http://flickr.png);}

İşlem bu kadar.

Bu widgetı sadece sosyal kanallar için kullanmak zorunda değilsiniz. Farklı amaçlarla da kullanabilirsiniz. Örneğin favori sitelerinizi listeleyebilir, blogunuzun kategorilerini listeleyebilir veya blogunuzun sabit sayfalarını bu menüde toplayablirsiniz.

Kafanıza takılan soru veya bir öneriniz olursa yorum bölümünden sorabilirsiniz. Aşağıdaki sosyal paylaşım butonlarını kullanarak yazıyı arkadaşlarınızla paylaşırsanız memnun olurum.

Windows 8 ile hayatımıza giren “Metro” tarzı, web sitelerin ve blogların tasarımında da sıkça kullanılıyor. Ben Windows 8’i ve bloglardaki metro tarzı tasarımları pek sevmedim ama kenar çubuğunda kullanılan metro tarzı sosyal butonlar ve eklentiler hiç fena durmuyor.

Pek çok blogda kullanıldığını gördüğüm metro tarzı sosyal medya eklentisi oldukça beğenilmişti. Bu kez daha küçük butonlardan ve yine metro tarzında bir arama kutusundan oluşan, kenar çubuğunuzda biraz daha az yer kaplayacak bir eklentiyi sizlerle paylaşmak istiyorum.

Bu eklentide, ziyaretçilerin blogunuzu takip etmeleri için ilgili kanallara yönlendirecek, metro tarzında Facebook, Twitter, Google+ ve RSS butonları var. Hemen altlarında ise yine metro tarzında bir arama kutusu yer alıyor. Eklentinin en güzel özelliklerinden biri ise butonlara eklenmiş olan CSS hover efekti.

Eklentiyi blogunuza eklemek için Blogger kumanda panelinize girdikten sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izleyin ve aşağıdaki kodları yapıştırın.

<!--Blog Hocam Metro Tarzı Sosyal Butonlar Ve Arama Kutusu-->
<div class="BH-metro-sosyal">
<li><a class="fb" href="http://www.facebook.com/bloghocam"></a></li>
<li><a class="tw" href="http://twitter.com/bloghocam"></a></li>
<li><a class="gp" href="https://plus.google.com/108761595756468128383/"></a></li>
<li><a class="fd" href="http://feeds.feedburner.com/bloghocam"></a></li>
<form action="/search" class="form-wrapper cf" id="searchthis" method="get" style="display: inline;">
<input id="form-wrapper input" name="q" placeholder=" Ara... " required="" type="text" />
<button type="submit"></button>
</form><br /></div>

<style>
.BH-metro-sosyal {
width:300px;}
.BH-metro-sosyal li {
position:relative;
cursor:pointer;
padding:0;
list-style:none;}
.BH-metro-sosyal .fb,.tw,.gp,.pi,.in,.yt,.fd {
z-index:7;
float:left;
margin:2.5px;
position:relative;
display:block;}
.BH-metro-sosyal .tw {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsMVHbhWoFmuuaQDRPJUYndqPmH-EE2QaPPV6Klh15f8A-LC-A0HjGrC__Oo9qqzZrS_igDL6t3o_hO9yvBdwd-k22TSaIxEnjIX_lZqhYHWWWrALkt2A2WjBThOZ0se_UOavY68tas14/h120/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.BH-metro-sosyal .fb {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmv8rJYYOntV_KQPjhajbS1U9hk3OLk1i_kHGgkceII-3Ibt2HrOXl17Lciw5t_RMa5-DtWPuXqE2HA5OVXlvlauAl7BhB6YLQxltVM6KqV8ew1JyYNehmFnJnMKDNI9yPQn-fPoTxTZM/h120/facebookf.png.png) no-repeat center center #1f69b3;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.BH-metro-sosyal .gp {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY6LOz9Xl-9MgbQAoroSR8Br32w65ARk0SXn_uQ88rknZHiv_TCJ5IZfmu2hNhuj_cy3DIfqgx_Zey85_RvICIzI198thyTKYBhetLCbkmm5jx3h7bzcQf1lBq2MHdHAtATPu8w7t-has/h120/google+plus.png) no-repeat center center #da4a38;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.BH-metro-sosyal .fd {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8zqvCQQzL7aAvGpD0XxUCmiVG0yvEdWNBZfRIicj_YVw5ysM1mT__2xSmZTP8b9SVLQEcDBjgGgVlG-wzn00Wo1yH0bUkIAAI6ei6mxBVhFFo-vIWYDLeYJkmhtwBHllGaskOCUyX7iY/h120/feed.png) no-repeat center center #e9a01c;
width:70px;
height:70px;
-webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.BH-metro-sosyal li:hover .fb {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-0w84RB5YwTC3ekAOGLNS6t_R3vz_g7tBBrmkOYQ_oSJB3B0VPaAM5jCM1pMqPL02I86vdo3n5WTp5N2AVHbLcLls9PChDHJQzu0b0tzyzLTFkpv-tFcnl4PQRaUi946Z85HNw0-h56U/h120/facebookfh.png) no-repeat center center #1f69b3;
box-shadow:0px 0px 6px 3px #217BC0;
-webkit-box-shadow:0px 0px 6px 3px #217BC0;
-moz-box-shadow:0px 0px 6px 3px #217BC0;
-o-box-shadow:0px 0px 6px 3px #217BC0;
-ms-box-shadow:0px 0px 6px 3px #217BC0;}
.BH-metro-sosyal li:hover .tw {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9M5g5KZB3R_OrJPSEImErTSO8cJj07UtS5i8JKYje1USba4abkfWfUFAtS0X5bAiLjIYo64Mr9SfcNYWx2NEDVTFAPD2nul09H6oIcsLSZ7fQw9tCfDp_z9LPfjI0C_xOYBZTHi2LppE/h120/twitter-bird-dark-bgsx.png) no-repeat center center #43b3e5;
box-shadow:0px 0px 6px 3px #38D1F7;
-webkit-box-shadow:0px 0px 6px 3px #38D1F7;
-moz-box-shadow:0px 0px 6px 3px #38D1F7;
-o-box-shadow:0px 0px 6px 3px #38D1F7;
-ms-box-shadow:0px 0px 6px 3px #38D1F7;}
.BH-metro-sosyal li:hover .gp {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEvT9MHHaRHVJIQ9iL-yJN3aUyGUQ62RBpMoYBnDX1qPr6RO-hnpRRcG4Cu93THCbvM0fJfwNK2_I8uyf_j_jL1NNKLZgwWjMaifgzWW8piYLsEagxSkN_ih1tlLJ0E8C3lblBjUJYdlQ/h120/google+plush.png) no-repeat center center #da4a38;
box-shadow:0px 0px 6px 3px #F43431;
-webkit-box-shadow:0px 0px 6px 3px #F43431;
-moz-box-shadow:0px 0px 6px 3px #F43431;
-o-box-shadow:0px 0px 6px 3px #F43431;
-ms-box-shadow:0px 0px 6px 3px #F43431;}

.BH-metro-sosyal li:hover .fd {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVn9-ZZ0YXDBYE97TNY_XTb8vjzmJcXZlY8toOgVK0cH3WeNKw3Ycg0wUA6GG0J9J753eMRLgDS-kXenu-hBrhe6UZePwk1tmiQfU9BM17j3NU2ufrOn3g7Onw8YRSkkNeycHD5oH3hYw/h120/feedh.png) no-repeat center center #e9a01c;
box-shadow:0px 0px 6px 3px #e9a01c;
-webkit-box-shadow:0px 0px 6px 3px #e9a01c;
-moz-box-shadow:0px 0px 6px 3px #e9a01c;
-o-box-shadow:0px 0px 6px 3px #e9a01c;
-ms-box-shadow:0px 0px 6px 3px #e9a01c;}
.cf:before, .cf:after{
content:"";
display:table;}
.cf:after{
clear:both;}
.cf{
zoom:1;}
.form-wrapper {
width: 280px;}
.form-wrapper input {
width: 215px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
box-shadow: 0 0 6px rgba(0,0,0,.3) inset;
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.form-wrapper input:focus {
outline: 0;
background: #fff;
border-color: #51a7e8;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;}
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 75px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRM9fMQyyh08fQQD_YXu9R-hYWhdQUO96Yap2lv_Kuc90p7WCck4WVvHNXNmHGtUbnsplM_JPAIiKqYiTUZ_cgpAMsJWU3SPRrHeqjojXwLAFB3Xhn7xw0JLKzY8TMphjyWL4ThicZ18/h120/1367665345_search.png) no-repeat center center #26B11E;
border-radius: 0 0 0 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
webkit-transition: box-shadow .3s linear, background .2s linear;
-moz-transition: box-shadow .3s linear, background .2s linear;
-ms-transition: box-shadow .3s linear, background .2s linear;
-o-transition: box-shadow .3s linear, background .2s linear;
transition: box-shadow .3s linear, background .2s linear;}
.form-wrapper button:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRM9fMQyyh08fQQD_YXu9R-hYWhdQUO96Yap2lv_Kuc90p7WCck4WVvHNXNmHGtUbnsplM_JPAIiKqYiTUZ_cgpAMsJWU3SPRrHeqjojXwLAFB3Xhn7xw0JLKzY8TMphjyWL4ThicZ18/h120/1367665345_search.png) no-repeat center center #26B11E;
box-shadow:0px 0px 6px 3px #44D816;
-webkit-box-shadow:0px 0px 6px 3px #44D816;
-moz-box-shadow:0px 0px 6px 3px #44D816;
-o-box-shadow:0px 0px 6px 3px #44D816;
-ms-box-shadow:0px 0px 6px 3px #44D816;}
.form-wrapper button:active,
.form-wrapper button:focus{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRM9fMQyyh08fQQD_YXu9R-hYWhdQUO96Yap2lv_Kuc90p7WCck4WVvHNXNmHGtUbnsplM_JPAIiKqYiTUZ_cgpAMsJWU3SPRrHeqjojXwLAFB3Xhn7xw0JLKzY8TMphjyWL4ThicZ18/h120/1367665345_search.png) no-repeat center center #26B11E;
outline: 0; }
.form-wrapper button:before {
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #26B11E transparent;
top: 12px;
left: -6px;}
.form-wrapper button:hover:before{
border-right-color: #26B11E;}
.form-wrapper button:focus:before,
.form-wrapper button:active:before{
border-right-color: #26B11E;}
.form-wrapper button::-moz-focus-inner {
border: 0;
padding: 0;}
</style>
<!--Blog Hocam Metro Tarzı Sosyal Butonlar Ve Arama Kutusu—>

Kodlarda renkli yazdığım yerlere kendi adreslerinizi yazmak dışında bir değişikliğe gerek yok. Bir sorunuz veya öneriniz olursa yorum bölümünden sorabilirsiniz.

Menüler blogların olmazsa olmazlarıdır ve genellikle yatay olanları tercih edilir. Ancak bu, dikey menü kullanılmayacak anlamına gelmez. Dikey menülerin fazla tercih edilmemesinin nedeni bence çok yer kaplamaları ancak ufak bir scriptle bu sorun çözülebilir.

Blog Hocam’da daha önce bu tarz bir menü paylaşmadığımı gören Mustafa Aydın blogunda kullandığı akordeon menünün kodlarını bizimle paylaşmak istedi. Menüde ana başlıklara tıkladığınızda akordeon şeklinde açılıyor ve alt başlıklar gözüküyor. Akordeon şeklinde açılır kapanır olması daha az yer kaplamasını sağlıyor. Yani oldukça kullanışlı bir menü diyebiliriz.

Görmüş olduğunuz resim, menüyü bizimle paylaşan Mustafa Aydın’ın bloguna ait. Nasıl çalıştığını görmek için blogunu ziyaret edebilirsiniz.

Bu menüyü blogunuza eklemek isterseniz Blogger kumanda paneline giriş yaptıktan sonra Yerleşim > Gadget ekle > HTML/JavaScript yolunu takip ederek aşağıdaki kodları yapıştırın.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
    $('li.title a').click(function(e){
        var dropDown = $(this).parent().next();
        $('.downlistie').not(dropDown).slideUp('slow');
        dropDown.slideToggle('slow');
        e.preventDefault();
    })
});
</script>
<style>
ul.container{
    width:100%;
    padding:5px;

}
li.accoi-menu{
list-style:none;
    padding:1px;
    width:100%;
    }
li.title
{
background:#45a2bf;
list-style:none;
padding:5px;
}
li.title a{
color:#fff;
    display:block;
padding:5px;
    font:14px georgia, verdana;
    overflow:hidden;
        position:relative;
    width:100%;
     text-decoration:none;
}
.downlistie{

list-style:none;
    display:none;
    padding-top:5px;
    width:100%;
}
.downlistie li{
background: #f8f8f8;
   list-style:none;
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
border-right:1px solid #ccc;
border-left:1px solid #ccc;

    margin:5px ;
    padding:4px 10px;    
}

.downlistie li:hover {
background: #63beda;
}
.downlistie li a{
{
font:14px georgia, verdana;
text-decoration:none;
color:#333;
}
.downlistie li a:hover {
text-decoration:none;
color:#333;
}
</style>
<ul class="container">
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Başlık</a></li>            
<li class="downlistie">
<ul>
<li><a href='#'>Alt başlık</a></li>
</ul></li></ul></li>
<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Başlık</a></li>
<li class="downlistie">
<ul>
<li><a href='#'>Alt başlık</a></li>
</ul></li></ul></li>
</ul>

Düzenlemede, özellikle yeni öğe eklemede biraz zorluk çekebilirsiniz ancak deneme yanılmalarla mantığını kısa sürede çözeceğinizi düşünüyorum. Şöyle bir örnek vereyim. Menüye yeni bir ana başlık eklemek istiyorsanız son </ul> kodundan önce şu kodları ekleyin:

<li class="accoi-menu">
<ul>
<li class="title"><a href="#" >Başlık</a></li><li class="downlistie">
<ul>
<li><a href='#'>Alt başlık</a></li>
</ul></li></ul></li>

Ana başlıklardan birinin altındaki alt başlıkları çoğaltmak isterseniz <li><a href='#'>Alt başlık</a></li> hemen yanına aynısından bir tane daha ekleyin.

Kolay gelsin!

Arama kutuları ziyaretçilerin aradıkları içeriğe kolayca ulaşabilmesi açısından çok önemli. Hatta zaman zaman siz bile ardığınız bir konu için blogunuzdaki arama kutusunu kullanabilirsiniz. Özellikle içerik sayınız fazla ise. Bu bakımdan daha önce 2 farklı arama kutusu paylaşmıştım. Bunlar:

• Açılır Arama Kutusu
• PSD Arama Kutusu

Bu kez paylaşacağım arama kutusunu diğerlerinden ayıran pek çok özellik var. Örneğin tarz olarak Google’ın tarzına sahip. Ayrıca daha önce paylaştığım açılır arama kutusundaki tıklayınca açılma efekti bunda da var. En önemli özelliği ise blogun bir köşesinde sabit kalması. Floating ( yüzen, kayan ) denen bu özellik sayesinde ziyaretçiler sayfayı aşağı yukarı kaydırsa bile arama kutusu hep önlerinde olacak.

Sadece CCSS3 tekniği kullanılarak oluşturulan bu arama kutusunun nasıl çalıştığını daha iyi anlamak için aşağıdaki demo videoyu izleyebilirsiniz.

Bu arama kutusunu kullanmak için yapmanız gereken tek şey Blogger kumanda paneline girdikten sonra Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu izlemek ve aşağıdaki kodları eklemek.

<!-- Blog Hocam Google Tarzı Sabit Arama Kutusu -->
    <div class='bh-arama' id='bh-arama'>
      <form action='/search' id='bh-aramaformu' method='get'>
        <input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Ara...&quot;;}' onfocus='if (this.value == &quot;Ara...&quot;) {this.value = &quot;&quot;}' type='text' value='Ara...'/>
        <button id='sbutton' type='submit'>
          <span id='simg'/>
        </span></button>
      </form>
    </div>
<style type="text/css">
#sbutton {
background: -moz-linear-gradient(center top , #4D90FE 0%, #4787ED 100%) repeat scroll 0pt 0pt transparent;background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#4787ed));
background: -webkit-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#4787ed 100%);
background: linear-gradient(top, #4d90fe 0%,#4787ed 100%);background-color: #4d90fe;
border: 1px solid #3079ED;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
height: 27px;
min-width: 76px;
padding: 0 21px;padding-bottom: 2px;
}
#sbutton:hover{ background-color: #357AE8;
background-image: -moz-linear-gradient(center top , #4D90FE, #357AE8);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4d90fe), color-stop(100%,#357ae8));
background: -webkit-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -o-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: -ms-linear-gradient(top, #4d90fe 0%,#357ae8 100%);
background: linear-gradient(top, #4d90fe 0%,#357ae8 100%);
border: 1px solid #2F5BB7;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
#simg {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnEU84htH8GbU9q1WB8HH4ZcVMucpMPUqhRNQbSGCXr9SHlzpX0oeP0RQv5Hwk9SsfC-ukROWR6EKeayHE1hnlftiHhInpGQotXeJ7aMow5-x_fKe5Qb_3X2QDxBtXyG8LthGTx2WlcDY/s1600/searchicon.png") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 14px;
margin: 0;
width: 17px;z-index:101;
}#s:hover {box-shadow: 0 1px 2px #C1C1C1 inset;}
#s {border: 1px solid #BCBCBC;border-radius: 4px 4px 4px 4px;font: italic 14px times New Roman;padding: 4px 2px;width: 146px; -moz-transition: width 0.2s ease-in 0s; -webkit-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in;}
#s:focus {width: 200px;}
.bh-arama {
display: block;
position: fixed;
right: 0;
top: 1%;
max-width: 300px;min-width: 238px;
z-index: 100;
}
</style>
<!-- Blog Hocam Google Tarzı Sabit Arama Kutusu –>

Arama kutusu sayfanın sağ üst köşesinde konumlanacak şekilde kodlanmış. Eğer sol üst köede durmasını istiyorsanız right: 0; yazan yeri left: 1% olarak değiştirmeniz yeterli.

Google’dan sonra en önemli trafik kaynaklarından biri olan sosyal medya kanallarında yer almaya dikkat etmeliyiz. Facebook, Twitter, Google+ gibi popüler sosyal platformlarda takipçi sayımız ne kadar çok olursa, blog trafiğimiz o kadar artar. Bu yüzden blogumuza sosyal medya butonları koyarak ziyaretçilerimizi bu platformlardaki hesaplarımıza yönlendirmeliyiz. İşte blogunuzun kenar çubuğuna ekleyebileceğiniz, hover efektli şık bir sosyal takip eklentisi…

Bu resimden başlıkta bahsettiğim dönme efektini anlamanız elbette mümkün değil. Bu yüzden aşağıdaki demo videoyu izlemenizi de öneririm.

Eklentiyi blogunuzda kullanmaya karar verdiyseniz Blogger kumanda paneline girdikten sonra Yerleşim > Gadge Ekle > HTML/JavaScript Gadget yolunu izleyerek aşağıdaki kodları eklemeniz yeterli.

<!--Blog Hocam Metro Spinning Sosyal Takip Eklentisi-->

<div class="subscribe">
<ul> <li class="rss"><a href="http://feeds.feedburner.com/bloghocam" target='_blank'><span></span>RSS</a></li>
<li class="twitter"><a href="http://twitter.com/bloghocam" target='_blank'><span></span>Twitter</a></li>
<li class="gplus"><a href="https://plus.google.com/108761595756468128383" target='_blank'><span></span>Google Plus</a></li>
<li class="facebook"><a href="http://facebook.com/bloghocam" target='_blank'><span></span>Facebook</a></li> </ul>
</div> 

<style>
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe .twitter span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYiGG9wKuplOKDj_tDhprkGgmNRcMiqLU8gjJ2Au4LgZtrwGTxamgZDe3EoEqTzL1Ok7da37LpVd4xVbk_QX9U4fNlCTxuKhqLTjXXFEfk-fVwqfFW_NfwwpCWgz8YO9bK8IImySj6mz8/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);   
}   
ol, ul {
list-style: none outside none;
}
.subscribe li {
display: block !important;
margin-right: 0 !important;
width: auto !important;
}
.subscribe li {
display: inline-block;
margin: 0 20px 10px 0;
position: relative;
width: 200px;
}
.subscribe .rss span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPLByQHZKU4pzGidmzAI2FelTqYJDv2pMsxzErVcxFrZw6RXCI4_vp03tcss8gctBxhnjv9TikflX4jDTDl2AFoNUemYLWIIKFFGDy0VhqjQl9txaJWOtPGa_wEsrdYlFigr-3P3JFHi4/s1600/rss-icon.png) no-repeat;
}
.subscribe .rss a {
background: #F67F00;
}
.subscribe li a {
color: #FFFFFF;
display: block;
font-family: verdana;
font-size: 12px;
padding: 10px 10px 10px 40px;
text-decoration: none;
font-weight: bold;
}
.subscribe li a span {
display: block;
height: 32px;
left: 0;
position: absolute;
top: 2px;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
transition-duration: 0.8s;
-webkit-transition-duration: 0.8s;
transition-property: all;
width: 32px;
}
.subscribe li a:hover span {
transform:rotate(340deg);
-webkit-transform:rotate(340deg);
} 
.subscribe .twitter span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYiGG9wKuplOKDj_tDhprkGgmNRcMiqLU8gjJ2Au4LgZtrwGTxamgZDe3EoEqTzL1Ok7da37LpVd4xVbk_QX9U4fNlCTxuKhqLTjXXFEfk-fVwqfFW_NfwwpCWgz8YO9bK8IImySj6mz8/s1600/twitter_icon.png) no-repeat;
}
.subscribe .twitter a {
background: #91C661;
}
.subscribe .gplus span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4xDxi8VjnqWcN7kPqs4BSgtCCkekiRGULsruxMEEYv8BdHnSszBPvxtgpE2frbP5y5pMh33LeYlaamIhEGrq8SAyHXLn-enMLCxTDYVlL3673W0HEXMt8f0VjN8zvdQr7F2FjVdWjc5Q/s1600/googleplus.png) no-repeat;
}
.subscribe .gplus a {
background: #D74D2F;
}
.subscribe .facebook span {
background-color: transparent;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhwiaAoR9UuOOvX5JJHfWHBh2CSnDIAd2c-tEsDYEnPr0F-WmOZLPxaT2nF7YdZG20gqTB4GKT9uW0LJTDiwIV9DRjNTVkPAKapH_ZxScjjYEtg-zoA25Bn_Uqm7RJ3TErcCRxLMaGSw/s1600/facebook-icon.png) no-repeat;
}
.subscribe .facebook a {
background: #3B5998;
}
</style>

<!--Blog Hocam Metro Spinning Sosyal Takip Eklentisi-->

Bordo renkle gösterdiğim Blog Hocam’a ait hesap adreslerinin yerine kendi adreslerinizi yazmayı unutmayın!

Alternatif sosyal takip eklentisi arayanlar daha önce paylaştığım şu eklentilere de bakabilirler:

• Blogunuz için Şık Bir Abonelik Widget'ı
• Blogunuza Sosyal Takip Butonları Ekleyin
• Hover Efektli Sosyal Takip Eklentisi
• Metro Tarzı Sosyal Medya Eklentisi
• İpucu Balonu Tarzında Sosyal Takip Butonları

Yaklaşık 2 – 2,5 ay önce Blogger özelliklerini arttırmaya devam etmiş ve offical iletişim formunu gadget olarak ekleme imkanı sunmuştu. Oldukça hızlı, basit ve kullanışlı olan bu iletişim formunun belki de tek kötü yanı sadece gadget olarak eklenebilmesiydi. Bu yazıda Blogger’ın resmi iletişim formunu kullanarak nasıl iletişim sayfası oluşturabileceğinizi anlatmak istiyorum.

1. Adım: Öncelikle Blogger’ın iletişim formu gadgetını blogunuzun sidebarına eklemeniz gerekiyor. Bunun için Blogger kumanda panelinize girdikten sonra Yerleşim > Gadget Ekle > Diğer Gadgetlar yolunu takip ederek listeden İletişim Formu gadgetını seçin.

2. Adım: İletişim formunun sidebarda olmasını istemediğimiz bu adımda formun gadget olarak görünmemesi için gerekli kod değişikliğini yapacağız.

Blogger kumanda paneline girip Şablon > HTML’yi Düzenle yolunu takip ettikten sonra sonra Widget’a Atla > ContactForm1 diyerek iletişim formuna ait kodların olduğu bölüme gelin. Bu bölümdeki kodların sol tarafındaki ▶ ikonuna tıklayarak kodları genişletin. Genişletme işlemini yaptığınızda iletişim formu gadgetına ait kodlar şu şekilde gözükecektir:

<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'>
    <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        <data:contactFormNameMsg/>
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' size='30' type='text' value=''/>
        <p/>
        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' size='30' type='text' value=''/>
        <p/>
        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' rows='5'/>
        <p/>
        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

Burada kırmızı renkle gösterdiğim kodların tamamını silerseniz blogunuz iletişim formunu algılayacak ancak sidebarda gadget olarak gözükmeyecek. Sonraki adım sabit bir iletişim sayfası oluşturarak iletişim formunu burada göstermek olacak.

3. Adım: Sıra sayfayı oluşturma geldi. Sayfalar > Yeni Sayfa > Boş Sayfa yolunu takip ederek yeni bir sayfa oluşturun ve sayfa başlığına İletişim  yazın. Daha sonra sol üst taraftaki Oluştur / HTML sekmelerinde HTML sekmese geçerek aşağıdaki kodları buraya yapıştırın:

<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>İsim<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-Posta *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Mesaj *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder'/>
        <p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
        <p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
      </form>
    </div>
  </div>
</div>

Önizleme yaptığınızda sorun yoksa ve iletişim formu gözüktüyse sayfayı kaydedebilirsiniz.

4. Adım: Sırada iletşim formuna biraz stil vermek var. Şablon > HTML’yi Düzenle yolunu takip ettikten sonra  <b:skin><![CDATA ile ]]></b:skin> kodları arasında bir yere aşağında stil kodlarını ekleyin.

/* Blog Hocam İletişim Sayfası */
.contact-form-widget {
width: 500px;
max-width: 100%;
margin: 0 auto;
padding: 10px;
background: #E6E7E8;
color: #000;
border: 1px solid #656E75;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
border-radius: 10px;
}

.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}

.contact-form-button-submit {
border-color: #656E75;
background: #E6E7E8;
color: #000;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}

.contact-form-button-submit:hover{
background: #679EC9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
/* Blog Hocam İletişim Sayfası */

Şablonu kaydedin ve Blogger’ın resmi iletişim formunu kullanarak oluşturduğunuz iletişim sayfanız hazır.

Takıldığınız yer olursa yorum bölümünden sorabilirsiniz.

Blog şablonlarının ve tasarımlarının en önemli öğelerinden biri şüphesiz menüler. Bu sebeple farklı tarzlarda menüler paylaşmam için çok mesaj alıyorum. Bugüne kadar 3 değişik tarzda menü paylaşmıştım. Bunlar:

- Basit Link Menüsü

- Dropdown Menü

- CSS Mega Açılır Menü

Bu yazıda paylaşacağım 3 boyutlu açılır menün de işlev olarak mega açılır menüden farkı yok. Farkı açılırken 3 boyutlu bir efektle açılmasında.

Resimde gördüğünüz gibi bu menüye; 1 sütunlu, 2 sütunlu, 3 sütunlu açılır ve sabit öğeler ekleyebiliyorsunuz. Menünün nasıl çalıştığını ve 3 boyut efektini görmek isterseniz demo videoyu izleyebilirsiniz.

Gelelim menüyü blogunuza eklemeye. İlk olarak stil kodlarını ekleyelim. Bunun için Blogger kumanda paneline giriş yaptıktan sonra Şablon > HTML’yi Düzenle diyerek şablonun kodlarını açıyoruz ve Ctrl + F kuş kombinasyonuyla açılan arama kutusunun yardımıyla ]]></b:skin> kodunu buluyoruz. Bu kodun üzerinde bir yere aşağıdaki stil kodlarını ekliyoruz.

/* Blog Hocam 3D Açılır Menü */

.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#F1921A;
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav &gt; li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#fff;}
  .menuHolder ul.nav li:hover a.top-a {background:#679EC9; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#679EC9; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #679EC9; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#679EC9; margin:0; padding:4px 0 4px 15px; background:transparent ;}
.menuHolder ul.nav div ul li a:hover {color:#000; background:transparent ;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}

/* Blog Hocam 3D Açılır Menü */

Sırada menünün HTML kodlarını eklemek var. 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.

<!--Blog Hocam 3D Açılır Menü-->
<div id='info'>
<div class='menuHolder'>
<ul class='nav'>
<li><a class='top-a' href='#url'><b>Ana Sayfa</b></a></li>
<li><a class='top-a' href='#url'><b>3 Sütunlu</b></a>
<div class='col3'>
<ul class='colLeft'>
<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/2013/02/blogcular-icin-faydal-chrome-uzantlar.html'>Chrome Uzantıları</a></li>
<li><a href='http://bloghocam.blogspot.com/2011/06/bloguuz-icin-ucretsiz-iletisim-formu.html'>İletişim Formu</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/04/en-iyi-ucretsiz-blog-acma-siteleri.html'>Blog Siteleri</a></li>
<li><a href='http://bloghocam.blogspot.com/2011/04/feedburner-kurulumu-ve-ayarlar.html'>Feedburner</a></li>
</ul>
<ul class='col'>
<li><a href='http://bloghocam.blogspot.com/2012/01/google-alerts-ile-sizden-bahsedenleri.html'>Google Alerts</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/05/basarl-ve-populer-kisisel-bloglar.html'>Kişisel Bloglar</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/02/takip-etmeniz-gereken-resmi-google.html'>Google Blogları</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/05/turkiyenin-en-kaliteli-teknoloji-bloglar.html'>Teknoloji Blogları</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/01/bloglar-icin-ziyaretci-trafigi-rehberi.html'>Trafik Arttırma</a></li>
</ul>
<ul class='colRight'>
<li><a href='http://bloghocam.blogspot.com/2013/04/turkiyenin-en-unlu-moda-bloglar-ve.html'>Moda Blogları</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/06/turkiyenin-en-iyi-gezi-bloglar.html'>Gezi Blogları</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/04/turkiyenin-en-iyi-yemek-bloglar-mercek.html'>Yemek Blogları</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/03/adm-adm-iyi-bir-blog-sitesi-kurmak.html'>Blog Kurmak</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/05/blogunuz-icin-anket-olusturma-rehberi.html'>Anket Oluşturma</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#url'><b>2 Sütunlu</b></a>
<div class='col2'>
<ul class='colLeft'>
<li><a href='http://bloghocam.blogspot.com/2012/07/fotoblog-olusturma-rehberi.html'>Fotoblog Oluşturma</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/03/nis-blogculuk-kavram.html'>Niş Blogculuk</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/02/arsiv-sayfam-nasl-olusturdum.html'>Arşiv Oluşturma</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/05/blogger-icin-youtube-eklentisi.html'>YouTube Eklentisi</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/12/flash-mp3-calar-eklentisi.html'>MP3 Çalar</a></li>
</ul>
<ul class='colRight'>
<li><a href='http://bloghocam.blogspot.com/2012/06/slayt-manset-eklentisi.html'>Slayt Manşet</a></li>
<li><a href='http://bloghocam.blogspot.com/2011/02/blogger-ile-blog-olusturma.html'>Blog Oluşturma</a></li>
<li><a href='http://bloghocam.blogspot.com/2011/04/blogger-sablon-yukleme.html'>Tema Yükleme</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/01/blogger-tipleri.html'>Blogger Tipleri</a></li>
<li><a href='http://bloghocam.blogspot.com/2012/11/analiz-icin-kullandgm-seo-araclar.html'>SEO Araçları</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#url'><b>1 Sütunlu</b></a>
<div class='col1'>
<ul class='colSingle'>
<li><a href='http://bloghocam.blogspot.com/2011/06/anchor-text-hakknda-hersey.html'>Anchor Text</a></li>
<li><a href='http://bloghocam.blogspot.com/2011/05/blogger-icin-google-sitemap-olusturma.html'>Google Sitemap</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/01/google-author-rank-nedir.html'>Author Rank</a></li>
<li><a href='http://bloghocam.blogspot.com/2013/05/off-page-seo-dogal-link-insaas.html'>Off Page SEO</a></li>
</ul>
</div>
</li>
<li><a class='top-a' href='#url'><b>Sabit</b></a></li>

</ul>
</div>

</div>
<!--Blog Hocam 3D Açılır Menü-->

Örnek olması için kodlarda Blog Hocam’da ki bazı yazılara linkler verdim. Benzer şekilde menünün içeriğini değiştirebilirsiniz.

Kolay gelsin!