<div class='comments' id='comments'>
<div
class='comments-tab' id='fb-comments'
onclick='javascript:commentToggle("#fb-comments");'
title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
.comments-page { background-color: #f2f2f2;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
}
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='cahdonorejo' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
</head>
Jika sobat sudah menemukannya,tepat diATASnya letakkan script berikut:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://mrpujiajadeh.comze.com/slide-blogger-comment-box.js' type='text/javascript'/>
]]></b:skin>
Jika sudah sobat ketemukan,tepat diATASnya letakkan barisan kode ini:
a.openpanel
{display:block;width:100%;height:40px;padding:0px
0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff;
url()repeat-x;-webkit-transition: all .15s
ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel
em {width:0px;height:0px;display:block;position:absolute;top:15px;
right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline
{height:0px;-webkit-transition: all .15s
ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel
{padding:10px 20px 20px;margin:0px 0px !important;}
Setelah itu simpan template sobat.
<div><input
type="button" value="Lihat Gambar" style="margin:0px;padding:0px;"
onClick="if
(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
!= '') {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= '';this.innerText = ''; this.value = 'Sembunyikan'; } else {
this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display
= 'none'; this.innerText = ''; this.value = 'Lihat Gambar'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
<img src="http://4.bp.blogspot.com/-CaS-av0Hsew/T-hcswdKNUI/AAAAAAAABzw/wsiEwZAVFPU/s500/pujiantoro.jpg" alt="Cara Mudah dan Cepat Membuat Spoiler di Blogger" title="Cara Membuat Spoiler di Blogger." width="300" height="200"/>
</div>
</div>
<!-- outside of the include in order to lock Attribution widget --><b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>
<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != ""'>
<data:attribution/>
</b:if>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
Untuk platform blogger,blockquote memiliki tampilan default yang dapat dikatakan 'biasa saja'.
]]></b:skin> (untuk mempermudah gunakan keyboard dan tekan Ctrl+F),setelah ketemu,tepat diatas kode tersebut letakkan kode berikut :.post-body blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background:
url(http://2.bp.blogspot.com/_n7xseT2-HDU/TTfSVR6DdyI/AAAAAAAAArQ/ZtQUl-i6dhU/s1600/blockquote%2Bpelajaran%2Bblog.png)
no-repeat left top;
border-left: 10px solid #666666;
}.post-body blockquote {,maka tinggal ganti dengan kode diatas. <blockquote></blockquote> dalam kalimat atau paragraf,contohnya,Saya sedang belajar menghias blog blogger dan kali ini saya sedang belajar membuat blockquote dalam postingan di blogspot-ku tersayang ini :D
<meta content='Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.' name='description'/>
<meta content='Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.' name='keywords'/>
<title><data:blog.pageTitle/></title> yang biasanya letaknya diatas kode <b:skin><
<title><data:blog.pageTitle/></title> tersebut dengan meta berikut:
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<meta content='TULIS DESKRIPSI BLOG SOBAT.' name='description'/>
<meta content='TULIS KATA KUNCI BLOG SOBAT,PISAHKAN DENGAN TANDA KOMA' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> | JUDUL UTAMA BLOG SOBAT</title>
<meta expr:content='data:blog.pageName + ",TULIS DESKRIPSI BLOG SOBAT"' name='Description'/>
<meta expr:content='data:blog.pageName + ",TULIS KALIMAT APA SAJA YANG NANTINYA AKAN MENJADI DESKRIPSI SETIAP POSTING"' name='Keywords'/>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<meta content='Kumpulan dari rss blog kamu ada di RssMU - It is your RSS.' name='description'/>
<meta content='Kumpulan dari rss blog kamu ada di - RssMU - It is your RSS. ' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> | RssMu</title>
<meta expr:content='data:blog.pageName + ",adalah salah satu kumpulan dari rss blog kamu ada yang ada di RssMU - rssmu.blogspot.com."' name='Description'/>
<meta expr:content='data:blog.pageName + ",adalah salah satu kumpulan dari rss blog kamu ada yang ada di RssMU - rssmu.blogspot.com."' name='Keywords'/>
</b:if>
<link rel="stylesheet" href="http://mrpujiajadeh.comze.com/index-blogger-script.css" type="text/css" media="screen" />
<script style="text/javascript" src="http://mrpujiajadeh.comze.com/index-blogger-script.js"></script>
<script
src="http://pelajaran-blog.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.}
.membuatbordermelengkungroundedcorner {border: 3px solid #EFF0F1;
padding: 5px;
background: #ffffff;-moz-border-radius:5px;}
.membuatbordermelengkungroundedcorner a {background:none;}
img.float-right {margin: 5px 0px 0 10px;}
img.float-left {margin: 5px 10px 0 0px;
}
<div class='membuatbordermelengkungroundedcorner'>
Disini kode yang akan ditambahkan (bisa kode html iklan ataupun kode javascript dan sejenisnya)
</div>
]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.
#slick_area {
border:0px solid #585858;
background-color:#ffffff;
padding:8px;
margin:10px 0;
line-height:18px;
}
#slick_area a{
color:#ffffff;
text-decoration:none;
}
.slick_area a:hover{
color:#FF0000;
}
ul.slick {
margin:2px 5px 8px 0;
padding:0px;
}
ul.slick li {
list-style:none;
display:inline;
background-color:#ffffff;
padding:5px 14px;
text-decoration:none;
font-size:10px;
font-weight:bold;
text-transform:uppercase;
cursor:pointer;
border:0px solid #585858;
}
ul.slick li:hover {
color:#red;
}
ul.slick li.active {
background-color:#ffffff;
border:1px solid #585858;
color:#222222;
}
.content-slick {
background-color:#ffffff;
border:0px solid #585858;
color:#222222;
min-height:40px;
padding:7px 13px 5px;
text-align:left;
}
.content-slick ul {
margin:20px;
padding:0;
}
.content-slick ul li {
list-style:none;
border-bottom:1px solid #222222;
padding:1px;
}
.content-slick ul li:last-child {
border-bottom:none;
}
.content-slick ul li:hover, .content-slick ul li a:hover {
display:block;
background-color:#ffffff;
}
.content-slick ul li a {
text-decoration:none;
color:black;
display:block;
}</head>,setelah ketemu tepat diatasnya letakkan kode javascript dan jQuery berikut:
<script
language='javascript'
src='https://sites.google.com/site/pujiantoroinc/Home/jquery-1.3.2.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$('#tabdua, #tabtiga').hide();
$("ul.slick li").click(function () {
$(".active").removeClass("active");
$(this).addClass("active");
$(".content-slick").slideUp();
var content_show = $(this).attr("title");
$("#"+content_show).slideDown();
});
});
</script>
<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>
<div id="tabsatu" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Satu
</div>
<div id="tabdua" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Dua
</div>
<div id="tabtiga" class="content-slick">
Letakkan kode HTML/Javascript anda di Tab Tiga
</div>
,moga berhasil and selamat ngulik kodenya ya :D
 Salam kenal ADHI PLAYBOY |