Blogger İçin Subscribe Sidebar Box Eklentisi

Blogger subscribe box birçok yerde aynı şekildedir sanırım.Biz bu basit görünümlerden kurtulmak için Css nimetlerinden faydalanmaktan yanayız.

BloggerMint çoğu blog yazarının bildiği bir blogger eklenti sitesidir.Bilmeyenler için söyliyelim Blogger'ı şu ana kadar geliştiren siteler varsa bunlardan biri muhakkakki BloggerMint'dir.

İlerleyen yazılarımda sizlerle Blogger için yabancı eklenti sitelerini tek bir başlık altında toplayıp paylaşmaktan gurur duyacağım.



Bu eklentinin (widget) demosunu buradan görebilirsiniz.

Demo  görünümü resim olarak altta eklenmiştir.

Şablonunuza eklediğinizde görünümü bu şekilde olacaktır.

Eğer Subscribe SideBar Box eklentisi için çok sade diyen blog yazarlarımız olursa onlara CSS3 Artistik Subscribe + Search Box eklentisi adlı yazımı okumalarını tavsiye ederim.

Subscribe Sidebar Box eklentisini beğendiyseniz bloğunuza eklemek için aşağıdaki adımları sırasıyla uygulayınız.

STEP - 1

Öncelikle Blogger'a giriş yapınız.

• Şablon - Şablonu Düzenle - Widget Şablonlarını Genişlet sekmelerini kullanınız.
• CTRL + F yardımıyla arama kutusunu açın ve aşağıdaki kodu aratıp bulunuz.

]]></b:skin>

Bulmuş olduğunuz bu kodun hemen üzerine gelecek şekilde aşağıdaki kodları şablonunuza ekleyiniz.

Not : Css kodları rahatlıkla kopyalamak için kod kümesinin üzerindeki View plain sekmesine tıklayınız.

/*-------------- Subscribe SideBar Box Widget Teknokirpi -------------------*/
#subscribebox{list-style:none; margin:0px}
#subscribebox li{padding:10px 5px; position:relative; margin-top:0; margin-right:0; margin-bottom:5px; margin-left:0; height:64px; opacity:0.75; -moz-opacity:0.75}
#subscribebox li:hover{ background-color:#f4f4f4; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -khtml-border-radius:5px; opacity:1; -moz-opacity:1; -webkit-transition:opacity 1s ease-out}
#subscribebox li img{float:left; position:relative; padding:0px; margin:0px 10px 0px 0px}
#subscribebox li h4{margin:-6px 0 3px 83px; font-size:15px; line-height:26px; color:#8B3E2F; text-shadow:1px 1px 0px #fff; font-family:Helvetica,Arial,Verdana; font-weight:bold; clear:none}
#subscribebox li p{margin:0 0 0 0; font-family:Trebuchet MS,sans-serif; font-size:13px; letter-spacing:-0.02em; clear:none; text-indent:0px}
#subscribebox li a.link{background:none; border:none; top:0; left:0; right:0; bottom:0; width:100%; height:100%; position:absolute; z-index:50}
/*-------------- Subscribe SideBar Box Widget Teknokirpi End -------------------*/

Şablonunuzun önizlemesini kontrol edin ve herhangi bir hata yoksa şablonunuzu kaydediniz.

STEP - 2

Öncelikle Blogger'a giriş yapınız.

• Yerleşim - Gadget Ekle - HTML/Javascript sekmelerini kullanarak kod kümesi gadgetini aktif hale getirin ve aşağıdaki html kodu bu gadget'a ekleyip kaydediniz.

Not : Html kodları rahatlıkla kopyalamak için kod kümesinin üzerindeki View plain sekmesine tıklayınız.

<ul id="subscribebox">
<li>
<a class="link" href="http://feeds.feedburner.com/YOUR FEED NAME" target="_blank"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xCKPUMeJO6XCGBuqQ2Xkz3scUJNxtz49JzTg3K01pFjKIYnYBDQt0AmccKIYsH66ii8xToDptBdqWdicc1RB_fB3O2YJSARf1ncj_Hw0reeYZnCUy2DkRahQyrOPu_8p3Hpc-aD5KXU/s1600/rss_48.png" alt="RSS Feeds" />
<h4>RSS Feed</h4>
<p>Subscribe To RSS Feed</p>
</li>
<li>
<a class="link" href="http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEED NAME&loc=en_US" target="_blank"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEfLxLvTIOLhtfErkotK7Q3K30A6vI1Ga0voLWS5uqWDKkUi67VNVTQSqvMtYeLXWiWr3EKZ2nvCb1uHAr2S7dR0V3bo1vpAKArSLvT8zcZJUXXFINeYGyS8VLDke3boF7NxESbHXc5EQ/s1600/mail_forward_48.png" alt="RSS E-Mail Delivery" />
<h4>E-Mail Delivery</h4>
<p>Subscribe To Email for the latest updates right to your email</p>
</li>
<li>
<a class="link" href="http://twitter.com/YOUR TWITTER HANDLE" target="_blank"></a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTM2l1ZYmSJU5Nwb_IROGlAOoiZ_dq4kaqMzHoUlHUgQKRln0if1G9p0cbHwZBcnJuakn9pn_HEVZEBAHKXndW39wWP2P6r-abbxKxgLccO_5t4VfkXj145vw2owiwjzAQQ9NguOtXOMc/s1600/twitter_48.png" alt="Follow Us On Twitter" />
<h4>Twitter</h4>
<p>Follow Us On Twitter to join the list of 1000  followers</p>
</li>
</ul>

Not : Bu kodu kendinize göre düzenlemek isterseniz aşağıdaki açıklamaları okuyunuz.

Kod düzenlenmesi : Bu kodun içerisindeki düzenlenebilir bölümler aşağıdadır.

RSS BÖLÜMÜ

1. RSS Feed
2. Subscribe To RSS Feed
3. http://feeds.feedburner.com/FEEDBURNER-IDNIZ
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0xCKPUMeJO6XCGBuqQ2Xkz3scUJNxtz49JzTg3K01pFjKIYnYBDQt0AmccKIYsH66ii8xToDptBdqWdicc1RB_fB3O2YJSARf1ncj_Hw0reeYZnCUy2DkRahQyrOPu_8p3Hpc-aD5KXU/s1600/rss_48.png

RSS EMAİL BÖLÜMÜ

1. E-Mail Delivery
2. Subscribe To Email for the latest updates right to your email
3. http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-IDNIZ&loc=en_US
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEfLxLvTIOLhtfErkotK7Q3K30A6vI1Ga0voLWS5uqWDKkUi67VNVTQSqvMtYeLXWiWr3EKZ2nvCb1uHAr2S7dR0V3bo1vpAKArSLvT8zcZJUXXFINeYGyS8VLDke3boF7NxESbHXc5EQ/s1600/mail_forward_48.png

TWİTTER BÖLÜMÜ 

1. Twitter
2. Follow Us On Twitter to join the list of 1000  followers
3. http://twitter.com/TWİTTERKULLANICIADI
4. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTM2l1ZYmSJU5Nwb_IROGlAOoiZ_dq4kaqMzHoUlHUgQKRln0if1G9p0cbHwZBcnJuakn9pn_HEVZEBAHKXndW39wWP2P6r-abbxKxgLccO_5t4VfkXj145vw2owiwjzAQQ9NguOtXOMc/s1600/twitter_48.png

İstediğiniz gibi düzenlemek için önce kırmızıyla belirttiğim yerleri kendinize göre düzenleyiniz.Ardından dilerseniz diğer belirttiğim yazıları kendinize göre Türkçe'leştirebilir veya olduğu gibi bırakabilir,belirtmiş olduğum Resim Url'lelerini değiştirerek sayfanıza uygun iconlar ekleyebilirsiniz.Sosyal iconlar için bu bağlantıyı kullanabilirsiniz.

Kaynak :Orijinal anlatım sayfası BloggerMint ; Not : Orijinal anlatım dili ingilizcedir.

Be a Fan

Bu yazıyı oylamak istermisiniz ?