Cara memasang komentar Facebook di blog

Hallo sobat Ladang Pengetahuan sekalian, ini adalah postingan kedua Ladang Pengetahuan di tahun baru 2013. Udah jarang gak ngeposting. Hehehe....

Facebook adalah jejaring sosial yang paling banyak dipakai oleh pengguna di seluruh dunia termasuk Indonesia. Facebook menyediakan banyak fitur salah satunya adalah komentar Facebook. Setiap komentar yang dilakukan di Facebook pasti akan muncul di pemberitahuan pengguna ataupun di beranda pengguna.

Blog akan menjadi lebih lengkap jika ditambahkan komentar Facebook di dalamnya. Setiap orang yang komen blog kita dengan menggunakan komentar Facebook secara otomatis akan muncul di Profil atau pun di Beranda Facebook nya dan dilihat oleh teman-temannya di Facebook. Secara otomatis salah satu dari teman mereka akan berkunjung dan ikut berkomentar di blog kita.

Baiklah sobat Ladang Pengetahuan untuk mempersingkat waktu saya akan berbagi Tutorial Cara memasang komentar Facebook di blog.

1. Login ke dasbor blog sobat
2. Pilih Rancangan > Edit HTML
3. Jangan lupa centang Expand Template Widget
4. Kemudian cari kode <b:includable id='comment_picker' var='post'> dengan cara tekan di keyboard Ctrl + F lalu ketik kode tersebut
5. Coba sobat perhatikan di atas kode <b:includable id='comment_picker' var='post'> terdapat kode </b:includable>, paste kan kode dibawah ini tepat diatas kode </b:includable> tadi

<b:if cond='data:blog.pageType == "item"'> <p align='left'> <a href='http://williancessna.blogspot.com/2013/01/cara-memasang-komentar-facebook-di-blog.html' target='new'><img border='0' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpEwtXHYAOneipbrfTFiwrNn13N4oEigbSFC0XpdKlggtivQcMmSs-KlQF3DiRF6NCVv6zJI80ivVnQO4_zeqZPmq3kacJMz_1vE8fl2_RtIWDrMmIVePAgx3q6AaMOMGSTl0hVoNrAF4/s1600/co mment.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>
    6.  Kemudian simpan template dan hasilnya akan muncul seperti ini sebelum di komentar blog

Sekian dari Ladang Pengetahuan, semoga tutorial ini berguna bagi sobat sekalian.

Cara memasang nomor halaman (Page Number) di blog

Apa kabar sobat semuanya, lama gak ngeposting. 

Nomor halaman sangat penting pada sebuah blog atau situs web untuk memudahkan pengunjungnya untuk mencari artikel pada sebuah blog tersebut dengan menandai nomor halaman yang ada di blog / situs web tersebut. Untuk kesempatan ini Ladang Pengetahuan akan berbagi Tutorial Blog yaitu Cara memasang nomor halaman di blog.

Karena admin udah ngatuk, langsung saja ke permasalahan. Hehehe

Langkah-langkahnya :

   1.  Login ke dasbor blogger sobat

   2.  Pilih Template >> Edit HTML

   3.  Cari kode ]]></b:skin> dengan cara menekan Ctrl F lalu ketikkan ]]></b:skin>

  4.  Setelah kode tersebut ketemu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi

.showpageArea {font-family:verdana,arial,Helvetica;color: #000;font-size:11px;margin:10px;} .showpageArea a {color: #000;text-shadow:0 1px 2px #fff;font-weight: 700;} .showpageNum a {padding: 3px 8px;margin:0 4px;text-decoration: none;border:1px solid #3d85c6; -webkit-border-radius:3px;-moz-border-radius:3px; background: #ddd url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk-HKfuOJHs66oXaRBbhyN6S_syCvXATKnl4s1djMT-IE5hExY1eVKVDX3ufrveKX8aNgKlAw8NsiqvGAQnwXImp4lTxx_HT497sBxLly129HqGVI3-YQT41xsXlLIq2QZNNbXACxBLEo/s1600/halaman.jpg) 0 -50px repeat-x;} .showpageNum a:hover {border:1px solid #aeae0a; background: #ccc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk-HKfuOJHs66oXaRBbhyN6S_syCvXATKnl4s1djMT-IE5hExY1eVKVDX3ufrveKX8aNgKlAw8NsiqvGAQnwXImp4lTxx_HT497sBxLly129HqGVI3-YQT41xsXlLIq2QZNNbXACxBLEo/s1600/halaman.jpg) 0 -25px repeat-x;} .showpageOf{margin:0 8px 0 0;} .showpagePoint {color:#fff;text-shadow:0 1px 2px #333;padding: 3px 8px;margin: 2px;font-weight: 700; -webkit-border-radius:3px;-moz-border-radius:3px; border:1px solid #919106; background: #666 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk-HKfuOJHs66oXaRBbhyN6S_syCvXATKnl4s1djMT-IE5hExY1eVKVDX3ufrveKX8aNgKlAw8NsiqvGAQnwXImp4lTxx_HT497sBxLly129HqGVI3-YQT41xsXlLIq2QZNNbXACxBLEo/s1600/halaman.jpg) 0 0 repeat-x; text-decoration: none;   5.  Selanjutnya cari kode </body>, setelah bertemu letakkan kode dibawah ini tepat diatas kode tersebut
<b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> var pageCount=5; var displayPageNum=5; var upPageWord ='Sebelumnya'; var downPageWord ='Selanjutnya'; </script> <script src='http://papawardi.googlecode.com/files/navigasiku.js ' type='text/javascript'/> </b:if>    6.  Dan terakhir Simpan Template sobat, maka dibawah blog akan muncul nomor halaman seperti         dibawah ini

Sekian dari Ladang Pengetahuan, semoga bermanfaat....

Cara membuat daftar isi blog dengan jjquery

Selamat sore sobat blogger, sore yang sangat panas disini. Untuk mengisi waktu yang kosong ini ane sharing ilmu blogging kepada sobat yaitu membuat daftar isi blog dengan tampilan jjquery. Berikut contoh screenshoot menu jjquery dari blog ane.

Gimana? 

Keren kan sobat?

Berikut langkah-langkahnya bagi yang ingin mencobanya.

1.  Login terlebih dahulu ke dasbor blogger sobat

2.  Kemudian pilih Tempalte > Edit HTML

3.  Jangan lupa ceklis Expand Widget Template

4.  Setelah itu sobat cari kode ]]></b:skin> dengan cara tekan Ctrl F lalu ketikkan kode tersebut

5.  Setelah ketemu, letakkan script berikut ini diatas kode ]]></b:skin> tadi

/* Daftar Isi With JQuery */ #dafis-acc{ font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#333; background:url(http://1.bp.blogspot.com/- Q0gQpqnpwdw/TggUQZh1y3I/AAAAAAAAANg/-9rHKcaz5JU/s320/bg5.gif) repeat-y scroll left center #E7F7FB; padding:2px 0; border:1px solid #339DC6; } .dafislabel{ background:url(http://2.bp.blogspot.com/- SlHI9wfcEy0/TggUQSS6hBI/AAAAAAAAANY/osNWdKWUfZQ/s1600/bg4.gif) repeatx scroll 0 0 #E1F4FB; font-weight:bold; line-height:1.4em; overflow:hidden; whitespace: nowrap; vertical-align: baseline; margin: 1px 3px; outline: none; cursor: pointer; text-decoration: none; padding: 2px 10px; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.3); border:1px solid #2F94BA; } .dafis-label:hover{ background:url(http://3.bp.blogspot.com/- x7WFTrEvdnY/TggUQNCYIkI/AAAAAAAAANQ/i8ZH9H_K_bg/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB; color:#003366; } .dafis-daf ol{ margin:0 0 0 30px !important; padding:0 !important; } .dafis-daf ol li{ background-color:#C9E9F4; lineheight: 1.5em; margin:1px 3px !important; white-space:nowrap; text-align:left; border:1px solid #339DC6; } .dafis-daf ol li a{ text-decoration: none !important; color:#333 !important; display:block; padding-left:10px; } .dafis-daf ol li a:hover{ background: #7BC4DF; border-left: 5px #333 solid; padding-left: 5px; textshadow: 0 1px 1px rgba(0,0,0,.3); }
6.  Selanjutnya cari kode </head> dan letakkan kode dibawah ini tepat diatas kode tersebut
         <script src='http://dapurtutorial8.googlecode.com/files/Scriptdaftarisi1.js'
            type='text/javascript'/>

7.  Simpan Template sobat
8.  Buat-lah sebuah postingan atau halaman dan pilih mode HTML, buat dengan judul Daftar Isi /
     Sitemap atau sesuka hati sobat.
9.  Lalu copy paste script dibawah ini
            <script type="text/javascript"
            src="http://dapurtutorial9.googlecode.com/files/Scriptdaftarisi2.txt"></script>
            <script src="http://williancessna.blogspot.com/feeds/posts/summary?maxresults=
            1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

10. Gantilah tulisan yang berwarna biru tersebut dengan url blog sobat.

Sekian dan liat hasilnya.
Semoga bermanfaat.....

Cara Memasang Button Print Pada Blog

Selamat malam sobat sekalian dimanapun berada. Kali ini Ladang Pengetahuan akan berbagi Tips Ngelog atau Tutorial Blog yakni Cara Memasang Button Print Pada Blog.

Ngeblog memang memberikan kesenangan tersendiri bagi para blogger apalagi blog tersebut banyak pengunjungnya. Para pengunjung blog mencari artikel yang mereka butuhkan misalnya untuk buat tugas dan lainnya. Hal tersebut mereka lalukan dengan melakukan copas pada artikel blog tersebut dan kemudian meng-copy nya ke word dan terakhir di print dari word.

Nah… Sekarang bagi para sobat yang ingin langsung pengunjungnya nge-print langsung dari blog nya bisa dipasang button print untuk mem-print artikelnya yang ada di blog sobat.

Terlalu banyak basa basi…. Hahaha

Baiklah langsung ke langkah-langkahnya :

       1.  Login ke Dasbor Blog sobat

       2.  Pilih Tata Letak >> Tambah Gadget

       3.  Pilih Javascript HTML kemudian copy-an script dibawah ini

              <a href="javascript:window.print()"><img

              scr="http://i396.photobucket.com/albums/pp48/putro16/iconprint.png" alt="print this page"

              order="0"/>&#160;Print this</a>

       4.  Kemudian Simpan dan Lihat hasilnya.

Ket :

• Tulisan berwarna merah adalah link untuk gambar print, bisa diganti sesuka sobat.
• Tulisan berwarna biru adalah Tulisan disamping button print (keterangannya), kalau tidak suka bisa dihapus.

Nahh… sekarang button print sudah terpasang di blog sobat. Selamat mencoba J

Cara memasang Running Text dibawah Blog

Memperindah blog banyak sekali caranya termasuk dengan menyelipkan Running Teks dibawah Blog kita. Bagi sobat Ladang Pengetahuan yang ingin memasang Running Text dibawah blognya, berikut langkah-langkahnya :

      1.  Login ke Dasbor blogger sobat terlebih dahulu

      2.  Pilih Rancangan > Edit HTML

      3.  Lalu kasih centang pada Expand Template Widget

      4.  Cari kode </body> dengan cara tekan Ctrl + F dan ketikkan </body>

      5.  Paste kan kode dibawah ini tepat dibawah kode tadi 

<center><div id='hehehe_asepjikuganteng' style='' width='100%'><marquee direction='left'><img  src='http://i759.photobucket.com/albums/xx232/asepjiku/hihi/3.gif'/><a style='font-size: 20px; color: rgb(255, 0, 0);'>Kalimat anda</a></marquee></div></center>

      6.  Lalu simpan dan lihat hasilnya

Ket :

• Huruf yang berwarna merah adalah link file gif yang juga ikut berjalan dengan Running Text tersebut. Bisa sobat ganti dengan yang lain.
• Huruf yang berwarna biru adalah kalimat yang akan sobat buat dibawah blog sobat. Silahkan masukkan kata sesuka hati sobat.

Demikianlah Cara memasang Running Text dibawah Blog oleh Ladang Pengetahuan. Semoga ini bermanfaat bagi sobat sekalian.

Cara memasang TV online di blog

Salam hangat sobat blogger...

Kali ini saya akan berbagi kepada sobat untuk memperindah blog sobat sekalian yaitu dengan memasang TV online di blog.

Zaman sekarang TV online bukan lah hal yang asing buat para Netter sekalian. Banyak sekali situs TV online yang bertebaran saat ini. Tapi alangkah bagusnya TV online tersebut berada di blog kita, jadi pengunjung bisa menonton lewat blog kita ketika sedang berkunjung ke blog kita.

Langsung ke permasalahan

1. Pertama login dulu ke dashbor blogger anda
2. Pilih Tata Letak >> Tambah Gadget
3. Copy kan scirpt dibawah ini

<embed align="top" allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" height="790" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + '" type="application/x-shockwave-flash" width="100%" wmode="transparent"></embed>

    4. Save dan lihat hasilnya

Atau bisa diletakkan di lama blog, yaitu masuk ke dasbor blog lalu pilih laman >> laman kosong lalu pilih HTML jangan yang Compose dan copy kan script tersebut dan publikasikan.

Sekian Cara memasang TV online di blog dari saya. Semoga ini bermanfaat bagi sobat sekalian.

Cara Membuat Tombol Like Facebook di Blog

Kali ini saya akan membahas bagaimana cara membuat tombol like facebook dibawah judul posting blog, bagi kamu yang ingin membuat tombol like ini, kesempatan bagus apalagi diletakannya dibawah judul posting. Disini tombol like facebooknya ada tiga model, jadi pilih salah satu saja

Dengan memasang tombol like facebook kamu akan mengetahui seberapa bagus artikel anda disukai oleh pengunjung blog anda.

Berikut cara membuat nya :

1. Login ke blog kamu.
2. Pilih Rancangan.
3. Pilih EDIT HTML.
4. Cari kode <data:post.body/>
5. Setelah ketemu pilih salah satu kode dari tiga kode yang akan saya berikan, dan letakan diatas kode nomor 4.

1. Kode Pertama, Tombol Like Vertikal Dengan Count (Hitungan)

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>

2. Kode Kedua, Tombol Like Horizontal Dengan Count (Hitungan)

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

3. Kode Ketiga, Tombol Like Tanpa Count (Hitungan)

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>

Letakan salah satu kode diatas, tepat diatas kode nomor 4 tadi.
Ingatpilih salah satu saja, jangan semuanya, nanti gagal.

Simpan Template, dan lihat hasilnya. 

Cara Memberi Efek Daun Berjatuhan di Blog

Efek daun berjatuhan di blog sepertinya juga banyak diminati oleh sobat blogger, dan menurut saya efek daun berjatuhan ini loadingnya lebih ringan dan cepat ketimbang efek bintang bertaburan yang saya posting sebelum ini. Trik membuat efek daun berjatuhan ini juga masih menggunakan javascript, cara membuatnya simak lebih lanjut dibawah ini.

Cara Membuat Efek Daun Berjatuhan :

1.      Login dulu ke dashboard blogger anda.

2.       Pilih Rancangan > Edit HTML, centang Expand widget template.

3.       Cari kode </head>  pada template dengan menggunakan Ctrl+F.

4.       Copy kode javascript dibawah ini dan letakkan tepat diatas kode </head> .

<script src='http://arti.master.irhamna.googlepages.com/daun.js'/>

5.       Save / simpan template anda dan lihat hasilnya keyeeennn !!

Nah itu tadi langkah-langkah bagaimana cara membuat efek daun berjatuhan di blog, cukup mudah bukan ? Jangan lupa daun-daunnya kalo sudah kebanyakan yang jatuh sambil di sapu ya he he…

Cara Membuat Tombol Like Facebook

Tutorial Blog Cara Membuat tombol suka/like Facebook

Like/Share Box for Blogger

Trafik adalah kunci kesuksesan sebuah blog, dan konten yang menarik adalah syarat utama blogger yang baik. Apresiasi atas sebuah konten yang menarik itu akan menghasilkan trafik yang natural, inilah yang paling disukai oleh Google ketimbang memaksakan SEO tanpa konten yang berguna. Tombol LIKE Facebook bisa dijadikan alat untuk mengikat hati pengunjung yang menyukai tulisan anda di blog. Untuk memasang tombol LIKE ini, caranya gampang saja:

1. Cari menu Layout - Edit HTML di Dashboard blog anda.
2. Back up Template template anda sebelum mengubah HTML untuk menjaga agar template bisa dikembalikan jika ada kesalahan! KlikDownload Full Template.
3. Jangan lupa centang (tandai) "Expand Widget Templates".
4. Carilah kode <div class='post-header-line-1'/> dan tambahkan kode dibawah ini persis sesudah kode tersebut:

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show-faces=true&amp;width=530&amp;height=60&amp;action=like&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:530px; height:60px'/>

5.  Carilah kode <p><data:post.body/></p> dan tambahkan kode seperti step 4 diatas persis sesudah kode tersebut:
6. Save dan lihat hasilnya

Customisasi kode:

•  show-faces=(true/false) untuk menampilkan foto pengunjung yang me like
•  width=530&amp;height=60 untuk mengakur lebar dan tinggi tombol
• action=(like/share) untuk mengatur fungsi tombol, menjadi tombol suka atau berbagi

Cara Membuat Menu Horizontal di Blog

Menu Horizontal Blog biasanya dibuat para Blogger bertujuan untuk memudahkan pengunjung Blog saat berkunjung ke Blog tersebut dan Membuat Blog agar terlihat lebih Profesional. Dari segi bentuk, Menu Blog terbagi atas 2 macam, ada yang berbentukMenu Blog Horizontal dan ada Menu Blog Vertikal.  Menu Blog Horizontal bentuknya menyamping dari sebelah kanan ke sebalh kiri. Sedangkan Menu Blog Vertikal bentuknya dari atas ke bawah. untuk Cara Membuat Menu Horizontal di Blog bisa dilakukan dengan berbagaim macam cara, diantaranya bisa dengan langsung mengedit HTML Template Blog atau dengan menambahkan Gadget Laman. Bagi pengguna blogger atau blogspot berikut Cara Membuat Menu Horizontal pada Blog tanpa harus mengedit HTML Template blog:

1. Buka halaman Blogger  dan silahkan “Log in”
2. Pilih “Rancangan”
3. Pada tab “Element Laman” klik “Tambah Gadget”

4. Langkah selanjutnya pilih Gadget bernama “Laman”

5. Setelah memilih Gadget Laman maka akan muncul Menu “Konfigurasikan Daftar Laman”

6. Untuk kolom “Judul” dan “Home” bisa diganti sesuai selera

7. Kemudian pindahkan Menu Lama yang tadi dibuat ke bawah header blog

8. Tutorial selanjutnya Cara Menambahkan Menu Laman yang lainnya, misalnya seperti Menu “Contact” – “Sitemap” – “Exchange” – “Blogrool”

9. Untuk menambahkan Menu Laman klik “Postingan” pilih “Edit Laman”

10. Klik “Laman Baru” dan tulis Judul Laman beserta isinya seperti membuat postingan blog biasanya

11. Terakhir klik “Terbitkan Entri” dan lihat hasilnya

Sumber http://valven-blogger.blogspot.com/2012/01/cara-membuat-menu-horizontal-blog-2012.html