Enes İLHAN\ Web 2.0 Tarzı Sosyal Eklenti Yapımı

Blogger İpuçları 4 yorum 3.814 9 Haziran 2011

Bu yazımda sizlere web 2.0 tarzında sosyal eklenti yapımını anlatacağım. Bu tür eklentilere genelde blogumda yer vermedim bugüne kadar ama bu eklenti hoşuma gittiğinden ve gayet sade olduğundan sizlerle paylaşma ihtiyacı hissettim. Hemen bu eklentinin nasıl yapılacağını anlatmak istiyorum izninizle:
Öncelikle aşağıdaki kodları ]]></b:skin>{ba değil sadece b olacak} kodundan önce yapıştıralım:

#abonelik { background:#e8e9ed; width:290px; padding:0px 0px; border:0px solid #e6e6e6; border-bottom:0px solid #e6e6e6; font-size:8px; margin-left:-30px; }
.abonelik_ikon { width:286px; margin:10px auto; }
.abonelik_ikon li { display:inline; float:left; margin:0px 2px 5px 2px; width:52px; text-align:center; font-size:11px; }
.abonelik_ikon a { display:block; padding:40px 0px 2px; -webkit-transition:all .2s ease-out; -moz-transition:all .2s ease-out; color:#444 !important; }
.abonelik_ikon a:hover { color:#26b !important; text-decoration:none; -moz-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); -webkit-box-shadow:0px 2px 4px hsla(0,0%,0%,.35); }
.abonelik_ikon .abonelik_buzz a { background:url(http://konfor.enesilhan.net/resim/sosyal/sosyal-2/buzz.png) center top no-repeat; }
.abonelik_ikon .abonelik_twitter a { background:url(http://konfor.enesilhan.net/resim/sosyal/sosyal-2/twitter.png) center top no-repeat; }
.abonelik_ikon .abonelik_facebook a { background:url(http://konfor.enesilhan.net/resim/sosyal/sosyal-2/facebook.png) center top no-repeat; }
.abonelik_ikon .abonelik_rss a { background:url(http://konfor.enesilhan.net/resim/sosyal/sosyal-2/rss.png) center top no-repeat; }
.abonelik_ikon .abonelik_email a { background:url(http://konfor.enesilhan.net/resim/sosyal/sosyal-2/email.png) center top no-repeat; }

Daha sonra da blogunuzun uygun bir yerine {uygun bir yer dediğim sağ gadget olabilir, yazı içi olabilir. Diyelim ki sağ gadget da reklam diye bir gadgetınızın olduğunu varsayalım. Reklam gadgetinin üstünde yer almasını istiyorsanız bu eklentinin kodları o reklam gadgetinin üstüne ekleyeceksiniz. Umarım açıklayıcı olmuştur} aşağıdaki kodları yapıştırın:

Eğer şablonu önizlerken hata alırsanız -ki muhtemelen alacaksınız o zaman da şu adresten son verdiğim kodları çevirip o şekilde yapıştırın, o zaman kesin olacaktır. Yapamadığınız zaman haber verdiğinizde yardımcı olmaya çalışırım, herkese kolay gelsin..
Ayrıca eklentinin demosuna diğer bir sitem olan www.enesilhan.org‘dan bakabilirsiniz.

Bu yazıdan önce yazmış olduğum "Blogger Navigasyon Eklentisi" başlıklı yazımı da okumanızı tavsiye ederim.

Yorumlar ;

Cakko
9 Haziran 2011 - 15:34:46

Abi dediklerini uyguladım ama yazılarla bitişik oldu gibi ne dersin ?

Enes İLHAN
9 Haziran 2011 - 15:47:19

@Cakko,
Alper CSS kodlarındaki margin-left:-30pxi -2 ile 8 arasında bir değer vererek önizlersen sağ tarafa doğru ortalanacaktır.

oyun
18 Temmuz 2011 - 12:24:43

tarifiniz için teşekkürler

18 Eylül 2011 - 14:41:29

Enes Abi rica etsem kodlarla ilgilenebilirmisin 🙂 Demosu çok hoşuma gitti ama kuramıyorum