F For Fauzie: Blogspot

Tampilkan postingan dengan label Blogspot. Tampilkan semua postingan

Membuat Tombol Share Dibawah Postingan Blog Super Keren

Kali ini Ane akan share tentang Trik Membuat Tombol Share Dibawah Postingan Blog Super Keren yang terbaru .. silahkan simak postingan ane dibawah ini.

Untuk menghindari kesalahan ada baiknya kalian backup template kalian terlebih dahulu.

Pertama - tama Login Blogger

Pilih mode Template lanjut pilih Edit HTML

>> Cari kode berikut ]]></b:skin>

Kemudian letakan kode dibawah ini diatas kode ]]></b:skin>

#share-button-fauzie {margin:0 0 8px;padding:0;overflow:hidden;}#share-button-fauzie p {float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);background:#eaeaea;font-color:#000;display:block;padding:5px 8px !important;margin:0 3px 3px 0;border-radius:6px 6px;border:1px solid #fff;}#share-button-fauzie a {position:relative;float:left;box-shadow:1px 1px 5px rgba(1,1,1,.1);border-radius:6px 6px;display:block;color:#fafafa;padding:5px 8px;margin:0 3px 3px;border:1px solid #fff;}#share-button-fauzie a:hover {top:1px;left:1px;box-shadow:0px 0px 3px rgba(1,1,1,.1);}

Setelah itu cari kode <data:post.body/>

kemudian letakan dibawah kode tadi letakan kode script dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<div class='clear'/>
<div id='share-button-fauzie'>
<p>Bagikan ke</p>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a>
<a class='facebook' expr:href='"https://plus.google.com/share?url=" + data:post.url' style='background:#c0361a;' target='_blank' title='Google+'>Google+</a>
<a class='twitter' expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a>
<a class='twitter' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' style='background:#000000;' target='_blank' title='Digg this!'>Digg</a>

<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' style='background:#FF9900;'>Lintaskan</a>");
//]]>
</script>

<div class='clear'/>
</div>
</b:if>

langkah terakhir Save template kalian.

Trik Membuat Tombol Share Dibawah Postingan Blog Super Keren

Baca Selengkapnya →

Do you want to alter your Blogger’s Popular Posts Widget to make it more prominent and attractive for your visitors? Having a Popular Posts Widget in the sidebar has numberless advantages. It helps new visitors to pick those articles that are most trending on a website. However, Blogger’s Built-in Popular posts widget is not that much attention-grabbing in terms of designing and displaying. Therefore, if you wish to transform your Popular Posts widget into a masterpiece then, you have to rely on CSS Style sheets. After lots of request from our loyal readers, finally we have decided to share our custom popular post design that we are using on this MBL Blog. In today’s article, we will reveal its CSS Style sheet.

Adding Popular Post Widget To Your Blogger Blog:

The Steps are extremely straightforward so you can easily customize your widget without facing any problem what so every. Just follow the following instructions.

Go To Blogger >> Your Blog >> Layout.
Add a Gadget >> Now within the list of widget look for “Popular Posts” and select it.
Now match the settings which are shown in the screenshot below.

Select “Last 7 Days” (Weekly).

Make sure you check the “Image Thumbnail” and “Snippet” because we need to display Small images along the trendy article, this will add more spice to your site.

You can display up to 10 trendy articles, but we would recommend you to select 7 from the Drop down list.

Now go ahead and Save the widget and that’s it we have successfully integrated a Popular Post widget.

Customizing and Stylizing Blogger Popular Post Widget:

Once again go to Blogger >> Template >> (Create a backup in case anything went wrong).
Select Edit HTML >> Proceed.
Now with in the Template Search for ]]></b:skin> (CTRL+F Shortcut to quick search) and just above it paste the following CSS Coding.

/*--- MyBloggerLab --- */
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbKzd3aOJzBqI5rdQRONwszO3HZaw64CPMO9WkM2QD0kjaNxTf9eBofLasqMNYrBN_vf6Pp-lofmjGcjkfrul1caBaggWfX7Ftp1bQo7RxiapUtF6frJ0oS5Q3ILi4SBHCXN51Bqxv3PI/s1600/1.gif) no-repeat scroll 5px 10px;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.popular-posts ul
li:hover {
border:1px solid #6BB5FF;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

All Done: Finally, Press the Save Template button and you have successfully customized your y post widget. Now visit your site and enjoy the picture perfect results.

source : www.mybloggerlab.com

Trik Customize Popular Post Keren Widget di Blogger

Baca Selengkapnya →

Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog

Hay sobat , disini saya akan memberikan tips blogger kepada kalian tentang bagaimana cara membuat kotak pencarian atau search box di blog kalian. Nahh,, disini saya mempunyai banyak pilihan model dan warna kotak pencarian, dari yang simple sampai yang keren dan berkualitas. Nah, silahkan kalian pilih salah satu diantara banyak pilihan dibawah ini :

Kotak Pencarian 1
Caranya :
1. Login ke akun Blogge
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Pilih "Kotak Penelusuran"
6. Nah disitu ada beberapa pilihan, silahkan pilih sesuaikan dengan keinginan.
7. Simpan [ Finish ] -> Search Box / Kotak Pencarian akan segara tampil di blog.

Kotak Pencarian 2
Caranya :
1. Login ke akun Blogger
2. Klik Menu Layout
3. Klik Tab Page Element
4. Klik Pada Add a Gadget
5. Lalu Klik HTML/Javascript
6. Dan Pastekan Kode dibawah ini :

Keterangan :
Ganti http://mazinubersahabat.blogspot.com/ dengan nama blog Kalian.
Angka 40 = menunjukkan panjang kotak (search box) yang akan tampil di blog anda, semakin banyak angkanya maka semakin panjang box-nya, maka silahkan kalian ganti sesuai selera kalian.

7. Lalu Save dan Lihat hasilnya!

Kotak Pencarian 3
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<span style='float:right;'>
<style type="text/css"> #a-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitvvIJ197T1KoxbYUYyMhbWhhbtHYK_UOyBH5x8pN_GYRwpLkKlLMogQijmKRW1lA59MbKJJUSnj0opbfTsTV20B50seh_k9O9kLScNW268kM0nT7Kn-HyL5EEBIx8fkcFpOmbiu2s0OQb/s1600/search.box.png) no-repeat scroll center center transparent;width:300px;height:35px;disaply:block;} form#a-searchform{display: block;padding: 10px 12px;margin:0;} form#a-searchform #a{padding: 0px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;} form#a-searchform #abutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;} </style> <div id="a-searchbox"><form id="a-searchform" action="/search" method="get"> <input type="text" id="a" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="abutton" /> </form></div>
</span>

Keterangan : Ganti Tulisan warna merah sesuai keinginan kalian, itu berfungsi untuk menampilkan tulisan ditengah-tengah kotak komentarnya!

Dan Hasilnya nanti seperti ini :

Kotak Pencarian 4
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

<form action="/search" style="display:inline;" method="get">
<input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
</form>
<style>
#s {
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 12px 48px 12px 12px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
width: 200px;
    height: 16px;
    color: #3a4449;
    border: none;
    outline: none;
    -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
position: relative;
    z-index: 2;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja6vQd8xZkS1Fu19RrheNhKzw-jlfGBsIxLAxkLM-01DpNdzPo_3u6mUZXq8AMIG-9MxtJjwfGQfFGl6jy2j7SxKBp1zxlRsaN9orKsWdG2rTIP1TDFOr4QJf1VvReKBG_-PRt4qZgaHM/s1600/Search.png) center right no-repeat;
}
#s::-webkit-input-placeholder, #s:-moz-placeholder {
    color: #607078;
}
</style>

NB : Ganti warna merah sesuai dengan selera dan kebutuhan kalian yang nanti tulisan itu akan muncul di tengah kotak pencariannya. Dan warna biru itu ukuran kotak pencariannya, silahkan kalian rubah sesuai dengan kebutuhan!

Yang hasilnya nanti seperti ini :

Kotak Pencarian 5
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

Keterangan :
Ganti Warna Merah dengan berbagai macam pilihan style dibawah ini :

Gaya Pencarian warna hijau :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUSPt4vpKlFtvU0y2lsD1njTvt5xs_khZXhR0yTu9fH1QoplLaLyaOXZBA8H43DR5y4pQac-9ws04LBdl6hTuKmh-dZhyphenhyphenqGAmoxg6isrPNdLzrDFYI8NBmQwndNGcu8F2rLGKUw8YeLhY/s1600/impoint.blogspot.com-green.png

Gaya Pencarian warna merah :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtf7cqxfp6JM7hDmdpDCquqcu6Oev4xjLQMmfqyA3fPPRLjnALgHG4vdKU6pJ2uQoYphVrUAO2DS9tYR8xv2EAmy6blmBOjkI0cOKq9aexeCXyYrrmEQYZcKuct50CHK7Xtw5vFk_spXHt/s1600/impoint.blogspot.com-red.png

Gaya pencarian warna biru :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCPzyX3jeNXopl_EPrQDXlvTqkSa1Dm5VlKjhJuz72DQZDxzlpeHSPtRfZLMwfm6a5VOcfFH7R-xAlLx36rHOshLLu4z3Rns1iKVp7UqsPucZvEH8FTj7Y4BXocccn79OL7iGiiX6JvCDX/s1600/impoint.blogspot.com-blue.png

Gaya Pencarian warna orange :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIs6Udsc-e95YcF48laaoTPCBV_nBJPzRGZ0d1wSd42wQ61DEULEGpBoS-PaaObY7WcxqXX8D2omTvaUFB_dsCgorny3Hu7CCsc2b7wp0ps_00FdVgAU3Km2zEfx52lPwdeI5fN02vBaKZ/s1600/impoint.blogspot.com-orange.png

Dan salah satu contoh hasilnya nanti seperti ini :

Kotak Pencarian 6
Caranya sama dengan memasang kotak pencarian 2, cuma Kodenya menggunakan kode ini :

Yang hasilnya nanti seperti ini :

Keterangan :
Silahkan kalian ganti warna merah diatas dengan kode dibawah ini, untuk mengganti tipe dan style selera kalian,,

http://3.bp.blogspot.com/-jukSBGryNx4/UPgqKoLKi2I/AAAAAAAAC38/V7A3wruYzgo/s1600/lostsector-search-box-darkgrey.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfk1upwLFPxY5dE5bauIFh9GmKS73S5sCdYeOeU4QSl02-GP6U38Zl7l0Stu6iXJXecck2ByL4p9Rp-nvtSP7ZeEnmRvLQUMf_P0i0AHmxwyBpSP6FVvr_BVbVumlh1REno0lWuWP4a-AD/s1600/lostsector-search-box-gray.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1TjQddgAa9NSaG7KpOdLYwX0DwgVSykm4cHYhawOgvsVmirXK4vKTK6jMXRg33wWBgAs51mcpL-Ph98BfpS4quo6YgwBZXYEAlMaza1PN4XGoBbvj5Yi2dsJ4DWN7v0Fl8S4pk-THDIor/s1600/lostsector-search-box-black.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBKop8JNdnyBVoQ-VMXGBut4iJg1cbISWuwOuu4htcMSeE2Uvb-dHHkeLionXSfSSO6-L7KSyFZtivKpp6gVZmmoSuX2BTASGzpTbDajnY79GvIVrplC8Wn6fhIWpE6XhS1HEnODHc4EqK/s1600/lostsector-search-box-red.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW-SUtlszjy52i3DVlESOsiBf6FHypaULGBMv3cP9MMUzKDsuhcWUxcyl1S_KLaSnmQPB6BXotRrtyBkgbEG2OJoosOR04u2RKfwtcDBYntkK9jaYbNZvlE_lAfQib39ZDc4dbPRxFRYdv/s1600/lostsector-search-box-yellow.png

Okeh,, mazinu rasa cukup tentang artikel yang saya tulis mengenai 6 Cara Membuat Kotak Pencarian Paling Keren di Blog ini, semoga bermanfaat buat kalian!

sumber : mazinubersahabat.blogspot.com

Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog

Baca Selengkapnya →

Sebagai salah satu kode bahasa yang sangat penting untuk pembuatan design sebuah website adalah CSS3. Dalam membuat efek pada gambar, gadget, box, area, menu dropdown, dan sebagainya merupakan contoh hasil penggunaan CSS.

Pada kesempatan kali ini, kita akan membahas mengenai Cara Membuat Efek Gelap terang dengan menggunakan CSS. Efek ini akan membuat gambar pada artikel kita apabila tersentuh oleh mouse maka akan menjadi gelap, begitu juga sebaliknya.

Membuat Efek Image Hover Gelap ke Terang :
1. Masuk ke bagian Tata Letak / Design Rancangan / Layout.
2. Add a Gadget / Widget.
3. Pilih HTML/Javascript
4. Copy kode ini dan letakkan di box area tersebut.

5. Simpan Widget Anda.

Untuk Membuat Efek Image Hover Terang ke Gelap :
Langkah memasangnya, sama seperti diatas hanya saja pada bagian tahap ke 4 gunakan kode berikut ini :

Sedangkan untuk anda yang ingin membuat sebuah elemen Kotak ( bingkai / kerangka ) menjadi Terang Gelap dapat mengcopy kode Box Hover ini dan letakkan di dalam Edit HTML anda sebelum kode ]]></b:skin> :

.mybox{
position:relative;
display:block;
width:200px;
max-height:400px;
background:#fff;
color:#000;
overflow:auto;
padding:20px 15px;
margin:20px 5px;
border:2px solid #777;
border-radius:6px;
opacity:0.2;
filter:alpha(opacity=20);
transition:1s;
-o-transition:1s;
-moz-transition:1s;
-webkit-transition:1s;
}
.mybox:hover{
opacity:1.0;
filter:alpha(opacity=100);
}

Lalu berikan nama elemen div pada xHTML sesuai dengan nama CSS diatas yaitu mybox.

xHTML
<div class="mybox">
Letakkan teks, image atau yang lainnya di sini!</div>

xHTML dengan tag p
<p class="mybox">
Letakkan teks, image atau yang lainnya di sini!</p>

Contoh penggunaan HTML5 yang dipadukan dengan CSS3 tersebut :

<div class="mybox">
<a href="http://..../images/myphoto.jpg" title="photo profil"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQjT7yHbeCamYsqSHvmKruZEiSF_Wu1mtq3xeD6ZxlvFkUWTVu9D_3TWdafbOOPS3AFphfvA6KB679Eet9iVvPYhFzu7GqKxgtnyEgVqN1dl2TDzT4q4vUYSVJIMXMoAAZKotQp8pg6ug/s320/myphoto.jpg" width="250" height="150" style="float:left;margin:5px 8px 5px 0;padding:2px;border:3px solid #FF1000;border-radius:6px;" /></a>Contoh Pemasangan Box Cantik dengan Efek Hover , Gelap terang, Membesar Mengecil, Terbalik dan sebagainya</div>

Itulah tadi berbagai macam cara untuk membuat efek gelap terang pada box atau image.

sumber : http://impoint.blogspot.com/2013/03/cara-membuat-efek-gelap-terang-css.html

Tips Membuat Efek Gelap Terang Pada Gambar

Baca Selengkapnya →

Salah satu kegunaan dari tombol back to top yakni untuk memudahkan pengunjung blog untuk kembali ke menu header atau navigation tanpa harus melakukan scroll pada mouse.

Tutorial untuk pemasangan back to top kali ini yakni menggunakan JQuery versi 1.3.7 (terbaru untuk saat ini). Cara pemasangannya tidaklah rumit dan tanpa harus mengedit CSS template blog, tetapi hanya dengan menambahkan gadget baru (HTML/Javascript) dan memasukkan kode ke dalamnya. Jika sobat penasaran seperti apa tombol back to top yang saya maksudkan disini, coba klik DISINI.

Bagaimana, menarik bukan...???

Nah jika sobat tertarik untuk memasang tombol to top seperti pada blog saya ini, berikut uraian singkatnya :

Login ke blogger
Tata Letak » Add Gadget » Pilih HTLM/Javascript
Copy kode di bawah ini dan pastekan kedalam box HTML/Javascript tersebut

sumber : copazz.blogspot.com

Cara Pasang Tombol Back to Top Auto Hide

Baca Selengkapnya →

Pada kesempatan kali ini saya akan membagikan sebuah tutorial untuk membuat widget artikel yang paling banyak dikomentari oleh pengunjung blog kita. Javascript dari widget ini dibuat oleh salah seorang blogger yaitu Nitin Maheta dan jika ingin mengunjungi blognya silahkan buka makingdifferent.com.

Kenapa Harus Memasang Widget Artikel Yang Paling Banyak Dikomentari Ini?

Tentunya sorang pengunjung di blog anda akan lebih tertarik untuk membaca artikel kita yang banyak mendapatkan respon dari pengunjung kita yang lainnya. Umumnya widget ini dipasang pada blog yang menggunakan wordpress.org, namun anda bisa saja memasangnya di blogspot anda.

Cara Membuat Widget Postingan Paling Banyak Dikomentari

Jika anda ingin memasang widget ini di blog anda, anda cukup mengikuti beberapa langkah mudah yang ada di bawah ini :

Langkah 1 : Login Ke Blogger >> Dashboard

Langkah 2 : Silahkan pilih menu Tata Letak >> Tampahkan Gadget (Add Gadget)

Langkah 3 : Pilih HTML / Javascript

Langkah 4 : Masukkan kode javascript di bawah ini di kotak yang keluar

<script language='JavaScript'>

aBold = false;

MDnumbposts=200;

MDmaxsshowresult=10;

home_page = "http://www.alamatbloganda.com/";

</script>

<script src='http://makingdifferent.github.com/blogger-widgets/Most-commented-posts.js' type='text/javascript'></script>

Langkah 5 : Simpan

Untuk customisasinya :

Silahkan ganti www.alamatbloganda.com dengan URL blog anda, misalkan cofeemix.blogspot.com (Wajib diganti dengan alamat blog anda).
200 merupakan jumlah postingan yang ada di blog anda, anda bisa menggantinya sesuai dengan jumlah postingan blog anda
10 merupakan jumlah postingan yang di tampilkan di widget tersebut dan kita bisa menggantinya sesuai dengan keinginan kita sendiri.

Nah, selamat mencoba dan jangan lupa tinggalkan komentar jika anda sudah bisa memasangnya di blog anda. Semoga bermanfaat.

sumber : http://www.cofeemix.com/2013/02/cara-membuat-widget-postingan-paling.html

Membuat Widget Postingan Paling Banyak Dikomentari

Baca Selengkapnya →

Sebenarnya caranya tidak susah-susah amat kok. Asalkan anda bisa teliti untuk membaca setiap instruksi saya saja. Nah sebelumnya saya akan memberikan hasil dari membuat kotak komentar facebook pada blog saya. Berikut adalah hasilnya :

Berikut adalah langkah langkahnya :

Langkah 1 : Pergi ke blogger >> Dashboard >> Template

Pastikan setiap anda edit HTML blog anda, selalu anda backup terlebih dahulu. Hal ini dikarenakan untuk jaga-jaga ketika hasil edit anda mengalami eror.

Langkah 2 : Edit HTML >> Lanjutkan

Langkah 3 : Centang Expand Template Widget

Langkah 4 : Temukan Kode di bawah ini (Ctrl + F) :

]]></b:skin>

Langkah 5 : Copy kemudian paste kode di bawah ini diatas atau sebelum ]]></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;}

Langkah 6 : Jika sudah selesai kemudian lanjutkan untuk mencari kode di bawah ini :

</head>

Kemudian copy dan paste kode di bawah ini tepat di atas kode </head> yang anda temukan :

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

Lanhkah 7 : Sebelumnya lihat tulisan pada script di atas yang saya beri warna merah 'ID FB Anda disini' . isikan dengan FB Id anda. Jika anda tidak tahu FB Id anda coba perhatikan contoh berikut https://www.facebook.com/bayu.adipati. Itu bisa anda lihat ketika anda membuka profil Facebook anda. Dan yang saya maksud dengan FB ID adalah bayu.adipati.

Langkah 8 : Kemudian cari kode seperti ini <div class='comments' id='comments'> , di blog saya kode tersebut ada dua. Kalau anda juga menemukan ada dua kode tersebut di blog anda, paste kode dibawah ini tepat di bawah kedua kode tersebut!

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Catatan : Perhatikan kode diatas yang saya beri warna. Untuk yang angka 2 merupakan jumlah komentar yang ditampilkan. Kemudian untuk angka 400 merupakan lebar dari kotak komentar facebook yang ada di blog anda.

Untuk kode yang saya beri warna merah <div class='comments comments-page' id='blogger-comments-page'> , jika anda menemukan kode yang sama di bawah kode yang anda paste di blog anda, hapus kode tersebut. Jadi pastikan tidak ada kode tersebut sama di bawahnya.

Langkah 9 : Simpan dan lihat hasilnya.

Gimana sahabat blogger, apakah anda berhasil membuat kotak komentar facebook berdampingan dengan kotak komentar blog anda? Beri komentar jika anda berhasil memasangnya. Beri tahu saya bahwa kode di cara di atas benar-benar bekerja pada blog anda.

Update : 7 Februari 2013
Mungkin anda tidak akan mendapatkan notifikasi jika ada yang mengomentari blog anda. Nah untuk mengatasinya, anda perlu untuk membuat APP FB terlebih dahulu. Untuk tutorialnya silahkan baca :Cara untuk membuat APP FB.

Setelah anda membuatnya, sekarang kita akan memasukkan APP ID dari Aplikasi yang telah kita buat sebelumnya. Caranya adalah :

Cari </head> di template anda (Masuk Blogger >> template >> Edit HTML)
Setelah ketemu masukkan kode di bawah ini di atasnya

<meta content='APP ID' property='fb:app_id'/>

Ganti APP ID dengan APP ID yang baru anda buat. Kemudian klik simpan.

sumber : http://www.cofeemix.com/2012/12/cara-membuat-komentar-facebook-di-blog.html

Cara Membuat Komentar Facebook di Blog

Baca Selengkapnya →

F For Fauzie

Trik Membuat Tombol Share Dibawah Postingan Blog Super Keren

Adding Popular Post Widget To Your Blogger Blog:

Customizing and Stylizing Blogger Popular Post Widget:

Trik Customize Popular Post Keren Widget di Blogger

Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog

Cara Terbaik Membuat Kotak Pencarian Paling Keren di Blog

Tips Membuat Efek Gelap Terang Pada Gambar

Cara Pasang Tombol Back to Top Auto Hide

Cara Membuat Widget Postingan Paling Banyak Dikomentari

Membuat Widget Postingan Paling Banyak Dikomentari

Cara Membuat Komentar Facebook di Blog

Top Artikel

Genre Berita

Blog Archive

About