Yıldız Değerlendirmeli Popüler Yayınlar Eklentisi

Şubat 12, 2016 5 Yorumlar
blogger-popular-yayinlar-yildizli


Blogger bloglarımıza eklediğimiz popüler yayınlar widgetının daha şık görünmesi için bir takım modifiyeler yapmıştık, şimdi bir farklı tarz daha deneyeceğiz, isteyen bunu da uygulayabilir.

Daha önceki paylaştığım popüler yayınlar modifiyeleri aşağıdakiler. (İsterseniz bir göz atın onlara da).

  1. Popüler Yayınlar Modifiyesi
  2. Yeni Popüler Yayınlar Gadgetimiz
Şimdi yeni eklentimiz hakkında konuşalım. Bu popüler yayınlar düzenlemesini halihazırda benim bloğumda görmeniz mümkün. (Bkz:sağ tarafta)
O hafta veya ay en çok tıklanan yazınız hangisiyse otomatik olarak o yazıya beş yıldız veriyor. İkinciye dört, üç, iki diye gidiyor. Yıldız değerlendirmesi oluyor ya onun gibi birşey.

Buradaki amaç popüler yayınlarımızın biraz daha şık durması ve dikkat çekmesidir.

Şimdi anlatıma geçelim.
1. Blogger giriş.
2. Şablon
3. HTML'yi Düzenle
4. Açılan kodlar üzerine tıkla CTRL F tuşlarına bas arama kutusuna </head> yaz ve bul.
5. Bu kodun alt satırına aşağıdaki kodları ekle. 

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

6.Şimdi ]]></b:skin> kodunu bulun ve üst satırına aşağıdaki kodları ekleyin.


/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

7. Şablonu kaydedin.

İşlem bu kadar basit. Bir de bu eklentinin yıldızlarıyla ilgili farklı yorumları var. Onları da denemek isterseniz bunun yerine aşağıdaki herhangi birini ekleyebilirsiniz. Aynı CSS kodlarını defalarca eklemeyin he ya yukarıdakini ekleyin yada aşağıdakilerden birini :)

Stil 2
/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Stil 3
/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Arkadaşlar destek olmak için bloğumu izleyin ve lütfen yorumlarınızla güzellik katın. İyi bloglamalar :)

Blogger Işıklı Numaralı Sayfa Navigasyonu

Ocak 11, 2016 7 Yorumlar
blogger-numarali-sayfa-navigasyonu


Hepimizin bildiği üzere standart blogger şablonlarında sayfalar arasında geçiş yaparken daha eski kayıtlar, daha yeni kayıtlar gibi uzun ve bana göre saçma linkler vardır.

Ben bunların yerine daha şık ve kullanışlı olacağını düşündüğüm ışıklı numaralı sayfa navigasyonunu sizlerle paylaşmak istedim. İsterseniz nasıl yapılacağına geçelim.

Blogger Işıklı Numaralı Sayfa Navigasyonu Nasıl Yapılır?

1. Blogger yönetici paneline girin.
2. Şablon - HTML'yi Düzenle yolunu akip edin açılan kodlar üzerine tıklayın.
3. CTRL F tuşlarına basarak arama kutusunu açın ve ]]></b:skin> kodunu bulun.
4. Bu kodun üst satırına aşağıdaki CSS kodlarını ekleyin.


/* Blog Bakkalı Sayfa Navigasyonu */
.showpageArea{overflow:hidden;margin:10px 0}
.showpageOf{display:inline-block;background:#fff;padding:6px 8px;color:#222;border:1px solid #e3e3e3;margin-right:2px;border-radius:2px}
.showpagePoint{background:#f76253;border:1px solid #e2574a;color:#fff;display:inline-block;padding:6px 8px;margin-right:2px;border-radius:2px}
.showpage a,.showpageNum a{display:inline-block;background:#fff;padding:6px 8px;color:#222;border:1px solid #e3e3e3;margin-right:2px;border-radius:2px}
.showpage a{margin:0;margin-left:2px;}
.showpage a:hover,.showpageNum a:hover{background:#f76253;color:#fff;border-color:#e2574a;}

5. Şimdi </body> kodunu bulun ve aşağıdaki kodları bir üst satırına yapıştırın.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=3;
var upPageWord =&#39;&#171;&#39;;
var downPageWord =&#39;&#187;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span class="showpageOf"> Pages '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span class="showpageOf"> Pages '+(postNum-1)+'</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var home_page_url=location.href;var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>
</b:if>
</b:if>

6. Şablonunuzu kaydedin. 

Tebrikler! Blogger ışıklı numaralı sayfa navigasyonunuz hazır. Şimdi bloğunnuzu açın ve kontrol edin :) 


Destek olmak için bloğumu izlemeyi ve yorumlarınızla güzellik katmayı unutmayın. İyi bloglamalar.

7 Adımda Otomatik Slider Yapımı

Aralık 14, 2015 19 Yorumlar
blogger Otomatik Slider

Blogger otomatik duyarlı slayt kutusu yapımı. Bloğunuza gadget olarak ekleyebileceğiniz bir slayt alanı oluşturmak için bu yazımı okuyun.

Gadget olarak istediğiniz yere ekleyebilirsiniz. 

Paylaşacağım bu slayt eklentisi duyarlıdır, yani gadget olarak eklediğiniz yerin boyutuna göre otomatikman küçülür veya büyür. Aynı şekilde değişik ekran boyutlarına göre şekil alması anlamına gelir. 

Slaytlar arası geçişlerde değişik efektler var ki bu şık olmasında bir etken.

Bu slideri bloğunuzda vitrin olarak kullanabilirsiniz yani böyle de düşünebiliriz zaten çok şık bir yapısı var. 

Slayt alanında son yazılarınız otomatik gösterilir. Kaç yazınızın görüneceğini siz ayarlayabilirsiniz. 
Blog başlığınızın altında güzel duracağını düşündüğüm bu slayt alanının nasıl yapıldığına geçelim isterseniz. Yapımı çok basit bakmayın kodların uzun olmasına. Kopyala yapıştır yapacaksınız yani :)


Blogger Otomatik Slayt Alanı Nasıl Yapılır?

1. Blogger giriş.
2. Şablon
3. HTML'yi Düzenle
4. Kodlar üzerinde bir yere tıklayın CTRL F tuşlarına basarak arama kutusunu açın ve ]]></b:skin> kodunu bulun.
4. Bu kodun üst satırına aşağıdaki kodları yapıştırın.


/* Blog Bakkalı Slayt Alanı */
#skitterslideshow{padding:4px;border:1px solid #DDD;box-shadow:0 1px 5px rgba(0,0,0,.15)}
#slider-wrapper-indzign{padding:0;background-color:#FDFDFD;box-shadow:0 1px 5px rgba(0,0,0,.15);border-radius:3px;height:250px;position:relative;z-index:8888}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button,.box_skitter_home.indzign-theme .info_slide_dots{background-color:#fbfbfb;transition:background-color linear .3s}
.box_skitter ul{display:none}
.box_skitter .container_skitter{overflow:hidden;position:relative;width:100%;height:100%}
.box_skitter .image{overflow:hidden;max-width:100%;max-height:100%}
.box_skitter .image img{display:none;width:100%;height:100%}
.box_skitter .box_clone{position:absolute;top:0;left:0;width:100px;overflow:hidden;display:none;z-index:20}
.box_skitter img{max-width:none}
.box_skitter .box_clone img{position:absolute;top:0;width:620px;height:310px;max-width:630px;left:0;z-index:19}
.box_skitter .prev_button{position:absolute;top:50%;left:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px}
.box_skitter .next_button{position:absolute;top:50%;right:35px;z-index:100;width:42px;height:42px;overflow:hidden;text-indent:-9999em;margin-top:-25px}
.box_skitter .info_slide{position:absolute;top:15px;left:15px;z-index:100;background:#000;color:#fff;font:padding:5px 0 5px 5px;border-radius:5px;opacity:0.75}
.box_skitter .info_slide .image_number{background:#333;float:left;padding:2px 10px;margin:0 5px 0 0;cursor:pointer;border-radius:2px}
.box_skitter .info_slide .image_number_select{background:#c00;float:left;padding:2px 10px;margin:0 5px 0 0}
.box_skitter .container_thumbs{position:relative;overflow:hidden;height:50px}
.box_skitter .info_slide_thumb{border-radius:0;overflow:hidden;height:45px;top:auto;bottom:-5px;left:-5px;padding:5px;opacity:1.0}
.box_skitter .info_slide_thumb .image_number{overflow:hidden;width:70px;height:40px;position:relative}
.box_skitter .info_slide_thumb .image_number img{position:absolute;top:-50px;left:-50px}
.box_skitter .box_scroll_thumbs{padding:0 10px}
.box_skitter .box_scroll_thumbs .scroll_thumbs{position:absolute;bottom:60px;left:50px;background:#ccc;width:200px;height:10px;overflow:hidden;text-indent:-9999em;z-index:101;border-radius:20px;cursor:pointer;border:1px solid #333}
.box_skitter .info_slide_dots{position:absolute;bottom:-40px;z-index:151;padding:5px 0 5px 5px;border-radius:50px}
.box_skitter .info_slide_dots .image_number{background:#333;float:left;margin:0 5px 0 0;cursor:pointer;border-radius:50px;width:18px;height:18px;text-indent:-9999em;overflow:hidden}
.box_skitter .info_slide_dots .image_number_select{background:#c00;float:left;margin:0 5px 0 0}
.box_skitter .label_skitter{z-index:80;position:absolute;bottom:0;left:0;display:none}
.loading{position:absolute;top:50%;right:50%;z-index:10000;margin:-16px -16px;color:#fff;text-indent:-9999em;overflow:hidden;background:#FFF no-repeat left top;width:32px;height:32px}
.label_skitter{z-index:150;position:absolute;bottom:0;left:0;color:#fff;display:none;opacity:0.9;background:#000}
.label_skitter p{padding:5px;margin:0}
.box_skitter .progressbar{background:#000;position:absolute;bottom:5px;left:10px;height:5px;width:940px;z-index:99;border-radius:20px}
.preview_slide{display:none;position:absolute;z-index:999;bottom:40px;left:-40px;width:100px;height:50px;border:3px solid #FFF;background:rgba(0,0,0,.5);box-shadow:rgba(0,0,0,0.7) 0 0 10px;overflow:hidden}
.preview_slide ul{width:100px;height:50px;padding:0;overflow:hidden;margin:0;list-style:none;display:block;position:absolute;top:0;left:0}
.preview_slide ul li{width:100px;height:55px;overflow:hidden;float:left;margin:0;padding:0;position:relative;display:block}
.preview_slide ul li img{position:absolute;top:0;left:0;height:55px;width:100px}
#overlay_skitter{position:absolute;top:0;left:0;width:100%;z-index:9998;opacity:1;background:#000}
.box_skitter_home{background-image:url(http://2.bp.blogspot.com/-9u_hEl1AYQw/UZoFMXLUjnI/AAAAAAAAAco/c8wJh46pAJY/s1600/skitterloading.gif);background-position:center center;background-repeat:no-repeat}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button,.box_skitter_home.indzign-theme .info_slide_dots{border:1px solid #FFF;box-shadow:0 1px 3px rgba(0,0,0,0.3);border-radius:0}
.box_skitter_home.indzign-theme .info_slide{}
.box_skitter_home.indzign-theme .info_slide_dots{bottom:-16px;width:110px;left:50%!important;margin-left:-65px;height:30px;padding:0 8px;z-index:99}
.box_skitter_home.indzign-theme .info_slide_dots span{transition:background linear .3s;background-image:url(http://3.bp.blogspot.com/-4YmYwCb-ysQ/UZoFIi-u66I/AAAAAAAAAcI/oGf5a50M4Mk/s1600/light-overlay.png);background-repeat:repeat-x;background-position:left -13px;background-color:#d1d1d1;color:#777;border-radius:50%;border-bottom:1px solid #FFF;display:block;width:10px;height:10px;text-indent:-9999px;float:left;margin:10px 6px 0 6px}
.box_skitter_home.indzign-theme .info_slide_dots span:hover{background-color:#666}
.box_skitter_home.indzign-theme .info_slide_dots span.image_number_select{background-color:#5ebc00;border:none;width:14px;height:14px;margin:8px 3px 0 3px;box-shadow:inset 1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(0,0,0,.1),inset 0 1px 0 rgba(0,0,0,.1),inset 0 -1px 0 rgba(0,0,0,.1)}
.box_skitter_home.indzign-theme .prev_button,.box_skitter_home.indzign-theme .next_button{display:block;width:75px;height:22px;line-height:30px;text-decoration:none;font-size:10px;text-transform:uppercase;transition:none;text-indent:0;bottom:-12px;top:auto;color:#777;z-index:98;cursor:pointer}
.box_skitter_home.indzign-theme .prev_button:hover,.box_skitter_home.indzign-theme .next_button:hover,.box_skitter_home.indzign-theme .prev_button:active,.box_skitter_home.indzign-theme .next_button:active{opacity:1!important}
.box_skitter_home.indzign-theme .next_button{right:28.5%;padding-right:5px;text-align:right;line-height:22px;opacity:1!important}
.box_skitter_home.indzign-theme .next_button span{padding-right:20px;background:url(http://4.bp.blogspot.com/-tDcoMZRS_FI/UZoFLG8tRpI/AAAAAAAAAcM/v7hsdxe-B_o/s1600/nav-next.png) no-repeat left top;background-position:right center;padding-bottom:1px;display:block}
.box_skitter_home.indzign-theme .prev_button{left:28.5%;padding-left:5px;text-align:left;line-height:22px;opacity:1!important}
.box_skitter_home.indzign-theme .prev_button span{padding-left:20px;background:url(http://4.bp.blogspot.com/-Iy1Iil-KW5c/UZoFMLhWK2I/AAAAAAAAAck/kPbQFfFn-3k/s1600/nav-prev.png) no-repeat left top;background-position:left center;padding-bottom:1px;display:block}
.box_skitter_home.indzign-theme .label_skitter{background:#49afcd;width:90%;padding:5px 8px 5px;left:50%;margin-left:-45%;bottom:10%;text-align:left;height:auto;border-right:2px solid #fff;border-left:2px solid #fff;color:#fff;font-size:12px}
.box_skitter_home.indzign-theme .label_skitter p{padding:0;margin:0;text-shadow:0 1px 0 rgba(0,0,0,0.3)}
.box_skitter_home.indzign-theme .label_skitter h4{margin:0;font-size:135%;text-shadow:0 1px 0 rgba(0,0,0,.3);color:white;padding:0 0 10px}
.box_skitter_home.indzign-theme .label_skitter a{color:#fff;text-decoration:none}
.box_skitter_home.indzign-theme .label_skitter a:hover{color:#eee}
.box_skitter_home.indzign-theme .info_slide_thumb{background-color:#fff}
.box_skitter.indzign-theme .info_slide_thumb .image_number{margin:5px}
.box_skitter .container_skitter .date,.box_skitter .container_skitter .cm{font-size:100%}
.box_skitter .container_skitter .date span{margin-right:3px}
@media only screen and (max-width:960px){.box_skitter_home.indzign-theme .next_button{right:20.5%}.box_skitter_home.indzign-theme .prev_button{left:20.5%}}
@media only screen and (max-width:768px){#slider-wrapper-indzign{height:220px}.box_skitter .box_clone img{width:422px;height:220px}.box_skitter_home.indzign-theme .next_button{right:19.5%}.box_skitter_home.indzign-theme .prev_button{left:19.5%}}
@media only screen and (max-width:640px){.box_skitter_home.indzign-theme .next_button{right:26.5%}.box_skitter_home.indzign-theme .prev_button{left:26.5%}}
@media only screen and (max-width:480px){#slider-wrapper-indzign{height:200px}.box_skitter .box_clone img{width:280px;height:220px}.box_skitter_home.indzign-theme .next_button{right:20.5%}.box_skitter_home.indzign-theme .prev_button{left:20.5%}}
@media screen and (max-width:320px){.box_skitter_home.indzign-theme .label_skitter p{display:none}.box_skitter_home.indzign-theme .next_button{right:5.5%}.box_skitter_home.indzign-theme .prev_button{left:5.5%}}

5. Şimdi </body> kodunu bulun, üst satırına aşağıdaki kodları yapıştırın. 
<script src="http://yourjavascript.com/815401201522/vitrin.js" type="text/javascript"/>

6. Şablonu kaydedin.
7. Şimdi Yerleşim/Gadget Ekle/HTML Jawascript Ekle yolunu takip ederek aşağıdaki kodları ekleyin ve kaydedin. 

Slayt alanınızın nerede görünmesini istiyorsanız gadget i o kutucuğa doğru sürüleyip Düzenlemeyi Kaydet diyebilirsiniz.


<div id='skitterslideshow'></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
    pengaturan({
        blogURL: 'http://blogbakkali.blogspot.com.tr/',
        MaxPost: 5,
        RandompostActive: false,
        ImageSize: 620,
        NumCharacter: 150,
        idcontaint: "#skitterslideshow",
        cmtext: "Yorum",
        NoCmtext: "Yorum Yok",
        pBlank: "http://2.bp.blogspot.com/-D47WWjFZXdk/UP1z-A5uCuI/AAAAAAAAH98/heTBvxq49No/s1600/noimage.jpg",
        tagName: false
    });
});
//]]>
</script>

Kırmızıyla boyadığım yere kendi blog adresinizi veya hangi blogtan yayın göstermek istiyorsanız onun adresini yazın.5 gösterilen slayt yazı sayısı siz istediğinizle değiştirin.
8. Eveet blogger otomatik slayt alanımız hazır. İyi günlerde kullanın. Yorumunuzla güzellik katın veya sormak istediğiniz yerleri sorun. İyi bloglamalar :D

Blogger Renkli Dünyam Teması 2016

Aralık 07, 2015 51 Yorumlar
Blogger Renkli Dünyam Teması

Blogger Renkli Dünyam Teması indirin. Arlina Desing'in paylaştığı bu tema Blog Bakkalı okuyucuları için tarafımca düzenlenmiş ve Türkçeleştirilmiştir. Özellikle bayan blogcu arkadaşlarımın işine yarayacak olan bu tema moda, makyaj, yemek tarifleri blogu gibi sitelerde çok kullanışlı olacaktır. 


Blogger Renkli Dünyam Teması


2016 model profesyonel tasarımı ve duyarlı olma özelliğiyle birçok blogger temasından ayrılan bir yapısı vardır. Temanın duyarlı olması tüm ekranlara göre otomatikman boyutlanması anlamına gelmektedir. 

Blogger Renkli Dünyam Teması


Arama kutusunun açılır pencere şeklinde olması, sidebarına eklenen hakkımda bölümünün sosyal medya hesaplarıyla bağlantılı olması, popüler yayınlar gadgetinin özelleştirilmiş olması, benzer yazılar bölümün farklı ve şık yapısı vs. vs. birçok güzel yanı bulunmaktadır.

Bu temayı düzenlemek ve Türkçeleştirmek için baya bir uğraştım. Eh artık bir teşekkürü hakettim :) Bir sürü emek veriyorsun gelen alıyor gidiyor ne bir yorum yazan var ne de bloğu izleyen. Arkadaşlar burada para almıyorum ben bir birlik olsun diye uğraşıyorum. Sessiz kalmayın yorum falan yapın yahu.
Temayı sadece bu yazıya yorum yapan arkadaşlara vereceğim. Yoruma mail adresinizi da eklemeyi unutmayın.
Evet temayı indirmeye karar verdiyseniz yorumlarınızla belirtin. Zorlanan arkadaşlar için temayı bloğunuza nasıl uyarlayacağınızı bir sonraki yazımda anlatacağım. İyi bloglamalar.

Metro Tarzı Sosyal Paylaşım Butonları Yapımı

Kasım 28, 2015 14 Yorumlar
Metro Tarzı Sosyal Paylaşım Butonları Yapımı

Blogger Metro Tarzı Sosyal Paylaşım Butonları Yapımı. 
Bloğunuzun kenar çubuğuna (sidebar) widget olarak ekleyebileceğiniz bu sosyal paylaşım düğmeleri sayesinde Facebook, Twitter, Youtube, Linkedin, Pinterest ve Google üzerindeki sosyal ağlarınıza bağlantı verebilirsiniz. Bu sayede bloğunuzdan sosyal ağdaki hesaplarınıza ziyaretçi çekebilir ve takipçi sayınızı kasabilirsiniz.

Hepsi bir arada bulunan sosyal butonlar bloğunuza şık bir hava katacaktır. Gelelim nası yapıldığına.



Metro Tarzı Sosyal Paylaşım Butonları Yapımı

1. Blogger giriş.
2. Yerleşim
3. Gadget Ekle
4. HTML/Jawascript
5. Aşağıdaki kodları kopyalayıp açılan pencereye yapıştırın ve # işareti olan yerlere kendi hesap adalrınızı yazın.


<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/# rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/#></a></li>
<li><a class="gp" href="https://plus.google.com/#"></a></li>
<li><a class="pi" href=http://pinterest.com/#rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/#rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/#></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/#rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(http://3.bp.blogspot.com/-gDUOorsTaS8/URoqPnM84zI/AAAAAAAAJ6U/Xhmy7cIpz2M/s75/facebook.png) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(http://1.bp.blogspot.com/-ACiFLecWLrU/URom7CIU1aI/AAAAAAAAJ5o/FpAf2PXkzH0/s60/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(http://1.bp.blogspot.com/-xLeqmsg2KY0/URoqO5Y5ikI/AAAAAAAAJ58/RaxLc_hv-Fc/s50/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social .pi{background:url(http://1.bp.blogspot.com/-namunMjzveg/USC_mj8e7fI/AAAAAAAAKIo/hfylnwqGQmo/s40/pinterest.png) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(http://4.bp.blogspot.com/-joDwAv84KDs/USC_mviM2uI/AAAAAAAAKIs/KZB9EsNAKIA/s40/linkedin.png) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(http://3.bp.blogspot.com/-hLKJ60klMs0/USC_mh_GWYI/AAAAAAAAKIk/6CmSTv8xQGE/s40/youtube.png) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(http://1.bp.blogspot.com/-s-lGqHCMnbA/URoqPH64IJI/AAAAAAAAJ6I/99a4xAxc98Q/s40/feed.png) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(http://3.bp.blogspot.com/-gDUOorsTaS8/URoqPnM84zI/AAAAAAAAJ6U/Xhmy7cIpz2M/s200/facebook.png) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(http://1.bp.blogspot.com/-ACiFLecWLrU/URom7CIU1aI/AAAAAAAAJ5o/FpAf2PXkzH0/s74/twitter-bird-dark-bgs.png) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(http://1.bp.blogspot.com/-xLeqmsg2KY0/URoqO5Y5ikI/AAAAAAAAJ58/RaxLc_hv-Fc/s200/google%252Bplus.png) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(http://1.bp.blogspot.com/-namunMjzveg/USC_mj8e7fI/AAAAAAAAKIo/hfylnwqGQmo/s45/pinterest.png) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(http://4.bp.blogspot.com/-joDwAv84KDs/USC_mviM2uI/AAAAAAAAKIs/KZB9EsNAKIA/s45/linkedin.png) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(http://3.bp.blogspot.com/-hLKJ60klMs0/USC_mh_GWYI/AAAAAAAAKIk/6CmSTv8xQGE/s45/youtube.png) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(http://1.bp.blogspot.com/-s-lGqHCMnbA/URoqPH64IJI/AAAAAAAAJ6I/99a4xAxc98Q/s45/feed.png) no-repeat center center #e9a01c}
</style>

6. Kaydet deyin ve bloğunuza bakın. Tebrikler! Hepsi bir arada sosyal paylaşım butonlarınız sidebarınıza eklendi.

Destek için bloğumu izlemeyi unutmayın. Yorumlarınızla yazılarıma güzellik katın. Teşekkürler.

Boş Blogger Şablonu

Kasım 19, 2015 4 Yorumlar
BOS-BLOGGER-SABLONU

Kendi blog temanızı kodlamak istiyorsanız alın size boş blogger şablonu . Kendinize ait tema yapmak istiyorsanız eklentilerini falanını fiştanını gerekli kodların altına veya üstüne yapıştırın. Bu işten anlıyorsanız yapın bakalım temalarınızı.

İşte blogger şablonunun temel taşları bunlar . Tüm eklenti ve Widget şu bu ne varsa bu kodların içerisine eklenir. Aşağıdaki kodları blogger sitenizin temel iskeleti olarak adlandırabiliriz.


Boş Blogger Şablonu


Benden bu kadar. hadi hayırlı işler.

Oltayla Balık Tutar Gibi! Sayfa Başına Dön Butonu Yapımı

Kasım 03, 2015 2 Yorumlar
balik-yukari-cik-dugmesi-yapimi

Blogger bloğunuz için daha önce roket şeklinde yukarı çık butonu yapımını anlatmıştım. Şimdiki Yukarı çık butonumuz olta şeklinde. Siz blog sayfanızda aşağı doğru indikçe otomatik olarak olta bloğunuza atılın, oltanın ucundaki solucan ise "beni kurtarııın yukarı çek yukarıııı" diye bağırır :)


Sayfa başına dön butonu ne işe yarar?

Ziyaretçiniz özellikle uzun yazılarınızı okuduktan sonra tekrar yukarı çıkmak istediğinde iki saat o güzel parmaklarını yormasın diye oltanın ucuna tek tıklamayla sayfayı yukarı çıkarır. Anlatıma geçelim.

Oltayla Balık Tutar Gibi! Sayfa Başına Dön Butonu Yapımı

1. Blogger panelize girin.
2. Şablon
3. HTML'yi Düzenle
4. Kodlar üzerine tıklayın CTRL F tuşlarına basın arama kutusunu açın.
5. ]]></b:skin> kodunu bulun ve üst satırına aşağıdaki kodları yapıştırın.


/* Blog Bakkalı Yukarı Çık Butonu */
.umpanikan{background-image:url(https://2.bp.blogspot.com/-j4gdLyohXTg/VjkUblLwsWI/AAAAAAAAAgI/C8oE8yfRacs/s1600/blogbakkali.png);background-repeat:no-repeat;position:relative}
#umpanikan{cursor:pointer;width:30px;height:530px;background-size:41px;position:fixed;top:-700px;left:7%;transition:all .7s ease-in-out;-webkit-transition:all .7s ease-in-out;z-index:21}
#umpanikan-bubble{background:#fff;border-radius:50px;color:#06f;display:block;font-size:12px;line-height:14px;opacity:0;overflow:visible;padding:5px;position:absolute;top:445px;left:20px;text-align:center;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:hidden;width:60px;height:auto;z-index:99}
#umpanikan:hover > #umpanikan-bubble,#umpanikan:hover > #umpanikan-bubble:after{opacity:1;transition:all .3s ease-in-out;-webkit-transition:all .3s ease-in-out;visibility:visible}
#umpanikan-bubble:after{border-bottom:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;border-left:5px solid #fff;content:"";display:block;position:absolute;top:0%;left:10px;width:0;height:0;z-index:99}

6. </body> kodunu bulun. Yine üstüne aşağıdaki kodları ekleyin.


<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function(n){n(window).on("scroll",!1,function(){var o=n(window).scrollTop();o>700?n("#umpanikan").css("top","0"):n("#umpanikan").css("top",o-700+"px")}),n("#umpanikan").unbind("click").click(function(){n("html,body").animate({scrollTop:n("#umpanikanTOP").offset().top},"slow")})});
//]]>
</script>

7. <body> kodunu bul ve altına aşağıdaki kodları kopyala ve yapıştır.


<div id="umpanikanTOP"></div>
<div class="umpanikan" id="umpanikan">
  <div id="umpanikan-bubble">Anaam köpek balığı! Çek yukarıı çeeek.</div>
</div>

8. Şablonu kaydedin. 


Olta şeklinde back to top yani sayfa başına dön butonu yapımı bu kadar basit. Yorumunuzla güzellik katmayı ve bloğuma üye olup destek olmayı unutmayın :) İyi bloglamalar.

Resimli İlgili Yazılar Eklentisi

Kasım 02, 2015 8 Yorumlar
blogger-benzer-yayinlar-yapma

Blogger Resimli İlgili Yazılar Eklentisi. Benzer yazılar eklentisi de denilen bu şey yazılarınızın sonuna otomatik olarak eklenir ve o yazınızla alakalı diğer yazıları alt alta sıralar ve site içi bağlantı verir. Benim bloğumda da bu eklentinin resimsiz olanı var yazı sonuna gelince göreceksiniz. Bu eklentinin çalışma mantığı etikete bağlı diğer yazılarınızı da otomatikman gösterir. Benim bu yazımın etiketi "blog eklentileri" ve yazımın sonunda bu etikete bağlı diğer yayınları da göreceksiniz.

İlgili yazıların gösterilmesinin faydası nedir? 

Bloğunuza benzer yazılar eklentisini kurduğunuz zaman ziyaretçilerinizin blogta daha fazla zaman geçirmesini sağlayabilir, konuyla alakalı diğer yazılarınızın da okunmasının yolunu açabilirsiniz. Okuyucularınızın blogta uzun süre kalması seo açısından çok önemlidir. Google bu konuya dikkat ediyor. Sadece bir yazısı kısa süre okunup diğer yazılarına geçiş yapılmayan blogları kayda değer görmüyor ve dikkat çekici değil diyerek sıralamada aşağı çekiyor. Bu yüden ziyaretçilernizin diğer yazılarınızı da okuması ve zaman geçirmesi çok önemli.

Yazı sonlarında aynı kategoriye ait diğer yazıları görüntülememize yarayan bu canım eklentinin yapım aşamalarını on adımda anlattım. Sırayı iyi takip edin çok basit kurarsınız. Hadi bakalım.

Resimli Benzer Yazılar Eklentisi Nasıl Kurulur?

1. Blogger yönetici panelinize girin.
2. Şablon
3. HTML'yi Düzenle
4. CTRL F tuşlarına basarak ]]></b:skin> kodunu bulun
5. Bu kodun üst satırına aşağıdaki kodları kopyalayıp yapıştırın.


/* Blog Bakkalı Benzer Yazılar Eklentisi */
#related_posts{margin:20px 0;}
#related_posts h4{background:#4f93c5;color:#fff;padding:12px;margin:0 0 5px;font-size:110%;}
#related_img{margin:0;padding:0;}
#related_img:hover{background:0}
#related_img ul{list-style-type:none;margin:0;padding:0}
#related_img li{min-height:62px;border-bottom:1px solid #f1f1f1;list-style:none;margin:0 0 5px;padding:5px;}
#related_img li a{color:#2672a0;}
#related_img li a:hover{text-decoration:underline}
#related_img .news-title{display:block;font-weight:bold!important;margin-bottom:5px;font-size:14px;}
#related_img .news-text{display:block;font-weight:normal;text-transform:none;color:#888;font-size:11px;}
#related_img img{background:#fefefe;float:left;margin-right:10px;width:60px;height:60px;max-width:100%;border-radius:4px;}

6. Şimdi aynı arama kutusunu kullanarak </head> kodunu bulun.
7. Bu kodun üst satırına aşağıdaki kodları ekleyin.

<script type='text/javascript'>/*<![CDATA[*/var relnum=0;var relmaxposts=5;var numchars=135;var morelink=" ";function saringtags(r,l){for(var e=r.split("<"),n=0;n<e.length;n++)-1!=e[n].indexOf(">")&&(e[n]=e[n].substring(e[n].indexOf(">")+1,e[n].length));return e=e.join(""),e=e.substring(0,l-1)}function relpostimgthum(r){for(var l=0;l<r.feed.entry.length;l++){var e=r.feed.entry[l];reljudul[relnum]=e.title.$t,postcontent="","content"in e?postcontent=e.content.$t:"summary"in e&&(postcontent=e.summary.$t),relcuplikan[relnum]=saringtags(postcontent,numchars),postimg="media$thumbnail"in e?e.media$thumbnail.url:"http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif",relgambar[relnum]=postimg;for(var n=0;n<e.link.length;n++)if("alternate"==e.link[n].rel){relurls[relnum]=e.link[n].href;break}relnum++}}function contains(r,l){for(var e=0;e<r.length;e++)if(r[e]==l)return!0;return!1}function relatpost(){for(var r=new Array(0),l=new Array(0),e=new Array(0),n=new Array(0),t=0;t<relurls.length;t++)contains(r,relurls[t])||(r.length+=1,r[r.length-1]=relurls[t],l.length+=1,l[l.length-1]=reljudul[t],e.length+=1,e[e.length-1]=relcuplikan[t],n.length+=1,n[n.length-1]=relgambar[t]);reljudul=l,relurls=r,relcuplikan=e,relgambar=n;for(var t=0;t<reljudul.length;t++){var a=Math.floor((reljudul.length-1)*Math.random()),u=reljudul[t],s=relurls[t],i=relcuplikan[t],o=relgambar[t];reljudul[t]=reljudul[a],relurls[t]=relurls[a],relcuplikan[t]=relcuplikan[a],relgambar[t]=relgambar[a],reljudul[a]=u,relurls[a]=s,relcuplikan[a]=i,relgambar[a]=o}for(var g,m=0,h=Math.floor((reljudul.length-1)*Math.random()),c=h,d=document.URL;m<relmaxposts&&(relurls[h]==d||(g="<li class='news-title clearfix'>",g+="<a href='"+relurls[h]+"' rel='nofollow' target='_top' title='"+reljudul[h]+"'><img src='"+relgambar[h]+"' /></a>",g+="<a href='"+relurls[h]+"' target='_top'>"+reljudul[h]+"</a>",g+="<span class='news-text'>"+relcuplikan[h]+" ... <a href='"+relurls[h]+"' target='_top'>"+morelink+"</a><span class='news-text'>",g+="</li>",document.write(g),m++,m!=relmaxposts))&&(h<reljudul.length-1?h++:h=0,h!=c););}var reljudul=new Array,relurls=new Array,relcuplikan=new Array,relgambar=new Array;/*]]>*/</script>

8. Şimdi <data:post.body/> kodunu bulun ve bu kodun bittiği yere yani sağ tarafına aşağıdaki kodları ekleyn. Bu koddan karşınıza birkaç tane çıkacak ikincisinin veya diğerlerinin sağına ekleyeceksiniz. (Hangisine ekleyeceğiniz kendi temanızın kodlanmasına bağlı olduğu için net değil sırayla deneme yanılmayla eklemekte fayda var).


<div id='related_posts'>
        <h4>Benzer Yazılar</h4>
        <b:loop values='data:post.labels' var='label'>
          <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgthum&amp;max-results=50&quot;' type='text/javascript'/>
        </b:loop>
        <ul id='related_img'>
      <script type='text/javascript'>relatpost();</script>
   </ul>
</div>

9. Şablonu kaydedin.
10. Tebrikler benzer yayınlar eklentiniz hazır.

Bonus: Bu kadar emek karşılıksız değil tabiki sağdan izleyicilere katıl. Parayla değil yahu  

10 Adımda Farklı Tarzda Hakkımda Sayfası Yapımı

Ekim 30, 2015 14 Yorumlar
blogger-hakkimda-sayfasi-yapimi

Blogger Popup Açılır Hakkımda Sayfası Yapımı. Tüm blogların ve internet sitelerinin vazgeçilmezleri arasındadır hakkımda sayfaları. Yazar burada kendisi hakkında veya bloğu hakkında bilgiler verir; sosyal medya hesaplarını gösterir, okuyucularının kendisine ulaşabilmesi için telefon numarasını veya mail adresini verir. Tüm bunları dağınık şekilde okuyucuya aktarmak yerine derli toplu bir şekilde sunar ki rahatça ulaşma imkanı olsun.

Hakkımda sayfalarını gösteren link yolu kolayca görülebilsin diye genelde üst yatay menüde bir buton ekleme yoluyla işe koşulur.

Şimdi sizinle paylaşacağım pop up açılır hakkımda sayfasıda bir buton yardımıyla açılıyor. Bunun faydası okuyucu sayfanıza geldiğinde kendiliğinden açılmaz ve sıkıcı bir hal almaz. Biliyorsunuz bazı blog sayfaları varki sağdan soldan fışkıran popup pencelerinden kına getiriyor. Bu yüzden hakkımda sayfasına buton eklemek çok akıllıca ve insaflıca :)



Hakkımda Sayfası Nasıl Yapılır?

1. Blogger yönetici panelini açın.
2. Şablon
3. HTML'yi Düzenle
4. Açılan kodlar üzerinde bir yere tıklayın ve CTRL F tuşlarına basarak arama kutucuğunu açın.
5. ]]></b:skin> kodunu bulun.
6. Bu kodun üst satırına aşağıdaki CSS kodlarını yapıştırın.


/* Blog Bakkalı Hakkımda Sayfası */
.boxinner{z-index:99;width:100%;height:600px;position:absolute;left:50%;margin-left:-250px;background-color:#333;top:20px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#555}
kepala{background:#00adca;height:50px;width:100%;position:inherit}
#textlogo{color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;background:#00bcdc;height:70%;width:61%}
#left{background:#333;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#aaa;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6{cursor:pointer;font-size:15px;padding:15px 25px;color:#aaa;border-bottom:1px solid #444;}
.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#D92121;color:#fff}.taber3:hover{background:#0B76B9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#FFD100;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a{color:#fff}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:15px auto;display:table;border-radius:100%;max-width:200px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{display:none;}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:relative;top:18px;border-radius:50px;left:5px;margin:0 auto;padding:4px 7px;font-size:13px;text-decoration:none;line-height:1;color:#fff}
a.popup-close:hover{color:#fff}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}

6. Şimdi <body> kodunu bulun.
7. Bu kodun alt satırına aşağıdaki kodları yapıştırın.


<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'/>
<div class='circle'/>
<div class='circle'/>
<div class='contentbox'>
<kepala><span id='textlogo'>HAKKIMDA</span>
<a class='popup-close' href='#closed' title='Close'>X Kapat</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img src='//3.bp.blogspot.com/-jrxkYbBQAYs/VidR2h2eDeI/AAAAAAAALJ8/Vg7CzLW0oYo/s1600/indzign.jpg'/><br/>
<b>Blog Bakkalı</b><br/><br/>
Blog Bakkalı bloğumu 2015 yılının Temmuz ayında açtım.<br/><br/>
Beş yıldır blog işleriyle uğraşıyorum, edindiğim tecrübeleri sizlerle paylaşıyorum. Blog Bakkalı bloğumda Blogger eklentileri ve ipuçları hakkında yazılar hazırlıyorum. Blog Bakkalı'na hoşgeldiniz.<br/><br/>
</div></div></div>
<div id='left'>
<div class='taber1'><a href='http://blogbakkali.blogspot.com' target='_blank' title='blogbakkali.blogspot.com'>blogbakkali.blogspot.com</a></div>
<div class='taber2'><a href='https://plus.google.com/u/0/117314262477655253180/about' target='_blank' title='Takip Et Google Plus'>Google Plus</a></div>
<div class='taber3'><a href='https://www.facebook.com/blogbakkali' target='_blank' title='Takip Et Facebook'>Facebook</a></div>
<div class='taber4'><a href='https://twitter.com/blogbakkali' target='_blank' title='Takip Et Twitter'>Twitter</a> </div>
<div class='taber5'><i class='fa fa-phone'/>Telefon:  012345xxx</div>
<div class='taber6'><a href='/' target='_blank' title='email'>mail@outlook.com</a></div>
</div></div></div></div></div>

Kırmızıyla işaretlediğim yerleri kendi bilgilerinizle değiştirin.
8. Şimdi aşağıda paylaştığım link yolunu istediğiniz yere koyabilirsiniz. Bu link hakkımda sayfasına götüren buton linki. Tavsiyem üst yatay menünüz varsa oraya eklemenizdir.


<li><a class='popup-link' href='#popup'>Hakkımda</a></li>

9. Şablonu Kaydediyoruz.
10. Tebrikler Popup Açılır Hakkımda Sayfanız hazır.

Blogger bloglar için hakkımda sayfası yapımını anlattım. Takıldığınız yerleri yorumla lütfen sorun. Karmaşık gelmesin adımları uyglayın çok basit. 

Bloğumu izlemeni istiyorum bedava bu ya :) İyi bloglamalar.