Berlangganan Artikel Via Email

Posting Terbaru

Trik Template Magazine Blogger

|

Trik Template Magazine Blogger - Postingan ini adalah lanjutan dari artikel "Membuat Template Magazine Blogger" yang saya ulas sebelumnya. Saya sarankan untuk membaca artikel tersebut jika belum membacanya sebelum membaca postingan ini.

Trik yang akan saya ulas antara lain "Penggunaan 2(dua) blog post", "Trik hidden element", "Thumbnail image posting", dan "Recent post per kategori". Keempat trik tersebut merupakan trik utama dalam pembuatan template simple magazine blogger yang saya buat. Kerapian dari penggunaan trik ini dalam penampilannya ditentukan oleh anda sendiri karena trik ini bersifat relatif tergantung dari elemen tambahan yang anda buat. Saya tidak menampilkan gambar2 pendukung untuk postingan ini karena keterbatasan waktu(hayah, padahal males bikin.wekekke). Karena itu sebagai acuan silahkan melihat langsung tampilan simple magazine blogger.

1. Penggunaan 2 blog post
Saya menggunakan trik ini untuk memudahkan dalam membedakan halaman posting pada halaman utama blog dengan halaman postingan selengkapnya seperti yang sudah saya jelaskan.

Cara penambahan blog post terbilang mudah. Misalnya, anda membuat sebuah elemen baru seperti berikut (ingat, ini cuma CONTOH saja):

kode css seperti berikut :

#elemenbaru {
margin-bottom:5px;
background: #FFFFFF;
float:left;
width:300px;
text-align:justify;
overflow:hidden;
}

kode html pemanggilnya :






dengan kode sederhana diatas anda sudah mempunyai sebuah elemen baru yang siap digunakan. Nah, untuk menambah sebuah blog post lagi maka anda tinggal menambahkan widget pada html pemanggilnya seperti ini :







mudahkan, anda cuma menambah widget baru dengan ID=BLOG2 dimana pada template asli blogger menggunakan widget ID=BLOG1. hehehe, hal simpel yang jarang terpikirkan.

2. Trik hidden element
Trik hidden element mempunyai tugas terpenting pada template magazine. Gunanya ya untuk menyembunyikan elemen tertentu yang tidak ingin ditampilkan ketika membuka halaman postingan.

Kode umumnya kira2 seperti ini :







Biar mudah dimengerti, saya terjemahkan kode diatas dalam bahasa Indonesia yang baik dan benar.wkwkkwk

begini ceritanya :

Jika(if) berada dalam kondisi(cond) alamat blog saat ini(blog.url) sama dengan(==) nama alamat utama blog(blog.homepageUrl) maka

elemen dengan nama css #main-wrapper tidak akan terlihat/muncul(display:none) pada halaman blog. elemen selain #main-wrapper akan terlihat/muncul.

jika berada pada kondisi selain dari kondisi yang ditentukan diatas(else) maka

elemen dengan nama css #elemenbaru tidak akan terlihat/muncul(display:none) pada halaman blog. elemen selain #elemenbaru akan terlihat/muncul.


udah ngertikan??? kalo ga ngerti gimana caranya pokoke harus ngerti.wakakkaka

3. Thumbnail image posting
Trik ini seharusnya bisa dibuat tutorial tersendiri sebagai salah satu trik mempercantik blog. Tapi karena temanya membuat template magazine, maka trik ini langsung saya gabungkan dengan trik hidden element.

ketentuannya seperti ini:
#main-wrapper : elemen halaman postingan utama/postingan selengkapnya
#elemenbaru : elemen halaman postingan pada halaman utama blog

kode css untuk elemenbaru ditambah menjadi seperti berikut

#elemenbaru {
margin-bottom:5px;
background: #FFFFFF;
float:left;
width:300px;
text-align:justify;
overflow:hidden;
}
#elemenbaru img.thumbnail {
float:left; (posisi gambar, left untuk kiri posting, right untuk kanan)
margin:5px 10px 7px 0px; (jarak pinggir gambar dengan tulisan)
width:82px; height:55px; (ukuran besarnya gambar)
}

Kode trik hidden element juga ditambah seperti ini :







Kemudian pengaturan dilakukan pada postingannya sendiri. Seperti pada umumnya anda memasukkan gambar pada postingan. Silahkan menambahkan kode penambahan gambar seperti dibawah ini pada awal postingan :

alamat gambarnya" class="thumbnail"/>, misal


4. Recent post per kategori
hihihihi. Trik ini sebenarnya trik membuat recent post biasa yang sudah lama ada. Hanya saja mungkin karena keterbatasan dari pemahaman tentang html ataupun javascript yang membuat para penggunanya tidak pernah memanipulasi trik ini untuk berbagai kegunaan. Mungkin hal ini juga yang mengakibatkan para tutor blog sering mentok atau tidak tau harus menulis trik seperti apa lagi. Ok, tidak perlu membahasnya lebih lanjut lagi deh. Kita langsung mulai :

Kode recent post versi javascript yang banyak beredar seperti ini :





Kode recent post berdasarkan kategori blog :





Other Posts From This Category

Variasi lain, recent post hanya titlenya saja





terserah deh mau digimanain. Berikut kamusnya :
numposts = jumlah posting yang ingin ditampilkan
showpostdate = tanggal posting (true = tampil, false = tidak)
showpostsummary = preview dari postingan (true = tampil, false = tidak)
numchars = jumlah maksimum karakter posting


Hufff, selesai juga nih postingan. Seharusnya dibuat jadi beberapa postingan yah???wekekke. Yah, cuma itu saja kunci pembuatan template magazine ala herro. Semua hanya menggunakan teknik dan trik dasar saja, bukan dengan kode2 html yang super ngejelimet. Saya bukanlah seorang yang ahli dalam pemahaman kode2 html seperti ini dan juga tidak ada yang mengajari tentang html. Saya hanya berusaha mengerti dan mengartikan kode2 secara gamblang saja. Ya seperti yang saya terjemahkan diatas ntu.

Kalau boleh kasih saran, ada baiknya bagi anda seorang blogger untuk sedikit memahami tentang kode2 html. Tak perlu harus mengerti sepenuhnya, dasar2nya saja sudah cukup kok seperti kode2 html untuk warna dan penggunaannya. Biar jika ada masalah2 kecil pada blog bisa diatasi sendiri dengan segera tanpa harus menunggu bantuan dari teman yang bisa membantu. Karena bantuan belum tentu bisa datang secepat yang kita inginkan.

Postingan ini sekaligus mengakhiri kiprah saya didunia tutorial trik blogger. Bukan karena saya kehabisan ide, jenuh, ataupun pelit ilmu. Tapi karena saya memang tidak berbakat dalam menulis tutorial dengan baik agar dapat dimengerti oleh pembaca. Dari tutorial ini juga mungkin banyak pembaca yang tidak mengerti, karena itu saya menyarankan untuk meminta bantuan dari para tutor blogger yang sebenarnya(saya palsu lho :D)untuk menjelaskan kepada anda jika memang tertarik untuk memahaminya.

17 komentar:

Post a Comment