Hen's Revolution Pro - Blogger Template

Akhirnya setelah try and error, berhasil juga template Hen's Revolution Pro ini. Tapi mohon ma'af saya belum bisa membagikanya secara gratis, karena template ini jujur saja hasil mempeljari dari template orang lain. Mungkin lain waktu lain kesempatan. Berikut preview Hen's Revolution Pro dibawah ini, silahkan tinggalkan hasil penilaian teman-teman.

Lihat demo

Read More

Membuat Tabel Daftar Isi

Table of Content atau dalam bahasa kita kurang lebih Tabel Daftar Isi ini sangat membantu para pengunjung untuk menelusuri artikel demi artikel dalam blog kita. Pengunjung dengan mudah akan menemukan artikel yang dimaksud, setiap pengunjung mengarahkan mouse pada salah satu judul artikel pada tabel daftar isi maka dengan segera beberapa kalimat akan muncul sebagai sebuah gambaran sepintas tentang sebuah artikel pada blog yang dikunjunginya.

Selain judul blog terurut dengan rapih sesuai abjad, juga daftar isi ini dapat diurutkan sesuai tanggal dan atau sesuai kategori dalam blog yang bersangkutan. Yang menarik dari Tabel Daftar Isi ini adalah bisa ditampilkan jika pengunjung meng-klik link "Tampilkan Daftar Isi" dan di sembunyikan jika pengunjung meng-klik link 'Sembunyikan Daftar Isi". Sangat bermanfaat sekali bagi pengunjung dalam melakukan pencarian artikel dalam sebuah blog. Ternyata hal ini sangatlah mudah diimplementasikan (diterapkan) pada blog dengan dasar Blog*Spot, bagi pengguna non-blogspot hal ini belum pernah dicoba. Jika mau mencoba menerapkannya silahkan ikuti langkah demi langkah dibawah ini.

Screenshot diambil dari blog Program Gratisan

Langkah 1
Login ke Blogger
Langkah 2
Pada dasbor pilih "Tata Letak - Edit HTML"
Langkah 3
Cari kode dibawah ini :

]]></b:skin>

Langkah 4
Copy Paste kode CSS dibawah ini tepat diatas kode pada Langkah 4 :

#toc {
border: 0px solid #cccccc;
background: #b8d2fc;
padding: 5px;
width:515px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #ffff99;
color: #000000;
padding-left: 5px;
width:300px;
}
.toc-header-col2 {
width:75px;
}.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size: 11px;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size: 11px;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size: 11px;
}

Langkah 5
Simpanlah template
Langkah 6
Pilih "Tata Letak - Elemen Halaman"
Langkah 6
Pilih "Tambah Gadget - HTML/JavaScript"
Langkah 7
Masukan kode dibawah ini pada kotak "Konten" dan ubah nama blog sesuai alamat blog anda (warna biru) :

<div id="toclink"><a href="javascript:showTocundefined);">Tampilkan Daftar Isi</a><br/><br/></div>
<script style="text/javascript" src="http://dedehendriono.googlepages.com/blogtoc.js"></script>
<script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>
<div id="toc"></div>

Langkah 8
Klik tombol "SIMPAN"
Langkah 9
Preview dan lihatlah hasilnya, klik link "Tampilkan Daftar Isi" dan atau link "Sembunyikan Daftar Isi".

Keterangan :

• Kode asli Table of Content sudah dilakukan perubahan kedalam bahasa Indonesia. Awalnya hanya ada link "Tampilkan Daftar Isi" tapi sekarang sudah bisa ditambahkan link "Sembunyikan Daftar Isi".
• Perhatikan langkah 4 pada kode CSS, angka yang diberi warna biru disesuai dengan lebar blog anda. Perhatikan secara berurutan 515px = Lebar secara keseluruhan Tabel, 300px = lebar kolom JUDUL, 75px lebar kolom TANGGAL, 125px lebar kolom KATEGORI
• Perhatikan kode pada langkah 6 (warna) ubahlah alamat blog sesuai alamat blog kita. Jika ingin menampilkan blog lain dalam daftar isi blog kita, arahkan alamat blog pada kode tersebut ke alamat blog yang dimaksud (tapi jadi aneh blog kita dengan daftar isi blog lain, hehehe...).

Semoga berhasil...Happy blogging :)

Read More

Membuat Rotasi Banner (Banner Rotator)

Sebelumnya Blogger Tune-Up pernah membahas cara membuat Randoms Ads Banner (menampilkan Banner bergantian secara acak), banner tersebut akan muncul setiap pengunjung berganti halaman. Tapi salah seorang pembaca menginginkan Banner yang bergantian/berotasi tanpa harus berganti halaman. Sekarang Blogger Tune-Up akan memaparkan bagaimana membuat Banner yang muncul secara berotasi (bergantian tanpa bergantian halaman) atau sering di sebut Banner Rotator. Coba lihat contoh Banner Rotator yang telah terpasang dihalaman utama Design Graphics.

Membuat Rotasi Banner - Banner Rotator

Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML" dan check "Expand Template Widget"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

.m_banner_hide{
 display:none;
}
.m_banner_show{
 display:block;
}

Langkah 5
Cari kode dibawah ini :

</head>

Langkah 6
Masukan kode dibawah ini tepat diatas kode pada Langkah 5:

<script type="text/javascript" src="http://hens.googlecode.com/files/mBanner.js"/>

Langkah 7
Kembali ke "Tata Letak - Elemen Halaman"
Langkah 8
Tambahkan Gadget dengan tipe "HTML/JavaScript", atau baca disini
Langkah 9
Masukan kode dibawah ini :

<script language="javascript">
banner1 = new Banner('banner1');
banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://dedehendriono.blogspot.com");
banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://tutsadobe.blogspot.com");
banner1.add("IMAGE", "banners/01.jpg", 3, 60, 480,"http://programgratisan.blogspot.com");
banner1.add("FLASH", "banners/04.swf", 3, 60, 480,"http://bonprog.blogspot.com");
banner1.add("FLASH", "banners/05.swf", 3, 60, 480,"http://el-pro.blogspot.com");
banner1.add("FLASH", "banners/06.swf", 3, 60, 480,"http://modification-blog.blogspot.com");
document.write(banner1);
banner1.start();
</script>

Langkah 10
Simpan Gadget Tersebut dan preview blog

Keterangan :

• Jika ingin menambahkan lokasi banner baru silahkan tambahkan sendiri dengan mengubah nama banner; misal contoh diatas banner1 maka ubahlah semua menjadi banner2 dan seterusnya
• Secara berurutan perhatikan kode dalam tanda kurung setelah kode banner1.add ;
• Ada 2 pilihan tipe file banner yaitu IMAGE dan FLASH sesuaikan dengan format banner, jika itu berformat JPG, JPEG, GIF, PNG maka gunakan tipe file format IMAGE, jika itu berformat SWF maka gunakan tipe file format FLASH
• Tentukan link tempat dimana banner tersebut disimpan.
• Tentukan durasi lamanya waktu banner muncul, dalam contoh di set 3 detik.
• Tentukan ukuran tinggi banner, dalam contoh memiliki ukuran tinggi 60 pixel. Ini disesuaikan dengan ukuran banner.
• Tentukan ukuran lebar banner, dalam contoh memiliki ukuran lebar 480 pixel. Ini disesuaikan dengan ukuran banner.
• Tentukan link yang akan dituju ketika pengunjung meng-klik salah satu banner yang muncul.

Selamat mencoba... Happy blogging :) Jika mengalami kesulitan tinggalkan pesan dikomentar...

Read More

Membuat Artikel Terkait (Versi 1.0)

Browsing kesana kemari mencari artikel Related Post tapi malah membuat pusing, bingung dan tidak hanya sekali mengalami kegagalan, berkali-kali bahkan sampai bosan membuat Related Post. Pernah melakukan berbagai percobaan Related Post ada yang berhasil tetapi kurang puas dengan hasilnya. Akhirnya ramu sana ramu sini berginilah related post yang Blogger Tune-Up gunakan. Blogger Tune-Up ingin membuat berbagai tips dan trik blogger hack yang sederhana, fleksible tapi dengan hasil lumayanlah, cukup memuaskan. Mau mencoba tips trik blogger hack kali ini mengenai related post atau artikel terkait (ada juga yang memberi nama "Artikel Menarik Lainnya")? Ikuti langkah dibawah ini...

Integrasi Artikel Terkait (Versi 1.0)

Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML"
Langkah 3
Backup Template Blog untuk mengantisipasi kegagalan modifikasi template
Langkah 4
Jangan lupa check "Expand widget template"
Langkah 5
Masukan Cascading Stye Sheet (CSS) seperti dibawah ini:
Cari kode dibawah ini :

]]></b:skin>

Copy Paste (CoPas) kode dibawah ini tepat diatasnya :

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://dedehendriono.googlepages.com/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Langkah 6
Sebaiknya simpan terlebih dahulu template untuk mencegah terjadinya error template
Langkah 7
Cari kode dibawah ini :

</head>

Langkah 8
Masukan link dibawah ini tepat diatas langkah 7 :

<script src='http://hensblog.googlecode.com/files/artikelterkait.js' type='text/javascript'/>

Langkah 9
Cari kode dibawah ini :

<data:post.body/>

Langkah 10
Masukakan kode dibawah ini tepat dibawah langkah 9 :

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Artikel Terkait : </b></font>
<font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Langkah 11
Simpanlah template dan preview blog

Keterangan :

• Silahkan ubah kode CSS tersebut sesuai dengan keinginan.
• Perhatikan Langkah 10, ubah nama "Artikel Terkait" sesuai keinginan dan ubah nilai 5 untuk menentukan jumlah artikel terkait yang akan ditampilkan, jika diset nilai maka hanya akan muncul 5 artikel dari setiap kategori.

Tampilan secara keseluruhan dari semua langkah diatas:

#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url("http://dedehendriono.googlepages.com/weed-bullet.gif") no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
]]></b:skin>
...
...
<script src='http://hensblog.googlecode.com/files/artikelterkait.js' type='text/javascript'/>
</head>
...
...
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Artikel Terkait : </b></font>
<font color='#FFFFFF'><b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

Mudah-mudahan berhasil... Happy blogging :) Tinggalkan pesan dikomentar jika mengalami kegagalan...

Read More