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

20 Aralık 2014 Cumartesi

250+HTML RENK VE KODLARİ

Written by   on   in , ,   with Hiç yorum yok

HTML renk kodları, web tasarımcıları ,blogcular  bu işe yeni başlayanlar için müthiş bir kaynak.Artık arka plan, metin ve tablo renklerinizi istediğiniz gibi rengi görerek, seçme ve ayarlama şansınız var.250 den fazla HTML renk kodunu karşılarında temsil ettikleri renklerle ve rengin ismiyle birlikte yayınlıyoruz.


KODRENK
#000000Black
#150517Gray0
#250517Gray18
#2B1B17Gray21
#302217Gray23
#302226Gray24
#342826Gray25
#34282CGray26
#382D2CGray27
#3b3131Gray28
#3E3535Gray29
#413839Gray30
#41383CGray31
#463E3FGray32
#4A4344Gray34
#4C4646Gray35
#4E4848Gray36
#504A4BGray37
#544E4FGray38
#565051Gray39
#595454Gray40
#5C5858Gray41
#5F5A59Gray42
#625D5DGray43
#646060Gray44
#666362Gray45
#696565Gray46
#6D6968Gray47
#6E6A6BGray48
#726E6DGray49
#747170Gray50
#736F6EGray
#616D7ESlate Gray4
#657383Slate Gray
#646D7ELight Steel Blue4
#6D7B8DLight Slate Gray
#4C787ECadet Blue4
#4C7D7EDarkSlate Gray4
#806D7EThistle4
#5E5A80Medium Slate Blue
#4E387EMedium Purple4
#151B54Midnight Blue
#2B3856Dark SlateBlue
#25383CDark Slate Gray
#463E41Dim Gray
#151B8DCornflower Blue
#15317ERoyal Blue4
#342D7ESlate Blue4
#2B60DERoyal Blue
#306EFFRoyal Blue1
#2B65ECRoyal Blue2
#2554C7Royal Blue3
#3BB9FFDeep Sky Blue
#38ACECDeep Sky Blue2
#357EC7Slate Blue
#3090C7Deep Sky Blue3
#25587EDeep Sky Blue4
#1589FFDodger Blue
#157DECDodger Blue2
#1569C7Dodger Blue3
#153E7EDodger Blue4
#2B547ESteel Blue4
#4863A0Steel Blue
#6960ECSlate Blue2
#8D38C9Violet
#7A5DC7Medium Purple3
#8467D7Medium Purple
#9172ECMedium Purple2
#9E7BFFMedium Purple1
#728FCELight Steel Blue
#488AC7Steel Blue3
#56A5ECSteel Blue2
#5CB3FFSteel Blue1
#659EC7Sky Blue3
#41627ESky Blue4
#737CA1Slate Blue
#737CA1Slate Blue
#98AFC7Slate Gray3
#F6358AViolet Red
#F6358AViolet Red1
#E4317FViolet Red2
#F52887Deep Pink
#E4287CDeep Pink2
#C12267Deep Pink3
#7D053FDeep Pink4
#CA226BMedium Violet Red
#C12869Violet Red3
#800517Firebrick
#7D0541Violet Red4
#7D0552Maroon4
#810541Maroon
#C12283Maroon3
#E3319DMaroon2
#F535AAMaroon1
#FF00FFMagenta
#F433FFMagenta1
#E238ECMagenta2
#C031C7Magenta3
#B048B5Medium Orchid
#D462FFMedium Orchid1
#C45AECMedium Orchid2
#A74AC7Medium Orchid3
#6A287EMedium Orchid4
#8E35EFPurple
#893BFFPurple1
#7F38ECPurple2
#6C2DC7Purple3
#461B7EPurple4
#571B7eDark Orchid4
#7D1B7EDark Orchid
#842DCEDark Violet
#8B31C7Dark Orchid3
#A23BECDark Orchid2
#B041FFDark Orchid1
#7E587EPlum4
#D16587Pale Violet Red
#F778A1Pale Violet Red1
#E56E94Pale Violet Red2
#C25A7CPale Violet Red3
#7E354DPale Violet Red4
#B93B8FPlum
#F9B7FFPlum1
#E6A9ECPlum2
#C38EC7Plum3
#D2B9D3Thistle
#C6AEC7Thistle3
#EBDDE2Lavender Blush2
#C8BBBELavender Blush3
#E9CFECThistle2
#FCDFFFThistle1
#E3E4FALavender
#FDEEF4Lavender Blush
#C6DEFFLight Steel Blue1
#ADDFFFLight Blue
#BDEDFFLight Blue1
#E0FFFFLight Cyan
#C2DFFFSlate Gray1
#B4CFECSlate Gray2
#B7CEECLight Steel Blue2
#52F3FFTurquoise1
#00FFFFCyan
#57FEFFCyan1
#50EBECCyan2
#4EE2ECTurquoise2
#48CCCDMedium Turquoise
#43C6DBTurquoise
#9AFEFFDark Slate Gray1
#8EEBECDark slate Gray2
#78c7c7Dark Slate Gray3
#46C7C7Cyan3
#43BFC7Turquoise3
#77BFC7Cadet Blue3
#92C7C7Pale Turquoise3
#AFDCECLight Blue2
#3B9C9CDark Turquoise
#307D7ECyan4
#3EA99FLight Sea Green
#82CAFALight Sky Blue
#A0CFECLight Sky Blue2
#87AFC7Light Sky Blue3
#82CAFFSky Blue
#79BAECSky Blue2
#566D7ELight Sky Blue4
#6698FFSky Blue
#736AFFLight Slate Blue
#CFECECLight Cyan2
#AFC7C7Light Cyan3
#717D7DLight Cyan4
#95B9C7Light Blue3
#5E767ELight Blue4
#5E7D7EPale Turquoise4
#617C58Dark Sea Green4
#348781Medium Aquamarine
#306754Medium Sea Green
#4E8975Sea Green
#254117Dark Green
#387C44Sea Green4
#4E9258Forest Green
#347235Medium Forest Green
#347C2CSpring Green4
#667C26Dark Olive Green4
#437C17Chartreuse4
#347C17Green4
#348017Medium Spring Green
#4AA02CSpring Green
#41A317Lime Green
#4AA02CSpring Green
#8BB381Dark Sea Green
#99C68EDark Sea Green3
#4CC417Green3
#6CC417Chartreuse3
#52D017Yellow Green
#4CC552Spring Green3
#54C571Sea Green3
#57E964Spring Green2
#5EFB6ESpring Green1
#64E986Sea Green2
#6AFB92Sea Green1
#B5EAAADark Sea Green2
#C3FDB8Dark Sea Green1
#00FF00Green
#87F717Lawn Green
#5FFB17Green1
#59E817Green2
#7FE817Chartreuse2
#8AFB17Chartreuse
#B1FB17Green Yellow
#CCFB5DDark Olive Green1
#BCE954Dark Olive Green2
#A0C544Dark Olive Green3
#FFFF00Yellow
#FFFC17Yellow1
#FFF380Khaki1
#EDE275Khaki2
#EDDA74Goldenrod
#EAC117Gold2
#FDD017Gold1
#FBB917Goldenrod1
#E9AB17Goldenrod2
#D4A017Gold
#C7A317Gold3
#C68E17Goldenrod3
#AF7817Dark Goldenrod
#ADA96EKhaki
#C9BE62Khaki3
#827839Khaki4
#FBB117Dark Goldenrod1
#E8A317Dark Goldenrod2
#C58917Dark Goldenrod3
#F87431Sienna1
#E66C2CSienna2
#F88017Dark Orange
#F87217Dark Orange1
#E56717Dark Orange2
#C35617Dark Orange3
#C35817Sienna3
#8A4117Sienna
#7E3517Sienna4
#7E2217Indian Red4
#7E3117Dark Orange3
#7E3817Salmon4
#7F5217Dark Goldenrod4
#806517Gold4
#805817Goldenrod4
#7F462CLight Salmon4
#C85A17Chocolate
#C34A2CCoral3
#E55B3CCoral2
#F76541Coral
#E18B6BDark Salmon
#F88158Pale Turquoise4
#E67451Salmon2
#C36241Salmon3
#C47451Light Salmon3
#E78A61Light Salmon2
#F9966BLight Salmon
#EE9A4DSandy Brown
#F660ABHot Pink
#F665ABHot Pink1
#E45E9DHot Pink2
#C25283Hot Pink3
#7D2252Hot Pink4
#E77471Light Coral
#F75D59Indian Red1
#E55451Indian Red2
#C24641Indian Red3
#FF0000Red
#F62217Red1
#E41B17Red2
#F62817Firebrick1
#E42217Firebrick2
#C11B17Firebrick3
#FAAFBEPink
#FBBBB9Rosy Brown1
#E8ADAARosy Brown2
#E7A1B0Pink2
#FAAFBALight Pink
#F9A7B0Light Pink1
#E799A3Light Pink2
#C48793Pink3
#C5908ERosy Brown3
#B38481Rosy Brown
#C48189Light Pink3
#7F5A58Rosy Brown4
#7F4E52Light Pink4
#7F525DPink4
#817679Lavendar Blush4
#817339Light Goldenrod4
#827B60Lemon Chiffon4
#C9C299Lemon Chiffon3
#C8B560Light Goldenrod3
#ECD672Light Golden2
#ECD872Light Goldenrod
#FFE87CLight Goldenrod1
#ECE5B6Lemon Chiffon2
#FFF8C6Lemon Chiffon
#FAF8CCLight Goldenrod Yellow
Share:

19 Kasım 2014 Çarşamba

115.000 Backlink Kasma Programı

Written by   on   in , , ,   with 1 yorum

Evet arkadaşlar günümüzde bir çok web sitesi bulunmakda.Ve birbirine benzer bir çok site var.Bu sitelerin biri arama motorlarından diğer siteden hada önde çıkıyor.Bunun bir çok nedeni olabilir.Bu nedenlerden en önde geleni Google nin verdiği Pagerank değeridir.Pagerank değeri yüksek olan site kendinden düsük Pagerank değeri olan siteden önce çıkar.
Bildiğiniz gibi Pagerank değerini arttırmada en yararlı unsur, değerli sitelerden link almakdır.Değerli sitelerden gelen bağlantılar sizin sitenizinde değerini arttırır.Ve bazı siteler vardır, yorum atarsınız sitenizin tanıtımını yaparsınız, site değerli olduğundan sizede değerli bağlantı gelmiş olur.Bu işlemin çok yapılması durumunda sandbox a düşmenizde mümkündür.Herşey kararınca yapılmalıdır.Ve birazda şans işidir.
Mesela size bir örnek vereyim.Ben kendime ilk sitemi açtığımda, ikinci günden 50k yani 50.000 backlink kasmıştım.Ve bana gelen tepkiler sandbox a düşersin, işin zor gibiydi.Ve sonuç olarak 1hafta geçmeden daha 1haftalık olan sitemin Pagerank değeri 3 olmuştu.Birşeyleri başarmak istiyorsak biraz risk almamız gerek.Neyse konuya dönelim.Backlink in tanımını yukarıda yaptım.Değerli sitelerden link alma.Elimizle 100 siteye yorum yazabiliriz, tanıtım yazısı yazabiliriz, 500 siteyede yapabiliriz, ama 10000 oldumu  işimiz zor.Yapamayız.İşte burada bu işi yapan programlar var.Ben sizlere şimdi bu programı paylaşacağım.Program 110.000 backlink kasıyor.Bu işlem uzun sürüyor ama etkisi güzel oluyor.
Belittiğim backlink programını buradan indirebilirsiniz:http://yadi.sk/d/4lQi1B3N2dMel
Rar şifresi:scalikoglu.com
Share:

9 Kasım 2014 Pazar

Sitenize Özel Mobil Tema Yapın

Written by   on   in , , ,   with Hiç yorum yok
Evet arkadaşlar ilk anlattığım konu siteniz için mobil tema hazırlama. İnternet sitelerinde dolanırken bir web sitesine rastladım ve direk dikkatimi çekti. Hemen siteye girdim ve birde ne göreyim blogger'a uyumlu mobil tema hazırlama sitesi! Hemen anlatıyorum.



Duda Mobile sitesine giriyoruz. Ve ilk karşımıza gelen görüntü bu.

Gördüğünüz gibi ENTER YOUR SİTE URL yazıyor. Web sitenizin adresini girip hemen mobil temanızı oluşturuyorsunuz. Şimdi gelelim blogger'a yüklemesine...

Blogger'a yüklemeside videoda anlatılmış. Yabancı dil olsada resimlerden anlaşılıyor.


       
Share:

28 Ekim 2014 Salı

27 Ekim 2014 Pazartesi

Animasyonlu Saat

Written by   on   in ,   with Hiç yorum yok
Merhaba Arkadaşlar bugün sizlere çok güzel animasyonlu bir blogger eklentisini paylaşacağım. Eklenti flaşh animasyonlu bir saat. Sade bloglar için kullanıma uygun.


Demo:
Share:

18 Ekim 2014 Cumartesi

Kullandıgım Dipnot Eklentisi

Written by   on   in ,   with Hiç yorum yok

Bu eklenti yazının altına yerleşmekle birlikte yazının yazıldığı tarihi, bulunduğu kategori, RSS sitsteminden takibi ve kaç kere okunduğuna dair bilgiler vermektedir. İlgilenenler nasıl bloguna ekleyeceğini aşağıdaki yönergeleri takip etsin:
Nasıl Eklenir:

1- Blogger'e Giriş / Kumanda Paneli / Tasarım(Yerleşim) / HTML'yi Düzelt / Widget Şablonunu Düzelt bölümlerinden sonra CTRL+F(Arama) yardımıyla ;
<data:post.body/>
kodunu buluyoruz.
2- Yukarıda bulduğunuz kodun altına ;
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<fieldset style='border: 1px solid rgb(204, 204, 204); padding-left: 10px;'>
<legend style='padding: 0px 5px; font-family: Tahoma; font-style: normal; font-variant: normal; font-weight: normal; font-size: 10px; line-height: normal; font-size-adjust: none; font-stretch: normal; -x-system-font: none; color: rgb(0, 92, 179);'>Dipnot</legend>
<div style='padding: 10px; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal; text-align:center; -x-system-font: none;'>

Bu yazı <b:if cond='data:post.dateHeader'><data:post.dateHeader/></b:if> <b:if cond='data:top.showTimestamp'>günü yazılmıştır.</b:if><b:if cond='data:post.labels'> Bulunduğu kategori : <b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' expr:title='&quot;View all posts in &quot; + data:label.name' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>. Yazdığım yazıları <a href='http://feedburner.google.com/fb/a/mailverify?uri=DrTekno'>RSS 2.0 sistemini</a> kullanarak takip edebilir,  <b:if cond='data:post.allowComments'>dilerseniz <a href='#respond'>yorum yapabilirsiniz</a>.</b:if>

              
           </div>
</fieldset>
</b:if>
kodlarını ekliyoruz.
3- Bunları Unutmayın:
  

  Eğer 'Benzer Yazılar' kullanıyorsanız ona göre eklemeniz gereken yer değişebilir. Benzer yazıların altına eklemek isterseniz, benzer yazılar kodlarının sonuna kodları ekleyebilirsiniz.
   Kodda renkli fontla gösterdiğim yeri kendinize göre değiştiriniz.
Tarih sizin blogunuzda kullandığınız tarih biçimine göre değişiklik gösterir. Blogunuza eklediğinizde tarih çok karmaşık olursa ayarlardan tarih başlığı biçimini değiştirebilirsiniz.
İgili görüşlerinizi belirtmek için yorum bölümünü kullanabilirsiniz.
Share:

11 Ekim 2014 Cumartesi

BLOG POSTALARINIZI GOOGLE+ İLE OTOMATİK PAYLAŞIN

Written by   on   in , ,   with Hiç yorum yok

Bloğunuzda yayınladığınız postlarınızın daha çok kişiye ulaşabilmesini sağlamak için Google+ mükemmel bir sosyal medya ağıdır. Bu şekilde bloğunuzun izleyici ve okuyucu kitlesini kolayca genişletmeniz mümkündür. Ancak yayınladığınız her postu tek tek Google+’da paylaşmanız büyük zaman kaybına neden olacaktır. Peki, biri size bu zamanı geri vereceğini söylese nasıl olur?

Blogpostlarınızı Google+’da otomatik olarak paylaşmanız da mümkün. Bundan sonra yazıları birçok tıklama yapmaya gerek kalmadan paylaşacaksınız. Ayrıca, Google+ yorumlarını da blog sayfanızda görebileceksiniz. Eğer bloğunuza google+ profilinizle bir kez bağlanırsanız, bu yeni özellik bir dahaki yazı yayınlamanız sırasında çalışmaya başlayacaktır. Eğer yazılarınızın bu şekilde otomatik paylaşılmasını istemezseniz Blogger Tablosu’nun Google+ sekmesinden tercihlerinizi ayarlayabilirsiniz.
Share:

3 Ekim 2014 Cuma

Blogger’da İfadeler(smiley) Eklentisi

Written by   on   in ,   with Hiç yorum yok

Blogger için ifadeler eklentisi artık daha kullanışlı bir halde.
Disqus yorum sistemine geçmeden önce bende kullanıyordum. Çok kullanışlı ve yorumlara renk katmaktadır.

İşte yapmanız gerekenler:
Blogger’ın kontrol panelinden
Şablon‘a tıklayın
Son olarak Html’i Düzenle‘ye tıklayın.

Açılan sayfada
<head> ile </head> arasına aşağıdaki kodlardan istediğinizi ekleyin.

Sadece yorumlarda gözükür.(Hızlı)




Yorumlarda ve yazılarınızda gözükür(Normal)



istediğiniz kodu ekledikten sonra kaydedin, işlem tamamdır.
Share:

29 Eylül 2014 Pazartesi

Seo'nuzu Öğrenin

Written by   on   in , ,   with Hiç yorum yok
merhaba arkadaşlar yeni keşfettigim bir şeyi sizlerle paylaşmak istedim.öncelikle site ingilizce ama resimlerle anlatacağım için çok kolay bi işlem olacak. sitede kendi sitenizin Seo'sunun kaç olduğunu ögreneceksiniz.

Buraya tıklayarak siteye gidebilirsiniz

öncelikle aşağıdaki gibi siteye girdikten sonra site adresinizi yazın benim yazdığım gibi kırmızı çemberin içindeki.
Sonra Check'e tıklayın


sonra yeni bir sayfa açılacak orada az aşağıya inin aşağıdaki resimdeki gibi bir yer göreceksiniz.


seo puanım gördüğünüz gibi pempe renkli sayıyla yazılmış %70 olarak görünüyor. dilerseniz altta bir HTML kodu var onu sitenizin gadget bölümünden ekliyebilirsiniz bu sayede seo puanınızı ziyaretçiler görebilir.

Share:

12 Eylül 2014 Cuma

Blogger'e Bağlantı Kutusu Eklemek

Written by   on   in ,   with Hiç yorum yok
Blogger kullanıcıları kendine ait özel arkadaş listesi oluşturmak için geliştirilmiş bir sistemdir. Fare imleci ile bağlantı resminin üzerine gelindiğinde kararmış resim daha sonra belirgin hale gelmesini sağlıyor. Bunu kendi blogger sitemde denedim ve resimde de görüldüğü gibi bir görüntü  sağlıyor. Siz dekendi blogger sitenize ekleyebilirsiniz.
Nasıl Eklenir?

1- Bloggere Giriş yaptıktan sonra Tasarım /HTML' yi düzelt bölümünden;

]]></b:skin>
kodunu buluyoruz ve hemen önüne ; 

a.linkopacity img{filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5;}
a.linkopacity:hover img{filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;}
Kodlarını (kopyala-yapıştır) ekliyoruz. 
2- Sonra Yerleşim  /Sayfa Öğeleri  / Gadget Ekle /HTML-Javascript bölümlerinden;

<a title="Acıklama" href="Adres" class="linkopacity"><img src="Resim adresi" alt="" /></a>
Kodlarını ekliyoruz.
Daha sonra 2 numaralı bölümdeki kodlarda gerekli yerleri (Açıklama, URL Adresi, Resim URL Adresi ) düzeltiyoruz.
İlgili görüşlerinizi beyan etmek için yorum bölümünü kullanınız.
Share:

11 Eylül 2014 Perşembe

2 yöntem ile resimlere ovallik verme

Written by   on   in ,   with Hiç yorum yok

Blogger kullananlar için çok güzel bir eklenti. CSS kodları yardımıyla konu içerisinde yer alan resimlerinizi oval hale getirmek ister misiniz?


Bu şekilde blogunuzun tasarımı değişmiş ve güzel bir görüntü almış olacak. Ayrıca bazen resimlerin oval olacağı yerler de oluyor ve bunun içinde çeşitli programlar ile uğraşılıyor ve bir sürü zaman kaybı oluyor. İşte bunu önlemek için bu eklentiyi mutlaka kullanmanızı öneriyorum.

İlk olarak aşağıda kodumuzu buluyoruz. Arama işlemi için CTRL + F tuş kombinasyonunu kullabilirsiniz. ( Kumanda Paneli > Şablon > HTML'yi Düzenle)
Kod:
]></b:skin>
Daha sonra ise aşağıda yer alan kodları yukarıda yer alan kodun hemen üstüne yapıştıralım.
Kod:
.oval {
  display: block;
  width: 150px;
  height: 150px;
  margin: 1em auto;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -webkit-border-radius: 99em;
  -moz-border-radius: 99em;
  border-radius: 99em;
  border: 5px solid #eee;
  box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);  
}
Bu işlemleri yaptıktan sonra şablonunuzu kaydedebilirsiniz. Tasarım bitti artık bunu konu içinde uygulamaya geldi. Bu kodu resimlerde aktif hale getirebilmeniz için her defasına aşağıdaki gibi kullanmanız gerekecek. Bunun için aşağıda yer alan kod blogunu kullanmanız gerekiyor.
Kod:
<div class="oval" style="background-image: url('RESİM URL');">
</div>
Eğer siz bunları yapmak istemiyorsanız aşşagıdaki uygulamaları yaparsanız iyi olur.

İlk olarak aşağıda kodumuzu buluyoruz. Arama işlemi için CTRL + F tuş kombinasyonunu kullabilirsiniz. ( Kumanda Paneli > Şablon > HTML'yi Düzenle)
Kod:
]></b:skin>
Daha sonra ise aşağıda yer alan kodları yukarıda yer alan kodun hemen üstüne yapıştıralım.
Kod:
.post img, .post a img, #front-list img {
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 2px rgb(181, 181, 181);
    padding: 2px;
    border-radius: 8px 8px 8px 8px;
}
İşlem bu kadardır. Gerisine karışmanıza gerek yoktur kendisi otomatik oval oluyor. 2 yöntem ile yapabilirsiniz.İyi günler.
Share:

Blogger Kamyonlu Sosyal Paylaşım Butonları

Written by   on   in ,   with Hiç yorum yok
Merhaba, herkes için tabi bazıları için iyi bir eklenti paylaşmayı düşündüm ve bunu paylaştım, kamyonlu bir siteniz olabilir bu eklenti sayesinde...

Açıklama;
bir web sitesi için çok önemlidir ve eklenti animasyon ilgili ise o zaman herhangi bir blog için çok iyi bir izlenim verir ve aynı zamanda ziyaretçi sayısı artar ve bunun için kamyonlu Facebook, Feeds ve Twitter yaptım, yani bunu ben yazmadım ama çevirmeye çalıştım.

Resim ;




Demo Sitenin Altındadır.

Önemli yerleri düzenlersiniz, iyi günler.
Share:

22 Ağustos 2014 Cuma

Blogger Gelişmiş Toplam Yazı ve Yorum Eklentisi

Written by   on   in ,   with Hiç yorum yok

Merhaba Fiber Dahi okurları size bugün  sizlere üstteki resimde gördüğünüz gibi güel yapılmış bir wigdeti paylaşacağım.
Aşağıdaki kodları Yerleşim > Gadget Ekle > HTML/JavaScript ekle yolunu izleyerek aşağıdaki kodları ekleyin.
<script style="text/javascript"> function numberOfPosts(json) {document.write('<b>' + json.feed.openSearch$totalResults.$t + '</b><br>');} function numberOfComments(json) {document.write('<span class="Apple-style-span" style=""></span> <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');} </script>

<div class='box'><div class='cell_1 konu-sayısı'><img class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJeAwKBsaTl96je8Ptop2M9PW42vm1WLrO0j40Cn-uRjnC1f1bgTdLqX_8vQTT5EaJsl5bJDhLJKVbmQ4hFCYOIlBi8o_AaRsT5CEmu3dqNbOvB-DBiEzOacRfnbTLzJWbq55hWdS-99s/s1600/konusayisi.png.png'/></div><div class='cell_2'>Toplam Konu</div><div class='cell_3 '><span class='count' id='rss'/><script src="http://teknodr.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts">
</script></span></div></div>

<div class='box'><div class='cell_1 yorum-sayısı'><img class='icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidfVmDwrdO3Xvs5RO020pEa9pT6uNeG2adRhMzhh3SINNdrKEb4oT1ECNFdRP1rUJxLNh4PJsSjhtoOBTdaYXvtOdtmRT-p0Q7stwUXdszfV_uYYCMjlTCIR0X4MWlxg0PdnQSVLSsiEo/s1600/yorumsayisi.png'/></div><div class='cell_2'>Toplam Yorum</div><div class='cell_3 '><span class='count' id='rss'/><script src="http://teknodr.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></span></div></div>

<style type='text/css'>
.box:hover{
filter:alpha(opacity=85);-moz-opacity:.85;opacity:.85;
}
.box img{
border:0;
padding:0;

}
.icon {
width: 27px;
height: 26px;
margin-top:3px;
border: none;
}


.konu-sayısı {
background-color: #44B8F2;
background-image: -moz-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: -ms-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#96DCFF), to(#2BA6E3));
background-image: -webkit-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: -o-linear-gradient(top, #96DCFF, #2BA6E3);
background-image: linear-gradient(top, #96DCFF, #2BA6E3);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA461', endColorstr='#E8711A');
border-color: #da7c0c;
color: #fff;
text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
}

.yorum-sayısı {
background-color: #F78634;
background-image: -moz-linear-gradient(top, #FFA461, #E8711A);
background-image: -ms-linear-gradient(top, #FFA461, #E8711A);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFA461), to(#E8711A));
background-image: -webkit-linear-gradient(top, #FFA461, #E8711A);
background-image: -o-linear-gradient(top, #FFA461, #E8711A);
background-image: linear-gradient(top, #FFA461, #E8711A);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFA461', endColorstr='#E8711A');
border-color: #da7c0c;
color: #fff;
text-shadow: 0 1px 1px rgba(60, 60, 60, 0.75);
}

.box{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-size: 17px;
line-height: 14px;
list-style-type: none;
display: inline-block;
padding: 0px 0px;
margin:2px 5px ;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
filter: shadow(color=#000000,direction=135,strength=5);
text-decoration: none;
vertical-align: middle;
background-color: #f5f5f5;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#E6E6E6'); /* for IE */
background-image: -moz-linear-gradient(top, #ffffff, #E6E6E6);
background-image: -ms-linear-gradient(top, #ffffff, #E6E6E6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#E6E6E6));
background-image: -webkit-linear-gradient(top, #ffffff, #E6E6E6);
background-image: -o-linear-gradient(top, #ffffff, #E6E6E6);
background-image: linear-gradient(top, #ffffff, #E6E6E6);
background-repeat: repeat-x;
border-color: #E6E6E6 #E6E6E6 #BFBFBF;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border: 1px solid #CCC;
border-bottom-color: #B3B3B3;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
position: relative;
margin-left: -1px;
float: left;
line-height: 20px;
float:left;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.col_4{
float:left;
}
.cell_1{
float:left;
width:40px;
height:30px;
padding:0px 0 0 ;
margin-left: 0;
}
.cell_2{
border-right:1px solid#ddd;
float:left;
width:186px;
height:25px;
text-align:center;
padding:5px 0 0 ;
}
.cell_3{
float:left;
width:50px;
height:25px;
text-align:center;
padding:4px 0 0 ;
}
</style>
Kırmızı ile işaretlediğim yerleri kendi site adresinizi yazınız.Sidebar ayarlarına gelicek olursak sayfanızsa sıkışıp aşağıya iniyorsa eğer 'width:186px' kodunu aratıp ordaki boyutları değiştirerek küçültüp büyütebilirsiniz. 

Bende kutu içine almadığı için eklentiyi ' &nbsp; '  kodunu koyarak boşluk bırakıp kutu içine aldım eğer sizdede çerçeve varsa ve çerçeve içine almıyorsa kullanabilirsiniz yada eklentinizin altına birşeyler yazıp kutu içine almasını sağlayabilirsiniz.
Share:

28 Temmuz 2014 Pazartesi

Blogger Animasyonlu İletişim Formu

Written by   on   in ,  

 Sadece blog iletişim formu widget düzeni bulunan eklenti widget eklemek için gerçekleştirmek için hazır olduğunu ve doğrudan işlevi olarak kullanılabilir.Widget iletişim formunu özellikleri ile biz istediğimiz renkleri ve şekilleri maç için kendi tarzı ile görüntü stilini değiştirebilirsiniz. Biz iletişim formu eklendi animasyon efektleri ile görünmesini sağlayacaktır, ama biz hala animasyon efekti ile iletişim formu eklendi düzgün ve hala iletişim kurmak için kullanılabilir böylece ilk blog içine blogcular varsayılan görüntülemek için bir iletişim formu Widget ihtiyaç olmasına rağmen.Sonuç biz blogger varsayılan iletişim formu, sonraki adım ne istediğimizi göstermek için ve ekranın uzun veya ilk düzen biz CSS kullanarak gizlemek standart Widget veya basit olduğunu formu Widget irtibata geçecektir iletişim formu Widget değiştirmek için widget'ı yüklü olmasıdır.

1.  bloggera giriş yapın.
2. Ardından Gadget Ekle> Diğer Gadgetler> İletişim Formu Ekle> Düzen'i tıklatın ve sonra Kaydet'i tıklatın.
3. Daha  Sonra Şablon> HTML'yi Düzenle tıklayın .CTRL+F yardımıyla ]]></b:skin> kodunu aratın.
4. aşagıdaki kodu ]]></b:skin> kodunun üstüne yapıştırın.



5. Sonra yeni Bir Sayfa Açın ve aşagıdaki verdigim kodu Html kısmına yapıştırın ve kaydedin işlem tamamdır.



DEMO:





Share: