![Cara Lengkap Membuat Template Blogger Sendiri √ Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj77rauzn-BkO1SzwLivYpVqCCc0XQY_EAsHbATAOftNvJWRRwKC_DmsE67D0sqtqZRM0jDwKqbhVjszjPZCg9AGR_facvORQGtJ-c7ppmQQcQ2ZBMwXON6qkjr2PttoaT_WZ3akkMdRBKq/s640/Javascript+Wallpaper+Life+Motto.png "√ Cara Lengkap Membuat Template Blogger Sendiri [Bagian 4]")
Dalam posting kali ini aku akan melanjutkan 3 posting aku sebelumnya yang berseri yaitu perihal 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 aba-aba CSS. Kaprikornus kini kita akan masuk pada pengaturan tampilan dengan memakai aba-aba 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]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG7_dqTorTphE4G4_CNewT6HjAHEiWYF_Q0NpEz7cg0TZD8GohuirEW_tWWUAjjRl1IjgR0ewtztJbLua5FbjQU8sWU6AllLPr5Mh27nzoShuXTfE2tiujzHIEmaOAmUX2mp3_FnaWUObM/s640/arlinadesign.gif "√ 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 aba-aba blog artinya tidak teratur secara otomatis sesuai tampilan blog jadi diharapkan aba-aba CSS khusus untuk mengaturnya.
Mengatur tampilan Tata Letak/Layout
Untuk mengatur tampilan Layout yang terpenting bekerjsama hanya satu bab aba-aba CSS yang dipakai untuk mengaturnya secara keseluruhan apalagi bila teman telah memahami penggunaan aba-aba 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 aba-aba 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 mensugesti tampilan blog. Mengatur tampilan layout mempunyai kegunaan supaya pengguna menerima citra perihal bagaimana posisi bagian-bagian dalam blog supaya 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 alasannya untuk urusan tampilan teman sanggup mengaturnya lebih baik daripada aku tergantung selera dan harapan sobat. Saya hanya akan menjelaskan perihal dasar pengaturannya. Seperti yang aku targetkan pada bagian 1 bahwa kita akan menciptakan template blog dengan tampilan menyerupai ini :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.
|
| Inspect element by Google Chrome |
|
| 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 aba-aba 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 aba-aba CSS untuk mengatur posisi dan tampilannya, pertama-tama kita akan mengatur supaya
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 aba-aba <div id='main-wrapper'>. Serta menambahkan aba-aba CSS .clear{clear:both} diatas aba-aba ]]></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 + "favicon.ico"' rel='icon' type='image/x-icon'/> <!-- SEO Title Tag --> <b:if cond='data:blog.pageType == "index"'> <title><data:blog.pageTitle/></title> <b:else/> <b:if cond='data:blog.pageType == "archive"'> <title>Archive untuk <data:blog.pageTitle/></title> <meta content='noindex,nofollow,noarchive' name='robots'/> <b:else/> <b:if cond='data:blog.pageType == "error_page"'> <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 aba-aba yang ditandai diatas, itulah aba-aba yang aku maksud. Kemudian perhatikan, dengan adanya aba-aba yang ditambahkan tadi
header-wrapper dan main-wrapper jadi sanggup dipisahkan lantaran ada aba-aba <div class='clear'/> diantaranya. Selanjutnya kita lengkapi aba-aba 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 aba-aba CSS, artinya teman sudah mengetahui cara penggunaan CSS, jadi untuk selanjutnya teman tinggal meneruskan aba-aba CSS yang teman perlukan serta mencoba dan mencoba aba-aba CSS menyerupai apa yang baiknya teman gunakan untuk mengatur setiap bab pada aba-aba 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.
Sumber http://www.maringngerrang.com/
Buat lebih berguna, kongsi:
