Yeni Nesil Blog Bilgi Eklentisi

2/29/2016
Bir blogda olması gereken iki önemli husus vardır. Bir blogda bir çok eklenti kullana bilirsiniz. Peki bu eklentilerin sizin blogunuza olan faydalarını ve zararlarını araştırdınız mı? Blogunuzda en fazla 5 eklentiden fazla eklenti kullanmamaya dikkat edin.

Yeni Nesil Blog Bilgi Eklentisi

Nedir bu 5 eklenti? 
1- Header içerisinde bir adet eklenti kullanmalısınız.
2- Footer içerisinde bir adet eklenti kullanmalısınız.
3-Arşiv için bir eklenti kullanmalısınız.
4- Sidebar içerisinde bir eklenti kullanmalısınız.
5- BlogPosting içerisinde bir eklenti kullanmalısınız.

Blogunuzda kullanmış olduğunuz eklentilerin blogunaza faydalarını değerlendirerek gereksiz olan eklentileri blogunuzdan kaldırmanızı önerilir. Zaten google tarafından da bir çok eklentinin fazladan yer kaplamasından dolayı blogunuzu tam olarak tarayamamaktadır.

Şimdi sizinle paylaşmış olduğum yeni nesil blog eklentisiyle bir çok eklentinin bir arada olması sizin blogunuz için hem görünüm hem de teknolojiye uygun olarak tasarlayabilirsiniz.

1- Blogger giriş yapıyoruz ve yeni nesil blog bilgi eklentisini hangi blogumuzda uygulamak istiyorsak o blogun kumanda paneline girerek Şablon > HTML'yi Düzenle diyoruz ve CTRL+F yardımıyla </head> kodunu buluyoruz ve aşağıdaki HTML kodunu </head> kodunun hemen üzerine ekliyoruz.

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

2- Yine CTRL+F yardımıyla ]]></b:skin> yada </style> kodunu buluyoruz ve aşağıdaki CSS kodunu bulduğumuz kodun hemen üzerine ekliyoruz.

/* About Us */
.boxinner{z-index:99;width:100%;height:575px;position:absolute;left:50%;margin-left:-310px;top:70px}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
headbanger{background:#ff675c;height:70px;width:100%;position:inherit}
#textlogo{background:rgba(0,0,0,0.1);color:#fff;line-height:70px;text-align:center;font-size:200%;position:inherit;width:68.5%;box-sizing:initial}
#left{background:#fff;color:#666;top:70px;bottom:0;right:0;padding:20px 0 0 0;width:200px;position:inherit}
#left a{color:#888;transition:initial;}#left a:hover{color:#fff;}
#left i {margin:0 10px 0 0}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;padding:15px;color:#888;}
.taber1:hover{background:#ff6733;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#383838;color:#fff}.taber7:hover{background:#f39c12;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,#left .taber7:hover a{color:#fff}
#aboutus{background:#fafafa;width:62.2%;padding:20px 20px 40px 20px;color:#444;text-align:left;position:inherit;float:left;line-height:normal}
#aboutus img{margin:10px auto 0 auto;display:table;border-radius:100%;max-width:140px;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
.scrollbarbox{overflow:hidden;text-align:justify;margin:55px 0 0 0}
.scrollbarbox .innerone{height:480px;overflow:auto}
#popup{display:none;opacity:0;visibility:hidden;transform:scale(1.1);-webkit-backface-visibility:hidden;-webkit-font-smoothing:antialiased;z-index:1003;transition:transform .6s cubic-bezier(.175,.885,.32,1.275),opacity .3s,visibility .3s}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;opacity:1;visibility:visible;margin:auto;transform:scale(1.0);}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:absolute;border-radius:50px;right:20px;line-height:50px;margin:0 auto;font-size:16px;text-decoration:none;color:rgba(0,0,0,0.2);font-family:fontawesome}
a.popup-close:hover{color:rgba(0,0,0,0.6);}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:300%;color:#aaa}
.totalposts .totallabel{display:block;color:#aaa;font-weight:700}
li.infobloggereklentileri{border:0;}
li.infobloggereklentileri a{background:#ff675c;color:#fff;display:block;margin:16px 0;padding:4px 8px;border-radius:3px;font-size:90%;font-weight:700;transition:background-color .3s}
li.infobloggereklentileri a:hover{background:#e4554b;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}

3- Yine CTRL+F yardımıyla <body> kodunu buluyoruz ve aşağıdaki HTML kodunu bulduğumuz kodun hemen üzerine ekliyoruz. 

<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='contentbox'>
<headbanger><span id='textlogo'>Blogger Eklentileri</span>
<a class='popup-close' href='#closed' title='Close'><i class='fa fa-times'/></a>
</headbanger>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img alt='Blogger Eklentileri' height='140' src='https://4.bp.blogspot.com/-iTM7WNHzTC8/VtSzhTam4DI/AAAAAAAABpw/YuAbJtEtzNA/s200/blogger-icon.png' title='Blogger Eklentileri' width='140'/><br/>
<script src='http://bloggereklentileri.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=getposts'/><br/><br/>
Blogger Eklentileri Metin-1.<br/><br/>
Blogger Eklentileri Metin-2.
</div></div></div>
<div id='left'>
<div class='taber1'><a href='#' target='_blank' title='Soundcloud'><i class='fa fa-soundcloud fa-fw'/> Soundcloud</a></div>
<div class='taber2'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Google Plus'><i class='fa fa-google-plus fa-fw'/> Google Plus</a></div>
<div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Facebook'><i class='fa fa-facebook fa-fw'/> Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Twitter'><i class='fa fa-twitter fa-fw'/> Twitter</a> </div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Follow Us On Codepen'><i class='fa fa-codepen fa-fw'/> Codepen</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow-blog.g?blogID=7342017194742683056' rel='nofollow' target='_blank' title='Join this blog'><i class='fa fa-users fa-fw'/> Join this blog</a></div>
</div></div></div></div></div>

4- Yine CTRL+F yardımıyla </head> kodunu buluyoruz ve aşağıdaki jQuery kodunu bulduğumuz kodun hemen üzerine ekliyoruz. 

<script type='text/javascript'>
//<![CDATA[
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Artikel yang di Publish</span></div>');}
//]]>
</script>

5- Bu muhteşem yeni nesil blog bilgi eklentisini nereden açılmasını istiyorsanız, Bilgi aşağıdaki Pop Up kodunu oraya ekliyorsunuz. 
<li class='infobloggereklentileri'><a class='popup-link' href='#popup'>Info</a></li>

6- Şablonu kaydet diyoruz ve muhteşem yeni nesil blog bilgi eklentisi hazır. Güle güle kullanın.

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

Hiç yorum yok