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.

Read More

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

Read More

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

Read More

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]

Read More