Cara Membuat Daftar Isi Overlay Pop Up Blogger

Daftar Isi Overlay Pop Up Blogger

Cara Membuat Daftar Isi Overlay Pop Up Blogger, Daftar Isi Overlay pada blog, Widget daftar isi banyak dikreasikan oleh shabat blogger, Salah satunya adalah Daftar Isi, Cara ini hampir sama dengan trik pada buku tamu, hanya saja diganti dengan daftar isi supaya lebih keren. mau tau keindahan daftar isi ini ?

Login ke Blogger
Rancangan + Edit Html
Kemudian Cari Kode ]]></b:skin>
Letakkan kode berikut diatasnya :

/* the overlayed element */
.apple_overlay { 
display:none; 
/* growing background image */
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSt43vrzY8CiCfgUrGfFCjKWvcdJl2AKRekVnhPXRBdPFlLkWtA54Xam0HvvjFn626Op9SNXCYo_ZqH-mPmZyyD4yxetpGGFmzRh8V4zKvNtz-fr-ArQb3rGJOQsctn3GqIPqnesrmzg_6/s320/transparentbackroundoverlay.png); 
/*
width after the growing animation finishes
height is automatically calculated
*/
width:640px;       
/* some padding to layout nested elements nicely  */
padding:35px;
/* a little styling */ 
font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNrqe-A0IimMGHwyXo_wJ1YiUgpHBykwjuOTkzxyHVvEesb9bjv6rIofeJgwd6Z-k_XEGqJ9VeQCrnK-wckXsy0xtkzhxyoukM4pJnb9CWijw3_oNfVQ6nocV4KlXkfSx_Cxg7cjVMUvM/s1600/close3.png);
position:absolute; right:5px; top:5px;
cursor:pointer;
height:35px;
width:35px;
}

Kemudian Cari kode </head>
copas kode berikut diatasnya :

<script src='http://cayunkatel.googlecode.com/files/jquery.tools.min.js'/>
<link href='http://cayunkatel.googlecode.com/files/apple-overlay.css' rel='stylesheet' 'text/css'/>

Dan Selanjutnya letakkan kode berikut diatas atau sebelum kode </body>

<script>
$(function() {
    $("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>

Lalu Save Template.

Kemudian anda menuju Page Element, Pilih Add Widget,--> Html/Javascript -- > Copas code berikut :

<!-- trigger elements -->

<div id="triggers">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn7FkjqR1FpRL923GaAzUd0ZB6aMSJNsCISqucjZmkvMqsoZXbeMTNXG-SQWYPLgQEV2KUiyOb1nOJ5Bc9lOlEyOgZ5-5UD7uKQBXE38b_PvVZuMTi2U3fOMZqQM1qa1f2eNshX-WDqYZQ/s320/sitemapcayun.gif" rel="#photo1"/>
</div>

<!-- overlayed element, which is styled with external stylesheet -->
<div id="photo1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn7FkjqR1FpRL923GaAzUd0ZB6aMSJNsCISqucjZmkvMqsoZXbeMTNXG-SQWYPLgQEV2KUiyOb1nOJ5Bc9lOlEyOgZ5-5UD7uKQBXE38b_PvVZuMTi2U3fOMZqQM1qa1f2eNshX-WDqYZQ/s320/sitemapcayun.gif" />
<div >
<h2>
Izoel's notice</h2>
<p>
<div >
<span ><div >
<script src="http://cayunkatel.googlecode.com/files/daftarisiauto.js"></script>
<script >
var numposts = 1000;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://tanpa-isi.blogspot.com/feeds/posts/default?
orderby=published&alt=json-in-script&max-results=999
&callback=showrecentposts"></script>
</div>


<div >
<a href='http://tanpa-isi.blogspot.com'>CAyun</a>

</div>
</span></div>
</p>
</div>
</div>


<div >
</div>


<!-- make all links with the 'rel' attribute open overlays -->
<script src="http://cayunkatel.googlecode.com/files/latoverlay.js" " ></script>
<script >

$(function() {
    $(&quot;#triggers img[rel]&quot;).overlay({effect: &#39;apple&#39;});
});</script>
<!-- make all links with the 'rel' attribute open overlays -->
<script>


$(function() {
    $("#triggers img[rel]").overlay({effect: 'apple'});
});
</script>

Silahkan diedit sesuai keinginan anda.
Lalu Save.

Semoga Cara Membuat Daftar Isi Overlay Pop Up Blogger bermanfaat bagi anda.

source http://kazumasite.weebly.com/cara-membuat-daftar-isi-overlay-pop-up-blogger.html