Blogger Ve Wordpress Tema Arşivi

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>




/// Yukarıdaki kod içinde geçen kırmızı true yazısını

Aşağıdaki gibi false olarak değiştiriyoruz ///






<b:widget id='Attribution1' locked='false' title='' type='Attribution'>
<b:includable id='main'>
    <b:if cond='data:feedbackSurveyLink'>
      <div class='mobile-survey-link' style='text-align: center;'>
        <data:feedbackSurveyLink/>
      </div>
    </b:if>

Bizler özellikle Blogger sistemi üzerinde yoğunlaşmış ve bu sistemin blogculara önemli artılar kattığını düşünen blogcularız. Bu yazımızda Blogger SEO ile ilgili oldukça faydalı ve bilinmeyen ip uçlarını kavrayacak ve bunları kullanmamız sonucunda neler kazanacağız bunları öğreneceğiz.

URL nedir ? URL ile SEO etkileşimi ?

 Aslında her birimiz birer blogcu olduğumuz için URL'nin ne olduğunu zaten biliyoruzdur. Ama belkide aramızda terimsel olarak bilmeyenler vardır. Yinede açıklamak ile konumuza başlamanın faydalı olacağını düşünüyorum.

"URL insanların internet üzerindeki ulaştıkları" adreslerdir şeklinde açıklamamız mümkündür.
URL'nin SEO ile etkileşimi buradan sonra yazımızın ip ucunu vereceğimiz kısıma yaklaştığımızın habercisidir.

Blog Hocam üzerinde dahi bir çok URL'ye göz atabilirsiniz bu hatayı görmeniz muhakkak mümkün olacaktır.Örnek olarak bir yazımız var bu yazımızın başlığını Blogger sistemize girelim ;

Dünya üzerindeki en ünlü 5 Sosyal Ağ  (inceleme)

- Bunu bu şekilde Blogger'dan başlık olarak açarsak yazımızın Url'sinin yarısı görüntülenmeyecek çünkü Url'miz oldukça uzun

- Arayıcı kitlesi Arama motorları üzerinden arama ile gelme ihtimali çok düşecek çünkü; hem URL karekter olarak çok geniş

- Arama motorları uzun bir URL' ile sahip konumuz olduğu için yazmız her ne kadar bilgilendirici özelliğe sahip olursa olsun yinede bizi arka sırala atıcaktır.

Arama Dostu URL oluşturalım

 Şimdi bizler göstermiş olduğum ve çoğu kişinin bilmediği yada bilenlerin de paylaşmadığı benim kendi düşüncem ile bulmuş olduğum bir ip ucunu göstereceğiz.

Blogger sistemi bize Wordpress'de çok fazla kullanılan bir özelliği kullanım izni sağlıyor aslında tabi ki eğer biz bunu fark edebilirsek. Şimdi Blogger panelimizden yeni yayın oluşturmak için giriyoruz. Blogger panelimizin başlık kısmına URL'mizi kısaltacağız ve sonra kolay kullanım ekleyeceğiz bunu nasıl yapacağız ?

Başlık kısmına Url'mizi ;En unlu 5 Sosyal ag şeklinde yazıyoruz.Böylece Url'miz ;

1- Url'miz kısaldı +1
2- Url'miz Türkçe karekterlerden arındırıldı.
3-Url'miz SEO dostu oldu.
4- Url'miz artık daha üstlerde yer alabilir (kısa olduğundan dolayı)
5- İnsanlar bunu bu şekilde arama motoru üzerinden ararlarsa eğer ulaşma ihtimalleri daha yüksek olduğu için daha çabuk hit kazanabiliriz.

Bunu eğer ; Dünya üzerindeki en ünlü 5 Sosyal ağ (inceleme) olarak başlık bölgemize yazarsak ; www.siteadi.blogspot.com/tarih/tarih/Dnya-zerindeki-en-nl-5-sosyal-ag-inceleme olacaktı ki ; şimdi bu URL ; www.siteadi.blogspot.com/tarih/tarih/en-unlu-5-sosyal-ag.html oldu.

Eminim şimdi aklınıza gelen ilk soru peki ama bu kadar yazıyı bunun içinmi okuduk yani ? o zaman başlıklarımızda sitemizde öyle görünecek diyebildiğinizi duyabilyorum sanki :) tabiki hayır.

Yazımızı yayınladıktan hemen sonra tekrar yazıyı düzünlemek için giriyoruz ve Başlığımızı Dünya üzerindeki en ünlü 5 Sosyal Ağ  (inceleme) olarak değiştiriyoruz. ve tekrar siteye gidip Url'ye bir bakıyorsunuz ki ;URL farklı ve yazınızın Title'ı farklı :) böylece hem kısa bir url elde ettik hem SEO etkileşimini sağladık hemde yazımız için örneğin kendi blogumda çok sık kullandığım (inceleme), (infografik) gibi okuyucuyu bilgilendiren bir başlık zenginliği de katmış olduk.

Uzunca yazımızı okuyan herkeze çok teşekkür ediyorum :) aklınıza takılan sorularınızı sormanız ve yorumlarınızı esirgememeniz dileğimle :)

Çoğu blogger kullanıcısı temasına çok önem veriyor. Nasıl önem vermesin ki sitesine gelen ziyaretçilerin sitesinin tasarımını beğenmesi çok önemli.

<script type="text/javascript">

function pipeCallback(obj) {

document.write('<ol>');

var i;

for (i = 0; i < obj.count ; i++)

{

var href = "'" + obj.value.items[i].link + "'";

var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + 

"</a> </li>";

document.write(item);

}

document.write('</ol>');

}

</script>

<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=

json&_callback=pipeCallback&_id=918c4b96efdf63fee389f2f025085904&EntertheURL

=http%3A%2F%2Fcelilbayer.blogspot.com&number=10&Nametobeexcluded=Blogger Hakkında Bilgiler" 

type="text/javascript"></script>

Son zamanlar da blogger eklentileri ve dersleri yayınlayan siteler oldukça artmışa benziyor. Bu işte çok aşırı profesyonel olan arkadaşlarım da var bu işe yeni başlayan ve öğrenmek için heves eden insanlar da yok değil hani.

<center> BURAYA EKLENTİ KODUNUZ </center>

<head>

<meta content='ID NUMARASI'   property='fb:app_id'/>

<div class='post-footer-line post-footer-line-3'>


YADA 


<p class='post-footer-line post-footer-line-3'>


YADA


<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div id="fb-root"></div>
<script>(function(d){
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/tr_TR/all.js#xfbml=1";
 d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<fb:comments width='500' colorscheme='light' expr:title='data:post.title' expr:href='data:post.canonicalUrl' expr:xid='data:post.id'/>
</b:if>

<html

<html xmlns:fb="https://www.facebook.com/2008/fbml" b:version='2' class='v2' expr:dir='data:blog.languageDirection' 



Sadece Kırmızı yerde gösterilen gibi olacak , Mavi yazılar Örnek amaçlı yazılmıştır eklemeyiniz !!

Mavi yazılar sizde farklı olabilir..Kodu nasıl ekliyeceğinz amaçlı örnektir..

Daha önce kapatılabilir şeffaf bir bilgilendirme çubuğu paylaşmıştım.Bir arkadaşımın isteği üzerine yine buna benzer bir bilgilendirme çubuğu ararken Nedim Arabacı tarafından geliştirilmiş Noty ile karşılaştım ve sizlerle de paylaşmak istedim.

Bu kapatılabilir bilgilendirme çubuğu pat diye değil bir efekt ile açılıyor ve köşesindeki X ikonuna basılmadığı takdirde belli bir süre sonra kendiliğinden kapanıyor.Blogunuza nasıl ekleyeceğinize gelirsek…

1.Adım: Şablonunuzdan </head> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/60346665/jquery.noty.js"></script>

<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/60346665/jquery.noty.css"/>
<link rel="stylesheet" type="text/css" href="http://dl.dropbox.com/u/60346665/noty_theme_default.css"/>

2.Adım: Şablonunuzdan bu kez </body> kodunu bulun ve hemen üstüne aşağıdaki kodları ekleyin.

<script type="text/javascript">
noty({"text":"Blog Hocam'ı Twitter'da takip edin! <a href='http://twitter.com/bloghocam' target='_blank'>@BlogHocam</a>","layout":"bottom","type":"success","textAlign":"center","easing":"swing","animateOpen":{"height":"toggle"},"animateClose":{"height":"toggle"},"speed":750,"timeout":10000,"closable":true,"closeOnSelfClick":false});
</script>

Bu çubuğu sayfanın 3 farklı yernde gösterebilirsiniz.Çubuğun sayfanın üst kısmında gözükmesini istiyorsanız bottom yazan yeri top ,  ortada bir pencere şeklinde açılmasını istiyorsanız center olarak değiştirebilirsiniz.

Nedim Arabacı’ya böyle bir uygulama geliştirip bizlerle paylaştığı için bir kez daha teşekkür ediyorum.http://needim.github.com/noty/#creator sayfasına gidip bu uygulamadan yararlanarak farklı tarzda çubuklar da oluşturabilirsiniz.

<style text-type="CSS">
#bmenu{
position:fixed;
right:5px;
center:0px;
background-color:#2059DC;
border-radius:10px;
-moz-border-radius:10px;
border:2px solid #FFF;
width:202px;
height:20px;
color:#FFFFFF;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}

#bmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}

#bmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#9AB2EA;
margin:15px 0;
padding:0 15px;}

#bmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}

#bmenu li a:hover{
color:#fff;}

#bmenu:hover{
z-index:5;
height:175px;
</style>

<div id="bmenu">
<h3>
Açılır Menü</h3>
<ul>
<li><a href="#">MENÜ 1</a></li>
<li><a href="#">MENÜ 2</a></li>
<li><a href="#">MENÜ 3</a></li>
<li><a href="#">MENÜ 4</a></li>
<li><a href="#">MENÜ 5</a></li>
</ul>
</div>

<script type="text/javascript"> function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'Rastgele Sayfa'; document.getElementById('Rastgele').appendChild(a); } </script> <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

<div id="Rastgele"></div>

Daha önce blogda yaptığım değişikliklerden şurada ve şurada bahsetmiştim.Son zamanlarda üçüncü bir seri değişklik daha yaptım.Kısaca bunlardan bahsetmek istiyorum.

1. Click Box

Bir süredir Click Box adını verdiğim, içerisinde Facebook, Twitter ve +1 butonlarını bulunan widgetı değiştirmeyi düşünüyordum ancak nasıl bir tasarım olacağı konusunda kararsızdım.Bloglar arası bir gezinti yaparken http://www.yazar.gen.tr/ adresinde ki bloga rastladım ve orada gördüğüm tasarım çok hoşuma gitti.Küçük değişiklikler yaparak Click Box’ı güncelledim.

2. E-Posta Abonelik Formu

E-posta abonelik formu bence kenar çubuğunda ki en önemli öğelerden.Blogunuzu takip etmek isteyenler için en kolay ve en cazip  seçenek e-posta aboneliği olduğu için bu formun tasarımına özen göstermelisiniz.Blog Hocam’ın kenar çubuğundaki öğelerin sayısı arttıkça kullandığım e-posta abonelik formu eskisi kadar dikkat çekmemeye başlamıştı.Ben de küçük bir değişiklik yaparak daha dikkat çekici bir görünüm kazandırmak istedim.Başarılı oldum sanırım.

3. Yeni Rozeti

Ana sayfada gördüğünüz ve en son yayınlanan yazının sağ üst köşesinde ki yeni rozetini şu ana kadar başka bir blogda görmediğim için ( mutlaka vardır da ben henüz denk gelmedim ) çok seviyorum.Bu rozet sadece ana sayfada en son yazının köşesinde gözüküyor.

Söz Sizde

Yaptığım bu değişklikler hakkında ki fikirlerinizi merak ediyorum.Yorum bölümünden benimle paylaşırsanız sevinirim.Aklıma yeni bir fikir geldiğinde veya başka bir blogda gördüğüm bir özellikten etkilendiğimde yenilikler yapmaya devam edeceğim.Şimdilik bu kadar.

<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;overflow:hidden;}#twitter_div{width:246px;height:353px;overflow:hidden;}#google_plus_div{width:152px;height:97px;overflow:hidden;margin-left:50px;margin-top:10px;}#knfeedburner_div{width:300px;height:97px;margin-top:25px;overflow:hidden;}#kakinetwork_div{width:300px;height:97px;overflow:hidden;}/* right side style */#facebook_right{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;right:-200px;}#facebook_right img{position:absolute;top:-2px;left:-35px;}#facebook_right iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;left:-2px;top:-3px;}#twitter_right{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;right:-250px;}#twitter_right_img{position:absolute;top:-2px;left:-35px;border:0;}#google_plus_right{z-index:10003;background-color:#f2f2f2;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-right:2px solid #0056a0;border-left:hidden;width:152px;height:97px;position:fixed;right:-154px;}#google_plus_right_img{position:absolute;top:-2px;left:-33px;border:0;}#feedburner_right{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left:hidden;width:300px;height:97px;position:fixed;right:-303px;}#feedburner_right_img{position:absolute;top:-2px;left:-33px;border:0;}#kakinetwork_right{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_right img{position:absolute;top:-2px;left:-101px;}/* left side style */#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}#twitter_left{z-index:10004;border:2px solid #6CC5FF;background-color:#6CC5FF;width:246px;height:353px;position:fixed;left:-250px;}#twitter_left_img{position:absolute;top:-2px;right:-35px;border:0;}#google_plus_left{z-index:10003;background-color:#006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom:2px solid #0056a0;border-left:2px solid #0056a0;border-right:hidden;width:152px;height:97px;position:fixed;left:-154px;}#google_plus_left_img{position:absolute;top:-2px;right:-33px;border:0;}#feedburner_left{z-index:10003;background-color:#fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom:2px solid #5b5b5b;border-left:2px solid #5b5b5b;border-right:hidden;width:300px;height:97px;position:fixed;left:-303px;}#feedburner_left_img{position:absolute;top:-2px;right:-33px;border:0;}#kakinetwork_left{z-index:10003;border:2px solid #303030;background-color:#fff;width:300px;height:97px;position:fixed;}#kakinetwork_left img{position:absolute;top:-2px;right:-101px;}.box-title1{border:1px solid #ddd;/*border-radius*/-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;/*box-shadow*/-webkit-box-shadow:5px 5px 5px #CCCCCC;-moz-box-shadow:5px 5px 5px #CCCCCC;box-shadow:5px 5px 5px #CCCCCC;padding:10px;margin:10px 0;}.enteryouremail{background:#fff !important;border:1px solid #d2d2d2;padding:0px 8px 0px 8px;color:#a19999;font-size:12px;height:25px;width:165px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;margin:0px;}.submitbutton{background:#f2f2f2;border:1px solid #F66303;/*box-shadow*/-webkit-box-shadow:3px 3px 3px #666;box-shadow:3px 3px 3px #666;font:bold 12px Arial, sans-serif;color:#000000;height:25px;padding:0 12px 0 12px;margin:0 0 0 5px;/*border-radius*/-webkit-border-radius:5px;border-radius:5px;cursor:pointer;}</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script><div id="on"><div id="facebook_right" style="top: 18%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFE_DmhejKucOlYU-abbsKnC848KqEruLMtvhx31pvuiuS0_m9BRhLB1q7zMjxQI4WFd7804Fa3MrR6OlzEyCl6kpdH4fXi_Z790shlghRrPxPT3dFP3jqq_eQ-AWZZuqKYO4SEcixcqI/s1600/helperblogger.com-facebook-icon.png" alt="" /><iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/XXXXX&amp;locale=en_GB&amp;width=200&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=356"   scrolling="no"></iframe></div></div></div><div id="on"><div id="twitter_right" style="top: 35%;"><div id="twitter_div"><img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFvJhqZZS4OEDQElwQ3PhgJCu06AtgnyOqYxWXtWncI6dpckN3WrehV-SfIdYIbequSviQEyy0xtU1P6HyssrVlf9VchYTCVk3-l31WLsQxS6fqEh6UvxjpvrqznDoh309iOioXI3v1YE/s1600/helperblogger.com-twitter-icon.png" /><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('TWİTTERADRES').start();</script></div></div></div><div id="on"><div id="google_plus_right" style="top: 52%;"><div id="google_plus_div"><img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqBjDuMREc_w9OwUWPIxtVUO-LdMworiAP4ZpwySEnecFJGbXvrjs8D6WMzLjQ_OWDxYGRvOwL55_sPSjhzsMGUl2d1cddY2u5sEOvE-52ceep8JQuWOT8VT-zhQ9cDY2b1YjO-dxVtmE/s1600/helperblogger.com-google-plus-icon.png" /><div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div></div></div><div id="on"><div id="feedburner_right" style=" top: 69%;"><div id="knfeedburner_div"><center><h4 style="color:#F66303;">You can also receive Free Email Updates:</h4><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNERADRES', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="FEEDBURNERADRES" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpqHtdF8kEMWNYch39Q4Jcfv95HQ4GG7-nu8vY8dPAxV9xO2D7raQP2SbOUGJYmBoG03Phial50hlJb5F6gMUIrfDi7Ov83WF57wdGSxZ-VSDHEX6x_N5gi7DfczJoywCL2uMDeJW5pQw/s1600/helperblogger.com-subscribe-icon.png" /></div></div></div></div>

/* Variable definitions
   ====================

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
<Variable name="PopularPosts.background.color6" description="background color6" type="color" default="#ff0" value="#7ee3c7"/>
<Variable name="PopularPosts.background.color7" description="background color7" type="color" default="#ff0" value="#f6993d"/>
</Group>

]]></b:skin>

#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:$(PopularPosts.background.color1);width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:$(PopularPosts.background.color6);width:65%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:$(PopularPosts.background.color7);width:60%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}

<b:widget id='PopularPosts1' locked='false' title='Popüler Yayınlar' type='PopularPosts'>
x
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
X
</b:widget>

<b:includable id='main'>
   <b:if cond='data:title'>
    <h2><data:title/></h2>
   </b:if>
   <div class='widget-content popular-posts'>
    <ul>
     <b:loop values='data:posts' var='post'>
      <li>
       <b:if cond='data:showThumbnails == &quot;false&quot;'>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        <b:else/>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
        </b:if>
       <b:else/>
        <b:if cond='data:showSnippets == &quot;false&quot;'>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Jdfx4oD3XMhc8am9HtN9uun1tqnAlYhcCDponBB1dy6wTvawpMAzBlcd1kAuAyT62dJtqWapjJVlpjI6-YPnbiqy-kZmmlNjSIOaGcSexULaa6ZkJF9wg-XqPnN6TaA5-jY6oZnO_48/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        <b:else/>
         <b:if cond='data:post.thumbnail'>
          <img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
         <b:else/>
          <img alt='no image' class='item-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_Jdfx4oD3XMhc8am9HtN9uun1tqnAlYhcCDponBB1dy6wTvawpMAzBlcd1kAuAyT62dJtqWapjJVlpjI6-YPnbiqy-kZmmlNjSIOaGcSexULaa6ZkJF9wg-XqPnN6TaA5-jY6oZnO_48/s1600/defaultimage.jpg'/>
         </b:if>
         <a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
         <div class='clear'/>
        </b:if>
       </b:if>
      </li>
     </b:loop>
    </ul>
   </div>
  </b:includable>

Bu yazıda, blog yazılarınızda bir mesaj vermek veya uyarı yapmak istediğinizde kullanmanız için ikonlarla desteklenmiş mesaj kutuları yapmayı anlatacağım.Bu mesaj kutrtularını CSS teknolojisi ile yapcacağız.Bu örneklerden yola çıkarak siz de benzer kutular ve paneller oluşturabilirsiniz.Başlamadan önce her blogcunun bilmesi gerektiğini düşündüğüm ve bu mesaj kutularını oluştururken kullandığımız CSS’ten bahsetmek istiyorum.

CSS Nedir?

CSS (Cascading Style Sheets) yani stil şablonları; HTML’e ek olarak web sayfalarına daha çok görsellik katmak için geliştirilmiş bir web teknolojisidir.CSS le bir web sayfasındaki öğelerin rengini, boyutunu, konumunu ve bir çok özelliğini kolayca ayarlayabiliriz.

Blogger şablonlarında CSS kodları ]]></b:skin> kodunun üzerindeki bölümde bulunur.CSS öğrenerek  belki kendi temanızı sıfırdan yapamazsınız ancak mevcut temalarda değişiklikler yapabilirsiniz.CSS hakkında daha detaylı bilgiler bulmak için Fatih Hayrioğlu’nun blogunu ziyaret edebilirsiniz.

Gelelim mesaj kutularını oluşturmaya.Öncelikle şablonumuza kutuların görünümünü tanıtmak için gerekli CSS kodlarını ekleyeceğiz.Bu kodları yukarıda da bahsettiğim gibi şablonumuzun ]]></b:skin> kodunun üstüne yazacağız.Örnek olarak 3 ayrı uyarı kutusu oluşturacağız.Siz bu örneklerden faydalanarak kendi mesaj kutularınızı oluşturabilirsiniz.Kodlar şöyle:

.dikkat{
        border:solid 1px #DEDEDE;
        background:#FFFFCC url(http://icons.iconarchive.com/icons/famfamfam/mini/16/icon-alert-icon.png) 8px 6px no-repeat;
        color:#222222;
                font-weight:bold;
        padding:4px;
        text-align:center;
    }
    .onay{
        border:solid 1px #90ac13;
        background:#eef4d3 url(http://icons.iconarchive.com/icons/famfamfam/silk/16/accept-icon.png) 8px 6px no-repeat;
        color:#6b800d;
        font-weight:bold;
        padding:4px;
        text-align:center;
    }
    .yasak{
        border:solid 1px #CC0000;
        background:#F7CBCA url(http://icons.iconarchive.com/icons/famfamfam/silk/16/delete-icon.png) 8px 6px no-repeat;
        color:#CC0000;
        font-weight:bold;
        padding:4px;
        text-align:center;
    }

Kodlarda dikkkat, onay ve yasak isimli 3 ayrı kutunun görünümü belirttik.Şimdi sıra bu kodları kullanmaya geldi.

Blogunuza yeni kayıt oluştururken HTML’yi Düzenle bölümünü açın ve buraya aşağıdaki kodları yazın:

<div class="dikkat">
Blog Hocam Dikkat Mesaj Kutusu</div>

<div class="onay">
Blog Hocam Onay Mesaj Kutusu</div>

<div class="yasak">
Blog Hocam Yasak Mesaj Kutusu</div>

Bu örneklerden yola çıkarak farklı CSS kodları kullanabilir ve kendi özel mesaj kutularını oluşturabilirsiniz.