Membuat Template Blog Hasil Karya Sendiri

Hy semua kali ini gua ingin sharing tentang Membuat Template Blog Hasil Karya Sendiri, Untuk pembuatan blog dari awal mungkin tidak akan menemukan masalah yang berarti, namun jika dilakukan pada blog yang telah memiliki posting, pembaharuan template kemungkinan besar akan meninggalkan residu dari pengkodean template sebelumnya. Adapun agar template kembali segar, maka dibutuhkan sedikit trik untuk melakukan reset template, yakni — dengan cara — pergi ke dashboard Blogger.com, kemudian “terapkan” salah satu template dasar.

Sebagai langkah pertama, silakan simpan (copy & paste) beberapa widgetyang mungkin akan kita tampilkan dalam blog — seperti navbar, header, danmain (Posting Blog) — pada “Edit HTML”. Kemudian bersihkan semua kode, sehingga area “Edit HTML” menjadi kosong dan masukkan HTML (Hypertext Markup Language) berikut.

<?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>   <b:if cond='data:blog.isMobile'> <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/> <b:else/> <meta content='width=960' name='viewport'/> </b:if> <b:include data='blog' name='all-head-content'/> <title> <b:if cond='data:blog.homepageUrl == data:blog.url'> <data:blog.title/> <b:else/> <data:blog.pageName/> | <data:blog.title/> </b:if> </title> <b:skin><![CDATA[/* -------------------------------------------------------------- Blogger Template Style Name: URL: Designer: -------------------------------------------------------------- */ /* =Reset ----------------------------------------------- */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle} ]]></b:skin> </head> <body expr:class='"loading" + data:blog.mobileClass'> </body> </html>

Kedua, tambahkan satu-persatu kode widget dalam tubuh HTML (<body>). Misalnya:

<body expr:class='"loading" + data:blog.mobileClass'> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> </b:section> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/> </b:section> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section> <b:section class='sidebar' id='sidebar' preferred='yes'/> </body>

Ketiga, memberikan beberapa selector atau elemen pada HTML5 untuk mengapit kode widget. Semakin sederhana struktur pengkodean, maka akan semakin mudah dalam melakukan kustomisasi. Selector id berarti kustomasi hanya dilakukan pada id yang bersangkutan & tidak ada perulangan, karena sifatnya yang unik (satu id sama dengan satu elemen). Sedangkan class dapat digunakan secara berulang-ulang pada karakter pengkodean yang sama (satuclass sama dengan beberapa elemen).

<body expr:class='"loading" + data:blog.mobileClass'> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/> </b:section> <div id='content'> <header id='header-content'> <div class='head-wrap'> <div class='header-group'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/> </b:section> </div> </div> </header> <div id='main-wrapper'> <div id='main-content'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section> </div> <aside id='sidebar-content'> <b:section class='sidebar' id='sidebar' preferred='yes'/> </aside> <div style='clear:both;'></div>  </div> <footer id='footer-content'> <div class='foot-wrap'> <div id='content-info'> <p>&copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>↑ <br/>Powered by <a href='http://www.blogger.com'>Blogger.com</a></p> </div> </div> </footer> </div> </body>

Keempat, simpan HTML template hasil modifikasi tersebut. Pada tampilan sederhana, hasil yang ditunjukkan oleh pengkodean di atas adalah menggunakan satu kolom & memanfaatkan seluruh lebar halaman peramban. Oleh karena kita belum melakukan konfigurasi pada CSS (Cascading Style Sheets) dalam markah <head>. Contoh CSS berikut menggunakan fixed layoutdengan lebar konten 960px sesuai dengan

<meta content='width=960' name='viewport'/>.

<b:skin><![CDATA[/* -------------------------------------------------------------- Blogger Template Style Name: URL: Designer: -------------------------------------------------------------- */ /* =Reset ----------------------------------------------- */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}a:hover,a:active{outline: none}table{border-collapse:collapse;border-spacing:0}input,select{vertical-align:middle} /* =Layout ----------------------------------------------- */ #content { margin: 0 auto; width: 960px; } #header-content, #main-wrapper, #footer-content { width: 100%; } #main-content, #sidebar-content { display: inline; position: relative; } #main-content { float: left; /* Tentukan letak main-content di sebelah kanan (right) atau kiri */ width: 640px; } #sidebar-content { float: left; width: 320px; } .header .widget, .main .widget, .sidebar .widget { margin-left: 15px; margin-right: 15px; word-wrap: break-word; } /* =Global ----------------------------------------------- */ body, button, input, select, textarea { color: #000; font: .9375em/1.6em 'Helvetica Neue', Helvetica, Arial, sans-serif; } body { background: #fff; text-align: left; width: 100%; } body:before, body:after { content: ''; display: table; } body:after { clear: both; } /* Mungkin lebih baik menggunakan CSS berikut dibandingkan dengan <div style="clear:both;"></div> */ .clear { clear: both; display: block; height: 0; overflow: hidden; visibility: hidden; width: 0; } … dan seterusnya … ]]></b:skin>

Kelima, pratinjau hasilnya & apabila telah sesuai dengan kriteria tampilan blog yang kita inginkan “simpan” template.

Dengan 5 (lima) langkah di atas, kita telah dapat membuat template blog hasil karya sendiri, meskipun dalam menyelesaikan beberapa tahapan tersebut membutuhkan pemahaman yang lebih tentang CSS dan HTML. Bukan sebatas itu saja, bahkan lebih spesifik akan meliputi berbagai aspek yang dibutuhkan oleh sebuah situs web atau blog agar mendekati aksesibilitas di sisi pengguna. Kata paling sederhana mungkin mengandung makna mudah dibaca serta keterbacaan. Oh, iya! Hampir lupa, untuk pemanfaatan selector class yang digunakan pada beberapa elemen belum ada pada posting di atas. Daripada lupa akan dicontohkan melalui penambahan 3 (tiga) kolom pada footer berikut.

HTML <footer id='footer-content'> <div class='foot-wrap'> <div id='sidebar-footer'> <aside class='supplementary'> <b:section class='sidebar' id='sidebar2' preferred='yes'/> </aside> <aside class='supplementary'> <b:section class='sidebar' id='sidebar3' preferred='yes'/> </aside> <aside class='supplementary'> <b:section class='sidebar' id='sidebar4' preferred='yes'/> </aside> <div class='clear'></div> </div> <div id='content-info'> <p>&copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='Beranda'><data:blog.title/></a>. All Right Reserved. <a class='to-top' href='#content' title='Return to top'>Top</a>↑<br/> Powered by <a href='http://www.blogger.com'>Blogger.com</a></p> </div> </div> </footer>

CSS.supplementary { display: inline; float: left; position: relative; width: 320px; }

Catatan: Untuk kode yang berwarna orange, konfigurasi CSS widget dalamsection class='sidebar' sama dengan pengkodean sebelumnya (.sidebar .widget).

Sederhana bukan? Jika sebuah elemen memiliki karakteristik yang sama, alangkah lebih baik apabila digabungkan dengan pengkodean elemen lain. Hal tersebut dimaksudkan agar pengkodean lebih mudah dikustomisasi & dengan harapan — mungkin — akan lebih semantik.

Sumber : cyber-programer

Backlinks Please Thanks

URL

Code For Forum

HTML Code

<a href='http://dedisinaga123.blogspot.com/2012/12/membuat-template-blog-hasil-karya.html' target='_blank'>Membuat Template Blog Hasil Karya Sendiri</a>

Anda Sekarang Sedang Baca Artikel Tentang Membuat Template Blog Hasil Karya Sendiri , Boleh Menyebar Luaskan Artikel Ini Atau Mengcopy Paste Artikel Membuat Template Blog Hasil Karya Sendiri ini Jika Memang Berrmanfaat. Tapi Saya Harap Anda Jangan Lupa Menyertakan Link Membuat Template Blog Hasil Karya Sendiri Sumbernya. Thank's

Membuat Template Blog Hasil Karya Sendiri

Posting Komentar - Back to Content

Label

Postingan Populer

Anda Pengujung Ke