komentar facebook di blog

 Cara Mudah Membuat Kotak Komentar Facebook

Cara Mudah Membuat Kotak Komentar Facebook
Sebuah blog tanpa kotak komentar, rasanya menjadi bukan 100 persen blog. Karena sejatinya blog adalah sebuah interaksi atau percakapan. Di Blogspot sendiri, sudah disediakan kotak komentar yang bisa disematkan di bawah postingan. Sehingga lebih mudah untuk pembaca blog untuk memberikan komentar. Walau dari segi fungsi kadang sedikit membingungkan karena harus memilih akun (atas nama) untuk berkomentar.

Ada beberapa situs yang memberikan layanan penyedia kotak komentar. Salah satunya facebook, situs jejaring sosial yang sangat populer itu menyediakan widget atau plugin untuk kotak komentar yang bisa dipasang di blog kita. Tampilan kotak komentar itu sangat facebook banget.

Cara membuat kotak komentar facebook di blog ini lebih mudah dibanding sebelumnya. Ini bisa menjadi salah satu alternatif kotak komentar blog yang bisa lebih ramah dan mempermudah pengguna atau pembaca untuk meninggalkan komentar. Seperti yang kita tahu, hampir semua orang punya akun facebook daripada akun blog.

Cara Mudah Membuat Kotak Komentar Facebook

Cara Membuat Kotak Komentar Facebook yang Mudah
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Cari kode <b:includable id='status-message'> dan di atas kode tersebut, kita akan menemukan kode </b:includable>
5.Taruh kode yang berwarna merah di atas </b:includable> seperti berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left'><a href='http://kurniasepta.blogspot.com/2012/09/cara-mudah-membuat-kotak-komentar.html' target='new'><img border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWcPT63Hrg-NVca7DEo88Fu1IccD83yttAIK9OGZlyrw_-v0qMZj4zgiz2uAhyik-TjI6z4GUbYF7hC5asJfDp9iGcHet55e2AGpXwhKe_go2HpzSaycL6QsEN4sHWyDl0Ne7mQcS8iHY/s1600/comment.gif' width='200'/></a></p>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='7' width='470'/>
</b:if>

</b:includable>
<b:includable id='comment_picker' var='post'>
  <b:if cond='data:post.commentSource == 1'>
    <b:include data='post' name='iframe_comments'/>
  <b:else/>
    <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
    <b:else/>
      <b:include data='post' name='comments'/>
    </b:if>
  </b:if>
</b:includable>
<b:includable id='status-message'>

6. Kita dapat ganti 7, yaitu banyak komentar yang akan ditampilkan dan 470 adalah lebar dari kotak komentar facebook.
7. Simpan Template jika sudah selesai.

Cara Membuat Menu Drop Down Di Blog - Kali ini saya share Cara Membuat Menu Drop Down Di Blog. Menu drop down ini sangat cocok untuk web/blog yang bertema kesehatan dan lain-lain. Fitur-fitur yang ada dalam meni ini antara lain, efek animasi ketika drop down nya muncul, warna hijau yang mengkilau. Berikut ini adalah tampilan menu drop down di blog :

Berikut Cara Membuat Menu Drop Down Di Blog :
1. Login ke akun blogger kamu.
2. Klik template >> Edit HTML.
3. Tekan CTRL + F.
4. Letakkan kode berikut ini tepat DIATAS kode ]]></b:skin>

#blazerMenu,
#blazerMenu ul {
    list-style: none;
}
#blazerMenu {
width:980px;
    float: left;
}
#blazerMenu > li {
    float:left;
}
#blazerMenu li a {
display: block;
 
    padding:8px 16px 8px 16px;
    text-decoration: none;
}
#blazerMenu ul {
    position: absolute;
    display: none;
        z-index: 999;
}
#blazerMenu ul li a {
    width: 30px;
 float:left;
}
#blazerMenu li:hover ul { 
}
/* Main menu
------------------------------------------*/
#blazerMenu {
    font-family: Arial;
    font-size: 12px;
    background: #2f8be8;
margin:0 auto;padding:0 auto;
background: transparent;
padding-left:3px;
border-bottom:5px solid #008E00;
}
#blazerMenu > li > a {
    color: #333;
    font-weight: bold;
    font-size: 16px;
padding:8px 16px 8px 16px;
}
#blazerMenu li:hover {
    color: #333;
}
#blazerMenu a.arrow{background-image:url(https://lh5.googleusercontent.com/-WSS4CScLl3U/UGrIYZZZ4kI/AAAAAAAAF5k/ypr0GXc2CWI/s16/Actions-arrow-down-icon.png);background-repeat:no-repeat;background-position:right center;padding:8px 24px 8px 16px;}

/* Submenu
------------------------------------------*/
#blazerMenu ul {
    background: #00CC00;
padding:3px 0px 0px 0px;
}
#blazerMenu ul li a {
    color: #fff;
    font-weight: bold;
    font-size: 12px;
width:110px;
padding:6px 0px 6px 6px;
}
#blazerMenu ul  li:hover a {
    background: #80FE80;
}

5. Letakkan kode berikut ini tepat diATAS kode </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(function(){
    $('#blazerMenu').find('> li').hover(function(){
        $(this).find('ul')
        .removeClass('blazerblog')
        .stop(true, true).slideToggle('height');
    });
});
</script>

6. Klik "Simpan Template".
7. Masuk ke Tata letak >> Tambah Widget >> Html/JavaScript dan copy kode berikut ini pada kolom konten!.

<ul id="blazerMenu">
    <li><a href="http://putupunyablog.blogspot.com/">HOME</a></li>
    <li>
    <a class='arrow' href="http://putupunyablog.blogspot.com/search/label/blog">TUTORIAL</a>
    <ul class="blazerblog">
        <li><a href="#LINK DISINI">UBAH</a></li>
        <li><a href="#LINK DISINI1">UBAH1</a></li>
        <li><a href="#LINK DISINI2">UBAH2</a></li>
    </ul>
</li>
    <li>
    <a class='arrow' href="http://putupunyablog.blogspot.com/">Blogger</a>
    <ul class="blazerblog">
        <li><a href="#LINK DISINI">UBAH</a></li>
        <li><a href="#LINK DISINI1">UBAH1</a></li>
        <li><a href="#LINK DISINI2">UBAH2</a></li>
    </ul>
</li>
<li>
    <a class='arrow' href="http://putupunyablog.blogspot.com/search/label/tutorial">Resep</a>
    <ul class="blazerblog">
        <li><a href="#">Dessert</a></li>
        <li><a href="#">Chicken</a></li>
        <li><a href="#">Drink</a></li>
<li><a href="#">Cake</a></li>
<li><a href="#">Breakfast</a></li>
<li><a href="#">Soup</a></li>
<li><a href="#">Pasta</a></li>
<li><a href="#">Seafood</a></li>
    </ul>
</li>
<li>
    <a class='arrow' href="http://putupunyablog.blogspot.com/search/label/Beauty">Women</a>
    <ul class="blazerblog">
        <li><a href="#">Beauty</a></li>
        <li><a href="#">Make Up</a></li>
        <li><a href="#">Fashion</a></li>
    </ul>
</li>
<li>
<a class='arrow' href="http://putupunyablog.blogspot.com/search/label/naruto%20shippuden">More</a>
<ul class="blazerblog">
<li><a href="#">Kode Warna</a></li>
<li><a href="#">Get This Menu</a></li>
</ul>
</li>
</ul>

8. Klik "Save" dan sesuaikan dengan keinginan anda.

julyanty

<!-- Menu navigasi situs