Home » All posts

Membuat Tombol Buka Tutup Pada Komentar

in - on Tuesday, June 12, 2012 - No comments
Kali ini saya akan posting tentang membuat tombol buka tutup pada komentar tombol buka tutup ini khusus untuk yang sudah memiliki ikon reply komentar bagi yang belum klik disini. Nah jika sudah kita lanjutkan sebelum kita lanjutkan saya ingin memberi gambar berikut ini :
Sebelum dibuka



Setelah dibuka

Bagaimana sobat keren bukan caranya adalah :
1. masuk ke rancangan => edit html => centang expand widget html
2. cari kode <div class='comments-content'> kamu akan menemukan kode berikut
<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>
 3. setelah ketemu letakkan kode berikut diatas kode tadi

 <!-- spoiler komentar part1 --><div><div style='margin-bottom: 2px;'><i><b><small/></b></i><input onclick='if (this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display != &apos;&apos;) { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;&apos;; this.innerText = &apos;&apos;; this.value = &apos;Hide&apos;; } else { this.parentNode.parentNode.getElementsByTagName(&apos;div&apos;)[1].getElementsByTagName(&apos;div&apos;)[0].style.display = &apos;none&apos;; this.innerText = &apos;&apos;; this.value = &apos;Lihat Komentar&apos;; }' style='margin: 0px; padding: 0px; width: 180px; font-size: 12px;font-weight:bold;' type='button' value='Lihat Komentar'/></div><div style='border: 0px inset ; margin: 0px; padding: 0px;'><div style='display: none;'><!-- spoiler komentar part1 end -->
 4. kemudian letakkan kode berikut dibawah kode nomor 2
<!-- spoiler komentar part2 --></div></div></div><!-- spoiler komentar part2 end -->
5. save template selamat mencoba ^_^
Read more
Labels:

Membuat 3 Kolom Dibawah Header

in - on Tuesday, June 12, 2012 - No comments
Hai sobat kali ini saya akan posting tentang membuat 3 kolom dibawah header bagaimana sobat lihat judulnya saja sudah keren banget apalagi nanti kalo udah dibuat pasti jadinya keren banget. Nah untuk screenshotnya ini dia :



Cara membuat :

  • login ke blogger
  • pilih rancangan => edit html
  • centang expand template widget
  • cari kode ]]></b:skin> 
  • letakkan kode berikut diatas kode tadi
/* –- Top --*/
#top {
background:#fff;
margin-top:10px auto;
width:960px;overflow:hidden;
font-size:12px;
padding:10px;
}
#top h2 {
background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;
font-size:14pt;
font-weight:400;
text-align:center;
font-style:normal;
line-height:1.3em;
color:#fff;
padding:5px;
margin-top:-10px;
margin-left:-10px;
margin-right:-10px;
}
#top ul {
color:#333;
margin:0;
padding:0;
}
#top ul li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAEruG1mtFJBQg9UnupQOLkxh4nWyGL3pes1YiGTeX-czYLGF1PbN2TmBpxUmKEQR2DKnVIUe-7qNULoYRQL8-T2z95j9C7KUMtaV98zkUC4-5FjN03Ydcm2iavU7aNVV3L8Y8vq8bNiE0/s320/b3.gif) no-repeat;
list-style-type:none;
border-bottom:1px dashed #CCC;
margin:0 0 10px;
padding:0 0 5px 20px;
}
#top ul li a:hover {
margin:0px 0px 5px;
padding:0px;
}
#topcenter {
width:300px;float:left;
margin-left:10px;
background:#fff;
padding:10px
}
#topleft {
width:280px;float:left;
margin-left:10px;
background:#fff;
padding:10px;
}
#topright {
width:280px;float:right;
margin-left:10px;
background:#fff;
padding:10px;
}

  • cari kode <div id ='header-wrapper'> pastikan bagiannya hampir mirip dengan ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>
</div>

  • letakkan kode berikut diatas kode tadi 
 <div id='top'><b:section class='top' id='topleft' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='topcenter' id='topcenter' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='topright' id='topright' preferred='yes' showaddelement='yes'>
</b:section>
</div>

  • kemudian save template dan lihat elemnt halamannya 


Read more
Labels:

Membuat Label Bergoyang

in - on Sunday, June 10, 2012 - No comments
Postingan kali ini adalah membuat label/kategori blogspot bergoyang pastinya sobat sudah tahu maksudnya seperti goyang inul tahu tidak ini dia screenshotnya :


Bagaimana sobat keren bukan sudah penasaran cara membuatnya baiklah saya beritahu :

  • login ke blogger
  • masuk ke rancangan => edit html
  • cari kode </head> letakkan kode berikut diatas kode tadi


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>


  • kemudian letakkan kode berikut diatas kode </head>
<script type='text/javascript'>$(document).ready(function() {$(&#39;#Label1 li&#39;).hover(function() { //mouse in$(this).animate({ marginLeft: &#39;12px&#39; }, 400);}, function() { //mouse out$(this).animate({ marginLeft: 0 }, 400);});});</script><!-- end LinkNudging -->

  • kemudian save template 
Read more
Labels:

Membuat Background Pada Judul Sidebar

in - on Friday, June 08, 2012 - No comments
Posting kali ini adalah tentang membuat background pada judul sidebar pada template bawaan blogger tampilan judul sidebar masih kurang indah jadi kita akan mengganti sesuai kemauan kita sebenarnya cara ini sangat mudah dipahami baiklah langsung saja

  • login ke blogger
  • rancangan => edit html
  • cari kode sidebar-wrapper h2 atau .sidebar h2 
  • diarea kode tersebut terdapat deretan kurang lebihnya seperti berikut
sidebar h2 {
color: #ffffff;
font-size: 13px;
font-family: Arial, Tahoma, Verdana;
font-weight: bold;
margin: -.35em -.40em .25em -.35em;
padding: 3px 5px 3px 10px;
border-bottom: 1px solid #C0C0C0;
letter-spacing:0em;
text-transform:capitalize;
repeat-x top left;
}

Ket : kode yang berwarna biru adalah warna huruf judul sidebar
        kode yang berwarna pink adalah ukuran huruf
        kode yang berwarna merah adalah posisi judul sidebar bisa sobat ganti dengan center = tengah, right =                 kanan
        
Bila sobat ingin menambahkan background dengan warna ini kodenya : background:#2200CC kode yang berwarna biru adalah warna background, bila sobat ingin memberi gambar ini kodenya : background:url('URL gambar') kode yang berwarna biru adalah url gambar anda kemudian simpan dan lihat hasilnya selamat mencoba
Read more
Labels:

Memasang Share Button Keren

in - on Friday, June 08, 2012 - No comments
Kali ini saya akan posting tentang memasang share button  keren ini berfungsi untuk mengirim ke facebook, twitter dan masih banyak sosial network lainnya. Cara memasangnya tidak rumit hanya saja paham dengan tulisan. Berikut ini caranya :

  • Login ke blogger
  • masuk ke rancangan => edit html => centang expand template widget 
  • cari kode <data:post.body/> kemudian copas kode berikut letakkan dibawah kode yang berwarna merah
<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script>
<!-- AddThis Button END -->

  • kemudian save template bila penasaran dengan tombol share ini screenshotnya :



Bagaimana keren nggak sobat semoga artikel ini bermanfaat
Read more
Labels: