/* HourGlass THEME */ .ip-header { position: fixed; top: 0; z-index: 100; min-height: 480px; width: 100%; height: 100%; background: #505050 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFmgBn63Xy93Q-liqCuagUsbwD_rnNODt4N_a6O950WcuCsHpK9aijMbT-V6Q0RyT_g6iilt8GbUdwxrkgV-dRg82d57nNhAAg1bgWeQ2uy8yZ_oIcVq_5mJtBeyehODdE1lqvQjElhdws/s1600/hourglass.gif) no-repeat center center; /* warna background dan gambar loader */ z-index: 999999; } .ip-header .ip-loader svg path.ip-loader-circlebg { stroke: #fff; /* warna background circle loader */ } .ip-header .ip-loader svg path.ip-loader-circle { -webkit-transition: stroke-dashoffset 0.2s; transition: stroke-dashoffset 0.2s; stroke: #13BAFA; /* Warna garis circle saat loading */ } /* Pre-Loader main */ .ip-loader { position: absolute; left: 0; width: 100%; opacity: 0; cursor: default; pointer-events: none; } .ip-loader { bottom: 20%; } .ip-header .ip-inner { display: block; margin: 0 auto; } .ip-header .ip-loader svg path { fill: none; stroke-width: 6; } /* Animasi */ .loading .ip-loader { opacity: 1; -webkit-animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; animation: animInitialHeader 1s cubic-bezier(0.7,0,0.3,1) both; } .loading .ip-loader { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } @-webkit-keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); } } @keyframes animInitialHeader { from { opacity: 0; -webkit-transform: translate3d(0,800px,0); transform: translate3d(0,800px,0); } } .loaded .ip-loader { opacity: 1; } .loaded .ip-loader { -webkit-animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedLoader 0.5s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } @keyframes animLoadedLoader { to { opacity: 0; -webkit-transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); transform: translate3d(0,-100%,0) scale3d(0.3,0.3,1); } } /* Animasi header ketika loading selesai */ .loaded .ip-header { -webkit-animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; animation: animLoadedHeader 1s cubic-bezier(0.7,0,0.3,1) forwards; } @-webkit-keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); } } @keyframes animLoadedHeader { to { -webkit-transform: translate3d(0,-100%,0); transform: translate3d(0,-100%,0); } } .layout-switch .ip-header { position: absolute; } /* End Preloader */

Selasa, 28 Februari 2012

Cara Membuat Daftar Isi Otomatis Postingan Artikel Blog

Cara Pemasangan :

Login ke blog sobat...

Klik "Design" kemudian klik "Add a Gadget" kemudian pilih "HTML/JavaScript", seperti gambar dibawah ini.

Copy-paste kode berikut ini di kotak postingan gadget.

<style>
.list {border: 0px solid #ffffff; margin: 0px; padding: 0px; overflow: auto; width: auto; height: 350px; background-color: #ffffff; font-weight: normal;}
</style>
<div style="font-style: italic;">
Gunakan Ctrl + F untuk mencari artikel yang Anda inginkan :
</div>
<hr />
<div class="list">
<script src="http://monozcore-project.googlecode.com/files/Post%20List.js">
</script>
<script src="http://monozcore.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
</div>

| Blog Tools

Catatan :
- Ganti URL link (kode yang berwarna biru) dengan URL link blog sobat.
- Lakukan hal yang sama jika menggunakan "Add to Blogger" pada widget sobat dengan cara meng-edit widget jika sudah terpasang.

Klik "Save" dan lihat hasilnya...

.: Semoga Bermanfaat :.

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)