Bagaimana menambahkan tombol Facebook Like pada Situs / Blog ?

Tombol Like ini dapat digunakan kedalam Situs, Blogger dan Wordpress Blog. Untuk itu saya akan membagi 3 kategori cara memasukkan tombolnya :

A. Situs/Website

Jika anda ingin menambahkan tombol Facebook like pada sebuah situs, kita cukup menambahkan baris kode HTML berikut ini :

<iframe src="http://www.facebook.com/widgets/like.php?href=http://www.belajarpc.info"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:40px"></iframe>

B. Blogger

Jika anda ingin menambahkannya kedalam Blog blogspot, berikut langkah-langkahnya :

1. Login ke Blogger Account dan pilih Layout > Edit HTML dan klik pada check box “Expand Widget Templates”

2. Cari tag <data:post.body/> lalu pastekan code dibawah ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>
</b:if>

C. Wordpress Blog

Untuk menambahkan tombol Facebook Like pada blog Wordpress, kita harus menambahkan code dibawah ini pada file index.php di template wordpress anda, yang tersimpan dalam folder themes.

Silahkan tentukan sendiri peletakan posisi yang diinginkan, pastekan code ini :

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?> &amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:40px"></iframe>

Dari ketiga proses diatas yang berbeda sebenarnya hanya pada bagian :

• href=http://www.belajarpc.info"
• href=&quot; + data:post.url + &quot;
• href=<?php the_permalink(); ?>

Wordpress merupakan suatu platform blog yang kepopulerannya sama dengan Blogger. Perbedaan antara  terletak antara user interface, bahasa pemogramman yang digunakan. Blogger lebih dominan menggunakan HTML, sedangkan wordpress dominan menggunakan PHP. User interface blog blogger memang terlihat agak kaku, tapi kita bisa membuatnya menjadi dinamis dengan script-script java, sedangkan pada wordpress, control panel blognya mempunyai interface dinamis, sedangkan blognya sama dengan blogger yang statis, itu memang jika kita belum mengolahnya.

Wordpress sendiri ada dua macam blog Wordpress, yaitu blog Wordpress di web hosting publik  milik Wordpress jadi kita hanya mendaftar untuk mendapatkannya, atau Wordpress hostingan pribadi. Jika kita belum punya web hosting, maka kita bisa menggunakan Wordpress dari web hosting Wordpress langsung, sedangkan jika sudah punya maka kita bisa mendownload file applikasi webnya kemudian kita menginstallnya ke web hosting pribadi.

Sekarang saya akan menjelaskan cara menginstall Wordpress di web hosting local. Maksudnya web hosting tersebut tidak berada di Internet tetapi ada di komputer kita. Jadi kita hanya butuh download file untuk menginstallnya saja. Tidak butuh Internet untuk mengatur blog kita.

Untuk persiapan anda harus mendownload applikasi web server seperti AppServ (link) dan Wordpress (link). Anda bisa menggunakan applikasi web server yang lain untuk mempraktekkannya. Tetapi saya hanya menggunakan AppServ untuk mempraktekkannya.

1. Setelah Applikasi AppServ tersebut di download, maka install applikasi tersebut. Klik dua kali file tersebut. Maka akan keluar jendela seperti ini.

   

2. Kemdian keluar jendela License Agreement. Klik “I Agree”.

   

3. Setelah itu keluar jendela Choose Install Location. Pada Destination Folder tentukan dimana appilkasi web server tersebut diinstall. Setelah itu klik Next.

   

4. Checklist semua komponen web server tersebut. Kemudian klik Next

   

5. Pada Server Name ketikan nama Web Servernya. Semisal localhost. Kemudian pada Administrator’s Email ketikan email anda. Dan isi 80 di Apache HTTP Port. Klik Next.

   

6. Ketik password Server MySQL anda di Enter root password. Kemudian ulangi lagi Re-Enter root password. Klik Install.

   

7. Kemudian proses penginstallan pun berlangsung. Tunggu sebentar.

   

8. Jika keluar peringatan Firewall seperti ini, klik saja Unblock.

   

9. Setelah proses install selesai. Keluar jendela seperti berikut. Checklist keduanya dan klik finish. Selesai sudah penginstall Web Server di komputer anda. Tahap selanjutnya adalah pengistallan Wordpress di Web Server anda.

   

10. Buka file Wordpress yang anda download tadi. Kemudian, di dalamnya akan ada folder wordpress. Pada kemudia extract folder tersebut ke C:\AppServ\www
    Jika sebelumnya anda menginstall AppServ di partisi yang lain maka ubah C menjadi tempat diamana AppServ diinstall.

    
    

11. Setelah terextract, buka folder C:\AppServ\www pastikan bahwa folder wordpress ada di sana. Jika belum maka coba extract ulang. Buka folder wordpress tersebut.

    

12. Di dalam folder wordpress akan ada file bernama wp-config-sample , ubah namanya menjadi wp-config .

    

13. Setelah itu jangan ditutup dulu Windows Explorer anda tadi. Sekarang buka web browser anda. Ketikan alamat http://localhost/phpmyadmin . Kemudian akan ada jendela login. Ketikan root di Username. Dan di password ketikan password MySQL yang anda set tadi di langkah ke 6.

    

14. Setelah proses login berhasil, kemudian buat database baru. Ketikan nama database terserah anda, semisal wordpress. Ketikan wordpress tersebut di tempat seperti gambar berikut. Kemudian klik Create atau Ciptakan. Bahasa yang tampil tergantung juga pada bahasa web browser yang anda gunakan.

    

15. Setelah selesai membuat database. Kembali lagi ke Windows Explorer. Sekarang buka file wp-config tersebut dengan notepad atau yang lainnya. Di dalam file tersebut ganti isinya menjadi berikut:
    1. putyourdbnamehere ubah menjadi nama database yang dibuat tadi pada langkah 14.
    2. usernamehere ubah menjadi root
    3. yourpasswordhere ubah menjadi password MySQL anda yang di set pada langkah 6. Kemudian save.

       

16. Setelah file yang diubah tersebut di save, buka web browser anda kembali, kemudian ketik alamat http://localhost/wordpress
    Kemudian akan ada forum isian, pada Blog Title isi dengan judul blog anda, dan di Your E-Mail isi dengan email anda. Setelah itu klik Install Wordpress.

    

17. Kemudian anda akan diberi username dan password untuk login ke wordpress anda. Catat username dan password tersebut. Untuk password anda bisa ubah ketika anda login ke control panel Wordpress anda. Sedangkan username tidak bisa diubah. Sekarang klik saja Login untuk masuk ke control panel Wordpress anda.

    

18. Isikan username dan password dengan isi yang telah anda catat tadi.

    

19. Setelah anda masuk. Anda disarankan untuk mengubah password anda. Klik saja tulisan Yes, Take me to my profile yang berwarna merah di atas.

    

20. Setalah itu di bagian bawah akan anda form New password. Isikan password password baru wordpress anda. Harap ingat password baru anda. Karena password baru  itu akan ditetapkan sebagai password ketika anda login ke control panel wordpress. Setelah itu klik Update Profile.

    

Selesai! Sekarang anda punya blog di komputer anda sendiri. Dan bisa membukanya secara pribadi tanpa internet. Untuk alamatnya sendiri yaitu http://localhost/wordpress. Nama wordpress tersebut bisa di ubah dengan cara mengubah nama direktori wordpress yang ada di folder C:\AppServ\www

Jika anda pernah menggunakan Facebook dan Twitter, ada fasilitas berbagi yang bisa diintegrasikan pada blog yaitu seperti Tombol Facebook Share dan Retweet. Sehingga akan memudahkan pengunjung blog kita untuk melakukan sharing informasi kepada jaringannya. Begitu pula dengan Google Buzz.

Nah sekarang kita akan coba membuat tombol untuk sharing informasi dengan menggunakan Google Buzz pada blogspot.

Adapun langkah-langkahnya adalah sbb :

1. Login kemudian pilih Layout > Edit HTML dan klik Expand widget templates.

2. Kopikan kode dibawah ini dibawah :

&lt;div style=&quot;float:<em>right</em>;padding:4px;&quot;&gt;
&lt;a expr:href='&amp;quot;http://www.google.com/reader/link?url=&amp;quot; + data:post.url + &amp;quot;&amp;amp;title=&amp;quot; + data:post.title + &amp;quot;&amp;amp;srcTitle=&amp;quot; + data:blog.title+ &amp;quot;&amp;amp;srcURL=&amp;quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'&gt;
&lt;img alt='Buzz It' src='<b>http://lh6.ggpht.com/_FuXX2m46MaY/S3w9LFvtEhI/AAAAAAAAAVg/343DQn_ZFzc/buzzit.png</b>' style='border:0px;'/&gt;&lt;/a&gt;
&lt;/div&gt;

4. Pastekan kode dibawah kode berikut :

<div class='post-header-line-1'/>

atau bisa juga diletakkan sebelum kode :

<data:post.body/>

5. Simpan template anda, dan lihat hasilnya. Atau bisa dilihat di PC Guru Box.

Sebagai contoh anda dapat melihat pada blog ini. Disini saya mencoba membuat dua halaman yaitu About Me dan Contact Me. Dengan adanya fitur halaman ini kita bisa lebih leluasa mengembangkan blog. Membuat halaman pada blog semudah kita melakukan posting artikel. Tinggal pilih menu New Page, kemudian ketikan konten yang diinginkan, lalu pilih posisi peletakan pada template, publish. Jadi deh halaman anda.

Makin Penasaran ajakan ? Kalo iya, ayo kita coba untuk membuatnya. Adapun langkah-langkah untuk membuat halaman adalah sbb :

1. Login ke situs draft.blogger.com.

2. Pada Tab Menu Post, klik Edit Pages.

3. Lalu Pilih New Page. Dan Isikan Judul Halaman pada Page Title, dan ketikan informasi yang ingin disampaikan pada editor blogger. Jika selesai, Klik Tombol Publish Page.

4. Berikutnya kita diminta untuk memilih lokasi peletakan Halaman pada Blog. Bisa diletakkan pada Sidebar, Menu Tab atau dibuat menu link tersendiri. Jika telah dipilih, klik Tombol Save And Publish.

5. Jadilah halaman anda. Silahkan lihat hasilnya pada blog anda.

*) Sebagai catatan, anda hanya bisa menambahkan halaman maksimum sampai 10 halaman, jadi gunakanlah dengan semaksimal mungkin .

Ternyata juga tidak terlalu sulit. Mau tau caranya ? Saya akan membantu teman-teman untuk mewujudkannya, Penulisan kode apa saja yang bisa dilakukan dengan Syntax Highligter ?Diantaranya adalah : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt. Sangat banyak bukan ?

Adapun langkah-langkahnya adalah sebagai berikut :

1. Login dan Klik "Layout" > "Edit HTML" dan klik “Expand Widget Templates”.

2. Klik situs http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css, kemudian copy semua kode yang ada.

3. Paste code css tersebut sebelum tag berikut ]]--></b:skin>

4. Kemudian copykan kode berikut ini sebelum tag </head> :

<!– Add-in CSS for syntax highlighting –>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js’ type=’text/javascript’></script>
<script src=’http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js’ type=’text/javascript’></script>

5. Langkah terakhir adalah memasukkan kode dibawah ini sebelum tag </body> :

<!– Add-in Script for syntax highlighting –>
<script language=’javascript’>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll(‘code’);
</script>

6. Untuk menuliskannya kedalam blog, gunakan format seperti dibawah ini :

<pre name="code" class="html">
….ketikkan kode yang anda inginkan disini….!
</pre>

Untuk menuliskan kode tertentu, silahkan ubah tulisan yang berwarna merah (html) dengan jenis kode yang ingin dituliskan, seperti : cpp, c, c++, c#, c-sharp, csharp, css, delphi, pascal, java, js, jscript, javascript, php, py, python, rb, ruby, rails, ror, sql, vb, vb.net, xml, html, xhtml, xslt

Sebagai contoh hasilnya bisa dilihat pada blog ini Syntax Highlighter Kode.

Bingung milih-milih template untuk blogger blog ? Dibawah ini ada beberapa kumpulan template yang mungkin cocok dengan anda. Template dibawah ini memiliki design yang elegant dan rapi. Bagi yang menyukai kerapian dan kesederhanaan tampilan, barangkali ada yang cocok dengan template dibawah ini.

Untuk keterangan lebih terperinci tentang template tersebut, silahkan klik pada gambar.

Arclite | demo | download

Evidens White | demo | download

Grante | demo | download

ImpreZZ | demo | download

Leopress | demo | download

Marikit | demo | download

Masunurin | demo | download

Music Globe | demo | download

Mystique | demo | download

Rockstar | demo | download

Schemar Mag | demo | download

Scrappy | demo | download

StudioPress Red | demo | download

Woody | demo | download

Apa yang berbeda dari versi label terdahulu ? Pada versi label terbaru terdapat beberapa kelebihan, yaitu :

1. Hadir dengan Label Versi Cloud
2. Label yang ditampilkan dapat dipilih sesuai dengan keinginan.
3. CSS dapat dimodifikasi sendiri oleh blogger mania.

Nah dengan label terbaru ini, sahabat blogger tidak perlu bersusah payah lagi membuat Label / Tag Cloud

Dan juga, label yang ingin ditampilkan dapat dipilih-pilih sesuai dengan selera.

Udah tahukan informasinya ? Keep Blogging

Template yang ada memiliki tampilan yang unik. Ada yang bisa digunakan pada platform Wordpress ada juga yang menggunakan Blogspot. Jadi silahkan pilih template yang sesuai dengan platform yg digunakan.

1.	Woogle – Google Clone	Platform : Wordpress Size: 66,11 kBytes FileType: .zip-File Downloads: 6910 Demo : View [Download Now]
2.	Blogger Tube – Youtube Clone	Platform : Blogspot Size: 66,53 kBytes FileType: .zip-File Downloads: 16797 Demo : View [Download Now]
3.	Digg Like – Digg Clone	Platform : Wordpress Size: 66,53 kBytes FileType: .zip-File Downloads: 16797 Demo : View [Download Now]
4.	Google Chrome – Google Chrome Clone	Platform : Wordpress Size: 66,53 kBytes FileType: .zip-File Downloads: 16797 Demo : View [Download Now]
5.	Facebook Themes – Facebook Clone	Platform : Blogspot Size: 66,53 kBytes FileType: .zip-File Downloads: 16797 Demo : View [Download Now]

Informasi Bagian pertama akan menampilkan informasi tentang respon dari blog. Seperti informasi IP web server, RSS feed, file robots.txt, web caching dan mesin pencari Google dan  index di Bing search engine.

Bagian kedua akan menampilkan rincian teknis tentang blog.