Cara Mengembalikan Widget Followers di Blogspot

7

Google saat ini sudah semakin berkembang. Banyak layanan baru yang sudah diberikan kepada penggunanya. Salah satunya adalah Google Plus.

Google Plus merupakan jejaring sosial buatan google. Dengan jejaring ini Anda dapat berbagi banyak hal dan tentunya menjalin pertemanan.

Sebelum ada Google+, di blogspot sudah disediakan layanan untuk menjalin pertemanan yang disebut Google Friend Connect atau Followers. Widget ini dapat ditambahkan melalui tab lay out.

Selain dapat menambah pertemanan, widget Followers juga digunakan untuk berlangganan tulisan-tulisan terbaru dari sebuah blog.

Namun sekarang widget Followers sepertinya akan dihilangkan oleh google dan digantikan dengan Google+ Followers. Mengingat widget ini sudah tidak ditampilkan lagi pada halaman awal saat ingin menambahkan gadget.

Bahkan widget Followers yang sudah dipasang pada blog dapat hilang secara tiba-tiba. Widget Followers di blog ini contohnya pernah hilang secara tiba-tiba kemudian kembali lagi. Setelah itu kembali hilang dan tidak muncul lagi.

Jika sudah hilang Anda dapat menggunakan layanan yang lebih baru yaitu Google+ Followers. Widget ini mempunyai banyak keunggulan dibanding Google Friend Connect.

Akan tetapi jika jumlah followernya sudah cukup besar Anda mungkin tidak ingin menghilangkan widget Followers begitu saja. Lalu bagaimana cara mengembalikan widget tersebut jika sudah hilang?

Pesan dari Blogger

Saat widget atau gadget ini hilang muncul pesan seperti di bawah ini pada bagian blog dimana widget Followers dipasang.

Kami minta maaf...
Gadget ini salah dikonfigurasi. Petunjuk webmaster: Pastikan bahwa "Setelan Jalinan Teman - URL Beranda" sesuai dengan URL situs ini.

Jika dilihat dari kalimat di atas, sepertinya ini ada hubungannya dengan adanya pengalihan domain dari blogspot.com menjadi blogspot.co.id (untuk Indonesia). Namun saya belum tahu pasti apa penyebab sebenarnya widget ini bisa hilang secara tiba-tiba.

Tutorial Memunculkan Kembali Widget Followers

Salah satu cara yang bisa Anda coba untuk mengembalikannya sebenarnya sangat mudah. Anda hanya perlu mengubah setelan bahasa ke bahasa inggris.

1. Pertama, log in ke blogger.
2. Pilih blog.
3. Klik menu Settings (1) » Language and formatting (2).
4. Pada bagian Language (3) pilih bahasa Inggris (4).
   
   
   
   
5. Simpan Settings.

Sekarang lihat blog Anda. Jika sudah kembali muncul Anda dapat mengembalikan lagi setelan bahasa tadi. Cara ini sudah dicoba pada blog ini dan langsung berhasil.

Sekian tutorial singkat kali ini. Semoga berhasil.

Cara Menambahkan Widget Followers Blogger 2016

4

Blogger mempunyai widget yang bisa digunakan untuk menjalin pertemanan, yaitu Google Friend Connect (Followers). Dengan widget ini Anda bisa menerima posting terbaru dari blog yang diikuti.

Widget ini sudah ada sejak lama di blogspot dan sudah banyak digunakan oleh para penggunanya.

Salah satu kelebihan widget Followers kita dapat menerima trafik dari para follower yang berasal dari update terbaru blog pada dasbor.

Akan tetapi layanan blogger ini tidak dapat digunakan seperti halnya media sosial lainnya. Karena kita tidak dapat memposting tulisan secara manual.

Untuk bersaing dengan jejaring sosial lain, seperti facebook yang sudah memiliki banyak pengguna, Google meluncurkan layanan terbaru pada tahun 2011 yang dinamakan Google+ (Google Plus). Walaupun sebelumnya sudah ada layanan serupa yaitu Google Buzz.

Fiturnnya sudah lengkap dimana kita bisa berbagi tulisan, gambar, video, dan sebagainya.

Tapi dengan kelebihan widget followers tadi, mungkin Anda masih ingin menambahkannya pada blog.

Memasang Widget Followers

Jika sebelumnya widget ini dapat ditambahkan dengan mudah melalui tab "Layout". Sekarang langkahnya sedikit berbeda namun tetap bisa dilakukan dengan mudah pada tab yang sama.

Berikut langkah-langkah menambahkan widget Followers.

1. Pertama klik tab Layout (1).
   
   
   
   
2. Klik Add a Gadget (2).
   
   
   
   
3. Pilih tab More Gadgets (3).
   
   
   
   
4. Scroll halaman sampai ke paling bawah, kemudian klik Followers (4).
   
   
   
   
5. Ubah judul widget (5) dan klik tombol Save (6).
   
   
   
   

Sekarang coba lihat pada halaman blog Anda.

Jika tidak ada masalah maka widget Followers yang sudah ditambahkan tadi telah muncul.

Selamat mencoba.

Cara Mudah Potong Snippet Popular Post di Blogger

26

Sekarang Xceria akan membagikan tips seputar tutorial blogspot. Kali ini mengenai widget popular post, yaitu cara memotong snippet atau menyingkat cuplikan paragraf pada widget popular post.

Jika kita menambahkan widget popular post, pada kondisi default, deskripsi atau snippet yang ditampilkan mungkin terlalu panjang. Apalagi jika ukuran sidebar blog Anda (atau tempat di mana Anda meletakkan widget popular post) terlalu kecil.

Jika seperti itu, widget popular post Anda mungkin akan terlihat kurang rapi dan banyak memakan tempat. Apalagi jika Anda ingin menampilkan banyak posting pada widget popular posts.

Pada pengaturan widget popular post, Anda dapat mengatur apakah akan menampilkan snippet atau tidak. Tapi bloger tidak memberikan pengaturan untuk mengatur atau menentukan jumlah karakter pada snippet tersebut.

Cara Memotong Cuplikan Deskripsi Popular Post di Blogger

Untuk dapat memotong cuplikan atau snippet digunakan JavaScript. Dengan script ini Anda dapat menentukan jumlah karakter pada snippet atau deskripsi popular post di blog Anda.

Menambahkan Widget Popular Post

1. Log in ke akun blogger.
2. Pilih tab Layout (Tata Letak).
3. Klik Add a Gadget (Tambahkan Gadget).
4. Pilih Popular Posts.

Menambahkan Java Script untuk Memotong Snippet

1. Pilih Template » Edit HTML.
2. Cari kode </body>, letakkan kode berikut di atasnya.
3. 
   
   <script type='text/javascript'>
   //<![CDATA[
   $('.popular-posts ul li .item-snippet').each(function(){
   var txt=$(this).text().substr(0,70);
   var j=txt.lastIndexOf(' ');
   if(j>42)
   $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
   });
   //]]>
   </script>
   
   
4. Simpan template.

Ubah angka 70 sesuai keinginan dan lihat hasilnya pada blog Anda.

Pada widget popular post, tampilkan snippet (cuplikan).

Sekian posting kali ini mengenai cara memotong snippet popular post di blogger. Semoga membantu.

Cara Mudah Memasang Widget Alexa Rank di Website

19

Sekarang alexa sudah memperbarui situsnya dengan mengubah atau menambah fitur-fitur baru. Tampilan websitenya juga lebih enak dipandang dan lebih modern.

Bagi yang ingin menampilkan alexa rank widget di website, Anda tidak akan menemukan fitur untuk melakukannya.

Jika sebelumnya hal ini dapat dilakukan dengan mudah menggunakan fitur yang disediakan, sekarang sudah tidak ada. Tapi tenang, kita tetap bisa menampilkan alexa rank dengan mudah.

Sebaiknya pasang widget ini di website atau blog Anda. Karena dengan menampilkan alexa rank widget pada website, berarti Anda sudah melakukan salah satu cara meningkatkan alexa rank website.

Selain itu, jika peringkat alexa website Anda sudah tinggi, tentu website Anda menjadi lebih dipandang orang. Hal ini juga meningkatkan keinginan pengunjung untuk memasang iklan. Karena dengan alexa rank yang tinggi, berarti pengujung atau trafik sudah sangat banyak.

Cara pasang widget alexa rank di blog

Di bawah ini terdapat 2 jenis widget untuk menampilkan alexa rank. Yang pertama menampilkan hanya peringkat saja, sedangkan yang kedua menampilkan peringkat blog dan jumlah link in.

1. Hanya Rank

Jika hanya ingin menampilkan peringkat alexa, copy kode di bawah ini.

<a href="http://www.alexa.com/siteinfo/yoursite.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/t/a?url=yoursite.com"></script></a>

2. Rank + Links in

Sedikit berbeda dengan yang di atas, di bawah ini merupakan kode untuk menampilkan peringkat alexa dan jumlah backlink.

<a href="http://www.alexa.com/siteinfo/yoursite.com"><script type="text/javascript" src="http://xslt.alexa.com/site_stats/js/s/a?url=yoursite.com"></script></a>

Ubah yoursite.com dengan alamat website atau blog Anda.

Anda bisa memasang widget alexa pada sidebar. Berikut cara melakukannya pada blogger.

1. Log in ke akun blogger.
2. Pilih tab Layout (Tata Letak).
3. Klik Add a Gadget (Tambahkan Gadget).
4. Pilih HTML/JavaScript.
5. Isi judulnya, kemudian copy-paste kode di atas pada bagian konten.

Sekian postingan terkait cara menampilkan alexa rank widget di website. Semoga bermanfaat.

Cara Pasang Widget Top Komentator di Blogspot

429

Sebelumnya saya sudah pernah memasang widget top komentator di blog ini. Kali ini saya akan menulis tutorial blog mengenai cara pemasangan widget ini di blogspot/blogger.

Widget ini akan menampilkan 10 komentator yang paling banyak berkomentar di blog anda (berupa link dofollow). Jadi, widget top komentator ini bisa menarik hati pengunjung untuk mau berkomentar lebih banyak lagi di website atau blog anda.

Script yang digunakan tidak terlalu panjang dan tidak berat saya rasa. Anda bisa memasangnya dalam waktu singkat. Bagi yang berminat silahkan dicoba!

1. Buka Design » Page Elements.
2. Klik Add a Gadget.
   
   
3. Pilih gadget HTML/JavaScript.
   
4. Isi judul gadget.
5. Copy-paste script di bawah ini ke dalam gadget tadi.

<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul>');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=47909d73002419d14e697928bd9c4f24&url=http%3A%2F%2Fwww.namablog.com&num=10&filter=Nama Akun Blogger" type="text/javascript"></script>

6. Simpan gadget.

Cat.
- Ganti nama di atas dengan nama atau alamat blog anda.
- Ubah nama pada tulisan yang ditandai di atas untuk mem-filter (tidak menampilkan) nama tersebut.

Cukup sampai di sini cara memasang widget top komentator. Selanjutnya widget ini akan menampilkan komentator yang paling banyak berkomentar di blog anda secara otomatis.

Semoga berhasil!

Cara Membuat Random Post di Wordpress

154

Cara membuat random post di Wordpress (Self-Hosted). Website dengan platform wordpress (Self-Hosted) juga bisa menggunakan random post yang sudah pernah saya posting-kan ini. Sebenarnya hampir sama dengan blogger. Perbedaan scriptnya hanya terletak pada url feed.

Posting ini saya buat karena ada salah satu pembaca yang menanyakan tutorial random post ini untuk platform wordpress. Seperti random post di blogger, random post ini juga menampilkan post secara berganti dan berupa slide.

Langsung saja ikuti tutorialnya!

CSS

Pertama yang perlu anda lakukan, yaitu menyimpan css untuk random post ini.

1. Log in ke situs anda.
2. Pilih menu Appearance » Editor » Stylesheet (style.css).
3. Copy kode berikut ke bagian paling bawah.

.gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px; background:none;border: 0px solid #363636;}

.gfg-title {font-size: 16px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;}

.gfg-subtitle {font-size: 14px;font-weight: bold;color: #333;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;}

.gfg-subtitle a {color : #a43434;display:none !important;}

.gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;}

.gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;}

.gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#a43434;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;}

.gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #333;margin-top : 3px;font-size: 12px;}

.clearFloat {clear : both;}

#feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #333;}

5. Simpan (Klik Mutakhirkan Berkas).

Script Random Post

Untuk script random post ikuti langkah-langkah berikut.

1. Pilih menu Appearance » Widget.
2. Tarik widget teks ke kolom sidebar.
   
   
   
   
3. Isi judul widget.
   
4. Copy-paste script berikut ke dalam widget tadi.
   

<script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w" type="text/javascript"></script>

<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',
url:'http://www.namablog.com/feed/'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: " "});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>

<div id="feedGadget"><center><img src="http://img80.imageshack.us/img80/1577/loadingtrans.gif" /></center></div>

5. Ganti nama blog anda.
6. Simpan widget.

Sekarang lihat website anda! Postingan anda akan tampil secara random (acak) di bagian sidebar.

Selain dengan cara di atas Anda juga bisa menampilkan postingan secara acak dengan menggunakan plugin yang tersedia di wordpress.

Selamat mencoba!

Cara Membuat Random Posts di Blogger

180

Cara membuat random post di blogger. Tutorial blog kali ini akan menjelaskan bagaimana cara menampilkan posting/artikel secara acak di blogspot.

Random post ini disebut dengan random post dinamis, karena tampilannya yang berupa slide. Dengan tampilan slide tersebut, tentu random post ini juga akan dapat menarik perhatian pengunjung. 

Bagi anda yang jarang mengupdate blog, mungkin widget ini cukup berguna. Karena semua artikel yang ada di blog anda akan ditampilkan secara acak nantinya dengan menggunakan widget ini.

Dengan begitu, pengunjung yang beberapa kali mengunjungi blog anda bisa terus membaca artikel-artikel Anda yang lain, walaupun Anda belum menambahkan postingan baru sekalipun.

Bagi anda yang ingin mencoba random post dinamis ini, bisa langsung mengikuti tutorial berikut.

CSS

Pertama yang perlu anda lakukan, yaitu menyimpan css untuk random post ini.

1. Log in ke blogger.
2. Pilih menu Layout (Tata Letak) » Edit HTML.
3. Cari kode ]]></b:skin>
4. Copy kode berikut di atas kode tadi.

.gfg-root { width: auto; height: auto; position: relative; overflow: hidden; text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px; background:none;border: 0px solid #363636;}

.gfg-title {font-size: 16px;font-weight : bold;color : #fff;background-color: none;line-height : 1.4em;overflow: hidden;white-space : nowrap;}

.gfg-subtitle {font-size: 14px;font-weight: bold;color: #333;background-color: none;line-height : 1.4em; overflow : hidden;white-space : nowrap;margin-bottom : 0px;}

.gfg-subtitle a {color : #a43434;display:none !important;}

.gfg-entry {background-color: none;width : 100%;height : 9.9em;position : relative;overflow : hidden;text-align : left;margin-top : 0px;}

/* To allow correct behavior for overlay */
.gfg-root .gfg-entry .gf-result {position : relative;background-color:none;width : auto;height : 100%;padding-left : 5px;padding-right : 5px;}

.gfg-list {position : relative;overflow : hidden;text-align : left; margin-bottom : 15px;display:none !important;}

.gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;display:block;color:#a43434;font-weight:bold;line-height: 1.2em;overflow : hidden;white-space : nowrap;text-overflow : ellipsis;-o-text-overflow : ellipsis;margin-top : 4px;}

.gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;color: #333;margin-top : 3px;font-size: 12px;}

.clearFloat {clear : both;}

#feedGadget { margin-top: 3px;margin-left: auto;margin-right: auto;width: auto;font-family:verdana, arial;font-size: 10px;color: #333;}

5. Simpan template.

Script Random Post

Untuk memasang script random post ini ikuti langkah-langkah berikut.

1. Buka Layout (Tata Letak) » Page Elements (Elemen Laman).
2. Klik Add a Gadget (Tambah gadget).
   
   
3. Pilih gadget HTML/JavaScript.
   
4. Copy-paste script berikut ke dalam gadget tadi.
   

<script src="http://www.google.com/jsapi/?key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w" type="text/javascript"></script>

<script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript"></script>

<script type="text/javascript">
function showGadget() {
var feeds = [
{title:'title',
url:'http://namablog.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'},
];
new GFdynamicFeedControl(feeds, 'feedGadget',
{numResults : 1000, stacked : true,
title: " "});
}
google.load("feeds", "1");
google.setOnLoadCallback(showGadget);
</script>

<div id="feedGadget"><center><img src="http://img80.imageshack.us/img80/1577/loadingtrans.gif" /></center></div>

5. Jangan lupa ganti nama blog anda.
6. Simpan gadget.

Sekarang lihat hasilnya. Postingan anda akan tampil secara random (acak).

Selamat mencoba!

Lihat demo:
http://demotutorial.blogspot.com/2010/05/random-post-dinamis.html
update:
Tutorial membuat random post di Wordpress

Cara Pasang Widget Top Referrer

98

Cara Pasang widget top referrer. Bagi para blogger tentu akan lebih baik jika anda bisa memantau perkembangan blog anda. Banyak tool-tool online yang bisa anda gunakan untuk hal itu. Misalnya untuk memantau jumlah pengunjung, pageview, bagaimana pengunjung datang, halaman yang dikunjungi dan lain-lain.

Dari sekian banyak tool online, ada satu tool yang bisa anda gunakan dalam memantau trafik blog anda. Tool tersebut adalah E-Referrer. Tool ini akan menampilkan website atau search engine referrer yang paling banyak berperan dalam menghasilkan pengunjung ke blog anda.

Anda bisa menggunakan tool ini langsung di blog anda tanpa harus log in terlebih dahulu seperti google analytic. Bagi anda yang ingin menggunakan tool ini, silahkan ikuti tutorial berikut.

1. Klik di sini untuk mendaftar.
2. Isi nama, username, email dan password anda pada kotak yang disediakan.
3. Klik tombol submit.
4. Setelah itu, akun anda akan langsung aktif dan anda bisa log in dengan username dan password anda tadi.
5. Setelah log in, klik tombol Generate Code atau menu Get Code yang ada di sebelah kiri.
6. Kemudian copy-paste script yang diberikan ke sidebar atau ke bagian lain dari blog Anda.

Setelah selesai, widget top referrer ini tidak langsung muncul. E-Referrer akan mengidentifikasi terlebih dahulu referrer website atau blog anda sebelum menampilkannya.

Semoga bermanfaat!

Cara Membuat Kotak Chatting Tersembunyi

25

Cara membuat kotak chatting tersembunyi. Sebelumnya sudah pernah membahas mengenai alternatif chatting bagi pengguna shoutmix. Kali ini saya akan membahas tutorial blog mengenai kotak chatting yang tesembunyi.

Mungkin anda sudah pernah melihat kotak chatting yang tersembunyi di beberapa blog. Dimana widget chatting itu akan muncul setelah diklik. Script yang digunakan pada kotak chatting tersebut adalah javascript. Javascript memang bisa menciptakan script-script yang hebat dan kreatif.

Di posting ini anda akan mendapatkan tutorial blog mengenai cara membuat kotak chatting tersembunyi tersebut. Langsung saja ikuti tutorialnya di bawah ini.

1. Masuk ke blogger.
2. Pilih Layout (Tata Letak) » Page Elements (Elemen Laman).
3. Klik tulisan Add a Gadget (Tambah Gadget).
4. Pilih gadget HTML/JavaScript.
5. Copy-paste kode berikut di bagian konten.
   
   
   <script type="text/javascript">
   function showHidechat(){
   var chat = document.getElementById("chat");
   var w = chat.offsetWidth;
   chat.opened ? movechat(0, 30-w) : movechat(20-w, 0);
   chat.opened = !chat.opened;
   }
   function movechat(x0, xf){
   var chat = document.getElementById("chat");
   var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
   var dir = xf>x0 ? 1 : -1;
   var x = x0 + dx * dir;
   chat.style.right = x.toString() + "px";
   if(x0!=xf){setTimeout("movechat("+x+", "+xf+")", 10);}
   }
   </script>
   <div id="chat">
   <div class="chat-click" onclick="showHidechat()"> </div>
   <div class="chatbox">
   <center>
   
   
   SCRIPT CHATTING DI SINI
   
   
   </iframe></center>
   [+]
   <span style="float:right">
   <a href="javascript:showHidechat()">
   [x]
   </a></span>
   </div></div>
   
   <script>
   var chat = document.getElementById("chat");
   chat.style.right = (30-chat.offsetWidth).toString() + "px";
   </script>
   
   
6. Simpan gadget.

CSS
Sekarang pada bagian css, ikuti langkah-langkah berikut.

1. Pilih menu Layout (Tata Letak) » Edit HTML.
2. Cari kode ]]></b:skin> kemudian copy-paste kode css berikut di atasnya.
   
   
   #chat{position:fixed; top:25px; z-index:+1000}
   * html #chat{position:relative}
   .chat-click{height:100px; width:30px; float:left; cursor:pointer; background:url(http://i42.tinypic.com/vhb3vc.jpg) no-repeat;}
   .chatbox{float:left; border:2px solid #1f54bc; background:#f0f8ff; padding:10px}
   .chatbox a {text-decoration: none;}
   
   
3. Simpan template.

Anda bisa mengubah gambar atau warna yang ada pada tulisan berwarna biru di atas sesuai dengan keinginan.

Sekarang lihat hasilnya. Semoga membantu!

Chatting dengan Widget dari Google

13

Banyak widget chatting yang bertebaran di internet sekarang ini. Tapi setiap widget tentu berbeda-beda, mulai dari tampilan hingga fungsi yang dimiliki.

Widget chatting yang paling banyak digunakan di Indonesia khususnya adalah shoutmix. Namun sekarang shoutmix tidak bisa digunakan seperti dulu lagi. Beberapa fungsi sudah tidak bisa digunakan lagi.

Di posting sebelumnya tentang alternatif chatting, widget chatting yang dipakai adalah Cbox dan Shoutbox. Kali ini saya akan membahas mengenai widget chatting yang bisa anda dapatkan dari google.

Widget ini cukup sederhana dan bisa dugunakan dengan akun google anda. Selain itu, percakapan yang dilakukan tidak hanya dari pengunjung yang ada di website anda saja, tapi bisa juga dari website lainnya di seluruh dunia. Tapi sepertinya pengguna widget ini masih sedikit. Walaupun begitu, tidak ada salahnya jika anda mencobanya.

Langsung saja ikuti tutorial di bawah ini.

1. Kunjungi http://www.google.com/webelements/social/conversation/.
2. Pada Size, pilih ukuran widget yang anda inginkan.
3. Pilih topik sebagai bahan perbincangan. Jika tidak ada, anda bisa gunakaan topik anda sendiri dengan memilih pilihan Type your own dan ketikkan topik anda.
4. Pada Scope pilih Restrict to your site untuk membatasi percakapan hanya di website anda. Atau pilih Share across the web untuk menerima percakapan dari seluruh website.
5. Jika sudah, sekarang anda akan melihat preview dari widget ini.
   
6. Terakhir copy script yang ada di bawahnya ke website atau blog anda.

Sekian dulu postingan kali ini. Semoga bermanfaat.

Alternatif Chatting dengan Cbox dan Shoutbox

18

Alternatif chatting dengan Cbox dan Shoutbox. Shoutmix yang selama ini sudah banyak dipakai oleh blogger Indonesia sebagai widget chatting sekarang sudah tidak seperti dulu lagi. Fungsi link yang dulu ada tidak bisa muncul, kecuali jika kita log in dan juga jika menggunakan layanan premium.

Ada yang bilang masalah error pada shoutmix ini hanya terjadi di Indonesia karena banyaknya blogger Indonesia yang menggunakan widget chatting ini. Mungkin ini juga terjadi karena kegiatan spam yang sering dilakukan. Tapi sampai sekarang penyebabnya masih belum jelas.

Menanggapi hal ini, banyak yang mengganti widget chattingnya dengan layanan lain. Di bawah ini ada 2 widget chatting yang cukup bagus dan bisa anda gunakan sebagai pengganti shoutmix. Walaupun tidak sebagus shoutmix, tapi setidaknya kegiatan chatting tetap bisa diikuti dengan mencantumkan link.

Cbox
Untuk bisa menggunakan Cbox, anda harus mendaftar terlebih dahulu. Tapi tenang saja, pendaftarannya tidak membutuhkan waktu lama dan tanpa verifikasi akun.

1. Kunjungi Cbox.
2. Pilih menu sign up.
3. Lengkapi semua data yang diminta.
4. Beri tanda centang pada tulisan I have read and....
5. Klik tombol Create my Cbox!
6. Setelah itu, anda log in dengan akun anda tadi.
7. Kemudian klik menu Publish!
8. Terakhir, copy-paste script tersebut ke blog anda.

Shoutbox
Berbeda dengan Shoutmix dan Cbox, pada Shoutbox anda tidak perlu melakukan pendaftaran.

1. Kunjungi Shoutbox.
2. Tentukan lebar dan tinggi widget.
3. Copy-paste script tersebut ke blog anda.

Mengenai tutorial memasang kotak chatting di atas ke blog anda (blogger & wordpress) bisa dilihat di posting Pasang Kotak Chatting dengan Shoutmix.

Selamat mencoba!

Membuat Related Posts Lebih Indah dengan Fungsi Scroll

26

Related Post dengan fungsi scroll. Melanjutkan artikel sebelumnya mengenai cara membuat related post di blogspot, kali ini saya akan menjelaskan cara membuat related post menjadi tampak lebih indah.

Tutorial related post atau artikel terkait yang akan dijelaskan, yaitu membuat related post dengan fungsi scroll dan dengan tampilan yang lebih menarik. Dengan fungsi scroll in

i artikel terkait dalam jumlah yang banyak akan lebih tersusun rapi, tidak memanjang ke bawah.

Dengan begitu, related post ini akan meningkatkan perhatian pembaca terhadap artikel-artikel terkait yang ada. Tentunya hal ini akan berpengaruh terhadap pageview yang juga akan berpengaruh terhadap alexa rank.

Ini contohnya.


Bagi yang ingin mencoba, silahkan ikuti tutorial di bawah ini.

1. Log in ke akun blogspot Anda.
2. Pilih menu Layout (Tata Letak) » Edit HTML.
3. Beri tanda centang pada tulisan Expand Widget Templates.
4. Cari kode berikut.
   
   
   <p><data:post.body/></p>
   
   
5. Copy-paste kode berikut di bawah kode tadi.
   
   <b:if cond='data:blog.pageType == "item"'> <h2> Artikel Terkait:</H2><div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='albri'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels' var='label'> textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop> </b:loop> </SCRIPT> </DIV><script type="text/javascript">RelPost();</script> </DIV></b:if><br />
   
   
6. Setelah itu, copy-paste kode berikut di atas kode ]]></b:skin>
   
   
   /*-----------------------------
   kode related post optimal
   visit http://www.ateonsoft.com
   ------------------------------*/
   .rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
   background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
   .rbbox:hover{background-color: rgb(255, 255, 255);}
   
   
7. Terakhir, copy kode berikut dan paste di atas kode </head> kemudian simpan template.
   
   
   <SCRIPT src='http://ateon.fs.googlepages.com/kodescript.js' type='text/javascript'/>
   
   

Silahkan dicoba tutorial blog kali ini mengenai cara membuat related post dengan fungsi scroll yang lebih indah. Semoga bermanfaat dan semoga berhasil.

Cara Membuat Related Posts (Artikel Terkait) di Blogger

103

Tutorial blog kali ini akan membahas mengenai cara membuat related post di blogger. Artikel atau posting terkait yang dimaksud di sini adalah artikel yang berada pada kategori atau label yang sama.

Related post ini tentu akan memudahkan pengunjung dalam menemukan artikel-artikel yang berhubungan dengan artikel yang sedang dibaca. Selain itu, related post juga akan berpengaruh terhadap SEO.

Nah, bagi yang ingin membuat related post di blogspot ikuti tutorial berikut ini.

1. Log ini ke akun blogger Anda.
2. Pilih menu Tata Letak (Layout) » Edit HTML.
3. Beri tanda centang pada tulisan Expand Widget Templates.
4. Copy-paste script berikut di atas kode </head>.
   
   
   <script type="text/javascript">
   //<![CDATA[
   var relatedTitles = new Array();
   var relatedTitlesNum = 0;
   var relatedUrls = new Array();
   function related_results_labels(json) {
   for (var i = 0; i < json.feed.entry.length; i++) {
   var entry = json.feed.entry[i];
   relatedTitles[relatedTitlesNum] = entry.title.$t;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   relatedUrls[relatedTitlesNum] = entry.link[k].href;
   relatedTitlesNum++;
   break;}}}}
   function removeRelatedDuplicates() {
   var tmp = new Array(0);
   var tmp2 = new Array(0);
   for(var i = 0; i < relatedUrls.length; i++) {
   if(!contains(tmp, relatedUrls[i])) {
   tmp.length += 1;
   tmp[tmp.length - 1] = relatedUrls[i];
   tmp2.length += 1;
   tmp2[tmp2.length - 1] = relatedTitles[i];}}
   relatedTitles = tmp2;
   relatedUrls = tmp;}
   function contains(a, e) {
   for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
   return false;}
   function printRelatedLabels() {
   var r = Math.floor((relatedTitles.length - 1) * Math.random());
   var i = 0;
   document.write('<ul>');
   while (i < relatedTitles.length && i < 20) {
   document.write('<li><a href="' + relatedUrls[r] + '">' +
   relatedTitles[r] + '</a></li>');
   if (r < relatedTitles.length - 1) {
   r++;
   } else {
   r = 0;}
   i++;}
   document.write('</ul>');}
   //]]>
   </script>
   
   
5. Cari kode <div class='post-footer'>, kemudian copy-paste kode berikut di bawahnya.
   
   
   <b:if cond='data:post.labels'>
   <b:loop values='data:post.labels' var='label'>
   <b:if cond='data:blog.pageType == "item"'>
   <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
   </b:if>
   </b:loop>
   </b:if>
   
   <b:if cond='data:blog.pageType == "item"'>
   <h4>Artikel Terkait</h4>
   <script type="text/javascript">
   removeRelatedDuplicates();
   printRelatedLabels();
   </script>
   </b:if>
   
   
6. Simpan template.

Silahkan dicoba tutorial membuat related post ini. Semoga berhasil!

Cara Pasang Widget Rating di bawah Read More

14

Bagaimana cara meletakkan widget rating di bawah read more? Posting ini saya buat untuk menanggapai salah satu komentar pembaca, yaitu Mr.BahBah.

Jika Anda menggunakan fungsi read more dari blogger, widget rating ini akan tampil di atas fungsi read more. Ini disebabkan karena peletakkan kode fungsi read more dari blogger dan harus sedikit dipindahkan ke atas.

Untuk membuat widget rating di bawah fungsi read more, langsung saja ikuti tutorialnya di bawah ini.

1. Log in ke akun blogger Anda.
2. Pilih menu Tata Letak (Layout) » Edit HTML.
3. Beri tanda centang pada tulisan Expand Widget Templates.
   
4. Cari kode fungsi read more seperti di bawah ini.
   
   
   <b:if cond='data:post.hasJumpLink'>
   <div class='jump-link'>
   <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
   </div>
   </b:if>
   
   
5. Letakkan kode tersebut di bawah kode berikut.
   
   
   <p><data:post.body/></p>
   
   
   
   
   
   
6. Simpan template.

Sekarang lihat hasilnya. Jika berhasil, widget rating ini akan tampil di bawah fungsi read more seperti di bawah ini.



Itulah cara pasang widget rating di bawah read more. Selamat mencoba, semoga berhasil!

Cara Pasang Widget Rating di Blogger

42

Widget rating adalah widget yang bisa digunakan oleh pengunjung untuk memberi nilai bagi posting Anda. Tutorial blog yang akan saya bahas kali ini adalah mengenai cara memasang widget rating di blogger.

Widget rating ini sudah banyak dipakai di website-website terkenal. Di wordpress sendiri sudah terdapat plugin untuk menampilkan widget rating di suatu website. Tentunya bagi yang membuat website berbasis wordpress (self-hosted) akan dengan mudah bisa menampilkan widget rating.

Lalu bagaimana dengan blogger? Jangan kuatir, blogger sebenarnya sudah menyediakan widget rating ini. Namun, tidak seperti yang ada pada plugin wordpress. Widget yang disediakan oleh blogspot/blogger tampil dalam bentuk kata-kata.

Tetapi sekarang widget rating dalam bentuk bintang sudah bisa digunakan di blog Anda seperti pada plugin wordpress. Widget ini dibuat oleh outbrain dan scriptnya sudah bisa langsung Anda pakai pada blogspot. Ikuti tutorialnya di bawah ini.

1. Kunjungi outbrain.
2. Pilih platform website Anda.
   
3. Klik tombol Get Widget Now jika tidak ingin mendaftar. Tetapi sebaiknya Anda mendaftar terlebih dahulu dengan memberi tanda ceklis pada bagian register. Dengan mendaftar Anda akan lebih leluasa dalam mengaturnya.
   
   
4. Jika mendaftar, konfirmasi pendaftaran Anda terlebih dahulu melalui email. Jika tidak, Anda akan dibawa ke halaman penambahan elemen blogger pada tab baru.
   
5. Pilih blog yang akan dipasangkan widget rating.
   
6. Terakhir, klik tombol menambah widget.
   
   

Setelah selesai menambahkan widget rating, coba lihat hasilnya di blog Anda. Jika widget berhasil tampil, sekarang coba beri nilai pada salah satu postingan Anda. Hasilnya akan tampak seperti ini.

Selamat mencoba artikel cara pasang widget rating di blogger, semoga berhasil!

Pasang Kotak Chatting dengan Shoutmix

25

Bagaimana cara memasang kotak chatting dengan shoutmix? Setiap blogger pasti ingin blognya mendapat banyak pengunjung setiap harinya. Nah salah satu caranya dengan rajin meninggalkan jejak di widget chatting.

Kotak chatting ini memiliki banyak manfaat. Selain untuk meninggalkan pesan atau pertanyaan, juga tentunya sebagai daya tarik sebuah situs/blog. Dengan adanya tempat chatting, orang akan lebih suka mengunjungi blog Anda. Lalu bagaimana cara memasang kotak chatting di blog?

Sebenarnya Anda tidak perlu lagi memikirkan bagaimana membuat script untuk bisa chating di blog Anda. Karena sekarang sudah banyak layanan gratis untuk memasang kotak chatting di website Anda.

Salah satu yang paling terkenal saat ini adalah shoutmix. Karena memang shoutmix memiliki kualitas tinggi. Cara mendaftarnya bisa Anda lihat di bawah ini.

1. Klik di sini untuk mendaftar.
2. Isi data diri Anda.
   
3. Beri tanda ceklis/centang pada tulisan "I have read and agree to the Terms of Service."
4. Kemudian, klik tombol continue.
   
5. Setelah selesai mendaftar, klik Style & Colors di bagian "Display". 
6. Atur tampilan dan warna sesuai keinginan.
7. Klik tombol save settings.
8. Kembali ke halaman depan pengaturan, klik Get codes pada bagian "Quick Start"
9. Copy-paste kode yang diberikan ke blog Anda.

Untuk cara memasang kotak chatting di blogspot lihat petunjuk berikut.

1. Masuk ke dasbor blogger.
2. Pilih menu Design.
3. Klik Tambah Gadget (Add a Gadget).
4. Pilih gadget HTML/JavaScript.
5. Isi judul gadget, misalnya: "Chatting".
6. Copy-paste kode shoutmix tadi ke kotak "konten".
7. Kemudian simpan.

Untuk cara memasang kotak chatting di wordpress lihat langkah berikut.

1. Masuk ke dasbor wordpress Anda.
2. Klik Tampilan (Appearance) » Widget.
3. Tarik widget teks ke kolom sidebar.
   
   
   
   
4. Isi judul Widget.
5. Copy-paste kode shoutmix tadi.
6. Terakhir simpan.
   

Untuk mengubah ukuran kotak chatting, ubah pada bagian width dan height. Ukuran juga bisa dalam bentuk persen, misalnya 100% (agar sesuai dengan ukuran sidebar).

Selamat mencoba!

Cara Membuat Recent Comments Via Feed di Blogger

9

Cara membuat recent comments di blogspot sebenarnya tidak jauh berbeda dengan cara membuat recent posts. Anda bisa menampilkan recent comment atau komentar terbaru juga dengan gadget feed.

Perbedaannya terletak pada url yang diberikan untuk alamat feed.

Langsung saja ikuti tutorialnya di bawah ini.

1. Log in ke blogger.
2. Pilih menu Tata Letak » Elemen Laman.
3. Klik Tambah Gadget di bagian yang diinginkan.
   
4. Pilih gadget Feed.
   
   
5. Setelah itu, akan muncul kotak URL Feed. Isi kotak tersebut dengan alamat feed komentar blog Anda.
   
   
   http://xceria.blogspot.com/feeds/comments/default
   Ganti tulisan berwarna biru dengan alamat blog Anda.
   
   
6. Kemudian klik tombol lanjutkan.
7. Pilih pengaturan sesuai keinginan Anda.
8. Simpan.

Cukup itu saja cara membuat recent comments di blogger. Silahkan dicoba!

Cara Membuat Recent Posts Via Feed di Blogger

10

Cara membuat recent post atau posting terbaru pada blogger pastinya sudah banyak yang tahu. Tapi dari sekian banyak blogger, tentu masih ada yang belum tahu, khususnya bagi yang baru membuat blog.

Membuat/menampilkan recent post sebenarnya tidak susah. Anda bisa menampilkan posting-posting terbaru melalui gadget yang sudah disediakan oleh blogger, yaitu dengan gadget feed.

Tetapi salah satu kekurangannya, kita tidak bisa menampilkan lebih dari 5 posting. Walaupun begitu gadget ini masih banyak dipakai oleh para blogger.

Tutorialnya bisa langsung dilihat di bawah ini.

1. Log in ke blogger.
2. Pilih menu Tata Letak » Elemen Laman.
3. Klik Tambah Gadget di bagian yang Anda inginkan.
   
4. Pilih gadget Feed.
   
   
5. Setelah itu, akan muncul kotak URL Feed. Isi kotak tersebut dengan alamat feed blog Anda.
   
   
   http://xceria.blogspot.com/feeds/posts/default
   Ganti tulisan berwarna biru dengan alamat blog Anda.
   
   
6. Kemudian klik tombol lanjutkan.
7. Pilih pengaturan sesuai keinginan Anda.
8. Simpan.

Setelah itu, posting-posting terakhir Anda akan tampil pada bagian yang sudah Anda letakkan tadi.

Sekian artikel cara membuat recent post. Selamat mencoba!