Blogger Sosyal Medya Eklentisi ve Email Takip Html Kodu

Herkes çogunlukla sosyal medyaya kayıtlı olduğu alanları toplu ve düzgün bir şekilde göstermek istiyor...
Buna istinaden bende böyle bişey paylaşmak istedim çok sade ve hoş görünüyor. Bütün renk te temalara koyuldugunda çok hoş bir görüntü bırakıyor sizlerle paylaşmak istedim. Biraz anlatmak gerekirse üzerine gelince renklenen ve parlayan java kodla yaptım. Önizlemesi aşağıdadır. İsterseniz demosu için buraya tıklayın.

Kodlarımızı şu şekilde ekliyoruz;
Tasarım>Gadget  Ekle>Html/JavaScript Ekle  aşağıdaki kodları sitenize eklemek  
Kod:

<style type="text/css">

.mbt a{
    color: #6e6e6e;
    font: bold 12px Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: 7px 12px;
    position: relative;
    display: inline-block;
    text-shadow: 0 1px 0 #fff;
    -webkit-transition: border-color .218s;
    -moz-transition: border .218s;
    -o-transition: border-color .218s;
    transition: border-color .218s;
    background: #f3f3f3;
    background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1));
    border: solid 1px #dcdcdc;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}
.mbt a:hover {
    color: #333;
    border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbt a:active {
    color: #000;
    border-color: #444;
}


.mbtbar{ width:280px; float: left; margin-left:3px; margin-top:5px; padding:0;}

.mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 0px 0 15px 0; float: left; width: 100%; font-family: Helvetica, Arial;}

.mbtbar .emailsub .emailupdatesform{width: 100%; float: right; padding:0px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 130px; height:30px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput:hover{

border-color: #999;
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates:hover{ border-color: #666; 
    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2)
    -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); cursor:pointer;
}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 10px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 0px 8px; color: #989898; font-size: 14px;  width: 145px; height:28px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 0px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

</style>   <!--[if IE 8]> <style>
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #F3F3F3;  float: left; border: 1px solid #dcdcdc; padding: 5px 10px; color: #989898; font-size: 12px;  width: 130px; height:18px;   border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;}

.mbtbar .emailsub .emailupdatesform input.joinemailupdates{
border: solid 1px #dcdcdc;
    background: #F3F3F3;
   font-family:Helvetica, Arial;
text-transform: none; color: #989898; height: 25px; padding: 0 5px; margin: 0 0 0 5px; font-weight:bold; font-size:14px; height:30px;
  border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
}

</style> <![endif]-->
<div class="mbt" style="padding: 0pt 0pt 0pt 5px;">
<table>
    <tbody>
        <tr>
            <td><a rel="nofollow" target="_blank" href="http://feeds.feedburner.com/ocabbaroglu"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzbqApEXK9O_D8Jrr9hM11FbNmTOUNGveKmaPpnemP43LIJ7-1thNaz4hlR2mOANTb_rxP_pba0h-mzgHT4DWM0xvxRfHrL14Vl0RpuxrOgTap_OGr31eMrSPxANVdoLXkyAmsUTbr-Rc/s1600/rss.png" /></a></td>
            <td><a style="margin-left:5px;" href="http://twitter.com/ozicab" rel="nofollow" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg76HNihCYNcwyrEoUI3OaedvICqgp6Llx6kFmM8GB8BbRUovHo8jDnE30gOyJmB4aqqA7VDyG9k-QNh-wfcF0u7bymgEtFrh-QuPi_9UDZjTOAiGkhbpIMvB_5pc_2Nh8s0yh6GUD5kmg/s1600/twitter.png" /></a></td>
            <td><a style="margin-left:5px;" href="http://facebook.com/oguzhanpage" rel="nofollow" target="_blank"><img border="0" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnNaSPOReaVEWNGo7HY-C0WLfbmmWo3RFCfPYXOD6mdTjTQE9y9TSO-sC3VTbAuUjDrOOvF1MOA8-zhf_o5RyKulC-obC6AX3e2hJ_XSyHVN32IDN-yydHr96ltDcLNCh9xJ4ACDIR5rw/s1600/facebook.png" /></a></td>
        </tr>
    </tbody>
</table>
<div class="mbtbar">
<div class="emailsub">
<div class="emailupdatesform">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ocabbaroglu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <input gtbfieldid="10" class="emailupdatesinput" name="email" value="Email Adresin..." onblur="if (this.value == '') {this.value = 'Email Adresin...';}" onfocus="if (this.value == 'Email Adresin...') {this.value = '';}" type="text" /><input value="yasarguner" name="uri" type="hidden" /><input value="Takip&ccedil;i ol" class="joinemailupdates" type="submit" />
</form>
</div>
</div>
</div>
</div>

Blogger Sayfa Numaralandırma

Yine Blogger İpuçları Serisi ile devam ediyoruz arkadaşlar. Bugün, anlatımı birçok sitede mevcut olduğu halde herkesin yapamadığı bu eklentiyi yapıcaz inşallah.Benim blogumda da kullandığım üzere bu eklenti Wordpress bloglardan görülerek Blogger’a uyarlanmıştır. Yapacağımız bu sayfalandırma eklentisi bence herkesin blogunda olmasını istediği ve gerçekten olması gereken bir eklenti. Şimdi Gelelim yapımına..

Yerleşim/HTML’yi Düzenle sekmesine gelip “Widget Şablonlarını Genişlet” tikini aktif hale getirdikten sonra </b:skin> kodundan önce şu kodları yapıştıralım;

Kod:

.showpageArea {
  font-family:verdana,arial,helvetica;
  color: #000;
  font-size:14px;
  margin:10px;
  }
 
.showpageArea a {
  color: #000;
  text-shadow:0 1px 0px #fff;
    font-weight: 700;
  }
 
.showpageNum a {
  padding: 3px 8px;
color: #000;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd ;
  }
 
.showpageNum a:hover {
  border:1px solid #888;
  background: #e0e0e0 ;
  }

.showpageOf{
  margin:0 8px 0 0;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666 ;
  text-decoration: none;
  }

Kodu Koyduk 3 tamam. Şimdi </body> Tagını Arıyoruz Ve Diğerindeki Gibi </body> Tagının Bi
Üstüne Aşağıdaki Kodları Koyuyoruz Bitti.

Kod:

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=9;
var numshowpage=4;
var upPageWord =&#39;Önceki&#39;;
var downPageWord =&#39;Sonraki&#39;;
</script>
<script src='http://tema.dataservis.org/eklentiler/blogger-numaralandirma.js' type='text/javascript'/>

Artık Blogumuz Önceki Sonraki Sayfalar Değilde, Numaralandırma Şeklinde Gözükecektir. Güle güle kullanın.

Manşetli Düzenlenmiş Maroon Blogger Teması

İndir / Download