bidikcom: Tutorial Blogger

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

11 November 2010

Membenahi Read more

Bosan dengan tampilan Read more yang ada pada tampilan blog ini, saya mencoba memodifikasinya dengan tampilan image yang saya buat dengan adobe photoshop. Dan jika anda pernah download template hasil modifikasi minima yang saya beri nama "Thirteen Mag Blogger Template", maka tidak ada salahnya trik yang saya tulis dibawah ini dipraktekkan.

Pada Edit html, cari kode dibawah ini :

]]></b:skin>

<style type='text/css'>
<b:if cond='data:blog.pageType != "item"'>

.... dst ( bagian ini tidak saya jelaskan)

.post {
width: 400px;
float: left;
}

.... dst ( bagian ini tidak saya jelaskan)

</b:if>
</style>

Nah, pada bagian .post tambahkan position: relative, sehingga setelah ditambahkan susunannya akan menjadi seperti dibawah ini :

.post {
width: 400px;
position: relative;
float: left;
}

Kemudian tambahkan kode berikut ini , sebelum kode </b:if>

#showlink a {position: absolute; left:290px; padding-top:20px; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBPniH-K49uW7_I55lPHKOSN6RS9D32Q0UolIB-E0jJ4ZBujxWRKlVoKN3axAZHkjVnjAW_m2GImDZZAH-iOrun9pN04Qtlgy04XGWy9muuU-jyuSfMtP5dEJa4RY5HHMWuJeXhbVc3gXf/s1600/selanjutnya.png) no-repeat; height:30px; width:100px; padding:0 0 0 0;}
#showlink a:hover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPUGX2Moa1hLa7zDUqPWXaGePOa2uSINT4_X5DHLLdwc-yF6X1FAQ50c462A_wm5CbJlznUMTpx4FLxq5CFQMUlb5p7NDceAin2mBCC-kBkltbV7cajuYmLsnzFzOoEF2JwtW2WtRjsX9S/s1600/selanjutnya2.png) no-repeat;}

Simpan dulu template yang telah diubah, kemudian centang Expand Widget Templates dan cari kode dibawah ini :

<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  read more</a></span>

Ganti kode diatas dengan kode dibawah ini :

<span id='showlink'><a expr:href='data:post.url'/></a></span>

Klik pratinjau dulu untuk memastikan hasilnya baru kemudian simpan template yang telah diubah.

Untuk masalah gambar, silahkan dibuat sesuai selera yang penting ukuran gambar adalah 30 X 100px.
Dengan tampilan Readmore yang sekarang, blog ini terasa beda. Harapan saya, semoga bagi pengguna template "Thirteen Mag Blogger Template" semoga sukses mengganti readmore anda.

16 Juli 2010

Trik membuat Iklan PTC

Kegemaran main di PTC, akhirnya saya memutuskan untuk membuat sebuah blog yang saya khususkan untuk memajang PTC yang saya ikuti.

Nah, pada kesempatan kali ini saya ingin mencoba membagi pengalaman dalam memaksimalkan banner Paid To Click (PTC) yang kita ikuti ( Tutorial ini sekaligus promosi blog PTC-ku, siapa tahu ada yang berminat dan menjadi refferal saya ).

Banyak saya jumpai, para blogger yang mengikuti dan mencari refferal PTC hanya memajang banner saja pada ruang postingnya dengan uraian keterangan yang panjang. Nah, dengan tutorial ini saya harapkan promosi banner kita akan semakin apik, enak dilihat , praktis dan mudah dicerna.
Coba perhatikan gambar dibawah ini :

Untuk membuatnya, kita harus tahu bahwa ukuran dari banner yang disediakan rata-rata 468 X 60, jadi diharapkan ruang posting anda harus melebihi 468 px. Untuk menghasilkan gambar diatas, anda cukup mengedit kode dibawah ini pada ruang posting ( Pada Tutorial ini saya ambil contoh : Cashium.net )

<b></b>
<div>
<b>Cashium.net</b></div>
<div>
<b><span style="font-weight: normal;"><a href="http://www.cashium.net/?rid=nataludin" target="_blank" title = "cashium.net"><img border="0" height="60" src="http://www.cashium.net/banners/460x60_green.gif" width="468" /></a></span></b>
<table border="1" height="60" style="width: 468px;"><tbody>
<tr><td width="64"><div align="center">
<img align="middle" alt="Account Type" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8sFT-mmbD3qbJXcJF1qVRe0vpHQdBFaKB8JtSm4C8s1oLcYvH6jeaIUDA6TKsqMy1aKGuean32_DIS3dbvZJWQdq_9iDG3Hi5uDD-kGUHmoKkNwU5vn8mCN4sGMi2ild3U4qFWkonP6E/s1600/icon_account.png" width="32" /></div>
</td><td width="58"><div align="center">
<img align="middle" alt="Your Click" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibyJPyWQoLdtt14pZCw2S53hY1f5kDhGKGV3y8QNzJhX8HXLhxj2_HPZnPVEatgapdmeoUILMAph-0X2tYEKQtsOsqpXfwXyz3gVKzXgt3Vv3iUAihRXshzYvkkfyBrgt8OncoFuGMaZ4/s1600/icon_click.png" width="32" /></div>
</td><td width="50"><div align="center">
<img align="middle" alt="Ref Click" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesEWtOFrOnFDYbk09yOF2TTfw9usYDcwY7lcaoNXRYALX42sdbUy_NZLYtXCH8BQSm9hvFlXx8ZLplBx4mNIK1mOl0S8OhFajrrHQe-TCH-Ck_10JaOsvkqxLEhDYDrxU6qwUTPgqZ2Y/s1600/icon_refclick.png" width="32" /></div>
</td><td width="47"><div align="center">
<img align="middle" alt="Cashout" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGh0Oj2KnLhCdW6YO7PDNNrIuASdkVUYAi1maP-kikuu5poSZKvcjtp9JmyyhBsXLQNbnHPr4UGkVX7jDnmT_O7fCFq_PA-PZYTx9_Ub39ddzOUyKiUxyIBDp_UO4BPwlqZaL-gzWskqU/s1600/icon_cashout.png" width="32" /></div>
</td><td width="51"><div align="center">
<img align="middle" alt="Time for Payment" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-snR7R_SGk4fvrfw06ei-19MaSD_d7kEXSYrqA3BFgKAgOvwPxq2Y1tpGAvmLdMj_J4U-TC2IyqJIGrDfZ9EBWpmbFbFm3a-mLlp6kacnHCOcG11UygUqE24eNYaNPp2iPiNDZretEkg/s1600/icon_paytime.png" width="32" /></div>
</td><td width="47"><div align="center">
<img align="middle" alt="Amount of Ads" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0N1M4ssu7W0Nb6Le9Srg9HGenOA-Qqr5-1QNxl5XIIVt4hx1gg5f_LBMu_xGJ_Kvkq_yFXeZ7e3KsQ5lgspmMwQ2T7PV_LG-gfeGqmk8bwsBMi75egUuLQKjZQlCrB0vbfs0ZarFkIow/s1600/icon_ads.png" width="32" /></div>
</td><td width="47"><div align="center">
<img align="middle" alt="Payment Processor" height="26" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYo28yq6BDmMMkObTw07MTao3ojuzS7-nFfdm_HVaIeVr7NAjXi4ME1QpwfD18mPlaJ1NyGr4-mvv-BrBWCdWXEWiDRp3Rr0bvTda2oG1169rUPcvCLAuMMIojzDS7Jkxe_451rAyqy9I/s1600/icon_paymethod.png" width="32" /></div>
</td><td width="52"><div align="center">
<img align="middle" alt="Status" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0U62u6XeZpoZ1SYoL2euYbpFvd45e89jfD6vhNZfD3QN6yWM9qNH5LcRqb3wxISayksi7lwnB3A8gVvcTDPDTpP8-BHx5Al3Ea3RBkt31hhdo7ChY-ZuZGbETgr9IkHOqz8b4hS_QoU/s1600/icon_paid.png" width="32" /></div>
</td></tr>
<tr><td><div align="center">
<b>Standard</b></div>
</td><td><div align="center">
$0.008</div>
</td><td><div align="center">
$0.004</div>
</td><td><div align="center">
$2</div>
</td><td><div align="center">
Instant</div>
</td><td><div align="center">
6+</div>
</td><td><div align="center">
PP/AP</div>
</td><td><div align="center">
Proofs</div>
</td></tr>
<tr><td><div align="center">
<b>Premium</b></div>
</td><td><div align="center">
$0.01</div>
</td><td><div align="center">
$0.007</div>
</td><td><div align="center">
$2</div>
</td><td><div align="center">
Instant</div>
</td><td><div align="center">
8+</div>
</td><td><div align="center">
PP/AP</div>
</td><td><div align="center">
Proofs</div>
</td></tr>
</tbody></table>
<table border="1" height="10" style="width: 468px;"><tbody>
<tr><td><div align="center">
<a href="http://www.cashium.net/?rid=nataludin " target="_blank">Click here to Register!</a></div>
</td><td><div align="center">
<b>Review: </b> <span style="color: red;"><a href="http://ah-71-testdesign.blogspot.com/search/label/Cashium.net">Click Here</a></span></div>
</td><td><div align="center">
<span style="color: green;">Paying</span></div>
</td></tr>
</tbody></table>
</div>

Mari kita bahas satu persatu cara mengedit kode diatas.

1. Cashium.net adalah nama dari PTC yang kita ikuti, jadi anda bisa mengubah sesuai PTC yang diikuti.

2. <a href="http://www.cashium.net/?rid=nataludin" target="_blank" title = "cashium.net"><img border="0" height="60" src="http://www.cashium.net/banners/460x60_green.gif" width="468" /></a>

Ini adalah Link promosi banner kita.

3. <img align="middle" alt="Account Type" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8sFT-mmbD3qbJXcJF1qVRe0vpHQdBFaKB8JtSm4C8s1oLcYvH6jeaIUDA6TKsqMy1aKGuean32_DIS3dbvZJWQdq_9iDG3Hi5uDD-kGUHmoKkNwU5vn8mCN4sGMi2ild3U4qFWkonP6E/s1600/icon_account.png" width="32" />

Ini adalah link dari ICON account type yang dilambangkan huruf "i" pada lingkaran biru muda. Pada kolom ini nantinya akan terisi type STANDART , PREMIUM dll.

4. <img align="middle" alt="Your Click" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibyJPyWQoLdtt14pZCw2S53hY1f5kDhGKGV3y8QNzJhX8HXLhxj2_HPZnPVEatgapdmeoUILMAph-0X2tYEKQtsOsqpXfwXyz3gVKzXgt3Vv3iUAihRXshzYvkkfyBrgt8OncoFuGMaZ4/s1600/icon_click.png" width="32" />

Ini adalah link dari Icon "YOUR CLICK" yang dilambangkan dengan Icon orang tunggal. Pada type Standart, kolom ini akan diisi nilai $0,008, sedangkan pada type Premium kolom ini akan diisi nilai $0,01

5. <img align="middle" alt="Ref Click" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiesEWtOFrOnFDYbk09yOF2TTfw9usYDcwY7lcaoNXRYALX42sdbUy_NZLYtXCH8BQSm9hvFlXx8ZLplBx4mNIK1mOl0S8OhFajrrHQe-TCH-Ck_10JaOsvkqxLEhDYDrxU6qwUTPgqZ2Y/s1600/icon_refclick.png" width="32" />

Ini adalah link dari Icon "REF CLICK" (Nilai klik untuk Referral kita) yang dilambangkan dengan Icon orang ganda. Pada type Standart, kolom ini akan diisi nilai $0,004, sedangkan pada type Premium kolom ini akan diisi nilai $0,007

6. <img align="middle" alt="Cashout" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGh0Oj2KnLhCdW6YO7PDNNrIuASdkVUYAi1maP-kikuu5poSZKvcjtp9JmyyhBsXLQNbnHPr4UGkVX7jDnmT_O7fCFq_PA-PZYTx9_Ub39ddzOUyKiUxyIBDp_UO4BPwlqZaL-gzWskqU/s1600/icon_cashout.png" width="32" />

Ini adalah link dari Icon "CASHOUT" ( Batas minimal penarikan dana dari balance ) yang dilambangkan dengan Icon Karung Hijau dengan $. Pada type Standart, kolom ini akan diisi nilai $2, sedangkan pada type Premium kolom ini akan diisi nilai $2.

7. <img align="middle" alt="Time for Payment" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-snR7R_SGk4fvrfw06ei-19MaSD_d7kEXSYrqA3BFgKAgOvwPxq2Y1tpGAvmLdMj_J4U-TC2IyqJIGrDfZ9EBWpmbFbFm3a-mLlp6kacnHCOcG11UygUqE24eNYaNPp2iPiNDZretEkg/s1600/icon_paytime.png" width="32" />

Ini adalah link dari Icon "TIME FOR PAYMENT" (Jangka Waktu Pembayaran) yang dilambangkan dengan Icon Kalender

8. <img align="middle" alt="Amount of Ads" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0N1M4ssu7W0Nb6Le9Srg9HGenOA-Qqr5-1QNxl5XIIVt4hx1gg5f_LBMu_xGJ_Kvkq_yFXeZ7e3KsQ5lgspmMwQ2T7PV_LG-gfeGqmk8bwsBMi75egUuLQKjZQlCrB0vbfs0ZarFkIow/s1600/icon_ads.png" width="32" />

Ini adalah link dari Icon "AMOUNT OF ADS" ( Jumlah iklan yang tampil dalam 24 jam) yang dilambangkan dengan Icon Monitor. Pada type Standart/Premium, kolom ini akan diisi INSTANT.

9. <img align="middle" alt="Payment Processor" height="26" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYo28yq6BDmMMkObTw07MTao3ojuzS7-nFfdm_HVaIeVr7NAjXi4ME1QpwfD18mPlaJ1NyGr4-mvv-BrBWCdWXEWiDRp3Rr0bvTda2oG1169rUPcvCLAuMMIojzDS7Jkxe_451rAyqy9I/s1600/icon_paymethod.png" width="32" />

Ini adalah link dari Icon "PAYMENT PROCESSOR" ( Alat bayar yang digunakan) yang dilambangkan dengan Icon Paypal/Alert Pay. Kolom ini akan diisi AP/PP

10. <img align="middle" alt="Status" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgh0U62u6XeZpoZ1SYoL2euYbpFvd45e89jfD6vhNZfD3QN6yWM9qNH5LcRqb3wxISayksi7lwnB3A8gVvcTDPDTpP8-BHx5Al3Ea3RBkt31hhdo7ChY-ZuZGbETgr9IkHOqz8b4hS_QoU/s1600/icon_paid.png" width="32" />

Ini adalah link dari Icon "STATUS" dari PTC yang kita ikuti, apakah membayar atau SPAM. Pada kolom ini diisi sesuai status PTC tersebut.

Coba perhatikan kode dibawah ini :

<tr><td><div align="center">
<b>Standard</b></div>
</td><td><div align="center">
$0.008</div>
</td><td><div align="center">
$0.004</div>
</td><td><div align="center">
$2</div>
</td><td><div align="center">
Instant</div>
</td><td><div align="center">
6+</div>
</td><td><div align="center">
PP/AP</div>
</td><td><div align="center">
Proofs</div>
</td></tr>
<tr><td><div align="center">
<b>Premium</b></div>
</td><td><div align="center">
$0.01</div>
</td><td><div align="center">
$0.007</div>
</td><td><div align="center">
$2</div>
</td><td><div align="center">
Instant</div>
</td><td><div align="center">
8+</div>
</td><td><div align="center">
PP/AP</div>
</td><td><div align="center">
Proofs</div>
</td></tr>

Kode diatas jika digambarkan adalah seperti ini :

Jadi, isi dari masing-masing jenis Account Type disesuaikan dengan kondisi dari PTC yang diikuti.

11. Untuk kode dibawah ini :

<table border="1" height="10" style="width: 468px;"><tbody>
<tr><td><div align="center">
<a href="http://www.cashium.net/?rid=nataludin " target="_blank">Click here to Register!</a></div>
</td><td><div align="center">
<b>Review: </b> <span style="color: red;"><a href="http://ah-71-testdesign.blogspot.com/search/label/Cashium.net">Click Here</a></span></div>
</td><td><div align="center">
<span style="color: green;">Paying</span></div>
</td></tr>
</tbody></table>

Jika digambarkan akan seperti ini :

Warna merah adalah link referral kita, sedangkan warna biru adalah link tempat review yang membahas tentang PTC tersebut.

Coba anda kunjungi blogku " CLICK$-THE BEST PTC", untuk melihat hasilnya. Jika anda berkunjung ke blog tersebut, pada kolom sidebar akan dijumpai BANNER dari masing-masing PTC dengan ukuran lebih kecil. Saya tidak merubah ukuran banner aslinya, hanya saja pada saat menambahkan kode banner tersebut pada Sidebar, cukup menambahkan ukuran width yang disesuaikan dengan kelebaran sidebar kita.
Contoh :

<a href="http://www.cashium.net/?rid=nataludin" target="_blank" title = "cashium.net"><img border="0" src="http://www.cashium.net/banners/460x60_green.gif" width="290" /></a>

hasilnya adalah :

width="290" sudah disesuikan dengan lebar sidebar.
Semoga tutorial ini bermanfaat dan dapat memaksimalkan PTC yang kita ikuti

04 Juni 2010

Horizontal jQuery Accordion pada MINIMA

Sudah lama absen dari BloGGer, membuat aku kangen sama MINIMA. Kali ini saya akan mencoba membuat tutorial bagaimana cara menerapkan "A Horizontal jQuery Accordion using Custom Event Binding" pada minima.

Saya mendapatkan tutorial ini di http://www.gethifi.com/blog/tutorial-a-horizontal-jquery-accordion-using-custom-event-binding dengan demonya di http://www.striving4more.org, namun sepertinya akan sulit dipahami dan sulit diterapkan pada Blogger jika kita tidak teliti dalam menyimak tutorial. Menurut saya, tutorial yang disuguhkan tidak untuk blogger. Karena tidak dijelaskan "step by step", justru saya lebih suka melihat dari kode sumber tampilan demonya.

Untuk tutorialnya saya baca sekilas saja, namun pada kode sumber tampilannya saya mencoba mengupas satu persatu kemudian kususun dalam Notepad dan saya terapkan pada minima (buat blog baru).

Langkah demi langkah menerapkan "A Horizontal jQuery Accordion using Custom Event Binding" pada minima.

Saya sarankan untuk membuat blog baru dengan template minima sebagai dasar.
Karena ukuran asli Minima adalah 660px, maka kita harus melebarkan ukuran tersebut pada :

1. Header. Coba perhatikan CSS dibawah ini :

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ubah 660px dengan 940 px

2. Susunan Outer-Wrapper kita ubah seperti dibawah ini :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 610px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

3. Susunan Headings diubah seperti dibawah ini :

/* Headings
----------------------------------------------- */

h2 {
margin:1.5em 0 .75em;
font:$headerfont;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color:$sidebarcolor;
}

h3 { font-size: 16px; line-height: 20px; }

4. Tambahkan kode dibawah ini sebelum atau diatas kode ]]></b:skin>

/* slide
----------------------------------------------- */
#home { height: 420px; width: 610px; position: relative; margin: 20px 20px 0 0px; background: url('http://backgraound.jpg') no-repeat; }
#slides { list-style: none; margin: 0; padding: 0; position: absolute; top: 11px; left: 11px; width: 577px; height: 285px; overflow: hidden; }
#slides .slide { position: absolute; top: 0px; list-style: none; width: 541px; }
#slides .slide img { position: absolute; top: 0px; left: 0px; }
#slides .slide .slidebutton { display: block; position: absolute; top: 0px; right: 0px; height: 285px; width: 21px; background: #693d5e; text-decoration: none; border-right: 1px solid white; }
#slides .active .slidebutton { background: #55354a; }
#slides .slide .slidebutton img { position: absolute; top: auto; display: block; bottom: 5px; left: 5px; }
/*
#slides .slide .slidebutton span { display: block; text-align: right; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); position: absolute; bottom: 100px; left: -90px; width: 200px; color: #f2ecd0; font-family: verdana, sans-serif; font-size: 12px;
}
*/
#slide-1 { position: absolute; top: 0; right: 44px; z-index: 3; }
#slide-2 { position: absolute; top: 0; right: 22px; z-index: 2; }
#slide-3 { position: absolute; top: 0; right: 0px; z-index: 1; }

#slidecontents { list-style: none; margin: 0; padding: 0; position: absolute; top: 340px;
left: 10px; width: 570px; }
#slidecontents .slidecontent { display: none; position: absolute; }
#slidecontents .open { display: block; }
#slidecontents .slidecontent h3 { display: inline; color: #C9AB2D; font-size: 24px; line-

height: 28px; font-family: georgia, serif; font-weight: normal; margin: 0; }
#slidecontents .slidecontent p { display: inline; color: #6A7C98; font-size: 14px; line-

height: 24px; }
#slidecontents .slidecontent p a { color: #C9AB2D; font-size: 11px; text-decoration: none;

}

Keterangan : untuk backgraound.jpg , buatlah gambar dengan ukuran 601px X 332px. kemudian upload di blogger dan ambillah url yang kita peroleh setelah proses upload. contoh urlnya adalah : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDOiibjusWGc2BIfqXsD7-DrFW990qQtn_FmcN1cjhPuDayfgorM8skhg182FdxVN4uAVyGcJ7nl7YQvxZ53j35BP4pgepdz9zjXEwZVgOw-myG-05yBC0mCkaLNdnmF_JTtD04uY0W-s/s1600/bg3slide.jpg

5. Tambahkan kode dibawah ini setelah kode ]]></b:skin>

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>

$(document).ready(function(){

$('.slide')
.bind('open', function(){
if(! $(this).hasClass('open')){
$(this).next().trigger('open');
$(this).addClass('open');
$(this).animate({right: "-=511px"});
}
else{
$(this).prev().trigger('close');
}
$(this).siblings().removeClass('active');
$(this).addClass('active');
})
.bind('close', function(){
if($(this).hasClass('open')){
$(this).removeClass('open');
$(this).animate({right: "+=511px"});
$(this).prev().trigger('close');
}
});

$('.slidebutton')
.click(function(){
$(this).parent().trigger('open');
$('#content-' + $(this).parent().attr('id')).trigger('show');
});

$('.slidecontent').bind('show', function(){
$('.slidecontent').removeClass('open');
$(this).addClass('open');
});

});
</script>

6. Perhatikan kode dibawah ini :

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
</div>

Masukkan kode dibawah ini setelah kode <div id='main-wrapper'>

<div id='home'>
<div id='slideshow'>
<ol id='slides'>
<li class='slide open active' id='slide-1'>
<a href='url yang akan ditampilkan'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw1Cc1NWaEYvIg_dmOmx4bUeYnfHJefT7_zVmPuv2TAj5DoKMIH9oSNvbkQChjlKnVWE_WVjVbDUBGUKMqPL9xJmwS7MDrSA2pbMVCPl54FkSE1n2CftgCNVgiFiwnS1Nt5N07e2Gf0Gg/s1600/loedin1.jpg'/></a>
<a class='slidebutton' href='javascript:void(0);'><img alt='' src='http://www.striving4more.org/files/images/gold-ribbon/gold-ribbon.gif'/></a>
</li>

<li class='slide open' id='slide-2'>

<a href='url yang akan ditampilkan'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo4Yu1EbKoMFfmlfeybrhifSZ9nbqjgZw0Z6yerWJ41km031EJksB_S2syQQMGoOKiQpy20yYxBMxYHKTVtspyLIoIbYLIIyhG3JMfilma8iaSdyOgqJFYt7S-3MqkE3UT_Y73b4hdmVY/s1600/ahn2.jpg'/></a>
<a class='slidebutton' href='javascript:void(0);'><img alt='' src='http://www.striving4more.org/files/images/how-to-help/how-to-help.gif'/></a>
</li>

<li class='slide open' id='slide-3'>
<a href='url yang ditampilkan'><img alt='' src='http://www.striving4more.org/files/images/our-vision/our-vision.jpg'/></a>
<a class='slidebutton' href='javascript:void(0);'><img alt='' src='http://www.striving4more.org/files/images/our-vision/our-vision.gif'/></a>
</li>
</ol>
<ol id='slidecontents'>

<li class='slidecontent open' id='content-slide-1'>
<h3>JUDUL SLIDE- 1</h3>
<p>Penggalan kalimat yang mewakili slide - 1. <a href='URL dari Slide-1'>[more]</a></p>

</li>
<li class='slidecontent' id='content-slide-2'>
<h3>JUDUL SLIDE- 2</h3>

<p>Penggalan kalimat yang mewakili slide - 2. <a href='URL dari Slide-2'>[more]</a></p>
</li>

<li class='slidecontent' id='content-slide-3'>
<h3>JUDUL SLIDE- 3</h3>

<p>Penggalan kalimat yang mewakili slide - 3. <a href='URL dari Slide-3'>[more]</a></p>
</li>
</ol>
</div>
</div>

Keterangan : untuk masing-masing gambar buatlah dengan ukuran 520px X 285px.

Untuk melihat demonya anda bisa berkunjung di Test : A Horizontal jQuery Accordion using Custom Event Binding

Rencananya, template yang saya jadikan demo nantinya secara berkala akan saya modifikasi. Untuk saat ini, masih tengak-tengok kanan-kiri untuk mencari inspirasi.

05 Maret 2010

Download BC-MAGAZINE BLOGGER 2010

BC-MAGAZINE Blogger 2010 setelah tertunda peluncurannya karena masalah internet yang lambat dan sempitnya waktu yang ada, dalam postingan kali ini saya memberitahukan kepada rekan-rekan Blogger yang ingin mengganti template blognya, BC-Magazine Blogger 2010 mungkin dapat dijadikan solusinya.

Penjelasan install template ini, jika anda sudah mendownload eBOOK modifikasi Minima dan membacanya maka saya yakin sudah bisa mengganti template anda dengan template ini.

Disini saya hanya menambahkan tentang bagaimana menambahkan Recent Post yang dalam demo template ini berada di kolom footer sebelah kiri.

Setelah login masuk Layout/ Tata Letak kemudian Elemen Laman pilih Html/ Javascript, kemudian tambahkan kode dibawah ini :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfBZXPUeHqOkSOxw38EwHhwRW-bm_bu55phqjv31x6fmSa9ZxjrpuCei5GeEQnIyC9bPKcj1rf83Vd0V-xlu9W-EVN08qwYkEpsiSEfBK6m-dAcb981lzjLomop5LGO3mrtYDnuF5Uv3s/s1600/my-data.png";

showRandomImg = true;
boxwidth = 550;
cellspacing = 8;
borderColor = "#eefacf";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://NAMABLOG.blogspot.com/";
</script>

<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx=s.join("");}chop=(chop<strx.length-1)?chop:strx.length-2;while(strx.charAt(chop-1)!=' '&&strx.indexOf(' ',chop)!=-1)chop++;strx=strx.substring(0,chop-1);return strx+'...';}function showrecentposts(json){document.write('<table width="'+boxwidth+'" border=0 bordercolor="#FF0000" align="left" cellspacing="'+cellspacing+'" bgcolor="'+borderColor+'">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break;}}if("content"in entry){var postcontent=entry.content.$t;}else if("summary"in entry){var postcontent=entry.summary.$t;}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;cmtext=(text!='no')?'<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>':'';var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break;}}var daystr=(showPostDate)?'<i><font color="'+acolor+'"> - ('+day+' '+m+' '+y+')</font></i>':"";posttitle=(aBold)?"<b>"+posttitle+"</b>":posttitle;var trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td style="font-size: 12px;">'+icon+'<a href="'+posturl+'">'+posttitle+'</a> - <span style="font-size: 9px; color: #616161;'+cmtext+' </span></td></tr>';if(summaryPost==0){trtd='<tr><td><img src="'+img[i]+'" width="'+thumbwidth+'" height="'+thumbheight+'"/></td><td>'+icon+'<a href="'+posturl+'">'+posttitle+'</a></td></tr>';}document.write(trtd);j++;}document.write('</table>');}document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); //]]>
</script>

Silahkan ganti text warna merah masing-masing dengan URL GAMBAR dan NAMA BLOG anda.

Untuk mendownload template ini, silahkan kunjungi bCOMStudio sedangkan untuk melihat tampilan dari BC-Magazine Blogger 2010 silahkan klik DISINI.

Semoga bermanfaat.

17 Februari 2010

Membuat Sliding Vertical Panel

Tutorial kali ini merupakan pengalaman saya dalam merubah tampilan bCOMStudio, yaitu bagaimana agar navigasi menu tidak monoton selalu berada di header-bottom atau di bagian atas header maupun sidebar.
Sliding Vertical Panel dapat dimanfaatkan untuk menempatkan menu navigasi dan keterangan lain yang menyangkut isi dari blog. Sliding Vertical Panel dibuat dengan menggunakan perpaduan jQuery dan CSS3.

Coba silahkan berkunjung di bCOMStudio, dan silahkan klik Button Navigasi maka anda akan menyaksikan bagaimana Sliding Vertical Panel bekerja dan apa saja isinya. Tentu saja isi daripada Sliding Vertikal Panel tergantung selera pembuatnya.

Langkah demi langkah cara membuat Sliding Vertical Panel.

1. Login ke Blogger.
2. Tata letak > Edit Html . Tidak perlu mencentang Expand Template Widget
3. Tambahkan kode dibawah ini, diatas kode ]]></b:skin>

/*------Sliding Vertical Panel------*/
.panel {
position: fixed;
top: 50px;
left: 0;
display: none;
background: #000000;
border:1px solid #111111;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 30px;
filter: alpha(opacity=90);
opacity: .90;
}

.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #cccccc;
}

.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: #9FC54E;
text-decoration: none;
border-bottom: 1px solid #9FC54E;
}

.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
border-bottom: 1px solid #ffffff;
}

a.trigger{
position: fixed;
text-decoration: none;
top: 10px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 15px;
font-weight: 700;
background:#333333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAChaRW_cRrTDfswhWRdvQjXCheevHRZ61L95w4KESek4B8EvbBzkWiGaUEY2mGje5deQDuybVBZoG2j5rUhQjq4xXtCN5QmpYaIqdgVGgpiNme3Vz_YsSLSkNeU5SQryoF0jYpr_8Iuom/s1600/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.trigger:hover{
position: fixed;
text-decoration: none;
top: 10px; left: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAChaRW_cRrTDfswhWRdvQjXCheevHRZ61L95w4KESek4B8EvbBzkWiGaUEY2mGje5deQDuybVBZoG2j5rUhQjq4xXtCN5QmpYaIqdgVGgpiNme3Vz_YsSLSkNeU5SQryoF0jYpr_8Iuom/s1600/plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-bottom-left-radius: 0px;
display: block;
}

a.active.trigger {
background:#222222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIExymgQDup0Bw-54mEYpCNmIfDDvNdejIfFUPC39DR06m7HtP37Bk-0zYI1o57QESvFp588hNa-f04BBftNCDWeXxzuxIOdm6Z4vOy96DdRYN61yHFFuokjpwyMtkHCz4cNlUELuZY7gX/s1600/minus.png) 85% 55% no-repeat;
}

.columns{
clear: both;
width: 330px;
padding: 0 0 20px 0;
line-height: 22px;
}

.colleft{
float: left;
width: 130px;
line-height: 22px;
}

.colright{
float: right;
width: 130px;
line-height: 22px;
}

ul{
padding: 0;
margin: 0;
list-style-type: none;
}

ul li{
padding: 0;
margin: 0;
list-style-type: none;
}

hr{
background-color: #333333;
height: 1px;
}

4. Tambahkan kode jQuery JavaScript Library v1.3.2 dibawah kode ]]></b:skin>:


<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>


<script type="text/javascript">
$(document).ready(function(){
$(".trigger").click(function(){
$(".panel").toggle("fast");
$(this).toggleClass("active");
return false;
});
});
</script>

5. Tambahkan kode dibawah ini pada bagian body ( diatas kode </body> )

<div class='panel'>
<h3>Judul Panel Anda</h3>
<p>Isikan kalimat pembuka disini</p>

<h3>About Me</h3>
<a href='URL profil blogger' target='_blank'><img class='right' src='URL Image' style='border:0;margin: 3px 3px 6px 8px; padding: 5px;background: #222222;border: 1px solid #333333;float:right;'/></a>

<p>Tuliskan info tentang profil</p>

<div style='clear:both;'/>

<div class='columns'>
<div class='colleft'>
<h3>Navigation</h3>

<ul>
<li><a href='http://bcomstudio.blogspot.com' title='home'>Home</a></li>
<li><a href='#' title='tab-2'>Tab-2</a></li>
<li><a href='#' title='tab-3'>Tab-3</a></li>
<li><a href='#' title='tab-4'>Tab-4</a></li>
<li><a href='#' title='tab-5'>Tab-5</a></li>
</ul>

</div>
<div class='colright'>

<h3>Isikan Judul</h3>

<ul>
<li>><a href='URL' target='_blank'>Judul</a></li>
<li>><a href='URL' target='_blank'>Judul</a></li>
/*...... tambahkan sesuai keinginan .....*/
</ul>

<h3>Isikan Judul</h3>

<ul>
<li>><a href='URL' target='_blank'>Judul</a></li>
<li>><a href='URL' target='_blank'>Judul</a></li>
/*...... tambahkan sesuai keinginan .....*/
</ul>

</div>
</div>
<div style='clear:both;'/>
</div>
<a class='trigger' href='#'>Navigasi</a>

Untuk isian pada point 5, tergantung kreatifitas anda.

6. Jika anda ingin menerapkan jQuery JavaScript Library v1.3.2 secara langsung disaat edit HTML pada Blogger, silahkan download kode tersebut kemudian isikan sesuai petunjuk dibawah ini :

<script type='text/javascript'>
//<![CDATA[

.... isikan kode jQuery JavaScript Library v1.3.2 disini ...

//]]>
</script>

Jika anda ingin mengetahui secara lengkap tentang tutorial ini dan bagaimana penerapan dari kode-kode diatas silahkan download DISINI.

Selamat mencoba.

11 Februari 2010

Template Blogger 2010

Sebenarnya aku bingung mau memberi nama apa tentang template ini, habis beberapa hari ini mencoba menerapkan sistem penulisan Javascript langsung dalam template... ndak jadi-jadi. Akhirnya dengan sak kepenak-ke dhewek aku sebut saja Mbulet blog.

Masih seperti biasanya, aku mencoba memodifikasi template MINIMA kemudian dengan memperhatikan beberapa template yang beredar saat ini, saya mencoba menerapkannya ke dalam template minima ini.

Mbulet blog sebenarnya terdiri dari dua kolom, namun karena aku mencoba memodifikasi agar terkesan multikolom maka aku tambahkan modifikasi dari html-nya.

Pada ruang Home Page, semua posting terakhir akan tampil penuh sedangkan posting kedua dan seterusnya ( tergantung kita format berapa tampilan postingannya ) secara otomatis akan menempatkan diri di kolom tengah. Jadi untuk kolom ini tidak bisa ditambahkan widget, sedangkan pada bagian sidebar dapat dipasang widget suka-suka kita.

Yang perlu diperhatikan dalam penggunaan template ini.

1. Pada bagian posting pertama, untuk tinggi ruang apabila panjang artikel melebihi 1500px, maka kita harus merubah ukuran Height secara manual. Untuk mengubah ukuran height, coba perhatikan bagian ini :

#first{
width: 530px;
height: 1500px;
margin: 0px 15px 10px 0px;
padding:0px;
float:left;
background: #111;
border: 1px solid #1b1b1b;
clear:both
}

Ukuran 1500px saya anggap standart, apabila pada bagian ini tidak saya tambahkan maka apabila artikel pada posting terakhir terlalu pendek maka tampilan cuplikan posting kedua dan seterusnya akan berada di bawah posting pertama bahkan terkesan berantakan.
Ukuran bisa ditambah sesuai dengan panjang artikel.

2. Tentu saja kita ingin menambahkan iklan di dalam ruang posting pertama, maka coba perhatikan kode dibawah ini : ( centang Expand Template Widget )

<div class='first-body'>
<p><data:post.body/></p>
</div>

Untuk menambahkan kode iklan anda, silahkan perhatikan kode dibawah ini :

<div class='first-body'>
<p><data:post.body/>...... Tambahkan kode anda disini.......</p>
</div>

3. Apabila artikel yang ditulis tidak bergambar, jika artikel ini nantinya akan menjadi artikel kedua dan seterusnya maka gambar akan secara otomatis diisi gambar yang sudah saya setting. Untuk merubah tampilan gambar tersebut, coba perhatikan kode dibawah ini

.......dst.......

if(img.length<=0) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px !important;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAT-RRC13jf9SVEkbTm6EFgN1qlbcMn75hyDXpFxBk-6ubCJnHayLedZkDv7keQTiXH-ZZNdNCkdDRpgUEm_69D_yyYpfL-QVrR12OaQyMLhskRTLQ7cFvK2o2_gTJk5VnvwbUBDzHaoaz/s320/logo-nyar-bcom.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>

........dst......

Silahkan ubah URL berwarna merah dengan Url image yang anda punyai.

Jika ada waktu anda bisa menyempatkan untuk melihat demonya di SINI.
Untuk download, anda bisa berkunjung ke bCOMstudio, tempat dimana saya mengompulir hasil modifikasi template.

25 Juni 2009

Thirteen Mag Blogger Template

Sebuah template "Thirteen Mag Blogger Template" telah saya buat dan sudah dianggap final untuk segera saya sebar agar bisa digunakan oleh komunitas blogger yang saya cintai. bidikCOM juga menggunakan template ini, hanya saja pada bagian footer saya rubah jadi tiga kolom.

" Thirteen Mag Blogger Template" ini terdiri dari :

13 kolom dengan perincian : 4 kolom atas dengan scroll, 3 kolom utama dan 6 kolom sebelum footer.
Header dibagi dua kolom, jadi pengguna " Thirteen Mag Blogger Template" dapat menambahkan iklan dengan ukuran 486 X 100px.
" Thirteen Mag Blogger Template" mempunyai navigasi menu yang mudah dioperasikan.
" Thirteen Mag Blogger Template" diinstall pula Tabview yang terdiri dari 3 kolom.
" Thirteen Mag Blogger Template" dengan readmore automatis.
" Thirteen Mag Blogger Template" menerapkan sistem gulir pada bagian kotak atas dan Kotak Komentar

Cara install " Thirteen Mag Blogger Template" .

Backup terlebih dahulu blog yang akan anda ganti dengan " Thirteen Mag Blogger Template" .
Yakinkan secara manual dengan menyalin Widget yang ada pada blog anda dengan menggunakan notepad.
Browse " Thirteen Mag Blogger Template" kemudian unggah " Thirteen Mag Blogger Template" .
Setelah konfirmasi dan simpan " Thirteen Mag Blogger Template" .
Selanjutnya terserah cara anda memperindah penampilan blog anda.

Cara dan larangan mengganti bagian-bagian tertentu.

1. Pengguna " Thirteen Mag Blogger Template" dimohon untuk tidak mengganti bagian credit - footer :

<div id='credit-footer'>
<p>
Copyright @ 2009 By : <a href="http://www.nataludin.com" target="_blank"><font color="yellow">Ayomaos</font></a> | Distribution by : <a href="http://bcomstudio.blogspot.com" target="_blank"><font color="yellow">bCOMstudio</font></a> | Powered By: <a href="http://blogger.com" target="_" blank><font color="yellow">Blogger</font></a> |
</p>

<p class="credit">
<a href="http://mozilla.com/firefox" target="_" title="Firefox" blank><img width="12" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5IEh1Fsrwq5fOCSY7zX2rSEiTqD5KrX7vBNZxtaT6zggILSHVW6M3EHi6l1_Sy7ISkLYFQCTTzWlqcimGNhP0bEf9LFEuucZyYx4JvRK2ENsHiqx1-YCFkKbdSCEv1DmCt-inwtmPG2ck/s1600-r/firefox-icon.gif" height="12"/></a>

<a href="
http://www.microsoft.com/windows/internet-explorer/default.aspx" target="_" title="Internet Explorer 8" blank><img width="13" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhorrlncEXiC0w_XeL7dsEc9QX-z6ZmUrYGbc26a_qDHLQA0XTQDl3tmK5ta2MGVIz4_SjJFFKEo4D7ukNYJ7x4sOrdYpvHMOj1UWnQPmRowWDDkYgRQFCvJzmEQiTfjMnWty3tKFoLGifK/s1600-r/eweb-ie7.gif" height="14"/></a>
</p>
</div>

2. Judul Blog yang ada di Header-Left.

Anda harus membuat gambar dengan ukuran 400 X 100 px ( gunakan Adobe Photoshop), kemudian diupload pada www.photobucket.com. Setelah mendapatkan kode gambar, kemudian kode gambar tersebut di ENCODE. Dibawah ini contoh menambahkan kode yang sudah diencode.

<div class='headerleft'>

<a href="http://s288.photobucket.com/albums/ll179/ahnning/?action=view&current=headertemplatebarucopy.jpg" target="_blank"><img src="http://i288.photobucket.com/albums/ll179/ahnning/headertemplatebarucopy.jpg" border="0" alt="magazine blogger template"></a>

</div>

Menambahkan kode IKLAN dibagian Header-right dengan cara encode kode iklan anda, kemudian tambahkan kode tersebut pada bagian header-right.

Contoh :

<div class='headerright'>

...... tempat kode iklan yang telah diencode ......

</div>

3. Mengganti bagian navigasi. Coba perhatikan susunan kode dibawah ini, kemudian lakukan penggantian sesuai dengan petunjuk yang ada di masing-masing bagian dari kode terebut.

<div id='mainMenu'>
<a>Products</a>
<a>Support</a>
<a>About us</a>
<a>Download</a>
</div>
<div id='submenu'>

<div id='submenu_1'>
<a href='http://ahn-bidikcom.blogspot.com'>Product 1</a>
<a href='http://ahn-bidikcom.blogspot.com'>Product 2</a>
<a href='http://ahn-bidikcom.blogspot.com'>Product 3</a>
</div>

<div id='submenu_2'>
<a href='http://ahn-bidikcom.blogspot.com'>Phone</a>
<a href='http://ahn-bidikcom.blogspot.com'>Email</a>
<a href='http://ahn-bidikcom.blogspot.com'>Knowledge base</a>

</div>

<div id='submenu_3'>
<a href='http://ahn-bidikcom.blogspot.com'>History</a>
<a href='http://ahn-bidikcom.blogspot.com'>The team</a>
<a href='http://ahn-bidikcom.blogspot.com'>Contact us</a>
<a href='http://ahn-bidikcom.blogspot.com'>Visions</a>

</div>

<div id='submenu_4'>
<a href='http://ahn-bidikcom.blogspot.com'>Patches</a>
<a href='http://ahn-bidikcom.blogspot.com'>Whitepapers</a>
<a href='http://ahn-bidikcom.blogspot.com'>Tab menu</a>
<a href='http://www.nataludin.com'>Color picker</a>
<a href='http://www.nataludin.com'>Window scripts</a>
<a href='http://www.nataludin.com'>Games</a>

</div>
</div>
<br id='clearmenu'/>

4. Untuk perubahan pada tab view seperti saat anda menambahkan gadget pada sidebar.

Semoga "Thirteen Mag Blogger Template" ini bermanfaat khususnya bagi komunitas blogger.
Tinggalkan pesan bila anda membutuhkan bantuan, Insyallah saya bantu sampai saya ampun-ampun menyerah....

Demo dan Download bisa anda lihat di bCOMStudio.

05 Juni 2009

jQuery Scroll to Top Control

Hari ini, Jum'at 05 Juni 2009 secara serentak saya posting artikel tentang jQuery Scroll to Top Control di beberapa blog saya, termasuk menginstallnya. Setelah saya mempelajari dari situs www.dynamicdrive.com lalu menerapkan ke blog saya, pada awalnya gagal. Namun setelah saya cermati dari beberapa kode script yang ada kemudian menghilangkan sederetan kodenya, lalu memasang URL dari Image di dalam srolltopcontrol.js filenya kemudian mengupload file jsnya ke www.geocities.com dan yang terakhir masuk pada edit html blogger dan akhirnya......

Anda bisa mendemokannya sendiri di halaman blog IRENG ini yang bernasip malang karena digebug-ki oleh EG ( untung LW masih peduli sama blog ini sehingga masih dapat job..he..he.. , tapi untuk BV, nampaknya... ngeres kali), coba perhatikan saat anda scroll halaman setelah mencapai separuh dari halaman ini maka akan muncul ICON ANAK PANAH ATAS. Nah, silahkan diklik.. maka halaman akan menggulir ke atas secara automatis.... berjalan seperti ARGO ANGGREK jurusan Sidoarjo- BATAM- KALIMANTAN...... (Apa ada, ya..... jurusan kesana).

Dengan memasang kode script jQuery Scroll to Top Control khusus pada blog ini, terpaksa saya harus merubah susunan html dari CREDIT fixed yang ada di bottom bidikCOM ini. Dari padding yang semula 15 px, terpaksa saya geser jadi 60 px sekedar untuk memberikan kelonggaran bagi icon jQuery Scroll to Top Control untuk mampir dan nongol batang hidungnya agar bisa unjuk gigi yang kemudian akan diklik oleh pengunjung setia bidikCOM.

Oke, ndak usah lama-lama kita bahas secara singkat. Bila ingin melihat gambaran yang lebih lengkap anda bisa ABSEN HADIR di AYOMAOS.

Silahkan login di blogger, tanpa contreng kotak Expand Widget Template ( karena bidikCOM memang tidak punya hak pilih), lalu cari kode : <head>.

Langkah selanjutnya dalam menambahkan script dari jQuery Scroll to Top Control adalah tambahkan kode dibawah ini persis dibawah kode <head> dan sebelum kode META.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>

<script type='text/javascript' src='http://www.geocities.com/nataludin5/scrolltopcontrol-1.js'>

/***********************************************
* Scroll To Top Control script- Â© Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/

</script>

Oh,ya... mengapa harus dipasang persis dibawah kode <head> dan sebelum kode meta ( Verifikasi, keyword dll )? Hali ini agar jQuery Scroll to Top Control berfungsi dengan normal, dan ICONnya bisa ngintip kegiatan t-mouse para pengunjung kali..he..he..

Ini lho gambaran tempat jQuery Scroll to Top Control dipasang.

( sorry... gambarnya aku kasih tulisan bidikCOM yang gede, soalnya beberapa artikel saya di COPAS oleh salah satu blogger yang sempat nyasar di bidikCOM sampai akar-akarnya tanpa sungkan-sungkan dan tidak ada embel-embel url sumbernya..heik.. rasain luh... ojo nesu!!! )

Oke silahkan dicoba, anda juga bisa belajar di http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm, kalau anda ingin memodifikasi dari script jQuery Scroll to Top Control pada srolltopcontrol.js filenya. Daku sudah mumet, jadi gantian anda yang memodifikasi. Yang penting saya sudah ngasih tutorial yang terbaik buat sobat setia bidikCOM untuk mempercantik blognya..... gratis... cukup do'in panjang umur sehat wal'afiat ..amien.

30 Mei 2009

30 April 2009

Alternatif pasang Script Iklan

Anda mempunyai blog dengan kategori seperti saya yang sulit untuk dibuat ajang cari dollar? Tidak bisa pasang kode Adsense namun masih diberikan kesempatan untuk pasang kode pencarian. Habis gitu, digebug-i oleh eyang google gara-gara ikutan PTR atau jual space iklan sehingga PR jadi NOL.

Anda kecewa dan bingung untuk bisa monetize blog pada blog seperti itu? Oooohhhh.... jangan kuatir dan putus asa. Berikut saya rekomendasikan bagi blog yang bernasib seperti saya.
Gabung bersama saya di AdsComet.Com ( http://adscomet.com) agar anda bisa memasang script iklan baik di dalam main-wrapper , sidebar maupun di footer.

AdsComet.Com merupakan alternatif bagi blog berbahasa Indonesia untuk mendulang dollar lewat Paypal, dengan batas minimal penarikan pada account balance = $25.

Disini saya akan memberikan tip bagaimana cara memasang script dari AdsComet.com dibawah posting yang menggunakan AUTO READMORE, terutama bagi pengguna template hasil modifikasi saya.

Setelah anda mendaftar pada situs AdsComet.com, silahkan copas kode iklan yang diberikan. Saya sarankan anda Copas kode pada "Search and Flexible Display" dan pilih " easy Feed" di Notepad.
Anda akan mendapatkan kode AdsComet.com seperti ini :


<script language="javascript"></script>
<script type="text/javascript" src="http://adscomet.com/ads/adview_easyfeed.php"></script>



Hapus kode warna kuning, setelah itu silahkan anda login di blogger, kemudian edit html dan centang kotak Expand. Dengan kontrol F silahkan cari kode berikut :

<b:if cond='data:blog.pageType == "item"'><data:post.body/>

Tambahkan kode dari AdsComet.com persis dibawah kode diatas.
Nah, bila anda sudah memasangnya hasil lengkapnya adalah sebagai berikut :

<b:if cond='data:blog.pageType == "item"'><data:post.body/>
<script language='javascript'>
var server_client_id = 2945;
var server_ad_count = 3; //NUMBER OF ADS TO DELIVER
var server_ad_offset = 0; // NUMBER OF ADS TO OFFSET
var server_ad_only_results = 0;
var server_ad_keyword = "";
var server_ad_style = "easyfeed";
var server_code_version = "4";
var server_ad_channel = 3;
var server_publisher_channels = "";
var server_ad_random = 0;
var server_ad_location = "";
var server_show_doctext = "1";
var server_show_url = "1";
var server_show_font = "Arial";
var server_show_fontsize = "3";

</script>
<script src='http://adscomet.com/ads/adview_easyfeed.php' type='text/javascript'/>
</b:if>
<div style='clear: both;'/> 

Iklan akan tampak dibawah posting, saat kita mengklik readmore.
Selamat mencoba

(Nb. Untuk pemasangan script iklan dengan cara ini tidak direkomendasikan bagi mereka yang mengikuti Paid to Review, karena pihak advertise tidak menyetujui. Ini berdasarkan pengalaman saya )

03 April 2009

Membenahi Posting pada Magazine Theme

Setelah beberapa kali mencoba memodifikasi template dari minima menjadi bentuk magazine , beberapa kendala terutama cara pasang gambar agar nampak di homepage dan sub page berbeda membuat saya semakin antusias untuk mencari solusinya. Alhamdulillah kini terjawab sudah, dengan mencoba memasang script yang mana scrip ini berfungsi sebagai pengaturan pemenggalan artikel secara automatis.

Tutorial ini aku dapat dari Kang Jaloe ( Readmore Liberal ), namun disini penerapannya di template untuk scriptnya tidak saya upload. Jadi langsung saya masukkan pada bagian <head>. Disini saya juga akan menjelaskan berdasarkan pengalaman saya saat saya mencoba membantu mendesain blog ini maupun blog saya yang lain yang telah menggunakan readmore, termasuk blog ini

Oke, saya akan mencoba membahasnya secara bertahap :

LANGKAH BAGI YANG BELUM MEMASANG READMORE

1. Login ke blogger
2. Klik Layout
3. Klik Edit HTML
4. Download/ backup dulu template anda
5. Klik pada Expand Widget Templates.
6. Copas kode dibawah ini dan letakkan sebelum kode </head>

<script type='text/javascript'> var thumbnail_mode = "no- float" ; summary_noimg = 350; summary_img = 250; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:15px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

7. Cari kode <data:post.body/> di template anda, gunakan Ctrl + F dan masukkan kode <data:post.body/> kemudian enter.

8. Setelah ketemu ganti kode tersebut dengan kode berikut :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>»»  read more</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/>
</b:if>

9. Simpan template anda.

Keterangan : Untuk kode dibawah ini, bisa anda sesuaikan selera anda.

summary noimg= 350 = Tinggi pemotongan artikel tanpa menggunakan gambar
summary img=250 = Tinggi pemotongan artikel menggunakan gambar

LANGKAH BAGI YANG SUDAH PASANG READMORE :

Kerjakan langkah 1 s/d 5
Cari kode <div class='post-header-line-1'/> , bila sudah ketemu perhatikan susunannya adalah sebagai berikut :

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<div class='post-body' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read More......</a>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> 
</div>

Ganti kode berwarna merah dengan kode baru pada langkah ke 8.
Bila anda kesulitan, silahkan ganti semua kode dari

<div class='post-header-line-1'/>
sampai dengan
<div style='clear: both;'/> 
</div>

Dengan kode dibawah ini :

<div class='post-header-line-1'/>

<div class='post-body entry-content'>
<data:post.body/>

<div style='clear: both;'/> 
</div>

Kemudian kerjakan langkah 7 dan 8.

Dengan demikian anda tidak perlu susah payah dalam mengupdate artikel dan secara otomatis bila dalam posting anda mengandung gambar, maka gambar akan muncul pada halaman utama sesuai ukuran yang anda format.

(Catatan : Bila anda ingin mempunyai blog dengan photo pribadi menghias pada headernya, bCOM siap membantu sepanjang tidak ada kata cela dan menyesal dihati anda. Ingat bCOM tidak mengharuskan anda untuk mengisi rekening Paypal bCOM, mengingat ini misi untuk memajukan blogger Indonesia... )

31 Maret 2009

Template Ads Ready

Modifikasi MINIMA kali ini saya beri nama Template Imut 2. Disini saya mencoba memodifikasi template yang ready terhadap iklan baik berbentuk slider maupun fixed, jadi apabila para blogger mania mendambakan template yang bisa dipasang banyak iklan dengan ukuran 125 X 125 px mungkin template ini pantas diperhitungkan.

Langsung pada tutorial :

1. Sebelum menggunakan template ini, silahkan dibackup dulu template anda. Namun saya sarankan untuk mencoba pada blog baru.

2. Untuk merubah background header kanan dan iklan adsense, cari kode dibawah ini:

<div id='header'>
<div class='header section' id='header'><div class='widget Header' id='Header1'>
<div id='header-inner'>
<div class='headerleft'>
<a href='http://edan-ne-cadangan.blogspot.com' style='display: block'>
<img alt='Imut template' height='100' id='Header1_headerimg'
src='http://i288.photobucket.com/albums/ll179/ahnning/imut2.gif' style='display: block'
width='350'/>
</a>
</div>
</div>
</div><div class='widget HTML' id='HTML5'>
<div class='headerright'>
<script type='text/javascript'>
</script>
<script src='http://pagead2.googlesyndication.com/pagead/show_ads.js'

type='text/javascript'>
</script>
</div>

Silahkan rubah kode berwarna merah dengan milik anda.

3. Untuk merubah background slider iklan : cari kode dibawah ini :

#slider { background: white

url(http://i288.photobucket.com/albums/ll179/ahnning/slider-bg.jpg); height: 227px;

overflow: hidden;position: relative; margin: 10px 0; }

4. Untuk merubah susunan slider iklan atau slider recent post, cari kode dibawah ini :

<div class='slide' id='slide-1'>
<h1>Garden Rack</h1>
<p>Donec gravida posuere arcu. Nulla facilisi.
imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien.
Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p><a
href='#'><img alt='learn more'
src='http://i288.photobucket.com/albums/ll179/ahnning/slide-1-image.png'/></a>
</div>
<div class='slide'>
<h1>Tulip Bulbs</h1>
<p>Donec gravida posuere arcu. Nulla facilisi.
Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien.
Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<a href='#'><img alt='learn more'
src='http://i288.photobucket.com/albums/ll179/ahnning/slide-2-image.png'/></a>
</div>
<div class='slide'>
<h1>Garden Gloves</h1>
<p>Donec gravida posuere arcu. Nulla facilisi.
Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien.
Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
<a href='#'><img alt='learn more'
src='http://i288.photobucket.com/albums/ll179/ahnning/slide-3-image.png'/></a>
</div>

Text warna biru adalah judul dan penggalan artikel, sedangkan yang berwarna merah adalah url tempat dimana kita menyimpan gambar.

5. Untuk merubah advertise pada sidebar cari kode dibawah ini :

<div id='advertisment-block'>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

</div>

Sedangkan untuk merubah advertise pada footer, cari kode dibawah ini :

<div id='advertisment2-block'>
<center><h2> Pasang iklan anda, cukup Rp. 50.000,-/bln</h2></center>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>

<a href='http://bcomstudio.blogspot.com'><img alt='ads' border='0'
src='http://i288.photobucket.com/albums/ll179/ahnning/iklanku.jpg'/></a>
</div>

Kode berwarna biru adalah url alamat yang dituju iklan, sedangkan yang berwarna merah adalah tempat penyimpanan gambar iklan.

Semoga bermanfaat.

DEMO | Download lihat di blog ini

24 Maret 2009

Blackireng Magazine Style

Ditengah-tengah mencari solusi ikutan program Afiliasi Click2Sell dan Clickbank, saya mencoba merancang template berbentuk Magazine dengan nama Blackireng Magazine Style Blogger Theme.

Template ini terdiri dari :

1. Main Wrapper yang terbagi menjadi dua kolom
2. Satu Sidebar atas dan dua sidebar bawah
3. Footter, dimana saya taruh recent post horizontal.

Adapun cara penginstalan.

- File hasil download, silahkan buka dengan program Winrar atau Winzip.
- Sebelum menggunakan template ini sebaiknya backup dulu template anda atau praktekkan pada blog baru.
- Untuk bagian Topbar sudah auto, sehingga tidak perlu lagi merubah URL Feed.
- Untuk bagian header kiri sebagai judul sedangkan header kanan untuk iklan.
- Untuk merubah kode iklan, silahkan kode iklan anda diencode dulu disini, hasil encode Copas di notepad. Setelah itu masuk pada Edit HTML cari kode berikut :

<div id='headerright'>
<script type='text/javascript'> </script> <script src='http://pagead2.googlesyndication.com/pagead/show_ads.js' type='text/javascript'> </script>
</div>

Silahkan ganti kode berwarna merah tersebut dengan kode anda yang sudah diencode.

- Untuk merubah Navigasi Menu silahkan cari kode berikut :

<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li> <a href='#'>Page</a> <ul> <li> <a href='#'>Sub Page #1</a> <ul> <li><a href='#'>Sub Sub Page #1</a> <ul> <li><a href='#'>Sub Sub Sub Page #1</a></li>

...... dan seterusnya, silahkan ganti # dengan url terkait demikian juga dengan Page dan subpagenya.

- Berikut saya contohkan cara menempatkan gadget pada kolom tengah seperti yang terlihat pada Demo. Masuk pada Tata Letak | Elemen Halaman | Tambah gadget | pilih Text, kemudian setelah jendela text muncul, klik Edit HTML dan masukkan code seperti dibawah ini :

<img id="BLOGGER_PHOTO_ID_5315209842303552306" style="margin: 0pt 10px 10px 0pt; cursor: pointer; width: 269px; height: 200px;" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9TciVKAVs4A5Y367_Ez2Awfe7jYNZSlZPpfopheFyM9uRUN_nhMoUTjWrmY7LGw0x043DNzoLEX6s0xrwLZxuaZ-Nk5e_CzYtUtM-AuqDFJGFuGbwg_KlWe2SUq67SNC1mg-GTBWjXNs/s200/logo.jpg" border="0" />Money4Idiotsâ�¢ eBook Kit can put you on the path to financial enlightenment, because you will learn not just online money making strategies, but also the psychology and secret necessary to make money in any online business.

Untuk mendapatkan kode gambar ( warna merah ), silahkan anda buat posting baru namun bersifat draft dan jangan dipublish juga jangan dihapus. Upload gambar yang akan anda buat target untuk mengisi kolom tengah atau sidebar, kemudian copy kodenya seperti kode diatas.
Sedangkan text berwarna biru adalah keterangan dari gambar atau penggalan artikel yang terkait.

- Untuk menambahkan gadget recent post horizontal pada footter seperti pada demo, silahkan anda masuk Tata Letak | Elemen Halaman | tambah Gadget | HTML/ Javascript kemudian tambahkan kode dibawah ini :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://librarysupporter.googlepages.com/thumb.jpg";
imgr[1] = "http://librarysupporter.googlepages.com/thumb1.jpg";
imgr[2] = "http://librarysupporter.googlepages.com/thumb2.jpg";
imgr[3] = "http://librarysupporter.googlepages.com/thumb3.jpg";
imgr[4] = "http://librarysupporter.googlepages.com/thumb4.jpg";
imgr[5] = "http://librarysupporter.googlepages.com/thumb5.jpg";
imgr[6] = "http://librarysupporter.googlepages.com/thumb6.jpg";
imgr[7] = "http://librarysupporter.googlepages.com/thumb7.jpg";
imgr[8] = "http://librarysupporter.googlepages.com/thumb8.jpg";
imgr[9] = "http://librarysupporter.googlepages.com/thumb9.jpg";

showRandomImg = true;

tablewidth = 978;
cellspacing = 7;
borderColor = "#000000";
bgTD = "transparant";

imgwidth = 113;
imgheight = 100;

fntsize = 12;
acolor = "#ffffff";
aBold = true;
icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 0;
summaryFontsize = 11;
summaryColor = "#03f8fb";
icon2 = " ";

numposts = 8;

home_page = "http://ahn-bidikcom.blogspot.com/";

</script>
<script src="http://librarysupporter.googlepages.com/recentposts_horizontal_title_below_no.js" type="text/javascript"> </script>

URL berwarna merah ganti dengan blog anda atau url blog yang akan dibuat gadgetnya.

Penasaran dengan DEMO dan mendownload template ini, silahkan kunjugi bCOM Studio.
Semoga bermanfaat.

bidikcom