Blogger eklentileri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
Blogger eklentileri etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

24 Ocak 2015 Cumartesi

Blogger İletişim Formunu Sabit Sayfaya Ekleme
Uzun zamandır bloguma güzel bir blogger iletişim formu eklemek istiyordum. Blogger'ın ilk zamanlarda kendine ait bir iletişim formu olmaması nedeniyle, diğer bloglarım da hep Google Docs ile oluşturduğum iletişim forumlarını kullandım. Nihayet geçen sene blogger resmi iletişim formu eklentisini yayınlandı fakat eklenti sadece sidebar'da kullanılabiliyordu.

Blogger iletişim formu eklentisinin sadece kenar çubuğunda kullanmak blog'da görüntü kirliliğine sebep olabiliyor. Açık söylemek gerekirse blogumun her yerinde bir iletişim formu görmek istemiyorum. Bu nedenle bu konumuzda blogger iletişim formunu kullanarak iletişim sayfası oluşturmayı anlatacağım.

Neden İletişim Formu Kullanmalıyım ?
Blogger sayfanıza iletişim kutusu eklemek okuyucularınızın size ulaşmasını kolaylaştıracaktır. Size ulaşmak için konu altına mail adresilerini bırakıp sizin onlara ulaşmanızı beklemek yerine, gerekli bilgileri iletişim formuna doldurup Gönder butonuna basarak kolay bir şekilde size ulaşabilir. Tabi bu sadece blog okuyucuları için değil blogger yöneticileri içinde oldukça kullanışlı bir yöntemdir.

Blogger İletişim Sayfası Oluşturma

Aşağıda ki adımları izleyerek blogger iletişim formunu kullanarak iletişim sayfası oluşturabilirsiniz. Eğer demo görmek isterseniz, kullanmış olduğum iletişim sayfasını kontrol edebilirsiniz.

Adım 1: İlk olarak sidebar'da blogger resmi iletişim formu kullanıyorsanız Blogger Yönetici Paneli > Yerleşim sekmesinden formu kaldırın.

Adım 2: Şimdi blogunuzun benzersiz blogID numarasını bulun. Blogger Yönetici Panelin'de herhangi bir sayfada iken tarayıcınızın URL çubuğunda blogID'i bulabilirsiniz. Bu blogID yeni iletişim sayfası oluşturmak için gereklidir. BlogID girmediğiniz taktir de iletişim kutusu çalışmayacaktır. Aşağıda ki ekran görüntüsünde blogID'in nasıl bulunacağını öğrenebilirsiniz. Bu numarayı bulduktan sonra bir yere kayıt edin.

blogger iletişim formu eklentisi
Adım 3: Blogger Yönetici Paneli > Sayfalar'dan Yeni Sayfa oluşturun.
Adım 3: Yeni sayfa oluşturduktan sonra HTML mod'u seçin ve aşağıda ki kodu boş alana yapıştırın. Kırmızı ile gösterdiğim kodu Adım 2'de not ettiğiniz blogID ile değiştirin.
<script>
var blogId = '3325432071104196405';

var contactFormMessageSendingMsg ='Gönderiliyor...';
var contactFormMessageSentMsg = 'Mesajınız başarılı bir şekilde gönderildi.';
var contactFormMessageNotSentMsg = 'Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyiniz..';
var contactFormEmptyMessageMsg ='Mesaj alanı boş olamaz.';
var contactFormInvalidEmailMsg = 'Lütfen geçerli e-mail adresi girin'

var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<form name='contact-form'>
<div>İsim : </div>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<div>E-posta Adresiniz: <em>**</em></div>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<div>İletiniz <em>**</em></div>
<textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='7'></textarea>
<p></p>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder' onclick="sendEmailMsg()"/>
<div style='text-align: center; max-width: 450px; width: 100%'>
<p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p>
<p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p>
</div>
</form>

Gerekli düzenlemeyi yapıp kodu yapıştırdıktan sonra Sayfa ayarları > Seçeneklere tıklayın. Okuyucu yorumları'nı engelleyin ve Oluşturma modunu Yazılan HTML'i yorumla olarak değiştirin. Aşağıda ki ekran görüntüsünde gerekli ayarları görebilirsiniz.
blogger iletişim formu eklentisi

Hepsi bu kadar arkadaşlar, gerekli ayarlamaları yaptıktan sonra iletişim sayfasını yayınlayabilirsiniz. İletişim sayfasını sitenizde yayınlamadan önce iletişim kutusunu test etmeyi unutmayın.

11 Eylül 2014 Perşembe

Blogger Sosyal Medya Butonları ve E-Posta Aboneliği Eklentisi
Günümüzde sosyal medyanın web sitesi üzerinde ki etkisi tartışılmaz hale geldi. Google'ın da bizzat önem verdiği konulardan biri sosyal medya. Bu nedenle web sitelerinde bu tarz sosyal medya eklentileri bulundurmak size oldukça avantaj sağlayabilir. Blogger sosyal medya butonları ile facebook,twitter,google+ gibi ağlarda takipçi sayınızı arttırarak sitenizi daha geniş kitlelere duyurma şansını yakalarsınız. Bu sayede kullanıcılar yayınladığınız yeni içerikleri her an yakalama şansına sahip olurlar.

Bu zamana kadar bir çok sitede sosyal medya butonları ve e-posta aboneliğini eklentilerini ayrı kodlar dahilinde görmüşsünüzdür. Bugün sizlerle paylaşacağım eklentide ise oldukça şık, sade bir görüntüsünün yanı sıra aşağıda ki fotoğrafta göreceğiniz üzere yukarıda bahsettiğim iki özelliği birden içinde barından bir eklenti.

Fotoğrafta gözükmese de eklenti'de hareketli sosyal medya butonları kullanılmıştır.

Blogger Sosyal Medya ve E-mail Aboneliği Eklentisi

Blogger Yönetici Paneline giriş yapın.

Yerleşim  > Gadget ekleye tıklayın.

Açılan pencerede HTML/JavaScript'e tıklayın.

Aşağıda ki kodu alıp açılan sayfaya yapıştırın ve işlem tamamdır.


<div class='widget-content'>
<style type='text/css'>#sidebar-subscribe-box{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8cBGDrBctLAGAHVcH64AfPUb6FxPVC0pwK3kcpuV8-VaBRHNBB6zGsao9666C6tB5F88id0ulG87aJPSZys1Y7EkxIjClHWjZrJTs_KI7bi5U1uQX-4AIZUA5edqzM84vdSwVc1DAIH8Y/s1600/colored-strip.png) repeat scroll 0 0 transparent;border:1px solid #aaa;border-radius:3px;padding:3px 0}.sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5dKofZLnpAAc_C4ofKUk6S5io-Q0OgxQean4sS0IkaoUqBSaiBiWVyR4YRUXotbMZSXi8Z420Bndd8wAm0QJ-JwIHkrxAsuY83XvGPqCjYhR2dgEJ6TSuB2TdllsJFzk8oV0JfoPRRzHm/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}.sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2wLs2FC7wmCTR_hxexMhceNYdviUvuPS9gvrGpWRX3kRCrT6Jxkb_ALyL9eMxXiucIqMNo2NjiqFet0_n9APLsdpYSQZSOU3hSTNVLkrxGGeg3kwn1n1zCdef-fDN0531fV8jAGTS1fyy/s1600/sprites.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}.sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:95%}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}.sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}#footer-section{background:#f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxPX3NgSOXdXiG7zz58z6SANAIhZt_cvQ00qz0IRHVL0yv7gdwmoEkLmRbGcLxYDOCklAXyarVNCMIdT3JloRMN0oWmmc2NPh56BV5r84XQHntjNKVfxzqPYcGGlQnnhKeTcelYr-yulhI/s0/bg-pattern.png) repeat top left;border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}p#rb_socialicons img { /* Yeni Metro Sosyal Butonlar Eklentisi  */    -moz-transition: all 0.8s ease-in-out;    -webkit-transition: all 0.8s ease-in-out;    -o-transition: all 0.8s ease-in-out;    -ms-transition: all 0.8s ease-in-out;    transition: all 0.8s ease-in-out;}p#rb_socialicons img:hover {    -moz-transform: rotate(360deg);    -webkit-transform: rotate(360deg);    -o-transform: rotate(360deg);    -ms-transform: rotate(360deg);    transform: rotate(360deg);}/* Yeni MEtro Sosyal Butonlar Eklentisi  */</style><div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><div class="sidebar-subscribe-box-form">    <center><p id="rb_socialicons"><a href="http://feeds.feedburner.com/blogkaynagi" target='_blank'> <img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi00gFSvUSUZ4L6_38KRDcMpIHZG8Y6XY7te7xt-DE74eF36mB9iHEN4hR8mkvmkTyGgXUe5MycOnOMiJeHc_QE4g6JtZ9enR8NhuR4qvxj1yzAa0Ve87q0I-60ZytuE1jFKyUa-ubNgQMU/s1600/rss-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Elbme3OUc4Fl5N83vg6Gz83rLoAUvhU1XRUq1NZOGY7Mx2raDXswPNmBRPpPEg43_5eSYvpYrNXC7G4vcbsZ7JWBK5SjDzGrCLnpwnfSjHdTzP6ZJI4hIEjM7b0aaxQaWuXGuj5x2TK9/s1600/rss.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi00gFSvUSUZ4L6_38KRDcMpIHZG8Y6XY7te7xt-DE74eF36mB9iHEN4hR8mkvmkTyGgXUe5MycOnOMiJeHc_QE4g6JtZ9enR8NhuR4qvxj1yzAa0Ve87q0I-60ZytuE1jFKyUa-ubNgQMU/s1600/rss-inactive.png" /></a><a href="https://www.facebook.com/" rel='nofollow' target='_blank'><img alt="Click Me" hieght="100" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJ5vzmOZgMDc-v_9WP7zlKqueDdAB7kDYO14V6oWmhDnRQMxMm-at2-9fG5aFNKZwXSawpnunuE38EqFsooVr1vYTYUh7ySXFvnAFdnsKnkcCGkg3oE_5MAf1bBYhL0E-qt827Cvl77pE/s1600/facebook-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJDwjoTHuI_kza67xHygvqtregCD5iVSPbSBsRUnzR01s7zhUDrEDn_59IH8PlUvFAljCux880sWfrNO2xtkqHRjnIq3ZsjehN-fWJra4anIttR5Vj9wqgaEtpdusrVKM1jASonazZ-n9l/s1600/facebook.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOJ5vzmOZgMDc-v_9WP7zlKqueDdAB7kDYO14V6oWmhDnRQMxMm-at2-9fG5aFNKZwXSawpnunuE38EqFsooVr1vYTYUh7ySXFvnAFdnsKnkcCGkg3oE_5MAf1bBYhL0E-qt827Cvl77pE/s1600/facebook-inactive.png" /></a><a href="https://twitter.com/blogkaynagi" rel='nofollow' target='_blank'><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLkWMOcXOnOX8cCUQocTufxgtvK0oXKwJH19ImwCkOkWQ2491XVrud0WoojR8ZBSyqwl3FXddy3152tjNfiZ4Kwq4gdvfH64fpUenXetB-wes5BI3HU1REdD_mBBChByabb1imN1cVPKwH/s1600/twitter-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgrTrKnZ_yg_9XHqefKaIj_jqklVLITvrfhITpnJibxwq5OAT4agFd36BiGIQM0dNQNmkeEBofkQNfJmynBStaWjLOZ3o6fC7zNVpdGu2BKjY5zHGPIBZlTOdAouX2M93U3z46p4VeAnOS/s1600/twitter.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLkWMOcXOnOX8cCUQocTufxgtvK0oXKwJH19ImwCkOkWQ2491XVrud0WoojR8ZBSyqwl3FXddy3152tjNfiZ4Kwq4gdvfH64fpUenXetB-wes5BI3HU1REdD_mBBChByabb1imN1cVPKwH/s1600/twitter-inactive.png" /></a><a href="https://plus.google.com/u/0/105104679481549727437/posts" target='_blank' ><img alt="Click Me" hieght="160" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyBrbXJkjqWq8vx_8S8SeNmIcIHAIS5kCfKmzLc5ejZDNlToWj6Mj_HEQuCOT6PGo8Dbh_ezrerj4oXkQwbR0tVEySOqIudzIxtWpsbCCaI6d4GBfj3JRQ_el-a3LTxKe_UPz7dIKPXJX8/s1600/google-plus-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipDKrRYgIO2MfrHz3d0emPgKGSf8Azc_3a19U1JA6d9mmlO8ZhGV4HffDwcxlWKNBDvZORPmXXPwz9kaWA36G5fVWFjnYhVp4MPxmF61DPv0lkhm3KUPuyKIB-pJSiHQRSPRPALdv-iosn/s1600/google-plus.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyBrbXJkjqWq8vx_8S8SeNmIcIHAIS5kCfKmzLc5ejZDNlToWj6Mj_HEQuCOT6PGo8Dbh_ezrerj4oXkQwbR0tVEySOqIudzIxtWpsbCCaI6d4GBfj3JRQ_el-a3LTxKe_UPz7dIKPXJX8/s1600/google-plus-inactive.png" /></a><a href="http://pinterest.com/Bilgicinfo/" rel='nofollow' target='_blank'><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwgIzipJJPCQChPVDCj7i4Jr2_xHQFgiqh0cUeUFq9qCc1ihrNJzs6aXRAlgZLSdxeXo6k6_jewzuYx1JjT6udrWR6b7Z1FOgrRznQDBVBtm-HC97hi0I6GDfYItd8uzWRsipnHdfgwkS1/s1600/pinterest-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh8hALM94ZQszW4DQJ-vS9qEKnql-PFthc5V6YyDv4OYL2Y6PO035joZDeq0bsA-DL-KHqzdDkpA5Sq1UkU0bgF5qWqqGjtMqMO_LRj1oAh8AnZv2DUbiIf1Z89RTfLwkF1lqls7XvZEhS/s1600/pinterest.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwgIzipJJPCQChPVDCj7i4Jr2_xHQFgiqh0cUeUFq9qCc1ihrNJzs6aXRAlgZLSdxeXo6k6_jewzuYx1JjT6udrWR6b7Z1FOgrRznQDBVBtm-HC97hi0I6GDfYItd8uzWRsipnHdfgwkS1/s1600/pinterest-inactive.png" /></a><a href="http://blogkaynagi.blogspot.com/p/iletisim.html"><img alt="Click Me" onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1PxfBKBSjPPmxD7n9fqDiHcpQEyOCFmva3lKRqHaEQiOsZUfAP0vI7CDBWUp1BkzFPbd7WlDgh34D-hUyDm47rximiOPP871iCNe16O5HfYfoJfjLOFXWdwW38fp7TC80lyJhtSPD-0P9/s1600/email-inactive.png'" onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtORHRn1_NlKa5Xxsa5cx43nz7Zu9RIq5n-RcUHB6XsssjI5vBc4ur3E3mMozcSil2qSnw9wWd0d1IDj0hsXmwHZWhboMq_dvwdDoh4UwBN86CvLDmcHEQSRNl6k3QQjUOHIlz2HAQZ05f/s1600/email-shadow.png'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1PxfBKBSjPPmxD7n9fqDiHcpQEyOCFmva3lKRqHaEQiOsZUfAP0vI7CDBWUp1BkzFPbd7WlDgh34D-hUyDm47rximiOPP871iCNe16O5HfYfoJfjLOFXWdwW38fp7TC80lyJhtSPD-0P9/s1600/email-inactive.png" /> </a></p></center>  <form action="http://feedburner.google.com/fb/a/mailverify?uri=blogkaynagi" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogkaynagi', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="blogspot/bVOOCE" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="E-posta aboneliği.."/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Gönder !" /></form></div></div></div><style></style>
</div>

Dikkat:!!  Eklentide değiştirmeniz gereken yerleri mavi ile gösterdim. Eklentiyi kurmadan önce her birini tek tek değiştirmeyi unutmayın !

21 Ağustos 2014 Perşembe

Sitene Angry Birds Fare İmleci Ekle
Web sitenizde bulunan normal fare imlecin den sıkıldıysanız, angry birds fare imleçleri tam size göre. Sitesine biraz renk katmak, eğlence katmak isteyen webmasterlar için angry birds fare işaretlerini sizlerle paylaşıyorum. Blogger sistemine fare imleci nasıl eklenir konusunda sıkıntı yaşayanlar bu konudan gerekli bilgileri edinebilirler. Ayrıca bu kod bütün blog sistemlerinde çalışmaktadır.

Sizlerle tam olarak bir birinden güzel 5 adet angry birds fare işareti paylaşıyorum. Fare imleçlerinin demosunu istediğiniz angry bird karakterinin üstüne gelerek test edebilirsiniz.  İşte karşınızda popüler angry birds fare imleçleri.
angry birds
Blogger Angry Birds Fare İmleci Ekleme

-Blogger Yönetici Paneline giriş yapın.
-Yerleşim > Gadget ekleye tıklayın.
-Açılan pencerede HTML/JavaScript'e tıklayın ve beğendiğiniz fare imlecini kopyalayıp yapıştırın.
-Kaydet butonuna basın. İşlem tamam!

  <style>body, a, a:hover {cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg5pJ-fVeX65WOIqg-UhiyCOHlPafwz5eHUM2ljaBJ8aDqCfXuPgzKIjEHxdglltpOWJPxxMelGqx_FjkhQGO4tzG3uzxiO92epFsBW_gY_4VHT9Ef3fVO98Rn5H_nN1qD7nutw1xQ04Df/s1600/angry_birds_pig.png"), auto !important;}</style>


  <style>body, a, a:hover {cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnoOdTfpQhqR8Nv1MB3ga_wtw2OdOLyKuJpLKOzVmu9obd-4zM22TtG8-GecCw3RFhCSvU6UI2-duJ0h6TOGHNMlIT-bTmKbM5vsM7EUwwgBTywrAMeBGyWDSUijkJR8dFrxRirvrXgMNP/s1600/green_angry_bird.png"), auto !important;}</style>


  <style>body, a, a:hover {cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPB_ly5OlN1KbDWcXJQrlAENbBs996_6Np7E8f-juLFyIJv3GwGojeWdW3DbGklTuD9NApDOYiQb791PqOzLoHhWLugYyKKnsu2oW_LJp14WUAPF2Ap7a7t5dnG0PutGbHwRiapr-q5EYs/s1600/red_angry_bird.png"), auto !important;}</style>


  <style>body, a, a:hover {cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEyVdXZCpFeIfMrpivgGnTjMo-GgwM-7Xnez-VoHcEhdTqsm7jPTsIT3QyPow3PN5o2rnWv4s5aM0CbrMylA-s-0I5_GYxZgs65bvzjdwFS2IxBTzEBs64she8cqJ0J2cLJKH7s6JA9x-O/s1600/white_angry_bird.png"), auto !important;}</style>


  <style>body, a, a:hover {cursor: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggF3gLZF9mAt8WzxkD_ZmYjeEtOOMEFqXlT9HegEDd7uiZDgPRT1cF01Z5jXynNpr7EfgdLqL1j35cNmukO8ppDdlR08ikomqXmQ5ebBODQwBKMLGlIr5QYY35FiskgL8V3qk9W-66TwEI/s1600/yellow_angry_bird.png"), auto !important;}</style>

19 Ağustos 2014 Salı

Blogger Sayfa Numaralandırma Eklentisi
Blogger'da ana sayfada ve sayfa başına gösterilecek konu sayısı Ayarlar > Yayınlar ve Yorumlar > En fazla şu kadar kayıt göster seçeneğinden ayarlanabiliyor. Fakat her ne kadar bu şekilde sayfa başına gösterilecek kayıtlar ayarlansa da sayfa navigasyonu arşivlere göre Eski Kayıtlar ve Yeni Kayıtlar olmak üzere ikiye ayrılıyor. Blogger'da sayfa numaralandırma el ile kod eklenmediği sürece otomatik olarak ayarlanamıyor. Bu konumuzda sizlerle blogunuza sayfa numaralandırma eklentisi nasıl eklenir resimli bir şekilde anlatacağım.
blogger sayfa numaralandırma eklentisi

Blogger Sayfa Numaralandırma - Page Navigation Eklentisi 

Tam olarak 7 adet birbirinden farklı stillere sahip blogger sayfa numaralandırma kodlarından öncelikle bir stil seçin. Stil seçtikten sonra:

Adım 1: Blogger Yönetici > Şablon > HTML'yi düzenle butonuna tıklayın.
Adım 2: Blogger şablon kodlarının bulunduğu alana tıklayıp CTRL + F 'e basıp Blogger kod arama butonunu açın.
Adım 3:  ]]></b:skin> kodunu aratın ve hemen üstüne aşağıdan seçmiş olduğunuz blogger sayfa numaralandırma stillerinden birini yapıştırın.

  • Stil 1
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
 #blog-pager .pages{border:none;}

blogger sayfa numaralandırma eklentisi
  •  Stil 2
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}

blogger sayfa numaralandırma eklentisi

  • Stil 3
 #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;}

blogger sayfa numaralandırma eklentisi



  • Stil 4

  #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

blogger sayfa numaralandırma eklentisi

  • Stil 5
 #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

blogger sayfa numaralandırma eklentisi

  • Stil 6
  #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

blogger sayfa numaralandırma eklentisi

  • Stil 7
  #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
 .showpageOf{display:none!important}
#blog-pager .pages{border:none;}

blogger sayfa numaralandırma eklentisi

Page navigation stil kodlarından birini şablonlara ekledikten sonra sıra geldi gerekli Script kodlarını eklemeye.

Adım 4: </body> kodunu aratın.
Adım 5: Aşağıda ki scripti </body> 'nin üstüne yapıştırın

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
  /*<![CDATA[*/
    var perPage=5;
    var numPages=6;
    var firstText ='İlk Sayfa';
    var lastText ='Son Sayfa';
    var prevText ='« Önceki';
    var nextText ='Sonraki »';
    var urlactivepage=location.href;
    var home_page="/";
  /*]]>*/
</script>
  <script src="https://blogkaynagi-sayfa-numaralandirma.googlecode.com/svn/blogkaynagi-numaraland%C4%B1rma.js"/>
</b:if>
</b:if>

Eklenti Ayarları 
Eklentiyi blogunuza ekledikten sonra isterseniz Mavi ile renklendirilmiş alanları değiştirebilirsiniz.
    var perPage=5;  -Sayfa başına gösterilecek konu sayısı
    var numPages=6
    var firstText ='İlk Sayfa';
    var lastText ='Son Sayfa';
    var prevText ='« Önceki';
    var nextText ='Sonraki »';


  • var perPage=5; Sayfa başına gösterilecek konu sayısı. Bu ayar ana sayfada gösterilecek kayıt sayısı ile aynı olmalıdır. Ayarlar > Yayınlar ve Yorumlar > En fazla şu kadar kayıt göster seçeneğinin den ana sayfada gösterilecek kayıtları ayarlayabilirsiniz.
  • var numPages=6; Sayfa numaralandırma da gösterilecek sayfa sayısı.
Adım 6: Şablonu Kaydet butonuna tıklayıp eklentinin keyfini çıkarabilirsiniz!

23 Mayıs 2014 Cuma

Blogger Renkli Abone Ol Eklentisi
Renkli Abone ol ve Sosyal Ağ Eklentisi

Blogger'da abone ol eklentisi, blogunuza gelen ziyaretçiler için e-posta abone formu içerir ve blogunuza yeni gelen güncellemeleri e-mail aboneliği üzerinden hızlı ve kolay erişebilmesini sağlar. İnsanlar bloglara kaliteli ve konu ile alakalı özgün, farklı içerikler için gelirler. Eğer kaliteli, özgün içerik yazıyorsanız e-mail aboneliği yaptıran kullanıcı artacak ve blogunuzu daha kısa sürede başarıya ulaştıracaktır.

blogger abone ol butonu
Blogger Abone Ol Butonu Ekleme
Blogger abone ol eklentisi ve sosyal paylaşım butonları yan tarafta ki resimde gördüğünüz gibi oldukça renkli blogger eklentisidir. Gelelim Siteye eklemeye;

Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz.

Aşağıda ki kodu alıp açılan sayfaya yapıştırın ve işlem tamamdır.

<style>.btsubscribe1 {padding: 8px;background-color:#fa6121;background-position:center;background-size:100%;background-repeat:no-repeat;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;}
.btsubscribe2 {padding: 8px;padding-top:0px;background-color:#ffb739;background-position:center;background-size:100%;background-repeat:no-repeat;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out;text-align:center;}
.buttonSubHomepage2  {  height:24px;   width:80px;   border:solid;   border-color:white;   font-family:arial black;   font-size:14px;    padding-bottom:21px;   color:white;   background-color:#ffb739;   -webkit-border-top-left-radius: 0px;                 -webkit-border-top-right-radius: 0px;                 -webkit-border-bottom-right-radius: 25px;                 -webkit-border-bottom-left-radius: 25px;
                 -moz-border-radius-topleft: 0px;                 -moz-border-radius-topright: 0px;                 -moz-border-radius-bottomright: 25px;                 -moz-border-radius-bottomleft: 25px;
                 border-top-left-radius: 0px;                 border-top-right-radius: 0px;                 border-bottom-right-radius: 25px;                 border-bottom-left-radius: 25px;  }    .buttonSubHomepage2:hover  {   background-color:#EA9500;  }</style><link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /><div class='btsubscribe1' align="center"><div style='color: #FFFFFF; font-weight: bold; font: 22px Oswald; margin: 0px 0px 10px 15px;'>E-posta Aboneliği</div><div style='color: #FFFFFF; font-weight: bold; font: 16px Calibri, cursive; margin: 0px 0px 10px 15px;'>Blog Kaynagin'da yayınlancak yeni yazılar E-posta adresine gelsin.</div><div style='margin: 10px 0 0 6px;'><!--Subscription Box--><form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Blogkaynagi&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true'style='margin: 0pt;' target='popupwindow'><input  name='uri' type='hidden' value='BlogKaynagi' /><input name='loc' type='hidden' value='en_US' /><input style="height:24px;width:200px;border:solid;border:hidden;border-radius:5px;font-size:12px;" class='btmailbox' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;E-mail Adresiniz....&quot;;}'onfocus='if (this.value == &quot;E-mail Adresiniz...&quot;) {this.value = &quot;&quot;}'type='text' value='E-mail Adresiniz...' /><br/><input class="buttonSubHomepage2" alt='' title='' type='submit' value='Abone Ol'/></form></div></div><div class="btsubscribe2"><div style='color: #FFFFFF; font-weight: bold; font: 22px Oswald; margin: 0px 0px 10px 15px;'>Sosyal Ağlar</div><div style=''><!--Facebook URL--><a href='http://www.facebook.com/' target='_blank' title='Faceebook Beğen'><img src='http://3.bp.blogspot.com/-ChHaXU5VfIE/UJkIg5tptTI/AAAAAAAABEg/kzXjQ2QxEPo/s1600/facebook.png' alt='facebook'/></a><!--Twitter URL--><a href='http://twitter.com/' rel='nofollow' target='_blank'title='Takip et'><img src='http://3.bp.blogspot.com/-aG-POFOiBHc/UJkIkayVTGI/AAAAAAAABE4/hhun4Hjaudw/s1600/twitter.png' alt='twitter'/></a><!--Google+ URL--><a rel="publisher" href='https://plus.google.com/' target='_blank'title='Follow us on Google+'><img src='http://2.bp.blogspot.com/-gxpckVUYzWI/UJkIh5kHQ5I/AAAAAAAABEo/IlR9Bt-FVBE/s1600/googleplus.png' alt='gplus'/></a><!--LinkedIn--><a href='http://linkedin.com/' rel='nofollow' target='_blank'title='Follow us on LinkedIn'><img src='http://1.bp.blogspot.com/-c7m7fLXHewI/UJPaWsVTZ6I/AAAAAAAAA-M/uvdMMglb8fE/s1600/linkedin-circle-2.png' alt='linkedin'/></a><!--RSS URL--><a href='http://feeds.feedburner.com/' rel='nofollow' target='_blank'title='RSS Abone Ol'><img src='http://4.bp.blogspot.com/-aN0dAN4mIno/UJkIje-dmSI/AAAAAAAABEw/gyK0zwpvjdE/s1600/rss.png' alt='rss'/></a><br/></div></div>

Eklenti Düzenleme

Eklentide düzeltmeniz gereken yerler MAVİ ile gösterilmiştir. İsterseniz kodun içinden dialogları da değiştirebilirsiniz. Gerekli düzenlemeleri yaptıktan sonra eklenti kullanıma hazır olacaktır.

29 Ocak 2014 Çarşamba

Blogger Mükemmel Sosyal Paylaşım Eklentisi
Blogunuza sosyal paylaşım butonları arıyorsanız, bu kod tam size göre! Blogger sitenizde görsel olarak aşırı dikkat çeken bu sosyal paylaşım eklentisi ile blogunuza uğrayan ziyaretçilere yazılarınızı sosyal paylaşım sitelerinde paylaşmasını sağlayabilirsiniz. Sosyal paylaşım butonları sayesinde web sitenize gelen ziyaretçi sayısını arttırabilirsiniz.

Blogger Sosyal Paylaşım Butonları

Sosyal paylaşım butonları yan tarafta ki resimde gördüğünüz gibi oldukça şık bir blogger eklentisidir. Gelelim Siteye eklemeye;

Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz.

Aşağıda ki kodu alıp açılan sayfaya yapıştırın ve işlem tamamdır.
Kod:
<!--http://blogkaynagi.blogspot.com Blogger Sosyal Paylaşım Eklentisi Başlangıç-->
<div style="background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm_mj55Uv9adbsrVTHveq2c-iHYKYt_lwbveTtj9Cn-Z93m070MDXhMd48hJmzvhxq4Vpg1J7qTdW47XbhFjaBPOFUBdZJ4FM3H54jXkaTHYqQEQY-5ckFZbdKGbW_c2_rzaM1poFiXvNd/s1600/blogkaynagi+sosyal+eklenti.png) no-repeat; border: 1px solid #4891c1; box-shadow: 0px 0px 4px #888888; height: 250px; overflow: hidden !important; position: relative; width: 300px;">
<div style="left: 215px; position: absolute; top: 32px;">
<g:plusone annotation="none"></g:plusone></div>
<div style="left: 228px; overflow: hidden; position: absolute; top: 112px; width: 60px;">
<div class="fb-like" data-font="arial" data-layout="button_count" data-send="false" data-show-faces="false" data-width="150">
</div>
<div id="fb-root">
</div>
</div>
<script type="text/javascript">
<!-- http://blogkaynagi.blogspot.com Blogger Sosyal Paylaşım Eklentisi Bitiş -->
document.write(unescape('%3C%64%69%76%20%73%74%79%6C%65%3D%22%6C%65%66%74%3A%20%31%33%30%70%78%3B%20%70%6F%73%69%74%69%6F%6E%3A%20%61%62%73%6F%6C%75%74%65%3B%20%74%6F%70%3A%20%31%37%39%70%78%3B%22%3E%0A%3C%61%20%63%6C%61%73%73%3D%22%74%77%69%74%74%65%72%2D%73%68%61%72%65%2D%62%75%74%74%6F%6E%22%20%64%61%74%61%2D%63%6F%75%6E%74%3D%22%6E%6F%6E%65%22%20%64%61%74%61%2D%6C%61%6E%67%3D%22%65%6E%22%20%64%61%74%61%2D%72%65%6C%61%74%65%64%3D%22%62%6C%6F%67%6B%61%79%6E%61%67%69%22%20%64%61%74%61%2D%76%69%61%3D%22%42%6C%6F%67%6B%61%79%6E%61%67%69%22%20%68%72%65%66%3D%22%68%74%74%70%73%3A%2F%2F%74%77%69%74%74%65%72%2E%63%6F%6D%2F%73%68%61%72%65%22%3E%54%77%65%65%74%3C%2F%61%3E%0A%3C%73%63%72%69%70%74%3E%21%66%75%6E%63%74%69%6F%6E%28%64%2C%73%2C%69%64%29%7B%76%61%72%20%6A%73%2C%66%6A%73%3D%64%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%73%29%5B%30%5D%3B%69%66%28%21%64%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%29%7B%6A%73%3D%64%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%73%29%3B%6A%73%2E%69%64%3D%69%64%3B%6A%73%2E%73%72%63%3D%22%2F%2F%70%6C%61%74%66%6F%72%6D%2E%74%77%69%74%74%65%72%2E%63%6F%6D%2F%77%69%64%67%65%74%73%2E%6A%73%22%3B%66%6A%73%2E%70%61%72%65%6E%74%4E%6F%64%65%2E%69%6E%73%65%72%74%42%65%66%6F%72%65%28%6A%73%2C%66%6A%73%29%3B%7D%7D%28%64%6F%63%75%6D%65%6E%74%2C%22%73%63%72%69%70%74%22%2C%22%74%77%69%74%74%65%72%2D%77%6A%73%22%29%3B%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%63%72%69%70%74%3E%28%66%75%6E%63%74%69%6F%6E%28%64%2C%73%2C%69%64%29%7B%76%61%72%20%6A%73%2C%66%6A%73%3D%64%2E%67%65%74%45%6C%65%6D%65%6E%74%73%42%79%54%61%67%4E%61%6D%65%28%73%29%5B%30%5D%3B%69%66%28%64%2E%67%65%74%45%6C%65%6D%65%6E%74%42%79%49%64%28%69%64%29%29%72%65%74%75%72%6E%3B%6A%73%3D%64%2E%63%72%65%61%74%65%45%6C%65%6D%65%6E%74%28%73%29%3B%6A%73%2E%69%64%3D%69%64%3B%6A%73%2E%73%72%63%3D%22%2F%2F%63%6F%6E%6E%65%63%74%2E%66%61%63%65%62%6F%6F%6B%2E%6E%65%74%2F%65%6E%5F%75%73%2F%61%6C%6C%2E%6A%73%23%78%66%62%6D%6C%3D%31%26%61%70%70%49%64%3D%33%35%38%31%36%35%33%39%37%36%31%34%31%39%37%22%3B%66%6A%73%2E%70%61%72%65%6E%74%4E%6F%64%65%2E%69%6E%73%65%72%74%42%65%66%6F%72%65%28%6A%73%2C%66%6A%73%29%7D%28%64%6F%63%75%6D%65%6E%74%2C%27%73%63%72%69%70%74%27%2C%27%66%61%63%65%62%6F%6F%6B%2D%6A%73%73%64%6B%27%29%29%3B%3C%2F%73%63%72%69%70%74%3E%0A%3C%73%74%79%6C%65%3E%2E%67%65%62%65%70%64%3A%68%6F%76%65%72%7B%72%69%67%68%74%3A%30%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%7D%3C%2F%73%74%79%6C%65%3E%0A%0A%3C%21%2D%2D%68%74%74%70%3A%2F%2F%62%6C%6F%67%6B%61%79%6E%61%67%69%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2D%2D%3E%0A%3C%73%63%72%69%70%74%20%6C%61%6E%67%75%61%67%65%3D%22%4A%61%76%61%73%63%72%69%70%74%22%3E%0A%3C%2F%73%63%72%69%70%74%3E%3C%2F%64%69%76%3E%0A%0A%0A%0A%3C%61%20%73%74%79%6C%65%3D%22%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%62%6F%74%74%6F%6D%3A%30%70%78%3B%72%69%67%68%74%3A%2D%31%30%30%70%78%3B%64%69%73%70%6C%61%79%3A%62%6C%6F%63%6B%3B%6D%61%72%67%69%6E%3A%30%70%78%3B%70%61%64%64%69%6E%67%3A%30%70%78%3B%62%6F%72%64%65%72%3A%6E%6F%6E%65%3B%68%65%69%67%68%74%3A%31%38%70%78%3B%77%69%64%74%68%3A%31%32%35%70%78%3B%62%61%63%6B%67%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%75%72%6C%28%27%68%74%74%70%3A%2F%2F%34%2E%62%70%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%2D%70%48%38%64%74%77%67%31%66%37%67%2F%55%75%6A%50%77%44%73%64%47%72%49%2F%41%41%41%41%41%41%41%41%41%45%41%2F%68%31%52%6A%32%6C%45%36%72%4A%38%2F%73%31%36%30%30%2F%62%6C%6F%67%6B%61%79%6E%61%67%69%2E%70%6E%67%27%29%20%6E%6F%2D%72%65%70%65%61%74%3B%6F%70%61%63%69%74%79%3A%30%2E%35%3B%66%69%6C%74%65%72%3A%61%6C%70%68%61%28%6F%70%61%63%69%74%79%3D%35%30%29%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%62%6C%6F%67%6B%61%79%6E%61%67%69%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2E%74%72%2F%32%30%31%34%2F%30%31%2F%62%6C%6F%67%67%65%72%2D%73%6F%73%79%61%6C%2D%70%61%79%6C%61%73%69%6D%2D%65%6B%6C%65%6E%74%69%73%69%2E%68%74%6D%6C%22%20%63%6C%61%73%73%3D%22%67%65%62%65%70%64%22%3E%3C%2F%61%3E'));
</script></div>

23 Kasım 2013 Cumartesi

Blogger Yuvarlanan Duyuru Eklentisi
Merhabalar, bugün çok şık bir eklentiyle daha karşınızdayım. Blogger yuvarlanan duyuru eklentisi css ile yazılmış olup blogger sayfanızın sol tarafında sabit durmaktadır. Fare ile üstüne gelindiğinde, kare olan duyuru eklentisi yuvarlanıp yazmış olduğunuz duyuruyu gösteriyor. Fareyi üstünden çektiğinizde ise tekrar eski haline geri dönüyor. Canlı görünüm olarak; şuan yan tarafta bulunan duyuru eklentisine bakabilirsiniz.

blogger eklentileri

Blogger Yuvarlanan duyuru eklentisi ekleme

Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz ve aşağıda ki kodu açılan sayfaya yapışırıyoruz.

Eklentideki arka plan rengini değiştirmek için kodun içerisinde bulunan  background-color:#e84343 kodunu bulup kırmızı olan renk kodunu istediğiniz bir renk koduyla değiştirebilirsiniz.




<div class="yuvarlanan-duyuru eklentisi"><div class="divix">
<div style="position:absolute;top:0px;left:0px;font-family:Helvetica, Arial, sans-serif;font-weight:normal;
font-size:13px;color:#fff;background-color:#e84343;" class="duyuristan">
<span style="display:block;margin-left:40px;">
<b>Hoşgeldin!</b>
<br/>
Yayınlarımıza Yorum Yapmayı Unutmayın.! İyi Bloglar.!
<br/>
BlogKaynagi.blogspot.com


</span>
</div>
<style>.divix{height:95px;position:absolute;top:0px;left:0px;min-width:86px;}.duyurucaz{text-decoration:none !important;text-align:center;line-height:60px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#e84343;border:2px solid #ff9c9c;}</style>
<div class="duyurucaz">DUYURU</div></div></div><style>.duyurucaz{text-decoration:none !important;text-align:center;line-height:60px;font-family:Helvetica, Arial, sans-serif;font-weight:bold;font-size:17px;color:#fff;position:absolute;top:0px;left:-3px;display:inline-block;height:80px;width:80px;background:#e84343;}.duyurucaz{-webkit-transition: all 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: all 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);cursor:pointer;}.duyuristan{padding-right:30px;height:80px;text-decoration:none !important;padding-top:4px;overflow:hidden;background:#fff;border:none;border-color:#ff9c9c;border-width:0px;width:0px;-webkit-transition: width 1s cubic-bezier(0.6, -0.83, 0.805, 1.425);-moz-transition: width 1s cubic-bezier(0.7, -0.8, 0.805, 1.3);-o-transition: width 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);transition: all 1s cubic-bezier(0.7, -0.83, 0.805, 1.3);}.divix:hover .duyurucaz{height:80px;margin-left:300px;transform:rotate(360deg);-ms-transform:rotate(360deg); /* IE 9 */-moz-transform:rotate(360deg); /* Firefox */-webkit-transform:rotate(360deg); /* Safari and Chrome */-o-transform:rotate(360deg); /* Opera */-webkit-border-radius: 40px;border-radius: 40px;}.divix:hover .duyuristan{background-color:#e84343;border:1px solid #ff9c9c;width:298px;height:78px;}div.yuvarlanan-duyuru{position:fixed;z-index:999999;}div.eklentisi{top:140px;left:0px;}</style><style type="text/css">div.yuvarlanan-duyuru{_position:absolute;}div.eklentisi{_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight - 52+"px") );}
</style>

14 Kasım 2013 Perşembe

Blogger Renkli Popüler Yazılar Eklentisi
Merhaba arkadaşlar, İnternet problemi nedeniyle uzun bir süredir paylaşım yapamıyordum. Uzun sürenin acısını sizlere çok şık eklentiler paylaşarak kapatmayı düşünüyorum. İlk paylaşımım yan tarafta resimde gördüğünüz üzere oldukça şık  ve gösterişli herhangi yazı taşması gibi bir problemi olmayan blogger renkli popüler yazılar eklentisi.


Blogger Renkli Popüler Yazılar Eklentisi Ekleme
blogger renkli popüler yazılar
Blogger Yönetici Paneline giriş yapıyoruz.

Şablon > HTML'yi Düzenle sayfasına geliyoruz.

Temamızdan aşağıda ki kodu buluyoruz.

]]></b:skin>

Bu kodun hemen üstüne aşağıda bulunan kodları yapıştırıp, Kaydet'e tıklıyoruz ve işlem tamamdır.

Güle güle kullanın :)






/* Blogger Popüler Yazılar Eklentisi - http://blogkaynagi.blogspot.com*/ .PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img { margin:0 0; padding:0 0; list-style:none; border:none; background:none; outline:none; } .PopularPosts ul { margin:.5em 0; list-style:none; font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif; color:black; counter-reset:num; } .PopularPosts ul li img { display:block; margin:0 .5em 0 0; width:50px; height:50px; float:left; } .PopularPosts ul li { background-color:#eee; margin:0 10% .4em 0; padding:.5em 1.5em .5em .5em; counter-increment:num; position:relative; } .PopularPosts ul li:before, .PopularPosts ul li .item-title a { font-weight:bold; font-size:120%; color:inherit; text-decoration:none; } .PopularPosts ul li:before { content:counter(num); display:block; position:absolute; background-color:black; color:white; width:30px; height:30px; line-height:30px; text-align:center; top:50%; right:-10px; margin-top:-15px; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; } /* Renk düzenle & level */ .PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%} .PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%} .PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%} .PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%} .PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%} .PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%} .PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%} .PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%} .PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%} .PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

6 Ağustos 2013 Salı

Blogger 125x125 Reklam Alanı Oluşturma
Blogger reklam kodu




Kaliteli, özgün içerik paylaşan ve google sıralamasında yükseklerde olan blogger sahipleri, sitelerine çeşitli şekilde reklam alıp sitelerinden para kazanmayı hedefliyor. Bugün sizlere blogger sitenizde sidebar alanına 125x125 reklam alanı eklemeyi paylaşacağım, kurulum oldukça basit.






Blogger 125x125 Reklam Alanı Ekleme

Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz ve aşağıda ki kodu açılan sayfaya yapışırıyoruz.


<center><table border="1"><tr><td width="125" height="125" align="center">
<a href="http://blogkaynagi.blogspot.com.tr/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimRUecPhPQdI-VqRx8sPzfCS-lYP1debg5xd0ddjjjKG_haJbLPnikX3nfA9MP94md1_1uEvvkuQJTMQupQiQFlsYDQCjuKh1DNs1lNZUycBkNUuJ2Mg4Ou7KVT9kmz2ajkG9JTNs-VHrp/s1600/125x125.gif"/></a>
<td width="125" height="125" align="center"> <a href="http://blogkaynagi.blogspot.com.tr/" rel="external"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimRUecPhPQdI-VqRx8sPzfCS-lYP1debg5xd0ddjjjKG_haJbLPnikX3nfA9MP94md1_1uEvvkuQJTMQupQiQFlsYDQCjuKh1DNs1lNZUycBkNUuJ2Mg4Ou7KVT9kmz2ajkG9JTNs-VHrp/s1600/125x125.gif"/></a>
</td></td></tr><tr>
<td width="125" height="125" align="center">
<a href="http://blogkaynagi.blogspot.com.tr/" rel="external"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimRUecPhPQdI-VqRx8sPzfCS-lYP1debg5xd0ddjjjKG_haJbLPnikX3nfA9MP94md1_1uEvvkuQJTMQupQiQFlsYDQCjuKh1DNs1lNZUycBkNUuJ2Mg4Ou7KVT9kmz2ajkG9JTNs-VHrp/s1600/125x125.gif"/></a> </td>
<td width="125" height="125" align="center">
<a href="http://blogkaynagi.blogspot.com.tr/" rel="external"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimRUecPhPQdI-VqRx8sPzfCS-lYP1debg5xd0ddjjjKG_haJbLPnikX3nfA9MP94md1_1uEvvkuQJTMQupQiQFlsYDQCjuKh1DNs1lNZUycBkNUuJ2Mg4Ou7KVT9kmz2ajkG9JTNs-VHrp/s1600/125x125.gif"/></a> </td></tr></table></center>

125x125 Reklam Alanı Ayarları


  • Reklam vermek istediğiniz sitenin linkini http://blogkaynagi.blogspot.com ile resmini ise "<img src" kodu arasında bulunan resim linki ile değiştirebilirsiniz.



  • Resim boylarını değiştirmek için width ve height ayarlarını kullanabilirsiniz.

1 Ağustos 2013 Perşembe

Blogger Resimli Son Yorumlar Eklentisi
Blogger son yorumlar eklentisi bir çok blogger kullanıcısı için son derece yararlı bir eklentidir. Son yorumlar eklentisini kullanmak seo'ya oldukça faydalıdır. Blog trafiğinizi ve bounce rate yani hemen çıkma oranını azaltır. Gelelim popüler ve şık son yorumlar eklentisini eklemeye;
son yorumlar

Blogger Avatarlı Son Yorumlar Eklentisi


Blogger Yönetici Paneline giriş yapıyoruz

Yerleşim  > Gadget ekleye tıklıyoruz.

Açılan pencerede HTML/JavaScript'e tıklıyoruz

blogger yönetici paneli

Açılan pencereye aşağıdaki kodu yapıştırıp, kaydet'e basın işlem tamamdır.

Kod:
<style type="text/css">
ul.btt_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}
.btt_recent_comments li {
    -webkit-transition: .5s;
    -moz-transition: .5s;
    -ms-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    border: 2px solid transparent;
}
.btt_recent_comments li:hover {
    -webkit-transform: scale(1.2) translate(15px);
    -moz-transform: scale(1.2) translate(15px);
    -ms-transform: scale(1.2) translate(15px);
    -o-transform: scale(1.2) translate(15px);
    transform: scale(1.2) translate(15px);
    box-shadow: 0 0 20px 1px #aaa;}
.btt_recent_comments li {
    background: none!important;
    margin: 5px!important;
    padding: 5px!important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}
.btt_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}
.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}
.btt_recent_comments li img {
    padding: 0;
    position: relative;
    overflow: hidden;
    display: block;
}
.btt_recent_comments li span {
    margin-top: 3px;
    color: #666;
    display: block;
    font-size: 12px;
    line-height: 1.4;
}

#btt_recent_comments .info {
    text-align: right;
    height:1.2em!important;
    overflow:hidden;
    line-height: 1em!important;
}
#btt_recent_comments .info a {
    font-weight: bold;
    font-size: 11px;
    color: #AAA;
    display:none;
}
#btt_recent_comments:hover .info a {
    display:inline!important;
}
</style>



<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 45,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More ?",
 defaultAvatar  = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNiOmI_gksc4kQGV1bgnqA7L06kM5tKJNa75kNN7x3rbz_RV_uE5pUzd47VTlWUKq9kk9i4h76q1qrmLYcEz6srpttIeGlQ6OtB_dz6lVegPW4YH5r0XQyYxNJwIDlUcJTRphojS7aq-dD/s320/avatar.png",
 hideCredits = true;
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('9 G=G||5,8=8||1z,w=w||1w,m=m||"j://V.L.g/1i/?d=1b",F=F||" 1c &1D;",x=(A x===\'B\')?h:x,o=(A o===\'B\')?Q:o,q=(A q===\'B\')?h:q,r=(A r===\'B\')?Q:r;18 14(C){9 7;7=\'<R J="14">\';U(9 i=0;i<G;i++){9 z,y,2,k;4(i==C.O.e.D)X;7+="<10>";9 e=C.O.e[i];U(9 l=0;l<e.E.D;l++){4(e.E[l].19==\'1a\'){z=e.E[l].v;X}}y=e.M[0].1x.$t;2=e.M[0].1E$16.N;4(2.f("/P/")!=-1){2=2.p("/P/","/s"+8+"-c/")}b 4(2.f("/S/")!=-1){2=2.p("/S/","/s"+8+"-c/")}b 4(2.f("/T-c/")!=-1&&2.f("j:")!==0){2="j:"+2.p("/T-c/","/s"+8+"-c/")}b 4(2.f("H.g/n/17-W.I")!=-1){2="j://3.Y.Z.g/-1d-1e/1f/1U/1g/s"+8+"/1h.11"}b 4(2.f("H.g/n/1j-W.I")!=-1){2="j://3.Y.Z.g/-1k/1l/1m/1n/s"+8+"/1o.11"}b 4(2.f("H.g/n/1p.I")!=-1){4(m.f("L.g")!=-1){2=m+"&s="+8}b{2=m}}b{2=2}4(x===h){4(q===h){k="1q"}b{k=""}7+="<12 J=\\"1s "+k+"\\"><n J=\\""+k+"\\" N=\\""+2+"\\" 1t=\\""+y+"\\" 1u=\\""+8+"\\" 1v=\\""+8+"\\"/></12>"}7+="<a v=\\""+z+"\\">"+y+"</a>";9 13=e.1y.$t;9 6=13.p(/(<([^>]+)>)/1A,"");4(6!==""&&6.D>w){6=6.1B(0,w);6+="&1C;";4(o===h){6+="<a v=\\""+z+"\\">"+F+"</a>"}}b{6=6}7+="<u>"+6+"</u>";7+="</10>"}7+=\'</R>\';9 K="";4(r===h){K="15:1F;"}7+="<u 1G=\\"1H-1I:1J;15:1K;1L-1M:1N;"+K+"\\">1O 1P <a v=\\"j://V.1Q.1R/\\">1S</a></u>";1T.1r(7)}',62,119,'||authorAvatar||if||commBody|commentsHtml|avatarSize|var||else|||entry|indexOf|com|true||http|avatarClass||defaultAvatar|img|showMorelink|replace|roundAvatar|hideCredits|||span|href|characters|showAvatar|authorName|commentlink|typeof|undefined|btt|length|link|moreLinktext|numComments|blogblog|gif|class|hideCSS|gravatar|author|src|feed|s1600|false|ul|s220|s512|for|www|rounded|break|bp|blogspot|li|png|div|commHTML|btt_recent_comments|display|image|b16|function|rel|alternate|mm|More|AaI8|1X32ZM|TxMKLVzQ5BI|QYau8ov2blE|btt_blogger_logo|avatar|openid16|9lSeVyNRKx0|TxMKMIqMNuI|AAAAAAAABYc|8iasY0xpLzc|btt_openid_logo|blank|avatarRound|write|avatarImage|alt|width|height|40|name|content|60|ig|substring|hellip|raquo|gd|none|style|font|size|10px|block|text|align|right|Widget|by|SoftGlad|com|SoftGlad|document|AAAAAAAABYY'.split('|'),0,{}))
//]]>
</script>
<script src="/feeds/comments/default?alt=json&amp;callback=btt_recent_comments&amp;max-results=5" type="text/javascript"></script>

<div id="btt_recent_comments">
<div class="info"><a rel=”external” href="http://blogkaynagi.blogspot.com.tr/2013/08/blogger-resimli-son-yorumlar-eklentisi.html" title="Widget Info">Sitene Ekle</a></div></div>

Eklenti Ayarları

  • Son yorumlar eklentisinin normal ayarları 5'tir. Daha fazla yorum gözükmesi için aşağıda ki kodları eklenti kodlarından arayıp bulun;
numComments  = 5,   Değerini değiştirin 
amp;max-results= 5   Yorum sayısının değişmesi için değerlerin aynı olması gerekiyor.

  • Avatarın gözükmemesi için aşağıda ki true değerini false ile değiştirin.
showAvatar  = true,

  • Avatar boyutu
avatarSize  = 45,

  • Yorumlarda toplam kaç karekter gözümesini istiyorsanız aşağıdaki değeri değiştirin.
characters  = 40