Skip to content Skip to sidebar Skip to footer
Home / Basic Blogger / Blogger

Cara Lengkap Menciptakan Template Blogger Sendiri [Bagian 4]

Cara Lengkap Membuat Template Blogger Sendiri Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4]

Dalam posting kali ini aku akan melanjutkan 3 posting aku sebelumnya yang berseri yaitu ihwal Cara Lengkap Membuat Template Blogger Sendiri. Berikut ini lebih lengkapnya.

Cara Lengkap Membuat Template Blogger Sendiri [Bagian 1]
Cara Lengkap Membuat Template Blogger Sendiri [Bagian 2]
Cara Lengkap Membuat Template Blogger Sendiri [Bagian 3]

Nah, dalam posting ini yang akan aku bahas yaitu kelanjutannya, sebelumnya aku sudah membahas hingga pada membungkus beberapa section dengan tag div. Tag div tersebut diberikan nilai ID tertentu dimana ID tersebut akan kita gunakan pada instruksi CSS. Makara kini kita akan masuk pada pengaturan tampilan dengan memakai instruksi CSS.

Disini kita akan mengatur tampilan blog dari template yang telah dibentuk dengan CSS, aku pisahkan dalam 2 bagian, bab pertama yaitu mengatur tampilan layout (Tata Letak) yaitu tampilan yang ini :

Cara Lengkap Membuat Template Blogger Sendiri Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4]

Dan yang kedua yaitu mengatur tampilan keseluruhan dari halaman blog. Perlu teman ketahui bahwa tampilan Layout/Tata Letak blog (seperti gambar diatas) diatur pada instruksi blog artinya tidak teratur secara otomatis sesuai tampilan blog jadi diharapkan instruksi CSS khusus untuk mengaturnya.

Mengatur tampilan Tata Letak/Layout

Untuk mengatur tampilan Layout yang terpenting bekerjsama hanya satu bab instruksi CSS yang dipakai untuk mengaturnya secara keseluruhan apalagi bila teman telah memahami penggunaan instruksi CSS maka akan semakin gampang mengaturnya. Kode tersebut yaitu #layout. Misalnya untuk mengatur posisi header di layout cukup gunakan #layout #header-wrapper {...}, begitupun seterusnya untuk mengatur bab lain, yang perlu teman pahami disini yaitu id/class yang dipakai untuk elemen-elemen yang ada dalam layout sama dengan id/class yang dipakai pada bab HTML blog. Misal instruksi CSS untuk mengatur layout blog ini :

body#layout{padding:87px 10px 10px 10px} #layout #Header{float:none} #layout #main-wrapper-hadi{float:left;width:68%} #layout #Sidebar,#layout #Posting{position:relative} #layout #sidebar-hadi{float:right;width:32%} #layout #footer-left,#layout #footer-center{float:left;margin:0;width:33.3%} #layout #footer-right{float:right;margin:0;width:33.3%} #layout #footer-hadi{margin:0;padding:0} #layout #searchbox,#layout #copyright-hadi,#layout ul,#layout #profile-hadi{display:none!important}

Kode CSS diatas tidak akan menghipnotis tampilan blog. Mengatur tampilan layout mempunyai kegunaan biar pengguna menerima citra ihwal bagaimana posisi bagian-bagian dalam blog biar sanggup menempatkan widget gres sesuai pada kawasan yang di inginkan.

Mengatur tampilan halaman blog

Untuk mengatur tampilan halaman blog mungkin tidak aku jelaskan sangat jauh lantaran untuk urusan tampilan teman sanggup mengaturnya lebih baik daripada aku tergantung selera dan impian sobat. Saya hanya akan menjelaskan ihwal dasar pengaturannya. Seperti yang aku targetkan pada bagian 1 bahwa kita akan menciptakan template blog dengan tampilan menyerupai ini :

Cara Lengkap Membuat Template Blogger Sendiri Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4]

Sebelum itu aku ingin menyarankan kepada teman untuk memakai browser dalam mengatur tampilan blog, entah itu Chrome ataupun Mozilla, teman sanggup memanfaatkan Inspeksi Elemen yang merupakan fitur dari kebanyakan browser. Pelajari lebih lanjut.

Cara Lengkap Membuat Template Blogger Sendiri Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4]
Inspect element by Google Chrome

Cara Lengkap Membuat Template Blogger Sendiri Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4]
Inspect element by Mozilla Firefox

Setelah itu anda sanggup memanfaatkan fitur inspeksi elemen tersebut untuk mengatur tampilan blog sobat. Pertama-tama terlebih dahulu perlu diatur posisi tiap-tiap bab yang telah dibentuk sebelumnya. Terakhir instruksi HTML yang telah dibentuk yaitu sebagai berikut.

<body>   <div id='header-wrapper'>     <b:section id='Header' maxwidget='1' showaddelement='no'>       ...     </b:section>     <nav id='navmenu'>       ...     </nav>   </div>   <div id='main-wrapper'>     <b:section class='main' id='Posting' showaddelement='no'>       ...     </b:section>   </div>   <div id='sidebar-wrapper'>     <b:section id='Sidebar'/>   </div>   <div id='footer-wrapper'>     <b:section id='Footer'/>     <!-- COPYRIGHT JIKA PERLU -->   </div> </body>

Selanjutnya kita akan memakai instruksi CSS untuk mengatur posisi dan tampilannya, pertama-tama kita akan mengatur biar Header dan navmenu berada pada satu baris, kemudian lantaran Header dan navmenu berada dalam header-wrapper maka selanjutnya header-wrapper tersebut akan diberi warna background kemudian diatur padding dan margin nya. Kode yang dipakai kurang lebih menyerupai berikut ini.

#Header,#navmenu {     position: relative;     display: inline-block;     vertical-align: top; }  #header-wrapper {     display: block;     position: relative;     margin: 0 auto; }  #Header {     float: left; }  #navmenu {     float: right; }

Setelah itu coba perhatikan bagaimana tampilan blog sobat, tentunya ada kejanggalan yang terjadi, dimana objek yang berada di bawahnya merangkak keatas dan berada ditengah-tengah antara Header dan navmenu yang sudah berada dalam satu baris. Sehingga untuk mengatasinya kita perlu menambahkan objek <div class='clear'/> diatas epilog </div> yang ada diatas instruksi <div id='main-wrapper'>. Serta menambahkan instruksi CSS .clear{clear:both} diatas instruksi ]]></b:skin>.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta charset='utf-8'/> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>  <!-- SEO Title Tag --> <b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <title>Archive untuk <data:blog.pageTitle/></title> <meta content='noindex,nofollow,noarchive' name='robots'/> <b:else/> <b:if cond='data:blog.pageType == &quot;error_page&quot;'> <title>Halaman Tidak Ditemukan | <data:blog.title/></title> <b:else/> <title><data:blog.pageName/> | <data:blog.title/></title> </b:if> </b:if> </b:if>  <b:skin><![CDATA[ #Header,#navmenu {     position: relative;     display: inline-block;     vertical-align: top; }  #header-wrapper {     display: block;     position: relative;     margin: 0 auto; }  #Header {     float: left; }  #navmenu {     float: right; } .clear{clear:both} ]]></b:skin> </head> <body>   <div id='header-wrapper'>     <b:section id='Header' maxwidget='1' showaddelement='no'>       ...     </b:section>     <nav id='navmenu'>       ...     </nav>     <div class='clear'/>   </div>   <div id='main-wrapper'>     <b:section class='main' id='Posting' showaddelement='no'>       ...     </b:section>   </div>   <div id='sidebar-wrapper'>     <b:section id='Sidebar'/>   </div>   <div id='footer-wrapper'>     <b:section id='Footer'/>     <!-- COPYRIGHT JIKA PERLU -->   </div> </body>

Perhatikan instruksi yang ditandai diatas, itulah instruksi yang aku maksud. Kemudian perhatikan, dengan adanya instruksi yang ditambahkan tadi header-wrapper dan main-wrapper jadi sanggup dipisahkan lantaran ada instruksi <div class='clear'/> diantaranya. Selanjutnya kita lengkapi instruksi CSS tadi untuk memberi background pada header jadi kodenya menjadi menyerupai berikut ini.

#Header,#navmenu {     position: relative;     display: inline-block;     vertical-align: top; }  #header-wrapper {     display: block;     position: relative;     margin: 0 auto;     background: #7195ab;     padding: 5px 40px; }  #Header {     float: left; }  #navmenu {     float: right; }  .clear {     clear: both; }

Untuk mengefisienkan posting ini, dengan perkiraan bahwa teman pembaca telah memahami bagaimana penggunaan properti instruksi CSS, artinya teman sudah mengetahui cara penggunaan CSS, jadi untuk selanjutnya teman tinggal meneruskan instruksi CSS yang teman perlukan serta mencoba dan mencoba instruksi CSS menyerupai apa yang baiknya teman gunakan untuk mengatur setiap bab pada instruksi HTML yang telah teman buat.

Mungkin cukup sekian dari saya, semoga sanggup bermanfaat, kalau ada yang ingin teman tanyakan silakan sampaikan pada kotak komentar yang ada dibawah atau sanggup juga melalui halaman contact blog ini. Terima kasih.

You may like these posts :