/*CSS Sitemap ---- http://adityava.blogspot.com/ */
#tabbed-toc{margin:0 auto;background-color:#fff;-webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);-moz-box-shadow:0 1px 3px rgba(0,0,0,.4);box-shadow:0 1px 3px rgba(0,0,0,.4);overflow:hidden;position:relative;color:#FC7569}
#tabbed-toc .loading{display:block;padding:5px 10px;font:normal bold 12px Tahoma,Sans-Serif;color:#F53B3B}
#tabbed-toc ul,#tabbed-toc ol,#tabbed-toc li{margin:0 0;padding:0 0;list-style:none}
#tabbed-toc .toc-tabs{width:20%;float:left}
#tabbed-toc .toc-tabs li a{display:block;font:normal bold 10px/28px Tahoma,Sans-Serif;height:28px;overflow:hidden;text-overflow:ellipsis;color:#FC7569;text-transform:uppercase;text-decoration:none;padding:0 12px;cursor:pointer}
#tabbed-toc .toc-tabs li a:hover{background-color:#fff;color:black}
#tabbed-toc .toc-tabs li a.active-tab{background-color:#F53B3B;color:white;-webkit-box-shadow:-2px 2px 2px rgba(0,0,0,.5);-moz-box-shadow:-2px 2px 2px rgba(0,0,0,.5);box-shadow:-2px 2px 2px rgba(0,0,0,.5);position:relative;z-index:5;margin:0 -1px 0 0;/* cursor:text;*/}
#tabbed-toc .toc-content,#tabbed-toc .divider-layer{width:80%;float:right;background-color:white;border-left:5px solid #F53B3B;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
#tabbed-toc .divider-layer{float:none;display:block;position:absolute;top:0;right:0;bottom:0;-webkit-box-shadow:0 0 7px rgba(0,0,0,.7);-moz-box-shadow:0 0 7px rgba(0,0,0,.7);box-shadow:0 0 7px rgba(0,0,0,.7)}
#tabbed-toc .panel{position:relative;z-index:5;font:normal normal 10px Tahoma,Sans-Serif}
#tabbed-toc .panel li a{display:block;position:relative;font-weight:bold;font-size:11px;color:#2d2d2d;line-height:20px;height:20px;padding:0 12px;text-decoration:none;outline:none;overflow:hidden}
#tabbed-toc .panel li time{display:block;font-style:italic;font-weight:normal;font-size:10px;color:#666;float:right}
#tabbed-toc .panel li .summary{display:block;padding:10px 12px 10px;font-style:italic;border-bottom:4px solid #275827;overflow:hidden}
#tabbed-toc .panel li .summary img.thumbnail{float:left;display:block;margin:0 8px 0 0;padding:4px 4px;width:72px;height:72px;border:1px solid #dcdcdc;background-color:#fafafa}
#tabbed-toc .panel li:nth-child(even){background-color:#fff}
#tabbed-toc .panel li a:hover,#tabbed-toc .panel li a:focus,#tabbed-toc .panel li a:hover time,#tabbed-toc .panel li.bold a{background-color:#F9F9F9;color:#FC7569;outline:none}
#tabbed-toc .panel li.bold a:hover,#tabbed-toc .panel li.bold a:hover time{background-color:#222} <div id="tabbed-toc">
<span class="loading">Loading Sitemap .. Please Wait.. :)</span></div>
<script type="text/javascript">
var tabbedTOC = {
blogUrl: "http://adityava.blogspot.com/",
containerId: "tabbed-toc",
activeTab: 1,
showDates: false,
showSummaries: false,
numChars: 200,
showThumbnails: true,
showNew: 15,
newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#FC7569;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
monthNames: [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
newTabLink: true,
maxResults: 99999,
preload: 0 // Load the feed after 0 seconds (option => time in milliseconds || "onload")
};
</script>
<script src="https://googledrive.com/host/0B9aCNMbcS5BlVVpSMnlsN2FvTjA" type="text/javascript"></script> 
<style type="text/css">
.cm-person{margin:3px;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px; border: 1px solid #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}
.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}
.cm-person a.profile-name-link.item1{background-color:#BC0000}
.cm-person a.profile-name-link.item2{background-color:#1A00CE}
.cm-person a.profile-name-link.item3{background-color:#39A003}
.cm-person a.profile-name-link.item4{background-color:#8B039D}
.cm-person a.profile-name-link.item5{background-color:#F0C100}
.cm-person a.profile-name-link.item6{background-color:#00D1CB}
.cm-person a.profile-name-link.item7{background-color:#FFEA03}
.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}
.cm-person:hover{color: #FFF;background-color:#111}
.cm-person:hover a.profile-name-link{display:block}
</style> <script type="text/javascript">
//<![CDATA[
var homepage = 'http://adityava.blogspot.com/',
maxTopCommenters = 30,
minComments = 1,
numDays = 0,
excludeMe = true,
excludeUsers = ["Anonymous", "aditya va"],
maxUserNameLength = 42,
txtTopLine = '[image] [user]',
txtNoTopCommenters = 'No top commentators at this time.',
txtAnonymous = '',
sizeAvatar = 80,
cropAvatar = true,
urlNoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOr3PE9xl17_uj1WLiUuIhJgzzBCUnS0VsUbJmeK6PP8udhJKWDEOAk9v8Dk5IdJ8-I6ECJLb6Iqp3lT0zhLvmhZhpj8OipHi9-_tlzpLORZfsaupdWblg94VeeL8uaaUS8E2ZjImz0lg/' + sizeAvatar + '/avatar_blue_m_96.png',
urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,
urlMyProfile = '',
urlMyAvatar = '';
if (!Array.indexOf) {
Array.prototype.indexOf = function (obj) {
for (var i = 0; i < this.length; i++) if (this[i] == obj) return i;
return -1
}
}
function replaceTopCmtVars(text, item, position) {
if (!item || !item.author) return text;
var author = item.author;
var authorUri = "";
if (author.uri && author.uri.$t != "") authorUri = author.uri.$t;
var avaimg = urlAnoAvatar;
var bloggerprofile = "http://www.blogger.com/profile/";
if (author.gd$image && author.gd$image.src && authorUri.substr(0, bloggerprofile.length) == bloggerprofile) {
avaimg = author.gd$image.src
} else {
var parseurl = document.createElement('a');
if (authorUri != "") {
parseurl.href = authorUri;
avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname
}
}
if (urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar;
if (avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar;
var newsize = "s" + sizeAvatar;
avaimg = avaimg.replace(/\/s\d\d+-c\//, "/" + newsize + "-c/");
if (cropAvatar) newsize += "-c";
avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/" + newsize + "/");
var authorName = author.name.$t;
if (authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous;
var imgcode = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" src="' + avaimg + '" />';
if (authorUri != "") imgcode = '<a href="' + authorUri + '">' + imgcode + '</a>';
if (maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength - 3) + "...";
var authorcode = authorName;
if (authorUri != "") authorcode = '<a class="profile-name-link item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';
text = text.replace('[user]', authorcode);
text = text.replace('[image]', imgcode);
text = text.replace('[count]', item.count);
return text
}
var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
var one_day = 1000 * 60 * 60 * 24;
var today = new Date();
if (urlMyProfile == "") {
var elements = document.getElementsByTagName("*");
var expr = /(^| )profile-link( |$)/;
for (var i = 0; i < elements.length; i++) if (expr.test(elements[i].className)) {
urlMyProfile = elements[i].href;
break
}
}
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
if (numDays > 0) {
var datePart = entry.published.$t.match(/\d+/g);
var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);
var days = Math.ceil((today.getTime() - cmtDate.getTime()) / (one_day));
if (days > numDays) break
}
var authorUri = "";
if (entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t;
if (excludeMe && authorUri != "" && authorUri == urlMyProfile) continue;
var authorName = entry.author[0].name.$t;
if (excludeUsers.indexOf(authorName) != -1) continue;
var hash = entry.author[0].name.$t + "-" + authorUri;
if (topcommenters[hash]) topcommenters[hash].count++;
else {
var commenter = new Object();
commenter.author = entry.author[0];
commenter.count = 1;
topcommenters[hash] = commenter
}
}
if (json.feed.entry.length > 200) {
ndxbase += 200;
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
return
}
var tuplear = [];
for (var key in topcommenters) tuplear.push([key, topcommenters[key]]);
tuplear.sort(function (a, b) {
if (b[1].count - a[1].count) return b[1].count - a[1].count;
return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1
});
var realcount = 0;
for (var i = 0; i < maxTopCommenters && i < tuplear.length; i++) {
var item = tuplear[i][1];
if (item.count < minComments) break;
document.write(replaceTopCmtVars(txtTopLine, item, realcount + 1));
realcount++
}
if (!realcount) document.write(txtNoTopCommenters)
}
document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');
//]]>
</script> 
#adminblog{background: #F4836A;color: #fff!important;width:60px;border:none;font-size: 14px;font-family:Arial;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 0;position:absolute;top:10px;left:10px;transition:all .4s ease-in-out;}
#layoutlogin{background:#000;opacity:.7;position:absolute;top:0;left:0;right:0;bottom:0;z-index:99999;display:none}
#login{position:absolute;width:222px;height:auto;top:30%;left:50%;margin-left:-111px;font-family:Arial;z-index:100000;display:none}
#loginbox{background:#fff;width:200px;padding:10px;display:none;position:absolute;top:62px;left:0;border:1px solid #ddd;border-radius: 2px;z-index:1;overflow:hidden;}
#loginbox .emaillogin input.email {color: #777;padding: 10px;font-size: 14px;font-family:Arial;width:89%;border:1px solid #ddd;border-radius: 2px;}
#loginbox .emaillogin input:focus {outline: none;}
#loginbox .emaillogin input.signin-btn{background: #F4836A;color: #fff!important;border:none;outline: none;width:100%;font-size: 14px;font-family:Arial;cursor:pointer;border-radius: 2px;margin-top: 10px;padding: 11px;}
#login1,#login2{color: #777;padding:5px 10px;font-size: 14px;font-family:Arial;width:38%;display:none;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:38px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
#login2{border-bottom:none;z-index:2}
#Admin1,#Admin2{color: #777;padding:5px 0;font-size: 14px;font-family:Arial;width:100%;text-align:center;background:#fff;border:1px solid #ddd;border-radius: 2px;position:absolute;top:0px;left:0px;cursor:pointer;transition:all .4s ease-in-out;}
.logout{background: #F4836A;color: #fff!important;width:38%;font-size: 14px;font-family:Arial;cursor:pointer;text-align:center;border:1px solid #e66f55;border-radius: 2px;padding:5px 10px;position:absolute;top:38px;right:-1px;transition:all .4s ease-in-out;}
a.logout{text-decoration:none}
#Admin1:hover,#login1:hover{background:#eee}
.logout:hover,#adminblog:hover{background:#d56148} <div id="adminblog" onclick="document.getElementById('login').style.display='block';layoutlogin.style.display='block';adminblog.style.display='none';">Admin</div>
<div id='login'>
<div id="Admin1" onclick="document.getElementById('login1').style.display='inline';logoutbox.style.display='inline';Admin1.style.display='none';Admin2.style.display='inline';">Silahkan Pilih</div>
<div id="Admin2" style="display:none" onclick="document.getElementById('login1').style.display='none';logoutbox.style.display='none';Admin1.style.display='inline';Admin2.style.display='none';">Silahkan Pilih</div>
<div id='login1' onclick="document.getElementById('loginbox').style.display='block';login1.style.display='none';login2.style.display='inline';logoutbox.style.display='none';">Login</div>
<div id='login2' style="display:none" onclick="document.getElementById('loginbox').style.display='none';login1.style.display='inline';login2.style.display='none';logoutbox.style.display='inline';">Login</div>
<div id='loginbox'>
<div class='emaillogin'>
<form action="https://accounts.google.com/ServiceLogin?service=blogger&continue=https://www.blogger.com/home&followup=https://www.blogger.com/home" method="post" target="_blank" onsubmit="onlogin()">
<input class="email" value="Username" name="Email" onblur='if (this.value == "") {this.value = "Username";}' onfocus='if (this.value == "Username") {this.value = "";}' type="text" />
<input class="signin-btn" value="Sign In" name="submit" type="submit" onclick="document.getElementById('login').style.display='none';layoutlogin.style.display='none';adminblog.style.display='block';"/>
</form>
</div>
</div>
<div id='logoutbox' style="display:none">
<a class='logout' href="https://accounts.google.com/Logout?service=blogger" target="_blank" onclick="document.getElementById('login').style.display='none';layoutlogin.style.display='none';adminblog.style.display='block';">Logout
</a>
</div>
</div>
<div style="clear:both"></div>
<div id="layoutlogin"></div> 
<script type='text/javascript'>
//<![CDATA[
var Nanobar=function(){var c,d,e,f,g,h,k={width:"100%",height:"2px",zIndex:9999,top:"0"},l={width:0,height:"100%",clear:"both",transition:"height .3s"};c=function(a,b){for(var c in b)a.style[c]=b[c];a.style["float"]="left"};f=function(){var a=this,b=this.width-this.here;0.1>b&&-0.1<b?(g.call(this,this.here),this.moving=!1,100==this.width&&(this.el.style.height=0,setTimeout(function(){a.cont.el.removeChild(a.el)},100))):(g.call(this,this.width-b/4),setTimeout(function(){a.go()},16))};g=function(a){this.width=
a;this.el.style.width=this.width+"%"};h=function(){var a=new d(this);this.bars.unshift(a)};d=function(a){this.el=document.createElement("div");this.el.style.backgroundColor=a.opts.bg;this.here=this.width=0;this.moving=!1;this.cont=a;c(this.el,l);a.el.appendChild(this.el)};d.prototype.go=function(a){a?(this.here=a,this.moving||(this.moving=!0,f.call(this))):this.moving&&f.call(this)};e=function(a){a=this.opts=a||{};var b;a.bg=a.bg||"#db3131";this.bars=[];b=this.el=document.createElement("div");c(this.el,
k);a.id&&(b.id=a.id);b.style.position=a.target?"relative":"fixed";a.target?a.target.insertBefore(b,a.target.firstChild):document.getElementsByTagName("body")[0].appendChild(b);h.call(this)};e.prototype.go=function(a){this.bars[0].go(a);100==a&&h.call(this)};return e}();
var nanobar = new Nanobar();nanobar.go(30);nanobar.go(60);nanobar.go(100);
//]]>
</script> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/><script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>Tentunya Anda sudah tidak asing lagi dengan template Pakdhe Johny buatan Maskolis kan? Yup... sebuah template Blogger dengan fitur‐fitur yang menarik yang patut Anda coba. Pada template tersebut terdapat tombol follow social media di sisi kanan blog yang cukup menarik yang di susun dengan css dan jquery dengan menggunakan css sprite untuk image/icon sosial medianya. Ketika Anda meng‐hover‐nya, maka tombolnya akan keluar (slide out) dan akan ada efek memantul (bounce) diakhirnya, begitu pun ketika dilepas. Cukup menarik bukan? Nah kali ini saya akan sharing cara membuat sosial media seperti pada template Pakdhe Johny tersebut namun dengan css dan jquery yang berbeda tetapi tetap menghasilk
.socialbox{
position:fixed;
top:100px;
right:-286px;
height:250px;
width:285px;
background:#efefef;
border:1px solid #bbb;
border-right:0;
transition:all 400ms ease-in-out;
border-radius:0 0 0 3px;
}
.fbicon-box{
width:30px;
height:35px;
position:absolute;
top:-1px;
left:-30px;
background:#405D9B;
border-radius:3px 0 0 3px;
color:#fff;
font-family:Arial;
font-size:30px;
font-weight:700;
text-align:center;
padding-top:2px;
}
.socialbox:hover{
right:0;
z-index:2;
}
.socialbox2{
position:fixed;
top:145px;
right:-279px;
height:230px;
width:258px;
background:#efefef;
border:1px solid #bbb;
border-right:0;
transition:all 400ms ease-in-out;
border-radius:0 0 0 3px;
padding:10px;
}
.gpicon-box{
width:30px;
height:32px;
position:absolute;
top:-1px;
left:-30px;
background:#DD4B39;
border-radius:3px 0 0 3px;
color:#fff;
font-family:Georgia;
font-size:20px;
font-weight:700;
text-align:center;
padding-top:5px;
}
.socialbox2:hover, .socialbox2:active{
right:0;
} <div class="socialbox">
<div class="fbicon-box">f</div>
<div class="fb-like-box" data-href="https://www.facebook.com/troublemaker" data-width="300" data-height="240" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
</div>
<div class="socialbox2">
<div class="gpicon-box">g+</div>
<div class="g-plus" data-action="followers" data-height="240" data-href="https://plus.google.com/+Raditya_ID" data-source="blogger:blog:followers" data-width="260"></div>
</div> <div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;js.async=true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script> <script type='text/javascript'>
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script> <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>Lihat Demo :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
Maka Anda cukup merubah angka 4.3.0 menjadi 4.4.0 pada script di atas, sehingga menjadi seperti berikut ini.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form'>
<div id='form-wrapper'>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:else/>
<div id='threaded-comment-form'>
<p><data:blogCommentMessage/>
<span class='small-button'>
<span id='show-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='inline-block';document.getElementById('hide-konversi').style.display='inline-block';document.getElementById('show-konversi').style.display='none'' title='Show Conversion Box'>Conversion</a></span><span id='hide-konversi'><a class='konversi-button' href='javascript:void(0)' onclick='document.getElementById('konversi-box').style.display='none';document.getElementById('hide-konversi').style.display='none';document.getElementById('show-konversi').style.display='inline-block'' title='Hide Conversion Box'>Conversion</a></span>
</span>
<span class='small-button1'>
<span id='show-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='inline-block';document.getElementById('hide-emo').style.display='inline-block';document.getElementById('show-emo').style.display='none'' title='Show Emoticon'>Emoticon</a></span><span id='hide-emo'><a class='emo-button' href='javascript:void(0)' onclick='document.getElementById('emo-box').style.display='none';document.getElementById('hide-emo').style.display='none';document.getElementById('show-emo').style.display='inline-block'' title='Hide Emoticon'>Emoticon</a></span>
</span>
</p>
<div id='konversi-box'>
<textarea id='codes' placeholder='Write/paste the code here then click 'Conversion'' spellcheck='false'/>
<div class='button-group'>
<button id='cvrt' onclick='cdConvert();this.disabled = true;'>Conversion</button>
<button onclick='cdClear();'>Clean</button>
</div>
<span class='checkbox'>
<input checked='true' id='opt1' type='checkbox'/>Konversi <code>&</code><br/>
<input id='opt2' type='checkbox'/>Konversi <code>'</code><br/>
<input id='opt3' type='checkbox'/>Konversi <code>"</code><br/>
<input checked='true' id='opt4' type='checkbox'/>Konversi <code><</code><br/>
<input checked='true' id='opt5' type='checkbox'/>Konversi <code>></code>
<script type='text/javascript'>
//<![CDATA[
function cdClear() {
var wtarea = document.getElementById('codes');
wtarea.value = '';
wtarea.focus();
document.getElementById('cvrt').disabled = false;
}
function cdConvert() {
var ctarea = document.getElementById('codes'),
cv = ctarea.value,
opt1 = document.getElementById('opt1'),
opt2 = document.getElementById('opt2'),
opt3 = document.getElementById('opt3'),
opt4 = document.getElementById('opt4'),
opt5 = document.getElementById('opt5');
cv = cv.replace(/\t/g, " ");
if (opt1.checked) cv = cv.replace(/&/g, "&");
if (opt2.checked) cv = cv.replace(/'/g, "'");
if (opt3.checked) cv = cv.replace(/"/g, """);
if (opt4.checked) cv = cv.replace(/</g, "<");
if (opt5.checked) cv = cv.replace(/>/g, ">");
if (cv.lastIndexOf('\n') != -1 || cv.length > 40) {
cv = cv.replace(/^/, "<i rel=\"pre\">");
} else {
cv = cv.replace(/^/, "<i rel=\"code\">");
}
cv = cv.replace(/$/, "</i>");
ctarea.value = cv;
ctarea.focus();
ctarea.select();
};
//]]>
</script>
</span>
</div>
</div>
<div id='emo-box'>
<div class='comment_emo_list'/>
</div>
<data:blogTeamBlogMessage/>
<b:if cond='data:blog.pageType == "static_page"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;pageID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<a expr:href='"http://www.blogger.com/comment-iframe.g?blogID=" + data:blog.blogId + "&amp;postID=" + data:post.id' id='comment-editor-src' title='comment editor'/>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>
</b:if>
</b:if>
</div>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable> /* CSS Small Button Forum Komentar */
#konversi-box, #hide-konversi,#emo-box,#hide-emo {display:none}
#konversi-box {width:100%;color:#eee;background:none;line-height:1.6em;margin-bottom:20px;padding:0;text-align:left;}
.checkbox{font:11px
Tahoma,Verdana,Arial,Sans-Serif;line-height:1.6em;color:#eee;}
#codes{border:none;width:100%;height:200px;display:block;background-color:#333;color:#aaa;font:normal
12px 'Courier New',Monospace;margin:7px 0
10px;padding:8px;box-shadow:inset 0 0 0 1px #ddd;transition:all 0.5s
linear;}
#codes:focus{background-color:#303030;color:#aaa;border:none;outline:none;transition:all
0.3s linear;}
.button-group{float:right;text-align:left;margin:0 auto}
button,button[disabled]:active{border:none;font-size:12px;font-family:'Open
Sans';font-weight:400;padding:4px
10px;text-decoration:none;background:#eee;color:#aaa;display:inline-block;transition:initial;cursor:pointer;border:0;}
button:hover{background:#aaa;color:#fff;}
button:active{background:#aaa;color:#fff;}
button[disabled],button[disabled]:active{color:#fff;cursor:default}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;vertical-align:middle;border:none;outline:none;margin:0
10px 0 0}
.small-button a,.small-button1 a {font-size:12px;font-family:'Open
Sans';cursor:pointer;font-weight:700;margin:10px 5px 5px
0;text-decoration:none;text-transform:none;text-shadow:none;display:inline-block;color:#fff;padding:4px
10px;cursor:pointer;border-radius:2px;transition: all 0.3s ease-out;}
.small-button a {background-color:#aaa;transition: all 0.3s ease-out;}
.small-button1 a {background-color:#f48878;transition: all 0.3s ease-out;}
.small-button:hover a {background-color:#888;color:#fff;}
.small-button1:hover a {background-color:#f56954;color:#fff;}
span.small-button,span.small-button1 {text-align:left;display:inline-block;} 
<style scoped="" type="text/css">
#post-wrapper {width:100%;}
#sidebar-wrapper {display:none;}
</style> /* CSS Post Wrapper */
#post-wrapper {background:transparent;color:#444;float:left;width:68%;max-width:768px
.post-inner {padding:15px 0 0 0;}
.breadcrumbs {background:#fff;font-size:100%;height:45px;overflow:hidden;padding:0;border:1px solid #e6e6e6;border-bottom:none;}
.breadcrumbs > span {padding:0;}
.breadcrumbs > span:last-child {background:#fdfdfd;color:#666;border-right:none;font-family:'Open Sans';font-size:13px;font-weight:300;padding:10px;line-height:30px;}
.breadcrumbs a {background:#fdfdfd;color:#666;font-family:'Open Sans';font-size:13px;
font-weight:normal;line-height:45px;}
.breadcrumbs span a {color:#666;padding:10px;}
.breadcrumbs span:first-child a{background:#fdfdfd;color:#666;margin-left:15px;}
.breadcrumbs span a:hover {color:#7fa8f0;}
.breadcrumbs a:hover {color:#7fa8f0;}
.post {background:#fff;margin:0;padding:20px;border:1px solid #e6e6e6;}
.post-body {line-height:1.6em;color:#444;margin-top:15px;font-size:14px;}
.post-body img {max-width:95%;margin:0 auto;height:auto;}
h3.post-title, h2.post-title, h1.post-title {font-family:'Open Sans',sans-serif;font-size:18px;font-weight:400;text-align:center;padding:15px;}
h3.post-title a, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {color:#999;}
h3.post-title a:hover, h2.post-title a:hover, h1.post-title a:hover {color:#fe3434!important;}
... #post-wrapper {background:transparent;color:#444;float:left;width:68%;max-width:auto;margin:0 0 10px;} 
