Cara pasang widget popular post berwarna warni

Popular post adalah salah satu widget yang disediakan oleh blogger bagi memaparkan posting yang popular pada sesuatu bulan,minggu atau sepanjang masa.Anda boleh memilih bagaimana ia akan dipaparkan.Tutorial ini adalah cara untuk mengubahsuai paparannya dalam bentuk yang berwarna warni.

Langkah bagi membuatnya:

1.Masuk ke blogger dan masukkan widget popular post pada blog anda
   Pada dashboard pilih Layout>>Add A gadget

2.Pilih popular post dari senarai tersebut dan namakan widget tersebut dengan perkataan yang diingini.

3.Seterusnya pada template pilih Edit HTML

4.Cari kod ]]></b:skin> gunakan CTRL+F(rujuk sini)
Kemudian letakkan kod ini diatasnya

#PopularPosts1 ul{margin:0;padding:4px 0;list-style-type:none}
#PopularPosts1 ulli{position:relative;margin:4px 0;border:0;padding:10px}
#PopularPosts1 ulli:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ulli:first-child:after{content:"1"}
#PopularPosts1 ulli:first-child + li{background:#ff764c;width:87%}
#PopularPosts1 ulli:first-child + li:after{content:"2"}
#PopularPosts1 ulli:first-child + li + li{background:#ffde4c;width:84%}
#PopularPosts1 ulli:first-child + li + li:after{content:"3"}
#PopularPosts1 ulli:first-child + li + li + li{background:#c7f25f;width:81%}
#PopularPosts1 ulli:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ulli:first-child + li + li + li + li{background:#33c9f7;width:78%}
#PopularPosts1 ulli:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ulli:first-child + li + li + li + li +li{background:#7ee3c7;width:75%}
#PopularPosts1 ulli:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ulli:first-child + li + li + li + li + li +li{background:#f6993d;width:72%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li +li{background:#f59095;width:69%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:66%}
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ulli:first-child:after,
#PopularPosts1 ulli:first-child + li:after,
#PopularPosts1 ulli:first-child + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ulli:first-child + li + li + li + li + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:70px;height:70px;}
#PopularPosts1 ul li a{font-size:13px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
#PopularPosts1 img{
-moz-border-radius: 130px;
-webkit-border-radius: 130px;
border-radius: 130px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
padding:4px;
border:1px solid #fff !important;
}
#PopularPosts1 img:hover {
border-radius: 0 0 0 0;
-moz-transform: scale(1.2) rotate(-711deg) ;
-webkit-transform: scale(1.2) rotate(-711deg) ;
-o-transform: scale(1.2) rotate(-711deg) ;
-ms-transform: scale(1.2) rotate(-711deg) ;
transform: scale(1.2) rotate(-711deg) ;
}

5.Klik pada preview template untuk melihat paparannya.
6.Klik pada save template

Tukar perkataan post a comment dengan imej

Komen adalah satu cara yang baik bagi menjalin hubungan dan berinteraksi dengan pengunjung blog.Diakhir setiap posting mempunyai perkataan add a coment.Ia boleh ditukarkan kepada bentuk imej supaya nampak lebih menarik lagi.

Cara menukarnya:
1.Masuk ke Blogger>> Dashboard PilihTemplate ->Edit HTML

2.Cari kod yang berwarna merah(Ctrl+F) rujuk tutorial ini cara menggunakan fungsi search

<a expr:id='data:widget.instanceId + &quot;_comment-editor-toggle-link&quot;' href='javascript:void(0)'><data:postCommentMsg/></a>

Cari kod seterusnya <data:postCommentMsg/>,kelihatan seperti dibawah ini
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
Tukar <data:postCommentMsg/>dengan kod imej seperti dibawah

<img src="http://i219.photobucket.com/albums/cc282/garam63/comment5copy.png" border="0" alt="add a comment photo comment5copy.png"/>

<img src="http://i219.photobucket.com/albums/cc282/garam63/comment6copycopy.png" border="0" alt=" photo comment6copycopy.png"/>

<img src="http://i219.photobucket.com/albums/cc282/garam63/komen.png" border="0" alt=" photo komen.png"/>

<img src="http://i219.photobucket.com/albums/cc282/garam63/leaveacomment4.png" border="0" alt=" photo leaveacomment4.png"/>

4.Akhir sekali simpan template anda

Widget komen terbanyak dengan avatar

Widget ini adalah untuk memaparkan komen terbanyak diblog.Yang menarik tentang widget ini  adalah ia mempunyai avatar disamping bilangan komen.Pemasangannya adalah bagi menggalakan pengunjung memberi komen pada artikel diblog anda.

Cara pemasangannya:
1.Masuk keblogger
2.Pada dashboard pilih Layout dan klik pada Add a Gadget

 3. dan pilih HTML/Javascript

Masukkan kod berikut padanya:

<style type="text/css">
.top-commenter-line img {

-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.top-commenter-line .profile-name-link {padding-left:0;}
.top-commenter-line {margin: 3px 0;}
.top-commenter-avatar {vertical-align:middle;}
</style><br />
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var minComments = 1;        // minimum komen
var maxTopCommenters = 5;   // bilangan senarai top commentator
var excludeMe = true;       // true: tidak masukkan komen sendiri
var numDays = 0;            // komen sejak bila (ex. 30), atau 0 sejak dari mula
var excludeUsers = ["Anonymous", "someotherusertoexclude"];     // kecualikan username ini
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author;

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t;

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(//sdd+-c//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(//sdd+(-c){0,1}//, "/"+newsize+"/");

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
}

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date();

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  }

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t;

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue;

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  }

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  });

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
} 
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script><br />
<div style="text-align: center;">
<span style="font-size:11px;"><a href="http://teknikbuatblog.blogspot.com/2013/08/widget-komen-terbanyak-dengan-avatar.html" target="_blank">:: Dapatkan Widget Ini ::</a></span>

4.Klik save untuk melihat perubahannya.

Nota:
Untuk mengecualikan nama anda dari senarai ubah pada  someotherusertoexclude dengan nama anda

credit to MS-potilas  (http://yabtb.blogspot.com)

Recent comments dengan avatar

Recent comments adalah widget bagi memaparkan komen yang diterima pada posting blog anda.Kebiasaannyanya Cuma dalam bentuk teks sahaja,tapi kali ini agak menarik kerana akan memaparkan avatar disamping komen yang dibuat.

Cara membuatnya:
1.Masuk ke dashboard blogger,pilih layout dan klik add a gadget

2.pada paparan scroll ini pilih HTML/Javascript

3.masukkan kod berikut padanya

<style type="text/css">
ul.w2b_recent_comments {
    list-style: none;
    margin: 0;
    padding: 0;
}

.w2b_recent_comments li {
    background: none !important;
    margin: 0 0 6px !important;
    padding: 0 0 6px 0 !important;
    display: block;
    clear: both;
    overflow: hidden;
    list-style: none;
}

.w2b_recent_comments li .avatarImage {
    padding: 3px;
    background: #fefefe;
    -webkit-box-shadow: 0 1px 1px #ccc;
    -moz-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc;
    float: left;
    margin: 0 6px 0 0;
    position: relative;
    overflow: hidden;
}

.avatarRound {
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
}

.w2b_recent_comments li img {
    padding: 0px;
    position: relative;
    overflow: hidden;
    display: block;
}

.w2b_recent_comments li span {
    margin-top: 4px;
    color: #666;
    display: block;
    font-size: 12px;
    font-style: italic;
    line-height: 1.4;

}
</style>
<script type="text/javascript">
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 60,
 roundAvatar = true,
 characters  = 40,
 showMorelink = false,
 moreLinktext = "More »",
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
//]]>
</script>
<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/tbbcirclecomment.js"></script>
<script type="text/javascript" src="http://teknikbuatblog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script></div></div>
<span style="font-size:10px;"><a href="http://teknikbuatblog.blogspot.com/2013/08/widget-komen-terbanyak-dengan-avatar.html" target="_blank"> <center><font color="blue">**Dapatkan widget ini**</font></center> </a></span> 

Nota:
Tukarkan teknikbuatblog pada kod dengan nama blog anda
Tukarkan nilai “5” bagi memaparkan jumlah komen yang hendak dipaparkan
numComments  = 5
dan
&max-results=5
Untuk menukar saiz avatar ubah nilai 60 pada kod diatas.

Kredit untuk Hrish @ way2blogging.org

Cara pasang google map pada blog

Pemasangan google map membolehkan pelanggan mengetahui lokasi perniagaan anda.Ia adalah elemen utama bagi sesiapa yang menjalankan perniagaan online.Dengan pemasangan Google map ini membolehkan pelanggan mencari lokasi dengan lebih tepat.Jika anda ingin memasangnya pada blog berikut adalah caranya:

1.Masuk ke web https://maps.google.com/
2.Masukkan alamat pada ruangan search dan klik search.

3.paparan interaktif peta akan terpapar,anda boleh memilih untuk meletakkan peta satelit atau peta biasa .terdapat menu pilihan untuk meletakkan detail pada peta anda seperti foto dan sebagainya.

4.Klik pada butang link

5.Salin kod yang terpapar pada bahagian Paste HTML to embed in website

6.kemudian masuk ke blogger >>pada dashboard pilih pages>>new page>>blank page>>pilih tab  HTML dan masukkan kod tadi.Boleh juga diletakkan pada post anda,klik pada tab html pada posting dan salin kod tadi.

7.kemudian klik publish

Cara guna HTML editor terbaru blogger

HTML editor adalah tempat dimana kita boleh mengubahsuai template mengikut citarasa sendiri.Blogger telah mengeluarkan HTML editor terbaru.Sebelum ini anda perlu tandakan Expand widget template jika hendak memaparkan keseluruhan kod yang ada pada template.Berbeza dengan yang baru kita boleh memilih untuk terus ke widget widget tertentu pada template.Jika sebelum ini anda menggunakan fungsi search (Ctrl+F) pada browser (contohnya seperti Mozilla Firefox) untuk mencari kod pada template,pada HTML editor terbaru ini kod tidak akan dijumpai jika menggunakan Ctrl+F pada browser.

 Untuk mencari kod pada HTML editor terbaru ikutilah langkah berikut ini

Klik dimana mana bahagian didalam HTML editor dan tekan butang Ctrl + F pada keyboard.Ruangan search akan dipaparkan pada bahagian atas ruangan HTML editor.

 
Taipkan teks yang hendak dicari pada ruangan search dan tekan butang enter.Teks yang dijumpai akan dihighlightkan.Bagaimana pun sesetengah browser tidak boleh digunakan untuk mencari teks pada editor baru ini.Saya menggunakan Mozilla Firefox dan ia berfungsi.Editor lama rasanya lebih senang digunakan dan sesuai untuk kebanyakan browser .

Cara pasang widget Live Traffic

Widget live traffic memboleh anda mengetahui dari mana datangnya pengunjung sebaik saja mengunjungi blog anda.Jika anda ingin memasangnya.ikutilah langkah dibawah ini.

 

1.Masuk ke web feedjit.com
2.Klik pada choose your Feedjit

3.Pilih feedjit completely free dan klik pada sign up

4.Bahagian ini anda boleh mengubah saiz widget,background,jenis teks,border dan button

Pada bahagian bawah kita boleh memilih untuk memasang widget ini pada blogger blog,wordpress dan sebagainya. Kemudian klik pada go

5.Kemudian muncul instruction for installing on blogger

Klik pada butang click to open a new window and install on blogger.

6.Muncul Add Page element...Klik pada add widget

7.Live traffic telah siap dipasang pada blog anda

Cara pasang artikel terkait linkwithin

Widget ini akan memaparkan secara rawak artikel yang berada didalam blog anda.Pemasangan nya adalah baik kerana akan meningkat pageview bagi blog anda.Ia akan meningkatkan populariti blog yang memasangnya kerana kemungkinan pengunjung akan klik artikel lain yang terpapar pada widget ini.

 Cara memasangnya.
1.Masuk ke web linkwithin.com
2.Disebelah kanan akan terpapar satu form seperti dibawah ini

   Isikan maklumat berikut:
   Email:masukkan alamat email anda
   Bloglink:alamat blog anda yang bermula dengan http://
   Platform:pilih blogger
   Width: pilih bilangan artikel yang hendak dipaparkan.
Tick pada My blog has light text on a dark background jika blog anda mempunyai latarbelakang gelap dengan tulisan cerah.
Kemudian pilih get widget

3.Klik pada install widget

4.Pada page element pilih blog yang ingin dipaparkan linkwithin jika anda mempunyai lebih dari satu
   blog.Kemudian klik pada add widget

   
Masuk semula keblog anda widget tersebut akan terpapar.Kedudukan dibawah posting adalah yang terbaik.Jika berada ditempat lain anda boleh pindahkannya.

Cara memindahkannya:
Kemudian masuk pada dashboard blog anda
Pilih layout  dan kedudukan linkwithin akan terpapar.Anda Cuma perlu seret dan ubah kebawah ruangan catatan blog.

Cara buat borang tempahan

Dunia perniagaan secara online berkembang pesat,mempunyai satu laman web atau blog perniagaan adalah perlu bagi peniaga memperkenalkan jualan masing masing.Borang tempahan adalah suatu kemestian bagi sesuatu blog atau web perniagaan bagi membolehkan pelanggan memesan sesuatu barangan.Untuk tutorial kali ini saya akan tunjukan cara membuat borang tempahan yang membolehkan pelanggan memesan barangan dari laman blog perniagaan anda.

Terdapat banyak laman web yang menyediakan borang tempahan secara online.Salah satunya adalah laman web response-o-matic.com.

Langkah bagimembuatnya:
1.Masuk ke web response-o-matic.com
2.Klik pada get started….

3.Isikan form signup yang muncul,isikan ruangan nama,email dan password dan klik sign up, paparan untuk sign in akan muncul jika anda telah berjaya mencipta akaun dengan response o matic.

4.Buka email anda untuk pengesahan pendaftaran, masukkan email dan password tadiuntuk log in

5.Selepas pengesahan email anda akan dibawa kepaparan bagimencipta form.Terdapat ruangan nama dan email(boleh dipinda dengan mengklik pada edit),klik pada add question untuk menambah butiran yang diperlukan pada form,bila dah siap klik pada continue.

6.Kemudian muncul option untuk form yang akan anda buat.Yang bertanda upgrade adalah option yang perlu anda bayar jika hendak menggunakannya.Pada bahagian ini masukkan butiran pada email & sms

notifications supaya bila ada tempahan anda akan menerima email,kemudian klik continue.

 

7.Paparan kod html akan muncul,salin kesemua kod ini.

8.Log in ke blog anda

9.Klik pada pages dan pilih new page….blank page

10.Masuk kan nama pages sebagai borang tempahan.klik tab HTML dan pastekan kod yang disalin tadi pada ruangan tersebut(bukan pada mode compose).Kemudian klik pada publish.

Pada pages akan keluar senarai page yang telah dibuat tadi

Tentunya bagi laman web atau blog perniagaan anda perlu membuat pages(halaman) seperti senarai produk,borang tempahan,hubungi saya dsb.Anda perlu buat langkah bermula pada langkah ke 9 untuk membuat halaman(page) yang berasingan.Pada pages terdapat tiga pilihan iaitu:

• Top tabs ----tab navigasi berada diatas
• Side links ----tab navigasi akan berada ditepi blog
• Don’t show---jika anda ingin membuat link dengan butang link tersendiri.Anda perlu buka page dan ambil link yang terpapar pada ruangan search dibrowser.

Sebelum ini juga ada posting tentang membuat pages dan anda boleh rujuk disini.

Selamat mencuba …:)

klik butang +1 jika suka artikel ini :) :)

Membuat facebook page dan like box

Facebook like page adalah satu jaringan sosial yang penting bagi meningkatkan populariti  sesuatu blog atau web site.Pemasangan facebook like box pada blog akan membolehkan pengunjung mengklik like jika suka dengan blog anda

Cara membuat facebook page

1.Log in dahulu ke facebook anda

2.Pada senarai menu sebelah kiri terdapat pages----create a page

atau boleh juga masuk ke http://www.facebook.com /pages/create.php

3.Kemudian pilih brand or product

4.Pilih website dari senarai option dan namakan page yang anda
   inginkan pada  brand or product name, 

5.Tandakan pada I agree with facebook page terms dan klik pada get started

 6.Kemudian anda akan dibawa ke paparan setup page anda

 7.Pada profile picture anda boleh masukkan imej untuk page anda

 8.Kemudian pada about masukkan keterangan berkenaan page anda

    (Boleh juga skip pada bahagian ini kerana anda boleh memasukkan
    kemudian pada page anda)

  9.Kemudian dapatkan dan salin url page anda pada ruangan url dibrowser.

 Langkah seterusnya:

Cara membuat like box
Masuk ke halaman berikut http://developers.facebook.com/docs/reference/plugins/like-box/

Setting pada Facebook Like Box:
- Facebook Page url: Masukkan url page anda disini
- Width: Lebar like box
- Color scheme: pilihan warna terang atau gelap
- Show Faces: Jika anda ingin menampilkan imej profail bagi facebook
- Border color: Masukkan  kod warna jika ingin meletak border atau kosongkan untuk transparent.
- Show stream: Jika ingin memaparkan posting terakhir anda.
- Show header: akan memaparkan tulisan header "Find Us on Facebook".
   Preview akan terpapar di sebelah kanan form setelah disikan.
   Klik pada get code (salin kod likebox anda disini)

  Paparan kod akan keluar terdapat kod dalam kategori HTML5,XFBML,
  IFRAME dan URL .
  Salin kod  pada IFRAME

Memasukkan widget pada blog

Kemudian masuk kedashboard blog anda:
Bagi dashboard baru:
Pilih Layout….Add a gadget

..HTML/Javascript 

bagi dashboard lama:
Pilih design…page elements…add a gadget
Dan masukkan kod facebook like anda disini dan klik save

update 8/5/2013