Blogda Üç Sutunlu Sidebar Uygulaması

Blogda Üç Sutunlu Sidebar Uygulaması - Bugün sizlerle biraz değişiklik yaparak farklı bir sidebar tasarımını paylaşacağım. Bloglarınızda sidebar içinde kullandığınız arşiv, kategori, popüler yayınlar veya son mesajlar widgetlerini kullanmaktasınız. Bir çok widgetti aynı sidebarda kullanmak zorunda olduğunuzdan dolayı blogda bir yığılma ortaya çıkmaktadır. Tabber widgeti dediğimiz kenar çubuğunda kullandığımız sidebarı biraz daha farklı bir görünüm sağlamak için widgetleri azaltmak gerekmektedir.

Bloga Üç Sutunlu CSS ve JavaScript İle Widget Tabber Kenar Çubuğu Nasıl Eklenir?

1- Blog yazarlarının uygulamak istediği bu uygulamayı eklemek için blogger hesabınıza giriş yaparak hangi blogda uygulamak istiyorsanız blogun kumanda panelinden Şablon > HTML'i Düzenle diyoruz. CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu buluyoruz ve aşağıdaki CSS kodunu hemen bir satır üst kısmına ekliyoruz.

.bar,.bar1,.bar2{display:inline;float:left;width:33.3333333333%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-bottom:1px solid #ddd}
.bar{padding-right:2px}
.bar1{padding:0 3px}
.bar2{padding-left:2px}
.box-bar,.box-bar1,.box-bar2{width:100%;padding:5px 10px;background:#f1f1f1;border:1px solid #ddd;border-bottom:none;font-weight:bold;text-align:center;border-radius:3px 3px 0 0;cursor:pointer;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.clear{clear:both}
#HTML1{margin:0 auto!important}
#FeaturedPost1,#PopularPosts1,#BlogArchive1{width:100%;padding:10px;background:#fff;border:1px solid #ddd;border-top:none;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 auto!important}
#PopularPosts1,#BlogArchive1{display:none}
#FeaturedPost1 h2,#PopularPosts1 h2,#BlogArchive1 h2{position:fixed;top:-1000px;right:-1000px}
.btncurrent{padding:5px 10px 6px;margin-bottom:-1px;background:#fff;z-index:999}
#FeaturedPost1 .post-summary,#PopularPosts1 .widget-content,#BlogArchive1 .widget-content{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}100%{-webkit-transform:translateY(0);transform:translateY(0)}}

Şimdi küçük bir bilgi paylaşmakta fayda var. Mantık şu varsayılan blogger şablonunuzda bazı özelleştirme yaparak widget kimliğini oluşturmalıyız. #FeaturedPost1, #PopularPosts1, #BlogArchive1 widgetimizin kimliğini oluştumaktadır. Çünkü eklemek istediğimiz widget tabberin CSS ve JavaScript kodlarının içerisinde yer alan #FeaturedPost1, #PopularPosts1, #BlogArchive1 kodlar ile sidebarda bulunan HTML1 widgetine yeni kimlik kazandırmış oluyoruz. Yani Widget ID'si oluşturmuş olduk. Eğer uygulamada menülerin çalışmaması durumunda aşağıdaki kodu da ]]></b:skin> yada </style> kodunun bir üst satırına ekleyin.

#PopularPosts1,#BlogArchive1 {display:none}

Varsayılan Şablonu Özelleştirme

Blog kullanıcılarınında bildiği gibi blogger şablonlarının genellikle özel şablonlar olduğundan farklı etiketler ile kodlanmatadır. Bu yüzden de bazı eklentilerin kurulmasında sıkıntılar yaşanmakta, bizar CSS bilginiz varsa bunları çözebilirsiniz. Eğer yine de yapamıyorsanız yorum kısmından bize ulaşabilirsiniz.

2- Uygulamanın diğer bir kodu olan JavaScript kodunu ekleyelim </body> kodunu bulalım ve aşağıdaki kodu JavaScript kodunu body kodunun bir üst satırına ekleyelim.

<script type='text/javascript'>
//<![CDATA[
var divs=["FeaturedPost1","PopularPosts1","BlogArchive1"];var bar=document.getElementById('bar');var bar1=document.getElementById('bar1');var bar2=document.getElementById('bar2');var visibleDivId=null;bar.onclick=function(){this.addClass('btncurrent');this.toggleVisibility("FeaturedPost1");bar1.removeClass('btncurrent');bar2.removeClass('btncurrent');}
bar1.onclick=function(){this.addClass('btncurrent');this.toggleVisibility("PopularPosts1");bar.removeClass('btncurrent');bar2.removeClass('btncurrent');}
bar2.onclick=function(){this.addClass('btncurrent');this.toggleVisibility("BlogArchive1");bar1.removeClass('btncurrent');bar.removeClass('btncurrent');}
HTMLElement.prototype.toggleVisibility=function(divId){if(visibleDivId===divId){visibleDivId=null;}else{visibleDivId=divId;}
hideNonVisibleDivs();}
function hideNonVisibleDivs(){var i,divId,div;for(i=0;i<divs.length;i++){divId=divs[i];div=document.getElementById(divId);if(visibleDivId===divId){div.style.display="block";}else{div.style.display="none";}}}
HTMLElement.prototype.addClass=function(string){if(!(string instanceof Array)){string=string.split(' ');}
for(var i=0,len=string.length;i<len;++i){if(string[i]&&!new RegExp('(\\s+|^)'+string[i]+'(\\s+|$)').test(this.className)){this.className=this.className.trim()+' '+string[i];}}}
HTMLElement.prototype.removeClass=function(string){if(!(string instanceof Array)){string=string.split(' ');}
for(var i=0,len=string.length;i<len;++i){this.className=this.className.replace(new RegExp('(\\s+|^)'+string[i]+'(\\s+|$)'),' ').trim();}}
//]]>
</script>

Özelleştirme:

Son kontrollerimizi de ["FeaturedPost1","PopularPosts1","BlogArchive1"] kodlarını şablonunuzda kontrol ederek tamamlayalım. Eğer kodlarda uyuşmazlık olması durumunda FeaturedPost1, PopularPosts1, BlogArchive1 kodlarını sırasıyla kontrol edelim. Kodları sırasıyla bu şekilde ekledik diye sıra bu şekilde olacak değil. Sırayı değiştirmek için JavaScript dosyasının içinde bulunan yukarıdaki kodların sırasını değiştirebilirsiniz. Ve ayrıca Öne Çıkan Yayın, Popüler yayınlar ve Arşiv yerine Son Mesajlar widgeti, Son Eklenenler Widgeti ve Kategorileri ekleyebilirsiniz. 3- Blogumuzun yerleşim kısmına gelerek gatget HTML/JavaScript ekleyerek aşağıdaki HTML kodunu eklemiş olduğumuz gatget içerisine ekleyelim.

Bilgi: Gatgetlerimiz sırasıyla; a- Aşağıdaki kodu eklediğimz gatget en üstte olamak kaydıyla, b- Öne çıkan yayın gatgeti c- Popüler yayınlar gatgeti d- Arşim gatgeti olarak düzenlemelisiniz. Yani oluşturduğumuz widget tabber en üstte olmalı.

<div class="bar">
<div id="bar" class='box-bar btncurrent'>
Öne Çıkan
</div>
</div>
<div class="bar1">
<div id="bar1" class='box-bar1'>
Popüler
</div>
</div>
<div class="bar2">
<div id="bar2" class='box-bar2'>
Arşiv
</div>
</div>
<div class='clear'>
</div>

Tüm işlemlerimiz bitti ve sidebarımızı kontrol edelim. Widgetler üzerinde çıkan <b:include name='quickedit'/> konrol işaretlerini kaldırmak için şablonunuzdan bu kodları bulun ve silin.