- See more at: http://kuc0pas.blogspot.com/2012/07/cara-membuat-foto-slide-show-di-blog.html#sthash.mrX5DXCL.dpuf

Membuat Kotak Komentar Facebook dan Blogger

Mungkin kamu pernah menemui blog yang kotak komentarnya pakai facebook dan blogger. Nah, sekarang kita akan belajar membuat kotak komentar dan blogger jadi satu dalam bentuk tab. Tab komentar facebook berdampingan dengan kotak komentar dari bawaan blog, yaitu blogspot atau blogger.com

Dulu, kita telah belajar bersama untuk membuat kotak komentar blog hanya dengan memakai kotak komentar dari facebook. Salah satu manfaat memakai kotak komentar facebook adalah percakapan tentang blog tidak hanya sebatas di blog tapi bisa juga di bawa ke laman facebook, sehingga semakin mudah blog kita menyebar di facebook.

Dengan membuat pilihan kotak komentar, akan bisa lebih memudahkan pengunjung blog untuk memberikan tanggapan terhadap postingan blog. Karena tidak semua orang punya akun blogger ataupun blog. Tetapi hampir semua orang punya akun facebook, dengan demikian pembaca akan lebih mudah meninggalkan komentar.

Cara Membuat Komentar Facebook dan Blogger
1. Login ke akun blogger.com
2. Pilih Template kemudian Edit HTML
3. Tekan Ctrl F dan cari kode ]]></b:skin>
4. Taruh kode berikut di atas ]]></b:skin>

.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.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;}

5. Kemudian cari kode </head>
6. Taruh kode berikut di atas kode di atas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='IDfacebook' 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>

7. Ganti IDfacebook dengan ID sendiri (facebook.com/IDfacebook)
8. Kemudian cari kode <div class='comments' id='comments'>
9. Kamu akan menemukan 2 kode yang sama. Letakkan kode di bawah ini tepat di bawah 2 kode tersebut

 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'><img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == &quot;item&quot;'><div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='5' width='450'/></b:if></div><div class='comments comments-page' id='blogger-comments-page'>

10. 5 adalah banyaknya komentar yang ditampilkan dan 450 adalah lebar kotak komentar facebook.
11. Simpan Template jika sudah selesai.
0

Cara buat box dibawah HEADER



Ini Screenshotnya




Langkah-langkah: 

1. Login Dashbor Blogger 
2. Pilih Template
3. Edit Template


4. Cari kode ]]></b:skin> 
Letakkan kode dibawah ini diatas ]]></b:skin> 

#MODchat{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #0c0c0c;float:left;background:#232222;padding-left:15px;width:170px;height:70px;margin-left: 800px;margin-top:-15px;border-top:5px solid #0c0c0c; border-radius:5px 5px 30px 30px; position: absolute;}
#MODjoin{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #0c0c0c;float:right;background:#232222;padding-left:0px;width:180px;height:70px;margin-left: 800px;margin-top:135px;border-top:5px solid #0c0c0c; border-radius:30px 30px 5px 5px; position: absolute;}

#MODbanner2{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #0c0c0c;float:right;background:#232222;padding-left:0px;width:180px;height:auto;margin-left: 180px;margin-top:35px; border-radius:10px; position: absolute;}

#MODrangka1{ margin-top:20;margin-left: 0px ;margin-bottom:50px ;border:5px solid #0c0c0c;border-radius:10px 10px 10px 10px ;width:1090px;height:200px; background: #232222; position:relative;}

#MODbox1{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #0c0c0c;border-bottom:5px #232222;float:left;background:#171717; padding-top:30px;width:300px;height:340px;margin-left: 400px;margin-top:-240px; border-radius:20px 20px 10px 10px; position: absolute;}

#MODbox2{-moz-transition: all 0.7s ease-in-out;-webkit-transition: all 0.7s ease-in-out ;border:5px solid #0c0c0c;float:left;background:#171717;padding:5px;width:auto;height:auto;margin-left: 10px;margin-top:35px; border-radius:10px 10px 10px 10px; position: absolute;}

#MODlike{margin-left:790px;width:180px;margin-top:-80px;background:#0c0c0c;border: 7px dashed #171717;border-radius:30px;padding:10px;padding-left:35px}

#MODmusic{margin-left:20px;width:320px;margin-top:-10px;background:#0c0c0c;border: 7px dashed #171717;border-radius:30px;padding:10px;}

5. Lalu sekarang kita aktifkan kode CSS-nya yaitu dengan kode HTML
6. Cari kode <div id='content-wrapper'> 
Letakkan kode dibawah ini diatas <div id='content-wrapper'> 

<div id='MODrangka1'>
<b:section id='MODbox2' maxwidgets='5' showaddelement='yes'>
<b:widget id='HTML8' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>


</b:includable>
</b:widget>
</b:section>
<div id='MODchat'>
<a href='http://monster-shared.blogspot.com'><img alt='cbox' src='http://didil-cyber.googlecode.com/files/Guest-Book-Ichigo.png' title='Click here to open Guest Book'/></a>
</div>

<div id='MODjoin'>
<a href='http://www.Blogger.com/follow-blog.g?blogID=2038011248359714008' onclick='window.open(this.href, &apos;dmfollow&apos;, &apos;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=no,width=599,height=521&apos;);return false;' style='text-align:center;font-weight:bold;text-decoration:none;' title='Join This Site / Follow This Site'><img alt='Join This Site' src='http://didil-cyber.googlecode.com/files/Join-This-Site-Ichigo.png' style='vertical-align:center;border:0px;cursor:pointer;'/></a>
</div>
<div id='MODbanner2'><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a><a href="http://monster-shared.blogspot.com/" target="_blank"><img src="https://monster-shared.googlecode.com/files/MonsterMini.png" alt="Monster-Shared™" title="Monster-Shared™ | More About Share" /></a></div>

</div>


<b:section id='MODbox1' maxwidgets='5' showaddelement='yes'>
<b:widget id='HTML3' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>


7. gue kasi bonus nih nuat kalian, tambahan extra kan! gak enak kalau setengah-setengah xD 


8. letakkan kode dibawah ini diatas <div id='content-wrapper'> 

<div id='MODmusic'><embed allowscriptaccess='never' flashvars='autostart=true' height='0' src='http://www.4shared.com/embed/3432989025/6e5815ae' style='width:320px;height:25px;border:0px;display:block;margin:5px auto;' type='application/x-shockwave-flash' width='0'/></div>

<div id='MODlike'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' layout='box_count' show_faces='false'/><script src='https://apis.google.com/js/plusone.js' type='text/javascript'/><g:plusone size='tall'/><a class='twitter-share-button' data-count='vertical' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></div>

9. Pratinjau dulu kalau udah mantep
10. Simpan template

SUMBER : MONSTER-SHARED
0
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. KOLEKSI SOFTWARE & MOVIE - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger