Blogger Akordeon Açılır Menü Widget'ı - Blogger html css kodlari

Yazdir

 

💥İçeriğinizi düzenlemek ve blogunuzun belirli bölümlerinin yalnızca ziyaretçinin ilgi duyduğu zamanlarda görünmesini sağlamak gerçekten önemli. Popüler Diziler listesini görüntülemek için blogumuzun alt bilgisinde bulabileceğiniz bir Akordeon Widget'ı kullanıyoruz. Bu, uzun bağlantı listelerini düzenli ve temiz bir şekilde görüntülememiz için etkili bir yol. Bu widget'ı JQuery ve Easing Eklentisi kullanarak oluşturdum. Bu Akordeon widget'ı, Martin Angelov tarafından 2009 yılında yayınlanan Yeni İçerik Akordeon'unun değiştirilmiş bir sürümüdür. Stil sayfasını özelleştirdik ve komut dosyalarının bazı kısımlarını düzenleyerek Blogger bloglarıyla uyumlu hale getirdik. Harika bir Genişlet/Daralt Özelliğine sahip. Bu widget, varsayılan olarak içindeki tüm içeriği daraltır ve gizler, ancak kullanıcı tıkladığında içerik, sekme bölümünü genişleterek görüntülenir. Bu Şık Akordeon widget'ını BlogSpot bloglarınıza eklemek isteyeceğinizden eminim.

Demoya mı ihtiyacınız var? Blogumuzun alt bilgisine göz atın! Buraya Tıklayın

Blogger İçin Şık Bir Akordeon Tasarlayın!

Bu adım adım kolay eğitimi takip edin. Tarayıcı uyumluluğu sorunları konusunda endişelenmenize gerek yok çünkü tüm bu işi sizin için biz yaptık. Widget, IE8+ dahil tüm popüler tarayıcılarla uyumludur.

Şu adımları izleyin:

1. Blogger > Şablon'a gidin
2. Şablonunuzu yedekleyin
3. HTML Düzenle'ye tıklayın
4. </head> için arama yapın
5. Hemen üstüne aşağıdaki kodu yapıştırın

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script>
//<![CDATA[
$(document).ready(function(){
/* This code is executed after the DOM has been completely loaded */
/* Changing thedefault easing effect - will affect the slideUp/slideDown methods: */
$.easing.def = "easeOutBounce";
/* Binding a click event handler to the links: */
$('li.button a').click(function(e){

/* Finding the drop down list that corresponds to the current section: */
var dropDown = $(this).parent().next();

/* Closing all other drop down sections, except the current one */
$('.dropdown1').not(dropDown).slideUp('slow');
dropDown.stop(false,true).slideToggle('slow');

/* Preventing the default event (which would be to navigate the browser to the link&#39;s address) */
e.preventDefault();
})

});
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];

jQuery.extend( jQuery.easing,
{
def: 'easeOutQuad',
swing: function (x, t, b, c, d) {
  //alert(jQuery.easing.default);
  return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInQuad: function (x, t, b, c, d) {
  return c*(t/=d)*t + b;
},
easeOutQuad: function (x, t, b, c, d) {
  return -c *(t/=d)*(t-2) + b;
},
easeInOutQuad: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t + b;
  return -c/2 * ((--t)*(t-2) - 1) + b;
},
easeInCubic: function (x, t, b, c, d) {
  return c*(t/=d)*t*t + b;
},
easeOutCubic: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t + 1) + b;
},
easeInOutCubic: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t + b;
  return c/2*((t-=2)*t*t + 2) + b;
},
easeInQuart: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t + b;
},
easeOutQuart: function (x, t, b, c, d) {
  return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInOutQuart: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
  return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
easeInQuint: function (x, t, b, c, d) {
  return c*(t/=d)*t*t*t*t + b;
},
easeOutQuint: function (x, t, b, c, d) {
  return c*((t=t/d-1)*t*t*t*t + 1) + b;
},
easeInOutQuint: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
  return c/2*((t-=2)*t*t*t*t + 2) + b;
},
easeInSine: function (x, t, b, c, d) {
  return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
  return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInOutSine: function (x, t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
},
easeInExpo: function (x, t, b, c, d) {
  return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
  return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInOutExpo: function (x, t, b, c, d) {
  if (t==0) return b;
  if (t==d) return b+c;
  if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
  return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
},
easeInCirc: function (x, t, b, c, d) {
  return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
  return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInOutCirc: function (x, t, b, c, d) {
  if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
  return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
},
easeInElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOutElastic: function (x, t, b, c, d) {
  var s=1.70158;var p=0;var a=c;
  if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
  if (a < Math.abs(c)) { a=c; var s=p/4; }
  else var s = p/(2*Math.PI) * Math.asin (c/a);
  if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
  return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
easeInBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOutBack: function (x, t, b, c, d, s) {
  if (s == undefined) s = 1.70158;
  if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
  return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
easeInBounce: function (x, t, b, c, d) {
  return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
  if ((t/=d) < (1/2.75)) {
   return c*(7.5625*t*t) + b;
  } else if (t < (2/2.75)) {
   return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
  } else if (t < (2.5/2.75)) {
   return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
  } else {
   return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
  }
},
easeInOutBounce: function (x, t, b, c, d) {
  if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
  return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
}
});
//]]>
</script>

Not: Sarı ile vurgulanan kod, Easing Eklentisi kullanılarak sıçrama efekti oluşturmak içindir. Çok fazla animasyon istemiyorsanız, kodun sarı kısmını silebilirsiniz.

6. </b:skin> ifadesini arayın. Kodu genişletmek için siyah oka tıklayın.

/*------ Accordion Widget by MBT  -----*/

ul.container{

    width:275px;
    margin:0 auto;
    padding:0px;
}

 

li.menu{

    padding:5px 0;
    width:100%;

}

li.button a{

    display:block;
    font-family: Arial, sans-serif,Helvetica;
    font-size:12px;
    overflow:hidden;
    padding:0px 0px 5px 0;
    position:relative;
    width:100%;
        text-transform:capitalize;
}

li.button a:hover{

    text-decoration:none!important;
}

li.button a span{
   
    right:0px;
        top:0px;
    position:absolute;
    color:#ccc;
    display:block;
}

.dropdown1{

    display:none;
    padding-top:5px;
    width:100%;
}

.dropdown1 li{
   
   
   
border:1px solid #7E7E7E;
    color:#CCCCCC;
    margin:5px 0;
    padding:4px 10px;
       
}

.dropdown1 li:hover {
border:1px solid #ccc;
text-decoration:none;
}

.dropdown1 li a:hover {
text-decoration:none;
}

Not: Bağlantıların ve yazı tiplerinin görünümü ve renkleri, yukarıdaki kodu düzenleyerek özelleştirilebilir. Ancak varsayılan renkler, altbilginizin arka planı beyaz değilse, herhangi bir koyu altbilgiyle uyumlu olacaktır.

8. Şablonunuzu kaydedin ve işte bu kadar!

Blogger Düzenine Akordeon Ekleyin

Şimdi düzen bölümüne widget'ınızı eklemeniz ve kendi popüler dizilerinizin veya içinde görüntülemek istediğiniz herhangi bir içeriğin listesini oluşturmaya başlamanız gerekiyor.

1. Blogger > Düzen'e gidin
2. Gadget Ekle'ye tıklayın
3. HTML/JavaScript widget'ını seçin
4. İçine aşağıdaki HTML kodunu yapıştırın:

<ul class="container">
     
     

<!- TAB ONE -->

      <li class="menu">
     
          <ul>
            <li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>             

            <li class="dropdown1">

                <ul>
<li>1. <a  href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
<li>2. <a  href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>3. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>5. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>4. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

                </ul>
            </li>

          </ul>
         
      </li>

 

<!- TAB TWO -->

<li class="menu">
     
          <ul>
            <li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>

            <li class="dropdown1">
                <ul>

<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>
<li>2. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>3. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>5. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

<li>4. <a href="ADD LINK HERE">ADD LINK TEXT HERE</a></li>

               
             </ul>
            </li>

          </ul>

      </li>

 

 
  </ul>

 Yukarıdaki kodda, her biri 4 satırdan oluşan iki sekme oluşturdum.

BURAYA SEKME BAŞLIĞI EKLE ifadesini liste başlığının adıyla değiştirin.

BURAYA BAĞLANTI EKLE ifadesini kendi bağlantı URL'nizle değiştirin.

BURAYA BAĞLANTI EKLE ifadesini kendi bağlantı metninizle değiştirin.

Yukarıdaki kodun daha fazla açıklamaya ihtiyacı olduğunu düşünmüyorum. Anlaşılmasını kolaylaştırmak için her bölüm vurgulanmıştır. Başka bir sekme eklemek isterseniz, yukarıdaki kodu eklemeniz yeterlidir. </ul>

<li class="menu">

<ul>
<li class="button"><a href="#" >ADD TAB TITLE HERE<span>▼</span></a></li>

<li class="dropdown1">
<ul>

<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>

</ul>
</li>

</ul>

</li>

Satır sayısını artırmak için şu kod satırını eklemeye devam edin:

<li>1. <a href="ADD LINK HERE" >ADD LINK TEXT HERE</a></li>

1'i satır numarasıyla değiştirmeniz yeterli.

5. Kaydet'e tıklayın ve işte bu kadar!

Blogunuzun kenar çubuğunda nasıl durduğunu görmek için blogunuzu ziyaret edin. Sekmelere tıklayın ve yeni oluşturduğunuz Akordeon widget'ınızla oynayın. Artık hepsi sizin! :)

Yardıma mı ihtiyacınız var?

Bu eğitimi çoğunuz istedi ve bloglarınızı mümkün olan en iyi görünüme göre özelleştirmenize yardımcı olmak için blogumuza uyguladığımız her şeyi paylaşma alışkanlığım var. Herhangi bir yardıma ihtiyacınız olursa lütfen bana bildirin. Umarım blogunuzu daha da etkili bir şekilde düzenlemenize yardımcı olur. Selam ve bereket sevgili kardeşlerim :)