Gambar yang Sesuai Untuk Left Sidebar Wrapper

Kalau ingin mengubah template gratisan yang kita ambil dari web penyedia template gratisan sebenarnya tidak begitu sulit. Pemilik template tidak akan keberatan kita membongkar kode-kode template yang dia bagikan di webnya asalkan kita tidak membuang namanya dari template tersebut sebagai pembuat aslinya. Tetap cantumkan nama pembuat template tersebut tapi buatlah template tersebut lebih personal dengan langkah yang sangat mudah.

Pertama ambil kode template di bawah ini. Copy dan paste ke kotak html template blog kita yang sudah dikosongkan. Hapus semua kode template di kotak html tersebut.

<?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[/*
-----------------------------------------------
Name : She's a Lady
Designer: Cebong Ipiet
URL : http://www.ipietoon.com
Date : Nov 2009
THE CONTENTS OF THIS TEMPLATE IS MADE BY IPIETOON (vector is copyrighted to respective artist).
PLEASE BE RESPECTFUL AND DO NOT REMOVE CREDIT FOOTER LINK WITHOUT OUR PERMISSION.
YOU ARE ALLOWED TO DISTRIBUTE BUT NOT ALLOWED TO ADD ANY LINK ON FOOTER
----------------------------------------------- */

#navbar-iframe {
   display: none !important;
}
body {
	background:#fff;
	color: #724b45;
	font-size: 12px;
	font-family:Verdana, Arial, Tahoma;
	margin: 0 auto 0;
	padding: 0;
}
#wrap {
        width:1024px;
	margin: 0;
	padding: 0;
	position: relative;
}
a, a:visited {
	color: #f1779d;
	text-decoration: none;
}
a:hover {
	color: #f1779d;
	text-decoration: underline;
}
a img {
	border-width: 0;
}

/*---Header----*/
#header-wrapper{
        padding-top:10px;
	width: 300px;
	height: 150px;
        position:fixed;
        z-index:10000;
        top:0;
        left:0;
}

#header-inner {
	background-position: left;
	background-repeat: no;
}
#header h1 {
	color: #8A672C;
	font: 40px Georgia, Times, Serif;
	font-weight: normal;
	margin: 0;
	padding: auto;
	text-decoration: none;
        text-align:center;
}

#header h3 {
	color: #906728;
	margin: 0px;
	padding: 0px;
	font: 20px Georgia, Times, Serif;
}
#header p {
	color: #FFF;
	padding: 0 0 5px 20px;
	margin: 0;
	line-height: 20px;
}

#header .description {
	color: #A91B33;
	font-size: 16px;
	font-family: Georgia, Arial, Tahoma, Verdana;
	font-weight: normal;
	padding: 0;
        text-align:center;
}

#outer-wrapper {
	margin: 0;
	padding:0;
	line-height: 18px;
}
#content-wrapper{
        width:710px;
        padding-top:20px;
        margin-left:300px;
}
/*----Main-----*/
#main-wrapper {
	width: 500px;
	float: left;
	padding: 0;
        margin-right:15px;
}

/*----Sidebar-----*/
#sidebar-wrapper {
	float: right;
	width: 190px;
	margin: 0;
	padding: 0;
	display: inline;
        text-align:justify;
}

#sidebar {
        width:190px;
        float:right;
}

.sidebar.widget{
       margin-bottom:10px; 
       overflow:hidden;
}

#leftsidebar-wrapper{
        background:url(http://4.bp.blogspot.com/_6pbSFKC8YH4/SwlPMKmY3yI/AAAAAAAABUU/FNaRVAOlDgY/s1600/leftimage.png) no-repeat;
        bottom:0;
        left:0;
	width: 300px;
	height: 550px;
        position:fixed;
        z-index:10000;

}
/*-----Post------*/
.date-header {
	margin: 1.5em 0 .5em;
	display: none;
}
.post {
	
	float: left;
	margin: 0 0 20px;
	padding: 0px;
}
.post h3 {
	color: #ee8a89;
	margin: 0px;
	padding: 0px;
        font-weight:normal;
}
.post h3 a, #content h1 a:visited {
	color: #ee8a891;
	margin: 0px;
	padding: 0px;
	font: 26px Georgia, Trebuchet MS, Times New Roman;
        font-weight:normal;
}
.post h3 a:hover {
	color: #ee8a89;
	text-decoration: underline;
}
.post-body {
	margin: 1.5em 0 .75em;
	line-height: 1.6em;
        text-align:justify;
        overflow:hidden;
        width:500px;
}
.post-body blockquote {
	line-height: 1.3em;
}

.post-footer{
        border-bottom:1px dotted #724b45;
        font: 12px;
        padding-top:10px;
}

.comment-link {
        background:url(http://2.bp.blogspot.com/_nxOMLf2KJwU/So3WBT5lJPI/AAAAAAAABxo/MuXH06p1-hY/s1600/comment-link.png) no-repeat;
        height:30px;
        padding:2px 17px 10px 8px;
	margin:0;
        color:#fff;
        font:18px Georgia, Trebuchet MS, Times New Roman;
        float:right;
}
.comment-link a, .comment-link a:visited, .comment-link a:hover {
        color:#fff;
}
.post img {
	padding: 10px;
}
.post blockquote {
	border-left: 3px solid #f1779d;
	padding: 10px;
	margin: 10px;
}
.post blockquote p {
	margin: 0;
	padding: 0 0 15px;
}

/*----Comments----*/
.comments {
        width:500px;
	float: left;
	margin: 0 0 10px;
	padding:0;
}
#comments h4 {
	color: #906728;
	font: 20px Georgia, Trebuchet MS, Times New Roman;
 	margin: 10px;
	padding: 10px 0 0;
}
#comments-block {
        width:450px;
	float: left;
	padding: 0;
	margin: 0;
}
#comments-block .comment-author {
	margin: .5em 0;
	font-weight: bold;
}
#comments-block .comment-body {
	margin: .25em 0 10px;
	padding-left: 20px;
        border-bottom:1px solid #ee8a89;
}
#comments-block .comment-footer {
	margin: -.25em 0 2em;
	line-height: 1.4em;
	text-transform: uppercase;
	letter-spacing: .1em;

}
#comments-block .comment-body p {
	margin: 0 0 .75em;
}
.deleted-comment {
	font-style: italic;
	color: gray;
}

/*-----Page Navigation------*/
#blog-pager-newer-link {
	float: left;

}
#blog-pager-older-link {
	float: right;

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

}
.blog-pager a {
      background:#724b45;
      padding:3px;
      font-size:10px;
}

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

/*------Widget------*/
.sidebar {
	color: #666;
	line-height: 1.5em;
}
.sidebar h2 {
        background:url(http://4.bp.blogspot.com/_6pbSFKC8YH4/Swk5fo5W2yI/AAAAAAAABTo/AhEetLB3HbM/s1600/sidebar.png) no-repeat top left;
        height:35px;
	color: #504416;
	font: 18px Georgia, Trebuchet MS, Times New Roman;
	font-weight: normal;
	margin: 0px;
	padding: 10px 0px 5px 35px;
}
#sidebar p {
	margin: 0;
	padding: 0 0 0 45px;
}
#sidebar a img {
	border: none;
	margin: 0;
	padding: 0;
}
.sidebar ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
.sidebar ul li {
	list-style-type: none;
	margin: 0 0 5px;
        border-bottom: 1px dotted #928641;

}

.main .widget {
	margin: 0 0 1.5em;
	padding: 0 0 1.5em;
}

.main .Blog {
	border-bottom-width: 0;
}

/*-------Bottom--------*/
#footer-wrapper {
	width: 100%;
        border-top:2px dashed #724b45;
	clear: both;
	margin: 0 auto;
	padding: 2px;
	line-height: 1.6em;
	text-transform: uppercase;
	letter-spacing: .08em;
	text-align: center;
        font-size:10px;
}

/* -----   LOWER SECTION   ----- */
#lower {
       margin:auto;
       padding: 0;
       width: 100%;
       float:left;
       border-top:2px dashed #724b45;
}

#lowerbar-wrapper {
       color:#333;
       float: left;
       margin-right: 10px;
       padding-bottom: 20px;
       width: 31%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       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 */
}

.lowerbar {margin: 0px; padding: 0;}
       .lowerbar .widget {margin: 0px; padding: 10px 5px 0px 0px;}

.lowerbar h2 {
       margin: 0px 0px 10px 0px;
       padding: 3px 0px 3px 0px;
       text-align: left;
       color: #504416;
       font: 18px Georgia, Trebuchet MS, Times New Roman;
       font-weight:normal;
       border-bottom:1px solid #ee8a89;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom:1px dotted #928641;
}

.lowerbar a { text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: #724b45;}
.lowerbar a:visited {text-decoration: none;}

#credits {
position: fixed;
width:100%;
right:0;
z-index:1000;
bottom:0;
}

/*Search
---------------------------------------*/
#search {
	height:28px;
	width:auto;
	width:170px;
	float:center;
	padding:10px;
       }

#search form {
	margin: 0;
	padding: 0;
}

#search fieldset {
	margin: 0;
	padding: 0;
	border: none;
}

#search p {
	margin: 0;
	font-size: 85%;
}

#s {
	margin-left:10px;
	float: left;
	width:150px;
	padding: 4px 7px;
	background:#fff;
	border:3px solid #928641;
	font: normal 100% Arial, Helvetica, sans-serif;
	color:#422108;
}

#searchsubmit {
	margin-right:10px;
	float: center;
	margin: 5px;
	background: #fff;
	border: none;
	font: bold 100% Arial, Helvetica, sans-serif;
	color: #000;
	height:24px;
	line-height:24px
}

/* Profile */
.profile-img {
float: left;
margin: 0px 10px 0px 0px;
padding: 5px;
border: 1px border #ffffff;
}
.profile-data {
margin: 0px;
padding: 0px;
}
.profile-datablock {
margin: 0px;
padding: 0px;
}
.profile-textblock {
text-align:justify;
margin: 0px;
padding: 0px;
}
.profile-link {
margin: 0px;
padding: 0px;
}

]]></b:skin>

</head>

<b:if cond='data:useImage'>
    <b:if cond='data:imagePlacement == "REPLACE"'>
      
      <div id='header-inner'>
        <a expr:href='data:blog.homepageUrl' style='display: none'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: none'/>
        </a>
      </div>
<b:else/>
      
      <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); "                      + "background-position: "                      + data:backgroundPositionStyleStr + "; "                      + data:widthStyleStr                      + "min-height: " + data:height + "px;"                      + "_height: " + data:height + "px;"                      + "background-repeat: no-repeat; "' id='header-inner'>
        <div class='titlewrapper' style='background: transparent'>
          <h1 class='title' style='background: transparent; border-width: 0px'>
            <b:include name='title'/>
          </h1>
</div>
<b:include name='description'/>
      </div>
</b:if>
  <b:else/>
    
    <div id='header-inner'>
      <div class='titlewrapper'>
        <h1 class='title'>
          <b:include name='title'/>
        </h1>
</div>
<b:include name='description'/>
    </div>
</b:if>
</b:includable>
          <b:includable id='description'>
  <div class='descriptionwrapper'>
    <p class='description'>
<span><data:description/></span></p>
</div>
</b:includable>
          <b:includable id='title'>
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <data:title/>
  <b:else/>
    <a expr:href='data:blog.homepageUrl'><data:title/></a>
  </b:if>
</b:includable>
        </b:widget>
      </b:section>
	</div>
<div style='clear:both;'/>

<b:include data='top' name='status-message'/>

<data:adStart/>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'>
<data:post.dateHeader/></h2>
</b:if>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == "item"'>
        <b:include data='post' name='comments'/>
      </b:if>
      <b:if cond='data:post.includeAd'>
        <data:adEnd/>
        <data:adCode/>
        <data:adStart/>
      </b:if>
    </b:loop>
    <data:adEnd/>
  </div>

  <b:include name='nextprev'/>

<b:include name='feedLinks'/>
  
  <b:if cond='data:top.showStars'>
    <script src='http://www.google.com/jsapi' type='text/javascript'/>
    <script type='text/javascript'>
      google.load("annotations", "1", {"locale": "<data:top.languageCode/>"});
      function initialize() {
        google.annotations.setApplicationId(<data:top.blogspotReviews/>);
        google.annotations.createAll();
        google.annotations.fetch();
      }
      google.setOnLoadCallback(initialize);
    </script>
  </b:if>

</b:includable>
            <b:includable id='backlinkDeleteIcon' var='backlink'>
  <span expr:class='"item-control " + data:backlink.adminClass'>
    <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
      <img src='http://www.blogger.com/img/icon_delete13.gif'/>
    </a>
  </span>
</b:includable>
            <b:includable id='backlinks' var='post'>
  <a name='links'/><h4>
<data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
      <b:loop values='data:post.backlinks' var='backlink'>
        <div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
            <span class='backlink-toggle-zippy'> </span>
            <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
            <b:include data='backlink' name='backlinkDeleteIcon'/>
          </dt>
<dd class='comment-body collapseable'>
            <data:backlink.snippet/>
          </dd>
          <dd class='comment-footer collapseable'>
            <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
            <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
          </dd>
        </div>
</b:loop>
    </dl>
</b:if>
  <p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
  </p>
</b:includable>
            <b:includable id='comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'>
<data:postCommentMsg/></h4>
<p>
<data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
    <data:post.iframeColorizer/>
  </div>
</b:includable>
            <b:includable id='commentDeleteIcon' var='comment'>
  <span expr:class='"item-control " + data:comment.adminClass'>
    <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
      <img src='http://www.blogger.com/img/icon_delete13.gif'/>
    </a>
  </span>
</b:includable>
            <b:includable id='comment_count_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
    </span>
  <b:else/>
    <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
      <data:post.commentLabelFull/>:
    </a>
  </b:if>
</b:includable>
            <b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
  <b:else/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:if>
</b:includable>
            <b:includable id='comments' var='post'>

<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

<b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> on                 <data:comment.timestamp/>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
<dd class='comment-body'>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p>
<data:comment.body/></p>
</b:if>
          </dd>

<b:include data='post' name='comment-form'/>
        <b:else/>
          <b:if cond='data:post.allowComments'>
            <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
          </b:if>
        </b:if>

</p>
</b:if>

<b:else/>

<div class='post-feeds'>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.allowComments'>
          <b:if cond='data:post.feedLinks'>
            <b:include data='post.feedLinks' name='feedLinksBody'/>
          </b:if>
        </b:if>
      </b:loop>
    </div>
</b:if>
</b:includable>
            <b:includable id='feedLinksBody' var='links'>
  <div class='feed-links'>
  <data:feedLinksMsg/>
  <b:loop values='data:links' var='f'>
     <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  </b:loop>
  </div>
</b:includable>
            <b:includable id='iframe_comments' var='post'>

<b:if cond='data:post.allowIframeComments'>
    <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
    <div class='cmt_iframe_holder' expr:data-href='data:post.canonicalUrl' expr:data-viewtype='data:post.viewType'/>

<b:if cond='data:post.embedCommentForm == "false"'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>
</b:includable>
            <b:includable id='mobile-index-post' var='post'>
  <div class='mobile-date-outer date-outer'>
    <b:if cond='data:post.dateHeader'>
      <div class='date-header'>
        <span><data:post.dateHeader/></span>
      </div>
</b:if>

<b:include data='top' name='status-message'/>

<b:if cond='data:blog.pageType == "index"'>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-index-post'/>
        </b:loop>
      <b:else/>
        <b:loop values='data:posts' var='post'>
          <b:include data='post' name='mobile-post'/>
        </b:loop>
      </b:if>
    </div>
<b:include name='mobile-nextprev'/>
</b:includable>
            <b:includable id='mobile-nextprev'>
  <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <div class='mobile-link-button' id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'>‹</a>
      </div>
</b:if>

<b:if cond='data:olderPageUrl'>
      <div class='mobile-link-button' id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'>›</a>
      </div>
</b:if>

<b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
      </span>
    </b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>

</div>
<div class='clear'/>
</b:includable>
            <b:includable id='post' var='post'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
        <b:if cond='data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
     </b:if>
      </h3>
</b:if>

</div>
<div class='post-body entry-content'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
      <div style='clear: both;'/>
 
<span class='post-labels' style='float:left;padding-top:0px;'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
          </b:loop>
        </b:if>
      </span>

<b:include data='post' name='postQuickEdit'/>
      </span>

    </div>
<div class='post-footer'>

<div class='post-footer-line post-footer-line-3'/>
    </div>
</div>
</b:includable>
            <b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='"item-control " + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>
            <b:includable id='shareButtons' var='post'>
  <b:if cond='data:top.showEmailButton'><a class='goog-inline-block share-button sb-email' expr:href='data:post.sharePostUrl + "&target=email"' expr:title='data:top.emailThisMsg' target='_blank'><span class='share-button-link-text'><data:top.emailThisMsg/></span></a></b:if><b:if cond='data:top.showBlogThisButton'><a class='goog-inline-block share-button sb-blog' expr:href='data:post.sharePostUrl + "&target=blog"' expr:onclick='"window.open(this.href, \"_blank\", \"height=270,width=475\"); return false;"' expr:title='data:top.blogThisMsg' target='_blank'><span class='share-button-link-text'><data:top.blogThisMsg/></span></a></b:if><b:if cond='data:top.showTwitterButton'><a class='goog-inline-block share-button sb-twitter' expr:href='data:post.sharePostUrl + "&target=twitter"' expr:title='data:top.shareToTwitterMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToTwitterMsg/></span></a></b:if><b:if cond='data:top.showFacebookButton'><a class='goog-inline-block share-button sb-facebook' expr:href='data:post.sharePostUrl + "&target=facebook"' expr:onclick='"window.open(this.href, \"_blank\", \"height=430,width=640\"); return false;"' expr:title='data:top.shareToFacebookMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToFacebookMsg/></span></a></b:if><b:if cond='data:top.showOrkutButton'><a class='goog-inline-block share-button sb-orkut' expr:href='data:post.sharePostUrl + "&target=orkut"' expr:title='data:top.shareToOrkutMsg' target='_blank'><span class='share-button-link-text'><data:top.shareToOrkutMsg/></span></a></b:if><b:if cond='data:top.showDummy'><div class='goog-inline-block dummy-container'>
<data:post.dummyTag/></div>
</b:if>
</b:includable>
            <b:includable id='status-message'>
  <b:if cond='data:navMessage'>
  <div class='status-msg-wrap'>
    <div class='status-msg-body'>
      <data:navMessage/>
    </div>
<div class='status-msg-border'>
      <div class='status-msg-bg'>
        <div class='status-msg-hidden'>
<data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
  </b:if>
</b:includable>
            <b:includable id='threaded-comment-form' var='post'>
  <div class='comment-form'>
    <a name='comment-form'/>
    <b:if cond='data:mobile'>
      <p>
<data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
    <b:else/>
      <p>
<data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
      <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
      <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
    </b:if>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
    </script>
  </div>
</b:includable>
            <b:includable id='threaded_comment_js' var='post'>
  <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

// <![CDATA[
      var cursor = null;
      if (items && items.length > 0) {
        cursor = parseInt(items[items.length - 1].timestamp) + 1;
      }

var bodyFromEntry = function(entry) {
        if (entry.gd$extendedProperty) {
          for (var k in entry.gd$extendedProperty) {
            if (entry.gd$extendedProperty[k].name == 'blogger.contentRemoved') {
              return '<span class="deleted-comment">' + entry.content.$t + '</span>';
            }
          }
        }
        return entry.content.$t;
      }

var replybox = null;
      var replyUrlParts = null;
      var replyParent = undefined;

var hash = (window.location.hash || '#').substring(1);
      var startThread, targetComment;
      if (/^comment-form_/.test(hash)) {
        startThread = hash.substring('comment-form_'.length);
      } else if (/^c[0-9]+$/.test(hash)) {
        targetComment = hash.substring(1);
      }

// Configure commenting API:
      var configJso = {
        'maxDepth': config.maxThreadDepth
      };
      var provider = {
        'id': config.postId,
        'data': items,
        'loadNext': paginator,
        'hasMore': hasMore,
        'getMeta': getMeta,
        'onReply': onReply,
        'rendered': true,
        'initComment': targetComment,
        'initReplyThread': startThread,
        'config': configJso,
        'messages': msgs
      };

var render = function() {
        if (window.goog && window.goog.comments) {
          var holder = document.getElementById('comment-holder');
          window.goog.comments.render(holder, provider);
        }
      };

// render now, or queue to render when library loads:
      if (window.goog && window.goog.comments) {
        render();
      } else {
        window.goog = window.goog || {};
        window.goog.comments = window.goog.comments || {};
        window.goog.comments.loadQueue = window.goog.comments.loadQueue || [];
        window.goog.comments.loadQueue.push(render);
      }
    })();
// ]]>
  </script>
</b:includable>
            <b:includable id='threaded_comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <h4>
<data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
      <b:if cond='data:post.embedCommentForm'>
        <b:include data='post' name='threaded_comment_js'/>
      </b:if>
      <div id='comment-holder'>
         <data:post.commentHtml/>
      </div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
        <b:include data='post' name='threaded-comment-form'/>
      <b:else/>
        <data:post.noNewCommentsText/>
      </b:if>
    </p>
<b:if cond='data:showCmtPopup'>
      <div id='comment-popup'>
        <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
        </iframe>
      </div>
</b:if>

<b:if cond='data:photo.url != ""'>
        <a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
      </b:if>
<dl class='profile-datablock'>
<dt class='profile-data'><data:displayname/></dt>
<b:if cond='data:showlocation == "true"'>
          <dd class='profile-data'><data:location/></dd>
        </b:if>

<b:if cond='data:aboutme != ""'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
      </dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
    </b:if>

<b:include name='quickedit'/>
    </div>
</b:includable>
  </b:widget>
  <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>
    <b:includable id='main'><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
      if(window.addEventListener) {
        window.addEventListener('load',
          function(){ object[attribute] = val; }, false);
      } else {
        window.attachEvent('onload', function(){ object[attribute] = val; });
      }
    }
  </script>
<div id="navbar-iframe-container">
</div>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">
        gapi.load("iframes-styles-bubble", function() {
          if (window.iframes && iframes.open) {
            iframes.open(
                '//www.blogger.com/navbar.g?targetBlogID\0757130341979434513021\46blogName\75testing\46publishMode\75PUBLISH_MODE_BLOGSPOT\46navbarType\75DISABLED\46layoutType\75LAYOUTS\46searchRoot\75http://initesti.blogspot.com/search\46blogLocale\75in\46v\0752\46homepageUrl\75http://initesti.blogspot.com/\46vt\0751295920875811085732',
                {
                  container: "navbar-iframe-container",
                  id: "navbar-iframe"
                },
                {
                });
          }
        });
      </script><script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
</b:includable>
  </b:widget>
  <b:widget id='Feed1' locked='false' title='Recent Posts' type='Feed'>
    <b:includable id='main'>
    <h2>
<data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + "_feedItemListDisplay"'>
      <span style='filter: alpha(25); opacity: 0.25;'>
        <a expr:href='data:feedUrl'><data:loadingMsg/></a>
      </span>
    </div>
<b:include name='quickedit'/>
  </b:includable>
  </b:widget>
</b:section>
</div>

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

<div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + "_container"'>
        <ul expr:id='data:widget.instanceId + "_blogs"'>
          <b:loop values='data:items' var='item'>
<li expr:style='data:item.displayStyle'>
              <div class='blog-icon'>
                <b:if cond='data:showIcon == "true"'>
                  <input expr:value='data:item.blogIconUrl' type='hidden'/>
                </b:if>
              </div>
<div class='blog-content'>
                <div class='blog-title'>
                  <a expr:href='data:item.blogUrl' target='_blank'>
                    <data:item.blogTitle/></a>
                </div>
<div class='item-content'>
                  <b:if cond='data:showItemThumbnail == "true"'>
                    <b:if cond='data:item.itemThumbnail'> 
                      <div class='item-thumbnail'>
                        <a expr:href='data:item.blogUrl' target='_blank'>
                          <img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
                        </a>
                      </div>
</b:if>
                  </b:if>
                  <b:if cond='data:showItemTitle == "true"'>
                    <span class='item-title'>
                      <b:if cond='data:item.itemUrl != ""'>
                        <a expr:href='data:item.itemUrl' target='_blank'>
                          <data:item.itemTitle/></a>
                      <b:else/>
                        <data:item.itemTitle/>
                      </b:if>
                    </span>
                  </b:if>
                  <b:if cond='data:showItemSnippet == "true"'> 
                    <b:if cond='data:showItemTitle == "true"'>
                      -
                    </b:if>
                    <span class='item-snippet'>
                      <data:item.itemSnippet/>
                    </span>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate == "true"'>
                    <div class='item-time'>
                      <data:item.timePeriodSinceLastUpdate/>
                    </div>
</b:if>
                </div>
</div>
<div style='clear: both;'/>
            </li>
</b:loop>
        </ul>
<b:if cond='data:numItemsToShow != 0'>
          <b:if cond='data:totalItems > data:numItemsToShow'>
            <div class='show-option'>
              <span expr:id='data:widget.instanceId + "_show-n"' style='display: none;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
              </span>
              <span expr:id='data:widget.instanceId + "_show-all"' style='margin-left: 5px;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
              </span>
            </div>
</b:if>
        </b:if>
</div>
<b:include name='quickedit'/>
      </div>
</b:includable>
  </b:widget>
</b:section>
</div>
</div>

<div id='footer-wrapper'>
      Copyright © 2009  She's a Lady by Ipietoon <a href='http://www.ipietoon.com'>Blogger Template</a> Vector by <a href='http://dapinographics.com/'>DaPino</a>
    </div>
</div>

</div>
</div>

Ada cara yang lebih mudah dengan sedikit kode CSS. Tetapi sebelumnya cari dulu gambar yang sesuai dengan selera kita. Bisa pula menggunakan foto diri kita sendiri kalau memang ingin kelihatan lebih personal lagi dan tak akan ada yang menyamainya. Khusus untuk foto diri sendiri ambillah gambar kita secara utuh dalam posisi berdiri dan hilangkan semua gambar latar di foto tersebut sehingga tidak membuat foto tersebut sulit menyatu dengan template blog kita. Gambar tidak perlu terlalu besar.

Setelah itu untuk memberikan gambar di bagian kiri blog dan gambar tersebut akan tetap berada di sana meskipun blog discroll ke bawah bisa menggunakan kode CSS berikut ini.

Catatan: apabila ukuran foto sulit disesuaikan dengan template atau foto tidak terlihat secara utuh silakan edit foto dengan ukuran 273x550 untuk hasil yang lebih baik.

Ini hasilnya.

Rohani Syawaliah's Wishes

Cari Blog Ini

Gambar yang Sesuai Untuk Left Sidebar Wrapper

Label

Postingan populer dari blog ini

Video dan Lirik Lagu Kamil Onte ft taZki Acapella - Yok Idop Sehat

Hati-Hati Belanja di Tokopedia Pakai AnterAja

Gokusen: Yankumi, Cucu Yakuza yang Impiannya Menjadi Guru