Blogger Yazılarınızı Tam Ekran, Kenar Çubuğu Sağda ve Kenar Çubuğu Solda Olarak Yayınlamak

Herkese merhaba, bugün blog yazılarımızı nasıl tam ekran, sidebar (kenar çubuğu) sağda ya da sidebar (kenar çubuğu solda) şeklinde yayınlarız sorusunun cevabını öğreneceğiz. Çok gelişmiş bir sistem kuracağız ve bunu internette kolay kolay bulamazsınız. Bütün adımları takip ettikten sonra artık blog yayınlarımızda özgürlüğe kavuşacağız. Artık yazılarımızı tam ekran, sidebar (kenar çubuğu) sağda ve sidebar (kenar çubuğu) solda olmak üzere üç farklı şekilde yayınlayabileceğiz.

Başlamadan önce bu eklentinin genelde SoraTemplates'in yayınladığı temalarda çalıştığını unutmayalım.

Tema > HTML'yi Düzenle yolunu takip ederek html düzenleyiciyi açın. CTRL+F komutunu kullanarak </body> kodunu bulun ve hemen üst satırına aşağıdaki kodu yapıştırın.

1. Adım

JS

<script type="text/javascript">
  /*<![CDATA[*/
// jquery replacetext plugin https://github.com/cowboy/jquery-replacetext
(function(e){e.fn.replaceText=function(t,n,r){return this.each(function(){var i=this.firstChild,s,o,u=[];if(i){do{if(i.nodeType===3){s=i.nodeValue;o=s.replace(t,n);if(o!==s){if(!r&&/</.test(o)){e(i).before(o);u.push(i)}else{i.nodeValue=o}}}}while(i=i.nextSibling)}u.length&&e(u).remove()})}})(jQuery);
   var s = "[full_width]";
    var o = "[left_sidebar]";
    var u = "[left_sidebar]";
    $(".post *").replaceText(s, "<style>@media screen and (min-width: 980px){.item #main-wrapper{width:100% !important;max-width:100%!important;float:none!important;border-right:0!important;border-left:0!important}.item #sidebar-wrapper{display:none;}.item #main-wrapper #main{margin-left:0!important;margin-right:0!important}}</style>");
    $(".post-body *").replaceText(o, "<style>@media screen and (min-width: 980px){.item #main-wrapper{float:right!important;border-right:0!important;margin-right: 0px !important;}.item #sidebar-wrapper{float:left!important;padding-left:0!important;}}</style>");
    $(".post-body *").replaceText(u, "<style>@media screen and (min-width: 980px){.item #main-wrapper{float:left!important;border-right:0!important;margin-right: 0px !important;}.item #sidebar-wrapper{float:right!important;padding-left:0!important;}}</style>");
 /*]]>*/
</script>

[full_width]
[left_sidebar]
[left_sidebar]

Yaptığımız değişiklikleri kaydettikten sonra 2. Adımdaki yolu izleyelim.

2. Adım (Kısayolları eklemek)
Şimdi yeni Kayıt/Sayfa oluşturalım ya da önceden yazmış olduğunuz bir Yayın/Sayfa'yı düzenleyelim.

1. Tam Ekran (Full Width):
Yeni Kayıt/Sayfa oluşturalım ya da önceden yazmış olduğunuz bir Yayın/Sayfa'yı düzenleyelim. Yazımıza [full_width]  kodunu ekleyelim.

2. Kenar Çubuğu Solda (Left Sidebar):
Yeni Kayıt/Sayfa oluşturalım ya da önceden yazmış olduğunuz bir Yayın/Sayfa'yı düzenleyelim. Yazımıza [left_sidebar] kodunu ekleyelim.

3. Kenar Çubuğu Sağda (Right Sidebar):
Yeni Kayıt/Sayfa oluşturalım ya da önceden yazmış olduğunuz bir Yayın/Sayfa'yı düzenleyelim. Yazımıza [right_sidebar] kodunu ekleyelim.

Yayınla dedikten sonra eklediğimiz koda göre yayınımız şekilleniyor.

NOT: Bu eklenti genelde SoraTemplates'in yayınladığı temalarda çalışır.

Daha iyi bloglar için...