Minggu, 06 Januari 2013

Trik Blog >> Hapus Kotak Komentar Bawaan Google di Postingan Anda

Cara Menghapus Kotak Komentar Bawaan Blogger
  • Login Blog anda 
  • Buka menu Rancangan lalu klik edit HTML
  • centang pada Expand Template Widget lalu cari kode seperti di bawah ini dengan Ctrl+F dan hapus kode seperti dibawah ini.
<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p>
Setelah dihapus Simpan dan lihat hasilnya

Trik Blog>> Ubah Tulisan Postingan Lama, Beranda dan Postingan Baru menjadi Gambar


Seperti Gambar diatas, kali ini kita akan berbagi Trik bagaimana mengganti Tulisan Postingan lama, Beranda dan Postingan baru dengan gambar dimaksud. 
Ikuti langkah-langkah berikut ini:
  1. Login Blog Anda
  2. Pilih Tempelate >> Edit HTML (Jangan Lupa 'Expand Template Widget' nya di centang) kemudian cari kode berikut dibawah ini (Cltr F untuk permudah pencarian anda) :
    <data:newerPageTitle/>
    Lalu gantikan dengan kode berikut:
    <img src='http://i643.photobucket.com/albums/uu155/miskahiper/newer.png'/>
    Save Tempelate anda, kemudia carilah kode dibawah ini :
    <data:olderPageTitle/>
    dan yang diganti dengan kode ini : 
    <img src='http://i643.photobucket.com/albums/uu155/miskahiper/older.png'/>
  3. Simpan dan Lihat Hasil editan anda.
Demikian Tutorialnya, Sampai perjumpaan berikut ...

Desain Blog : Trik Modiv Tampilan Navbar dengan Efek Opacity

Tutorial kali ini akan memberikan solusi mudah untuk menanggapi masalah Navbar Blogger. Bagaimana cara agar Navbar tidak mengganggu penampilan blog tetapi tidak melanggar TOS (term of service) Blogger.
  
Solusinya adalah membuat Navbar tersebut seakan tidak ada, melainkan ada ketika crusor mouse kita berada pada bagian navbar (atas), atau bisa kita namakan antara ada dan tiada. Semua itu dengan cara memodifikasi tampilan Navbar dengan Efek Opacity. tampilannya seperti yang Trik Tips Tutorial gunakan dan cara membuatnya sangatlah mudah : 

I. Bagi Template yang tidak terdapat Navbar pada tampilan Blog :
1. Setelah Login Blogger
2. Kemudian Tata Letak ~> edit HTML
3. Cari kode #navbar-iframe atau lengkapnya seperti ini : 
#navbar-iframe{display:none;height:0;visibility:hidden;}
4. Ganti semua kode tersebut dengan : 
#navbar-iframe{opacity:0.0; filter:alpha(Opacity=0)} 
#navbar-iframe:hover{opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100)}
5. Simpan dan lihat hasilnya

II. Bagi Template yang terdapat Navbar pada tampilan Blog :
1. Setelah Login Blogger
2. Kemudian Tata Letak ~> edit HTML
3. Cari kode :
<b:skin><![CDATA[
4. Masukkan kode dibawah ini setelah kode diatas :
#navbar-iframe{opacity:0.0; filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0; filter:alpha(Opacity=100,FinishedOpacity=100)}
5. Simpan dan Selesai lihatlah hasilnya..
Tutorial Terkait: 

Desain Blog : Cara Buat Tab Menu Horizontal Seperti Navbar Di Atas Header Halaman Blog


Pertama : buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan’.

Kedua : Cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

#navbar-iframe {
  height:0px; visibility: hidden; display: none;
}

Keterangan:
Kode tersebut berfungsi untuk menyembunyikan navbar standar Blogger, sehingga apabila sebelumnya Anda telah menyembunyikan navbar standar maka lewati langkah ini dan lanjutkan pada langkah yang ketiga.

Ketiga : sisipkan rangkaian kode CSS berikut ini tepat di atas ]]></b:skin>

/*--------------------------------------------------------------
Kustomisasi Bilah Menu Navigasi Di Atas Header Halaman Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
--------------------------------------------------------------*/
.bilah-menu-atas {
  width: 100%;
  min-width: 960px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 27px;
  font-size: 13px;
  z-index: 99;
  white-space: nowrap;
  background-color: #336699;
  background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #336699 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.kolom-utama {
  -moz-transition: all 0.2s linear 0s;
  width: 960px;
  height: auto;
  margin: 0px auto;
}

.kolom-menu {
  width: 521px;
  height: auto;
  margin: 0px 0px 0px -41px;
  float: left;
  display: inline;
}

.kolom-menu ul {
  height: auto;
  margin-top: 0px;
}

.kolom-menu ul li {
  float: left;
  position: relative;
  list-style: none outside none;
}

.kolom-menu ul li:first-child {
  border-left: 1px solid rgba(30, 30, 30, 0.125);
}

.kolom-menu ul li a {
  color: #ffffff;
  font-weight: bold;
  text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  display: inline-block;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-left: 10px;
  position: relative;
  border-right: 1px solid rgba(30, 30, 30, 0.125);
  box-shadow: 1px 0px 0px rgba(255, 255, 255, 0.1);
}

.kolom-menu ul li a:hover, .kolom-menu ul li a:focus {
  background-color: rgba(255, 255, 255, 0.125);
}

Keterangan:

Warna yang dihasilkan oleh rangkaian kode CSS di atas adalah warna biru untuk background dan putih pada teks. Sehingga apabila belum sesuai dengan desain tampilan halaman blog Anda, maka sesuaikan warna yang digunakan dengan mengganti kode warna yang dipakai pada bagian color:, background-color:, dan background-image:.


Keempat : cari kode <body> dan kemudian sisipkan rangkaian kode dengan format seperti contoh berikut ini tepat di bawahnya.

<div class='bilah-menu-atas' id='bilahmenuatas'>
  <div class='kolom-utama'>
    <div class='kolom-menu'>
      <ul>
        <li><a href='http://eltelu.blogspot.com/'><img alt='L3' height='15px' src='https://lh6.googleusercontent.com/-GrWWmwsRww4/UFjcGGzlSYI/AAAAAAAAAn0/rP9UFz050sk/s800/Beranda.png' width='20px'/></a></li>
        <li><a href='URL'>Menu Kiri 1</a></li>
        <li><a href='URL'>Menu Kiri 2</a></li>
      </ul>
    </div>
    <div class='kolom-menu'>
      <ul style='float: right'>
        <li><a href='URL'>Menu Kanan 1</a></li>
        <li><a href='URL'>Menu Kanan 2</a></li>
      </ul>
    </div>
  </div>
</div>

Keterangan:
Ganti http://eltelu.blogspot.com/ dengan URL blog Anda dan ganti pula kata URL dengan link artikel yang akan ditautkan. Dan kemudian ubah kata Menu Kiri 1, Menu Kiri 2, Menu Kanan 1 dan Menu Kanan 2 sesuai dengan menu tampilan yang dikehendaki.

Kelima : Simpan template.

Setelah template disimpan maka navbar standar Blogger tidak lagi ditampilkan di halaman blog dan akan tergantikan dengan navbar baru seperti yang tampak pada gambar di atas. Kemudian perlu diketahui bahwa rangkaian contoh kode pada langkah yang keempat akan menghasilkan 2 (dua) buah kolom menu. Kolom sebelah kiri berisikan 3 (tiga) buah menu yaitu Beranda (Home), Menu Kiri 1, dan Menu Kiri 2, sedangkan kolom sebelah kanan berisikan 2 (dua) buah menu yaitu Menu Kanan 1 dan Menu Kanan 2. Sehingga apabila belum sesuai dengan keinginan, maka silakan dilakukan kustomisasi seperlunya dengan menambahkan atau mengurangi kode <li><a href='URL'>Menu</a></li>.

Semoga berguna dan bermanfaat.

Desain Blog : Trik>> Buat Tampilan Comment Khusus Untuk Admin

Buat Tampilan Comment khusus untuk Admin, bagini :

1. Login ke ko pu blog
2. Pilih Layout >> Edit HTML (Centang kotak kecil Expand Template Widget)
3. Backup Template kemudian Cari kode ini :
<b:if cond='data:comment.author == data:post.author'>
 <dd class='owner-Body'>
 <p><data:comment.body/></p>
 </dd>
 <b:else/>
Tambahkan juga kode </b:if> Sehingga secara lengkap hasilnya akan menjadi seperti ini :
<b:if cond='data:comment.author == data:post.author'>
<dd class='owner-Body'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
</b:if>
Simpan template lihat hasilnya, maka tampilan komentar pemilik blog akan berbeda dari komentar pengunjung. Terima kasih sekali lagi buat o-om.com atas tutorialnya Tampilan beda untuk komentar pemilik blog. Selamat mencoba dan semoga bermanfaat.

Desain Blog : Trik>> Ubah Desain Blog Anda

  1. Login Blog Anda
  2. Back Up Templetenya (menu ‘Template>Edit HTML>Lanjutkan>Expand Template Widget’.)
  3. cari kode </head> ()dan kemudian sisipkan rangkaian kode berikut ini tepat di atasnya :
<script type='text/javascript'>
//<![CDATA[
/************************************************
Kustomisasi Model Bidang Posting Blogger/Blogspot
Membuat Headline Artikel Di Halaman Beranda Blog
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.blogspot.com/
*************************************************/
function HapusTagHTML(kalimat,ambil){
  if(kalimat.indexOf("<")!=-1)
  {
    var s = kalimat.split("<");
      for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
          s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
      }
    kalimat = s.join("");
  }
  ambil = (ambil < kalimat.length-1) ? ambil : kalimat.length-2;
  while(kalimat.charAt(ambil-1)!=' ' && kalimat.indexOf(' ',ambil)!=-1) ambil++;
    kalimat = kalimat.substring(0,ambil-1);
  return kalimat+'...';
}

function BuatRingkasanArtikel(pID){
  var div = document.getElementById(pID);
  var JumlahKarakter = 300;
  var RingkasanArtikel = '<div>' + HapusTagHTML(div.innerHTML,JumlahKarakter) + '</div>';
  div.innerHTML = RingkasanArtikel;
}
//]]>
</script>
Keterangan:

Kode tersebut digunakan untuk membuat ringkasan artikel yang ditampilkan pada bidang posting kedua, ketiga, dan seterusnya, seperti yang tampak pada gambar (di atas) dengan tanda angka 2 (dua).

Untuk menentukan jumlah karakter yang dijadikan sebagai ringkasan artikel, dapat dilakukan dengan cara mengubah angka 300 yang terdapat pada kode var JumlahKarakter = 300; sesuai dengan jumlah karakter yang diinginkan.
4. Kemudian Cari kode <b:includable id='main' var='top'> dan kemudian hapus seluruh rangkaian kode untuk bagian tersebut. Sebagai contoh perhatikan rangkaian kode di bawah ini.
<b:includable id='main' var='top'>   <!-- hapus dari sini -->
 
  ----- rangkaian kode -----
 
</b:includable>   <!-- hapus sampai sini -->

Salin rangkaian kode berikut ini dan kemudian sisipkan di bagian yang sebelumnya dihapus
<b:includable id='main' var='top'>
  <b:if cond='data:mobile == &quot;false&quot;'>
    <b:loop values='data:posts' var='post'>
      <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
        <!--artikel terbaru -->
        <b:include name='artikelterbaru'/>
      <b:else/>
        <!--artikel terlama -->
        <b:include name='artikelterlama'/>
      </b:if>
    </b:loop>

    <!-- navigation -->
    <b:include name='nextprev'/>

    <!-- feed links -->
    <b:include name='feedLinks'/>

    <b:if cond='data:top.showStars'>
      <script src='//www.google.com/jsapi' type='text/javascript'/>
      <script type='text/javascript'>
        google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
          function initialize() {
            google.annotations.setApplicationId(<data:top.blogspotReviews/>);
            google.annotations.createAll();
            google.annotations.fetch();
          }
        google.setOnLoadCallback(initialize);
      </script>
    </b:if>
  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>

  <b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
  </b:if>
</b:includable>

<b:includable id='artikelterbaru' var='artikelbaru'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:defaultAdStart/>
      <b:if cond='data:post.isDateStart'>
        <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
          &lt;/div&gt;&lt;/div&gt;
        </b:if>
      </b:if>
      <b:if cond='data:post.isDateStart'>
        &lt;div class=&quot;date-outer&quot;&gt;
      </b:if>
      <b:if cond='data:post.dateHeader'>
        <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
      </b:if>
      <b:if cond='data:post.isDateStart'>
        &lt;div class=&quot;date-posts&quot;&gt;
      </b:if>

      <div class='post-outer'>
        <b:include data='post' name='post'/>

        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
      </div>

      <b:if cond='data:post.includeAd'>
        <b:if cond='data:post.isFirstPost'>
          <data:defaultAdEnd/>
        <b:else/>
          <data:adEnd/>
        </b:if>
        <div class='inline-ad'>
          <data:adCode/>
        </div>
          <data:adStart/>
      </b:if>
      <b:if cond='data:numPosts != 0'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    <data:adEnd/>
  </div>
</b:includable>

<b:includable id='artikelterlama' var='artikellama'>
  <!-- posts -->
  <div class='blog-posts hfeed'>
    <b:if cond='data:post.isFirstPost == &quot;true&quot;'>

    <b:else/>
      <b:if cond='data:blog.pageType == &quot;index&quot;'>
        <b:if cond='data:post.isDateStart'>
          <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
            &lt;/div&gt;&lt;/div&gt;
          </b:if>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>
        <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>
        <b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-posts&quot;&gt;
        </b:if>
          
        <div class='post-outer'>
          <b:include data='artikellama' name='lama'/>

          <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <b:if cond='data:post.showThreadedComments'>
              <b:include data='post' name='threaded_comments'/>
            <b:else/>
              <b:include data='post' name='comments'/>
            </b:if>
          </b:if>
          <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <b:if cond='data:post.showThreadedComments'>
              <b:include data='post' name='threaded_comments'/>
            <b:else/>
              <b:include data='post' name='comments'/>
            </b:if>
          </b:if>
        </div>
      </b:if>
    </b:if>
  </div>
</b:includable>

<b:includable id='lama' var='artikellama'>
  <div class='post hentry'>
    <a expr:name='data:post.id'/>
    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
        <b:if cond='data:post.link'>
          <div style='text-align: justify;'>
            <a expr:href='data:post.link'><data:post.title/></a>
          </div>
        <b:else/>
          <b:if cond='data:post.url'>
            <b:if cond='data:blog.url != data:post.url'>
              <div style='text-align: justify;'>
                <a expr:href='data:post.url'><data:post.title/></a>
              </div>
            <b:else/>
              <data:post.title/>
            </b:if>
          <b:else/>
            <data:post.title/>
          </b:if>
        </b:if>
      </h3>
    </b:if>

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

    <div class='mobile-index-contents'>
      <b:if cond='data:post.thumbnailUrl'>
        <div class='mobile-index-thumbnail'>
          <div style='border: 1px solid #666666; background: ffffff; float: left; width:180px; height:114px; margin-right:15px;'>
            <div class='Image' style='float:left; '>
              <img expr:src='data:post.thumbnailUrl' style='width:180px; height:114px;'/>
            </div>
          </div>
        </div>
      <b:else/>
        <div style='border: 1px solid #666666; background: ffffff; float: left; width:180px; height:114px; margin-right:15px;'>
          <img alt='eltelu' src='https://lh4.googleusercontent.com/-2GChmqVRnH8/UCeepvr6GXI/AAAAAAAAAdw/rX6lZ3MSEDo/s800/ELTELU.png' style='width: 180px !important; height: 114px !important;'/>
        </div>
      </b:if>

      <div class='post-body' style='text-align: justify;'>
        <div expr:id='&quot;RingkasanArtikel&quot; + data:post.id'><data:post.body/></div>
        <script type='text/javascript'>BuatRingkasanArtikel(&quot;RingkasanArtikel<data:post.id/>&quot;);</script>
      </div>

      <b:if cond='data:post.hasJumpLink'>
        <div style='border-bottom: 1px solid #666666; margin-top: 12px; width: 99,99%;'/>
          <div style='text-align: right;'>
            <div class='jump-link'>
              <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
            </div>
          </div>
        <div style='clear: both;'/>
      </b:if>
    </div>
  </div>
</b:includable>  
Keterangan:
Pemisah artikel yang digunakan dalam rangkaian kode di atas adalah pemisah standar, yaitu <data:post.jumpText/> yang akan menghasilkan tautan teks berupa “Baca selengkapnya »” atau “Read more »”. Sehingga apabila sebelumnya Anda telah melakukan kustomisasi untuk bagian tersebut (sebagai contoh misalnya mengubah bagian tersebut menjadi gambar tombol), maka gantilah pula <data:post.jumpText/> yang terdapat pada kode di atas sesuai dengan rangkaian kode yang Anda gunakan (sebelumnya) untuk membuat tombol “Read more »”.
Silakan buka artikel dengan judul “Membuat Tombol Read More Tanpa Ribet” yang dapat Anda gunakan sebagai referensi untuk membuat tombol “Read more »” atau mengganti tautan teks “Baca selengkapnya »” dengan gambar berbentuk tombol.
Simpan Tempelate Anda

Catatan:
Perlu diketahui bahwa setelah Anda mengimplementasikan teknik tersebut maka post footer untuk artikel kolom kedua, ketiga, dan seterusnya secara otomatis tidak lagi ditampilkan ketika halaman yang dibuka adalah beranda. Namun post footer akan tetap dimunculkan sebagaimana mestinya ketika masing-masing artikel pada blog yang dimaksud dibuka.

Sementara itu post footer untuk artikel yang terletak pada bagian kolom paling atas akan tetap ditampilkan di halaman beranda, sehingga untuk menghilangkan bagian tersebut agar post footer tidak lagi tampil di halaman beranda seperti halnya pada artikel bagian kolom kedua, ketiga, dan seterusnya, maka Anda dapat mengerjakan teknik yang diuraikan dalam artikel dengan judul “Menyembunyikan Elemen Halaman Posting Dari Beranda Blog”.

Semoga berguna dan bermanfaat.

Jumat, 04 Januari 2013

Widget>> Cek Lokasi Teman Anda dari No HP

Bagi sobat yang mau pasang widget cek lokasi dari no.handphone ini bisa mengcopy script dibawah untuk dipasang di widget blognya.

Coppas kode berikut dibawah ini ke postingan blog sobat atau dengan cara menambah gadget seperti biasa:
<div style="-moz-border-radius: 15px; background: rgb(132, 242, 145) none repeat scroll 0% 0%; border: 3px dotted rgb(2, 163, 21); padding: 4px;">
<center>
<a href="http://4.bp.blogspot.com/-k39uOnB1Dec/T-dB5XtwhzI/AAAAAAAABiM/T8lIsA3Iu4s/s1600/ag00280_.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-k39uOnB1Dec/T-dB5XtwhzI/AAAAAAAABiM/T8lIsA3Iu4s/s1600/ag00280_.gif" /></a>
<img src="http://i571.photobucket.com/albums/ss153/rijal_abror/2iwaxrqq.gif" /></center>
<center>
<b>Kas Masok Nmr yg ko Cari</b>
<iframe frameborder="0" src="http://stufimedia.com/hasil.php"></iframe>
Supported by - <a href="http://mampirbro.blogspot.com/" target="_blank">MampirBro</a></center>
</div>
 Sekarang Coba perhatikan Hasilnya ...

Trik >> Buat FB Fan Page dan Like Box On Blog

Buatlah Facebook Fan Page dan Like Box di blog/website merupakan hal yang dianjurkan pada setiap bloger/websiter. Ada sejumlah trik untuk mengdesain tampilan box mantap, diantaranya :

I. Bila Anda belum memiliki FB Page, buatlah halaman tersebut

  • Login Akun FB anda
  • Klik Tampilan "Buat Halaman" yang terdapat dibawah Page atau Klik Apply disini
  • Pilih/klik opsi "Brand or Product"
  • Pilih opsi "Website" dan isikan nama Page sesuai keinginan anda (jangan lupa centang "agreement") kemudia Klik "Get Started"
  • Selanjutnya masuk ke halaman Facebook Page yang telah dibuat, lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalkan : upload foto/gambar, mengedit informasi, dan lain sebagainya untuk Facebook Page anda 
  • Kemudian Buat Facebook Like Box yang nantinya dapat dipasang di blog/website (Ikuti Penjelasan kemudian)
II. Bila anda yang telah memiliki FB Fan Page, ikuti petunjuk selanjutnya dibawah ini:
  1. Buka halaman FB Like Box disini
  2. Selanjutnya setting FB Like Box dasar seperti gambar disamping
  3. Jika settingan dahh beres, klik "get code". Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, iFrame dan XFBML, pilih salah satu dan copy kodenya. (Untuk Blogger, di sarankan gunakan HTML 5)
  4. Setelah itu, Copi dan pastekan di Blog anda : Login>>Dasboard>>Desing/Rancangn>>add gadget>>Pastekan Kode Script tadi ke dalam gadget anda.
  5. Save

Kini anda sudah memiliki FB Fan Page di Blog anda. Selamat Mencoba

Tambahan TIPS: Sembunyikan FB Fan Page di Blogspot 

Berikut caranya :
1. Masuk rancangan >tambah gadget>HTML/javascript
2. Copy kode di bawah ke html/javascript

<script type="text/javascript">
//<!--
$(document).ready(function() {$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.floatinglikebox{background: url("http://3.bp.blogspot.com/-VXmAJdQRHJ8/Tra8E16fZGI/AAAAAAAAClg/o5M632x9qX8/s1600/floatingfb.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.floatinglikebox div{border:none;position:relative;display:block;}
.floatinglikebox span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.floatinglikebox span a{color: #808080;text-decoration:none;}
.floatinglikebox span a:hover{text-decoration:underline;}
</style><div class="floatinglikebox" style=""><div><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/PapuaBengkelMusic&amp;width=251&amp;height=270&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23cccccc&amp;stream=false&amp;header=false&amp;appId=159468740772399" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; height:270px; background:#fff;" allowtransparency="true"></iframe><span><a href=" http://semoga-bermanfaaat.blogspot.com/2012/04/cara-membuat-like-box-fb-tersembunyi_18.html " target="_blank">+ Get This</a></span></div></div>
ganti tulisan yg berwarna Merah dengan ID fb fanspage anda
5. simpan.

Selanjutnya :

6. Rancangan >> edit HTML
7. Cari kode </head> lalu masukan kode di bawah ini tepat di atas </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"> </script>
8. Save Tempelate, Kemudian lihat hasilnya.