Kamis, 10 April 2014

Kumpulan Widget Pilihan Terbaik



Apa itu widget? Widget ini adalah sebuah tool yang ada pada halaman web / blog (seperti di blog saya ini) untuk mempercantik, memperindah, dan membuat pembaca terkesan. Ada banyak widget di dunia “maya”, biasanya dari pihak penyedia telah diberikan beberapa widget standar yang bisa dipasang, tapi tentunya untuk memaksimalkan tampilan kita harus mencari widget lain pada penyedia-penyedia widget yang lain.
           Penggunaan serta pemasangan widget telah sangat dimudahkan oleh pihak-pihak penyedia layanan, sehingga yang Anda perlukan biasanya hanya mendaftar atau bahkan ada yang tidak perlu mendaftar sama sekali, cukup meng-copy script yang telah disediakan dalam element blog Anda. Nah berikut ini merupakan Kumpulan Widget Pilihan Terbaik untuk mempercantik tampilan blog Anda.
Note: Saya sarankan jangan terlalu berlebihan memasang widget karena selain agama juga melarang untuk berlebihan, kesannya memasang widget yang berlebih-lebihan terlalu banyak bisa mengakibatkan blog jadi terkesan “amburadul” dan membebani loading halaman blog Anda sehingga tidak menutup kemungkinan terjadi PLP

  1. MyBlogLog’s Recent Readers– Widget satu ini sejak kehadirannya didunia lain blog langsung mendapat sambutan meriah layaknya seleb baru yg lagi naik daun. Widget ini memperlihatkan avatar dari para pengunjung blog Anda. Dan dengan kepopuleran widget satu ini sampai-sampai manajemen MyBloglog mampu meyakinkan Yahoo untuk membeli sahamnya. Yang perlu diperhatikan adalah memiliki account Yahoo lebih dulu.
  2. Mashable– Widget ini menyediakan semacam newsreel (headline news) dalam element blogger yang memberikan cuplikan berita/postingan dari sosial networking. Bedanya ada pilihan warna untuk disesuaikan dengan layout blog Anda.
  3. Headline News – Seperti widget mashable, widget ini pun menampilkan cuplikan headline berita dari situs-situs di seluruh penjuru dunia.
  4. Flickr Flash Photo Stream Badge – Widget ini menampilkan photo-photo dari profil flickr Anda secara berurutan dan dengan sentuhan flash. Flickr merupakan bagian dari yahoo jadi untuk mendapatkan widget ini Anda memerlukan account yahoo seperti pada widget MyBlogLog di atas.
  5. Preview Anywhere– sudah cukup terkenal juga nama snapshots bagi pengguna blogger bahkan untuk WordPress widget ini menjadi rekomendasi khusus dalam dashbord admin penggunanya. Fungsinya untuk melihat preview link keluar dengan tampilan popup yang tidak terlalu besar ketika pengunjung mengarahkan mouse pada teks atau banner yang “mengandung” link.
  6. Twitter Badge– Jika dalam keseharian hidup Anda banyak hal-hal menarik dan begitu penuh warna dengan segudang aktifitas serta ingin agar orang lain tahu dan menampilkan cuplikan kalimat-kalimat pendek *satu paragraf misalnya* (140 karakter) Anda sedang melakukan kegiatan ini, Anda sedang berada dimana, Anda sedang bersama siapa, Anda sedang, sedang, dan sedang lainnya…. Maka widget ini cocok untuk dipasang pada blog Anda. Daripada bikin sendiri element blogger/WordPress *secara manual*menuliskan teks sebagai pesan kepada pengunjung blog Anda bahwa Anda sedang ini-itu, saya sarankan lebih baik menggunakan widget ini. Widget ini akan menampilkan “tweet” terbaru Anda.
  7. Digg News – Widget ini manampilkan Link terakhir yang masuk ke Digg sebuah social bookmarking yang sudah “kakoncara” dijagat perbloggan. Pilihan theme dan warna mudah untuk Anda atur agar sesuai dengan template blog Anda.
  8. FEEDJIT – Feedjit merupakan layanan real time traffic pada blog Anda. Ada empat pilihan widget Feedjit yang bisa Anda gunakan, silahkan kunjungi saja Feedjit dan lihat empat widget apa saja yang tersedia.
  9. LineBuzz – Komentar dalam widget inline untuk Blog Anda. Widget ini sangat berguna bagi blog yang memiliki frekuensi di atas 900 Mhz tinggi dalam menerima komentar, sehingga memudahkan berkomentar jika terjadi diskusi yang berkepanjangan *waaah keren euy*. Hanya sayang, pengunjung harus terdaftar LineBuzz dulu untuk berkomentar *bikin berabe juga*
  10. Flixn – Jika kompi atau laptop Anda terpasang webcam, maka widget ini bisa digunakan untuk memperlihatkan ekspresi “narsis” Anda langsung melalui blog Anda *heuheu* . Jadi pengunjung blog tidak hanya membaca postingan Anda tapi bisa menyaksikan “konser” Anda didepan monitor, mirip webcam yahoo.
  11. 3Jam – Widget ini memudahkan pengunjung blog untuk berinteraksi dengan Anda dengan mengirimkan SMS pada henpun Anda tanpa mereka tahu nomor HP Anda.
  12. Jaxtr– Seperti halnya widget 3jam di atas, dengan menggunakan widget Jaxtr ini, pengunjung blog bisa menghubungi HP Anda tanpa mereka tahu nomor HP Anda. *nomor HP Anda dijamin kerahasiaannya*
  13. LinkedInABox – Menampilkan profile Anda di LinkedIn. Dan widget ini sangat cocok untuk blog personal.
  14. Box Widget– Dengan widget ini, memudahkan pengunjung blog Anda untuk mengupload file ke tempat penyimpanan online box.net melalui widget box.net pada blog Anda.
  15. Price of gas – Menampilkan harga bahan bakar kendaraan bermotor secara online (US$), kalo di Indonesia mungkin seperti harga Bensin premium, pertamax dan solar. “sangat cocok” untuk pengunjung blog Anda yang mobilitasnya tinggi. *terasa aneh* tapi kalo blog Anda memang membahas masalah gas bumi, bahan bakar dan yang sejenis maka widget ini sangat cocok, lagian tidak perlu mendaftar hanya mengcopas scrift yang disediakan Gas-Cost.Net.
  16. iBegin Weather Widget – Menampilkan laporan cuaca untuk wilayah Kanada dan Amerika. Seperti widget Price of Gas di atas widget ini hanya cocok untuk blog yang memang membahas masalah yang sama.
  17. ClockLink – Sepertinya widget ini yang paling banyak diminati dan digunakan para blogger yang peduli dengan manajemen waktu, seperti namanya clock, widget ini menampilkan petunjuk waktu atau jam pada blog Anda.
  18. Film Loops – Menampilkan kesimpulan film terakhir yang Anda tonton melalui account FilmLoops Anda.
  19. Daily Painters – Widget ini sangat cocok bagi Anda yang berjiwa seni tinggi karena widget ini menampilkan lukisan-lukisan dari pelukis terkenal di dunia.
  20. WhoLinked – Memperlihatkan kepada pengunjung blog Anda situs-situs yang telah melink pada blog Anda. tidak perlu mengupdate karena WhoLinked ini secara teratur mengupdate sendiri web/blog yang melink blog Anda.
  21. Criteo AutoRoll – Widget ini memperlihatkan link menuju blog-blog yang sehaluan dengan blog Anda. Sehaluan…? Secara…! Heuheu.
  22. Calender – Berbeda dengan WordPress yang sudah mempunyai widget ini di dalamnya, untuk pengguna blogger widget kalender belum tersedia, oleh karenanya jika Anda ingin menampilkan kalender maka widget satu ini pantas di perhitungkan.
  23. Bitty Browser – Menampilkan web browser “mini

3 Situs Terbaik untuk Cek Kecepatan Loading dan Optimasi Blog

Lagi-lagi kita akan berbicara mengenai kecepatan/performa suatu blog, yah karena performa blog sangat menentukan trafik dari blog tersebut. Sebelum melakukan optimasi terhadap performa blog kita tentu kita harus mengetahui terlebih dahulu berapa besarkah performa kecepatan loading blog kita. Nah maka dari itu sekarang Ricki Berbagi ingin mereview tiga buah situs yang sering saya gunakan untuk mengecek kecepatan loading blog agar mudah untuk dioptimasi.
Mungkin 3 Situs ini sudah sangat familiar bagi para webmaster :D
1. PageSpeed Insight From Google
Ini adalah tool besutan google yang dapat mengukur seberapa besar performa blog kita. Dengan tool ini kita bisa meneliti masalah-masalah apa saja yang mempengaruhi performa kecepatan blog kita, mulai dari High Priority sampai Low Priority, selain itu tool ini juga menyediakan fitur Experimental Rules yaitu kamu akan diberikan masukan-masukkan yang berguna untuk meningkatkan kecepatan loading blog kamu
2. Website Speed and Performance Optimization by GTmetrix
Link : Klik Disini
Ini tool dari GTmetrix, fungsinya sama saja seperti PageSpeed Insight, melalui tool ini kita bisa melihat lamanya waktu blog kita untuk dimuat 100%, ukuran halaman blog kita (dalam kb), serta total request ketika blog kita diakses. Situs ini juga memberi masukan / saran untuk meningkatkan performa blog kita, tapi sayangnya kalau sobat tidak mendaftar menjadi pro member maka akan diberi batasan dalam menggunakan situs ini, yaitu hanya boleh 20 kali test dalam sehari.
3. Pingdom Tools by Pingdom
Link: Klik Disini
Tool ini fungsinya sama saja seperti GTmetrix, hanya saja di pingdom kita tidak diberi batasan mengetest speed blog dalam satu harinya tidak seperti di GTmetrix yang hanya boleh 20 kali dalam sehari. Dan fitur khusus pingdom ini kita bisa memilih mau mengetest menggunakan server Amsterdam, Dallas, atau New York.

Tips Memilih Template Blog Yang SEO Friendly | Tip SEO

Ricki Berbagi - Ciri-Ciri template blog yang SEO friendly itu seperti apa yah ? Memilih template untuk sebuah blog adalah bagian yang paling menarik selain pembahasan masalah Riset Keyword dalam Dunia SEO, setidaknya ini yang juga di alami oleh B|C sendiri.

Ketika anda memasuki blog, pernahkah sahabat B|C mengalami hal-hal di bawah ini ?

Akses blog yang sangat lambat
Blog yang terlihat ramai dengan aksesories widget di sidebar nya belum lagi ada bintang-bintang yg melayang :D
Ada kalanya tiba-tiba telinga kita yg pake ear phone dan sedang asyik-asyiknya dengerin lagu instrumen di kejutkan dengan lagu super heboh yang tiba-tiba keluar dari blog
Yang paling menjengkelkan ketika tiba-tiba halaman blog di tutup oleh sebuah iklan "melayang" ?
Dan yang tidak kalah mengganggunya adalah bagaimana mata kita merem melek sambil mengeryitkan dahu saking susahnya baca artikel dengan background hitam pekat, sementara tulisannya samar-samar berwarna abu-abu.

Biasanya jika saya menemukan salah satu dari ciri-ciri diatas, browsing langsung saya tutup seketika :( Bagaimana dengan Sahabat B|C ?

Sebetulnya contoh-contoh kasus di atas tidak semuanya berkaitan dengan template blog, tapi bisa jadi acuan kita bagaimana memilih template yang sesuai dengan kebutuhan blog yang kita bangun.

Berikut adalah "Tip Memilih Template Blog dan tentunya SEO friendly :
  1. Pilih Template dengan akses Ringan : Selain memanjakan pengunjung, akses yang cepat akan lebih memudahkan mesin pencari untuk meng-index blog kita. Salah satunya pilihlah template dengan ukuran file yang kecil (maksimal 100 kb sudah cukup bagus). Umumnya template yang berat karena terlalu banyak javascript di dalamnya.

  2. Background, warna dan ukuran font yang serasi : Pilih template dengan background warna yang cerah dengan tulisan konten yang kontras (Hitam/Biru). Begitu juga ukuran font yang serasi dan mudah di baca
  3. Pilih Template dengan sidebar di sebelah kanan : Tujuannya agar pada saat blog di akses yang pertama kali muncul adalah konten blog. Jika template mempunyai 3 kolom sidebar, pilih 2 kolom sidebar di sebelah kanan. Kalaupun harus ada sidebar di sebelah kiri, pilih widget yang di tempatkan adalah widget yang ringan.
  4. Hindari template yang mempunyai background "Image" : Template dengan background image memang terlihat fmenarik, namun terkadang malah membebani akses ke blog kita. Usahakan warna background adalah berupa kode warna, bukan Image.
  5. Template dengan Navigasi yang baik : Navigasi link menu yang terstruktur dan jelas pada template blog akan meningkatkan pageview selain itu akan memudahkan mesin pencari untuk menyelami seluruh link blog kita dan memudahkan dalam proses index.
  6. Template yang mendukung aplikasi mobile : Semakin majunya teknologi handphone atau gadget lainnya yang mobile, maka semakin banyak orang yang akses web melalui aplikasi mobile. Usahakan bahwa template blog kita support thd aplikasi-aplikasi yang mobile tsb.
  7. Pilih template yang memiliki Dinamic META TAG : Meta Tag yang dinamik akan menolong mesin pencari semacam google untuk mengindex blog kita, bahkan bisa mendongkrak ke halaman pertama hasil pencarian
  8. Pilih template yang memiliki Heading H1, H2, H3 ..dst yang ter-struktur :  Pada umumnya template bawaan blogger menjadikan judul blog sebagai H1, tapi beberapa pakar SEO mengubahnya H1 untuk judul posting, sementara judul blog untuk H2. Pengaruhnya nanti di tampilan hasil pencariannya akan terlihat lebih spesifik sesuai topik yang di posting.
  9. Template SEO Friendly
  10. Template Memiliki "Related Post" : Kebanyakan templated sudah terpasang Related Post, jika belum ada silahkan cari di google yah ^^, sudah demikian banyak blog-blog yang membahas Cara Bikin Related Post di Blog. Fitur ini sangat penting dan juga sangat bermanfaat bagi pengunjung dan pastinya akan meningkatkan jumlah PageView, karena pengunjung akan di permudah untuk melihat artikel blog lainnya.
  11. Template memiliki Link Share FB, G+ dan Twitter : Fasilitas ini sangat penting dan terbukti efektif membantu menyebarluaskan artikel blog sobat. Penempatan di bawah judul posting paling strategis. Jika blog sobat belum tersedia fasilitas ini, silahkan baca tip-tipnya untuk menambah icon share FB, G+ dan Twitter << disini >>.
  12. Kode Html/CSS yang Valid : CSS dan HTML usahakan yang berkaitan, kadang kala kalau template sering di utak-atik semakin banyak kode CSS yang sebetulnya tidak terpakai tapi masih ada di kode template kita. Untuk men validasi kode template bisa di pakai tools yang banyak tersedia di internet, salah satunya untuk Markup Validasi bisa pake tools milik W3C 

Demikianlah Tip Untuk Memilih Template yang baik dan SEO Friendly dari Ricki Berbagi. Dari tip-tip diatas akan ada pembahasan yang lebih detail dan spesifik terutama yang berkaitan dengan META TAG, Ubah Heading H1,H2,H3 dan Validasi Kode HTML/CSS dengan judul bahasan Bagaimana Edit Template menjadi SEO Friendly | Tip SEO

Salam Sahabat,

Cara Optimasi Tag H1 : Tag H1 Menjadi Judul Posting | Tip SEO




Optimasi Tag H1
Ricki Berbagi - Tip Bagaimana membuat Tag H1,.. lebih SEO Friendly ? Kali ini saya coba memaparkan sesuai dengan arahan para Master SEO dan kebetulan sudah saya coba di beberapa blog saya yang bertemakan blogspot. Pada umumnya susunan H1, H2, H3 dst pada default template blogspot menempatkan H1 untuk judul blog, kemudian H2 header widget dan H3 adalah judul posting. Padahal kita tahu mesin pencari semacam google lebih mengutamakan H1 untuk mengidentifikasi blog. Dalam tutorial ini memaparkan langkah-langkah Bagaimana ubah Tag H1 menjadi Judul Posting tentu saja biar lebih SEO :)

Langsung saja ikuti langkah-langkah berikut :
  1. Login ke Blogger
  2. Masuk ke Rancangan -> Edit HTML
  3. Jangan lupa di simpan/ download dulu template lama :)
  4. Klik "Expand Widget Template
Langkah 1 :
Cari Kode :
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Ganti dengan :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
Langkah 2 :
Cari Kode :
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
Ganti dengan :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</h1>
<b:else/>
<p class='title' style='background: transparent; border-width: 0px'>
<b:include name='title'/>
</p>
</b:if>
Langkah 3 :
Cari Kode :
<h1 class='title'>
<b:include name='title'/>
</h1>
Ganti dengan :
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<h1 class='title'>
<b:include name='title'>
</b:include></h1>
<b:else>
<div class='title' style='font-size: 26px; font-weight: bold; letter-spacing: -1px; line-height: normal; margin: 5px 5px 0pt; padding: 15px 20px 3px 0pt;'>
<b:include name='title'>
</b:include></div>
</b:else></b:if>

Langkah 4 :
Cari kode yang mirip ini, tidak selalu sama persis soalnya :
.post h3 {
    color: #333333;
    font-size: 16px;
    font-family: Tahoma, Arial, Verdana;
    font-weight: normal;
    text-decoration: none;
    margin: 0 0 5px;
    padding: 10px 0 0;
}
.post h3 a, #content h1 a:visited {
    color: #333333;
    font-size: 22px;
        font-weight: normal;
    margin: 0 0 5px;
    padding: 10px 0 0;
}
.post h3 a:hover {
    color: #CF152A;
    text-decoration: none;
}
Ganti dengan :
.post h1, .post h2 {
color:$titlecolor;
font-size: 160%;
font-weight: normal;
line-height: 1.4em;
margin: 0.25em 0 0;
padding: 0 0 4px;
}
.post h1 a, .post h1 a:visited, .post h1 strong, .post h2 a, .post h2 a:visited, .post h2 strong {
color:$titlecolor;
display: block;
font-weight: bold;
text-decoration: none;
}
.post h1 strong, .post h1 a:hover,.post h2 strong, .post h2 a:hover {
color: #333333;
}

SIMPAN dan SELESAI !
Mudah bukan sobat ?

Cara Membuat Paging Navigasi Pada Blogspot

Ricki Berbagi - Paging navigasi pada blog selain mempercantik tampilan blog, juga untuk mempermudah navigasi. Sehingga pengunjung bisa mencari halaman posting di halaman tertentu sesuai keinginan. Bagaimana penampilan Paging Navigasi, berikut penampakannyagambar di bawah.




Untuk menampilkan Paging Navigasi seperti penampakan di atas, ternyata cukup mudah. Ikuti langkah-langkah dibawah :
1. Login ke blog anda.
2. Klik 'Layout/Tata Letak'
3. Klik 'Tambah Widget'
4. Pilih 'HTML/Java Script'.
5. Masukkan kode HTML di bawah ini.
Page Navigasi:

6. SIMPAN, dan letakkan Gadget baru tersebut di bagian bawah panel "Blog Post", seperti gambar di bawah ini :



7. Silahkan dilihat di blog sobat dengan cara di REFRESH, seharusnya Paging Navigasi sudah muncul di bagian baling bawah halaman blog


UPDATED !!
Jika cara diatas masih belum bisa menampilkan Paging Navigasi. Coba lakukan EDIT HTML pada template sobat. Kemudian cari kode ]]></b:skin>
Selanjutnya tempatkan kode di bawah ini persis di atas kode ]]></b:skin>
/* ----- Page Navigation styles ----- */
.showpageNum a {
padding: 2px 5px;
margin:0 5px;
text-decoration: none;
border:1px solid #ccc;
-webkit-border-radius:3px;-moz-border-radius:3px;
background: #eee;
}
.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
border:1px solid #ccc;
background: #ddd;
}
.showpagePoint {
color:#fff;
text-shadow:0 1px 2px #333;
padding: 2px 5px;
margin: 2px;
font-weight: 700;
-webkit-border-radius:3px;-moz-border-radius:3px;
border:1px solid #999;
background: #666;
text-decoration: none;
}
Cari kode </body> Kemudian letakkan script dibawah ini di atas kode </body> tersebut
<!--Page Navigation Start-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://ahmad-rifai-tools.googlecode.com/files/pagenavi.js'
type='text/javascript'/>
<!--END Page Navigation -->
Jangan lupa SIMPAN templatenya. Seharusnya problem Paging Navigasi sudah teratasi dan muncul di halaman blog sobat. Silahkan mencoba.

Cara Membuat Daftar Isi Posting Per Label



Ricki Berbagi - Bagaimana cara membuat Daftar Isi terbaru berdasarkan pengelompokan per-label ? - Di dalam fasilitas blogspot sudah tersedia Gadget untuk membuat daftar Posting Terbaru. Untuk membuat Posting Terbaru per label pun sebetulnya juga ada, yaitu melalui menu gadget feed. Namun Daftar Posting Terbaru Per-Label lewat Gadget Feed di blogspot hanya di batasin maksimal 5 posting saja per-labelnya.
Kali ini saya coba cara lain yang lebih mudah di custom, termasuk bisa membuat daftar posting yang tampil bisa > 5 postingan.

Langkah-Langkah Membuat Daftar Posting Per-Label :
  1. Login ke halaman blogger
  2. Masuk ke menu "Tata Letak"
  3. Klik Tambah Gadget >> Pilih HTML/JavaScript
  4. Masukkan Kode di bawah ini dan SIMPAN

<script style="text/javascript">
      var numposts = 5;
      var standardstyling = true;
</script>
<script type='text/javascript' src='http://coepoe.googlecode.com/files/label.js'></script>
<ul><script src="http://Blogger-Coepoe.blogspot.com/feeds/posts/default/-/Tutorial%20Blogspot?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script></ul>
Catatan :
Perhatikan text yang berwarna Merah :
  • var numposts = 5, Angka 5 menunjukkan jumlah posting, bisa di ganti maksimal 999
  • Blogger-Coepoe.blogspot.com, Silahkan ganti dengan blog atau domain sobat
  • Tutorial%20Blogspot, Adalah contoh Nama Label, silahkan ganti dengan label yang ingin sobat tampilkan sebagai daftar posting. Ingat spasi di tandai dengan %20
Bagaimana sobat ? - sangat mudah bukan ?

Follow on Google+

© 2013 Dicky Berbagi. All rights resevered. Share on Dicki Berbagi.