Cara Pasang Iklan Accordion Mantab ~ ngalamsantai

1. Buka Template > Edit HTML > Letakkan Kode berikut di bawah ]]></b:skin> atau </style> :

/* Iklan Baris----------------------------------------------- */
#iklan-teks {
    height:275px;
    width:280px;
    background-color:white;
    position:relative;
    overflow:hidden;
    margin:20px auto;
}
#iklan-teks h2.iklan-header {
    cursor:pointer;
    background-color:white;
    background-image:none;
    font:normal 13px Verdana, Tahoma, Serif;
    color:#f0523f;
    border-top:1px solid #d8d8d8;
    padding:10px;
    margin:0;
    position:relative;
    text-transform:none;
    letter-spacing:0;
}
.iklan-teks-post-footer .iklan-header {
    border-bottom:0;
}
#iklan-teks h2.iklan-header:first-child {
    border-top:0;
}
#iklan-teks h2.iklan-header:before {
    content:"
    "
    ;
    width:0;
    height:0;
    position:absolute;
    top:20px;
    right:15px;
    border:5px solid transparent;
    border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
    height:120px;
    padding:10px 70px 10px 10px;
    z-index:1;
    background:white;
    font:normal 13px Verdana, Tahoma, Serif;
    color:white;
    position:relative;
    border-top:1px solid #d8d8d8;
}
.judul {
    font:normal 20px Verdana, Tahoma, Serif;
    color:#f0523f;
    margin:0 0 5px 0;
}
a.judul {
    font:normal 20px Verdana, Tahoma, Serif !important;
    color:#f0523f !important;
    text-decoration:none;
    display:inline-block;
}
.isi-iklan a {
    font:normal 13px Verdana, Tahoma, Serif;
    color:green;
    text-decoration:none;
    display:block;
    margin-bottom:10px;
}
.isi-iklan a:hover {
    color:green;
    text-decoration:underline;
}
.isi {
    padding-top:15px;
    color:#222;
    text-align:left !important;
}
.panah-besar {
    background:#f0523f;
    border-radius:50%;
    cursor:pointer;
    height:34px;
    float:right;
    margin-right:-60px;
    margin-top:-40px;
    width:34px;
    text-align:center;
    line-height:34px;
}
.panah-besar:hover {
    background:#2c343e;
}
.info-icon {
    width:15px;
    height:15px;
    position:absolute;
    top:0;
    z-index:2;
    right:0;
    cursor:pointer;
}
.info-iklan {
    background:#f2f2f2;
    height:15px;
    border-bottom-left-radius:4px;
    position:absolute;
    top:0;
    right:0;
    color:#000;
    z-index:2;
    font:normal 11px Arial, Sans-Serif;
    text-align:left;
    overflow:hidden;
    padding:5px 19px 0 5px;
}

2. Lalu simpan kode dibawah ini pada Widget HTML / JavaScript, sesuaiak link yang Anda inginkan :

<script type='text/javascript'>
(function(a){a.fn.hoverTimeout=function(c,e,b,d){return this.each(function(){var f=null,g=a(this);g.hover(function(){clearTimeout(f);f=setTimeout(function(){e.call(g)},c)},function(){clearTimeout(f);f=setTimeout(function(){d.call(g)},b)})})}})(jQuery);(function(b){b.fn.iklanaccordion=function(a){a=jQuery.extend({active:1,hovertimeout:300,sUpSpeed:400,sDownSpeed:400,sUpEasing:null,sDownEasing:null},a);return this.each(function(){var g=b(this),h=g.children("div[data-header]"),f=a.active-1;h.each(function(){b(this).hide().before('<h2 class="iklan-header">'+b(this).data("header")+"</h2>")});g.children("div:eq("+f+")").show().prev().css("margin-top","-47px").addClass("active");g.find(".iklan-header").hoverTimeout(a.hovertimeout,function(){g.children("h2").removeClass("active").animate({marginTop:0});h.slideUp(a.sUpSpeed,a.sUpEasing).animate({marginTop:-47});b(this).addClass("active").next().slideDown(a.sDownSpeed,a.sDownEasing)})})}})(jQuery);$(function(){$(".iklan-teks-sidebar").iklanaccordion();$(".iklan-teks-post-footer").iklanaccordion()});$(".info-icon").hover(function(){$(".info-iklan").animate({right:0},400,"easeInOutExpo")},function(){$(".info-iklan").animate({right:-103},400,"easeInOutExpo")});
</script>

<div style="background : #ecf0f1; overflow : hidden; margin : 0 0 10px 0; padding : 0; border-radius : 0;">
<div class='iklan-teks-sidebar' id='iklan-teks'>
    
    <div data-header='Travel Murah di Malang'> <span class='isi-iklan'><a class='judul' href='http://www.travellora.net' target='_blank'>TRAVELLORA</a><a href='/' target='_blank'>travellora.net</a><span class='isi'>Travel Malang,Batu, Juanda, Surabaya, Wisata, Rent Car telp. 081xxxxxxxx.<a class='panah-besar' href='http://www.travellora.net' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI3hNqSeOJv5gQYT8LTGyNTd1veKDlBGCCYFMDj0Dr9hWohFQ2ybEG5USTK9M-n-FvLYyeGPaO9xqnmX7q7-3ig9eO-xW16RTdRcv9QjeNV0PkULgn41rAdSk6eTXGem4uG9EGjIj2FUM/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    
    <div data-header='Travel Murah di Malang'> <span class='isi-iklan'><a class='judul' href='http://www.travellora.net' target='_blank'>TRAVELLORA</a><a href='/' target='_blank'>travellora.net</a><span class='isi'>Travel Malang,Batu, Juanda, Surabaya, Wisata, Rent Car telp. 081xxxxxxxx.<a class='panah-besar' href='http://www.travellora.net' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI3hNqSeOJv5gQYT8LTGyNTd1veKDlBGCCYFMDj0Dr9hWohFQ2ybEG5USTK9M-n-FvLYyeGPaO9xqnmX7q7-3ig9eO-xW16RTdRcv9QjeNV0PkULgn41rAdSk6eTXGem4uG9EGjIj2FUM/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    
    <div data-header='Travel Murah di Malang'> <span class='isi-iklan'><a class='judul' href='http://www.travellora.net' target='_blank'>TRAVELLORA</a><a href='/' target='_blank'>travellora.net</a><span class='isi'>Travel Malang,Batu, Juanda, Surabaya, Wisata, Rent Car telp. 081xxxxxxxx.<a class='panah-besar' href='http://www.travellora.net' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI3hNqSeOJv5gQYT8LTGyNTd1veKDlBGCCYFMDj0Dr9hWohFQ2ybEG5USTK9M-n-FvLYyeGPaO9xqnmX7q7-3ig9eO-xW16RTdRcv9QjeNV0PkULgn41rAdSk6eTXGem4uG9EGjIj2FUM/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
    
    <div data-header='Travel Murah di Malang'> <span class='isi-iklan'><a class='judul' href='http://www.travellora.net' target='_blank'>TRAVELLORA</a><a href='/' target='_blank'>travellora.net</a><span class='isi'>Travel Malang,Batu, Juanda, Surabaya, Wisata, Rent Car telp. 081xxxxxxxx.<a class='panah-besar' href='http://www.travellora.net' target='_blank'><img alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI3hNqSeOJv5gQYT8LTGyNTd1veKDlBGCCYFMDj0Dr9hWohFQ2ybEG5USTK9M-n-FvLYyeGPaO9xqnmX7q7-3ig9eO-xW16RTdRcv9QjeNV0PkULgn41rAdSk6eTXGem4uG9EGjIj2FUM/s1600/icon_chevron_white.png' style='margin-top:7px;margin-left:2px;width:12px;height:19px'/></a></span></span>
    </div>
</div></div>

About Admin NS

Salam hormat, blog ini hanya sebagai media informasi. Terima kasih.

Cara Pasang Iklan Accordion Mantab

About Admin NS

Related Post