Mau tau cara buat yang seperti ini, silahkan klik disini

widget by Kianhome
Sebenarnya k'ian juga bingung mau kasih judul apa pada tutorial kali ini, yang pasti cukup sulit untuk merangkum maksud postingan kali ini dari judulnya saja. Karena k'ian mau sedikit share mengenai cara kerja kolom magazine pada Template yang memiliki basis layaknya "Koran Elektronik", maka akhirnya k'ian putuskan untuk membuat judulnya "Memahami kinerja & Pembuatan kolom Template Magazine dengan CSS Code".

Sedikit hal yang bakal k'ian jabarkan secara garis besar adalah : pola kerja dan pembuatan designnya dengan menggunakan kode CSS standar tanpa merubah tampilannya secara keseluruhan. Tentunya hal ini perlu kerja keras yang membutuhkan kejelian dari tiap kode yang akan kita pakai. Untuk contoh kamu bisa lihat disini.

Secara visual template magazine memberikan tampilan postingan dengan kotak-kotak kecil dan menarik dilihat. Dasar yang k'ian hanya menggunakan kode logika yang k'ian terapkan dari kode CSS yang terdapat di Template tersebut, yakni kode
<b:if cond='data:blog.pageType != &quot;item&quot;'>

</b:if>
Untuk lebih jelasnya kamu bisa lihat ditutorial yang ini ( memahami arti fungsi logika pada kode html )..
Selanjutnya kita ambil kode dasar salah satu pembangun template blogger, yakni #main-wrapper. Berikut konten-konten CSS Code pembangun template Blog :
#header-wrapper { } , #outer-wrapper { }, #main-wrapper { }, #sidebar-wrapper {}, #footer { }
Untuk penerapan postingan awal dengan wujud Magazine news, kita hanya harus fokus pada 1 (satu) konten saja yaitu : #main-wrapper. Pada setiap penerapan konten #main-wrapper pada setiap template memiliki beberapa perbedaan yang tidak terlalu signifikan, namun cukup menjadi perhatian sobat sekalian. coba perhatikan code dasar pembangunnya..

#main-wrapper{float:left; width:600px; height:100%; padding:5px 0px 0px 0px}
.post {background:transparent;width:600px; height:100%;margin:0px 0px 5px 10px;border-bottom:1px double #d8d8d8;padding:5px;text-align:justify;float:left;overflow:hidden;-moz-border-radius:10px;-webkit-border-radius:10px;}
.post h3{margin:0px 0px 10px 10px; width:250px; padding:5px 0px 0px 0px; text-align:left; font-size:11px; font-family: Georgia,century gothic,Arial,verdana,sans-serif,Arial,; font-weight:bold;text-transform:uppercase}
.post h3 a, .post h3 a:link, .post h3 a:visited{color:#000; background-color:transparent}
.post h3 a:hover{color:#ff0; }.entry{background-repeat:no-repeat;height:150px;}
Tag style / pendesign

Jika kode diatas yang k'ian jabarkan adalah kode dasarnya, maka untuk pemahaman mengenai pola kerja untuk merubah tampilannya menjadi "template Magazine" cukup kamu tambahkan kode logika berikut, setelah kode ]]</b:skin>>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
isi dengan kode
</b:if>
Pada penjelasan mengenai "isi dengan kode" pada kode diatas, adalah isi kode yang akan kita buat dengan pola tampilan "Magazine" dalam artian bahwa tampilan postingan awal yang akan kita buat benar-benar menunjukkan kondisi layaknya sebuah layar Majalah Elektronik. Untuk lebih jelas perhatikan kode berikut : (kode ini diambil dari kode diatas--> pada kode Tag style / pendesign)
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
#main-wrapper{float:left; width:300px; height:100%; padding:5px 0px 0px 0px}
.post {background:transparent;width:300px; height:203px;margin:0px 0px 5px 10px;border-bottom:1px double #d8d8d8;padding:5px;text-align:justify;float:left;overflow:hidden;-moz-border-radius:10px;-webkit-border-radius:10px;}
.post h3{margin:0px 0px 10px 10px; width:250px; padding:5px 0px 0px 0px; text-align:left; font-size:11px; font-family: Georgia,century gothic,Arial,verdana,sans-serif,Arial,; font-weight:bold;text-transform:uppercase}
.post h3 a, .post h3 a:link, .post h3 a:visited{color:#000; background-color:transparent}
.post h3 a:hover{color:#ff0; }.entry{background-repeat:no-repeat;height:150px;}
</style>
</b:if>
Terlihat bahwa pada kode yang kita ubah adalah pada tampilan Lebar(width)dan tinggi (height)nya saja pada umumnya, pada awalnya lebar dari #main-wrapper{} itu sendiri adalah 600px; , maka kita ubah kedalam ukuran 300px; saja. Begitu juga dengan tingginya bisa kita ubah sesuai dengan keinginan atau bahkan kebutuhan templates kita.

nb : ingat setiap Template tentu memiliki kode yang berbeda-beda, baik ID maupun Class nya..jadi k'ian sarankan untuk memahami setiap kode yang ada didalam Template kamu agar hasilnya jauh lebih maksimal

Semoga berhasil dan jangan lupa comment-nya...!!!

Share to :

Related Post :


About the Author :

K'ian is a designer, web tutorial design, and blogging enthusiasts. Tutorial blog debut the first time when entering college, when I get to know the world wide internet and so much more. Now I work at one of the state trading company, a job that would conflict with the world of blogging and web design. Today remains a serious manage blog " Kolam Blogging Tips | Kianhome ".

6 Response to "Memahami kinerja & Pembuatan kolom Template Magazine dengan CSS"

  1. vhei Said,

    wah pusing nih mas, gak ngudeng aq...!!!! ...Replay

     

  2. Kian Coi Said,

    @vhei : Kalau mmg masih bingung silahkan ditanyakan lebih detail via E-Mail ke kiancoi86@gmail.com...k'ian tunggu yach..!! ...Replay

     

  3. z33s Said,

    @vhei
    Itu namanya menampilkan widget pada halaman tertentu pada blog, coba perhatikan dulu terus praktekan lama-lama nanti juga terbiasa.. semnagat terus, salam sahabat ...Replay

     

  4. Kian Coi Said,

    @z33s : Thank's sob da dibantuin untuk memperjelas jawaban dari pertanyaan Vhei..!!! ...Replay

     

  5. i thought it was still from journalist lectures???/ ...Replay

     


Post a Comment

Blog ini menganut sistem "Dofollow", Silahkan Tinggal komentar, saran, kritik disini.. apapun itu jangan SPAM ok..


Berita Terkini

Friend Follower's

Tips Health

Techno

Hot Nasional

Celebrity

My Blog List

Recent Comment

© Copyright 2011 | Dikelola sepenuhnya oleh : Kiancoi
KianHome Member of PlanetBlog | SitusBersih | Support on Mozilla Firefox and Google Crome Browser
Home | Posts RSS | Comments RSS | Sexy Blog |