Selasa, 11 Agustus 2015

Latihan 2

Latihan 2

Membuat Template Blogger / Blogspot, selama ini saya membagikan template blogger secara gratis sudah puluhan  template saya hasilkan dan saya bagikan secara gratis, akan tetapi pada artikel kali ini saya akan membahas langkah demi langkah bagaimana membuat template blogger mulai dari nol, Jika kamu belum pernah membuat sebuah template pernah membayangkan bagimana sulitnya membuat template tetapi harus diketahui bahwa membuat template tidak sesulit yang dibayangkan asalkan kita punya kemauan dan juga ketelitian sebuah template dapat dibuat dengan mudah.
Membuat template blogger merupakan salah satu pekerjaan yang susah-susah gampang , template blogger menggunakan platform HTML/XML, untuk itu saya akan membahas membuat template blogspot dengan XML/HTML version agar dalam panduannya tidak membingungkan dan mudah dipahami oleh siapa saja yang mengikuti saya bagi dalam beberapa sub bagian yang akan posting secara berkala.

Dokumentasi :
Pertama kita harus memiliki pola atau gambaran seperti apa template yang akan kita buat, nah di sini kita akan membuat sebuah template untuk blogspot 3 kolom dengan rincian elemen laman Header, Block Sidebar1 dan Sidebar2, Main-wrapper dan Footer, masing-masing block tersebut nanti sebagi wadah tampilnya konten widget, dan keperluan lainnya (hal ini dimaksudkan agar kita lebih mudah dalam membuat template). agar lebih mudah untuk diidentifikasi dikemudian hari maka template ini akan saya beri nama Blogger2Go..!!!

1. Pertama kita harus mempersiapkan Struktur Dasar Template tersebut, disini kita akan membuat template langsung diblog secara Online dengan maksud agar langsung bisa dilihat hasilnya, untuk itu buatlah satu blog baru jangan menggunakan blog yang aktif, karena saya tidak bertanggung jawab dengan kerusakan apabila kamu menggunakan blog yang aktif.

2. Kalau blog sudah jadi silahkan masuk ke halaman Edit HTML dari blog yang baru saja dibuat tadi
- Klik Blog Yang Dibuat
- Klik Template
- Klik Edit HTML
- Akan muncul sebuah peringatan dalam kotak kuning klik saja Proceed / Lanjutkan
- Maka akan terlihat kode HTML template blog kamu.
- Hapus semua kode tersebut kemudian ganti dengan kode Struktur Dasar Template Blogger Versi XML dibawah ini

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
    <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
    <b:include data='blog' name='all-head-content'/>
    <title><data:blog.pageTitle/></title>  <!-- ini judul blog -->

    <b:skin><![CDATA[
Pada Komentar

Senin, 04 Mei 2015

tes

tes

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'/>
<b:include data='blog' name='all-head-content'/>
<!-- Start www.bloggertipandtrick.net: Changing the Blogger Title Tag  -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
<b:else/>
<title>404 ~ Page Not Found!</title>
</b:if>
</b:if>
<!-- End www.bloggertipandtrick.net: Changing the Blogger Title Tag  -->

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:   TopMobile
Author: Lasantha Bandara
URL 1:  http://www.premiumbloggertemplates.com/
URL 2:  http://www.bloggertipandtrick.net/
Theme URL: http://www.premiumbloggertemplates.com/topmobile-blogger-template/
Date:   September 2014
License:  This free Blogger template is licensed under the Creative Commons Attribution 3.0 License, which permits both personal and commercial use.
However, to satisfy the 'attribution' clause of the license, you are required to keep the footer links intact which provides due credit to its authors. For more specific details about the license, you may visit the URL below:
http://creativecommons.org/licenses/by/3.0/
----------------------------------------------- */
body#layout ul{list-style-type:none;list-style:none}
body#layout ul li{list-style-type:none;list-style:none}
body#layout #myGallery{display:none}
body#layout .featuredposts{display:none}
body#layout .fp-slider{display:none}
body#layout #navcontainer{display:none}
body#layout .menu-secondary-wrap{display:none}
body#layout .menu-secondary-container{display:none}
body#layout #skiplinks{display:none}
body#layout .feedtwitter{display:none}
body#layout #header-wrapper {margin-bottom:10px;min-height:120px;}
body#layout .social-profiles-widget h3 {display:none;}
/* Variable definitions
====================
<Variable name="bgcolor" description="Page Background Color"
type="color" default="#fff" value="#ffffff">
<Variable name="textcolor" description="Text Color"
type="color" default="#333" value="#333333">
<Variable name="linkcolor" description="Link Color"
type="color" default="#58a" value="#5588aa">
<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#666" value="#666666">
<Variable name="descriptioncolor" description="Blog Description Color"
type="color" default="#999" value="#999999">
<Variable name="titlecolor" description="Post Title Color"
type="color" default="#c60" value="#cc6600">
<Variable name="bordercolor" description="Border Color"
type="color" default="#ccc" value="#cccccc">
<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#999" value="#999999">
<Variable name="sidebartextcolor" description="Sidebar Text Color"
type="color" default="#666" value="#666666">
<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#999" value="#999999">
<Variable name="bodyfont" description="Text Font"
type="font" default="normal normal 100% Georgia, Serif" value="normal normal 100% Georgia, Serif">
<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
<Variable name="pagetitlefont" description="Blog Title Font"
type="font"
default="normal normal 200% Georgia, Serif" value="normal normal 200% Georgia, Serif">
<Variable name="descriptionfont" description="Blog Description Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="postfooterfont" description="Post Footer Font"
type="font"
default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
<Variable name="startSide" description="Side where text starts in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="Side where text ends in blog language"
type="automatic" default="right" value="right">
*/
/* Use this with templates/template-twocol.html */
body{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK2KwPof2Jtaw_9338s43a_K19KDBucEq2F19OSKN5X7UtZgB864-6feXZfz3zTUmxTp0RF_NBPTyXefMLf4d6nWVLTSh9-nJLDoxQ5DvNG1wjoeIBUiCIBArlOQY6zjgWJQgU1rkQHfM/s1600/background.png') fixed;color:#555555;font-family: Arial, Helvetica, Sans-serif;font-size: 13px;line-height: 1.4;margin:0px;padding:0px;}
a:link,a:visited{color:#29AFB8;text-decoration:none;outline:none;}
a:hover{color:#F8760D;text-decoration:none;outline:none;}
a img{border-width:0}
#body-wrapper{margin:0px;padding:0px;}
.section, .widget {margin:0;padding:0;}
/* Header-----------------------------------------------*/
#header-wrapper{width:960px;margin:0px auto 0px;height:66px;padding:20px 0px 20px 0px;background:#fff;overflow:hidden;}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{margin:0;border:0 solid #cccccc;color:#29AFB8;float:left;width:46%;overflow:hidden;}
#header h1{color:#29AFB8;text-shadow:0px 1px 0px #fff;margin:0;padding:0px 0px 0px 15px;font-family:&#39;Oswald&#39;,Arial,Helvetica,Sans-serif;font-weight:bold;font-size:24px;line-height:24px;}
#header .description{padding-left:15px;color:#29AFB8;text-shadow:0px 1px 0px #fff;line-height:13px;font-size:13px;padding-top:0px;margin-top:10px;font-family:Bitter,Arial,Helvetica,Sans-serif;}
#header h1 a,#header h1 a:visited{color:#29AFB8;text-decoration:none}
#header h2{padding-left:5px;color:#29AFB8;font:14px Arial,Helvetica,Sans-serif}
#header2{float:right;width:52%;margin-right:0px;padding-right:0px;overflow:hidden;}
#header2 .widget{padding:0px 15px 0px 0px;float:right}
.social-profiles-widget img{margin:0 4px 0 0}
.social-profiles-widget img:hover{opacity:0.8}
#top-social-profiles{padding-top:10px;height:32px;text-align:right;}
#top-social-profiles img{margin:0 0 0 6px !important;}
#top-social-profiles img:hover{opacity:0.8;}
#top-social-profiles .widget-container{background:none;border:0;padding:0;}
/* Outer-Wrapper----------------------------------------------- */
#outer-wrapper{width:960px;margin:10px auto 0px;padding:0px;text-align:left;}
#content-wrapper{padding:15px 15px 5px 15px;background:#fff;overflow:hidden;}
#main-wrapper{width:615px;float:left;margin:0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden;}
#rsidebar-wrapper{width:300px;float:right;margin:0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden;}
/* Headings----------------------------------------------- */
h2{}
/* Posts-----------------------------------------------*/
h2.date-header{margin:1.5em 0 .5em;display:none;}
Pada Komentar
Langganan: Postingan (Atom)