Cara Membuat Fitur Gallery Pada Postingan

Membuat Fitur Gallery Pada Postingan

Tutorial ini menanggapi pertanyaan melalui komentar di halaman sini dari seseorang yang tak menyebutkan mamanya, pertanyaan kiranya seperti ini "Bagaimana membuat postingan dua kolom" sebenernya ini juga kebetulan juga karena saya cari lewat search belum banyak yang membuat artikel seperti ini jadi pesaingnya masih sedikit juga, akhirnya saya jawab "Kalau bersedia menunggu tutorialnya silahkan" dan sekarang artikel ini spesial deh buat beliau mas Anomin walaupun sebenarnya saya sendiri bingung untuk menjelaskannya tapi seadanya dan sebisanya akan saya jelaskan. oke sekarang langsung aja dibahas tentang cara membuat posting dengan fitur gallery atau postingan dengan 2 kolom.

Sebagai bahan percobaan saya sarankan untuk membuat blog baru saja untuk uji coba ini, kemudian template yang akan kita gunakan yaitu template minima bawaan blogger karena simple dan mudah untuk di ubahsuaikan, untuk template minimanya saya sudah persiapkan Template Minimaxs yaitu template hasil nodifikasi dari Minima Template yang bisa didownload terlebih dahulu di sini...!!!

Kalau sudah di download silahkan upload template tersebut di blog uji coba yang tadi dibuat. 

1. Tetap berada dalam Edit HTML
2. Kemudian cari kode  ]]></b:skin>
3. Jika sudah ketemu letakkan kode CSS berikut tepat dibawah kode ]]></b:skin>

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>

/*homepage styles
--------------------------------------------------------*/
#main-wrapper {
width:625px;
float:left;
margin-right:0px;
margin-top:0px;
background:none;
overflow:hidden;}

.post {
width:295px;
height:210px;
margin:0px 10px 10px 0;
padding:5px 0 0 5px;
border:1px solid #ccc;
display:inline;
float:left;
overflow:hidden;
position:relative; background-color:#F5F5F5; font-family:arial; font-size:12px; }

.post h3 {
width:290px;
font-family:arial;
font-weight:bold;
font-size:12px;
color:#424242;
text-align:left;
margin:0px; border-bottom:1px solid #ccc;
position:absolute;}

.post-body {
width:290px;
height:240px;
overflow:hidden;
padding:0px;
margin:25px 0 0;}

.post img {
height:100px;
width:100px;
margin-top:5px;
padding:1px;}

</style>
</b:if>

4.  Kemudian simpan template dan lihat hasilnya.

Penjelasan Kode Element :
Yang perlu diperhatikan yaitu kode  #main-wrapper dan kode .post karena jika tidak hasilnya akan sangat buruk dan kolom saling bertabrakan.

1. #Main-wrapper yaitu yang akan ditempati kolom posting atau .post, dari kode diatas lebar #main-warpper 625px perhatikan dibawah ini.

2. .post kode ini yang akan dibagi menjadi 2 kolom dan akan menentukan tiap kolom posting yang akan tampil dalam area #main-wrapper diatas yaitu 625px maka lebar post dibagi menjadi 2 dan dikurangi margin 10px + 10px dan padding 5px + 5px  = maka hasilnya 295px dan tinggi 210px (tinggi bisa disesuikan) perhatikan kode .post (anda bisa membuat menjadi 3 kolom jika angka 295px diperkecil lagi)

3. .post h3 Ini kode judul posting anda bisa merubah angka  width:290px; dengan menyesuaikan lebar posting.

4.  .post-body  Ini kode untuk menyimpan  kontent post atau post body sesuaikan width:290px; dan height:240px;

5. .post img  kode ini menentukan besar kecil gambar thumbnail posting bisa disesuaikan dengan merubah nilai   height:100px; dan width:100px;


Tambahan :

Mungkin langkah diatas akan mudah dan langung bisa dilihat hasilnya, karena memang template Minimaxs sudah saya sesuaikan untuk dibuat fitur gallery atau posting 2 kolom atau lebih.

Sekarang yang jadi pertanyaan yaitu bagaimana menerapkan fitur gallery atau posting 2 kolom ini jika menggunakan template selain Minimaxs yang saya buat, mungkin jika anda menggunakan template bawa'an blogger masih mudah untuk di sesuaikan, tetapi kalau template yang anda gunakan bukan bawa'an blogger mungkin saya akan sulit untuk menjelaskannya dikarenakan Kode Element yang mungkin berbeda dan kemungkinan telah dirubah oleh pembuat template tersebut jadi saya sarankan anda menggunakan template Minimaxs tersebut atau template bawa'an blogger.

Jika anda ingin membuat dengan template yang bukan bawa'an blogger maka yang harus dilakukan yaitu :

• Menambahkan Fitur Readmore Thumbnail Image (jika belum ada) anda bisa membaca di sini
• Anda  harus tau kode Main-wrapper dan kode Post pada template anda karena kode ini bisa juga berbeda-beda
• Kemudian ikuti dengan langkah-langkah diatas.

Seperti itulah yang bisa saya jelaskan tentang membuat fitur gallery atau 2 kolom postingan, semoga mudah dimengerti, jika ada kesulitan atau mungkin ada kekeliruan pada tutorial diatas silahkan tinggalkan komentar.

from: http://u-sup.blogspot.com/2011/09/membuat-fitur-gallery-pada-postingan.html

Do you Like this story..?

Get Free Email Updates Daily!	Follow us!

Posted in: Tips Blogging