Yeni Nesil Blog Bilgi Eklentisi

2/29/2016
Yeni Nesil Blog Bilgi Eklentisi

Yeni Nesil Blog Bilgi Eklentisi - 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.

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.

Blogger Blogspot Bilgi Kutusu Oluşturma


Ş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 Tema > HTML'yi Düzenle diyoruz ve CTRL+F yardımıyla </head> kodunu buluyoruz ve aşağıdaki kodu </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 ]]></b:skin> yada </style> kodunun 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.infobox{border:0;}
li.infobox 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.infobox 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 <body> kodunun hemen altına 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://3.bp.blogspot.com/-byg4AYLMyv4/WFhFgVojlWI/AAAAAAAABY0/uY9zzATtD_UXBys-7WR8OOb6j9ONVH3EACLcB/s1600/blogger-red.png' title='box Design' width='140'/><br/>
<script src='http://www.bloggereklentileri.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=getposts'/><br/><br/>
Blogger Eklentileri özel yeni nesil eklentileri, temaları, CSS, CSS3, HTML, HTML5 Javascript ve JQuery kodları ile blog sitelerinize farklı tasarımlar kazandırmayı amaçlayan, blogger ipuçları hakkında bilgiler paylaşan ve rehberlik yapan kişisel bir blog.<br/><br/>
Daha iyi bloglar için faydalı bilgilerin yanı sıra blog sitelerine katkıda bulunmak temel amacımızdır. Teşekkürler.
</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='Google Plus'><i class='fa fa-google-plus fa-fw'/> Google Plus</a></div>
<div class='taber3'><a href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook fa-fw'/> Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter fa-fw'/> Twitter</a> </div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' title='Codepen'><i class='fa fa-codepen fa-fw'/> Codepen</a></div>
<div class='taber7'><a href='https://www.blogger.com/follow-blog.g?blogID=6092928837959420089' rel='nofollow' target='_blank' title='Bu blogu takip et'><i class='fa fa-users fa-fw'/> Bu blogu takip et</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 </head> kodunun 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">Yayın bulunmaktadır.</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='infobox'><a class='popup-link' href='#popup'>Bilgi</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