Pada pertemuan kali ini saya akan membuat tutorial membuat template blog sederhana dan semoga kalian semua memahami tutorial ini, Langsung aja kita mulai...
Membuat wrapper pada Template blog
1.Setelah anda mendownload dan mencopas semua kode tadi, kini saatnya kita membuat wrapper paling luarnya misalnya kita akan membuat dengan ukuran 1025px (Ukuran bisa diubah sesuka kalian)
2.Pasang kode CSS berikut di atas kode </style>
#wrapper{ background:#FFF;width:1024px;overflow:hidden;margin:0 auto;}
3.Kemudian supaya kode CSS tersebut berfungsi kita panggil dengan memasang HTML nya, Caranya? Kita cari kode </body> Kemuadian taruhkan kode dibawah ini tepat di bawah </body> : <div id='wrapper'>
4.Tutup Html tadi meletakan kode penutup berikut tepat dibawah </b:section> yang terakhir (Widget postingan blog) atau diatas </div> terakhir
</aside>
Cara membuat header dan header ads
1.setelah anda membuat wrapper tadi, kali ini kita akan buat header dan header ads caranya? simak berikut ini
2.Pasang Css berikut diatas kode </style>
#header-wrapper{width:100%;overflow:hidden;}#header{width:262px;overflow:hidden;float:left;}#header-ads{width:728px;overflow:hidden;float:right;}.header .widget{padding:10px;}
3.Pasang HTMl berikut dan letakan di bawah kode <div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'><b:widget id='Header1' locked='true' title='Mas Yadi Blogger Template (Header)' type='Header'></b:widget></b:section><b:section class='header' id='header-ads' maxwidgets='1'/><div class='clear'/></header>
Cara membuat post dan sidebar blog
1.cara selanjutnya adalah kita membuat postingan dan sidebar, simak 2.Pasang CSS postingan dan sidebar berikut diatas kode </style>
#artikel-wrapper{float:right;width:724px;overflow:hidden}#sidebar-wrapper{float:left;width:300px;overflow:hidden}#sidebar{padding:5px}.sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}
3.pasang HTML sidebar berikut dan letakan di atas <b:section class='main'id='main'><aside id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section></aside>
4.Pasang HTML artikel berikut dan letakan diatas kode <b:section class='main'id='main'>
<aside id='artikel-wrapper'>
5.Tutup HTML artikel berikut dan letakan tepat dibawah </b:section> atas di atas </div> </aside
Membuat footer 3 kolom di blog
1.Langkah terakhir adalah kita akan membuat footer 3 kolom
2.Pasang kode CSS dibawah ini diatas kode </style> #footer-wrapper{width:100%;clear:both}.footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}.footer{width:32%;padding:5px}#footer-1{float:left}#footer-2{float:left}#footer-3{float:right}
3.Pasang HTMl footer berikut dan Letakan di atas kode </div> yang terakhir
<div class='clear'/><footer id='footer-wrapper'><b:section class='footer' id='footer-1' showaddelement='yes'/><b:section class='footer' id='footer-2' showaddelement='yes'/><b:section class='footer' id='footer-3' showaddelement='yes'/></footer>
Sekian Tutorial ini semoga bermanfaat bagi kalian semua Jangan lupa tinggalkan komen dibawah yaaa
Cara membuat template sederhana blog
Kali ini kita akan membuat template sederhana dengan structure, header, content, footer dan sidebar berikut layout yang kita buat :
Simak dengan baik langkah - langkah di bawah ini :
1.Pertama login ke blogger sobat lalu pergi ke edit HTML di template Blogger sobat
Download kode nya disini1.Pertama login ke blogger sobat lalu pergi ke edit HTML di template Blogger sobat
2.Hapus semua kode yang ada di template blog anda dengan cara Klik (Ctrl + a) lalu hapus Dan pastekan kode dibawah ini :
Membuat wrapper pada Template blog
1.Setelah anda mendownload dan mencopas semua kode tadi, kini saatnya kita membuat wrapper paling luarnya misalnya kita akan membuat dengan ukuran 1025px (Ukuran bisa diubah sesuka kalian)
2.Pasang kode CSS berikut di atas kode </style>
#wrapper{ background:#FFF;width:1024px;overflow:hidden;margin:0 auto;}
3.Kemudian supaya kode CSS tersebut berfungsi kita panggil dengan memasang HTML nya, Caranya? Kita cari kode </body> Kemuadian taruhkan kode dibawah ini tepat di bawah </body> : <div id='wrapper'>
4.Tutup Html tadi meletakan kode penutup berikut tepat dibawah </b:section> yang terakhir (Widget postingan blog) atau diatas </div> terakhir
</aside>
Cara membuat header dan header ads
1.setelah anda membuat wrapper tadi, kali ini kita akan buat header dan header ads caranya? simak berikut ini
2.Pasang Css berikut diatas kode </style>
#header-wrapper{width:100%;overflow:hidden;}#header{width:262px;overflow:hidden;float:left;}#header-ads{width:728px;overflow:hidden;float:right;}.header .widget{padding:10px;}
3.Pasang HTMl berikut dan letakan di bawah kode <div id='wrapper'>
<header id='header-wrapper'><b:section class='header' id='header' maxwidgets='1'><b:widget id='Header1' locked='true' title='Mas Yadi Blogger Template (Header)' type='Header'></b:widget></b:section><b:section class='header' id='header-ads' maxwidgets='1'/><div class='clear'/></header>
Cara membuat post dan sidebar blog
1.cara selanjutnya adalah kita membuat postingan dan sidebar, simak 2.Pasang CSS postingan dan sidebar berikut diatas kode </style>
#artikel-wrapper{float:right;width:724px;overflow:hidden}#sidebar-wrapper{float:left;width:300px;overflow:hidden}#sidebar{padding:5px}.sidebar h2,.sidebar h3{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}
3.pasang HTML sidebar berikut dan letakan di atas <b:section class='main'id='main'><aside id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section></aside>
4.Pasang HTML artikel berikut dan letakan diatas kode <b:section class='main'id='main'>
<aside id='artikel-wrapper'>
5.Tutup HTML artikel berikut dan letakan tepat dibawah </b:section> atas di atas </div> </aside
Membuat footer 3 kolom di blog
1.Langkah terakhir adalah kita akan membuat footer 3 kolom
2.Pasang kode CSS dibawah ini diatas kode </style> #footer-wrapper{width:100%;clear:both}.footer h3,.footer h2{color:#fff;padding:4px 8px;background:#3384cc;background:linear-gradient(top,#3384cc,#2a79bf);background:-webkit-linear-gradient(top,#3384cc,#2a79bf);background:-moz-linear-gradient(top,#3384cc,#2a79bf);background:-o-linear-gradient(top,#3384cc,#2a79bf);font-size:11pt;font-family:'PT Sans',Arial,sans-serif;border-bottom:2px solid #ccc;text-shadow:1px 1px 0 #283744;margin:0;margin-bottom:5px}.footer{width:32%;padding:5px}#footer-1{float:left}#footer-2{float:left}#footer-3{float:right}
3.Pasang HTMl footer berikut dan Letakan di atas kode </div> yang terakhir
<div class='clear'/><footer id='footer-wrapper'><b:section class='footer' id='footer-1' showaddelement='yes'/><b:section class='footer' id='footer-2' showaddelement='yes'/><b:section class='footer' id='footer-3' showaddelement='yes'/></footer>
Sekian Tutorial ini semoga bermanfaat bagi kalian semua Jangan lupa tinggalkan komen dibawah yaaa
Tags:
Blog