Artikel Bergaya Drop Cap

Gaya Drop Cap pada artikel sering kita jumpai pada majalah, tabloid, dan atau bacaan offline lainnya. Sebagai contoh artikel ini ukuran hurup "G"-nya dibuat lebih besar, sedang ukuran hurup berikutnya standar. Drop Cap dapat dengan mudah diterapkan pada dokumen-dokumen yang dibuat dengan software pengolah kata (AbiWord, OpenOffice, dll), lalu bagaimana kita menerapkannya pada artikel di blog? Sangatlah sederhana kode yang digunakan untuk membuat tulisan bergaya DropCap (tapi bukan berarti mudah lho bagi newbie).

Ikuti langkah dibawah ini untuk membuat artikel bergaya Drop Cap!
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke bagian "Tata Letak" dan "Edit HTML"
Langkah 3
Cari kode dibawah ini :

.post img {

Masukan kode warna biru seperti dibawah ini :

.post img {
margin: 0px;
...
...
.post dc { float:left; color: #000; font-size:60px; line-height:50px; padding-top:1px; padding-right:5px; }
...
...

Langkah 4
Simpan Template
Langkah 5
Belum selesai sampai Langkah 4, setiap kita membuat artikel maka mode yang digunakan adalah mode "Edit HTML" untuk menyisipkan kode Drop Cap seperti contoh dibawah ini (klik gambar untuk melihat lebih jelas):

<dc>G</dc>aya Drop Cap pada artikel sering kita jumpai pada majalah, tabloid, dan atau bacaan offline lainnya.

Keterangan :

• Bagi para pengguna WLW (Windows Live Writter) teknik ini tidak perlu diterapkan, karena WLW secara terintegrasi memiliki fitur Drop Cap.
• Kode pada langkah 3, parameter bisa diubah sesuai keinginan.

Tips Trik

Tampilkan Artikel Berdasarkan Kategori

Seorang teman bertanya, Bagaimana menampilkan artikel dan menyusun artikel sesuai kategori atau label pada halaman utama? Sesuai dengan pertanyaan ini Blogger Tune-Up akan mencoba membuat tips trik tersebut. Pada dasarnya trik ini pernah dibahas pada artikel "Unlimited Recent Posts" dan menggunakan dasar JavaScript yang sama, hanya mengalami sedikit penambahan kode. Sepintas hasil akhir trik kali ini mirip dengan pemenggalan artikel secara Otomatis, mirip ya bukan sama.

Screenshot di ambil dari sini

Mari dicoba pemasangannya pada blogger.
Langkah 1
Login ke Blogger (ini wajib bukan sunat)
Langkah 2
Pilih bagian "Tata Letak" melalui Dasbor
Langkah 3
Klik "Tambah Gadget" dengan posisi sesuai keinginan dan pilih "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini :

<script src="http://dedehendriono.googlepages.com/rp-revo.js"></script>
<script>
var numposts = 3;
var showpostdate = false;
var showpostsummary = true;
var numchars = 125;
</script>
<script src="http://NAMA-BLOG.blogspot.com/feeds/posts/default/-/Label?orderby=published&alt=json-in-script&callback=rp">
</script><br/>
<a href="http://NAMA-BLOG.blogspot.com/search/label/Label"><strong>Artikel Lain dari Kategori ini...</strong></a>

Langkah 5
Simpanlah "HTML/JavaScript" tersebut
Langkah 6
Preview blog

Perhatikan Langkah 4!

• var numposts = 3; : nilai 3 untuk menentukan jumlah artikel yang akan ditampilkan.
• var showpostdate = false; : parameter false untuk tidak menampilkan tanggal, bulan dan tahun artikel tersebut dibuat.
• var showpostsummary = true; : parameter true untuk menampilkan ringkasan artikel, jika parameter false ringkasan artikel tidak akan ditampilkan (hanya judul artikelnya saja).
• var numchars = 125; : nilai 125 untuk mengatur jumlah karakter yang akan ditampilkan pada ringkasan artikel dihalaman utama
• NAMA-BLOG : ubahlah sesuai dengan alamat blog yang akan ditampilkan ringkasan artikelnya
• Label : gantilah dengan kategori/label yang akan ditampilkan artikelnya pada halaman utama, ini digunakan sebagai filter sehingga artikel yang ditampilkan hanya sesuai dengan kategori yang kita inginkan/masukan pada kode tersebut. Gantilah kedua kodel "Label" tersebut". Semoga berhasil... Happy blogging :)

Tips Trik Widget

Menu Navigasi Terapung

Menu navigasi terapung adalah sebaris menu yang tidak terpengaruh oleh gerakan scrollbar baik keatas maupun kebawah, menu ini tetap diam pada tempatnya layaknya sebuah benda yang terapung diatas air. Seberapa tinggi air bertambah, benda tersebut akan tetap diatas air. Seberapa panjang suatu halaman blog, menu ini akan tetap pada tempatnya (diatas atau dibawah). Sebagai contoh Blogger Tune-Up menerapkan trik ini pada Kotretan Hendriono. Menu navigasi terapung atau dalam bahasa cingcoang-nya Float Navigation Bar (Float NavBar), sangat cocok untuk menempatkan menu-menu yang sering kita gunakan atau menempatkan suatu informasi menarik untuk para pengunjung.

Memasang menu navigasi terapung ini pada blog

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak" dan "Edit HTML"
Langkah 3
Backup template dan checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini :

]]></b:skin>

Langkah 5
Tempatkan kode dibawah ini tepat diatas kode pada Langkah 4

/********************************
* Navigasi Apung  *
*********************************/
#navigasi-apung
{
align: center;
position: fixed;
border-top: 1px solid #fff;
border-bottom: 1px solid #000;
background-color: #c0c0c0;
width: 100%;
left: 0px;
color: #000;
z-index:10000;
opacity: 0.8;
filter: alphaundefinedopacity: 80);
bottom:0;
}
#navigasi-apung:hover
{
opacity: 1;
filter: alphaundefinedopacity: 100);
}
#navigasi-apung a
{
color: #000;
font-weight:bold;
}
/********************************
* Navigasi Apung Kiri *
*********************************/
.kiri_apungmnu
{
float:left;
list-style-type:none;
padding:0;
margin:3px 0px 3px 5px;}
.kiri_apungmnu li
{
padding: 0px 0px 0px 3px;
margin-left:2px;
float:left;
color:#000;
font:normal 11px arial;
}
.kiri_apungmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.kiri_apungmnu li a:hover
{
text-decoration:none;
}
/********************************
* Navigasi Apung Kanan *
*********************************/
.kanan_apungmnu
{
float:right;
list-style-type:none;
padding:0;
margin:3px 5px 3px 0;
}
.kanan_apungmnu li
{
padding: 0 0 0 3px;
margin-left:2px;
float:left;
color:#000;
font:normal 11px arial;
}
.kanan_apungmnu li a
{
display:block;
font:normal 11px arial;
width:auto;
float:left;
text-decoration:none;
}
.kanan_apungmnu li a:hover
{
text-decoration:none;
}

Langkah 6
Cari kode dibawah ini :

<body>

Langkah 7
Tempatkan kode dibawah ini tepat dibawah kode pada Langkah 6

<div id='navigasi-apung'>
<ul class="kiri_apungmnu">         
<li><a href="/" title="Halaman Utama">Beranda</a></li>
<li>|</li>
<li><a href="/search?max-results=50" title="Daftar Isi">Daftar Isi</a></li>
<li>|</li>
<li><a href="/feeds/posts/default" title="Baca via Feed" target="_blank">Feed</a></li>
<li>|</li>
<li><a href="" title="Berlangganan Artikel">Langgan</a></li>
<li>|</li>
<li><a href="mailto:hendriono@gmail.com" title="Email Hendriono">Email</a></li>
<li>|</li>
<li><a href="http://modification-blog.blogspot.com/" title="Tentang Hendriono" target="_blank">Tentang</a></li>
</ul>
<ul class="kanan_apungmnu">
<li><a href="http://www.blogger.com/" title="Blogger Login" target="_blank">Login</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/post-create.g?blogID=XXXXXX" title="Entri Baru">Entri Baru</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/posts.g?blogID=XXXXXX" title="Edit Entri">Edit Entri</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/blog-options-basic.g?blogID=XXXXXX" title="Pengaturan">Pengaturan</a></li>
<li>|</li>
<li><a href="http://www.blogger.com/rearrange?blogID=XXXXXX" title="Tata Letak">Tata Letak</a>
</li>
</ul>
</div>

Langkah 8
Simpan Template dan Preview

Keterangan :

• Lihat Langkah 5! Ubah parameter baris 10 dan baris 17 sesuai dengan selera. bottom:0; untuk menempatkan menu pada bagian bawah, ubah menjadi top:0; untuk menempatkannya pada bagian atas.
• Lihat Langkah 6! Tempatkan kode pada Langkah 7 dibawah kode <body> atau diatas kode </body>, jika ditempatkan dibawah kode <body> maka menu akan di-load dan ditampilkan lebih dulu dari bagian lain, jika di tempatkan diatas kode </body> maka menu akan di-load dan ditampilkan terakhir setelah seluruh bagian blog ditampilkan sempurna.
• Lihat Langkah 7! Ubahkah alamat link dan parameter lain sesuai dengan keinginan atau kebutuhan. Untuk menu Dasbor (Login, Entri Baru, Edit Entri, Pengaturan, dan Tata Letak) lihat pada artikel ini.

Selamat mencoba...! Happy blogging :)

Bloghack Tips Trik

Pemenggalan Artikel Otomatis (Automatic Readmore)

Beberapa saat yang lalu, Blogger Tune-Up pernah membahas blogger hack tentang Readmore 1, Readmore 2 dan Readmore 3. Pada blogger hack terdahulu proses pemenggalan artikel dilakukan secara manual dengan memasukan kode-kode pemenggalan yang disisipkan langsung pada artikel.

Kali ini kita akan mencoba satu teknik blogger hack yaitu pemenggalan artikel otomatis (Automatic Radmore), tanpa perlu menyisipkan kode-kode pemenggalan pada artikel secara langsung. Semua diatur secara otomatis, kita hanya perlu mengatur beberapa parameter sesuai dengan keinginan kita. Bahkan jika kita menyertakan gambar (image) pada artikel kita, maka gambar dapat diatur tampil pada halaman utama dalam ukuran kecil (thumbnail). Sebagai contoh Blogger Tune-Up telah mengintegrasikannya pada blog Kotretan Hendriono.

Integrasi Pemenggalan Otomatis (Automatic Readmore)

Langkah 1
Login ke Blogger
Langkah 2
Pilih "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Sebelum melakukan modifikasi pada template, Backup Template terlebih dahulu
Langkah 5
Cari kode dibawah ini :

</head>

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

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 160;
summary_img = 130;
img_thumb_height = 65;
img_thumb_width = 65;
</script>
<script src='http://hensblog.googlecode.com/files/selengkapnya.js' type='text/javascript'/>

Langkah 7
Cari kode dibawah ini :

<data:post.body/>

Langkah 8
Masukan kode dibawah ini dengan hati-hati, menggatikan kode pada Langkah 7.

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id' style='text-align: justify;'>
<p><data:post.body/></p>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a expr:href='data:post.url'>[Selengkapnya] - <data:post.title/></a>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p><data:post.body/></p>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->

Langkah 9
Simpanlah Template dan Preview

Keterangan :

• Bagi blogger yang sudah terlanjur memasang Readmore (pemenggalan artikel) manual maka harus sedikit kerja keras menghapus kode-kode pemenggalan yang sudah disisipkan pada artikel yang sudah diterbitkan (publish). Jika malas biarkan saja, tetapi cepat-cepat buat artikel baru sejumlah artikel yang ditampilkan dihalaman utama.

Perhatikan Langkah 6!

• summary_noimg = 160; > nilai 160 menunjukan jumlah karakter artikel yang akan ditampilkan pada halaman utama (pada mode terpenggal), jika artikel tidak mengandung gambar
• summary_img = 130; > nilai 130 menunjukan jumlah karakter artikel yang akan ditampilkan pada halaman utama (pada mode terpenggal), jika artikel mengandung gambar. Dan karakter akan diletakan pada sebelah kanan gambar.
• img_thumb_height = 65; > nilai 65 digunakan untuk mengatur ukuran tinggi gambar yang akan tampil di halaman utama pada mode terpenggal
• img_thumb_width = 65; > nilai 65 digunakan untuk mengatur ukuran lebar gambar yang akan tampil di halaman utama pada mode terpenggal

Perhatikan Langkah 8

• Ubahlah kata [Selengkapnya] sesuai keinginan anda.
• Hapus kode - <data:post.title/> setelah kode [Selengkapnya] jika kita tidak ingin menampilkan judul artikel

Semoga berhasil... Happy blogging :) [Tinggalkan pesan jika mengalami kesulitan atau kegagalan pemasangan]

Bloghack Tips Trik

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

Template

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 :)

Tips Trik Widget

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

Bloghack Tips Trik