Sorry nih hari ini agak maleman postingnya, pada tutorial kali ini saya akan membahas tentang "Cara Membuat Template Blogspot: Layout CSS Part1". Jika anda ingin membuat template blogspot pasti yang anda butuhkan pertama kali adalah layout css.
Nah saya udah buat video tutorialnya untuk anda. Isi dari video tutorial ini adalah untuk membuat outerwrapper, header, sidebar, menu dan posting.
Video tutorialnya adalah sebagai berikut:
Lanjutannya:
Untuk sourcenya anda bisa mengambilnya di bawah ini:
Semoga tutorial yang saya berikan bermanfaat, Besok kita buat sidebar bawah dan juga menu. Jangan sampai ketinggalan ya.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css"><!--body {background-color: #FFFFFF;margin: 0px;}#outer-wrapper {border-right-width: 2px;border-left-width: 2px;border-right-style: solid;border-left-style: solid;border-right-color: #999999;border-left-color: #666666;height: 1000px;width: 900px;margin-right: auto;margin-left: auto;}#outer-wrapper #header {height: 100px;width: auto;border-bottom-width: 2px;border-bottom-style: solid;border-bottom-color: #333333;}#outer-wrapper #header #logo {float: left;height: 80px;width: 300px;border: 1px solid #666666;margin: 10px;}#outer-wrapper #header #banner {float: right;height: 80px;width: 500px;border: 1px solid #666666;margin: 10px;}#outer-wrapper #menu {height: 35px;width: auto;background-color: #CCCCCC;}#outer-wrapper #content-wrapper {height: 600px;width: 850px;margin-right: auto;margin-left: auto;border: 1px solid #999999;margin-top: 10px;}#outer-wrapper #content-wrapper #posting {float: left;height: 600px;width: 600px;border-right-width: 2px;border-right-style: solid;border-right-color: #999999;}#outer-wrapper #content-wrapper #sidebar {float: right;height: 600px;width: 240px;}--></style></head><body><div id="outer-wrapper"><div id="header"><div id="logo">Content for id "logo" Goes Here</div><div id="banner">Content for id "banner" Goes Here</div></div><div id="menu">Content for id "menu" Goes Here</div><div id="content-wrapper"><div id="posting">Content for id "posting" Goes Here</div><div id="sidebar">Content for id "sidebar" Goes Here</div></div></div></body></html>
No comments:
Post a Comment