Cara membuat kotak komentar paling mudah

Hampir semua blog yang pernah kita kunjungi sudah pasti disitu tersedia juga kotak komentar ,karena sejatinya sebuah blog adalah forum untuk tukar pendapat baik itu tentang dunia blogger ataupun tentang permasalahan yang lain ,sehingga adanya kotak komentar sangat membantu kita untuk mengetahui siapa saja yang datang berkunjung dan memberikan comentar di blog kita dan kitapun akan sesegera mungkin memberi kan jawaban nya tanpa menunggu terlalu lama ,mengenai bentuk kotak komentar itu sendiri banyak sekali bentuk nya dari yang paling sulit sampai yang paling mudah ,nah untuk pertemuan kali ini kang yanto akan memberikan cara membuat kotak komentar paling mudah .Mengapa di bilang paling mudah ya karena untuk membuat kotak komentar ini kita sudah tidak perlu lagi bongkar pasang kode html. untuk mengetahui bentuk dari kotak komentar itu sendiri sobat bisa lihat contoh gambar di bawah ini :

Sedangkan untuk cara membuat ikuti tutorialnya seperti di bawah ini :

1. Loggin dulu ke blogger
2. lalu masuk ke dasboard lalu pilih tata letak selanjutnya pilih tambah gadget
3. lalu sobat pilih Html java script lalu masukkan kode di bawah ini 



<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.w2b_recent_comments li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}

.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}

.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}

.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>



4. Nah untuk yang terakhir jangan lupa save dan lihat hasilnya

NB: untuk teks yang berwarna merah ganti dengan nama blog sobat

Read more

Menu accordion top banget

Dalam membuat suatu blog sangat lah penting jika kita menata serapi mungkin sebuah blog agar terlihat rapi dan mudah bagi pengunjung untuk membaca menu menu yang ada di blog tersebut .Salah satu caranya adalah di buatnya sebuah menu yang sangat simpel dan mudah di temukan .Menu yang kita beri nama Menu accordion top banget tersebut sangat lah mudah cara membuatnya ,nah buat sobat blogger yang ingin membuatnya silahkan ikuti petunjuk seperti di bawah ini :

1. Login ke blogger.com dengan ID sobat tentunya 
2. setelah masuk ke dasboard  pilih tata letak kemudian tambah gadget
3. setelah itu pilih Html Java script lalu masukkan kode dibawah ini 

<style type="text/css">
 #accordion{width:100%;margin:auto;border:0px solid white}
 #accordion h2{padding:5px 10px;background-color:#ccc;background-image:  url(http://1.bp.blogspot.com/-qtI_UsPdZwc/Tmzg5K8eADI/AAAAAAAABrU/ScrT9X8fBBY/s1600/arrow_right.gif);background-repeat:  no-repeat;background-position: right center;color:#000;font:normal 11px  Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
 #accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
 #accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
 #accordion .content li {background-image: url(); background-repeat:  no-repeat;background-position: left center;margin:0;padding:2px 0 3px  0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
 #accordion .content li a:hover {text-decoration:none;color:#000;}
 #accordion h2.active{background-color:#bbb;background-image:  url(http://2.bp.blogspot.com/-9If6SXYDklM/Tmzg4W8YwuI/AAAAAAAABrQ/XlCiTeVqtq0/s1600/arrow_down.gif);background-repeat:  no-repeat;background-position: right center;font-weight:bold;}
 </style>
 <script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
 <script type='text/javascript'>
 $(function() {
 $('#accordion .content').hide();
 $('#accordion h2:first').addClass('active').next().slideDown('slow');
 $('#accordion h2').click(function() {
 if($(this).next().is(':hidden')) {
 $('#accordion h2').removeClass('active').next().slideUp('slow');
 $(this).toggleClass('active').next().slideDown('slow');
 }
 });
 });
 </script>
 <div id="accordion">
 <h2>judul 1</h2>
 <div class="content">
 Isi konten 1
 </div>
 <div id="accordion">
 <h2>Judul 2</h2>
 <div class="content">
 Isi konten 2
 </div>
 <div id="accordion">
 <h2>Judul 3</h2>
 <div class="content">
 Isi konten 3
 </div>
 <div id="accordion">
 <h2>Judul 4</h2>
 <div class="content">
 Isi konten 4
 </div>
 <div id="accordion">
 <h2>Judul 5</h2>
 <div class="content">
 Isi konten 5
 </div>
 </div></div></div></div></div>

4. lalu Save dan lihat hasilnya

Jika sobat ingin melihat demonya secara langsung Klik aja DISINI

Read more