Yeni Blogger Yazar Kutusu Eklentisi

5/30/2016
Blog sitelerinde çok yaygın olarak kullanılan yazar kutusu genelde blogların kenar (sidebar) çubuklarında yer alan yazar kutusuna yeni tasarımı ile blogunuzu zenginleştirebilirsiniz.

Yeni Blogger Yazar Kutusu Eklentisi

Yazar kutusuna sosyal paylaşım butonları, blog takip butonu ve abone ol butonları ile birleştirilerek daha az yer kaplamasını sağladık.

Yeni Blogger Yazar Kutusu Eklentisi Nasıl Eklenir?

1. Blogger hesabınıza giriş yaparak eklemek istediğiniz bllogunu seçin. Blogunuzun kumanda panelinden Şablon > HTML'i Düzenle butonuna tıklayın. CTRL+F yardımıyla </head> kodunu bulun ve aşağıdaki CSS kodlarını </head> kodunun bir satır üzerine ekleyin. CSS kod içerisinde bulunan renkli alandan blog yazar kutusunun arka resmini değiştirebilirsiniz.
<style type='text/css'>
.yazar-kutusu,a.yazarname,h2.yazar-title,a.yazarname-url{display:block;text-align:center}
.yazarkutusu{width:300px;background:url(https://lh3.googleusercontent.com/-REJM7BkoSvA/V0tZPb_nlXI/AAAAAAAABRs/eY9KKEdo8AU_AfOPUsDzIpJc82ll-9OCACL0B/w300-h169-no/DSC_2271.JPG) top center no-repeat #fefefe;border:0px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}
h2.yazar-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}
.yazarkutusu img{margin:55px auto 0;border-radius:100%;display:block}
a.yazarname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}
a.yazarname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}
.yazar-kutusu li,.yazar-kutusu ul{list-style:none}
.yazar-kutusu ul{margin:0!important;padding:0!important}
.yazar-kutusu{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}
.yazar-kutusu li{display:inline-block;margin-right:10px}
.yazar-kutusu li:last-child{margin-right:0}
.yazar-kutusu li a,a.yazarname,a.yazarname-url{color:#666!important;transition:all .4s ease-out}
.yazar-kutusu li a:hover,a.yazarname:hover,a.yazarname-url:hover{color:#111!important}
a.button-yazar{display:block;background:#4d80fe;border:1px solid #3069ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}
a.button-yazar:hover{background:#346ae8;border:1px solid #2f6bc7}
</style>
2. Aşağıdaki kodu </body> kodunun bir satır üzerine ekleyin ve şablonu kaydedin.
<script src='https://googledrive.com/host/0B2RaeOjprqzBWTNWS3U5S1FYU3M' tipi='text/javascript'></script>
3. Aşağıdaki HTML kodu blogunuzun kumandan panelinden Yerleşim > Sidebar (Kenar Çubuğu) > Gadget Ekle > HTML/JavaScript içerisine HTML kodları ekleyin ve kaydedin. Burada yapanız gereken blog yazar kutusu HTML kodlarını Sidebar'da en alt Gadget'e ekleyin. HTML kod içerisinde bulunan renkli alaları blogunuza uygun olarak değiştirin.
<div class="yazarkutusu">
  <h2 class="yazar-title">
yazar
</h2>
<img alt="yazar" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="https://lh5.googleusercontent.com/-NHPz1AKjeSA/Vwl_ugE_ufI/AAAAAAAAAdM/h0cB0vLbz9MMqoDQ-ZyjTmz1CW0GxPlTwCL0B/s500-no/bg.png" width="120" height="120" />
<a class="yazarname" href="https://plus.google.com/+BloggerGrupları" rel="yazar" target="_blank" title="Blogger Grupları">Blogger Grupları</a>
<a class="yazarname-url" href="https://plus.google.com/+BloggerGrupları" rel="yazar" target="_blank" title="google.com/+BloggerGrupları">google.com/+BloggerGrupları</a>
<div class="yazar-kutusu">
<ul>
<li><a href="https://www.facebook.com/kullanıcıadınız" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://twitter.com/kullanıcıadınız" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.google.com/+kullanıcıadınız" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="//www.youtube.com/c/kullanıcıadınız" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.linkedin.com/in/kullanıcıadınız" target="_blank" title="LinkedIn" rel="nofollow"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com/kullanıcıadınız/" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>
</ul>
<div class="clear"></div>
<a class="button-yazar" href="#" target="_blank" title="Blog Takipçileri">Blog Takipçileri</a>
<a class="button-yazar" href="#" rel="nofollow" target="_blank" title="Abone Ol">Abone Ol <i aria-hidden="true" class="fa fa-paper-plane"></i></a>
</div>
</div>

Blog'a CSS ve JavaScript Google Drive'dan Host Dosyası Oluşturma

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

Hiç yorum yok