Blogger Slider Tab Menü İlk Bizdee..

Merhaba Arkadaşlar, Bugün Sizlere Yepyeni Bir Blogger Eklentisiyle Buluşturuyorum. Umarım Seversiniz. Eski Tab Menülerden Sıkıldıysanız Bu Tam Size Göre Aynı Slider Gibi Ama Tab Menülü. Film Sitelerin Kullanmış Olduğu Tab Menüye Birazcık Uğraştım Ve Sonuç Olarak Ortaya Böyle Birşey Çıktı. Umarım Beğenirsiniz. Hemen Anlatıma Geçiyorum ..

Demo Görmek İçin Tıklayınız.

Şablonlar > Html'yi Düzenle'ye Geliyoruz.
CTRL+F  Yaparak </b:skin> Kodunu Aratıyoruz. Hemen Üstüne Alttaki Kodu Yapıştırıyoruz.
.no-js .liquid-slider { height:350px; color: #000000; overflow:scroll; } .liquid-slider-wrapper .liquid-slider-preloader { background: url(http://s6.postimg.org/nhj8z8yzh/loading.gif) #f2f2f2 no-repeat center 75px; opacity:.90; /* Do not edit below this line */ width:590px; height:200%; position:absolute; color: #000000; top:0; left:0; } .liquid-slider-wrapper { margin:0 auto; /* Do not edit below this line */ clear: both; color: #000000; overflow: auto; position: relative; } .liquid-slider-wrapper .liquid-slider { background: #f2f2f2; width: 590px; color: #000000; float: left; overflow: hidden; position: relative; } .liquid-slider-wrapper .panel-container { position: relative; } .liquid-slider-wrapper .liquid-slider .panel-container .fadeClass { position: absolute; top: 0; left: 0; color: #000000; display: none; } /**Boyutlandırma**/ .liquid-slider-wrapper .liquid-slider .panel { width: 590px; color: #000000; display: block; float: left; } .liquid-slider-wrapper .liquid-slider .panel video { width:590px; height:auto; color: #000000; } /**Boyutlandırma Bitiş**/ .liquid-slider-wrapper .liquid-slider .panel-wrapper { padding: 20px; font: #000000; position:relative; } .liquid-slider-wrapper .liquid-nav a { background: #d8d8d8; color: #000000; margin-right: 1px; padding: 3px 6px; } .liquid-slider-wrapper .liquid-nav a:hover { background: #f2f2f2; color: #333333; text-shadow: none; } .liquid-slider-wrapper .liquid-nav .current { background: #f2f2f2; color: #000000; } .currentCrossLink { font-weight: bold; } .liquid-slider-wrapper .liquid-nav ul { padding:0; clear: both; display: block; margin: auto; color: #000000; overflow: hidden; } .liquid-slider-wrapper .liquid-nav ul li { display: inline; } .liquid-slider-wrapper .liquid-nav ul li a { display: block; float: left; text-decoration: none; } .liquid-slider-wrapper .liquid-nav { overflow:hidden; color: #000000; clear:both; } .liquid-slider-wrapper .liquid-slider-select-box { width: 100%; color: #000000; height: 35px; overflow: hidden; background: url(http://s6.postimg.org/538pv9mot/menu.png) no-repeat right #ddd; } .liquid-slider-wrapper .liquid-slider-select-box select { width: 150%; -webkit-appearance: none; -moz-appearance: none; color: #000000; appearance:none; background: transparent; padding: 5px; font-size: 110%; border: 1px solid #bbb; height: 35px; cursor:pointer; } .liquid-slider-wrapper .liquid-nav-left, .liquid-slider-wrapper .liquid-nav-right { float: left; color: #000000; } .liquid-slider-wrapper .liquid-nav-left a, .liquid-slider-wrapper .liquid-nav-right a { background: #000; color: #000000; padding: 5px; width: 100px; display: block; text-align: center; text-decoration: none; } .liquid-slider-wrapper .liquid-nav-left-arrow, .liquid-slider-wrapper .liquid-nav-right-arrow { cursor: pointer; color: #000000; float: left; } .liquid-slider-wrapper .liquid-nav-left-arrow a, .liquid-slider-wrapper .liquid-nav-right-arrow a { display: block; color: #000000; } .liquid-slider-wrapper .liquid-nav-left, .liquid-slider-wrapper .liquid-nav-left-arrow { color: #000000; clear: both; } .liquid-slider-wrapper .liquid-nav-right-arrow { width: 25px; height: 25px; color: #000000; background: url(http://s6.postimg.org/5ha1uv6sd/arrow.png) no-repeat top right; margin-top: 50px; margin-right: 5px; position:relative; } .liquid-slider-wrapper .liquid-nav-left-arrow { width: 25px; height: 25px; color: #000000; background: url(http://s6.postimg.org/5ha1uv6sd/arrow.png) no-repeat top left; margin-top: 50px; margin-left: 5px; position:relative; } .liquid-slider-wrapper .liquid-nav-left-arrow:hover { color: #000000; background: url(http://s6.postimg.org/5ha1uv6sd/arrow.png) no-repeat bottom left; } .liquid-slider-wrapper .liquid-nav-left-arrow:active { color: #000000; } .liquid-slider-wrapper .liquid-nav-right-arrow:hover { color: #000000; background: url(http://s6.postimg.org/5ha1uv6sd/arrow.png) no-repeat bottom right; } .liquid-slider-wrapper .liquid-nav-right-arrow:active { color: #000000; } .arrows .liquid-slider { color: #000000; margin: 0 10px; } .liquid-responsive .liquid-slider { color: #000000; width: 100%; margin: 0; } .liquid-responsive .liquid-slider .panel .panel-wrapper { padding: 10px; } .liquid-responsive .liquid-nav-left { color: #000000; position: absolute; left: 0; z-index: 1; } .liquid-responsive .liquid-nav-left a { color: #000000; background: #9A9A9A; width: 80px; } .liquid-responsive .liquid-nav-left a:hover { color: #000000; background: #747474; } .liquid-responsive .liquid-nav-right { color: #000000; position: absolute; right: 0; z-index: 1; } .liquid-responsive .liquid-nav-right a { color: #000000; background: #9A9A9A; width: 80px; } .liquid-responsive .liquid-nav-right a:hover { color: #000000; background: #747474; } .liquid-responsive .liquid-nav-left-arrow { color: #000000; position: absolute; left: 0; z-index: 1; } .liquid-responsive .liquid-nav-right-arrow { color: #000000; position: absolute; right: 0; z-index: 1; } @media only screen and (min-width: 481px) { .liquid-slider-wrapper .liquid-slider .panel img{ /* Example */ /* width:24%; margin:2px; */ } } @media only screen and (min-width: 768px) { .liquid-slider-wrapper .liquid-slider .panel img{ /* Example */ /* width:24%; */ } .liquid-responsive .liquid-slider .panel .panel-wrapper { padding: 20px 35px; } } @media only screen and (min-width: 1030px) { } @media only screen and (min-width: 1240px) { } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { } h1{margin:100px;}

Üstteki Kodu Kopyalıdıktan Sonra </head> Kodunu Aratıyoruz. Hemen Üstüne Altta Bulunan Kodu Yapıştırıyoruz.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://yourjavascript.com/33472111333/jquery-easing-1-3.js"></script> <script src="http://yourjavascript.com/73535323131/jquery-touchswipe-min.js"></script> <script src="http://yourjavascript.com/33343320711/jquery-liquid-slider-min.js"></script> <script> $(function(){ $('#slider-id').liquidSlider(); }); </script>

Ve Şablonu Kaydedip Çıkıyoruz. Aşağıda Bulunan Kodu Paylaşım Yaptığımız Yazının Altına Ekliceğiz.
<body class='no-js' style="margin:0"> <div class="liquid-slider" id="slider-id"> <div> <h2 class="title"> Video</h2> <p> <iframe width="520" height="315" src="http://www.youtube.com/embed/I5lRLhZ1dkg" frameborder="0" allowfullscreen></iframe></p> </div> <div> <h2 class="title"> Makale</h2> <p> Mustafa Kemal Atatürk (1881, Selânik – 10 Kasım 1938, İstanbul), Türk siyasetçi ve devlet adamı. Türkiye Cumhuriyeti'nin kurulmasına önderlik yapmış ve TBMM tarafından Türkiye Cumhuriyeti'nin ilk cumhurbaşkanı seçilmiştir. Osmanlı mirlivası ve Türkiye'nin iki mareşalinden biridir. 1919 yılında başlattığı Kurtuluş Savaşı'nın önderliğini yapmış; daha sonra, modern Türkiye'yi oluşturan devrim ve reformları gerçekleştirmiştir.[1] Mustafa Kemal Atatürk Osmanlı Ordusu'nda subay olarak görev yapmış; Türk Orduları Başkomutanı olarak Sakarya Meydan Muharebesi'ndeki başarısından dolayı 19 Eylül 1921 tarihinde, "Gazi" unvanını almış ve mareşalliğe yükselmiştir.[1] Cumhuriyet Halk Partisi'ni kurmuş ve ilk genel başkanı olmuştur. 1938 yılındaki vefatına kadar arka arkaya 4 kez cumhurbaşkanı olan Atatürk, bu görevi en uzun süre yürüten cumhurbaşkanı olmuştur.</p> </div> <div> <h2 class="title"> Resim</h2> <p> <table width="218" cellspacing="0" cellpadding="0" border="0" height="287"> <tbody> <tr> <td><img width="260" height="104" src="http://www.teknobeyin.com/dosyalar/2010/11/blogger-logo.193160005.jpg" alt="" /></td> <td><img width="260" height="87" src="http://fontslogo.com/wp-content/uploads/2013/02/wordpress-logo.jpg" alt="" /></td> </tr> <tr> <td><img width="260" height="86" src="http://img51.imageshack.us/img51/2710/kfwl.png" alt="" /></td> <td><img width="260" height="163" src="http://www.haber34.com/hr/sosyal-medya-asosyal-toplum--27091.jpg" alt="" /></td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table> </p> </div> <div> <h2 class="title"> PhtmlDrive</h2> <p> Merhaba Arkadaşlar. Bugün Sizinde Görmüş Olduğunuz Gibi Slider Tab Menüyü Sizlerle Paylaştım Umarım Beğenmişsinizdir. Herhangi Bir Sorunda <a href="http://phtmldrive.blogspot.com/" target="_blank">İletişim Bölümü</a>nden Bize Ulaşabilirsiniz.</p> <p> Arkadaşlar Bu Kodu Ayarı Çok Kolaydır. İstediğiniz Kadar Tab yapabilirsiniz. Örnek Olarak; <span style="color: rgb(0, 0, 255);"><h2 class="title"> Tab 5</h2> <p> Kod Yada Yazı Buraya Gelicek.</p> </div> </span> Gibi. Jsleri Kolay Kolay Bozulmaz Gönül Rahatlığıyla Kullanabilirsiniz.<br />  </p> </div> </div>

Önemli Noktalar :

• Eğer 4'ten Fazla Tab Menü Eklemek İstiyorsanız. <h2 class="title">PhtmlDrive</h2><p>Kod Yazı Veya Kod Buraya Gelicek.</p></div> Şeklinde Yapıcaksınız.
• Slider Tab Menünün En Ve Boy Ayarını .liquid-slider-wrapper .liquid-slider .panel Bölümünden Ayarlayabilirsiniz.

Umarım Beğenmişsinizdir. Güle Güle Kullanmanız Dileğimle İyi Bloglar..