Memasang Ekstensi Pagerank Dan Alexa Rank

Pada kesempatan kali ini adalah tentang memasang ekstensi pagerank dan alexa rank bila sobat ingin ekstensi ini sobat harus memakai browser google chrome karena extensi ini dari penyedia google chrome setelah ekstensi ini terinstal maka secara otomatis disebelah kiri ikon tang terdapat ikon yang berisi nilai pagerank dan alexa rank berikut gambarnya 


Bila sobat ingin seperti itu ikuti langkah-langkahnya :
1. klik disini
2. kemudian pada kotak pencarian ketik pagerank status lalu enter
3. pilih salah satu kemudian klik tambahkan ke chrome disamping ekstensi
4. tunggu beberapa saat sampai ekstensi selesai bila sudah selesai akan muncul ikon disebelah kiri ikon tang

bagaimana sobat mudah kan selamat mencoba ^_^

Cek Backlink




Reciprocal Link Manager


Domain Name


List of URLs where your Reciprocal Links can be found
(One on each line)






Membuat Animasi Popular Posts


Tutorial kali ini adalah tentang membuat animasi popular posts . Popular posts adalah artikel yang paling banyak dikunjungi dalam sebuah blog/website, screen shotnya ada disebelah kiri. Berikut caranya :

  • pilih rancangan => element halaman
  • klik tambahkan gadget => entri popular (jumlah entri populer harus lebih dari 4) => simpan
  • tambahkan gadget => html/javascript
  • masukkan script berikut
<style type="text/css" media="screen">

#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;
    
}

#PopularPosts1 ul {
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#PopularPosts1 li {
 width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}

#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;    
}

#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

a img {
    border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>
perhatikan yang berwarna biru yang berwarna biru adalah lebar nya sesuaikan dengan template sobat

  • kemudan save pastikan kode tersebut berada diatas widget entri populer

Membuat Tombol Buka Tutup Pada Komentar

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 ^_^

Membuat 3 Kolom Dibawah Header

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