Blogger Öne Çıkan Yayın Eklentisi

Blogger'dan bir yenilik daha.İstediğiniz bir yayınızı ''Öne Çıkan Yayın'' gadgeti ile ön plana çıkarabilirsiniz.



Yerleşim-Gadget ekle aşamasından sonra 3.sırada bulunan ''Öne Çıkan Yayın'' gadgetini seçerek aşağıdaki resimde olduğu gibi bir etiket seçerek o etikete ait yayını seçip kaydet diyoruz.Ön plana çıkardığımız yayını istediğimiz yere sürükleyebiliriz.

• Öne Çıkan Yayın eklentisi ile sadece bir yayını gösterebiliriz.

www.nethocam.com

Devamını Oku

Blogger İletişim Formu Ekleme

Web sitesinde olması gereken iletişim formunun nasıl oluşturulup eklendiğini göstereceğiz.Google'nin de önem verdiği iletişim bölümü tüm web sitelerinin olmazsa olmazlarındandır.İletişim formu aracılığıyla sitenizdeki kullanıcılar sizinle iletişime geçebilme imkanı sağlamaktadır.


İletişim bölümü olmayan siteler güvensiz olarak değerlendirilmektedir.Onun için iletişim formu Seo açısından artı 1 puan demektir.



1.Aşama


İlk önce Blogger adresinizden Yerleşim-Gadget Ekle-Diğer Gadgetler deyip İletişim Formunu Blogger'a ekliyoruz.

2.Aşama

Şablonu düzenle kısmından kısa yoldan Widget'a atla bölümünden ContactForm1 kısmına tıklıyoruz.Eğer kodlar kapalıysa ► ikonu olan satıra tıklayıp kodları genişletiyoruz.

Daha sonra



<b:widget id='ContactForm1' locked='false' title='İletişim Formu' type='ContactForm'>
 <b:includable id='main'>
kısmından sonra başlayarak

</b:includable>  yan taraftaki kodlara kadar aradaki kodları siliyoruz.Yan taraftaki kodlar kalacak.
 </b:widget>



Aradaki kodları sildikten sonra şablonu kaydet diyoruz.Bu şekilde iletişim formu ana sayfadan çıkarıp ayrı bir iletişim formu olacak şeklinde düzenleyeceğiz.

3.Aşama

Blogger Sayfalar bölümünden yeni bir sayfa oluştur deyip sayfa ismine iletişim yazarak sol üst köşede bulunan HTML olan kısmına aşağıdaki istediğiniz farklı iletişim formu kodlarından birini ekleyebilirsiniz.Ekledikten sonra yayınla diyoruz.

İletişim Formu Çeşitleri

Standart İletişim Formu

<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p>İsim<p>
        <input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
        <p>E-Posta *</p>
        <input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
        <p>Mesaj *</p>
        <textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
        <input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder'/>
        <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>
      </form>
    </div>
  </div>
</div>

İletişim Formu 1

<style type='text/css'>
#ContactForm1{display:none;}
#contact_wrap{width:321px;height:360px;border-radius:1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#ccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f2f2f2',endColorstr='#cccccc');background-image:linear-gradient(top,#f2f2f20%,#e6e6e650%,#cccccc100%);box-shadow:1px 1px 5px #ccc;margin:auto;padding:25px;}
#contact_wrap h3{color:#e8f3f9;font-family:"Microsoft Sans Serif",Georgia,arial;font-size:20px;font-weight:400;text-align:center;text-shadow:2px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;position:relative;margin:0 -36px 20px;padding:12px;}
#contact_wrap h3:before{content:' ';position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px;}
#contact_wrap h3:after{content:' ';position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px;}
#ContactForm1_contact-form-name{width:270px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQWOLuajrNi0Jmf_DAdzvgD4oH4gG4pAodftdQ3QDblVl5lTe7njwAtn4MlVCT7uP7aq_7VkqbxLjzPR7unbELTR6arIRlEmHmLF4gRu5bFEPqqg7shS_pVkE7PnXyeMw3pbrXfoN1lmU/s1600/user.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-email{width:270px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqC4PGKaFS1mD6c-AMAROlnrCzJOxZWqK7xTU8qCJRH_aSkrtjtuVU8k088HmQasOuL9Q_mg_VkDgDP3W9p8Ie28JyR_8wA1WvFry1F_uzlppPhwLVrsVGxx2R9hakkAEvrplgVE153dY/s1600/msg2.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-email-message{width:270px;height:150px;font-family:Arial, sans-serif;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_N4OFvkjYUukGAD9-fabHE_4ifZJ0dmIPAAjlYjKGD-20cnaCQg6bxgRSFMp2xwbx6-C4MhjVm5gfRAYbIG8iqDAuppSz_PvrUubroMZpwQRrskX2lOq3wb5BwZiaN2E403vzLT8tO1U/s1600/pen.png)no-repeat 10px 10px;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}
#ContactForm1_contact-form-submit{width:95px;height:30px;float:right;color:#FFF;cursor:pointer;border-radius:4px;text-shadow:1px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;border:1px solid #194f6d;margin:10px 0;padding:0;}
#ContactForm1_contact-form-submit:hover{background:#4c9bc9;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:320px;margin-top:35px;}
</style>
<div id="contact_wrap">
<h3>İletişim</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="İsim" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="E-Posta" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesaj" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

İletişim Formu 2

<style type='text/css'>
.contact-form-widget{width:500px;max-width:100%;background:#E6E7E8;color:#000;border:1px solid #656E75;box-shadow:0 1px 4px rgba(0,0,0,0.25);border-radius:10px;margin:0 auto;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{width:100%;max-width:100%;margin-bottom:10px;}
.contact-form-button-submit{background:#E6E7E8;color:#000;width:20%;max-width:20%;margin:0;border:1px solid #656E75;}
.contact-form-button-submit:hover{background:#679EC9;color:#fff;border:1px solid #FAFAFA;}
</style>
<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>İsim<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-Posta *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Mesaj *</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder'/>
<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>
</form>
</div>
</div>
</div>

İletişim Formu 3

<style type='text/css'>
.contact-form-widget{width:75%;max-width:100%;background:#5F8CB0;color:#fff;border:1px solid #5F8CB0;border-radius:1px;margin:0 auto;padding:10px;}
.contact-form-name,.contact-form-email,.contact-form-email-message{width:100%;max-width:100%;margin-bottom:10px;}
.contact-form-button-submit{height:40px;color:#5F8CB0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMf8KSQrP9u1dSNZs0HhfdOk8v3frGmcWqFltnldtNCu5EQrWJiKH-Iulb4ObNx0PNdpwb6AySjMP62RvOlhWWerhrGsRcNp6JMs9sWTkU-95TLJGUDvihMArhyphenhypheniS0F4795OMOCRGIpgI2/s1600/send_message_40.png) #fff 5px center no-repeat;padding-left:44px;}
.contact-form-button-submit:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMf8KSQrP9u1dSNZs0HhfdOk8v3frGmcWqFltnldtNCu5EQrWJiKH-Iulb4ObNx0PNdpwb6AySjMP62RvOlhWWerhrGsRcNp6JMs9sWTkU-95TLJGUDvihMArhyphenhypheniS0F4795OMOCRGIpgI2/s1600/send_message_40.png) #357AE8 5px center no-repeat;border:1px solid #404040;color:#FFF;border-color:#2F5BB7;}
</style>
<div class='widget ContactForm' id='ContactForm1'>  <div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<p>İsim<p>
<input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/>
<p>E-Posta *</p>
<input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/>
<p>Mesaj *</p>
<textarea class='contact-form-email-message' cols='25' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea>
<input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Gönder'/>
<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>
</form>
</div>
</div>
</div>

İletişim Formunu Siteye Ekleme

Oluşturduğumuz İletişim Formunu  Yerleşim-Gadget Ekle-Sayfalar-Sayfalar Listesini Yapılandır kısmında bulunan iletişim sayfasını da ekleyip sitenizin üst bölümünde gösterebilirsiniz.

Önemli Not:

''İletişim formundan gönderilen mesajlar gelmiyor'' şikayetleri üzerine bir çözüm bulduk.Eğer iletişim formu üzerinden gönderilen mesajlar size gelmiyorsa Ayarlar Blog yazarları kısmından başka bir e posta adresinizi yönetici olarak ekleyin.Bu sayede iletişim formuna gönderilen mesajlar eklediğiniz ikinci e mail adresinize gelecektir.

Devamını Oku

Yazıları veya Kodları Çerçeve İçine Almak

Özel yazılarınızı veya kodlarınızı daha iyi vurgulamak için çerçeve içine almak oldukça yararlı olacaktır.


Bunu yapmak çok basit.Birkaç adımla istediğiniz yazıları veya kodları çerçeve içine alabilirsiniz.

Blogger'da yazı sayfasında sol üst köşesinde bulunan HTML olan bölüme gidiyoruz ve istediğimiz yere yapıştırıyoruz.

Ayrıca yazı bölümüne de direk yapıştırıp düzenleyebilirsiniz.


Renk kodlarınız istediğiniz şekilde değiştirebilirsiniz.Ama bizim hazırladığımız kalıpları kullanabilirsiniz.Çerçevenin içindeki yazılarımızı silip kendi yazılarınız veya kodlarınızı yazabilirsiniz.

Örnek 1

Nethocam | YAZINLARINIZ BURAYA...

çıkan çerçeve şekli

<pre style="background-color: #ebf3fb; border: 2px dashed rgb(235, 243, 251); overflow: auto; padding: 5px; text-align: justify; width: 629.6333618164063px;">Nethocam | YAZINLARINIZ BURAYA...<span style="font-size: 12px; line-height: 14px;"></span></pre>




HTML  içine yapıştıracağınız kodlar

Örnek 2

Nethocam | YAZILARINIZ BURAYA

çıkan çerçeve şekli

<pre style="background-color: darkgrey; border: 2px dashed rgb(235, 243, 251); overflow: auto; padding: 5px; text-align: justify; width: 629.6333618164063px;">Nethocam | YAZILARINIZ BURAYA<span style="font-size: 12px; line-height: 14px;"></span></pre>




HTML  içine yapıştıracağınız kodlar

Örnek 3

Nethocam| YAZILARINIZ BURAYA

çıkan çerçeve şekli

<pre style="background-color: #008000; border: 2px dashed rgb(235, 243, 251); overflow: auto; padding: 5px; text-align: justify; width: 629.6333618164063px;">Nethocam | YAZILARINIZ BURAYA<span style="font-size: 12px; line-height: 14px;"></span></pre>




HTML  içine yapıştıracağınız kodlar

Örnek 4

Nethocam | YAZILARINIZ BURAYA

çıkan çerçeve şekli

<pre style="background-color: #808080; border: 2px dashed rgb(235, 243, 251); overflow: auto; padding: 5px; text-align: justify; width: 629.6333618164063px;">Nethocam | YAZILARINIZ BURAYA<span style="font-size: 12px; line-height: 14px;"></span></pre>

HTML  içine yapıştıracağınız kodlar

Örnek 5

Nethocam| YAZILARINIZ BURAYA

çıkan çerçeve şekli

<pre style="background-color: red; border: 2px dashed rgb(235, 243, 251); overflow: auto; padding: 5px; text-align: justify; width: 629.6333618164063px;">Nethocam| YAZILARINIZ BURAYA<span style="font-size: 12px; line-height: 14px;"></span></pre>




HTML içine yapıştıracağınız kodlar

Devamını Oku

Blogger Sosyal Medya Butonları Eklentisi

Aranan harika bir Blogger eklentisi.Hazır temalarda karşılaştığımız sitenin üst bölgesinde yer alan Sosyal Medya İkonlarını sizlere eklenti olarak sunuyoruz.Tüm Sosyal Medya Hesapları yer almaktadır.Fare imleci İkonların üstüne geldiği zaman renk değişen etkili bir eklenti.

<ul class="spicesocialwidget"> <li class="facebook"> <a rel="nofollow" href="http://www.facebook.com/" target="_blank" title="facebook"> </a></li> <li class="googleplus"> <a rel="nofollow" href="https://plus.google.com/" target="_blank" title="googleplus"> </a></li> <li class="pinterest"> <a rel="nofollow" href="http://pinterest.com/" target="_blank" title="pinterest"> </a></li> <li class="twitter"> <a rel="nofollow" href="http://twitter.com/" target="_blank" title="twitter"> </a></li> <li class="rss"> <a rel="nofollow" href="http://feedburner.com/" target="_blank" title="rss"> </a></li> <li class="skype"> <a rel="nofollow" href="http://www.skype.com/" target="_blank" title="Skype"> </a></li> <li class="vimeo"> <a rel="nofollow" href="http://www.vimeo.com/" target="_blank" title="vimeo"> </a></li> <li class="dribbble"> <a rel="nofollow" href="http://www.dribbble.com/" target="_blank" title="dribble"> </a></li> <li class="flickr"> <a rel="nofollow" href="http://www.flickr.com/" target="_blank" title="flickr"> </a></li> <li class="linkedin"> <a rel="nofollow" href="http://www.linkedin.com/" target="_blank" title="linkedin"> </a></li> <li class="youtube"> <a rel="nofollow" href="http://www.youtube.com/" target="_blank" title="youtube"> </a></li> </ul> <style> ul.spicesocialwidget {float:right;} ul.spicesocialwidget li {float:left;list-style: none outside none;border:none;} ul.spicesocialwidget li a{background-color:transparent;background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png');background-repeat:no-repeat;background-size:auto 96px;border:0 none;color:white;direction:ltr;display:block; height:32px;overflow:hidden;text-align:left;text-decoration:none;text-indent:-999em;transition:all 0.2s ease 0s;width:32px} .ie7 ul.spicesocialwidget li a, .ie8 ul.spicesocialwidget li a{background-image:url('http://4.bp.blogspot.com/-Pe-J5S7YCa0/UdXsJoN7GLI/AAAAAAAAL68/ongZAtcNF1E/s1600/spice-social-gadget-sprite.png' )} ul.spicesocialwidget li.facebook a{ background-position:0 0} ul.spicesocialwidget li.flickr a{ background-position:-32px 0} ul.spicesocialwidget li.dribbble a{ background-position:-64px 0} ul.spicesocialwidget li.googleplus a{ background-position:-96px 0} ul.spicesocialwidget li.linkedin a{ background-position:-128px 0} ul.spicesocialwidget li.pinterest a{ background-position:-160px 0} ul.spicesocialwidget li.rss a{ background-position:-192px 0} ul.spicesocialwidget li.skype a{ background-position:-224px 0} ul.spicesocialwidget li.twitter a{ background-position:-256px 0} ul.spicesocialwidget li.vimeo a{ background-position:-288px 0} ul.spicesocialwidget li.youtube a{ background-position:-320px 0} ul.spicesocialwidget li.facebook a:hover, #sidebar ul.spicesocialwidget li.facebook a:hover{ background-position:0 -32px} ul.spicesocialwidget li.flickr a:hover, #sidebar ul.spicesocialwidget li.flickr a:hover{ background-position:-32px -32px} ul.spicesocialwidget li.dribbble a:hover, #sidebar ul.spicesocialwidget li.dribbble a:hover{ background-position:-64px -32px} ul.spicesocialwidget li.googleplus a:hover, #sidebar ul.spicesocialwidget li.googleplus a:hover{ background-position:-96px -32px} ul.spicesocialwidget li.linkedin a:hover, #sidebar ul.spicesocialwidget li.linkedin a:hover{ background-position:-128px -32px} ul.spicesocialwidget li.pinterest a:hover, #sidebar ul.spicesocialwidget li.pinterest a:hover{ background-position:-160px -32px} ul.spicesocialwidget li.rss a:hover, #sidebar ul.spicesocialwidget li.rss a:hover{ background-position:-192px -32px} ul.spicesocialwidget li.skype a:hover, #sidebar ul.spicesocialwidget li.skype a:hover{ background-position:-224px -32px} ul.spicesocialwidget li.twitter a:hover, #sidebar ul.spicesocialwidget li.twitter a:hover{ background-position:-256px -32px} ul.spicesocialwidget li.vimeo a:hover, #sidebar ul.spicesocialwidget li.vimeo a:hover{ background-position:-288px -32px} ul.spicesocialwidget li.youtube a:hover, #sidebar ul.spicesocialwidget li.youtube a:hover{ background-position:-320px -32px} </style>

Yerleşim-Gadget Ekle-Html Javascript  ile basit bi şekilde eklentiyi sitenize uygulayabilirsiniz.
Mavi ile işaretlediğimiz yerleri silerek kendi adreslerinizi yazabilirsiniz.



Sorularınızı yorum bölümüne yazarak bize ulaştırabilirsiniz.

Devamını Oku

Blogger Site Açılırken Pop-Up Açılan Facebook Eklentisi

Şüphesiz Web siteleri için sosyal medya vazgeçilmezdir.Siteye trafik akışlarının büyük bir bölümü Twitter Facebook gibi sosyal medya sitelerinden gelmektedir.Facebook üzerinden sitenizin tanıtımını paylaşımlarınızı binlerce kişiye ulaştırma imkanı vardır.Sizlerde sosyal medya üzerinden kullanıcı kazanmak için mutlaka Facebook Twitter gibi alanlarda aktif olmanız gerekmektedir.

İşte Blogger için Siteye girerken açılan Pop-Up Facebook Sayfası eklentisini sizlerle paylaşacağız.

Blogger Pop-Up Facebook Eklentisini, Yerleşim-Gadget Ekle-Html Javascript bölümünü aşağıdaki kodu yapıştırarak kaydedip kullanabilirsiniz.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<style>

#fbox-background {

display: none;

background: rgba(0,0,0,0.8);

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 99999;

}



#fbox-close {

width: 100%;

height: 100%;

}



#fbox-display {

background: #eaeaea;

border: 5px solid #828282;

width: 340px;

height: 230px;

position: absolute;

top: 32%;

left: 37%;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

}



#fbox-button {

float: right;

cursor: pointer;

position: absolute;

right: 0px;

top: 0px;

}



#fbox-button:before {

content: "CLOSE";

padding: 5px 8px;

background: #828282;

color: #eaeaea;

font-weight: bold;

font-size: 10px;

font-family: Tahoma;

}



#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {

color: #aaaaaa;

font-size: 9px;

text-decoration: none;

text-align: center;

padding: 5px;

}

</style>

<script type='text/javascript'>

//<![CDATA[

jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...

if (arguments.length > 1 && String(value) !== "[object Object]") {

options = jQuery.extend({}, options);

if (value === null || value === undefined) {

options.expires = -1;

}

if (typeof options.expires === 'number') {

var days = options.expires, t = options.expires = new Date();

t.setDate(t.getDate() + days);

}

value = String(value);

return (document.cookie = [

encodeURIComponent(key), '=',

options.raw ? value : encodeURIComponent(value),

options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE

options.path ? '; path=' + options.path : '',

options.domain ? '; domain=' + options.domain : '',

options.secure ? '; secure' : ''

].join(''));

}

// key and possibly options given, get cookie...

options = value || {};

var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;

return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;

};

//]]>

</script>

<script type='text/javascript'>

jQuery(document).ready(function($){

if($.cookie('popup_facebook_box') != 'yes'){

$('#fbox-background').delay(5000).fadeIn('medium');

$('#fbox-button, #fbox-close').click(function(){

$('#fbox-background').stop().fadeOut('medium');

});

}

$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });

});

</script>

<div id='fbox-background'>

<div id='fbox-close'>

</div>

<div id='fbox-display'>

<div id='fbox-button'>

</div>

<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=Adresiniz&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'

style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>

<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://helplogger.blogspot.com" rel="nofollow">Helplogger</a></div>

</div>

</div>

DEMO




www.nethocam.com
Dikkat:Mavi ile işaretlediğimiz'Adresiniz'' kısmı yerine Facebook Sayfanızın url adresini yapıştırmayı unutmayınız.

Ayrıca  mavi ile yazdığımız 5000(5 saniye) yerine dilediğiniz sayıyı yazabilirsiniz.Şuan ki haliyle Siteniz açıldıktan 5 saniye sonra Facebook Sayfanız ekrana gelecektir.

Devamını Oku

Blogger Yatay Üst Menü Ekleme

Blogger'in olmazsa olmazlarından biriside ''Menü'' bölümüdür.Menülerle çok sayıda etiketinizi tek menüde toplayabilir ziyaretçilerinize kolaylıkla ulaşabilmesini sağlayabilirsiniz.

Bazı hazır temalarda bulunmayan üst menü bölgesini kolaylıkla nasıl eklenir göstereceğiz.

1.Aşama

Öncelikle Blogger-Şablon-HTML'yi Düzenle adımlarını takip ederek ]]></b:skin> kodunu buluyoruz.Ctrl-F yaparak çıkan kutucuğa kodu yazıp aratınız.Aşağıdaki kodu ]]></b:skin> yazısının hemen üstüne yapıştırıp şablonu kaydediyoruz.

#newnavbar ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

#newnavbar li a{
color:#000000;
}

#newnavbar li a:visited {
color: #c00000;
}

#newnavbar li a:hover {
color:  #c00000;

}

Düzenlemeler:

• font-size:100%; bölümünden menünün büyüklüğünü değiştirebilirsiniz.Örneğin %100 değerini %150 yapabilirsiniz.

• #000000 menünün renk kodlarını değiştirebilirsiniz.

• newnavbar li a:hover kodundaki #c00000 üstüne gelindiğinde değişen rengini değiştirebilirsiniz.

2.Aşama

Yerleşim-Gadget Ekle-HTML/JavaScript adımlarını takip ederek aşağıdaki kodu Menü olan yere gadget olarak ekleyip kaydediyoruz.

<div id='newnavbar'>
<ul>
<li><a href="http://www.nethocam.com">Ana Sayfa</a></li>
<li><a href="Url1">Test 1</a></li>
<li><a href="Url2">Test2</a></li>
<li><a href="Url3">Test3</a></li>
<li><a href="Url4">Test4</a></li>
<li><a href="Url5">Test5</a></li>
</ul></div>

• Url olan yere linki test yazan yere ise menüdeki kategorinin ismini yazıyorsunuz.

Kırmızı işaretli yere kendi sitenizin ismini yazmayı unutmayınız.



sorularınızı yorumlarda belirtebilirsiniz..

Devamını Oku