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.

<!--Koddostu Büyüleyici Duyuru Panosu Html Kodu START-->
<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Telif sahibi:koddostu.com-->

<div id="menucon"><div id="koddostu-tex"><br/><b>DUYURU</b><br/><br/>

Sitemize Hoşgeldiniz!

<br/><br/>

Koddostu.com tarafından sitemiz için hazırlanan bu duyuru panosunda sitemize dair en güncel yenilikleri paylaşacağız!

</div></div>
<koddostu><style> #menucon{ position:fixed; bottom:10px; left:10px; width:130px;height:130px; background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho9SnEbomKpRHFwAH5m7pWkj0qJ0QdTT6vgSwdpzpaGxojTruvukKh5OVro1ifFH2-qBDMbmewXRnLLMNDB1_n_2vKL3pu3bpkqTrGLRt_99xFsCXZU7HJ-9d45lSqeXBNhuB_JFAjarNI/s1600/see.png) no-repeat center center; transition: all 0.8s ease-in-out; background-size:cover; -webkit-transition: all 0.8s ease-in-out; transition-timing-function:ease-in-out; -webkit-transition-timing-function:ease-in-out; } #menucon:hover{ bottom:35px;left:35px; width:80px;height:80px; transform: rotate(720deg); -ms-transform: rotate(720deg); -webkit-transform: rotate(720deg); }#koddostu-tex{position:absolute;bottom:37px;left:38px; box-shadow: -1px 1px 5px 0px #888888; transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; transition-timing-function:ease-in-out; line-height:22px; -webkit-transition-timing-function:ease-in-out; opacity:0; width:0px;height:0px; padding:6px;color:#fff; font-family:Helvetica, Arial, sans-serif; font-weight:normal; text-decoration:none; font-size:14px; text-align:center; -webkit-border-radius: 8px; -webkit-border-bottom-left-radius: 0; border-radius: 8px; border-bottom-left-radius: 0; }</style><script src="http://kdostu.googlecode.com/svn/cquery.js"></script><style> #menucon:hover #koddostu-tex{ width:200px;height:250px; background:#444; opacity:0.6;} </style></koddostu>

<!--Bu çalışma Creative Commons Attribution-Gayriticari-NoDerivs 3.0 Unported Lisansı ile lisanslanmıştır.-->
<!--Telif sahibi:koddostu.com-->
<!--Koddostu Büyüleyici Duyuru Panosu Html Kodu STOP-->

Siteye Kar Yağma Efekti

<script type="text/javascript" src="http://www.jimdo.com/l/usersnippets/snowfall.min.js">
</script>

İmleci Takip Eden Kar Efekti

<script type="text/javascript" src="http://www.jimdo.com/l/usersnippets/snowcursor.min.js">
</script>

<style type="text/css">
body, a:hover {cursor: url(http://www.jimdo.com/l/usersnippets/rentier.cur), url(http://www.jimdo.com/l/usersnippets/rentier.png), auto !important;}
</style>

<style type="text/css">
body, a:hover {cursor: url(http://www.jimdo.com/l/usersnippets/rentier2.cur), url(http://www.jimdo.com/l/usersnippets/rentier2.png), auto !important;}
</style>

<script type="text/javascript" src="http://www.jimdo.com/l/usersnippets/snowcursor.min.js">
</script>
<style type="text/css">
body, a:hover {cursor: url(http://www.jimdo.com/l/usersnippets/snowcurser.cur), url(http://www.jimdo.com/l/usersnippets/snowcurser.png), auto !important;}
</style>

<style type="text/css">
body .hr {
    background: url(http://www.jimdo.com/l/usersnippets/hr-snow-white.png);
    background-position:right;
    border: 0;
    height: 47px;
 }
</style>

<style type="text/css">
body .hr {
    background: url(http://www.jimdo.com/l/usersnippets/hr-snow-green.png);
    background-position:right;
    border: 0;
    height: 47px;
 }
</style>

Kodlar jimdo.com'a aittir.

Kodu Yerleştirme

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript">$(document).ready(function(){ 
var newerLink = $("a.blog-pager-newer-link").attr("href"); 
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() { 
var newerLinkTitle = $("a.blog-pager-newer-link").text(); 
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle); 
}); 
var olderLink = $("a.blog-pager-older-link").attr("href"); 
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() { 
var olderLinkTitle = $("a.blog-pager-older-link").text(); 
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt 
}); 
}); 
</script>

</head>

<script src='https://sites.google.com/site/sonsamsunluforever/asda/jquery-1.5.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/sonsamsunluforever/asda/queryLoaderpre.js' type='text/javascript'/>

</body>

<script>
 QueryLoader.selectorPreload = &quot;body&quot;;
 QueryLoader.init();
</script>

]]></b:skin>

.QOverlay {
 background-color: #000000; /* Yükleme sayfasının arkaplan rengi */
 z-index: 9999;
}

.QLoader {
 background-color: #CCCCCC; /* Yükleme çubuğunun rengi */
 height: 1px;
}

.QAmt {
 color:#FF530D; /* %100 kısmının yazı rengi */
 font-size:50px; /* yazı büyüklüğü */
 font-weight:bold;
 line-height:50px;
 height:50px;
 width:100px;
 margin:-60px 0 0 -50px;
}

<script style="text/javascript">
function numberOfPosts(json) {document.write('Toplam Yazı: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}
function numberOfComments(json) {document.write('Toplam Yorum: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}
</script>
<ul><li><script src="http://zerdestyalcin.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>
<li><script src="http://zerdestyalcin.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li>
</ul>

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/AVvXsEjyfjkD5p6WhRUMA65boXIf6Nc3FaaT01fNpOPpLcKKWJ93O24iIMnQ8KFITgJ79lYjOtYfj-w-d3dt7ESJlH-ZCjdfRhc_qVdOfyn-S0tgGXHKI-5DkdxEihjsmYfU3smV7tQUvipyq-I/s1600/Twitter.png)no-repeat;
background-position:center center;
}
ul#sosyal .googleplus a      {
    background:#D73D27 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3d8QUmYtrn8GIFtFd5K1hTNQm5gGVy6_ADpzCEQmfm42ZXa2ENrTiqCc2KQhsigr4ilZK2OQYFHGYGkDLEHDY9ep8LnQqtNnvgVrkzyzscqQzgdrWVEQ6AtGk4ufKEk1-87XbWgSx5EI/s1600/GOOGLE+PLus.png)no-repeat;
background-position:center center;
}
ul#sosyal .facebook a      {
    background:#1A4B97 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFGEg9LZPBHG5a1iz58pchi_Lq1FWDjJSH1Jw4MrgeH2RdaIfGhuvcQ6rf1iKIzlHHLhb9eddCi24ol6-UDIwH30Hobfk2VnlhL4tGwOVJNfh7nXDcIDqayVoST26T1aU4-168FTc8Qlg/s1600/Facebook.png)no-repeat;
background-position:center center;
}
ul#sosyal .rss a      {
    background:#FAAE17 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9VhLMaxUncpDdvhCwNQOj8GO046SnShqbgYiYglouQkFsCF9Hh9kqqFspovLeOYxST4kvUasAzWnPDYt6imnx4djGf8sRqAUshhMRclC_Q3kbaOeMrYlVSzuRGXdiP3Xhbl92WkREFQ/s1600/rss.png)no-repeat;
background-position:center center;
}
 
ul#sosyal .pinterest a   {
    background:#963336 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmInNNTfg939UMIln34Dh_FmTTWxWJY2NPB8No2y9IxlKsREkrU3UsBj87K_f6FofaAUjcSS40obYK7yfx1OMyDLiQ9pWD7kbPdOJCEdZjROpSjvde0sHNy7RJVVCrkf3avkcBMZN5PmU/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.

İyi Bayramlar...

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/AVvXsEiVwORzjHzYtLmp4_ABv7JaUVtV7mstATCJev3IK-AnrMW2mPAgez3H_Hk3c7OLCiY4oBcTeAcxJoVEVhiC8uic_kKd7HxAZaDHDC2O6ghTZbMu5YOYej0CrsSeYUWiz67vbH9BIwOrinU/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/AVvXsEgfdsrTEV6ltYq9r13o_lL-yflxvUHlGSWoRM8eFKMQdGB42kZcnsopJSQjD16c_0Fl7XyFrUe5gcJNzi7xxgTOZv1ArSKYtTLPVn1Z1n8S16qgxQXfLyncmHzVvtd1ZLSvUGzXuZ_kYMg/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/AVvXsEhnCO9ZZvpzDR2VsQtjcBQ1hyphenhyphenRdbcXy7lNI5wIvyHWT6xbk20gtTZzRWzJ8yalj2XJuDhwzg_jSoHJb5bauFzGAgcPiTzg74VfaZXNnu4oGdAogVr8L79HnuSCAaz6hvZRLI5Sns-JxCy0/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/AVvXsEiRQ1DtgpXdXKt_dtWGIpQVVXFtsZ8TmAt_OYjf_N5oR7YdIHVYMm8NzodedV-66XQq9Ba19-Gle-eLan-NQTWOSZjf2f1H0anwggwSqAVF5QGn-eAYHHuOXH5HP0Uck84qZv-T7Lbhgx8/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/AVvXsEhSFa0wmX1vu8Q89xsdc_wrLEP0_sABH0fPm_Lbg-YzJS4AdXSWahlOukM0vGrQgRIMDwFLqdPcWpaKw-ZzxnI-D74456RGpMr4A2VhGmzqJSZkShRUva3FHiYwLth2PmPHHadWjRk8K_k/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/AVvXsEixbJ3MyKqSz3NC_iDOlb4ILZD2LFgppv6OxIz8Dvj-iWb9x6LsRIeVM8ZHZ4ARBcw9GxGXWimac2oFAmGKdcq6uZEWY0jUcFZK4vCRs1eshM1CNCsJH6t9919n7nxD3j6cY1I3cJccn8o/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/AVvXsEjABsuT3PBnU4y_Ylq0ZO7ERHl_c2u6KgUq1owm_wT5HopxLeGDS8Jm7_cF9PCCCxd1Y5AXfXpeSuKWebXzhiRSrSh4jAo6ySaSnggqd3tNsIowHrgmJeLJwNtNyvjTa2qGc6bF9wQMddc/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/AVvXsEhOE3e9PBK11d4qYCJT_uvenp4IDRLDsAHj72lM8gKL3jt4H6Otye4_S008_5bii_0RmlEsMAS-zeqSR6kgFmCeXSH4d4HKD54UWk9AnfL1WClITiehSKUVF73rkA-kr7lix67g1lTt39c/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/AVvXsEhBdYvxn9CdJLZcHf9vvBn4aX23aF75F-Yeb0uN_aFYU6C-6XToIBM5kClxCE1QzNnVoQJqBA8wfer_hYZJyWUnmn8kkcOdz6JVx8gFaAEWDo359q6GPiawvM0TvrWqXYiPouLliPgJBuU/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/AVvXsEhBdYvxn9CdJLZcHf9vvBn4aX23aF75F-Yeb0uN_aFYU6C-6XToIBM5kClxCE1QzNnVoQJqBA8wfer_hYZJyWUnmn8kkcOdz6JVx8gFaAEWDo359q6GPiawvM0TvrWqXYiPouLliPgJBuU/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/AVvXsEhBdYvxn9CdJLZcHf9vvBn4aX23aF75F-Yeb0uN_aFYU6C-6XToIBM5kClxCE1QzNnVoQJqBA8wfer_hYZJyWUnmn8kkcOdz6JVx8gFaAEWDo359q6GPiawvM0TvrWqXYiPouLliPgJBuU/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.