27 Temmuz 2013 Cumartesi

Blogger Css İle Yapılmış Slayt Alanı

Sayfamızda öncelik vereceğimiz yazılar vardır. Bu yazılar en çok hit çeken yazımız olabilir. Ya da daha çok okunmasını istediğimiz bir yazımız olabilir.

Bu yazılarımızı sayfamızda bir slayt alanı oluşturarak okuyucularımıza göstermeliyiz. Css ile yapılmış slayt alanı türevleri az bir araştırma ile internet dünyasında bulunabilirler.

Css ile yapılmış oldukça şık ve birçok özelliği olan bir slayt alanı blogumuza basit bir şekilde ekleyebiliriz. Daha sonradan istediğimiz gibi düzenleyebileceğimiz slayt alanımızın bazı bir kaç özelliğinden bahsetmek gerekirse; otomatik resim geçişleri mevcut, fare ile resim üzerine gelindiğinde duruyor, Resim üzerine kısa açıklama yazısı yada direk yazımızın başlığını yazabiliriz.

Slaty alanımızın en güzel tarafı ise sadece Css ve HTML kullanışmış olmasıdır. JavaScript ve jQuery kullanılmadı için sayfa açılma süremizi çok fazla etkilemeyecektir.

Css ile yapılmış slayt alanı ÖNİZLEME



Css ile yapılmış slayt alanını blogumuza nasıl ekleyeceğimize gelirsek;
Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu takip ederek aşağıdaki kodları yapıştırıyoruz. Gadgetimizi sayfamızda istediğimiz yere yerleştirip Css ile yapılmış slayt alanımızı kullanmaya başlıyoruz.

<style>#slider {width: 600px; height: 200px; margin: 40px auto 0; overflow: visible; background-color: #362c30; border: 10px solid #362c30; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; position: relative;}#mask { overflow: hidden;}#slider:hover {background-color: #fff; border: 10px solid #ddd;}#slider:hover #pause {opacity: 1;}#slider:hover #progress {background-color: rgba(255,255,255,0.0);}#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { -moz-animation-play-state: paused; -webkit-animation-play-state: paused;}#pause { width: 600px; height: 200px; position: absolute; top: 0;opacity: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEm0VtqDFW7_2Fr-VeTR704wVWgiryDg5hPcSzGAgnTgc61s8Y61uCfXBeHFpYHcY-hnB-FAVzRYu-NpwA1v2Wne8dd0jR7Qt-hWLLtnPGhAMfnvNryBjOqLwpqfQXwKUUFpoYPkLxyS4/s1600/helperblogger.com-paused.png);background-position: 566px 10px; background-repeat: no-repeat; pointer-events: none; -moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in;}#progress { width: 1px; height: 1px; background-color: #ffd000;-moz-animation: progress 18s infinite; -webkit-animation: progress 18s infinite; position: relative;top: -1px;-moz-transition: all 150ms ease-in;-webkit-transition: all 150ms ease-in;-o-transition: all 150ms ease-in;}#overlay {width: 600px;height: 200px;position: absolute;top: 0;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSqopceU0PzYjoLuruLk6qArKRfnCDIKmtELYOcXZERQ4GUNtw0YNjC00hhwgvluzoSG72KgbLzNf9-gCFS3pxs659xpDZplbAsjUCjBsshE0v4P3bOvtk_6MzK3qKnWA_MW1yg1KE45o/s1600/helperblogger.com-overlay.png);background-position: center;background-repeat: no-repeat; pointer-events: none;-moz-transition: all 150ms ease-in; -webkit-transition: all 150ms ease-in; -o-transition: all 150ms ease-in; opacity: 0.5;-moz-animation: overlay-fade 18s infinite; -webkit-animation: overlay-fade 18s infinite;}#slider ul {width: 2400px; list-style: none; padding: 0; margin: 0; -moz-animation: slide-animation 18s infinite; -webkit-animation: slide-animation 18s infinite; position: relative; left: 0px;}#slider li {display: inline;width: 600px;height: 200px;margin: 0;padding: 0;float: left;position: relative;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgcE6YSTsH8Q-CqZyf5lJNOpJ4Lam4n8179wI6QAM-wTpymbs7vrNYaDoPNn0sm73YkgwyMjWJtGqT9Lqyzz2Ps8vk1x5qa2fgfI6lvHz-n6G3TxUnJvMY_1T7VtiTHeWVNkNE74Rg-5o/s1600/helperblogger.com-loader.gif);background-position: 50% 50%;    background-repeat: no-repeat;}#slider li:last-of-type {background-color: #362c30;}#slider li a {display: block;text-decoration: none;}#slider li span {display: block;width: 560px;padding: 15px 20px;position: absolute;bottom: 0;left: 0;background-color: rgba(54,44,48,0.6);border-top: 1px solid #362c30;text-shadow: 1px 1px 1px #362c30;pointer-events: none;text-align: left;}#slider-shadow {width: 100%;height: 260px;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm3pGezxPCMvJNyauFl5aZ9_1vhZsnf5LN8gmPQO1QLDkeEwu-CJIzj2S7jgPBwCeBg3JBABkKhDkUiSfo8xrd3niMb0vD2JmcsNJy568467NMOHl5-XODJOr5wSuc3iy0Tomkpl-Vcvg/s1600/helperblogger.com-slider-shadow.png);background-position: center bottom;background-repeat: no-repeat;margin: 10px auto 0;}@-webkit-keyframes slide-animation {0% {opacity:0;}2% {opacity:1;}20% {left:0px; opacity:1;}22.5% {opacity:0.6;}25% {left:-600px; opacity:1;}45% {left:-600px; opacity:1;}47.5% {opacity:0.6;}50% {left:-1200px; opacity:1;}70% {left:-1200px; opacity:1;}72.5% {opacity:0.6;}75% {left:-1800px; opacity:1;}95% {opacity:1;}98% {left:-1800px; opacity:0;}100% {left:0px; opacity:0;}}@-moz-keyframes slide-animation {0% {opacity:0;}2% {opacity:1;}20% {left:0px; opacity:1;}22.5% {opacity:0.6;}25% {left:-600px; opacity:1;}45% {left:-600px; opacity:1;}47.5% {opacity:0.6;}50% {left:-1200px; opacity:1;}70% {left:-1200px; opacity:1;}72.5% {opacity:0.6;}75% {left:-1800px; opacity:1;}95% {opacity:1;}98% {left:-1800px; opacity:0;}100% {left:0px; opacity:0;}}@-webkit-keyframes progress {0% {width:0px; opacity:0;}2% {width:0px; opacity:1;}20% {width:600px; opacity:1;}22.5% {width:600px; opacity:0;}22.59% {width:0px;}25% {width:0px; opacity:1;}45% {width:600px; opacity:1;}47.5% {width:600px; opacity:0;}47.59% {width:0px;}50% {width:0px; opacity:1;}70% {width:600px; opacity:1;}72.5% {width:600px; opacity:0;}72.59% {width:0px;}75% {width:0px; opacity:1;}95% {width:600px; opacity:1;}98% {width:600px; opacity:0;}100% {width:0px; opacity:0;}}@-moz-keyframes progress {0% {width:0px; opacity:0;}2% {width:0px; opacity:1;}20% {width:600px; opacity:1;}22.5% {width:600px; opacity:0;}22.59% {width:0px;}25% {width:0px; opacity:1;}45% {width:600px; opacity:1;}47.5% {width:600px; opacity:0;}47.59% {width:0px;}50% {width:0px; opacity:1;}70% {width:600px; opacity:1;}72.5% {width:600px; opacity:0;}72.59% {width:0px;}75% {width:0px; opacity:1;}95% {width:600px; opacity:1;}98% {width:600px; opacity:0;}100% {width:0px; opacity:0;}}@-webkit-keyframes overlay-fade {0% {opacity:0;}2% {opacity:0.5;}95% {opacity:0.5;}98% {opacity:0;}100% {opacity:0;}}@-moz-keyframes overlay-fade {0% {opacity:0;}2% {opacity:0.5;}95% {opacity:0.5;}98% {opacity:0;}100% {opacity:0;}}#slider ul li span h2 {font-size: 24px;line-height: 24px;color: #fff;font-weight: normal;font-family: 'Communist-Regular';text-shadow: 1px 1px 1px #362c30;}</style><div id="slider-shadow"><div id="slider"> <div id="mask"> <ul><li> <a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzsdm0yArnhINEOg4got9pCSaJZh-2XisxDbw1HDpGrM1-TeLiXq4IJnAiRKR8XD0DQpE4SGWhPSrTdfqo5-XG1CuzHHwFzIZC1Kly_gEL4ltltPVTvQPt0qaiSOtBqOH0uojwMdC3Lp8/s1600/helperblogger.com-1.png" /></a><span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span> </li> <li> <a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHvTEvNFm77znKaBsVJeyDQPEJtK0ifwi21CSyD2e1EH2ZCSm3JvwvkUEc3JC1g66oGReuHdB02G0HN5faqWCuGXCEsDe3k8bn6nw_M6mnafCQTjlqy1gJF1W1YhgXc5mSa0D_PJtXas/s1600/helperblogger.com-4.png" /></a>span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span> </li> <li><a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiHvTEvNFm77znKaBsVJeyDQPEJtK0ifwi21CSyD2e1EH2ZCSm3JvwvkUEc3JC1g66oGReuHdB02G0HN5faqWCuGXCEsDe3k8bn6nw_M6mnafCQTjlqy1gJF1W1YhgXc5mSa0D_PJtXas/s1600/helperblogger.com-4.png" /></a><span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span></li><li> <a href="link buraya" title="Resim için title ekle"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmY8VIsFeVsqZgzlcEjU-ZO6AlOfQFqXmOo75GcFLMip-rzIWbYHgxBG9_DP33icDWsnbUg4ufFh7PRKEDHlRqa3-jhxQVzDjyT2nn5xadfMB4dio_xb-AXMI53Xq776q1qR7HVS90gqU/s1600/helperblogger.com-3.png" /></a><span><h2>Açıklama Yazısını Buraya Yazınız....</h2></span></li> </ul></div> <div id="progress"></div><div id="overlay"></div><div id="pause"></div></div></div>

Kodlar arasında düzenlenecek olan yerler; Mavi ile yazılmış alanlara slaytımızda gösterilecek resime ait açıklama metinlerinizi yazabilirsiniz. Yeşil ile yazılmış yerlere ise  resimin üzerine gelindiğinde belirecek yazıyı yazabilirsiniz. Kırmızı ile yazılmış yerlere ise genişli ve yükseklik değerleri vererek sayfanıza uygun boyutlara getirebilirsiniz. Bir de resimlere tıklanıldığında açılacak sayfa url sini yazacağımız yer ise link buraya olarak yazılmıştır.

25 Temmuz 2013 Perşembe

Blogger Css ile Hareketli Paylaş Butonları



Yazılarımızın sosyal medya da paylaşılması popülerliğimizi arttırmaya yardımcı olmaktadır. Bunun için ise yazılarımızın altına yada üstüne yazılarımızı beğenen okuyucularımızın rahatlıkla paylaşım da bulunabilmelerini sağlamalıyız.

Css ve Html kullanılarak hareket verilen sosyal paylaşım butonlarımız faremiz üzerine geldiğinde sayfanın sol kenarından gelerek şık bir açılma efekti ile karşılıyor. Faremiz butonların üzerinden ayrıldığında geri yerine ekranımızdan kayboluyor.

ÖNİZLEME


Botunlarımızı sayfamıza eklemek için 2 yolumuz bulunmaktadır;

1. Yol:
Blogger Kontrol Paneli > Şablon > Html'yi Düzenle yolunu takip ederek ]]></b:skin> kodunu buluyoruz ve hemen üzerine aşağıdaki css kodları yerleştiriyoruz.



Css Kodlarımızı ekledikten sonra <data:post.body/> bulup hemen sonrasına aşağıdaki HTML kodlarını yerleştiriyoruz.

UYARI: Bazı Şablonlarda bir kaç tane <data:post.body/> kodundan bulunabilir. Şablonunun durumuna göre hangi koddan sonra yerleştirmeniz gerektiği değişiklik göstermektedir.


2. Yol: 
Bu yol diğerine göre çok daha kolay bir yol. Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu takip ederek açılan pencereye aşağıdaki kodları yapıştırıyoruz. Eklediğimiz Gadget'i Sayfamızın istediğimiz alanına yerleştiriyoruz. Sonucunda Paylaşım butonlarımız kullanıma hazır duruma geliyor.

<style type="text/css">#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyWyRSjxuXJ4VtrGReOiOZoSJmGR_rcrTBz5xQ7Ba_tHH04R6xyWFqj3z9gFRmg-DUpImHh1enBTjxmvPT7b48ijlVh5sNZKBvXdK_BWFEy53WyzAB35QfHiiOnL2-Teo9Vl1mkmEw_C4p/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;}#mintshare_mini {width:100px; height:30px; border:1px solid #888; padding: 0 15px;-o-border-radius: 15px;-moz-border-radius: 15px;-webkit-border-radius: 15px;border-radius: 15px;}#mintshare_mini a.sharetext {display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh82i8kACwelJMeK4SOWVHSXX1sGdwbfQj2r0qNWfdwDJh8pm498yddSDeEfRCXxIo0GLf-Qwe9tiJGe8TcR7uWrRXIoFlnu36xcC4RRjEa5CzpZuL1xUiiNrNMkdfuHR_0N9qpwYok60GJ/s1600/plus.png") no-repeat scroll 0 center transparent;padding-left:5px;cursor:pointer;}#mintshare_mini a.sharetext img {border: 0 none;display: block;margin-left: 10px;}#mintshare_mini .flyout {background: none repeat scroll 0 0 #AAAAAA;height: 113px;left: 40px;position: relative;top: -4px;width: 0;transition: width 1s ease-in-out;-o-transition: width 1s ease-in-out;-moz-transition: width 1s ease-in-out;-webkit-transition: width 1s ease-in-out;}#mintshare_mini .flyout ul {background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyWyRSjxuXJ4VtrGReOiOZoSJmGR_rcrTBz5xQ7Ba_tHH04R6xyWFqj3z9gFRmg-DUpImHh1enBTjxmvPT7b48ijlVh5sNZKBvXdK_BWFEy53WyzAB35QfHiiOnL2-Teo9Vl1mkmEw_C4p/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;list-style:none;position:absolute;left:-2000px;top:-27px;width:365px;height:30px;border:1px solid #888;border-left:0;padding-right:10px;z-index: 500;overflow: hidden;padding-left: 15px;transition: 1s ease-in-out;-o-transition: 1s ease-in-out;-moz-transition: 1s ease-in-out;-webkit-transition: all 1s ease-in-out;-o-border-radius: 0 15px 15px 0;-icab-border-radius: 0 15px 15px 0;-khtml-border-radius: 0 15px 15px 0;-moz-border-radius: 0 15px 15px 0;-webkit-border-radius: 0 15px 15px 0;border-radius: 0 15px 15px 0;}#mintshare_mini:hover .flyout ul{left:50px;}#mintshare_mini .flyout ul li {float: left;}#mintshare_mini .flyout ul li a{}#mintshare_mini .flyout ul a img {}#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;}#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);transition: 0.4s ease-in-out;-o-transition: 0.4s ease-in-out;-moz-transition: 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;}#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;-o-transition: 0.4s ease-in-out;-moz-transition: 0.4s ease-in-out;-webkit-transition: all 0.4s ease-in-out;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
-o-border-radius:10px;}#mintshare_mini .flyout ul li.drop-li:hover > a img {opacity:0.5;filter:alpha(opacity=50);}#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}#mintshare_mini .get_mintshare {font-size: 10px;margin-left: 5px;position: relative;top: 2px;}</style>
<div id='mintshare_mini'><a class='sharetext'><b>Paylaş</b></a><div class='flyout'><ul class='icons'><li class="drop-li"><a rel="nofollow" href="http://www.facebook.com/sharer.php?u=https://www.facebook.com/Xtrealblog"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYalRU3AyczTGGFy-PHHrg9rWsH7RjCtrd9CZEQHHWOwnAIE9m2-ao2uz8dJLsHvI4_idGtvKP7Mg2fb3zuEtfdKIE9lRqxoLCtGXV-nYhWmbiESMeLj2k1rvlneQJfZXQEZbX0atOYu-i/s1600/facebook_small.png"/></a></li>
<li class="drop-li"><a rel="nofollow"  ref="http://twitter.com/share?url=https://twitter.com/xtrealblog"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtjCP1W8fYIapuj8gbEHTMk71etIEzTaIvhUxolDKXAl6eO3TiTLNnW1qOoyesu5hSglZ2MXb6-MotnQFhEhDw7mO69BzRYMS842zjRmHzKEWcE0RAmqSAndvzOXXVwKyVcHWJjaBw6nPH/s1600/twitter_small.png"/></a></li>
<li class="drop-li"><a rel="nofollow"  ref="http://www.stumbleupon.com/refer.php?url=URL BURAYA"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGIQw7aGhK3C4qtwqUrzYkS1mopP7MbnI0bGtX9MTiVYwgAq7liW-YGTTqqN2xLnCNP8gN7t71njEoML0Q3LcNAppbe_le6kOl2v6eAMj7NeugamodfWGT9kTRXGdcTi1fboxsaMW0P3dn/s1600/stumbleupon_small.png"/><!--[if gte IE 7]><!--></a><!--<![endif]--></li>
<li class="drop-li"><a rel="nofollow"  ref="http://digg.com/submit?phase=2&amp;url=URL BURAYA" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjybHSEq_qIksPMoSOVeuQfbry7rwvRl6SCSQkwZy89b9WjokGfbjNDt_62rATfPMl6lIUZhEl6i3_UrI2Jd42airyI2P_jZFQnlIVZFj4TrHwRN2rkIjgGuNr0LIvxrRM0YSpFHIoKEG31/s1600/digg_small.png"/></a></li>
<li class="drop-li"><a rel="nofollow"  ref="http://www.technorati.com/faves?add=URL BURAYA" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdOXmsHxHF56z3uhb45eB4L5eWEu9-jjI7WnQkuNZ9r2_f5UbtW-z1hUgFDYqM4hA3R8CnWmzaOd-uIQrP0IR_t0KqOh1BEI4snCIMjoUxSxWy758W1W4sUAIgMz6HuPEUEQnzlUm-yVAV/s1600/technorati_small.png"/></a></li>
<li class="drop-li"><a rel="nofollow" href="http://reddit.com/submit?url=URL BURAYA"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcg03VFH8uwTyZmEmyg3oQHp9iIPXbkvV9j1SRzu4N1ua612kjeJH7aAJ1OHa_RZodQ8aNwutU3UehC_tPCiABRfCV5fejHIm4ercxar8yvduKA4wEAw9hwH5salprpjPGMalK7G1IXBz/s1600/reddit_small.png"/></a></li>
<li class="drop-li"><a rel="nofollow" href="http://myweb2.search.yahoo.com/myresults/bookmarklet?t=URL BURAYA" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFsGIYXfI1rPgtMDGgoSTFCLV8WmGlR7JslhHvY4yJTeCpy07MYevVRUgEf1ne7bsCMUHg_58AJsWA0OLa99uy13ZS-IUrQlJVMnEXH6k3a4vYPJZ2HmZ1aE9vup2YUJ9q7p9M8kJHj45s/s1600/yahoo_small.png"/></a></li>
<li class="drop-li"><arel="nofollow" href="http://delicious.com/post?url=URL BURAYA"  class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0SEYZv9FsAp4fIIUHzKDYKaGpuRe8Dyb_WnQIPSVHiURkAp1FyD6keZG2bSTAK0V8wfh2WPr9LlWzzp8yiFXrQML81_N4V5ijKGkfZH_HuOWKCztplSfSLiYB0N9SFkTpBf3HJcWSbe3s/s1600/delicious_small.png"/></a></li><span class="get_mintshare"><a href="http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget/">Sitene Ekle</a></span></ul></div></div>

Kodlar içersinde Değiştirmemiz gereken yerler ise;
URL Buraya yazan yerleri kendi url lerinizi ekleyiniz.
Xtrealblog yazan yerlere ise kendi Facebook ve Twitter isimleriniz ile değiştirin.

24 Temmuz 2013 Çarşamba

Blogger Yazar Ekleme

Tüm bloglar için içerikleri bir kişi girecek diye bir kural yoktur. Çok sayıda yazarın olduğu bir blog fazla içerik ve de fazla takipçi anlamına gelir. Atasözümüzün de dediği gibi Bir elin nesi var iki elin sesi var

Çok yazarlı blogların içerikleri artacağından ve her yazar kendi uzmanlığında makaleler yayınlayacağından hem içerik sayınız fazlalaşacaktır hem de okuyucu kitleniz çoğalacaktır.

Blogger'a yazar ekleme konusunda yapmamız gerek tek şey ekleyeceğimiz yazarımızı davet etmektir. Blogumuza yazar eklemek için;
Blogger Kontrol Paneli > Ayarlar > Temel yolunu takip ederek Yazar ekle diyoruz. Eklemek istediğimiz kişinin mail adresini yazdıktan sonra davet ediyoruz. Yazarımız bu davet mailini onaylar onaylamaz davet ettiğimiz mail adresi ile blogumuzun kontrol paneline giriş yapabilir ve içerik girebilir hale gelmiş olur.


Blogumuza arkadaşlarımızı yazar olarak davet ettikten sonra yetkileri düzenlemek gerekebilir.
Blog yazarları kısmındaki yetkilerden bahsetmek gerekirse;
Yönetici: Blogger Kontrol Panelinde bulunan ve blogumuzu kontrol edip düzenleyebileceğimiz, içerik girebileceğimiz tüm alanları kontrol etme yetkisine sahiptir. Blog yazarlarını ekleme ve bu yazları silebilme yetkisi yöneticinin elindedir.
Yazar: Bloga sadece yeni yazı ve resim ekleyebilme yetkisine sahiptir.

NOT: Dikkat etmemiz gereken bir nokta ise eklediğimiz kişilere yetki verme konusudur. Eklediğimiz bir kişiyi Yönetici yaparsak bizim yetkilerimizi ve hatta bizi blogtan silebilir.

22 Temmuz 2013 Pazartesi

Blogger E-Posta Aboneliği eklentisi

Blogumda da kullandığım bu eklenti sayesinde okuyucularınızın yazılarınızı e-mail yolu ile takip etmelerini sağlayabilirsiniz.

Okuyucularınızın yazılarınıza bir çok yolla ulaşmaları size her zaman rakiplerinizin bir adım önüne geçirir.

Okuyucularınızın yeni yazdığınız yazı/makale olduğunu fark etmeleri için blogunuza giriş yapmaları gerekiyor. Blogger e-posta aboneliği eklentisi ile okuyucularınıza yeni bir yazı/makale yazdığını haber verebiliyorsunuz. Yeni bir yazı/makale yazdığınızda blogunuzun e-posta aboneliğine kayıt olmuş okuyucularınıza son yazınızın bulunduğu bir mail göndermiş oluyorsunuz. Bu şekilde okuyucularınız sizin yazılarınızı anında haberdar olmuş oluyor.

Bu eklentiyi blogumuza nasıl ekleyeceğimize gelirsek. Blogger Kontrol Paneli > Yerleşim > Gadget Ekle > Html/Javascript yolunu takip ederek aşağıdaki kodları yapıştırıyoruz.
<style>
    #subscribe {
      float:right;
      width:300px;
      padding:2px;
      margin:0 0 20px 0;
    background: url(http://i.imgur.com/Y0kUa.png)  no-repeat 0px 0px;
      height:125px;
    color:#000;
    font-weight:bold;
    }
    #subscribe h {
    font-size:12px;
    color:#F1921A;
    }
    .feed {
      width:260px;
      min-height:60px;
      margin:auto;
      padding:0;
    }
    .input{
      margin:10px 7px 0 0;
      float: left;
      width: 165px;
      padding: 4px 5px;
      -webkit-border-radius:4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    border:1px solid #656E75
    }
    .sbutton {
      background:#00467F;
      margin:10px 0 0;
      float: left;
      height:26px;
      border: 1px solid #656E75;
      color: #fff;
      width:68px;
      -webkit-border-radius:4px;
      -moz-border-radius: 4px;
      border-radius: 4px;
    }
    .sbutton:hover {
      background:#fff;
    color:#00467F;
    }
    </style>
    <div id='subscribe'>
    <div class='feed'>
             <br/>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=xtrealblog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input class='input' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-Mail Adresiniz...&quot;;}' onfocus='if (this.value == &quot;E-Mail Adresiniz...&quot;) {this.value = &quot;&quot;;}' type='text' value='E-Mail Adresiniz...'/>
    <input name='uri' type='hidden' value='xtrealblog'/><input name='loc' type='hidden' value='en_US'/><input class='sbutton' type='submit' value='Abone Ol'/></form>
           </div>
           <div>
        <center>Yayınlanacak Yeni Yazılar E-mail Adresinize Gelsin. 
           </center>
 <center><p><img width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/xtrealblog?bg=99CCFF&amp;fg=444444&amp;anim=0&amp;label=Abone" height="26" /></p>
</center></div></div> <center></center>
<div class='clear'></div>

Yukarıdaki kodlar içinde değiştirmemiz gereken yerler:
Kırmızı ile gösterilen yerlere kendi feedburner İd'nizi yazıyorsunuz.
Mavi ile gösterilen yerde ise eklentinizde görülmesini istediğiniz yazıyı yazıyorsunuz.

20 Temmuz 2013 Cumartesi

Blogger Sayfa Numaralandırma Eklentisi


Ziyaretçilerimizin Sayfalar arasında rahatça gezebilmeleri için güzel bir eklenti. Çok fazla içeriğimiz olduğunda ziyaretöilerimiz saylafar arasında gezmeleri çok zor olacak ve onların işi kolaylaşacak.

Sayfamıza nasıl ekleyeceğimiz konusuna gelirsek;

Blogger Kontrol Paneli > Şablon > Html'yi Düzenle yolunu takip ediyoruz. CTRL+F tuşları ile ]]></b:skin> kodunu buluyoruz ve hemen üzerine aşağıdaki kodları yapıştırıyoruz.


.showpageNum a { font-size:14px;font-weight:bold; color:#006699; border:1px solid #CCC; padding-top:2px; padding-left:3px; padding-right:3px; margin-left:2px; margin-right:2px; } .showpageNum a:hover { text-decoration:none; color:#3c78a7; border:1px solid #1584d9; background:#f0f4f7; } .showpagePoint { background:#3c78a7; font-size:14px;font-weight:bold; padding-top:2px; padding-left:3px; padding-right:3px; color:#fff; border:1px solid #CCC; } .showpageOf { clear:both; padding:15px; text-align:center; font-size:12px; font-weight:bold; color:#999; } .showpage a { font-size:14px;font-weight:bold; padding-top:2px; padding-left:3px; padding-right:3px; color:#006699; border:1px solid #CCC; } .showpage a:hover { border:1px solid #1584d9; text-decoration:none; }

Daha sonra yine CTRL+F tuşları ile </body> kodunu artıyoruz ve hemen üzerine aşağıdaki kodları yapıştırıyoruz.  Sonrasında eklentimiz hazır oluyor.

<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=4;
var upPageWord ='Önceki';
var downPageWord ='Sonraki';
</script>
<script src='http://tema.dataservis.org/eklentiler/blogger-numaralandirma.js' type='text/javascript'></script>

18 Temmuz 2013 Perşembe

Animasyonlu Ramazan Feneri

Müslüman alemi için en önemli ay olan Ramazan ayı içinde olduğumuz için bir eklenti ile sayfamızı Ramazan boyunca bir animasyonlu bir fener ile sayfamızda Ramazan ayında olduğumuzu gösterebiliriz.

Arka planında Arapça yazılar bulunan animasyon oldukça şık görünüyor. Sayfamızın arka plan rengi beyaz ise bu yazıları görmek için yazının en sonunda belirtilen uyarıyı okuyunuz.

Peki sayfamıza bunu nasıl ekleyeceğimiz konusuna gelirsek;

Blogger Konrtol Paneli > Şablon > Html'yi Düzenle diyerek CTRL+F tuşları ile </body> etiketini buluyoruz. Hemen üzerine aşağıdaki kodları yapıştırıyoruz.

Önizleme için Tıklayın 

<div align='center'>
<table border='0' cellpadding='0' cellspacing='0' width='900'>
<tr>
<td height='263' width='900'>
<div style='float:top right; position:absolute; overflow:visible; left:45px; top:0px; height:192px; width:144px z-index: 9999;'>
<object border='0' classid='clsid:D27CDB6E-AE6D-11CF-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0' height='144' id='obj2' width='192'><param name='movie' value='http://mybloggerlab.com/Scripts/stardima.swf'/><param name='quality' value='High'/><param name='wmode' value='transparent'/><embed height='144' name='obj2' pluginspage='http://www.macromedia.com/go/getflashplayer' quality='High' src='http://mybloggerlab.com/Scripts/stardima.swf' type='application/x-shockwave-flash' width='192' wmode='transparent'/></object>
</div></td></tr></table></div>

UYARI: Kırmızı ile belirtilen yere arka plan olarak siyah (black) gibi özellik ekleyerek sayfamıza uyumlu hale getirebiliriz.

17 Temmuz 2013 Çarşamba

Blogger Videoism Video Teması

Blogger video temaları arasında oldukça şık ve etkileyici bir görünüme sahip videoism video teması. Kullanımı basit ve youtube, vimeo, dailymation gibi popüler video sitelerinden kopyalayacağınız embed kodlarını rahatlıkla blogunuzda yayınlayabilirsiniz.

Ziyaretçileriniz için kullanışlı ve basit bir yapısı olması nedeniyle kolay bir navigasyon ile ziyaretçileriniz aradıklarını bulmakta zorluk çekmeyeceklerdir.

Otomatik sayfa numaralandırma eklentisi ve en çok ta önemli olan kendi belirdiğimiz bir etiketleri Featured ile ziyaretçilerinize gösterebiliyor olmamız. Videolarımızın altında kaç kere izlendiğini gösteren bir de sayacımız mevcut.

Videoyu nasıl ekleyeceğiz; Yeni yayın dedikten sonra Html sekmesi içerisine Video Urlsini yada Embed kodlarını yerleştiriyoruz.

Örnek Video Kodu:
<iframe width="662" height="320" src="http://www.youtube.com/embed/Bf38HiYPMiI" frameborder="0" allowfullscreen></iframe>

Featured alanını özelliştirmek için; 
Blogger Konrtol Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu takip ederek aşağıdaki kodları yapıştırıyoruz. Kodlar içersinde değiştireceğimiz alan ise Kırmızı ile gösterilen alandır. Buraya belirleyeceğimiz etiketi yazarak o etiketlere sahip yayınların burada gösterilmesini sağlıyoruz.
script style='text/javascript'>var numposts = 6;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = true;var showpostsummary = true;var numchars = 75;</script><script src='/feeds/posts/summary/-/Feature?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>

Temayı Önizleme
Temayı İndir