contoh post-title,comment box,post-blockquote dan date header
contoh footer dan sidebar
code pinkish's blog
<?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: Sharina Elyana
Url : www.opzzpinky.com
Date: 06 March 2013
-----------------------------------------------
*/
#navbar-iframe {
display: none !important;
}
/* 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 {
text-align: center;
background: url(http://0.tqn.com/d/graphicssoft/1/0/w/2/5/Pastel-Wash-Pattern01.png);
color: black;
font-size:12px;
font-family: 'Elsie Swash Caps', cursive;
letter-spacing: 1px;
}
a:link {
color: #FAAFBE;
text-decoration:none;
}
a:visited {
color: #000000;
text-decoration:none;
}
a img {
border-width: 0;
}
#outer-wrapper {
font: $bodyFont;
}
/* Header
----------------------------------------------- */
#header-wrapper {
margin:0;
padding: 0;
text-align: $startSide;
}
#header {
width: 1000px;
height : 400px;
margin: 0 auto;
background: url(http://i.imgur.com/ci80TG8.png);
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: 960px;
margin:0 auto;
padding:20px;
text-align:left;
font: normal normal 99% Verdana, sans-serif;
background:url(http://i.imgur.com/XQeftzQ.png);
}
#main-wrapper {
width: 600px;
margin-left: 20px;
float: left;
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 {
width: 300px;
margin-right: 15px;
float: right;
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 */
}
#footer-wrapper {
width: 960px;
background: url(http://i.imgur.com/1mDF48M.png) no-repeat;
margin:0 auto;
padding:20px;
text-align:left;
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 {
text-align:center;
text-shadow: 2px 2px 3px #00000;
font: 12px verdana;
color: #000000;
border-top: 1px solid #FAAFBE;
border-left: 1px solid #FAAFBE;
border-right: 1px solid #FAAFBE;
border-bottom: 1px solid #FAAFBE;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding :5px;
margin-top: 10px;
background-color: #fbb9d0;
}
.post-footer {
text-align:center;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgksKTNYE2x6Z6fMbkn2i1MstUttfN-aEeWle39hRH7JOiNTY-3xEosbv23m7oHUa0SN0MRVIscRcPNJeyCPmBYeK8Ije5i8pVI0dVgMZre8_pYuzfCUGef8wuS0SKDf6XTKFFvGLZqK2I/s320/for+sidebar.png);
border-bottom: double 5px #FAAFBE;
border-top: double 5px #FAAFBE;
margin: 0 0 0em 0;
padding :15px;
font-size:12px;
color: #f86f8e;
text-shadow: 1px 1px 1px #000000;
line-height:0.1em;
}
.post {
margin:0px 0px 0px 0px;
padding:1.0em 0px;
border-right: double 5px #FAAFBE;
border-left: double 5px #FAAFBE;
}
.post h3 {
text-align:center;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgksKTNYE2x6Z6fMbkn2i1MstUttfN-aEeWle39hRH7JOiNTY-3xEosbv23m7oHUa0SN0MRVIscRcPNJeyCPmBYeK8Ije5i8pVI0dVgMZre8_pYuzfCUGef8wuS0SKDf6XTKFFvGLZqK2I/s320/for+sidebar.png);
border-bottom: double 4px #FAAFBE;
border-top: double 5px #FAAFBE;
margin: -0.4em 0 .5em;
font-size:16px;
padding :20px;
color: #f86f8e;
text-shadow: 1px 1px 1px #000000;
line-height:0.1em;
}
.post h3 a, .post h3 a:visited, .post h3 strong {
color: #f86f8e;
text-shadow: 0px 1px px #000000;
display:block;
font-weight:bold;
text-decoration:none;
}
.post h3 strong,.post h3 a:hover {
color:#ebb2c7;
}
.post-body {
text-align:right;
padding:35px;
line-height:1.3em;
margin:0px 0 0.75em;
}
.post-body blockquote {
line-height:1.3em;
}
.post blockquote {
margin: 1.6em 0 .5em;
text-align: center;
padding: 4px 5px;
background-color: pink;
color: black;
font-size:14px;
font-family: 'Elsie Swash Caps', cursive;
letter-spacing: 1px;
border-top-left-radius: 25px 25px;
border-top-right-radius: 25px 25px;
border-bottom-left-radius: 25px 25px;
border-bottom-right-radius: 25px 25px;
}
.post blockquote:hover {
color: black;
border:1px dashed #FAAFBE;
border-right:5pt double #FAAFBE;
-moz-box-shadow: 0 0 10px #FAAFBE;
-webkit-box-shadow: 0 0 18px #FAAFBE;
}
/* Comments
----------------------------------------------- */
#comments-block{
margin:0;
padding:0;
}
#comments-block .comment-author{
background:#FAAFBE !important;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 10px;
padding:5px;
font-size:15px;
font-weight:bold;
border:1px solid #FAAFBE;
}
#comments-block .comment-body{
margin:0 0 .60em;
padding: 5px 5px 5px 5px;
background: url(http://0.tqn.com/d/graphicssoft/1/0/w/2/5/Pastel-Wash-Pattern01.png);
repeat top left;
-moz-border-radius: 20px 20px / 20px 20px;
border-radius: 5px 5px / 5px 5px;
font-size: 16px;
border-left: 1px dashed #FAAFBE;
border-right: 1px dashed #FAAFBE;
margin-top: -5px; /*position*/
}
#comments-block .comment-footer{
margin:0;
font-size: 13px;
font-weight: normal;
margin-bottom: 20px;
border-left: 1px dashed #FAAFBE;
border-right: 1px dashed #FAAFBE;
border-bottom: 1px dashed #FAAFBE;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
margin-top: -12px; /*position*/
padding: 5px;
}
#comments-block .deleted-comment{
font-style:italic;
color:gray;
}
#comments-block .comment-author a{
color:#ffffff !important;
}
#comments-block .comment-footer a, .comment-body a{
color:#000000 !important;
}
/* Sidebar Content
----------------------------------------------- */
.sidebar h2 {
font-size:16px;
color: #f86f8e;
text-shadow: 1px 1px 1px #000000;
line-height:0.1em;
text-align:center;
padding:40px 30px 40px 30px;
margin-bottom:4px;
font-weight:bold;
background:url("http://i.imgur.com/jAjwlY7.png");
background-repeat:no-repeat;
background-position:center top;}
.sidebar .widget-content{
margin-bottom:-30px;
margin-top:-40px;
padding: 5px 5px 5px 15px;
text-align:left;
color:#444444;
background: url("")repeat-y center;
background-position:center top;
}
.sidebar .widget{
margin-bottom:10px;
margin-top:10px;
padding:0 0 47px 0;
background:url("");
background-repeat:no-repeat;background-position:center bottom;}
body#layout #crosscol-wrapper{ margin-top: 0px; padding-top: 0px}
/* Profile
----------------------------------------------- */
.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
padding: 4px;
border: 2px solid#F5A9BC;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:14px;
-webkit-border-bottom-right-radius:14px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
}
.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;
}
/* Footer
----------------------------------------------- */
#footer {
}
#footer .widget {
text-align: $startSide;
}
::-webkit-scrollbar {
height:10px;
width: 8px;
background: #ffffff;
}
::-webkit-scrollbar-thumb {
background-color: #FE2EC8;
border: 1px solid #F781F3;
border-left: 7px solid #F5A9BC;
border-right: 7px solid #F5A9BC;
border-radius:7px;
}
.sidebar ul li {background:url("http://i805.photobucket.com/albums/yy331/momoirobox/clickable%20smilies/060gif.gif") no-repeat 2px .25em;
margin:0;padding:0 0 3px 10px;
margin-bottom:2px;
text-indent:20px;line-height:1.3em;}
]]></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'>
<!-- skip links for text browsers -->
<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='! ♥ Sha Join Bah ♥ ! (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='Profile1' locked='false' title='DeOwner' type='Profile'/>
<b:widget id='Followers1' locked='false' title='Friends' type='Followers'/>
<b:widget id='BlogArchive1' locked='false' title='Past and Present' type='BlogArchive'/>
</b:section>
</div>
<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>
</div> <!-- end content-wrapper -->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div></div> <!-- end outer-wrapper -->
<b:include data='blog' name='google-analytics'/>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<center>♥ Copyright © 2013 ♥</center>
</body>
</html>
cara nak masukkan ke dalam blog
sebelum mula, korang dinasihatkan untuk backup template asal..takut ada kesalahan atau xberkenan nanti blog jadi buruk jangan salahkan sha ya hihi..
- Dashboard > Template > Edit HTML > Tick
- Copy code Denim
- dan paste pada ruangan template
- dah siap edit korang klik button save dan keep widget tengok gambar di bawah
Kod ini termasuklah home/newer/older design, header free dan footer :)
#kod yang sebelum ini telah dipadam..hope template ini dapat membantu korang dalam mencantikkan blog..cer komen sikit :)
#kod yang sebelum ini telah dipadam..hope template ini dapat membantu korang dalam mencantikkan blog..cer komen sikit :)
hebat !!
ReplyDeletewahhh cantiknyaa , Ninaa nak ambik boleh ?
ReplyDeletetakut salah tu yang mals nak buat ni...
ReplyDeletesha takpe...rajin ..leh edit kalau salah
This comment has been removed by a blog administrator.
ReplyDeletecantik//
ReplyDeleteacece..dah rajin buat freebies..=) keep it up sha!!
ReplyDeletewaa cantek =D
ReplyDeletedah cuba guna template ni....cute tapi xtaula betul ke tak...thanks utk freebies...
ReplyDeleteakak nak tanya kenapa template tu tak keluar copyright by sharina elyana kat bawah...ke akak salah copy?
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletesaye ambil ye
ReplyDeleteana ambil ye,thanks for this code.. :)
ReplyDeleteterbaik sha !!
ReplyDeletewaahhh hebat2.. sye amik yerr.. nti sye credit kat awkk.. ^^
ReplyDeletecantik nye kak sha :D suke tengok .
ReplyDeletedone DSYR.com
ReplyDeletesya amek jgakkk...cutee gilerr...tq
ReplyDeleteassalamualaikum,ana guna template ni untuk blog http://bermulakisahbulanmei.blogspot.com/.
ReplyDeleteterima kasih untuk template ini ya.
cantik ! anis amik untuk second blog . boleh tak ajar anis macam mana nak buat header macam tu ?
ReplyDeletecomel yer..yam ambik :)
ReplyDeleteSaya ambil satu :)
ReplyDeletecantiknyaa . sy ambik yaa :)
ReplyDeletethanks, untk template yang kiut ni. sy amik taw ~~ ^__^
ReplyDeletemohon kebenaran untuk ambil.. =)
ReplyDeletesy guna ya :)
ReplyDeletetenkiuu . comell . sukaa laa .
ReplyDeleteambikkk :D
ReplyDeleteassalam...
ReplyDeleteika guna header nie utk blog ika...
jemput singgah...still kosong sbb bru buad...
http://pwincessnknisha.blogspot.com/
wahhh cantiknyaa , yana
ReplyDeletenak ambik boleh ?
saya guna ^_^ terimakasih!
ReplyDeleteTerima Kasih yer ;) btw..cutee sgt
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteIm using this. thank you so much :))
ReplyDeleteSaya ambil ya ;)
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletenak!! hehe
ReplyDeletesalam sis, sy nk mhon amik code template ni ye..thanks for this code. :)
ReplyDeleteslm sis, sy nk mhon amik code ni ye..btw thanks ye. :)
ReplyDeletecute..saya guna yee..
ReplyDeletecute..saya guna yee..
ReplyDeleteHuaa !! Nak boleh tak? Comalnya.Thanks
ReplyDeletesye guna yee
ReplyDeleteSaya amik ye :)
ReplyDeleteSaya Guna Yaa
ReplyDeletecantik!!!
ReplyDeletegorgeous :) saya amik ye :) thanks :)
ReplyDeletenak try guna yer
ReplyDeleteassalamualaikum...minat saya dgn header ni...sy minta izin ambil ya.thanks
ReplyDeleteassalamualaikun...berkenaan pulok sy..minta izin ambil ya.
ReplyDeletePost a Comment
Assalamualaikum..terima kasih sebab singgah, komen yang baik2 ja tau !! nanti sha singgah blog korang..In Sha Allah :)