Web Dinamik

30 Mayıs 2016 Pazartesi

Yıldızlı Popüler Yazılar Eklentisi

Blogger’ın gadgetlar listesinde bulunan “Popüler Yayınlar” eklentisini çoğu blogger kullanıyor. Bu eklenti; son 1 ay, son 1 hafta veya tüm zamanların en çok okunan yazılarını gösteren faydalı bir eklenti.

Blogger’ın çoğu gadgetı gibi popüler yayınlar gadgetını da özelleştirme şansımız var. Bu yazıda paylaşacağım kodlar ile popüler yazılar eklentisine ziyaretçilerin ilgisini çekecek ve blogunuzu daha orijinal gösterecek yıldızlı oylama sistemini ekleyeceğiz.

Bu özellik en popüler yazınızı 5 yıldızlı olarak gösterirken , sırasıyla 4,5 – 4 – 3,5 – 3… yıldız diye gidiyor. Uygulamak için sırasıyla şu adımları izleyin:

1. İlk olarak şablonda <head> kodunu bulun ve bunun altına font awesome kodunu ekleyin. Eğer daha önce font awesome kodunu eklediyseniz tekrar eklemenize gerek yok.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

2. Şablonda ]]></b:skin> kodunu bulun ve üzerine şu stil kodlarını ekleyin.

.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1} .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#F29B10;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f123';opacity:.9} .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85} .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8} .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7} .PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7} .PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75} .PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7} .PopularPosts ul li:hover:before{opacity:1} .PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none} .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;} .PopularPosts .item-snippet{display:none} .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

3. 3. Son olarak Yerleşim > Gadget Ekle > Popüler Yayınlar diyerek gadgetı ekleyin ve ayarları resimde görüldüğü gibi yapın.

23 Mayıs 2016 Pazartesi

Tıklanabilir Rastgele Banner Eklentisi

Bu yazıda paylaşacağım eklentiyi düzenleyerek blogunuza eklediğinizde kenar çubuğunda 300x250px boyutlarında (ya da istediğiniz başka bir boyut) bir banner gözükecek. Fakat bu eklentinin şöyle bir özelliği var; sayfayı yenilediğinizde veya bir yazıdan başka bir yazıya geçiş yapığınızda bannerın yerinde sizin belirlediğiniz başka bir banner gözükecek.

Eklentide 5 adet banner tanımladığınızı düşünelim. Her ziyarette bu 5 banner rastgele gözükecek. Peki bu eklenti ne işinize yarayacak?

1. Öncelikle tabi ki aynı reklam alanında birden fazla reklam gösterebileceksiniz. Fiyatı düşük tutsanız bile reklam verenler bunu kabul etmeyebilir ama dost sitelerinizin veya önerdiğiniz sitelerin reklamlarını bu şekilde dönüşümlü olarak gösterebilirsiniz.

2. Blogunuzda öne çıkan yazılan eklentisi olarak da kullanabilirsiniz. Ziyaretçilerinizin mutlaka okuması gerektiğini düşündüğünüz yazılar için banner oluşturarak rastgele gözükmesini sağlayabilirsiniz.

Gelelim eklentiyi blogunuza nasıl ekleyeceğinize. Blogger kumanda panelinize giriş yaparak Yerleşim > Gadget Ekle > HTML/JavaScript Gadget diyerek aşağıdaki kodları yapıştırmanız yeterli.

<script type='text/javascript'>
var quotes=new Array()
quotes[0]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://lh3.googleusercontent.com/-Q6BYf-G4nAI/V0G_D47cpeI/AAAAAAAAL-g/-vH1cryZzAYAceGa0Y9yZW3YmKaRL_sxgCCo/s300/1.png"/></a>'
quotes[1]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://lh3.googleusercontent.com/-dsdgAiTDHrU/V0G_DvaWEuI/AAAAAAAAL-o/Ntj75HzIwQcpleneRb6iDX1WnkBJspaLQCCo/s300/2.png"/></a>'
quotes[2]='<a href=https://bloghocam.blogspot.com><img alt="Blog Hocam" height="auto" width="100%" src="https://lh3.googleusercontent.com/-9jF0WjVIDZM/V0G_D2dWtcI/AAAAAAAAL-o/RiFsDaF7R5wjfU9tldakw4cETs4f-WxFwCCo/s300/3.png"/></a>'
var whichquote=Math.floor(Math.random()*(quotes.length));
document.write(quotes[whichquote]);
</script>

Mavi yerlere resme tıklanınca açılacak sayfanın urlsini yazın.
Kırmızı yerlere banner urlsini yazın.
Yeşil yerlere bannerın alt etiketini yazın.
4. banner için eklemeniz gereken kod:

quotes[4]='<a href="#"><img alt="#" height="auto" width="100%" src="#"/></a>'

Herkese iyi bloglar…

6 Mayıs 2016 Cuma

Blogger Sidebar Abonelik Eklentisi

Blogunuzun sidebarına mail abonelerinizi ve sosyal medya takipçilerinizi arttıracak bir eklenti eklemek istiyorsanız çok beğendiğim bu yeni eklentiyi sizlere tavsiye edeceğim.

Geliştirilmeye ve kişiselleştirilmeye çok müsait olan bu eklenti ziyaretçilerinizin dikkatini çekerek özellikle FeedBurner mail abone sayınızın artmasını katkı sağlayacaktır. Eklentinin özelliklerinden kısaca bahsetmem gerekirse:

Mobil cihazlara uyumludur ve sorunsuz görüntülenmektedir.
Sadece 3 adet kod değişikliğiyle eklentinin renklerini blogunuzun tasarımıyla uyumlu hale getirebilirsiniz.
Font Awesome kullanılarak şık ve hızlı sosyal butonlar eklenmiştir.
Blogger’da son zamanlarda HTTPS’e geçişle birlikte yaşanan sorunlardan etkilenmeyecek şekilde düzenlenmiştir.

Blogger Sidebar Abonelik Eklentisi Nasıl Eklenir?

Öncelikle şablonun HTML kodlarına yukarıda bahsettiğim Font Awesome’ı eklemeniz gerekiyor. Bunun için Blogger kumanda panelinizde Şablon > HTML’yi Düzenle yolunu takip edin ve <head> kodunun altına şu kodu ekleyin:

<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css' rel='stylesheet'/>

Ekledikten sonra şablonu kaydedin ve ikinci adım için yine Blogger kumanda panelinde Yerleşim > Gadget Ekle > HTML/JavaScript Gadget yolunu takip ederek aşağıdaki kodları yapıştırın:

<style>
#sidebar-abonelik {
padding: 0;
padding-bottom: 5px;
font-family: inherit;
display: block;
margin: 0;
width: 100%;
border-radius: 10px;
border: 0;
background: #363636;
}
#sidebar-abonelik .main_tagline {
padding: 0px 0px;
line-height: 2.5em;
font-size: 24px;
margin: 0;
height: 95px !important;
overflow: hidden;
font-weight: bold;
color: #FFF;
text-align: center;
border-radius: 10px 10px 0 0;
background-color: #679EC9;
}
#sidebar-abonelik .email_icon {
display: table;
margin: -35px auto 0px;
font-size: 25px;
padding: 12px;
height: 25px;
width: 25px;
background-color: #363636;
color: #FFF;
border-radius: 50px;
border: 10px solid #FFFFFF;
line-height: 0;
}
#sidebar-abonelik p {
font-size: 14px;
color: #F9F9F9;
text-shadow: 0px -1px 0px #000;
line-height: 27px;
padding: 5px 10px 5px;
text-align: center;
width: 80%;
margin: 5px auto 20px;
border-bottom: 2px solid #6A6A6A;
border-radius: 20px;
}
#sidebar-abonelik .rssform {
padding: 0;
margin: 0 auto;
display: block;
}
#sidebar-abonelik .rssform input {
padding: 8px;
margin: 20px auto 15px;
font-size: 12px;
color: #000;
text-align: center;
display: block;
font-family: inherit;
font-weight: normal;
width: 90%;
height: 38px;
outline: none !important;
border: 1px solid #FFFFFF;
border-radius: 1px;
background-color: #FCFCFC;
box-sizing: border-box !important;
}
#sidebar-abonelik .rssform .button:hover {
background: #656E75;
}
#sidebar-abonelik .rssform .button {
background: #679EC9;
color: white!important;
border: 1px solid #FFFFFF;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
padding: 5px 2px !important;
float: none;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
#sidebar-abonelik .bottom_lock_policy {
background: url(https://lh3.googleusercontent.com/-h4tOFZoH2GU/VyxnzJrVMcI/AAAAAAAAL94/7Lzr6v77qpwveZhbMRMH4n7irV-Rw6u1gCCo/s24/Keys-icon.png) no-repeat 3% -2px;
color: #959595;
text-align: center;
font-size: 12px;
margin: 0;
padding: 1px;
line-height: 25px;
}
#sidebar-abonelik .bottom_lock_policy a {
color: #959595;
text-decoration: none !Important;
}
#sidebar-abonelik .social_profiles {
line-height: 1.2em;
display: table;
float: none;
margin: 0px auto;
text-align: center;
min-width: 157px;
padding: 5px 0px;
border: 0;
}
#sidebar-abonelik .social_profiles a:hover {
color: #FFF;
background-color: #679EC9;
border-color: #FFF;
}
#sidebar-abonelik .social_profiles a {
color: #000000;
margin: 0 5px;
text-align: center;
float: left;
display: table;
padding: 4px 5px;
background-color: #FFFFFF;
border-radius: 50px;
border: 2px solid #2D2D2D;
width: 15px;
height: 15px;
line-height: 0;
font-size: 16px;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
#sidebar-abonelik form {
margin-bottom: 10px !important;
}
</style>
<div id="sidebar-abonelik">
            <div class="main_tagline">E-Posta Aboneliği</div><div class="email_icon"><i class="fa fa-envelope"></i></div>
                 <p>Yeni yazıların ücretsiz olarak mail adresinize gelmesi için abone olun!</p>
   <div class="rssform">
            <form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=BlogHocam', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" name="email" placeholder="E-Mail adresiniz..." />
            <input type="hidden" value="BlogHocam" name="uri" />
            <input type="hidden" name="loc" value="tr_TR" />
            <input value="Abone Ol" class="button" type="submit" />
            </form>
            </div>
      <div class="bottom_lock_policy">Gizliliğinize saygı duyuyoruz</div>
   <div class="social_profiles">
   <a href="https://www.facebook.com/BlogHocam" target='_blank' rel='nofollow' title="Facebook'ta Takip Et"><i class="fa fa-facebook"></i></a>
   <a href="https://www.twitter.com/BlogHocam" target='_blank' rel='nofollow' title="Twitter'da Takip Et"><i class="fa fa-twitter"></i></a>
   <a href="https://plus.google.com/+BloghocamBlogspot" target='_blank' rel='nofollow' title="Google+'da Takip Et"><i class="fa fa-google-plus"></i></a>
   <a href="https://instagram.com" target='_blank' rel='nofollow' title="Instagram'da Takip Et"><i class="fa fa-instagram"></i></a>
   </div>
            </div>

Kaydettikten sonra eklentinin eklendiğini görecekseniz. Kodlarda değiştirmeniz gereken yerler şöyle:

Kırmızı renkle gösterdiğim yerlere kendi sosyal medya hesaplarınızın URL’lerini yazın.
Lacivert renkle gösterdiğim yerlere kendi FeedBurner ID’nizi yazın.
Mavi vurguyla gösterdiğim yerlere ise istediğiniz bir renk kodunu girin. Bu şekilde E-Posta Aboneliği başlığının arka plan rengini, Abone Ol butonunun arka plan rengini ve sosyal butonların üzerine gelindiğindeki rengi değiştirebilirsiniz.