Blogger İçin Youtube Video Paylaşım Gadgeti

   Blogger sitelerinde Youtube videolarınızı yayınlamak için çok fazla seçenek yoktur,herkes buna bir çözüm arar ama maalesef aradığınız çözümleri bulamazsınız.Bazı seçenekler olsa da zamanla kodların güncellenmesi gerekmekte yoksa çalışmazlar.

   Şimdi size verecek olduğum bu kod sayesinde Youtube videolarınızın tamamını yada belirttiğiniz kadar videoları Blogger ana sayfanızda yayınlayabiliceksiniz.

   Kurulumu ve kullanımı oldukça basit Gadget ekleme yöntemi ile bu işlemimizi yapacağız
Kumanda Paneli > Yerleşim > Gadget Ekle > HTML/Javascript yolunu izleyin açılan kutu içerisine aşağıda verecek olduğum kodları ve renkli renkleri düzenledikten sonra kopyalayıp yapıştırın ve sayfanızın neresinde görünmesini istiyorsanız gadget'i oraya sürükleyip bırakın.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>
    <style type="text/css">
    div.ytc {clear:both;padding:5px;font-size:11px;}
    div.ytc.odd {background-color: #eee;}
    div.ytc_thumb {position:relative;float:right;margin-left:4px;line-height:1;}
    div.ytc_thumb img {width:69px;height:52px;border:1px solid #888;}
    div.ytc_title {font-weight:bold;}
    </style>
    <script type='text/javascript'>
    var ytfUserName = "TheAlper061";
    var ytfMaxResults = 8;
    var ytfAllow = "";
    var ytfDisallow = "";
    var ytfEmpty = "No entries";

    $(document).ready(function() {
      $.getJSON("http://pipes.yahoo.com/pipes/pipe.run?_id=58c841d14337ba4fbf693abd9701dc49&_render=json&max-results="+ytfMaxResults+"&allow="+ytfAllow+"&disallow="+ytfDisallow+"&user="+ytfUserName+"&_callback=?", function(response) {
        var htm = "";
        for(var i=0;i<response.count;i++) {
          var item = response.value.items[i];
          htm += '<div class="ytc';
          if(i%2 == 1) htm += ' odd';
          htm += '"><div class="ytc_thumb"><a target="_blank" href="' + item.link + '"><img title="' + item.title + '" src="' + item.thumb + '"/></a></div>';
          htm += '<div class="ytc_title"><a target="_blank" href="' + item.link + '">' + item.title + '</a></div>';
          htm += '<div class="ytc_description">' + item.description + '</div><div style="clear:both;"></div></div>';
        }
        if(htm == "") htm = ytfEmpty;
        $("#ytfeed").html(htm);
      });
    });
    </script>
    <div id="ytfeed">Loading...</div>

Kodlarda bozulma durumu olursa eğer buradan kodları indirerek kullanabilirsiniz.

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!

Responsive Accordion Menü

Accodion menülere bir diğer örnek daha bunu ekleyebiliriz.

Accordion menü nedir nasıl kullanılır bu soruların cevabını herkes biliyordur diye açıklamaya gerek duymuyorum.

Genel amaçlı her şekilde kullanılmaya elverişli menüler olması sebebi ile istediğiniz gibi de düzenleyebilirsiniz.Sadece biraz CSS kodlamayı bilmeniz gerekiyor.

JAVASCRİPT KODLARI

$( "section.aw-accordion div" ).mouseover(function() {
  $(this).css('width','50%');
  $(this).siblings('div').css('width','14%');
});

CSS KODLARI

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400&subset=latin,latin-ext);

body{
  background:#34495e;
  font-family:'Open Sans', sans-serif;
}

section.aw-accordion{
  width:800px; 
  margin:40px auto;
  margin-bottom:30px;
}

section.aw-accordion .one, 
section.aw-accordion .two, 
section.aw-accordion .three, 
section.aw-accordion .four{
  font-size:14px;
  width:23%;
  float:left;
  height:230px;
  display:inline-block;
  z-index:1;
  position:relative;
  overflow:hidden;
  padding:1%;
  transition:all 200ms cubic-bezier(0.645, 0.575, 0.090, 1.000);
  cursor: default;
}

section.aw-accordion .one span, 
section.aw-accordion .two span, 
section.aw-accordion .three span, 
section.aw-accordion .four span{
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  height:100%;
  display:table;
}

section.aw-accordion .one{
  background-color:#3498db;
  border-radius:10px 0 0 10px;
}

section.aw-accordion .two{
  background-color:#e74c3c;
}

section.aw-accordion .three{
  background-color:#1abc9c;
}

section.aw-accordion .four{
  background-color:#f1c40f;
  border-radius:0 10px 10px 0;
}

section.aw-accordion .one:hover, 
section.aw-accordion .two:hover, 
section.aw-accordion .three:hover, 
section.aw-accordion .four:hover{
  overflow-y: auto;
}

section.aw-accordion .one:hover span,
section.aw-accordion .two:hover span,
section.aw-accordion .three:hover span,
section.aw-accordion .four:hover span{
   background: -webkit-linear-gradient(left, rgba(255, 255, 255, .7), rgba(255, 255, 255, .7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

section.aw-accordion div::-webkit-scrollbar {  
    width: 12px;  
}  
section.aw-accordion div::-webkit-scrollbar-track {  
    background-color: rgba(1, 1, 1, .1);
}  
section.aw-accordion div::-webkit-scrollbar-thumb {  
    background-color: rgba(1, 1, 1, .2);
}  
section.aw-accordion div::-webkit-scrollbar-thumb:hover {  
    background-color: rgba(1, 1, 1, .3);
}  

section.aw-accordion div img{
  float:left; 
  margin:0 10px 0 0;
  border:3px solid rgba(255, 255, 255, .2);
  box-shadow:0 0 15px rgba(1, 1, 1, .1);
  -webkit-box-shadow:0 0 15px rgba(1, 1, 1, .1);
  -moz-box-shadow:0 0 15px rgba(1, 1, 1, .1);
  width:150px;
}

section.aw-accordion div img,
section.aw-accordion div h1{
  opacity:.3; 
  transition:all .3s
}

section.aw-accordion div:hover img,
section.aw-accordion div:hover h1{
  opacity:1;
}

section.aw-accordion div h1{
  margin:0 0 5px;
  font-weight:300; 
  color:white;
}

@media (max-width:1024px){
  section.aw-accordion .one,
  section.aw-accordion .two,
  section.aw-accordion .three,
  section.aw-accordion .four{
    font-size:12px;
  }

  section.aw-accordion div img{
    width:80px;
  }

  section.aw-accordion div h1{
    font-size:120%
  }
}

@media (max-width:768px){
  section.aw-accordion div img{
    width:60px;
  }

  section.aw-accordion div h1{
    font-size:100%
  }
}

/* Styling Demo */
section.aw-accordion > h1{
  color:#233445;
  display:block;
  width:100%;
}

section.aw-accordion > h1 > .read-article{
  color:#233445;
  border-radius:5px;
  border:1px solid #233445;
  padding:4px 8px;
  text-decoration:none;
  float:right;
  text-align:center;
  font-size:80%;
}

section.aw-accordion > h1 > .read-article:hover{
  color:white;
  border:1px solid white;
}

@media (max-width:768px){
  section.aw-accordion{
    width:100%; 
  }
  section.aw-accordion h1{
    font-size:80%;
    letter-spacing:-1px;
  }
}

HTML KODLARI

<section class="aw-accordion">
    <h1>Responsive Accordion Content
    <a href="#" class="read-article">Read Article</a></h1>
    <div class="one">
        <h1>Sport</h1>
        <span><img src="http://lorempixel.com/150/150/sports">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit augue at libero porta, eu euismod libero cursus. Aliquam id dui nec tortor sodales luctus. Aenean lobortis tortor euismod, malesuada sapien in, euismod ipsum. Maecenas blandit tortor purus, eu mattis libero ullamcorper eget. Phasellus in metus et velit euismod efficitur a non est. Quisque placerat egestas scelerisque. Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh. Nulla vel nunc a ipsum interdum hendrerit. Curabitur arcu lectus, scelerisque sit amet lectus a, cursus pretium nibh. Nunc a arcu efficitur, pharetra dui sed, sodales felis. Duis eget pulvinar libero, at aliquam dui. Donec quis nulla vitae leo volutpat sodales.</span>
    </div>

    <div class="two">
        <h1>People</h1>
        <span><img src="http://lorempixel.com/150/150/people">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh.Morbi nec venenatis lectus.Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh.Morbi nec venenatis lectus. Vestibulum blandit augue at libero porta, eu euismod libero cursus. Aliquam id dui nec tortor sodales luctus. Aenean lobortis tortor euismod, malesuada sapien in, euismod ipsum. Maecenas blandit tortor purus, eu mattis libero ullamcorper eget. Phasellus in metus et velit euismod efficitur a non est. Quisque placerat egestas scelerisque. Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh. Nulla vel nunc a ipsum interdum hendrerit. Curabitur arcu lectus, scelerisque sit amet lectus a, cursus pretium nibh. Nunc a arcu efficitur, pharetra dui sed, sodales felis. Duis eget pulvinar libero, at aliquam dui. Donec quis nulla vitae leo volutpat sodales.</span>
    </div>

    <div class="three">
        <h1>Nightlife</h1>
        <span><img src="http://lorempixel.com/150/150/nightlife">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit augue at libero porta, eu euismod libero cursus. Aliquam id dui nec tortor sodales luctus. Aenean lobortis tortor euismod, malesuada sapien in, euismod ipsum. Maecenas blandit tortor purus, eu mattis libero ullamcorper eget. Phasellus in metus et velit euismod efficitur a non est. Quisque placerat egestas scelerisque. Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh. Nulla vel nunc a ipsum interdum hendrerit. Curabitur arcu lectus, scelerisque sit amet lectus a, cursus pretium nibh. Nunc a arcu efficitur, pharetra dui sed, sodales felis. Duis eget pulvinar libero, at aliquam dui. Donec quis nulla vitae leo volutpat sodales.</span>
    </div>
     
    <div class="four"> 
        <h1>Food</h1>
        <span><img src="http://lorempixel.com/150/150/food">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum blandit augue at libero porta, eu euismod libero cursus. Aliquam id dui nec tortor sodales luctus. Aenean lobortis tortor euismod, malesuada sapien in, euismod ipsum. Maecenas blandit tortor purus, eu mattis libero ullamcorper eget. Phasellus in metus et velit euismod efficitur a non est. Quisque placerat egestas scelerisque. Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh.Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh.Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh.Morbi nec venenatis lectus.Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh.Morbi nec venenatis lectus.Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh.Morbi nec venenatis lectus. Vivamus vehicula velit eu venenatis vulputate. In hac habitasse platea dictumst. Duis nibh tellus, commodo vitae dapibus nec, blandit eu nibh.</span>
    </div>
</section>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!

Blogger Dinamik Tab Menü

Yazı içerisinde kullanımında temalara göre sorunlar çıkarıyor siz yine bir deneyin.Gadget ekleme yöntemi ile kullanımı tavsiye ederim

Aşaıda ki kodları kopyalayın ve gerekli yerleri düzenleyerek kullanın.

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
.tabs{
  width:50%;
  margin:10px auto;
}
.tab-buttons span{
  font:400 14px 'open sans',sans-serif;
  color:#333;
  background:#eee;
  cursor:pointer;
  border-bottom:2px solid #ddd;
  display:inline-block;
  margin-right:10px;
  padding:10px;
}
.tab-buttons span.active{
  border-bottom:2px solid #333;
}
.tab-content{
  margin-top:15px;
  border-bottom:3px solid #ddd;
  padding:15px;
  background:#eee;
  font:400 13px 'open sans',sans-serif;
  color:#333;
}
</style>
<div class='tabs'>
  <div class='tab-buttons'>
    <span class='content1'>Button 1</span>
    <span class='content2'>Button 2</span>
    <span class='content3'>Button 3</span>
  </div>
  <div class='tab-content'>
    
    <div class='content1'>This is the content of 1 container.This will be open when button 1 is clicked.This is the content of 1 container.This will be open when button 1 is clicked.This is the content of 1 container.This will be open when button 1 is clicked.</div>
    
    <div class='content2'>This is the content of 2 container.This will be open when button 2 is clicked.This is the content of 2 container.This will be open when button 2 is clicked.This is the content of 2 container.This will be open when button 2 is clicked.</div>
    
    <div class='content3'>This is the content of 3 container.This will be open when button 3 is clicked.This is the content of 3 container.This will be open when button 3 is clicked.This is the content of 3 container.This will be open when button 3 is clicked.</div>
    
  </div>
</div>
<script>
$('.tab-buttons span').first().addClass('active');
$('.tab-content>div').hide();
$('.tab-content>div').first().slideDown();
  $('.tab-buttons span').click(function(){
    $('.tab-buttons span').removeClass('active');
    var thisclass=$(this).attr('class');
    $(this).addClass('active');
    $('.tab-content>div').each(function(){
      if($(this).hasClass(thisclass)){
        $(this).fadeIn(800);
      }
      else{
        $(this).hide();
      }
    });
  });
</script>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!

Blogger Tabs Sekmeli Menü

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
</head>
<body>
 
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>
 
 
</body>
</html>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!

Accordion JQuery Menü

Yazılarınız içerisinde kullanın.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#accordion" ).accordion();
  });
  </script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>
 
 
</body>
</html>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!

Blogger Çoklu Demo ve Download Buton Kodları

   Blog sitenizde yayınlayacak olduğunuz yazılarında birden fazla download veya demo seçeneği kullanmak isterseniz aradığınız bu olabilir.

<style>
@font-face {font-family:'Oswald';font-style:normal;font-weight:300;
src:local('Oswald Light'), local('Oswald-Light'), url(http://themes.googleusercontent.com/static/fonts/oswald/v8/HqHm7BVC_nzzTui2lzQTDT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
/* Codex-KOM CSS Slide demom and doownload Button */
.doownload {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;
width:auto;height:50px;line-height:50px;border-radius:3px;}
.doownload h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;padding:0;width:100%;background-color:#20a3cb;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}
.doownload:hover h1{margin-left:100%;opacity:0.7;}
.doownload ul {display:inline-block;margin:0;padding:0;}
.doownload ul li {position:static;display:inline-block;padding:0 .1em;}
.doownload ul li::before {display:none;}
.doownload ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;background:none;transition:all 0.5s ease;}
.doownload ul li a:hover {background:#20a3cb;color:#fff;border-radius:2px;}
.doownload-infom{background:#1c94b9;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.doownload-infom h1{background-color:#20a3cb;}
.demom {font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;width:auto;height:50px;line-height:50px;border-radius:3px;}
.demom h1 {font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;
padding:0;width:100%;background-color:#a3acb2;transition: margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px;}
.demom:hover h1{margin-left:100%;opacity:0.7;}
.demom ul {display:inline-block;margin:0;padding:0;}
.demom ul li {position:static;display:inline-block;padding:0 .1em;}
.demom ul li::before {display:none;}
.demom ul li a {color:#fff;font-size:20px;margin:0;padding:.2em .4em;
background:none;transition:all 0.5s ease;}
.demom ul li a:hover {background:#a3acb2;color:#fff;border-radius:2px;}
.demom-infom{background:#8f979c;box-shadow:0 0 3px rgba(0,0,0,0.3);}
.demom-infom h1{background-color:#a3acb2;}
</style>
<div class="doownload doownload-infom">
<h1> doownload </h1>
<ul>
<li><a href="#" target="_blank"> doownload 1</a></li>
<li><a href="#" target="_blank"> doownload 2</a></li>
<li><a href="#" target="_blank"> doownload 3</a></li>
<li><a href="#" target="_blank"> doownload 4</a></li>
</ul>
</div>
<div class="demom demom-infom">
<h1> demom </h1>
<ul>
<li><a href="#" target="_blank"> demom 1 </a></li>
<li><a href="#" target="_blank"> demom 2 </a></li>
<li><a href="#" target="_blank"> demom 3 </a></li>
<li><a href="#" target="_blank"> demom 4 </a></li>
</ul>
</div>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!

Responsive Tab - Sekmeli Menü

   Responsive Tab - Sekmeli menü genelde uzun yazılarda yazı açıklayıcı olsun ama uzun da olmasın dersiniz bazen.Bu durumlarda tab menüler yardımımıza koşar,işte bu çok amaçlı kullanılabilir olması bir çok yerde sitemizde kullanabiliriz.

Responsive Tab - Sekmeli Menü Nasıl siteme eklerim ve kullanabilirim?

1- Kumanda paneli > Şablon > HTML Düzenle yolunu izleyiniz.
2- Şablon yedeğinizi her ihtimale karşı alınız.
3- CTRL+F tuşları ile ]]></b:skin> kodunu aradın.

]]></b:skin>

4- Üsteki kodu bulduktan hemen üst kısmına altta ki CSS kodlarını ekleyiniz.

/* BC61 Responsive Tab*/
.tabs {
position: relative;
font: normal normal 400 0 
'Electrolize', Helvetica, Arial, sans-serif;
color: #fff
}
.tabs input {display: none}
.tabs label {
position: relative;
z-index: 1;
display: inline-block;
width: 25%; /* 4 TABS = 100/4 = 25% */
box-sizing: border-box;
border: 1px solid #222;
border-left-color: #555;
font-size: 17px;
line-height: 45px;
cursor: pointer;
user-select: none
}
.tabs label span {
display: block;
padding: 5px;
background: #444
}
.tabs label span span {
padding: 0 20px;
background: transparent;
border-radius: 3px;
transition: background 0.4s
}
.tabs label:hover span span {background: #39a1dd}
.tabs input:checked + label {cursor: default}
.tabs input:checked + label span span {
background: #39a1dd
}
.tabs ul {
list-style: none;
position: relative;
display: block;
font: normal normal 400 15px 
'Roboto', Helvetica, Arial, sans-serif
}
.tabs ul li {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: auto;
padding: 25px;
background: #444;
box-sizing: border-box;
opacity: 0;
transition: all .4s;
border-top: 1px solid #666;
border-right: 1px solid #222
}
.tabs > .content1:checked ~ ul > .content1,
.tabs > .content2:checked ~ ul > .content2,
.tabs > .content3:checked ~ ul > .content3,
.tabs > .content4:checked ~ ul > .content4 {
  /* ADD MORE AS NEEDED */
position: relative;
z-index: 1;
opacity: 1;
transform: none
}
/* RESPONSIVE STACKING */
@media screen and (max-width: 780px) {
.tabs label {
display: block;
width: 100%;
border: 0;
padding-right: 0;
padding-left: 0;
text-align: left
}
  
.tabs ul {
margin-top: 0;
margin-right: 0;
margin-left: 0
}
}
/* FONTAWESOME */
.fa {
  margin-right: 10px;
  font-size: 20px;
  /* vertical-align: middle */ /* FONT SIZE 20+ */
}
/* A SAMPLE EFFECT - SLIDE DOWN */
.tabs ul li {transform: translateY(30px)}
/* RANDOM STUFF FOR THE PAGE */
.center { display: table; margin: 0 auto }
.italic { 
  color: #fff;
  font: italic normal 400 14px
    Helvetica, Arial, sans-serif;
  margin-bottom: 20px;
  display: inline-block
}
.italic:before, .italic:after {
  content: '_';
  position: relative;
  color: #3cf;
  top: -7px;
  margin: 10px
}
::selection {
  background: transparent;
  color: #3cf
}
::-webkit-scrollbar { display: none }

5- Daha sonra </head> kodunu bulun ve hemen üst kısmına font ve ikon kodlarını ekleyiniz.

</head>

Font ve ikon kodları

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

6- Şablonunuz kaydedin ve kumanda paneline geri dönelim.Tekrar kumanda panelinden > Yerleşim > Gadget ekle>HTML/Javascript yolunu izliyoruz ve açılan kutu içerisine altta ki HTML kodları ekleyin ve bu HTML kodlarını yazı içerisine eklediğinizde yazınızın içerisinde yer alacaktır.

<div class="tabs">
<!--Menu TAB 1-->
<input type="radio" name="tabs" checked id="tab1" class="content1">
<label for="tab1">
<span>
<span><div class="fa fa-home"></div>Tab 1
</span>
</span>
</label>
<!--Menu TAB 2-->
................

Sonraki sekme .... 

</div>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!

Classic Tab Menü

   Yazı içerisinde kullanmanızı tavsiye edebileceğim bir tab menü.Eklemesi ve kullanımı çok kolay.HTML tıklayarak kodu düzenledikten sonra kopyalayıp yapıştırın yazıya devam etmek için oluştura tıkladığınızda tamamdır.

<!-- Bilgi Cafem61 Çok Sekmeli Widget Menü Eklentisi --> 
<style type="text/css"> 
ul.tabs { 
margin: 0; 
padding: 0; 
float: left; 
list-style: none; 
height: 32px; 
border-bottom: 1px solid #5cacee; 
border-left: 1px solid #5cacee; 
width: 100%; 
}
ul.tabs li { 
float: left; 
margin: 0; 
cursor: pointer; 
padding: 0px 4px ; 
height: 31px; 
line-height: 21px; 
border: 1px solid #1c1c1c; 
border-left: none; 
font-weight: bold; 
background: #5cacee; 
overflow: hidden; 
position: relative; 
width:75px; 
}
ul.tabs li:hover { 
background: #a2b5cd; 
}
ul.tabs li.active{ 
background: #dddddd; 
border-bottom: 2px solid #ee2c2c; 
}
.tab_container { 
border: 1px solid #20b2aa; 
border-top: none; 
clear: both; 
float: left; 
width: 100%; 
background: #FFFFFF; 
}
.tab_content { 
padding: 10px; 
font-size: 1.2em; 
display: none; 
}
#container { 
width: 280px; 
margin: 0 auto; 
} 
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() { 
$(".tab_content").hide(); 
$(".tab_content:first").show(); 
$("ul.tabs li").click(function() { 
$("ul.tabs li").removeClass("active"); 
$(this).addClass("active"); 
$(".tab_content").hide(); 
var activeTab = $(this).attr("rel"); 
$("#"+activeTab).fadeIn(); 
}); 
}); 
</script>
<div id="container"> 
<ul class="tabs"> 
<li class="active" rel="tab1">Menü 1</li> 
<li rel="tab2">Menü 2</li> 
<li rel="tab3">Menü 3</li> 
</ul> 
<div class="tab_container"> 
<div id="tab1" class="tab_content"> 
<p>Menü 1 içeriğinizi buraya ekleyin 
</p> 
</div> 
<div id="tab2" class="tab_content"> 
<p>Menü 2 içeriğinizi buraya ekleyin 
</p> 
</div> 
<div id="tab3" class="tab_content"> 
<p>Menü 3 içeriğinizi buraya ekleyin  
</p> 
</div> 
</div> 
</div> 
<!-- Bilgi Cafem61 Çok Sekmeli Widget Menü Eklentisi -->

Eğer menü içerikleri içerisine resim eklemek isterseniz Menü 1 içeriğinizi buraya ekleyen yazan kısıma <img src="https://resim.png" /> bu kodu ekleyin ve sonra yazınızı ekleyin


Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!

Saf HTML / CSS3 Akordeon Menüleri

   Blogger sitenizde çok amaçlı olarak kullanabilen ve uzun yazılarda en çok bu tür özellikler ve eklentiler arayıp bulamadığımız zamanlar oluyordur eminim.Sitemizde daha önce de yayınlamış olduğumuz farklı kullanışlı ve gelişmiş WordPress tabanlı menüler olup Blogger için kodladığım Blogger Menülerine de göz atabilirsiniz.

   Bu akordeon menüleri sitemize nasıl ekleyebiliriz buna göz atalım;

• Kumanda Paneli> Şablon > HTML Düzenle yolunu izliyoruz.
• Daha sonra CTRL+F tuşları ile </b:skin> kodunu araıyoruz
• Bulduğumuz </b:skin> kodunun hemen üst kısmına aşağıdaki CSS3 kodlarını ekleyip şablonu kaydedin.

/ * Tüm akordiyon tipleri * / için Paylaşılan 
.accordion { 
    font-family: Arial, Helvetica, sans-serif; 
    margin: 0 auto; 
    font-size: 14px; 
    border: 1px solid # 542437; 
    border-radius: 10px; 
    width: 600px; 
    padding: 10px; 
    background: #fff; 
} 
.accordion ul { 
    list-style: none; 
    margin: 0; 
    padding: 0;     
} 
.accordion li { 
    margin: 0; 
    padding: 0; 
} 
.accordion [type = radio ], .accordion [type = checkbox] { 
    display: none; 
} 
.accordion etiketi { 
    display: block; 
    font-size: 16px; 
    line-height: 16px; 
    background: # D95B43; 
    border: 1px solid # 542437; 
    color: # 542.437; 
    text-shadow: 1px 1px 1px RGBA (255,255,255,0.3) 
    font-weight: 700; 
    cursor: pointer; 
    text-transform: büyük harf; 
    -webkit-geçiş: Tüm .2s kolaylığı Çıkış; 
    -moz-geçiş: hepsi .2s-out kolaylığı; 
} 
.accordion ul li etiketi: hover, .accordion [type = radio]: işaretli ~ etiket .accordion [type = checkbox]: işaretli ~ label { 
    background: # C02942; 
    color: #fff; 
    text -Gölge: 1px 1px 1px RGBA (0,0,0,0.5) 
} 
.accordion .content { 
    padding: 0 10px; 
    taşma: gizli; 
    border: 1px solid #fff; / * O güzel * / kaybolur, böylece sınır arka plan maç Make 
    -webkit-geçişi: bütün .5s-kolaylığı çıkışı; 
    -moz-geçiş: Tüm .5s-out kolaylığı; 
} 
.accordion p { 
    color: # 333; 
    margin : 0 0 10px; 
} 
.accordion h3 { 
    color: # 542437; 
    padding: 0; 
    margin: 10px 0; 
} 


/ * * Dikey / 
.vertical ul li { 
    taşma: gizli; 
    margin: 0 0 1px; 
} 
.vertical ul li Etiket { 
    padding: 10px; 
} 
.vertical [type = radio]: işaretli ~ etiket .vertical [type = checkbox]: işaretli ~ Etiket { 
    border-bottom: 0; 
} 
.vertical ul li etiketi: hover { 
    border: 1px solid # 542437; / * Biz sınır hover * / üzerinde kaybolur istemiyorum 
} 
.vertical ul li {.content 
    ; 0px: yükseklik 
    border-üst: 0; 
} 
.vertical [type = radio]: işaretli ~ etiket ~ .content. Dikey [type = checkbox]: işaretli ~ etiket ~ .content { 
    height: 300px; 
    border: # 542437 1px solid; 
}

HTML Kodu

<Div class = "akordeon dikey"> 
    <ul> 
        <li> 
            <işaretli input type = "radio" id = "radio-1" name = "radio-akordeon" = / "işaretli"> 
            = için <label "radyo 1 "> Başlık & nbsp; Bir </ label> 
            <div class = "content"> 
                <h3> Bu </ h3> bir örnek akordeon öğedir 
                <p> Lorem ipsum dolor, amet consectetur adipiscing elit otur. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "radio-2" name = "radio-akordeon" /> 
            < etiket = için "radyo-2"> Başlık & nbsp; İki </ label> 
            <div class = "content"> 
                <h3> burada Tamamen başka biri </ h3> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "radio-3" name = "radio-akordeon" /> 
            < etiket = için "radyo-3"> Başlık & nbsp; Üç </ label> 
            <div class = "content"> 
                <h3> Ben sonsuza kadar devam edebilir düşünüyorum </ h3> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit . Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "radio-4" name = "radio-akordeon" /> 
            < etiket = için "radyo-4"> Başlık & nbsp; Dört </ label> 
            <div class = "content"> 
                <h3> yanılmışım, ben bitti </ h3> kulüpler 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
    </ ul> 
</ div>

2.ci seçenek için yukarıda ki işlemleri tekrar yapın.
HTML Kodu

<Div class = "akordeon yatay"> 
    <ul> 
        <li> 
            <input type = "radio" id = "vert-1" name = işaretli "vert-akordeon" = / "işaretli"> 
            = "vert- için <etiket 1 "> Başlık & nbsp; Bir </ label> 
            <div class = "content"> 
                <h3> Bu </ h3> bir örnek akordeon öğedir 
                <p> Lorem ipsum dolor, amet consectetur adipiscing elit otur. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-2" name = "vert-akordeon" /> 
            < etiket = için "vert-2"> Başlık & nbsp; İki </ label> 
            <div class = "content"> 
                <h3> burada Tamamen başka biri </ h3> 
                <p> Lorem ipsum dolor, amet consectetur adipiscing elit otur. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-3" name = "vert-akordeon" /> 
            < etiket = için "vert-3"> Başlık & nbsp; Üç </ label> 
            <div class = "content"> 
                <h3> Ben sonsuza kadar devam edebilir düşünüyorum </ h3> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit . Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-4" name = "vert-akordeon" /> 
            < etiket = için "vert-4"> Başlık & nbsp; Dört </ label> 
            <div class = "content"> 
                <h3> yanılmışım, ben bitti </ h3> kulüpler 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
    </ ul> 
</ div>

<Div class = "akordeon yatay"> 
    <ul> 
        <li> 
            <input type = "radio" id = "vert-1" name = işaretli "vert-akordeon" = / "işaretli"> 
            = "vert- için <etiket 1 "> Başlık & nbsp; Bir </ label> 
            <div class = "content"> 
                <h3> Bu </ h3> bir örnek akordeon öğedir 
                <p> Lorem ipsum dolor, amet consectetur adipiscing elit otur. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-2" name = "vert-akordeon" /> 
            < etiket = için "vert-2"> Başlık & nbsp; İki </ label> 
            <div class = "content"> 
                <h3> burada Tamamen başka biri </ h3> 
                <p> Lorem ipsum dolor, amet consectetur adipiscing elit otur. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-3" name = "vert-akordeon" /> 
            < etiket = için "vert-3"> Başlık & nbsp; Üç </ label> 
            <div class = "content"> 
                <h3> Ben sonsuza kadar devam edebilir düşünüyorum </ h3> 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit . Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
        <li> 
            <input type = "radio" id = "vert-4" name = "vert-akordeon" /> 
            < etiket = için "vert-4"> Başlık & nbsp; Dört </ label> 
            <div class = "content"> 
                <h3> yanılmışım, ben bitti </ h3> kulüpler 
                <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse bys posuere lorem. Ipsum de Pellentesque hendrerit, vestibulum lorem luctus porttitor, eros sapien Mattis libero, euismod congue neque nisi. Mauris sempre ipsum metus sempre malesuada sit amet. Donec vel est justo, ac porta çapı. </ P> 
                <p> orci commodo blandit ut est içinde. Cras rhoncus ultricies augue. Proin quam odio, tristique ut tempus, Velit içinde aliquet venenatis. Pellentesque Ridiculus facilisis orci, ut congue mi rhoncus at. Sınıf vehicula dignissim neque, sed rhoncus magna ultricies et. </ P> 
            </ div> 
        </ li> 
    </ ul> 
</ div>

Blogumuza Abone Olun
Yeni Yazılar E-posta Adresinize Gelsin

Not: Gelen Maili Aktif  Etmeyi Unutmayınız!

Blogger Tab Sistemi CSS3 Menü

   Yayın içerisinde çok şık ve kullanışlı bir tab sistemi menü.Her yazınızda kullanabileceğiniz ve uzun yazılarda da konuyu kısalmak içinde uygun bir özellik.Açıkcası kullanış konusunda çok seçenek olması işimizi kolaylaştırabiliyor.

   Kullanımı konusunda bilgi vermek gerekiyorsa yapacak olduğunuz işlem şöyledir;
Yeni makale hazırlarken bu menüyü kullanacaksanız zaman HTML kısmına tıklayarak kodları ekleyip HTML kısmında iken düzenlenecek yerleri düzenleyin ve yazınıza Oluştur kısmından devam edin.Yada yeni başlayanlar için kolaylık olsun diye kodları not defterine ekleyin düzenleyip sonra HTML kısmından kodları ekleyin.
Kodlarda bozulma olursa altta ki butona tıklayarak kodları bilgisayarınıza indirebilirsiniz.

<style type="text/css">
judul {color: #fff;
margin-bottom: .5em;
font-size: 1.7em;
font-weight: bold;
text-shadow: 0 1px 0 rgba(0,0,0,1);
}
.slides {position: relative;
width: 500px;
height: 250px;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,.5);
border-radius: 5px;
background: #333;
border: 1px solid rgba(255,255,255,.1);
margin:0 auto;
}.slide {position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}.content {position: absolute;
width: auto;
transform: translateX(-100%);
top: 0;
opacity: 0;
padding: 20px;
transition: transform .5s ease-out, opacity 1s ease-out;
}.content p {font-size: .85em;
color: #fff !important;
}input[type=radio] {display: none;
}label {display: block;
position: absolute;
bottom: 0;
line-height: 3em;
width: 25%;
text-align: center;
cursor: pointer;
font-size: .8em;
z-index: 50;
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.25);
font-weight: bold;
background: rgb(135,224,253);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 );}.slide:nth-child(2) label {margin-left: 25%;
}.slide:nth-child(3) label {margin-left: 50%;
}.slide:nth-child(4) label {margin-left: 75%;
}input[type=radio]:checked ~ .content {transform: translateX(0);
opacity: 1;
}input[type=radio]:checked + label {background: #333;color: #ccc;text-shadow: none;}</style>
<div class="slides">
<div class="slide">
<input id="slide1" name="slideshow" type="radio" /><label for="slide1">CSS</label>
<div class="content">
<judul>CSS</judul>
<p>CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. Kita dapat mengontrol isi (konten) dan tampilan secara terpisah.</p>
</div>
</div>
<div class="slide">
<input id="slide2" name="slideshow" type="radio" /><label for="slide2">HTML</label>
<div class="content">
<judul>HTML</judul>
<p>HTML yang  singkatan dari HyperText Markup Language merupakan sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.</p>
</div>
</div>
<div class="slide">
<input id="slide3" name="slideshow" type="radio" /><label for="slide3">JQUERY</label>
<div class="content">
<judul>JQUERY</judul>
<p>jQuery adalah librari atau kumpulan kode JavaScript siap pakai. Keunggulan menggunakan jQuery dibandingkan dengan JavaScript standar, yaitu menyederhanakan kode JavaScript dengan cara memanggil fungsi-fungsi yang disediakan oleh jQuery. JavaScript sendiri merupakan bahasa Scripting yang bekerja disisi Client/Browser sehingga website bisa lebih interaktif.</p>
</div>
</div>
<div class="slide">
<input id="slide4" name="slideshow" type="radio" /><label for="slide4">JAVA SCRIPT</label>
<div class="content">
<judul>JAVASCRIPT</judul>
<p>JavaScript merupakan bahasa pemrograman berbasis client, artinya bahasa ini berjalan pada sisi browser pengguna (user) dan bukan pada server. Salah satu keuntungan dari bahasa ini adalah ringan karena berjalan pada masing-masing browser dan pekerjaan tidak di bebankan pada server. Jika di akses oleh 1000 orang maka setiap beban akan di tanggung oleh masing-masing browser, bukan server yang menanggung eksekusi 1000 pengakses tersebut.</p>
</div>
</div>
</div>

Kodlar içerisinde düzenlenecek yerleri farklı renklerle belirledim.

Gizle

Göster

CSS

CSS
CSS adalah bagian dari sebuah website yang khusus dibuat untuk mengatur tampilan sebuah website. Kita dapat mengontrol isi (konten) dan tampilan secara terpisah.

HTML

HTML
HTML yang singkatan dari HyperText Markup Language merupakan sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

JQUERY

JQUERY
jQuery adalah librari atau kumpulan kode JavaScript siap pakai. Keunggulan menggunakan jQuery dibandingkan dengan JavaScript standar, yaitu menyederhanakan kode JavaScript dengan cara memanggil fungsi-fungsi yang disediakan oleh jQuery. JavaScript sendiri merupakan bahasa Scripting yang bekerja disisi Client/Browser sehingga website bisa lebih interaktif.

JAVA SCRIPT

JAVASCRIPT
JavaScript merupakan bahasa pemrograman berbasis client, artinya bahasa ini berjalan pada sisi browser pengguna (user) dan bukan pada server. Salah satu keuntungan dari bahasa ini adalah ringan karena berjalan pada masing-masing browser dan pekerjaan tidak di bebankan pada server. Jika di akses oleh 1000 orang maka setiap beban akan di tanggung oleh masing-masing browser, bukan server yang menanggung eksekusi 1000 pengakses tersebut.

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!

Blogger Mega Açılır Menü Yapımı

   Mega navigasyon menüsüne sahip en büyük avantajı tek bir yerde bir araya toplanmış olarak sunulan etiketlere ait başlıkları sıralayarak yayınlayabilirsiniz, böylece ziyaretçilerin ilgi belirli bir kategoriyi ararken çok zaman harcamak zorunda kalmaz olmasıdır. Öte yandan,blogunuza temiz ve zarif görünmek devam edecektir.

   Menüye ait renkleri kullandığınız temaya göre düzenlenebilir ancak kodlarda belirli zamandan sonra bozulmalar olabiliyor.

   Şimdi Blogger Mega Açılır Menü Yapımı nasıl oluşturabiliriz ona bakalım.
1- Öncelikle blogger kumanda paneline giriş yapıyoruz.
2- Daha sonra Kumanda paneli > Şablon > HTML Düzenle yolunu izliyoruz.
3- Temanızın yedeğini her ihtimale karşı alıyoruz.
4- CTRL+F tuşları ile ]]></b:skin> kodunu aradıyoruz.

]]></b:skin>

5- ]]></b:skin> kodunun hemen üst kısmına altta ki kodları ekliyoruz.

/*  BC Mega Drop Down Menu Bar For Blogger */
ul.dropmenu{
 position: relative;
 margin: 0px;
 padding: 1px 0px 0px 0px;
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCNeWSJYKjKv-x-0DOLGhg2aRlXFOJSsIGL-CG3YTea6ximVie_6fYhjeVs5KWPSBdVL8qdegh6oP5ygj_DmQbmk-gpieTvKcbIKlB0_Dua26ZMaT5YZUWDKMcHQM7QGsMza8bY3Vk_A/s1600/navigation.png) repeat-x scroll 0 0;
 display:block;
 height: 35px;
 font-family:Verdana,Arial,Helvetica,sans-serif;
 font-size: 12px;
}
.dropmenu li{
 position: relative;
 list-style: none;
 float: left;
 margin: 0px;
 padding: 0px;
}
.dropmenu li a{
 height: 22px;
 padding: 9px 30px 0px 15px;
 display: block;
 cursor: point;
 border-right: solid 1px #4a779d;
 color: #FFFFFF;
 text-transform: uppercase;
 text-decoration: none;
}
.dropmenu li span{
 display: block;
 float: right;
 height: 10px;
 width: 10px;
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizLd0xz27-M8QXkLH79KhvMFRG9hSSYtVfHmjZ4rNnu9r_8IvMVOp_jBR1FanE2-uB5nhJ3tUiu8PkeqyC8kFENeSC0NRhoRiTlUu9O9US91Q55GcTmUWici5BUjCZC0EJHvwTJt8w7LQ/s1600/arrow_up.png) repeat-x scroll 0 0;
 position: absolute;
 top: 12px;
 right: 10px;
}
.dropmenu li  a:hover span{
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVSSe9RXVuFL59ZJBjv1mcxntWe98DEe4MQ2LYxYU9pMMi0URzmrQmq1wHwfNCFTM3KZtnR5qsn45o3UP8wLxLmIigvvnUpsmPU6sJ8M0pu3Tu3gD8v7THhjd10M49nsqVBgP_qjAOy7s/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu li:hover ul, .dropmenu li:hover div{
 display: block;
}
.dropmenu ul{
 position: absolute;
 display: none;
 width: 140px;
 padding: 0px;
 margin: 0px;
 border-bottom: 1px solid #ccc;
 background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9KD5u3Ran5DUEU1LD4fMPQt3XagVta41LjUDnLrc2Ssjo7zKwFroN8LSYhyphenhyphenXPVnGw9rr2zKKWs6iTf2v91XwqV8nSguFEVPRcqsr2my_8U9i4r7H6wkB2fTT9QuBGiDc01bGXJh8tgo/s1600/gradient.png) repeat-x scroll 0 0;
}
.dropmenu ul li{
 border: 0;
 float: none;
}
.dropmenu ul a {
  border: 1px solid #ccc;
  border-bottom: 0;
  white-space: nowrap;
  display:block;
  color: #0657AD;
  text-decoration: underline;
  text-transform: none;
}
a.selected, a:hover{
 color: #0657AD !important;
 background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9KD5u3Ran5DUEU1LD4fMPQt3XagVta41LjUDnLrc2Ssjo7zKwFroN8LSYhyphenhyphenXPVnGw9rr2zKKWs6iTf2v91XwqV8nSguFEVPRcqsr2my_8U9i4r7H6wkB2fTT9QuBGiDc01bGXJh8tgo/s1600/gradient.png) repeat-x scroll 0 0;
}
a.selected span{
 background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVSSe9RXVuFL59ZJBjv1mcxntWe98DEe4MQ2LYxYU9pMMi0URzmrQmq1wHwfNCFTM3KZtnR5qsn45o3UP8wLxLmIigvvnUpsmPU6sJ8M0pu3Tu3gD8v7THhjd10M49nsqVBgP_qjAOy7s/s1600/arrow_hover.png) repeat-x scroll 0 0;
}
.dropmenu ul a:hover {
 color:#F67A00 !important;
 text-decoration: none;
 background-color: #F0F0F0;
 background-image: none;
}
.dropmenu div ul{
 position: relative;
 display: block;
}
.dropmenu li div{
 background: #FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT9KD5u3Ran5DUEU1LD4fMPQt3XagVta41LjUDnLrc2Ssjo7zKwFroN8LSYhyphenhyphenXPVnGw9rr2zKKWs6iTf2v91XwqV8nSguFEVPRcqsr2my_8U9i4r7H6wkB2fTT9QuBGiDc01bGXJh8tgo/s1600/gradient.png) repeat-x scroll 0 0;
 border: 1px solid #ccc;
 padding: 5px;
 display: none;
 position: absolute;
}
.dropmenu li div ul{
 border: none;
 background: none;
 position: relative !important;
}
.dropmenu li div a{
 border: none;
 border-bottom: 1px solid #ccc;
}
.dropmenu li div div{
 display: block;
 position: relative;
 background: none;
 border: none;
}
.dropmenu li div div a{
 display: inline;
 border: none;
 color: #666;
 text-decoration: underline;
 padding: 0px;
 margin: 0px;
 text-transform: none;
}
.dropmenu li div div a:hover{
 color: #000;
 text-decoration: none;
}
ul.left{
 float: left;
 width: 145px;
}
ul.right{
 float: right;
 width: 145px;
}
.small{
 color: #666;
 font-size: 10px;
 padding: 10px 5px 8px 5px !important;
 display: block;
 clear: both;
}
.products{
 width: 300px;
 padding: 15px !important;
}
.products ul{
 width: 100%;
}
.products ul li{
 border-bottom: 1px solid #ccc;
 height: 40px;
 padding: 10px 0px;
}
.products h2{
 font-size: 16px;
 padding: 2px 0px 3px 0px;
 margin: 0px;
}
.products p{
 color: #666;
 font-size: 10px;
 padding: 0px;
 margin: 0px;
}
.products img{
 float: left;
 padding-right: 10px;
}
.products  ul li a{
 display: inline;
 border: none;
 color: #666;
 text-decoration: underline;
 padding: 0px;
 margin: 0px;
 text-transform: none;
}
.products  ul li  a:hover{
 color: #000 !important;
 text-decoration: none;
 background: none !important;
}

.tutorials{
 width: 300px;
}


input{
 border:1px solid #4A779D;
 padding: 3px 8px;
 margin-bottom: 8px;
 width: 164px;
}
label{
 padding: 0px 0px 4px 0px;
 display:block;
}
button{
 background: #4A779D url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigCNeWSJYKjKv-x-0DOLGhg2aRlXFOJSsIGL-CG3YTea6ximVie_6fYhjeVs5KWPSBdVL8qdegh6oP5ygj_DmQbmk-gpieTvKcbIKlB0_Dua26ZMaT5YZUWDKMcHQM7QGsMza8bY3Vk_A/s1600/navigation.png) repeat-x scroll 0 0;
 color: #FFF;
 border:1px solid #4A779D;
 padding: 4px 10px;
 width: 180px;
}

.emailupdatesform{margin: 10px 0 5px 5px; width: 180px; float: left;}

.emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 160px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;}

.emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: none; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;}

6- Daha sonra kodunu aradıyoruz.Ve bulduğunuz kodun alt kısmına aşağıda ki javascript kodlarını ekleyerek temanızı kaydedin.

<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/jquery.js"></script> 
<script type="text/javascript" src="https://mybloggerlab.googlecode.com/files/dropdown.js"></script> 
<script>
$(document).ready(function(){
 $("#nav-one").dropmenu();
});
</script>

Eğer yeni menü eklemek isterseniz yapacak olduğunuz işlem kısaca şöyledir.

<div id='header-wrapper'> 
<div class='headerleft'> 
<b:section class='headerleft' id='headerleft' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='My Bilgi Cafem61 (Header)' type='Header'/>
</b:section> 
</div>

7- Son olarak HTML menülerin görünmesini istediğiniz kısıma Gadget ekleme yöntemi ile altta ki kodları ekleyip düzenleyin.

<ul id="nav-one" class="dropmenu"> 
<li> 
    <a href="#">Home</a> </li><li> 
    <a href="#">Forum</a><ul> 
        <li><a href="#">Support</a></li> 
 <li><a href="#">Help</a></li> 
 <li><a href="#">Examples</a></li>
 <li><a href="#">Your work</a></li>
</ul> 
</li> 
<li> 
    <a href="#item3">Downloads</a><ul> 
       <li><a href="#">Tools</a></li> 
       <li><a href="#">Office</a></li> 
       <li><a href="#">Custom projects</a></li> 
</ul> 
</li>  
<li> 
 <a href="#">Products</a> 
 <div class="products">
<ul> 

<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg276cQDm6FGRNWVpB4e1g7FcPVaU3ZSv6-_Qal9Yy6J1t1o3kBcIsp_0L5xqYqZd0nXvXluC87d3OacLdcY7m0LgfNWHhyphenhyphenOow6J9W-zr7KtvFljXO2naDTR3hPmrBzxwgE5JEQ2S48OF4/s1600/1.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Featured Box</h2><p><a href="#">More information about this product</a></p></li> 
 
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzSjWDiNn63QkDqqSqK87lwko6hM9QmqfQReiDnBDvfypQzEggvMYucqP9Ivk3Agi2cFbvxelu70xibi2ErXKpgDVBpGfCJC4KUWTlXE7oN6DrNBidH4B-NC-g7TtYBWwQWTqb7U1-2WQ/s1600/2.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Mod Rewriter</h2><p><a href="#">More information about this product</a></p></li> 
 
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFWDm_9udWpH7-bX5Q-7PmORM-zP6MH13UGV8sNsBsa37uHmy_z9V-aNJCR-FVNHcLf36CiC7i9WizKO9xQ37vNQnXqcmP1lI64TWDWyrEfLgBpAbXpBVelepgCVWjR1YGNu4yq4QASQ/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Byte Scrambler</h2><p><a href="#">More information about this product</a></p></li> 
 
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFWDm_9udWpH7-bX5Q-7PmORM-zP6MH13UGV8sNsBsa37uHmy_z9V-aNJCR-FVNHcLf36CiC7i9WizKO9xQ37vNQnXqcmP1lI64TWDWyrEfLgBpAbXpBVelepgCVWjR1YGNu4yq4QASQ/s1600/3.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Image Processor</h2><p><a href="#">More information about this product</a></p></li> 
 
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj55iVZdci84TkivZwY9TJFDZEZTyhbPeE61TMSeLLTFmAb8qvXnuY_DIGoYqelZERwH6-WtAtE7zp4SG3uj7QDPpWf9H3YWwFs9rHIUzIBXnYU_bY7kmsm-fcj3Tzo6fFPh4HciKmpBsA/s1600/5.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Registry Class</h2><p><a href="#">More information about this product</a></p></li> 
 
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-LtZ0v_8n6_ITaxE4bIjVIKQgwnvMPDpahaLma9uZjlX_g5lp8xdQ9ebNb8BXS5lUMu9af6E68PaR_UTCMKe85w-pMznPoGH5o9lJkFX_2aN9LgqS_g-7vLxpp6fTXI82U5chwRKo0UQ/s1600/6.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Data Validation</h2><p><a href="#">More information about this product</a></p></li> 
 
<li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFMahOPnaq2fv1-DB7vV5WRNyFjDjuml-2NrEfHqJF_iVjVbNXuWAdvno3fxtUt6uLW39R55Is-CHAma4TT-QxFY7DRXHNDwaYpWQ-Xwfer_yJH61mswAOlEEGS1hR5MQjQfBOOVl8UMc/s1600/7.jpg" width="40" height="40" alt="Thumb" border="0" /><h2>Ajax Tables</h2><p><a href="#">More information about this product</a></p></li> 
</ul>

<div class="small">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.</div>
</div>
</li>
<li> 

 <a href="#">Tutorials</a> 
 <div class="tutorials">
 <ul class="left"> 
    <li><a href="#">Javascript</a></li> 
    <li><a href="#">Python</a></li> 
    <li><a href="#">PHP</a></li> 
</ul>
 <ul class="right"> 
    <li><a href="#">HTML/CSS</a></li> 
    <li><a href="#">ASP.NET</a></li> 
    <li><a href="#">Actionscript</a></li> 
</ul>
     
 <div class="small">View <a href="#">all categories</a> or a <a href="#">list of the best tutorials</a>.</div>
</div>
</li>
<li> 

 <a href="#">Links</a> <ul> 
    <li><a href="#">Programming</a></li> 
    <li><a href="#">Inspiration</a></li> 
    <li><a href="#">My websites</a></li> 
    <li><a href="#">Clients</a></li> 
    <li><a href="#">Cool stuff</a></li> 
    <li><a href="#">Sitebase</a></li> 
    <li><a href="#">Other</a></li> 
</ul> 
</li>
<li> 

 <a href="#">Subscribe Now</a> 
 <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=Bilgicafem61', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div>
</li>    
</ul>

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Not: Gelen Maili Aktif Etmeyi Unutmayınız!