21 Januari 2009

Blue magazine blogger template

Judul di atas merupakan finishing dari meodifikasi "Edel2Xtemplate", yang sekarang template tersebut digunakan "Sharing Post".

Template ini termodifikasi berkat rasa penasaran yang sangat kuat di hati saya saat melihat model template Magazine Blogger yang dijual dengan harga $ 50 s/d $ 85. Coba anda lihat di model situs tersebut di sini.

Semula saya mengejar turorial dari Kang Jaloee, namun nampaknya masih ada teka-teki besar yang perlu saya pecahkan. Karena info dari beliau kita harus download dulu template Cellar Heat kemudian mengganti beberapa kode pada template yang akan kita modifikasi. Padahal saya ingin murni dari template yang ada, misal MINIMA yang merupakan sasaran empuk untuk di EDEL2X.

Langkah yang aku gunakan adalah melihat kode sumber dari template "Allsporting" di atas, kemudian aku copas dalam MSword. Kalau kita melihat dari susunan template gratis dengan template "Premium" jelas berbeda. Susunan HTML pada template ini tidak dikelompokkan per bagian misal untuk Main-Wrapper sendiri, Sidebar juga sendiri dan seterusnya. Justru dalam kode sumber template ini, pengelompokkan didasarkan berdasarkan pengaturan ukuran Padding, Margin, Color dst....

Selama dua hari saya mreteli satu persatu dan aku selundupkan di MINIMA yang ada. Setelah berduel dengan ERROR, justru akhirnya saya menemukan cara bagaimana membagi Kolom Main ( tempat Posting ) menjadi 2 atau 3, tergantung selera kita.

Berikut langkah-langkah yang aku kerjakan :

Sebaiknya praktekkan di MINIMA dulu ( Namun saya menerapkan pada template yang sudah saya modifikasi sebelumnya ), masuk pada edit HTML kemudian buat susunan kode seperti ini ( Ingat jangan centang kotak Expand ):


/* ----- MAIN ----- */

#content-wrapper {
width: 998px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
text-align: left;
background: $contentbgColor;
border: 1px solid $contentBorderColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
float: left;
width: 654px;
margin: 0px 4px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Tambahkan kode berikut :

#main-left {
width: 654px;
float: left;
margin: 4px 4px 4px 0px;
padding: 0px;
color: $textColor;
font: $textFont;
background: $postbgColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-right{
float:right;
margin: 4px 4px 4px 4px;
padding: 0px;
background:$postbgColor;
width:260px;
line-height:1.2em}

#main-right h2{
margin-bottom:5px;
padding-bottom:5px;line-height:1.1em;
font:normal normal 148% Trebuchet, Trebuchet MS, Arial, sans-serif;color:#996600;border-bottom:1px solid #000000}
#main-right img{margin-bottom:4px;border:1px solid #000000}


#main-left .widget{
margin: 0px 5px 5px 5px;
padding: 0px 10px 10px 4px;
}

#main-right .widget {
margin: 0px 0px 5px 0px;
padding: 10px 10px 10px 10px;
}

Langkah selanjutnya adalah tambahkan kode dibawah ini di atas kode </head>

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

#main-left {
width:376px;
}
.post-body img{
width:350px;
}
</b:if>
</style>

Kemudian pada bagian body, buat susunan dibagian <div id='content-wrapper'>

<div id='main-wrapper'>, dengan susuna seperti ini:

<div id='content-wrapper'>

<div id='main-wrapper'>
<div id='main-left'>
<b:section class='main' id='main-left' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='main-right'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:section class='main-right' id='main-right' preferred='yes'/>
</b:if>
</div>
</div>

Sebelum anda menyimpan template, coba preview dulu apa sudah berhasil atau belum.
Setelah berhasil baru di save.

Fungsi dari kode <b:if cond='data:blog.pageType != &quot;item&quot;'> adalah untuk menyembunyikan kolom kanan pada sub halaman, dan saat anda mengklik "Label atau Kategori maka kolom kanan Main tetap ada di Homepage.

SIlahkan anda rubah ukuran Margin, Padding, Color, font sesuai dengan kondisi template anda. Meskipun hasilnya tidak sebagus template yang aku "Intip" namun teka-teki selama ini terjawab sudah, dan ini sebagai modal saya untuk edel2x template selanjutnya.

Saya bisa, pasti anda bisa... yang penting semangat.

16 komentar:

  1. wah pastinya keren nih, kalo sudah ama kang haji oma jaloee iramanya yah kang, gimana kalo bikin aku template nih yang itemkang

    BalasHapus
  2. Kunjungan Pertama Blog Regedit, Artikelnya bagus apalagi kata-katanya menarik menambah wawasan dan pengalaman saya trims ya…lanjutkan artikelnya saya tunggu. O iya… Boleh saya minta komentar dari teman untuk artikel di blog saya? Kalau Boleh Kunjungi blog saya ya hari ini saya baru posting artikel tolong komentarnya dan komentar teman berkaitan dengan artikelnya ya. Ini alamatnya : http://regedit.blog.telkomspeedy.com/2009/01/21/produk-telkom-indonesia-bag-1/ terima kasih banyak

    BalasHapus
  3. mulai tadi daku coba kok kagak berhasil ya? apa semua jenis template minima tuh bisa untuk nyoba them ini mas?

    BalasHapus
  4. wkwkkwkw... mantep..mantep.. semakin berkembang akhirnya cara2 membuat magazine style..satu hal mungkin menurut sy 960px lebih pas untuk di tampilkan pada resolusi 1024px..

    sip pastinya akan saya donlot dan sy pelajari .. thank's infona boss..

    sukses dan semangad terusss :)

    BalasHapus
  5. Anonim20:00

    Happy Wednesday! Bloghoppin' here... Hey, I have an interesting tutorial for you that I have written myself. It is about adding Adsense on your Single Post in XML template. I hope you'll like it! God Bless you!

    BalasHapus
  6. hmm... lebih simple dan tidak terlalu banyak bermain di section 3 (HTML) beda dengan cellar heat yang banyak merubah bagian expand widget.. nanti saya coba kang.. seep ilmunya

    BalasHapus
  7. Anonim11:37

    seep banget ilmunya, mesti banyak belajar lagi nih
    tks

    BalasHapus
  8. Anonim13:21

    manteb banget suhu.....saya juga penghobi utak-atik template. kayaknya saya hatus mulai mengambil blog ini sebgai teferensi buat hobi saya itu deh...

    BalasHapus
  9. Mau coba dulu Bos...kalau udah berhasi nanti saya lapor

    BalasHapus
  10. Belum berhasil Bos

    ada peringatan :

    "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The system identifier must begin with either a single or double quote character."

    BalasHapus
  11. to BAKA KElana.

    Maaf mas, kode diatas sebenarnya pengalaman saya saat memodifikasi template selain MINIMA.

    Untuk menjawab ini, saya sudah posting tentang penerapan kode membagi Main pada MINIMA

    Silahkan dipelajari, semoga membantu

    BalasHapus
  12. benar-benar mantap artikelnya bagi saya yang GAPTEK,....saya lagi belajar blog tolong mampir dikritik dong,...

    BalasHapus
  13. good posting mas,

    jadi pengen balik lagi pake template "M"

    BalasHapus
  14. info yang bagus, sangat informatif
    semangat ngeblog :)

    BalasHapus
  15. perdana ngeblog, masih bingung

    BalasHapus
  16. susahnya klo jadi pemula......baca tutorial beginian gak langsung paham. Btw tutorialnya mantabbb.......kyknya jadi prioritas untuk di praktekin neh...

    BalasHapus

Mockup Hijab Adobe Photoshop Tutorial - FREE FILE PSD

  Mockup Hijab Adobe Photoshop adalah tutorial tentang bagaimana cara merubah warna hijab maupun coraknya. Jika anda ingin mendownload file ...