Membuat template blog dengan template dari w3school bagian 1
Dikutip dari halaman wikipedia
"W3Schools adalah situs web developer informasi, dengan tutorial dan referensi yang berkaitan dengan topik pengembangan web"
Sesuai judul artikel pada kesempatan ini saya akan membuat Tutorial singkat membuat template blog dengan template dari w3school.
kita akan ambil contoh template dari w3school Material Design.
Copy dulu kode html sample blog Material Design dari halaman w3school DISINI
Langsung saja Copy code html W3school Material Design
buka dan edit dengan editor text yang anda gunakan disini saya menggunakan Notepade ++, buat yang belum punya Notepade ++ bisa di download DISINI.
Pada bagian atas hapus
<!DOCTYPE html><html> <title>W3.CSS</title>
Ganti dengan kode dibawah ini
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' 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 expr:content='data:blog.isMobile ? "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" : "width=1100"' name='viewport'/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> <b:include data='blog' name='all-head-content'/> <title><data:blog.pageTitle/></title>pada kode nav hapus juga
<nav class="w3-sidebar w3-bar-block w3-collapse w3-animate-left w3-card" style="z-index:3;width:250px;" id="mySidebar"> <a class="w3-bar-item w3-button w3-hide-large w3-large" href="javascript:void(0)" onclick="w3_close()">Close <i class="fa fa-remove"></i></a> <a class="w3-bar-item w3-button w3-teal" href="#">Home</a> <a class="w3-bar-item w3-button" href="#">Link 1</a><a class="w3-bar-item w3-button" href="#">Link 2</a><a class="w3-bar-item w3-button" href="#">Link 3</a><a class="w3-bar-item w3-button" href="#">Link 4</a><a class="w3-bar-item w3-button" href="#">Link 5</a><div><a class="w3-bar-item w3-button" onclick="myAccordion('demo')" href="javascript:void(0)">Dropdown <i class="fa fa-caret-down"></i></a><div id="demo" class="w3-hide"><a class="w3-bar-item w3-button" href="#">Link</a><a class="w3-bar-item w3-button" href="#">Link</a><a class="w3-bar-item w3-button" href="#">Link</a></div></div></nav>ganti dengan kode ini
di bagian kode ini hapus<nav class="w3-sidebar w3-bar-block w3-collapse w3-animate-left w3-card" style="z-index:3;width:250px;" id="mySidebar"> <!-- header-->
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'/>
<!-- batas header--><a class="w3-bar-item w3-button w3-hide-large w3-large" href="javascript:void(0)" onclick="w3_close()">Close <i class="fa fa-remove"></i></a><!--sidebar--> <a class="w3-bar-item w3-button w3-teal" href="#">Home</a><a class="w3-bar-item w3-button" href="#">Link 1</a><a class="w3-bar-item w3-button" href="#">Link 2</a><a class="w3-bar-item w3-button" href="#">Link 3</a><a class="w3-bar-item w3-button" href="#">Link 4</a><a class="w3-bar-item w3-button" href="#">Link 5</a> <b:section class='sidebar' id='sidebar' preferred='yes'/> <!-- batas sidebar--></nav>
<div class="w3-overlay w3-hide-large w3-animate-opacity" id="myOverlay" onclick="w3_close()" style="cursor: pointer;"> </div> <div class="w3-main" style="margin-left: 250px;"> <div class="w3-container w3-top w3-theme w3-large" id="myTop"> <i class="fa fa-bars w3-button w3-teal w3-hide-large w3-xlarge" onclick="w3_open()"></i> <span class="w3-hide" id="myIntro">W3.CSS: Introduction</span></div> <header class="w3-container w3-theme" style="padding: 64px 32px;"> <h1 class="w3-xxxlarge"> W3.CSS</h1> </header></div>Ganti dengan kode ini
<div class="w3-overlay w3-hide-large w3-animate-opacity" onclick="w3_close()" style="cursor:pointer" id="myOverlay"></div> <div class="w3-main" style="margin-left:250px;"> <div id="myTop" class="w3-container w3-top w3-theme w3-large"> <p><i class="fa fa-bars w3-button w3-teal w3-hide-large w3-xlarge" onclick="w3_open()"></i> <span id="myIntro" class="w3-hide"> <!-- header--> <b:section class='header' id='header' maxwidgets='1' showaddelement='yes'/> <!-- batas header--> </span></p> </div> <header class="w3-container w3-theme" style="padding:64px 32px"> <h1 class="w3-xxxlarge"><data:blog.title/></h1> </header>Di bawah kode
<div class="w3-container" style="padding:32px">hapus sampai kode
</div> <footer class="w3-container w3-theme" style="padding:32px">
Dibawah kode div class w3-container tambahkan kode ini
<b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' />> </b:section> </div>seperti ini jadinya
save as dengan format xml dan pasang di blog anda
NB: bila terjadi error/tidak bisa disave dalam penerapan template pada ujung bagian css kasih tanda penutup
Sebelum
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css">Sesudah
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-teal.css"/>dan di atas tag "<body> tambahkan tag </head> dan code dibawah ini tepat di atas tag </head>
<b:skin><![CDATA[ body {background-color: #fff;background-position: center center;} a:link {font-family: 'PT Serif Caption', serif; font-size: 15px; color:#3094db;} a:hover {color: #4d4544;} a {color: #3094db;} ]]></b:skin>
Download Tema blog w3school bag1
terima kasih anda sudah membaca artikel dengan judul "Membuat template blog dengan template dari w3school bagian 1"
nantikan artikel selanjunta "Membuat template blog dengan template dari w3school bagian 2"
dengan memasang Breadcrumbs dan Snippets artikel
Tags: blog HTML & CSS
Bagikan:
