Cara II Membuat Komentar Facebook di Blog di Setiap Bawah Posting

Memasang Komentar Facebook di Setiap Postingan

Jika baru saja kita ngbahas Membuat Widget Diskusi berupa Komentar Facebook di Blog,kini kita penuhi janji buat ngpost Cara II Membuat Komentar Facebook di Setiap Bagian Bawah Posting Blog.

Berhubung waktu yang semakin sore,kita langsung aja ya.
Dan widget ini tidak seperti widget yang kami share di 'Membuat Widget Diskusi berupa Komentar Facebook di Blog' postingan yang lalu.

Setiap posting akan dapat memiliki komentar yang berbeda,sesuai dengan komentar yang akan diterbitkan,beda dengan widget yang kita bahas sebelum ini yang mana widget komentar facebook yang lalu akan memiliki komentar yang sama meski dalam posting yang berbeda.

Langkah dan Cara Memasang Kotak Komentar Facebook di Setiap Posting Blogger

1.Masuk ke akun blogger sobat lalu pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3)


(1)


(2)


(3)

2.Setelah itu cari kode:

<div class='comments' id='comments'>

untuk mempermudah pencarian tekan Ctlr + F pada keyboard kemudian sobat letakkan kode berikut tepat diBAWAHnya:

<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='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='2' width='550'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

3.Cari kode /* Comment atau #comments dan letakkan barisan kode css berikut ini tepat dibawahnya:

.comments-page { background-color: #f2f2f2;}
.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;}
}

4.Cari lagi kode </head> dan letakkan kode script berikut tepat diATASnya:

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='cahdonorejo' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

5.Simpan dan selesai :D

Ket:
Untuk cahdonorejo ganti dengan id facebook sobat,bisa angka maupun nama.Cahdonorejo ini saya ambil dari nama id dari akun facebook seperti gambar berikut:



6.Semoga berhasil ya :D

Membuat Widget Diskusi berupa Komentar Facebook di Blog

Mengganti Komentar di Blogger dengan Komentar Facebook

Mungkin minggu ini bisa dikatakan hari 'liburan terpanjang' bagi gue pribadi,secara gitu gan,gue libur hampir satu minggu penuh.

Kesempatan ini gue manfaatin buat nambah bahan posting di blog sederhana milik gue ini.
Yup! disini kita akan coba mengulas bagaimana membuat komentar di blogger seperti komentar facebook,kendati komentar facebook yang akan kita bahas ini bukanlah 'pengganti' dari komentar blogger aslinya.

Dengan kata lain,sobat masih bisa menggunakan komentar bogger yang lama jika diperlukan bahkan dari keduanya antara komentar facebook maupun kotak komentar yang disediakan oleh blogger.com sendiri dapat digunakan secara bersamaan.

Tapi gue kira hanya orang-orang tertentu yang menggunakan dari kedua widget ini secara bersamaan,mubazir bang get,hehehe

Oke,kotak komentar facebook ini bukannlah pengganti kotak komentar blogger yang asli,ini hanya merupakan widget yang sengaja facebook ciptakan dalam pengembangan dan promosi mereka.

Kelemahannya widget ini adalah,isi komentar akan sama pada setiap posting.menyebalkan.Tapi setelah posting ini nanti,akan dipublikasikan Cara II untuk membuat komentar facebook di blog dalam setiap posting.

Ingin menerapkan / memasang widget komentar facebook di blog kamu sekarang? yuk ikuti langkah yang Pelajaran Blog akan ulas berikut ini ya gan!

Langkah dan Cara Memasang Komentar Facebook di Blog

1.Sobat kunjungi:
developers.facebook.com/docs/plugins/

2.Selanjutnya pilih 'Comments' pada pilihan widget,lihat gambar:



3.Nanti akan keluar konfirmasi seperti ini,tentukan pilihan sobat sendiri dan klik 'Get Code':



4.Akan tampil dua kode script yang facebook berikan,seperti gambar dibawah ini (tanda 1 untuk kode pertama,tanda 2 untuk kode yang kedua):



5.Tugas sobat,sekarang copy kode yang pertama,seperti gambar ini:



6.Setelah itu,masuk ke akun blogger sobat lalu pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3)


(1)


(2)


(3)

Setelah itu cari kode <body> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode <body> paste-kan atau letakkan persis diBAWAHnya kode pertama yang berhasil kita copy dari facebook tadi,seperti ini:

7.Jika kita sudah menerapkan kode pertama,sekarang kita copy kode kedua,lihat gambar ini:



8.Setelah sobat berhasil copy kode kedua ini,pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget,





Selanjutnya pilih HTML/Javascript kemudian letakkan kode kedua yang tersebut diatas tadi.

10.Setelah sobat melakukan atau memberikan komentar di widget facebook comments for blogger ini akan tampil di profil facebook sobat seperti ini:

One (1) Column Blogger Tempate

Jatuh Cinta pada Blogger Template Satu Kolom Dadang Herdiana Punya

Hi,siang sobat blogger,tahu kenapa hari ini gue sangat berbahagia?,kasih tahu ga ya? mmm...(pembaca: gue ga peduli tuh!)
Intinya,bahagia gue bukan karena dapet arisan bukan pula karena hari ini ga banyak yang nagih utang ke gue (buka rahasia dikit).

Gue bahagia karena hari ini,gue menemukan simple blogger template satu kolom yang keren bang get!,blogger template ini adalah hasil karya mas Dadang Herdiana yang sobat bisa kunjungi situsnya di SINI.

Kenal ya?
Ga juga alias belum gan,secara kita memang juga belum pernah ketemu,mungkin nanti sekalian mo izin mempublikasikan hasil karyanya ini.Yup! one / 1 column blogger template yang sangat sederhana dengan tampilan yang sangat ringkas,padat dan jelas dan yang pasti tidak banya cengkune2nya (bhs medan bro!).

Untuk screenshotnya,sobat lihat gambar dibawah ini (klik link dibawahnya untuk tampilan lebih besar).

Lihat gambar lebih besar.

Untuk demo live-nya sobat klik DISINI
Untuk download file *.xml-nya sobat klik DISINI

Bagimana sob? tertarik? bagi sobat blogger yang suka dengan blogger template satu kolom yang simple,sederhana,seo friendly,tidak mencolok,professional pasti jatuh cinta dengan template yang satu ini.

Nah,untuk instalasinya,sobat ikuti langkah berikut ya :D yuk!

Langkah Cara Mengganti Template 'Blue One Column Blogger Template'

1.Pertama,sobat download file *.xml-nya klik di SINI
2.Sobat buka hasil dari download dengan Wordpad,lihat gambar dibawah ini,setelah itu gunakan tombol Ctrl+A untuk memblok semua kode dan sobat copy:


Lihat gambar lebih besar.


3.Selanjutnya,sobat pergi ke Dashboard,lalu pilih Design :


Lihat gambar lebih besar.


4.Kemudian pilih tab Edit Html,lihat gambar berikut gan:


Lihat gambar lebih besar.


5.Ini yang penting,sobat checklist 'Expand Widget Templates' dan gunakan kembali Ctrl+A pada keyboard sobat untuk memblok semua kode template,kemudian 'Delete' atau bersihkan semua kode.


Lihat gambar lebih besar.


6.Sekarang waktunya sobat klik kanan dan 'Paste' kode (hasil copy dari langkah yang ke-2 diatas) kedalam area ini lau save template:


Lihat gambar lebih besar.


7.Nanti akan keluar konfirmasi seperti gambar dibawah ini,maka sobat klik tombol Delete Widgets:


Lihat gambar lebih besar.


8.Sobat bisa lihat hasil dengan mengklik 'View Blog' seperti gambar dibawah ini dan Selesai. :D
Moga berhasil ya gan,specially thank you for Dadang Herdiana.


Lihat gambar lebih besar.

Thumbnail Related Post

Cara Membuat Related Post dalam bentuk Kotak Kotak Gambar di Bawah Posting

Saya rasa artikel ini sudah dipublikasikan teman-teman blogger beberapa tahun lalu,namun kenapa Pelajaran Blog memplubikasikan cara membuat artikel berkaitan / artikel terkait dengan gambar (bergambar / thumbnail) kembali?

Yup! disamping sebagai referensi bagi sobat blogger yang belum mengetahui,kami ingin memperkenalkan sebuah situs www.bloggerplugins.org yang banyak memberikan manfaat terkhusus buat saya pribadi (pembaca:jelas la,situ khan tukang copas pent-).

Dari website tersebut banyak menyediakan script-script yang mengagumkan (pembaca:situ kan emang cuman bisa ngagumin doang pent-) salah satunya adalah widget thumbnail related post yang sedang kita bahas ini (pembaca:situ khan..Pelajaran Blog:sudah cukup..saya menyadari hal itu..pent-)

Nah,untuk bentuk fisiknya,sobat bisa lihat salah satu blog yang telah menggunakan widget ini,silakan sobat lihat di SINI.

Langkah dan Cara Membuat / Memasang Related Post Bergambar (Thumbnail Related Post)

1. Pertama, masuk ke akun Blogger sobat, buka tab Edit HTML dan contreng tulisan "Expand Widget Templates"







2. Selanjutnya cari kode :

</head> (gunakan CTRL+F untuk mempermudah pencarian)

3. Jika sudah ketemu,tepat diATASnya letakkan kode berikut ini:

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

4. Kemudian sobat cari kode berikut ini..

<div class='post-footer-line post-footer-line-1'>

5. Bila belum juga dapat diketemukan maka cari kode ini.

<p class='post-footer-line post-footer-line-1'>

6. Jika sudah ketemu dari salah satu kode tersebut,letakkan diBAWAHnya kode berikut ini:

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

7. Simpan tempate sobat.

8. Untuk mengatur jumlah kotak yang ditampilkan kita ubah value dari kode berikut.
var maxresults=5;
9. Untuk mengubah jumlah post yang ditampilkan tiap label kita harus mengubah kode berikut.
max-results=6
10. Untuk mengubah title "Related Post" maka editlah kode berikut.
var relatedpoststitle="Related Posts"
11. Untuk mengubah warna pembatas ubahlah kode berikut.
var splittercolor="#d4eaf2"
12. Untuk mengganti tampilan gambar kosong bisa mengubah URL dari kode berikut.
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png"
Selesai, selamat mencoba sob!

sumber:
http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html

Membuat Print Posting Blogger

Cara Memasang Tombol Print / Print Preview di Posting Blogger

Sebenarnya untuk kesekian kalinya kami (Pelajaran Blog) menekankan dengan sangat bahwa artikel ini,tulisan ini dan bahan materi posting kali ini adalah...sekali lagi,saya tekankan dengan sangat kepada para pembaca setia blog ini,saya sampaikan dengan begitu antusias bahwa artikel ini,tulisan ini dan tema bahkan judul posting kali ini adalah...
hasil copas.
yah..dimodif dikit gitu.
bisanya cuman ngedit mulu seh,hihi
Pembaca:$^$%&$%&$^%&!!!!

Namun dengan tidak mengurangi rasa dari nikmatnya kopi Good Day Carrebian Nut yang setiap pulang kerja sangat cocok sekali menjadi teman anda dalam melepas penatnya aktivitas kerja..

Bisakah sobat merasakan aroma kopi yang memberikan rasa berbeda ini?

Pembaca: Oe!!! ini mau ngasih tutorial bikin print button posting blogger or jualan kope seh?????!!!!
Pelajaran Blog: Sabar..ya sob,khilaf hihihi,oke kita kembali ke inti permasalahannya gan!
Pembaca: gitu dunk!
Pelajaran Blog: Tapi serius,nikmat banget men!!
Pembaca: tutorialnya tutorialnya 27x!!!?
Pelajaran Blog: oh ya,maaf hihi (kecewa)

Langkah dan Cara Memasang Tombol Print di Blogger Post

pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3)


(1)


(2)


(3)

Setelah itu cari kode </head> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode </head> letakkan persis diATASnya kode berikut:

<style type="text/css" media="print">
#header-wrapper,#header,
.header, #sidebar-wrapper,
.sidebar, #footer-wrapper,#footer,
.date-header,
.comment-link,
.comment-footer,#comments,#blog-pager,
.feed-links, #backlinks-container, #navbar-iframe,
.dontprint {display: none;}
.post,#content-wrapper,#main-wrapper,#main{width:100%}</style>

Setelah itu,cari lagi kode:
<data:post.body/> atau <p><data:post.body/></p>
Setelah ketemu tepat diATASnya script berikut:

<b:if cond='data:blog.pageType == &quot;item&quot;'><br/><table border='0' width='30px'><td><a href='javascript:window.print()' rel='nofollow'><img src='http://2.bp.blogspot.com/-iCaPhos1zwI/T9Hyqf3pMrI/AAAAAAAABq0/ICAfZGNDt2k/s200/print.gif) left no-repeat; padding-left: 30px;display:block;' title='Print Posting Ini'/></a></td></table><br/></b:if>

Lalu simpan dan coba sobat lihat setiap postingan yang sobat miliki :D
NB:jangan lupa untuk mencoba Good Day Crrebian Nut Coffee ya :D

Cara Melindungi Artikel Posting dari Copy Paste Ilegal

Cara Memproteksi Konten Blog Dari Copy Paste Tanpa Izin

Pernahkah sobat merasa geram dengan ulah para copas (termasuk gue pent-)...(tukang copas maksdunya pent-) yang semena-mena dan tidak 'berperibloggeran' terhadap konten blog yang kita miliki?

Jika script ini masih disediakan oleh pihak yang 'berwenang',yuk kita balas kesewenang-wenangan mereka yang telah meng-copy paste artikel milik kita tanpa izin yang SAH..dengan mas kawin seperangkat alat shalat dibayar...oe! ini ngeblog mas bukan akad!
Oh ya,maaf.

Bagaimana efek dari script ini? ilustrikan saya adalah anda gan..
1.Tukang copas (yaitu gue pent-) mengcopy dari artikel atau konten apapun itu dalam sebuah posting blog,misal pengunjung mengcopy sebuah kode dari salah satu artikel didalam blog ini seperti gambar berikut:

Dan setelah saya paste dalam sebuah notepad/wordpad/ms word,etc hasilnya akan tampil seperti ini:

Sobat dapat lihat barisan kode yang saya beri tanda merah,setiap pengunjung mengcopy dari konten blog ini maka (jika script ini masih bekerja pent-) tulisan Read More bla bla bla.. akan turut serta setelah penginjung tersebut melakukan paste dari konten yang sebelumnya telah ia copy.(ribet banget si ngejelasinnya :()

Langkah dan Cara Melindungi / Memproteksi Artikel Posting dari Copy Paste

Sebenarnya tidak dapat juga dibilang 'melindungi' hanya 'menambah kerjaan' dari si tukang copas tersebut,apa kerjaanya? ya...ngapus 'read more' yang tadi beg* hehe (no sara,piss)

Oke,caranya gamapang sob,kunjungi www.tynt.com



Lakukan registrasi seperti gambar berikut (penting:untuk nama blog jangan menggunakan tanda 'slash' dibelakang [dot] com,misal jangan menggunakan nama_blog.blogspot.com/ tapi tulis nama_blog.blogspot.com saja tanpa tanda 'slash' or '/' dibelakangnya):


Setelah itu agan copy script kode yang diberikan lalu klik tombol finish,lihat gambar gan:



Misal kode script yang kami pelajaran blog dapat adalah seperti ini:

<!-- BEGIN Tynt Script -->
<script type="text/javascript">
if(document.location.protocol=='http:'){
var Tynt=Tynt||[];Tynt.push('ah3odeR-mr4z_wacwqm_6r');Tynt.i={"ap":"Read more:"};
(function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
}
</script>
<!-- END Tynt Script -->

Lalu dimanakah kode tersebut harus diletakkan?
pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3)


(1)


(2)


(3)

Setelah itu cari kode <head> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode <head> letakkan persis diBAWAHNYA kode script yang sobat dapat dari tynt.com lalu simpan.

Uji coba dengan mengcopy konten blog sobat dan paste kedalam notepad atau semacamnya,apa yang terjadi? hehehe moda berhasil and specially thanks to tynt.com

Membuat Efek Gelembung Busa

Buat ngisi blog biar ga terlalu lama vakum..
Tahukah kamu sobat blogger salah satu cara menjadikan blog kamu menjadi super alay.

Ya,artikel ini sudah dipublikasikan beberapa abad yang lalu,pasalnya tetap tidak dapat bekerja,benarkah seperti itu?

Pembaca: script ini bekerja kok mas..
Pelajaran Blog: bilang aja ga bekerja scriptnya...
Pembaca: dibilang bekerja juga,ngeyel..
Pelajaran Blog: memangnya sudah kamu praktekkan?
Pembaca: sudah dong! makanya gw bilang kode script ini bekerja bego!
Pelajaran Blog: oh,ya udah.. jadi artikel gw copas aja ya..
Pembaca: YA ALLAH!!!! AMBILLAH AKU!!!! @#$%^#$^#$%^

Hehehe..

Intinya gan,artikel ini saya copas dari tetangga sebelah di:
http://www.bloggerclick.com
,hasil dari efect ini sobat biosa lihat gambar diatas,untuk caranya sobat bisa ikuti langkah berikut:

Pilih Tata Letak / Rancangan,dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (1)





Selanjutnya pilih HTML/Javascript kemudian letakkan kode berikut:

<script src="http://clief.googlecode.com/files/bubble.js"></script>

Lalu simpoan template sobat,moga berhasil ya :D