TutorialBlog: Tukar Template Blog

Assalamualaikum dan salam sejahtera,

Credit kepada foto blogger asal SINI.

Beginilah seting blog sebelum 2013. Sekarang template femes berikut sudah tiada dalam 'Template Designer'

Sekarang ada template: Simple, Picture Windows, Awesome Inc, Watermark, Ethereal, Travel.

Template Denim/Washed Denim

(contoh)

AWAS!

*SAVE template lama sebelum tukar ke template baru sebagai 'backup'

*copy code (SEMUA) di bawah

*Pergi ke Blogger Dashboard> Template> Edit HTML

*'Hightlight' semua kod dalam kotak kod tu,
dan 'Paste' semua kod di bawah.

*'Preview' dulu.
Butang 'arrow' akan tersedia automatik semasa mengubah kod kemudian.

Template ini sangat femes dalam kalangan blogger remaja. Template asal memang nampak buruk, tapi kalau pandai edit jadi cun sangat! Boleh rujuk blogger seniorita untuk godek kod edit blog yang menarik. Credit to NabilaMedan.

<?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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Denim
Designer: Darren Delaye
URL: www.DarrenDelaye.com
Date: 11 Jul 2006
-----------------------------------------------
*/

/* Variable definitions
====================
<Variable name="bgColor" description="Page Background Color"
type="color" default="#efefef" value="#efefef">
<Variable name="textColor" description="Text Color"
type="color" default="#333333" value="#333333">
<Variable name="linkColor" description="Link Color"
type="color" default="#336699" value="#336699">

<Variable name="headerBgColor" description="Page Header Background Color"
type="color" default="transparent" value="transparent">
<Variable name="headerTextColor" description="Page Header Text Color"
type="color" default="transparent" value="transparent">
<Variable name="headerCornersColor" description="Page Header Corners Color"
type="color" default="transparent" value="transparent">

<Variable name="mainBgColor" description="Main Background Color"
type="color" default="#ffffff" value="#ffffff">
<Variable name="borderColor" description="Border Color"
type="color" default="#cccccc" value="#cccccc">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#999999" value="#999999">

<Variable name="sidebarTitleBgColor" description="Sidebar Title Background Color"
type="color" default="#ffd595" value="#ffd595">
<Variable name="sidebarTitleTextColor" description="Sidebar Title Text Color"
type="color" default="#333333" value="#333333">

<Variable name="bodyFont" description="Text Font"
type="font" default="normal normal 100% Verdana, Arial, Sans-serif;" value="normal normal 100% Verdana, Arial, Sans-serif;">
<Variable name="headerFont" description="Page Header Font"
type="font" default="normal normal 210% Verdana, Arial, Sans-serif;" value="normal normal 210% Verdana, Arial, Sans-serif;">

<Variable name="startSide" description="Start side in blog language"
type="automatic" default="left" value="left">
<Variable name="endSide" description="End side in blog language"
type="automatic" default="right" value="right">
*/

body {
background: $bgColor;
margin: 0;
padding: 0px;
font: x-small Verdana, Arial;
text-align: center;
color: $textColor;
font-size/* */:/**/small;
font-size: /**/small;
}
a:link {
color: $linkColor;
}
a:visited {
color: $linkColor;
}
a img {
border-width: 0;
}

#outer-wrapper {
font: $bodyFont;
}

/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
background-color: $headerCornersColor;
text-align: $startSide;
}

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

h1.title {
padding-top: 38px;
margin: 0 14px .1em;
line-height: 1.2em;
font-size: 100%;
}

h1.title a, h1.title a:visited {
color: $headerTextColor;
text-decoration: none;
}

#header .description {
display: block;
margin: 0 14px;
padding: 0 0 40px;
line-height: 1.4em;
font-size: 50%;
}

/* Content
----------------------------------------------- */

.clear {
clear: both;
}

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-$startSide: 14px;
width: 464px;
float: $startSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-$endSide: 14px;
width: 240px;
float: $endSide;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

/* Headings
----------------------------------------------- */
h2, h3 {
margin: 0;
}

/* Posts
----------------------------------------------- */
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
.post {
margin: 0 0 1.5em;
padding-bottom: 1.5em;
}
.post-title {
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 1.1em;
}
.post-title a, .post-title a:visited, .post-title strong {
text-decoration: none;
color: $textColor;
font-weight: bold;
}
.post div {
margin: 0 0 .75em;
line-height: 1.3em;
}

.post-footer {
margin: -.25em 0 0;
color: $textColor;
font-size: 87%;
}

.post-footer .span {
margin-$endSide: .3em;
}

.post img, table.tr-caption-container {
padding: 4px;
border: 1px solid $borderColor;
}
.tr-caption-container img {
border: none;
padding: 0;
}
.post blockquote {
margin: 1em 20px;
}
.post blockquote p {
margin: .75em 0;
}

/* Comments
----------------------------------------------- */
#comments h4 {
margin: 1em 0;
color: $dateHeaderColor;
}
#comments h4 strong {
font-size: 110%;
}
#comments-block {
margin: 1em 0 1.5em;
line-height: 1.3em;
}
#comments-block dt {
margin: .5em 0;
}
#comments-block dd {
margin: .25em 0 0;
}
#comments-block dd.comment-footer {
margin: -.25em 0 2em;
line-height: 1.4em;
font-size: 78%;
}
#comments-block dd p {
margin: 0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background-color: $sidebarTitleBgColor;
font-size: 100%;
color: $sidebarTitleTextColor;
}

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color: $textColor;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 1em;
}

.sidebar .widget-content {
margin: 0 5px;
}

/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 1px solid $borderColor;
}

.profile-data {
margin:0;
text-transform:uppercase;
letter-spacing:.1em;
font-weight: bold;
line-height: 1.6em;
font-size: 78%;
}

.profile-datablock {
margin:.5em 0 .5em;
}

.profile-textblock {
margin: 0.5em 0;
line-height: 1.6em;
}

/* Footerbr /> ----------------------------------------------- */
#footer {
clear: both;
text-align: center;
color: $textColor;
}

#footer .widget {
margin:.5em;
padding-top: 20px;
font-size: 85%;
line-height: 1.5em;
text-align: $startSide;
}
]]></b:skin>
</head>

<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

<div id='outer-wrapper'><div id='wrap2'>


<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Hanis fanfic (Header)' type='Header'/>
</b:section>
</div>

<div id='content-wrapper'>

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol'/>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>
</div>


<div class='clear'> </div>

</div> 

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

</div></div> 
<b:include data='blog' name='google-analytics'/>
</body>
</html>

Old Classic Template
Bunyi je old classic, tapi ramai juga yang masih guna. Jadi ikut langkah berikut:

*Pergi ke Blogger Dashboard > Template
*Scroll bar sampai paling bawah
*Jumpa 'Revert to Classic Template'
Revert - untuk tukar terus
View - untuk lihat koding blog dalam bentuk template ini.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<$BlogMetaData$>

-----------------------------------------------

Blogger Template Style

Name: Rounders

Date: 27 Feb 2004

----------------------------------------------- */

body {

background:#aba;

margin:0;

padding:20px 10px;

text-align:center;

font:x-small/1.5em "Trebuchet MS",Verdana,Arial,Sans-serif;

color:#333;

font-size/* */:/**/small;

font-size: /**/small;

}

/* Page Structure

----------------------------------------------- */

/* The images which help create rounded corners depend on the

following widths and measurements. If you want to change

these measurements, the images will also need to change.

@media all {

#content {

width:740px;

margin:0 auto;

text-align:left;

}

#main {

width:485px;

float:left;

background:#fff url("http://www.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;

margin:15px 0 0;

padding:0 0 10px;

color:#000;

font-size:97%;

line-height:1.5em;

}

#main2 {

float:left;

width:100%;

background:url("http://www.blogblog.com/rounders/corners_main_top.gif") no-repeat left top;

padding:10px 0 0;

}

#main3 {

background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y;

padding:0;

}

#sidebar {

width:240px;

float:right;

margin:15px 0 0;

font-size:97%;

line-height:1.5em;

}

@media handheld {

#content {

width:90%;

}

#main {

width:100%;

float:none;

background:#fff;

}

#main2 {

float:none;

background:none;

}

#main3 {

background:none;

padding:0;

}

#sidebar {

width:100%;

float:none;

}

/* Links

----------------------------------------------- */

a:link {

color:#258;

}

a:visited {

color:#666;

}

a:hover {

color:#c63;

}

a img {

border-width:0;

}

/* Blog Header

----------------------------------------------- */

@media all {

#header {

background:#456 url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;

margin:0 0 0;

padding:8px 0 0;

color:#fff;

}

#header div {

background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;

padding:0 15px 8px;

}

@media handheld {

#header {

background:#456;

}

#header div {

background:none;

}

#blog-title {

margin:0;

padding:10px 30px 5px;

font-size:200%;

line-height:1.2em;

}

#blog-title a {

text-decoration:none;

color:#fff;

}

#description {

margin:0;

padding:5px 30px 10px;

font-size:94%;

line-height:1.5em;

}

/* Posts

----------------------------------------------- */

.date-header {

margin:0 28px 0 43px;

font-size:85%;

line-height:2em;

text-transform:uppercase;

letter-spacing:.2em;

color:#357;

}

.post {

margin:.3em 0 25px;

padding:0 13px;

border:1px dotted #bbb;

border-width:1px 0;

}

.post-title {

margin:0;

font-size:135%;

line-height:1.5em;

background:url("http://www.blogblog.com/rounders/icon_arrow.gif") no-repeat 10px .5em;

display:block;

border:1px dotted #bbb;

border-width:0 1px 1px;

padding:2px 14px 2px 29px;

color:#333;

}

a.title-link, .post-title strong {

text-decoration:none;

display:block;

}

a.title-link:hover {

background-color:#ded;

color:#000;

}

.post-body {

border:1px dotted #bbb;

border-width:0 1px 1px;

border-bottom-color:#fff;

padding:10px 14px 1px 29px;

}

html>body .post-body {

border-bottom-width:0;

}

.post p {

margin:0 0 .75em;

}

p.post-footer {

background:#ded;

margin:0;

padding:2px 14px 2px 29px;

border:1px dotted #bbb;

border-width:1px;

border-bottom:1px solid #eee;

font-size:100%;

line-height:1.5em;

color:#666;

text-align:right;

}

html>body p.post-footer {

border-bottom-color:transparent;

}

p.post-footer em {

display:block;

float:left;

text-align:left;

font-style:normal;

}

a.comment-link {

/* IE5.0/Win doesn't apply padding to inline elements,

so we hide these two declarations from it */

background/* */:/**/url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;

padding-left:14px;

}

html>body a.comment-link {

/* Respecified, for IE5/Mac's benefit */

background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 0 45%;

padding-left:14px;

}

.post img {

margin:0 0 5px 0;

padding:4px;

border:1px solid #ccc;

}

blockquote {

margin:.75em 0;

border:1px dotted #ccc;

border-width:1px 0;

padding:5px 15px;

color:#666;

}

.post blockquote p {

margin:.5em 0;

}

/* Comments

----------------------------------------------- */

#comments {

margin:-25px 13px 0;

border:1px dotted #ccc;

border-width:0 1px 1px;

padding:20px 0 15px 0;

}

#comments h4 {

margin:0 0 10px;

padding:0 14px 2px 29px;

border-bottom:1px dotted #ccc;

font-size:120%;

line-height:1.4em;

color:#333;

}

#comments-block {

margin:0 15px 0 9px;

}

.comment-data {

background:url("http://www.blogblog.com/rounders/icon_comment.gif") no-repeat 2px .3em;

margin:.5em 0;

padding:0 0 0 20px;

color:#666;

}

.comment-poster {

font-weight:bold;

}

.comment-body {

margin:0 0 1.25em;

padding:0 0 0 20px;

}

.comment-body p {

margin:0 0 .5em;

}

.comment-timestamp {

margin:0 0 .5em;

padding:0 0 .75em 20px;

color:#666;

}

.comment-timestamp a:link {

color:#666;

}

.deleted-comment {

font-style:italic;

color:gray;

}

.paging-control-container {

float: right;

margin: 0px 6px 0px 0px;

font-size: 80%;

}

.unneeded-paging-control {

visibility: hidden;

}

/* Profile

----------------------------------------------- */

@media all {

#profile-container {

background:#cdc url("http://www.blogblog.com/rounders/corners_prof_bot.gif") no-repeat left bottom;

margin:0 0 15px;

padding:0 0 10px;

color:#345;

}

#profile-container h2 {

background:url("http://www.blogblog.com/rounders/corners_prof_top.gif") no-repeat left top;

padding:10px 15px .2em;

margin:0;

border-width:0;

font-size:115%;

line-height:1.5em;

color:#234;

}

@media handheld {

#profile-container {

background:#cdc;

}

#profile-container h2 {

background:none;

}

.profile-datablock {

margin:0 15px .5em;

border-top:1px dotted #aba;

padding-top:8px;

}

.profile-img {display:inline;}

.profile-img img {

float:left;

margin:0 10px 5px 0;

border:4px solid #fff;

}

.profile-data strong {

display:block;

}

#profile-container p {

margin:0 15px .5em;

}

#profile-container .profile-textblock {

clear:left;

}

#profile-container a {

color:#258;

}

.profile-link a {

background:url("http://www.blogblog.com/rounders/icon_profile.gif") no-repeat 0 .1em;

padding-left:15px;

font-weight:bold;

}

ul.profile-datablock {

list-style-type:none;

}

/* Sidebar Boxes

----------------------------------------------- */

@media all {

.box {

background:#fff url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;

margin:0 0 15px;

padding:10px 0 0;

color:#666;

}

.box2 {

background:url("http://www.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;

padding:0 13px 8px;

}

@media handheld {

.box {

background:#fff;

}

.box2 {

background:none;

}

.sidebar-title {

margin:0;

padding:0 0 .2em;

border-bottom:1px dotted #9b9;

font-size:115%;

line-height:1.5em;

color:#333;

}

.box ul {

margin:.5em 0 1.25em;

padding:0 0px;

list-style:none;

}

.box ul li {

background:url("http://www.blogblog.com/rounders/icon_arrow_sm.gif") no-repeat 2px .25em;

margin:0;

padding:0 0 3px 16px;

margin-bottom:3px;

border-bottom:1px dotted #eee;

line-height:1.4em;

}

.box p {

margin:0 0 .6em;

}

/* Footer

----------------------------------------------- */

#footer {

clear:both;

margin:0;

padding:15px 0 0;

}

@media all {

#footer div {

background:#456 url("http://www.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;

padding:8px 0 0;

color:#fff;

}

#footer div div {

background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;

padding:0 15px 8px;

}

@media handheld {

#footer div {

background:#456;

}

#footer div div {

background:none;

}

#footer hr {display:none;}

#footer p {margin:0;}

#footer a {color:#fff;}

/* Feeds

----------------------------------------------- */

#blogfeeds {

}

#postfeeds {

padding:0 15px 0;

}

</style>

</head>

<body>

<$BlogTitle$>

</h1>

</div></div>

</BlogDateHeader>

<BlogItemUrl><a href="<$BlogItemUrl$>" title="external link" class="title-link"></BlogItemUrl>

<$BlogItemTitle$>

</h3>

</BlogItemTitle>

<p>

<$BlogItemBody$>

</p>

</div>

<em><$I18NPostedByAuthorNickname$> @ <a href="<$BlogItemPermalinkUrl$>" title="permanent link"><$BlogItemDateTime$></a></em>  

</BlogItemCommentsEnabled><BlogItemBacklinksEnabled>

<a class="comment-link" href="<$BlogItemPermalinkUrl$>#links"><span style="text-transform:lowercase"><$I18NLinksToThisPost$></span></a>

</BlogItemBacklinksEnabled>

<$BlogItemControl$>

</p>

</div>

<$CommentPager$>

<$I18NAtCommentTimeWithPermalink$>,

<$I18NCommentAuthorSaid$>

</dt>

<$BlogCommentDeleteIcon$>

</dd>

</BlogItemComments>

<$CommentPager$>

</dl>

<$BlogItemCreate$>

</p>

</BlogItemCommentsEnabled>

<$BlogBacklinkControl$>

<a href="<$BlogBacklinkURL$>" rel="nofollow"><$BlogBacklinkTitle$></a> <$BlogBacklinkDeleteIcon$>

</dt>

<br />

</span>

</dd>

</BlogItemBacklinks>

</dl>

</BlogItemBacklinksEnabled>

</p>

</div>

</ItemPage>

</Blogger>

</div></div></div>

<$BlogMemberProfile$>

<ul>

<li><a href="https://news.google.com/">Google News</a></li>

</ul>

</MainOrArchivePage>

</BloggerPreviousItems>

</ul>

</BloggerArchives>

</ul>

</MainOrArchivePage>

<!--

<p>This is a paragraph of text that could go in the sidebar.</p>

-->

</div></div></div>

</div>

</div></div></div>

</div>

</body>

</html>

Template 2013 lain
KLIK SINI

Harap membantu (^_^)

Terima kasih baca, sudi-sudilah komen :)

MenuBar

Sunday, October 25, 2015

TutorialBlog: Tukar Template Blog

No comments:

Post a Comment

Tuan Blog

Contact