BLOG ANAK DEMAK

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 ? langsung aja intip yuk :



Kalo sudah silahkan lihat tutorialnya berikut 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/AVvXsEg_MxyX1MPvIl2IlZZ0tEQmNbhhYai-rjrKzbiUvuGJ4XikNYdoS9ArkWIZ5MEm6xFMy_9syK306xHShD_qxeQAAT5UENosjiIHL18X-Y7NbPl-7KvxZ7oeOXDcsOqvt9WqXwEgAMBDI86D/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/AVvXsEgtSi0s8b0rc6YUVG9k1Qr7Em_LgYUgTF0r1U8HU17O8c73vbadVSLSa6c-l19Wvk9Ns8GjAHMF9IcafMZM6ZcEFwbLnVJvxPpuuxIAFp2oz5-Kx0K4fdyPjDJ3IQLjBc83Vb1Pfipc6FJ4/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' type='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/AVvXsEjqKKdRc2wFuY5NSrFNsSJXjqjzI5E7hYKoYWsqhphmE5i7M2uYGpywH1uAESsMtChpypJXs0z2gVVOU4bJ_5ihSWT8HMYFKu3qpAw1Pwe81WBPJBtFYRYRMTM2ZWk7ZrGvOMW_yV-i7rpC/s320/sitemapcayun.gif" rel="#photo1"/>
</div>

<!-- overlayed element, which is styled with external stylesheet -->
<div class="apple_overlay black" id="photo1">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqKKdRc2wFuY5NSrFNsSJXjqjzI5E7hYKoYWsqhphmE5i7M2uYGpywH1uAESsMtChpypJXs0z2gVVOU4bJ_5ihSWT8HMYFKu3qpAw1Pwe81WBPJBtFYRYRMTM2ZWk7ZrGvOMW_yV-i7rpC/s320/sitemapcayun.gif" />
<div class="details">
<h2>
Izoel's notice</h2>
<p>
<div style="color: #0EFF00;">
<span style="font-size: 15px;"><div style="border: 2px inset #ff0000; overflow: auto; height: 220px;">
<script style="text/javascript" src="http://cayunkatel.googlecode.com/files/daftarisiauto.js"></script>
<script style="text/javascript">
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 style="text-align: right;">
<a href='http://tanpa-isi.blogspot.com'>CAyun</a>

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


<div style="color: black;">
</div>


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

$(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.