Home CSS OPINI PEMROGRAMAN WEB Tips dan Trik 7 Langkah Mudah Membuat Template Blogger dari Nol sampai Jadi

Minggu, 02 Agustus 2015

7 Langkah Mudah Membuat Template Blogger dari Nol sampai Jadi

Diterbitkan
Tags

INDONESIANWARE - Pada Artikel yang anda baca kali ini dengan judul 7 Langkah Mudah Membuat Template Blogger dari Nol sampai Jadi, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel CSS, Artikel OPINI, Artikel PEMROGRAMAN WEB, Artikel Tips dan Trik, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : 7 Langkah Mudah Membuat Template Blogger dari Nol sampai Jadi
link : 7 Langkah Mudah Membuat Template Blogger dari Nol sampai Jadi

Baca juga


7 Langkah Mudah Membuat Template Blogger dari Nol sampai Jadi


7 Langkah mudah membuat template blogger dari nol sampai jadi - Nah sobat gee kali ini saya mau share membuat template blogger dari nol, biar lebih mudah dan tidak terlalu banyak membuat kode CSS kita gunakan Bootstrap, untuk icon bisa pakai font awesome kamu bisa cek contoh sederhananya disini http://jampintar.blogspot.com/, oke langsung aja ya, jangan lupa sebelum ganti template template lama di backup dulu ya biar kalau kenapa kenapa bisa ganti langsung dengan template yang lama, berikut step stepnya :

1. Pertama masuk ke akun blogger kamu seperti contoh gambar :


2. Kemudian pilih template disamping kiri kamu,


3. Kemudian Klik Edit HTML



4. Kemudian Copy Paste Code Dibawah ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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>
   <include expiration='7d' path='/assets/**.css'/>
 <include expiration='7d' path='/assets/**.js'/>
 <include expiration='3d' path='/assets/**.gif'/>
 <include expiration='3d' path='/assets/**.jpeg'/>
 <include expiration='3d' path='/assets/**.jpg'/>
 <include expiration='3d' path='/assets/**.png'/>
 <meta content='no-store' http-equiv='Cache-Control'/>
 <meta content='no-cache' http-equiv='Cache-Control'/>
 <meta content='no-cache' http-equiv='Pragma'/>
 <meta content='Fri, 18 Jul 2014 1:00:00 GMT' http-equiv='expires'/>
 <meta content='index, follow, noodp, noydir' name='robots'/>
 <meta content='id' name='geo.country'/>
 <meta content='Gunawan Gee' name='author'/>
 <meta content='1 days' name='revisit-after'/>
 <meta content='Indonesia' name='geo.placename'/>
 <meta content='blogger' name='generator'/>
 <meta content='general' name='rating'/>
 <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
 <b:include data='blog' name='all-head-content'/>
 <title>
  <b:if cond='data:blog.pageType == &quot;index&quot;'>
   <data:blog.pageTitle/>
  <b:else/>
   <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
    <data:blog.pageName/> | <data:blog.title/>
   <b:else/>
    404 | <data:blog.title/> 
   </b:if>
  </b:if>
 </title>
 <b:if cond='data:blog.metaDescription != &quot;&quot;'>
  <meta expr:content='data:blog.metaDescription' property='og:description'/>
 </b:if>

 <b:if cond='data:blog.postImageUrl != &quot;&quot;'>
  <meta expr:content='data:blog.postImageUrl' property='og:image'/>
 </b:if>
<!-- Latest compiled and minified CSS -->
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' rel='stylesheet'/>
<!-- Optional theme -->
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css' rel='stylesheet'/>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

&lt;style type=&quot;text/css&quot;&gt;&lt;!-- /* <b:skin><![CDATA[
header li {list-style:none;}
#main{width:550px; float:left;}
#sidebar{width:200px; float:right;}
#footer li{list-style:none;}
*/]]></b:skin>
<style type='text/css'>
  /*
  Blogger Template Style
  Name       : Nama Template Anda
  Date       : Tanggal Pembuatan Template Ini
  Updated by : Gunawan Gee/Namamu
  */
  body{margin-top:60px;}
  .title{font-size:16px;}
  .navbar-default{background-color: #f0f0f0;border-color: transparent;}
  #copyright{background:#333;}
  #copyright,#copyright a{font-size:12px; color:#fff; padding:10px 0;}
  #footer li{list-style:none;}
  #footer{background:#ddd; padding:20px 0; margin-top:20px;}
h2.date-header {font-size: 12px;}
  .date-outer {margin-bottom: 50px;}
</style>
</head>
<body>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'/>
<!-- Latest compiled and minified JavaScript -->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'/>
</body>
</html>

5. Untuk membuat Menu, contoh kita pakai navbar bawaan bootsrap, masukan kode dibawah ini setelah kode <body>

<header>
 <nav class='navbar navbar-default navbar-fixed-top'>
   <div class='container'>
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class='navbar-header'>
    <button aria-expanded='false' class='navbar-toggle collapsed' data-target='#bs-example-navbar-collapse-1' data-toggle='collapse' type='button'>
   <span class='sr-only'>Toggle navigation</span>
   <span class='icon-bar'/>
   <span class='icon-bar'/>
   <span class='icon-bar'/>
    </button>
    <a class='navbar-brand' href='#'>Brand</a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class='collapse navbar-collapse' id='bs-example-navbar-collapse-1'>
    <ul class='nav navbar-nav'>
   <li class='active'><a href='#'>Link <span class='sr-only'>(current)</span></a></li>
   <li><a href='#'>Link</a></li>
   <li class='dropdown'>
     <a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
     <ul class='dropdown-menu'>
    <li><a href='#'>Action</a></li>
    <li><a href='#'>Another action</a></li>
    <li><a href='#'>Something else here</a></li>
    <li class='divider' role='separator'/>
    <li><a href='#'>Separated link</a></li>
    <li class='divider' role='separator'/>
    <li><a href='#'>One more separated link</a></li>
     </ul>
   </li>
    </ul>
    
    <ul class='nav navbar-nav navbar-right'>
   <li><a href='#'>Link</a></li>
   <li class='dropdown'>
     <a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='#' role='button'>Dropdown <span class='caret'/></a>
     <ul class='dropdown-menu'>
    <li><a href='#'>Action</a></li>
    <li><a href='#'>Another action</a></li>
    <li><a href='#'>Something else here</a></li>
    <li class='divider' role='separator'/>
    <li><a href='#'>Separated link</a></li>
     </ul>
   </li>
    </ul>
  </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->
 </nav>
</header>


6. Kemudian kita akan buat main blog, sidebar dan footer masukan kode dibawah ini tepat setelah kode </header>
,
<div class='clearfix' id='wrapper'>
<div class='container clearfix'>
 <!-- B. Isi Blog Kamu-->
 <div class='col-md-9'>
 <b:section class='main' id='main'>
   <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'></b:widget>
 </b:section>
 </div>
 <!-- E. Isi Blog Kamu-->
 <!-- B. Sidebar-->
 <div class="col-md-3">
  <b:section class='sidebar' id='sidebar' showaddelement='yes'></b:section>
 </div>
 <!-- E. Sidebar-->
</div>
<div id='footer'>
 <div class='container clearfix'>
  <div class='col-md-4'>
   <ul class='link-footer'>
              <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
          </ul>
  </div>
  <div class='col-md-4'>
              <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
  </div>
  <div class='col-md-4'>
              <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
     <li><a href='#'>Link</a></li>
  </div>
 </div>
</div>
<div id='copyright'>
 <div class='container clearfix'>
  <div class='col-md-12 text-left clearfix'>
   Copyright &amp;copy; Gunawan Gee All Right Reserved
  </div>
 </div>
</div>
</div>

7. Kemudian save.

Coba lihat hasilnya, template pertama kamu sudah jadi, Cuma semua tulisan tampil untuk membuatnya menjadi auto readmore,  akan dibahas dipostingan berikutnya atau kamu bisa cari tutorialnya karena banyak sekali versi dan cara untuk tutorial readmore ini.

Template diatas hanya sebagai acuan dasar untuk membuat template sesuai dengan bentuk yang kamu inginkan, jika sudah terbiasa dengan css tentunya akan sangat mudah buat sobat gee modifikasi.

Demikian Cara membuat template blogger dari nol sampai jadi, semoga menjadi inspirasi dan bermanfaat buat sobat gee. Jika masih bingung sobat gee bisa komentar dibawah ya. Terima kasih

Artikel Sebelumnya : http://www.gee.web.id/2015/08/free-super-fastest-blogger-template.html


Sekianlah artikel 7 Langkah Mudah Membuat Template Blogger dari Nol sampai Jadi kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel 7 Langkah Mudah Membuat Template Blogger dari Nol sampai Jadi dengan alamat link https://ware-id.blogspot.com/2015/08/7-langkah-mudah-membuat-template.html

Artikel Terkait

Unknown

Next Post
Previous Post


EmoticonEmoticon

Langganan: Posting Komentar (Atom)