"Cara Pasang Widget Facebook Recommendation di Blog/Website"

Share

Silahkan copy-paste kode HTML berikut ini pada sidebar atau terserah dimana saja di blog/website.

Edit alamat domain pada teks yang berwarna merah dengan domain situs/blog anda. Edit juga nilai width dan height (teks berwarna biru) untuk disesuaikan dengan layout pada blog anda. Kalau mau kita bisa juga edit header (true/false), colorscheme (light/dark), dan juga font. Pilihan kode selengkapnya bisa dilihat pada halaman Facebook Developers (buka di sini).
Sayangnya, apabila kita ingin menampilkan jumlah artikel yang lebih banyak pada widget ini (yaitu dengan mengubah nilai height tertentu misalnya menjadi 1000) dengan menggunakan kode HTML yang diberikan dari situs Facebook tersebut, widget yang ditampilkan jadi terlalu panjang, tanpa adanya handle scrolling, seperti pada screenshot di bawah ini.

Tapi tenang saja, bisa kita modifikasi sedikit kodenya, misalnya dengan menambahkan tag div seperti pada contoh di bawah ini.

*

Modifikasi Kode Widget Facebook Recommendation

Di bawah ini adalah contoh pemasangan widget Facebook Recommendation dengan nilai height 1000 dan width 500, ditempatkan di dalam tag div dengan width 535px dan height 300px, agar tidak terlalu tinggi, tapi dilengkapi dengan handle untuk scrolling agar bisa melihat keseluruhan konten widget.

Recommendations

Recommendations
You need to be logged into Facebook to see your friends' recommendations
Foto-foto Idul Adha 1430 H dari Seluruh Dunia | Berita
4 people shared this.
Nenek Moyang Orang Eropa Ternyata Kanibal Terutama Daging Anak-anak | Berita
4 people shared this.
[VIDEO] Tsunami Mentawai Tewaskan Ratusan Orang | Berita
11 people shared this.
Ipar Mantan PM Inggris Tony Blair Masuk Islam | Berita
24 people shared this.
Beberapa Mitos Tentang Rematik | Berita
2 people shared this.
[DOWNLOAD] MyPaint, Software untuk Membuat Lukisan Digital | Komputer
4 people shared this.
[VIDEO] Pramugari Seksi Menari Sambil Peragakan Alat Keselamatan Penerbangan | Berita
14 people shared this.
Ketua MPR Taufiq Kiemas Salah Baca Teks Pancasila dan UUD 45 | Berita
95 people shared this.
[DOWNLOAD] Cara Mudah Ubah Tampilan Windows Vista / 7 Jadi Mac OS X Snow Leopard | Komputer | Inimu.
34 people shared this.
Heboh, Seorang Ibu Hamil Lagi Saat Masih Hamil | Berita
2 people shared this.
[AUDIO-VIDEO] Rilis Lagu Terbaru Luna Maya �Tak Bisa Bersamamu� | Berita
99 people shared this.
Download Gratis Netqin Mobile Antivirus Free | Komputer
5 people shared this.
Wakamini, Tablet PC Pertama Buatan Indonesia, Harga 3 Jutaan | Komputer
25 people shared this.
Wayne Rooney Terpaksa Teken Kontrak Karena Terancam Dibunuh (?) | Berita
12 people shared this.
[FOTO] Wanita Berpenyakit Aneh Harus Makan Setiap 15 Menit | Berita
83 people shared this.
[DOWNLOAD] Browser Internet Explorer 9 Beta agar Web Lebih Cantik | Komputer
3 people shared this.
Valentino Rossi Resmi Akan Keluar dari Yamaha, Pindah ke Ducati | Berita
17 people shared this.
Ternyata Osama Bin Laden Punya Akun Facebook | Berita
4 people shared this.
Daftar Anggota DPR-RI Paling Malas | Berita
17 people shared this.
Facebook social plugin

*

Kode lengkapnya adalah seperti ini:

535px; height:300px; overflow:auto; margin:auto; padding:5px; border:1px solid #cccccc; background-color:#eeeeee; text-align:center;">

"Cara Menampilkan Tombol Reply di Blogger/Blogspot"

Share

• Login ke Dashboard Blogger, klik Design, lalu klik tab Edit HTML, klik Expand Widget Template, kemudian cari teks <data:commentPostedByMsg/>.
• Di bawah teks tersebut, masukkan kode berikut ini:

  <span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=NOMOR-BLOG-ID-ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='padding:0px 5px; border:1px solid #999;'>Reply</a></span>

• Ganti tulisan NOMOR-BLOG-ID-ANDA dengan kode nomor Blog ID anda. Cara mengetahui nomor Blog ID: Buatlah sebuah post/artikel baru di Blogger, maka pada address bar di browser akan terlihat nomor Blog ID anda. Silahkan copy nomor Blog ID dari address bar browser tersebut dan paste ke dalam kode di atas.
  
• Bila diinginkan, silahkan edit juga kode style (tampilan) tombol Reply tersebut.

*

Hasilnya, tombol “Reply” akan terlihat pada setiap komentar. Dan, komentar reply tersebut sudah disertai link yang merujuk ke author komentar sebelumnya yang di-reply.

Memang sih, komentar Reply di Blogger ini nggak sepenuhnya bisa tampil seperti WordPress dengan bentuk threaded comment (komentar berjenjang) . Tapi lumayan kan supaya kolom komentar jadi terlihat lebih hidup dan interaktif.
Untuk melihat dan mencobanya, silahkan buka demonya di sini.
.

"Pasang Widget Share Twitter dan Facebook Otomatis Di Setiap Artikel Blog"

Share

Pernah lihat tombol-tombol share seperti di samping kanan ini? Ya pernah dong, kan itu ada di kanan
Maksudnya, mungkin anda pernah/sering lihat ada tombol/widget share Facebook dan Twitter di bagian atas sebuah artikel blog di mana pada kedua widget itu terlihat angka yang menunjukkan banyaknya link dari sebuah artikel/posting yang dishare oleh pengunjung blog.
Bila tertarik, anda juga bisa memasangnya dengan memasukkan kode tertentu pada template blog, sehingga pada setiap artikel secara otomatis akan terlihat berapa banyak link yang dishare pada kedua layanan online social networking tersebut (Twitter dan Facebook).
Berikut ini adalah tutorial cara pemasangannya di blog, khususnya Blogger/Blogspot.

*

Pilihan Kode Widget Share Twitter dan Facebook

Silahkan lihat-lihat dulu pilihan widget share yang disediakan oleh TweetMeme (untuk widget Twitter) dan widget share Facebook. Nanti kodenya akan ditempatkan pada template blog:

*

Kode Widget Share Twitter (TweetMeme)

KODE-TWEETMEME-1 (kotak)

<script type='text/javascript' src='http://tweetmeme.com/i/scripts/button.js'></script>

KODE-TWEETMEME-2 (memanjang)

<script type='text/javascript'> tweetmeme_style = 'compact'; </script> <script type='text/javascript' src='http://tweetmeme.com/i/scripts/button.js'></script>

*

Kode Widget Share Facebook

KODE-FACEBOOK-1 (kotak)

<a title='Share on Facebook' name='fb_share' type='box_count' href='http://www.facebook.com/sharer.php'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>

KODE-FACEBOOK-2 (memanjang)

<a title='Share on Facebook' name='fb_share' type='button_count' href='http://www.facebook.com/sharer.php'>Share</a><script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'></script>

*

Cara Memasang Kode Widget Share Pada Template Blogger

• Login ke akun Blooger.
• Klik “Layout”, lalu klik tab “Edit HTML”.
• Klik “Expand Widget Templates”.
• Cari kode ini: <p><data:post.body/></p> atau <data:post.body/>
• Di atas kode tersebut, masukkan kode ini:

  
  KODE-TWEETMEME
  
  
  
  
  KODE-FACEBOOK
  <div style='float:right; margin:0 0 10px 10px; text-align:center;'>
  KODE-TWEETMEME
  <br />
  <br />
  KODE-FACEBOOK
  </div>

• Ganti tulisan KODE-TWEETMEME dan KODE-FACEBOOK dengan kode widget TweetMeme dan Facebook pilihan anda (lihat Pilihan Kode Widget).
• Klik tombol “PREVIEW” untuk mereview perubahan tampilan template.
• Bila tampilannya sudah benar, silahkan klik “SAVE TEMPLATE”.

*

Catatan

Untuk memasang widget tersebut (TweetMeme dan Facebook), kita tidak perlu menggunakan akun Twitter atau Facebook. Bahkan kita tidak harus punya akun di Twitter atau Facebook, karena tombol itu secara otomatis akan membaca URL artikel kita dan menunjukkan angka link sharenya yang tidak tergantung pada akun kita, jadi sebenarnya bisa dipasang di blog/situs mana saja.
Kode di atas adalah untuk pemasangan pada bagian atas artikel sebelah kanan. Kalau mau ditaruh di kiri, ganti kode style pada tag div menjadi:
<div style='float:left; margin:0 10px 10px 0;'>
Kalau ingin memasang widget secara memanjang (menyamping), hilangkan tag <br />. Atau coba experimen sendiri aja ya , kan nanti bisa direview dulu sebelum disave.

*

"page next pada blog"

Share

1. Masuk ke menu tata letak. 2. edit html. 3.Pada Kotak Edit HTML [jangan lupa beri centang pada Expand Widget Template]cari Kode: <b:include name='nextprev'/> 4.Lalu ganti kode tersebut dengan Kode dibawah ini: <b:if cond='data:blog.pageType == "index"'> <style type="text/css"> .blogpager { font-size:16px; color: #060; font-weight:bold; padding:0px 4px; } </style> <div align="center" style="margin:5px;"> <form action="#" name="pager20"> <span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span> </form> </div> <script type="text/javascript"> var blogID = "2560477371915203711"; var home_page = "http://www.feristianickle.co.cc/"; var pager_max_main = 2; var pager_first_text = "First"; var pager_last_text = "Last"; var pager_previous_text = "Prev"; var pager_next_text = "Next"; </script> <script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js" type="text/javascript"></script> </b:if> Keterangan: var blogID = ganti dengan ID Blogger Sobat Photobucket var home_page =ganti dengan URL blog Sobat var pager_max_main = 2; =angka 2 ini menunjukan jumlah Post atau jumlah konten pada homepage,bagian ini menunjukan jumlah Jumlah post yang ditampilkan pada halaman berikutnya,jika ingin satu halaman yang ditampilkan rubah angkanya menjadi angka 1,Caranya Klik Setting >> Formating >> Show {seperti gambar di bawah ini} Tampilan var pager_first_text =Sobat bisa ganti tulisannya seperti AWAL var pager_last_text = Sobat bisa ganti tulisannya seperti AKHIR var pager_previous_text = Sobat bisa ganti tulisannya seperti SEBELUMNYA var pager_next_text = Sobat bisa ganti tulisannya seperti BERIKUTNYA selamat mencoba!

"texs bergerak"

Share

<em>Ampersands & angle brackets nee<font face='Arial' color='#000000'><marquee behavior="alternate">TEXT</font></marquee>

Kanan Ke Kiri :
<font face='Arial' color='#000000'><marquee>TEXT</font></marquee>

Kiri Ke Kanan :
<font face='Arial' color='#000000'><marquee direction="right">TEXT</font></marquee>

Ke Atas :
<center><font face='Arial' color='#000000'><marquee direction="up">TEXT</font></marquee></center>

Ke Bawah :
<center><font face='Arial' color='#000000'><marquee direction="down">TEXT</font></marquee></center>

Ke Atas Bawah Atas Bawah :
<center><font face='Arial' color='#000000'><marquee direction="up" behavior="alternate">TEXT</font></marquee></center>

ZigZag :
<font face='Arial' color='#000000'><marquee behavior="alternate" direction="up" width="80%"><marquee direction="right">TEXT</font></marquee></marquee>

kiri kanan Zigzag :
<font face='Arial' color='#000000'><marquee behavior="alternate" direction="up" width="80%"><marquee direction="right" behavior="alternate">TEXT</font></marquee></marquee>



Catatan :


- Arial adalah Jenis huruf, bisa sob ganti dengan yang lain seperti time news roman, monotype corsive, dll

- TEXT bisa diganti dengan kata atau kalimat yang ingin kamu tulis warna dan bergerak tersebut.

- #000000 adalah contoh warna tulisan hitam, jika ingin mengganti silahkan pilih warna seperti yang saya sediakan di bawah. Misal untuk membuat tulisannya berwarna biru, #000000 diganti dengan kode #0000ff



pilihan warna :
-----------------
merah : ff0000
kuning : ffff00
hijau : 00cc00
ungu : ff00ff
biru : 0000ff
orange : ff6600
biru muda : 3399ff
pink : ff66ff
d to be encoded.</em>

"Membuat Page Navigation dengan Page javascript"

Share

1. Masuk ke menu tata letak.
2. edit html.

     3.Pada Kotak Edit HTML [jangan lupa beri centang pada Expand Widget Template]cari Kode:
    <b:include name='nextprev'/>                            
   4.Lalu ganti kode tersebut dengan Kode dibawah ini:
<b:if cond='data:blog.pageType == "index"'>
<style type="text/css">
.blogpager {
font-size:16px;
color: #060;
font-weight:bold;
padding:0px 4px;
}
</style>

<div align="center" style="margin:5px;">
<form action="#" name="pager20">
<span id="vwg-pager-first"></span> <span id="vwg-pager-prev"></span> <input name="showingpage" onfocus="this.select()" value="init..." type="text" size="4" title="Enter page number that You want to go" />/<input size="4" type="text" name="pagestotal" disabled="disabled" value="init..." /> <input type="button" onclick="checkpager()" value="Go" /> <span id="vwg-pager-next"></span> <span id="vwg-pager-last"></span>
</form>
</div>

<script type="text/javascript">

var blogID = "2560477371915203711";
var home_page = "http://www.feristianickle.co.cc/";
var pager_max_main = 2;

var pager_first_text = "First";
var pager_last_text = "Last";
var pager_previous_text = "Prev";
var pager_next_text = "Next";

</script>
<script src="http://www.freewebs.com/anhvo/blogger/blogger_pager_script_v20.js"
type="text/javascript"></script>
</b:if>
Keterangan:
var blogID = ganti dengan ID Blogger Sobat



var home_page =ganti dengan URL blog Sobat
var pager_max_main = 2; =angka 2 ini menunjukan jumlah Post atau jumlah konten pada homepage,bagian ini menunjukan jumlah Jumlah post yang ditampilkan pada halaman berikutnya,jika ingin satu halaman yang ditampilkan rubah angkanya menjadi angka 1,Caranya Klik Setting >> Formating >> Show {seperti gambar di bawah ini}



var pager_first_text =Sobat bisa ganti tulisannya seperti AWAL
var pager_last_text = Sobat bisa ganti tulisannya seperti AKHIR
var pager_previous_text = Sobat bisa ganti tulisannya seperti SEBELUMNYA
var pager_next_text = Sobat bisa ganti tulisannya seperti BERIKUTNYA 

selamat mencoba!

"Cara Membuat Duck Menu Animasi"

Share

1. Login ke akun Blogger anda

2. Plih Layout > Edit HTML, lalu centang Expand Widget Template

3. Cari kode <head> , lalu paste kode berikut di bawahnya:

<script src='http://tipsbloggerzacky.googlecode.com/files/jquery-1.2.2.pack.js' type='text/javascript'/>
<script src='http://tipsbloggerzacky.googlecode.com/files/interface.js' type='text/javascript'/>

4. Selanjtnya, cari kode ]]></b:skin> , lalu paste kode berikut di atasnya:

/* duck menu by feristianickle start
----------------------------------------------- */
.fisheye{
text-align: center;
height: 62px;
position: relative;
}
a.fisheyeItem
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
top: 0;
}
a.fisheyeItem2
{
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
width: 40px;
position: absolute;
display: block;
bottom: 0;
}
.fisheyeItem img
{
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
.fisheyeItem2 img
{
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeItem span,
.fisheyeItem2 span
{
display: none;
positon: absolute;
}
.fisheyeContainter
{

height: 50px;
width: 200px;
left: 500px;
position: absolute;
}
#fisheye2
{
position: absolute;
width: 100%;
bottom: 0px;
}

/* duck menu by feristianickle end
----------------------------------------------- */

5. Langkah terakhir, cari kode <body> , lalu paste kode berikut dibawahnya:

<div class='fisheye' id='fisheye'>
<div class='fisheyeContainter'>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin3-jB9Ai8QPJT61urYe08oWQeW0wB3ImEyN3fbGAwKOJ2BrX_4JbAcOxMKbzvdEXlP72_yvOaEUHyJxvpnFElhyphenhyphenmn3hOLmjMYFAVocUjumIfPti8yMrWSQMDQvD07FwLNEQZdNWqV/s1600/music-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyyaeXQqCxBDhT3Up9g_zl_W7chnLVN8FVV_9Rwx_Zj_Pvjj-CylW835r3V7Lkz2gWuY7S5Mjfxi__02z2OcaepmMJ1Udpe-RgcPxoZmbthBJWI1pGolIxWQDzIA6DCEEn-hyBguo0/s1600/rss2-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaGjLPFYkKZ3NvZppvlu44jT_QRdP8ikgUbkbLcdupb0qRotbu_tCmE3jCIEAopVblzZv_oXUEAG0SeNu65986f2o4ll0CUzXxHPKaQ4LkMR4KU08-8JV7OYGFJnkEGVe4PMMfLvxB/s1600/link-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNDWqbEofkZaZLk41vqPwl_BRf3JzF7Odv_qSdd5uVWOYAgSthpari4yyjpFXNo_KEj1180eMAyNrvgk7scuNwqO2271UjYGXs_CxQv6865pmaVpIzmk4riO8xQtWTQ_FAdQ07wV_R/s1600/home-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5prT9jsVuTaj6JGDLHZEZfAWVxkv7m4YTjQSsEb644oZJZwzctmOB2SRuUkAL_AhdzekZHCme95r6On3RNJ77knB82IapWXpMxtphaqCH9bmSr4QrMM9w0AQmDl4R8MQlqBrdv2Ax/s1600/history-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnv62XD35UXcNx0o1AfVNOOsuh9Y62rJapZXm-PCqEByV-5cOLABHNcBjzR9FQm0EYBoYxLz84JHdTbZxx9JMfxJ1iwDSOlb46lGFZ4gXl1yN8M1w7xNoIR9Bc0CAkXbh_0AZGVE9k/s1600/email-trans.png' width='30'/><span>Home</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL2lcLsXf4WfzzKYbO3-2godNKPQXTq2TWHdxOVIIUwig_HjPcUitCOFCnUuXskLUnj_Vk7gjBeuW0_3EzRq7I9d7paZFcW8rRIQYoFJBCRuh4PBkxfGbsOCXiCsdOzVVZ57N7HcRU/s1600/video-trans.png' width='30'/><span>Email</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiklq-BXTxGj07MhiR_npNKoCa9GmZOZe8XQ3KObz5oam-vZ1w1J2J-areHRMyVRkb2mpgsm4g624_W94Rzs6NP9aKIMv5BVFfClKbkWgOcVWhCMCdkk88LKz-Fd0mlxv6FsMs-sZSK/s1600/rss-trans.png' width='30'/><span>Display</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji7D0DMMciNgDqyBfdDko4fWBj3Q3AOKALlqQMRBqjwAPSI_aVZtHPnzIftzpKAJwOsyiiVMLjiOszMJdU5OS_HhItP7JIZN1A_9HwWaW4jWkuOhMOqIe9YElr8l2fzhJuKsM9nc-W/s1600/email-trans.png' width='30'/><span>Clock</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSryKjxtXFkoYhcs1_jEhSu03eKqPFc4Q-NmOdyAhwL-DoTaIw_EehCpNnUj_xRf6xZNuS_PzIt1OAaXNQdnTD8-L7MeEEgpII8orPFZjDlkXiwWyAVpmhkwDLVHCMRSAtXUfSc1aA/s1600/calendar-trans.png' width='30'/><span>Web</span></a>
<a class='fisheyeItem' href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQndJhCpPre-kf0_AtLZN5Cm4FNESDrzxF_hLepq3RhoM7bj_kojNEG_CfZUhJ8991AEWmjWJhOXro_z48DF0gDUVZbtP3-O7gnztooUuKfeFS7oOT8NWgn1bMdln1AgJApea1kky/s1600/portfolio-trans.png' width='30'/><span>Web</span></a>
</div>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 15,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 30,
proximity: 70,
halign : 'center'
}
)
}
);
</script>

Silahkan costumisasi kode di atas dengan mengganti kode yang berwarna biru sesuai keinginan anda.

5. Terkahir, klik Save Template.