Blog Dersleri 2

        Bloga Nasıl Banner Eklenir

Konuk yazarınız olarak size blogunuz/siteniz için nasıl banner yapabileceğinizle ilgili basit bir anlatım sunmak isterim. Blogger platformunu kullandığım için blogger üzerinden anlatacağım ve bildiğim kadarıyla yapım aşaması Wordpress’te de hemen hemen aynı. Blog/site kavramlarını da kısaltarak blog olarak kullanacağım yazımda.

Öncelikle blogunuzu temsilen bir resim belirleyin. Resimleri online resim editörleri yardımıyla istediğiniz şekilde düzenleyebilirsiniz. Örneğin ben Picmonkey kullanıyorum, kullanımı çok kolay ve Picnik’i anımsatıyor.

Picmonkey yardımıyla seçtiğiniz resmin boyutlarını değiştirebilir, köşelerini yuvarlayabilir, üstüne yazı veya semboller ekleyebilir aynı zamanda resmi kırpabilirsinizde.

Bannerlar genelde kare olarak tercih edilir ve en ideal boyutları 125x125 veya 100x100 dür. Kullanılacak alana göre değiştirebilirsiniz elbette ama en çok tercih edilen 125x125 boyutlarında olanlarıdır. Örneğin ben blogumun headerını banner olarak kullanmak istediğimde, kesip, boyutunu değiştirip ve köşelerini yuvarlayıp bu hale getirebiliyorum.

Picmonkey’de bu tür düzenlemeleri yapıp resmimizi hazır hale getirdikten sonra resmin urlsine ihtiyacımız olacak tabii ki. Ben bunun içinde Photobucket kullanıyorum. Uploada basıp hazırladığınız küçük resmi yükledikten sonra yüklenen resmin üstüne tıklayın. Sağda çıkan 4 tane linkten direct link olan bize lazım olacak.

Blogger üzerinden anlatırsak ;

Tasarım > Yerleşim > Gadget ekle kısmından HTML/Javascript’i seçip içerisine şu kodu yazın

<center><img src=”DIRECT LINK BURAYA YAPIŞTIRILACAK”/></center>

Sonrasında ‘zengin metin’e bastığınızda bannerınızı görebilirsiniz. Bannerını seçin ve bağlantı oluştura tıklayıp tıklandığında yönlendirmesi gereken linki yazın. Aşağıdaki resimdeki gibi

Tamam diyip kutucuğu kapattıktan sonra üstteki “HTML’yi düzenle”ye basın. Gördüğünüz bütün kodu kopyalayın, sonra yeni bir satıra geçin (kodları silmeden tabi) ve şunları yazın

<center><textarea>

kopyaladığınız kodu hemen bitişiğine yapıştırın ve sonuna şu kodları ekleyip bitirin.

</textarea></center>

Şu şekilde gözükmesi gerekli

Sonrasında tekrar “zengin metin”e basıp kontrol ettiğinizde bu şekilde gözükmesi gerekli.

Kaydedin Ve Çıkın İşte Hazır

       Sabit Açılır Sosyal Kutular

Daha önce paylaştığım Sabit Açılır Sosyal Kutular, blogcular tarafından çok kullanılan bir eklenti. Sosyal medya platformlarında görünürlüğünüzü arttırması ve şık görünümü sayesinde bu kadar çok kişi tarafından kullanıldı. 

Paylaşacağım sabit açılır sosyal butonlar eklentisi de aynı mantıkla çalışıyor. Tek fark isminden de anlayacağınız üzere kutu yerine buton içeriyor olması. 

Eklentiyi blogunuzda kullanmak için Şablon > HTML’yi Düzenle > Devam Et yolunu izleyin ve Ctrl + F tuş kombinasyonunun yardımıyla  </head> kodunu bulun. Hemen üzerine şu kodları ekleyin.

<script type='text/javascript'>
window.onload = function socialButtons() {
       $(&#39;.social_site&#39;).hover(function() {
           $(this).stop().animate({
               left: &#39;0px&#39;
           },
           &#39;fast&#39;)
       },
       function() {
           $(this).stop().animate({
               left: &#39;-140px&#39;
           },
           &#39;fast&#39;)
       })
   }
</script>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'>
{lang: &#39;tr-TR&#39;}
</script>
<script src='http://connect.facebook.net/tr_TR/all.js#xfbml=1'type='text/javascript'/>
<script src='http://code.jquery.com/jquery-1.6.2.min.js'type='text/javascript'/> 

İkinci olarak ]]></b:skin> kodunu bulun ve bunun hemen üzerine aşağıdaki kodları ekleyin.

body .social_site {cursor: pointer;height: 64px;left: -140px;overflow: hidden;position: fixed;width: 200px;z-index: 10000;}
body .social_closed {left: -170px;}
body .social_open {left: 0;}
body .social_site .icon {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgcb5l5dcxozuGHmnAORv6UC5R7X0ryaeXKxLWM1lnbh4ft8iMI7VKDDcASLA7iUpUWGU_uaeeslog34e56eAEAVH9M-A4ddYRq8rNQ1iwoY012NqDEnNaAIcVei9hGlAuiE4C8dUOLHs/s1600/social-sprite.png")repeat scroll 0 0 transparent;float: right;height: 64px;width: 60px;}
body .social_site .tray {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgcb5l5dcxozuGHmnAORv6UC5R7X0ryaeXKxLWM1lnbh4ft8iMI7VKDDcASLA7iUpUWGU_uaeeslog34e56eAEAVH9M-A4ddYRq8rNQ1iwoY012NqDEnNaAIcVei9hGlAuiE4C8dUOLHs/s1600/social-sprite.png")repeat-x scroll 0 0 transparent;float: right;height: 64px;width: 140px;}
body .social_facebook {top: 205px;}
body .social_facebook .icon {background-position: 60px -74px;}
body .social_facebook .tray {background-position: -15px -74px;}
body .social_facebook .tray p {
display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_facebook .tray p a, body .social_facebook .tray p a:active, body .social_facebook .tray p a:visited {
color: #FFF;text-shadow: 1px 1px 0px #077EAB; -webkit-text-shadow: 1px 1px 0px #1F366B; -moz-text-shadow: 1px 1px 0px #1F366B;display: block;font-size: 10px;width: 100%;text-decoration:none;}
body .social_users {top: 340px;}
body .social_users .icon {background-position: 60px -6px;}
body .social_users .tray {background-position: -15px -6px;}
body .social_users .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_users .tray p a, body .social_users .tray p a:active, body .social_users .tray p a:visited {
color: #FFF;text-shadow: 1px 1px 0px #313131; -webkit-text-shadow: 1px 1px 0px #2c2c2c; -moz-text-shadow: 1px 1px 0px #2c2c2c;display: block;font-size: 10px;margin-top: 0l;width: 100%;text-decoration:none;}
body .social_gplus {top: 273px;}
body .social_gplus .icon {background-position: 60px 71px;}
body .social_gplus .tray {background-position: -15px -141px;}
body .social_gplus .tray p {display: block;height: 18px;line-height: 18px;margin-top: 4px;padding-left: 20px;}
body .social_gplus .tray p a, body .social_gplus .tray p a:active, body .social_gplus .tray p a:visited {color: #FFF;text-shadow: 1px 1px 0px #313131; -webkit-text-shadow: 1px 1px 0px #2c2c2c; -moz-text-shadow: 1px 1px 0px #2c2c2c;display: block;font-size: 10px;margin-top: 0l;width: 100%;text-decoration:none;}

Son olarak </body> kodunu bulun ve hemen üzerine şu kodları ekleyin.

<div class='social_site social_users' id='social_link_users'><a><div class='icon'/></a> 
<div class='tray bg_denovo'><p><a>Twitter&#39;da Takip Et</a></p> 
<p id='users_online_box'><iframe allowtransparency='true' class='twitter-follow-button' frameborder='0' scrolling='no' src='http://platform.twitter.com/widgets/follow_button.html#_=1320542107073&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=tr&amp;link_color=&amp;screen_name=Twitter&amp;show_count=false&amp;show_screen_name=&amp;text_color=' style='width: 100px; height: 20px;margin-top: -15px;margin-left: 15px;' title=''/></p></div></div><div class='social_site social_facebook' id='social_link_facebook'><a><div class='icon'/></a> 
<div class='tray bg_denovo'> 
<p><a>Facebook&#39;ta Beğen</a></p> 
<div class='fb-like' data-href='Face Link' data-layout='button_count' data-send='false' data-show-faces='false' data-width='450' style='margin-left: 30px; margin-top: -20px;'/></div></div> 
<div class='social_site social_gplus' id='social_link_gplus'> 
<a href='#' target='_blank' title='Google+'><div class='icon'/> </a> 
<div class='tray bg_denovo'> 
<p><a>Google&#39;da Öner</a></p><p id='g_plus_box' style='margin-top: -10px;margin-left: 12px;'><g:plusone/></p></div></div>

Değiştirmeniz gereken yerleri kırmızı renkle gösterdim. Twitter yazan yere kendi Twitter kullanıcı adınızı, Face link yazan yere ise kendi Facebook sayfanızın adresini yazın