Keaneka Ragaman dan Serba Serbi: Tutorial Blog

Kamis, 10 Maret 2011

Kotak Komentar Facebook/Facebook Comment Box Terbaru (With Reply)

Setelah jalan-jalan ke google, walhasil ketemu dengan tips membuat facebook comment box/kotak komentar facebook yang cukup unik, berbeda dengan facebook comment box yang lama. disini terdapat perbedaan di bagian comment body-nya yaitu memiliki fitur Reply seperti layaknya status di facebook.

Pada Facebook Comment Box yang terbaru ini juga bisa mengirimkan pemberitahuan kepada admin atau pemilik website/blog tersebut jika ada seseorang yang meninggalkan komentar de website/blog tersebut. Cukup menarik bukan, karena berbeda dengan Comment Box yang lama, yang tidak memiliki fitur Reply (Balas), Like (Suka), Notification (Pemberitahuan).

Sebelum mencobanya, ada baiknya lihat screen shot nya dibawah ini :

Untuk melihat Demo nya, silakan kunjungi webblog teman saya yang sudah mencobanya DISINI

Untuk membuatnya, pertama-tama dapatkan Aplikasi ID dengan membuat aplikasinya disini [http://developers.facebook.com/setup/]
Jika kurang mengerti cara membuat Aplikasi ID Facebook, silakan lihat caranya DISINI

Jika sudah mendapatkan Aplikasi Id, sekarang anda bisa memasang Facebook Comment Box/Kotak Komentar Facebook yang baru ke Blog anda.Berikut cara-caranya.

Masuk ke blogger
Dihalaman Dasbor/Dashboard, klik Rancangan/Design.
Lalu klik Tab Edit HTML
Centang Expand Widget Template

Langkah 1
Cari kode berikut <head>
Letakkan kode berikut ini setelah kode diatas tadi

Ganti tulisan App ID dengan Aplikasi ID anda
Ganti tulisan ID Profile Facebook dengan ID profil facebook anda

Langkah 2
Langkah selanjutnya, cari kode <data:post.body/>
Jika anda menggunakan fitur auto readmore, letakkan kode berikut ini setelah kode <data:post.body/> yang KEDUA.
atau
Anda bisa juga meletakkan kode berikut setelah code

<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/><script>window.fbAsyncInit = function() {
FB.init({appId : 'App ID',
status : true,
cookie : true,
xfbml : true});};
(function() {var e = document.createElement('script');e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';e.async = true;document.getElementById('fb-root').appendChild(e);}());</script><fb:comments expr:href='data:post.url' migrated='1' expr:title='data:post.title'/>
<div style='float:right; padding:10px><a href='http://serba-seru.blogspot.com/2011/02/cara-pasang-kotak-komentarcomment-form.html' target='_blank' title='Cara pasang kotak komentar Facebook di Blogger'>Grab This Comment Form</a></div></div>
</b:if>

Nb :
Namun jika anda ingin kotak komentar yang sudah di perindah dengan tampilan kotak [lihat disini Demo-nya]
silakan gunakan kode berikut sebagai pengganti kode pada langkah kedua :

<b:if cond='data:blog.pageType == "item"'>
<div style='background-color:#ECEFF6; padding-top:10px; padding-left:10px; padding-right:10px; padding-bottom:40px; -moz-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; -goog-ms-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; border:1px solid #627AAD; border-bottom:1px solid #2A4280; border-right:1px solid #2A4280;'>
<div align='left' style='text-align:left; background:#3B5998; -moz-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; -goog-ms-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; border:1px solid #2A4280; border-bottom:1px solid #627AAD; border-right:1px solid #627AAD; padding:0 10px; margin-bottom:10px;'><a href='http://serba-seru.blogspot.com' target='new'><img alt='' class='icon-action' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHWIs8LW8bOSsvSg9x7FSDKn20yT9aP-_yANMBInnwws0K6__A_2IAotVtS6UlmTUpKs2zy7a1zuyxUwM5-hbB85gnBzx7TrJALqOMo7O1sSrzjGV5d5uVMzJrA4W254bdgMA65bX7B5x8/s1600/serba-blog-facebook-comment.png' width='100%'/></a></div>
<div id='fb-root'/><script>window.fbAsyncInit = function() {
FB.init({appId : 'App ID',
status : true,
cookie : true,
xfbml : true});};
(function() {var e = document.createElement('script');e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';e.async = true;document.getElementById('fb-root').appendChild(e);}());</script><fb:comments expr:href='data:post.url' expr:title='data:post.title' migrated='1'/>
<div style='background-color: #3B5998;-moz-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; -goog-ms-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px; border:1px solid #2A4280; border-bottom:1px solid #627AAD; border-right:1px solid #627AAD; font-size:10px; padding:3px 5px;width:ancho; float:right; margin-bottom:5px;'><a href='http://serba-seru.blogspot.com/2011/02/cara-pasang-kotak-komentarcomment-form.html' target='_blank' title='Cara pasang kotak komentar Facebook di Blogger'>Grab This Comment Form</a></div></div>
</b:if>

Simpan hasilnya

Semoga bisa bermanfaat.

Source : http://adityameilaz.blogspot.com/2011/03/kotak-komentar-facebook-versi-terbaru.html

Selasa, 15 Februari 2011

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan | Sempat bingung menentukan judul artikel yang satu ini, tapi yang jelas gambarannya seperti dibawah ini, Pernah lihat halaman blognya Kang Rohman (kolom-tutorial.blogspot.com), jika diperhatikan, ketika pada halaman beranda/Home page, bagian artikel/posting terletak di sebelah kiri dan sidebar berada di sebelah kanan, dan ketika masuk ke halaman postingnya, halaman artikel akan berada di sebelah kanan dan sidebar di sebelah kiri.

Nah, untuk membuat halaman tersebut agar bisa berpindah-pindah ternyata cukup simpel. ternyata yang dibutuhkan hanya sedikit penambahan pada struktur CSS nya saja. berikut cara-caranya :

Login ke Blogger
Langsung menuju ke Design/Rancangan
Klik Edit HTML
centang tulisan "Expand Widget Template"
Cari kode berikut :

]]></b:skin>

Letakkan kode berikut ini setelah kode diatas

<b:if cond='data:blog.pageType == "item"'>

#main-wrapper{float:right;}

#sidebar-wrapper{float:left;}

</b:if>

</style>

Simpan hasilnya.

Untuk melihat Demonya, silakan lihat DISINI

Source code from kolom-tutorial.blogspot.com

Minggu, 13 Februari 2011

Mengoptimalkan Meta Tag Blog

Mengoptimalkan Meta Tag Blog | Setelah kemarin membuat artikel tentang cara "Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog" serta "Mengoptimalkan Blog dengan Meta Tag Title". Masih berhubungan dengan cara meningkatkan jumlah pengunjung dengan Meta Tag Blog. Kali ini mengulas tentang cara mengoptimalkan Meta Tag Blog. wah, kenapa banyak banget aturan mainnya nih, jika sebelumnya sudah menghadirkan Setting Meta Tag, sekarang di optimalkan lagi, kenapa ga sekalian saja...???

Namanya juga tips & trik(saran), maka itu adalah sebuah pilihan, jadi terserah mau mengikuti/mengambil yang mana. ga di ambil juga ga kenapa-napa...namanya juga pilihan. Namun didalam pilihan tentu ada yang terbaik, jadi ga ada salahnya buat ngambil sesuatu yang terbaik.

Lagipula Tips & Trik mengoptimalkan Meta Tag ini sudah di terapkan oleh beberapa master blogger seperti Kang Rohman, o-om, dll yang sudah bisa kita lihat keberhasilan blog mereka. Jadi ga ada salahnya dong buat ngikutin cara mereka.

Jika pada Meta Tag sebelumnya kita mensetting meta tag deskripsi dan keyword utuh, kali ini mencoba mengoptimalkan meta tag dengan menambah keterangan Nama Blog dan Judul Artikel Blog pada deskripsi dan Keyword.

Berikut Penampakannya di Ruang Mbah Google :

Langsung saja, untuk membuat meta tag dengan keterangan Nama Blog & Judul Blog pada deskripsi & Keyword, berikut langkah-langkahnya :

Login ke Blogger
langsung menuju ke Design/Rancangan
Klik Tab Edit HTML
Cari kode berikut :

Ganti kode diatas dengan kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'>

<b:else/>

</b:if>

Ganti tulisan Description yang berwarna Merah dengan deskripsi blog anda.

Ganti tulisan Keywords yang berwarna Merah dengan kata kunci blog anda.

Kemudian simpan hasil kerja anda.

Contoh :

<b:if cond='data:blog.pageType != "item"'>

<b:else/>

</b:if>

Dari contoh Meta tag diatas, maka akan menjadi seperti dibawah ini (dilihat dari page source) :

Ini contoh penampakan page source pada halaman Home/halaman depan :

Deskripsi

Serba Blog - Serba berbagi tentang tutorial, tips-trik blog, facebook, download ebook, software, film gratis

Keywords

Serba Blog, Artikel komputer, blog, blogger, widget, gadget, serba, seru, tips trik, tutorial, html, javascript, software, download, gratis

Ini contoh penampakan page source pada halaman Artikel :

Deskripsi

Serba Blog: Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog - Serba berbagi tentang tutorial, tips-trik blog, facebook, download ebook, software, film gratis

Keywords

Serba Blog: Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog, Artikel komputer, blog, blogger, widget, gadget, serba, seru, tips trik, tutorial, html, javascript, software, download, gratis

Sebagai catatan, pastinya kita membuat judul posting yang berbeda disetiap postingan, setelah menggunakan meta tag seperti diatas, maka hasil yang akan ditampilkan pada search engine akan memiliki awal deskripsi yang berbeda-beda disetiap postingan disesuaikan dengan judul postingan blog secara otomatis. Jadi bisa dibilang, kita bisa menebar benih lebih banyak di search engine dengan bantuan Nama Blog serta Judul Artikel Blog yang berperan sebagai deskripsi blog. Maka meta tag ini biasa disebut dengan Meta Tag Blogger Dinamis/Dynamic Blogger Meta Tag.

Source : http://www.blogspottutorial.com/2010/11/best-blogger-meta-tag.html

Sabtu, 12 Februari 2011

Mengoptimalkan Blog Dengan Meta Tag Title

Mengoptimalkan Blog Dengan Meta Tag Title | Untuk mempermudah Search Engine memberikan pengunjung ke blog kita, ada beberapa cara seperti salah satunya yang sudah diungkapkan pada artikel sebelumnya yaitu "Meningkatkan Jumlah Pengunjung Dengan Meta Tag Blog". Adapun cara berikut ini cukup memberikan pengaruh untuk meningkatkan jumlah pengunjung, yaitu dengan mensetting Meta Tag Title. Biasanya Title Blog secara default akan di set seperti berikut :

<title><data:blog.pageTitle/></title>

Hasilnya akan ditampilkan di Search Engine (Google) seperti gambar dibawah ini :

Pada gambar diatas, yang ditampilkan terlebih dahulu yaitu Nama Blog kita, setelah itu baru Judul artikel pada blog kita.

Pada umumnya, pengunjung akan mencari artikel/gambar di Search Engine. Maka logikanya yang dicari adalah isi/konten artikel dari suatu blog dan yang mewakilkan isi/konten artikel blog adalah Judul Artikel Blog. Bayangkan saja jika misalkan nama blog anda adalah Catatan Budi. bisa dipastikan orang akan menulis Catatan Budi sebagai Kata Kunci sangat kecil kemungkinannya.

Namun misalkan didalam Blog Catatan Budi memuat artikel yang berjudul "Cara Mengoptimalkan SEO Blog", besar kemungkinan orang akan menuliskan kata kunci "Cara Mengoptimalkan SEO Blog/SEO/SEO Blog/dll".

Maka dari itu ada baiknya sebagai garis depan untuk mewakilkan blog kita, kita tempatkan Judul Artikel Blog pada posisi yang terdepan.

Contoh penampakan setelah dipasang Meta Tag Title yang akan ditampilkan di Search Engine Google seperti dibawah ini :

Berikut yang akan tampil di Browser kita :

Berikut cara mensetting Meta Tag Title di Blog :

Login ke Blogger
Klik Design/Rancangan
Pilih Edit HTML
cari code berikut :

Ganti code diatas dengan code berikut ini :

<b:if cond='data:blog.pageType == "item"'>

<b:else/><title><data:blog.pageTitle/></title>

</b:if>

Simpan hasilnya.

Untuk melihat hasilnya di Search Engine, butuh beberapa hari untuk Search Engine menerima settingan Meta Title Blog anda. jadi, harap bersabar....

Jumat, 11 Februari 2011

Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog

Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog | Sebagai salah satu cara untuk menarik pengunjung ke Blog kita adalah dengan memasang Meta Tag di blog kita.Tujuannya adalah supaya blog kita bisa memberikan keterangan yang jelas tentang Blog kita kepada Search Engine, apa saja yang di tuangkan dalam blog kita, blog kita ber-tema-kan apa, kata kunci apa yang menjadi kunci utama untuk membuka pintu menuju blog kita, dan lain sebagainya. Namun yang jelas, kita pasti berharap bahwa pengunjung blog dapat datang secara otomatis dan bukan melalui cara manual(blogwalking,dll).

Banyak cara menarik pengunjung ke Blog kita, salah satunya yaitu melalui Search Engine seperti Google, Yahoo, MSN, dan banyak lagi yang lainnya. Nah, bagaimana cara menarik perhatian Search Engine untuk melirik blog kita. Seperti pepatah, "Tak kenal maka tak sayang". begitu juga dengan Search Engine. Bagaimana Search Engine ingin menyayangi blog kita jika Search Engine tidak mengenal blog kita. Search engine tahu dengan SERBA BLOG, tapi Search engine belum tentu mengenal SERBA BLOG, apa sih itu serba blog, serba blog itu membahas apa, Search Engine bakalan memberikan kunci kepada pengunjung sesuai kriterianya. maka dari itu kita berikan keyword/kata kunci blog kita ke Seach Engine agar Search Engine bisa memberikan kunci tersebut kepada para pengunjung.

Bagaimana cara memperkenalkan blog kita kepada Search Engine, yaitu melalui META TAG.
Berikut Code Meta Tag :

Ganti tulisan berwarna merah sesuai dengan deskripsi dan kata kunci blog anda
Untuk membuat meta tag description, sesuaikan dengan deskripsi blog kita.
Untuk meta tag keyword, buatlah kata kunci sesuai dengan artikel yang kita sajikan di blog kita dan tidak lebih dari 30 kata kunci.

Contoh :

Untuk memasang Meta Tag di blog, silakan lihat cara seperti dibawah ini :

Masuk ke Blogger
Langsung menuju Design/Rancangan
Klik tab Edit HTML
Cari kode ini :

<title><data:blog.pageTitle/></title> .

Ganti code diatas dengan code berikut :

Contoh :

<title><data:blog.pageTitle/></title> .

Lalu simpan.

Maka selanjutnya tinggal tugas Search Engine untuk mengenali blog kita dan memberikan kunci blog kita kepada para pengunjung.

Kamis, 10 Februari 2011

Cara Pasang Kotak Komentar/Comment Form Facebook di Blogger

Cara Membuat Kotak Komentar/Comment Form Facebook di Blogger | Mungkin Tips ini udah bukan hal baru lagi, namun jika niat ingin berbagi, tidak ada kata terlambat. Berikut ini ingin mensharingkan cara membuat Kotak Komentar/Comment Form Facebook yang akan di tampilkan di Blogger. Jadi Kotak komentar yang sudah secara default ada di blogger dirubah atau ditambah dengan aplikasi kotak komentar/Comment form yang disediakan oleh Facebook.

Fungsi kotak komentar Facebook ini adalah sebagai pengganti atau alternatif lain bagi pengunjung blog kita untuk memberikan komentar di blog kita, karena memungkinkan untuk pengunjung blog selain pengguna Blogger/Wordpress/Typepad/Open id untuk memberikan ide/komentar/saran/kesan untuk blog kita. Dikarenakan pengguna Facebook semakin meningkat jumlahnya, jadi bisa dipastikan hampir semua pengunjung blog memiliki akun Facebook.

Untuk melihat demo Kotak komentar Facebook, silakan lihat Disini <.a>

Berikut ini cara membuat/memasang kotak komentar Facebook di blogger :

Pertama, silakan buat aplikasi facebooknya disini : Facebook Develover

isi form dengan lengkap seperti contoh diatas.

untuk kolom URL site, isi URL blog anda, jangan lupa tambahkan backslash "/" diakhir URL agar blog anda bisa dikonfirmasi.

Contoh : http://serba-seru.blogspot.com menjadi http://serba-seru.blogspot.com/ <=

Kemudian ambil ID aplikasi yang sudah diberikan (lihat contoh dibawah)

Langkah selanjutnya, langsung menuju Blogger. Login ke account blog anda.

Kemudian langsung menuju Design/Rancangan => Klik tab Edit HTML => Centang "Expand Widget Template".

Lalu cari code berikut ini :

<data:post.body/> atau <div class='post-header-line-1/>

Jika sudah ketemu, Paste code berikut ini setelah code diatas

(Jika sudah memasang readmore, terdapat dua code <data:post.body/>, maka letakkan code dibawah ini setelah <data:post.body/> yang kedua)

<b:if cond='data:blog.pageType == "item"'>
<div style='background-color:#ffffff; padding:10px; border:1px solid #cccccc;'>
<p align='left' style='background:transparent;'><a href='http://serba-seru.blogspot.com' target='new'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt7tQxSuJKATMZ9cFfqpV6yyetqR2jiX-gaVKdLAAvX23__VTeSUv6N3r2SofGGTGChOsq9_R0WKKfBXmu0RayacdFUdHDtoLfh4ik0d4j9_eHJou-LJkcB5bXSIuCSP9h_PwQJtBYhExY/'/></a></p>
<div id='fb-root'/>
<script> window.fbAsyncInit = function() { FB.init({appId: 'ID-APLIKASI', status: true, cookie: true, xfbml: true}); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); }()); </script>
<fb:comments/>
<p style='background-color: transparent;border:1px solid #cccccc; font-size:10px; padding:5px;width:ancho; float:right;'><a href='http://serba-seru.blogspot.com/2011/02/cara-pasang-kotak-komentarcomment-form.html' target='_blank' title='Cara pasang kotak komentar Facebook di Blogger'>Grab This Comment Form</a></p></div>
</b:if>

Ganti tulisan ID-Aplikasi dengan ID Aplikasi yang telah anda buat sebelumnya.
Jika ingin mengganti background untuk menyesuaikan dengan template blog anda, silakan ganti kode warna tulisan yang berwarna biru diatas (#ffffff)

Bagi anda yang hanya ingin menggunakan kotak komentar Facebook saja di blogger tanpa comment form blogger, anda bisa menghilangkan comment form blogger tersebut dengan cara :
Klik Tab Setting/Pengaturan => Comments/Komentar => Klik hide/sembunyikan pada bagian Komentar/Comment

Untuk melihat contoh hasilnya, silakan lihat Disini

Semoga bisa bermanfaat.

Selasa, 08 Februari 2011

Black Eleganisme Blogger Template

I could finally solve also this one blogger template. after all this time trying to learn how to process the CSS and HTML code are enough to get confused. Here is the first template that I want to share that might make you feel interested with this one template.

This template I give the name "Black Eleganisme". for more details, please see the demo HERE.

Here are some features of the Black Eleganisme :

Stylish Menu with SEO
3 columns
2 Right sidebar
3 Footer Column
Adsense Optimized
Auto Readmore
Automatic Thumbnail on Homepage
SEO Title
Magazine Styled
Ads Ready
Black
Custom Navbar
Elegant
Fixed
Grey
News
SEO Ready
Many more...

Here are Installation Instructions :
(Before you do this, first backup your current template)

1. Download the template and Sign into Blogger » Design » Edit html

and then Upload the template file (xml file), you can see the preview first or just Save it.

2. Editing Top Navigation Links...
To Edit the top Nav links (Home, Link 1, Link 2,etc..)

Sign into Blogger » Design » Edit html » Tick the "Expand Widget Templates"
Control + F (to search)

Find these lines :

Edit the URL's and their respective Anchor Text's to whatever you like.
Ex : <li><a href='http://serba-seru.blogspot.com/'>Serba Blog</a></li>
Save your work.

3. For change Facebook/Twitter button link on Black Eleganisme Blogger Template,
Sign into Blogger » Design » Edit html » Tick the "Expand Widget Templates"
Control + F (to search)

Find these lines :

Replace Red text above in accordance with your Facebook and Twitter account.
Save your work

For Download Black Eleganisme Blogger Template, CLICK HERE
For Download more template, Visit HERE

I hope All of you like the template, if any problem, you can comments below, looking forward for the comments!
Thank You...!!!

Selasa, 01 Februari 2011

Rahasia Google Pagerank Sulit di Tebak

Rahasia Google Pagerank Sulit di Tebak | Pada posting sebelumnya "Pagerank meningkat - Hadiah dari Google" telah mengangkat tentang kenaikan pagerank Serba Blog serta beberapa blog teman yang meningkat Pagerank-nya dan beberapa blog lainnya yang tetap tidak beranjak Pagerank-nya.

Memang Rahasia Google Pagerank sulit di tebak, perhitungan/rumus yang mereka gunakan juga masih membingungkan bagi saya, maklum masih hijau di dunia blogging.

Kemarin sempat berkunjung ke blog teman saya (maaf tidak bisa disebutkan untuk menjaga nama blog tersebut), blog tersebut meningkat Pagerank-nya, padahal blog tersebut hanya memiliki 2 artikel saja bahkan salah satu artikel tersebut adalah artikel copy paste. Setelah ngobrol secara langsung via offline, ternyata blognya tersebut juga masih belum mengoptimalkan SEO (submit ke search engine, memasang meta tag, serta yang lainnya). Koq bisa yaa...???

Namun setelah melihat-lihat lagi, ada satu hal yang mungkin bisa menjadi alasan kenapa blognya bisa naik peringkat, pada blog tersebut terdapat widget Link Exchange di sidebar. Karena yang saya tau, salah satu penunjang kenaikan Pagerank adalah bertukar link dengan blog lain dan yang lebih efisiennya lagi bertukar link dengan blog yang memiliki topik/tema artikel yang sealiran/sama (blog A dengan tema tips trik blogging bertukar link dengan blog B dengan tema tips trik blogging). Mungkin hal tersebut yang menunjang kenaikan Pagerank pada blognya.

Tapi yang bikin kita agak bingung, teman saya ini ternyata memiliki blog yang lain, teman saya ini fokus kepada blog yang satu ini, sebut saja blog cerpen. Waktu pembuatan awal blog ini tidak jauh dari blognya yang sudah mendapatkan pagerank diatas, hanya selisih 1-2 minggu saja. Sudah pernah submit ke beberapa Search Engine serta sudah memasang meta tag. Pada blog cerpen ini memiliki sekitar 40-an artikel tanpa ada satupun yang copy paste karena artikel berdasarkan pengalaman pribadi. karena seperti yang kita ketahui bahwa penunjang utama peningkatan blog atau pagerank blog yaitu dari konten blog, bahkan ada istilah Content is King, tapi mungkin dari artikel-artikel yang dimilikinya kurang berpotensi dimata search engine atau mungkin spider google sulit menembus blognya. Namun kesamaan dari 2 blog teman saya ini adalah jarang blogwalking karena dia ngeblog hanya iseng-iseng saja.

Tapi Rahasia Google Pagerank tetap sulit ditebak. Maka dari itu, ada baiknya kita tetap memenuhi syarat-syarat yang dibutuhkan untuk menunjang peningkatan pagerank blog kita, supaya Google bisa meringankan tangan mereka untuk memberikan hadiah yaitu meningkatnya Pagerank Blog kita. Amin...

Senin, 31 Januari 2011

Pagerank Meningkat - Hadiah dari Google

Setelah kemarin sempat meninggalkan blog ini berbulan-bulan tanpa penghuni, serta tanpa ada update posting. Namun Google tetap berbaik hati memberikan Pagerank untuk blog ini. Entah kapan ada update Pagerank ini terjadi, mungkin di bulan januari ini. menurut kabarnya sih, update pagerank ini terjadi pada akhir bulan januari 2011 ini. berarti baru beberapa hari dong.

Serba Blog sekaran diberi hadiah oleh Google dengan Pagerank 3, Alhamdulillah. Terima kasih Google serta terima kasih buat teman-teman yang selalu hadir disini, tanpa kalian semua, blog ini tidak ada apa-apanya.

Namun setelah berkunjung ke blog teman-teman saya, ada sedikit yang mengganjal dipikiran saya. Ada blog teman saya yang meningkat Pagerank-nya serta ada pula blog yang sama sekali tidak beranjak naik Pagerank-nya. Padahal, jika dilihat-lihat dari blog yang meningkat Pagerank-nya, potensial serta volumenya masih bisa dibilang kurang memadai untuk mendapatkan Pagerank, Sedangkan untuk Blog yang tidak beranjak naik Pagerank-nya, memiliki potensial serta volume yang besar.

Itulah mungkin Rahasia Google Pagerank, memang sulit di tebak.

Jumat, 05 Maret 2010

Kembali Untuk Mencari Jawaban

Akhirnya usai sudah sebuah kesibukan didunia Offline, dan akhirnya pula bisa kembali melanglang buana bersama blogku tercinta ini.

Sebelum memulai berkelana bersama Serba Blog tercinta ini, saya secara pribadi mohon maaf serta ingin berterima kasih kepada seluruh sobat blogger yg sudah berkunjung ke blog ini, dikarenakan ada sedikit aktifitas offline yg menghalangi saya untuk bersosialisasi via blogger.

BLOGGER....AKU KEMBALI.....!!!

Sempat bingung juga untuk memulainya kembali, itu semua terjadi karena otak di gunakan untuk memikirkan hal lain dan tiba-tiba sekarang harus di kembalkan lagi ke aktifitas blogger...

Oke deh, mungkin ini bisa menjadi topik yang menarik buat saya secara pribadi dan mudah-mudahan begitu juga buat semua para blogger. Sebenarnya saat ini saya tidak ingin mensharingkan sesuatu, justru saya ingin meminta sesuatu kepada anda semua. Jadi topik kali ini intinya "MEMINTA SESUATU KEPADA ANDA"

Nah, emang apaan yang mau diminta???
Jika dilihat-lihat, agak sedikit aneh, karena biasanya blog digunakan untuk sarana berbagi tutorial, info, promosi, bisnis, download, dan lain sebagainya.
Mungkin baru blog ini yang meminta sesuatu kepada pengunjungnya.

Sebenarnya yang ingin saya minta kepada anda semua(Buat yang punya/yang tahu informasinya) adalah sebuah saran. Saya yakin saran yang ingin saya minta ini bukan hal aneh lagi, sudah banyak juga yang menanyakan hal ini bahkan yang menjawabnya.

Okelah, tanpa panjang lebar lagi, hal yang ingin saya tanyakan :
"ADA YANG PUNYA INFO TENTANG RAHASIA MENINGKATKAN PAGERANK DI GOOGLE SERTA MEMPERBANYAK JUMLAH PENGUNJUNG BLOG...???"

Eiittttsss...tunggu dulu....
Sabarrr....

Saya sudah mengunjungi beberapa blog yang mengangkat tema tentang cara meningkatkan PR dan memperbanyak jumlah pengunjung, semuanya sangat luar biasa sekali informasinya, menambah pengetahuan.

Informasi yang saya dapatkan tersebut beraneka ragam, namun sering saya temukan, untuk satu metode yang sama mengalami pro dan kontra, ada yang bilang kalau pake cara ini kurang bagus, tapi disisi lain ini cara terbaik, sehingga membuat saya sempat bingung yang mana yang harus saya ikuti, maklum masih Newbie.

Nah, disini yang saya butuhkan dari sobat-sobat semua adalah sebuah saran, metode yang mana yang benar-benar penting untuk menunjang hal tersebut...???

Disini saya mencoba mengajak sobat-sobat semua untuk mensharingkan informasi yang anda ketahui.
Silakan sharingkan link anda tentang informasi yang menunjang untuk menjawab hal tersebut diatas, silakan share link anda di comment, semoga link yang anda sharingkan di comment bisa saya kunjungi satu persatu dengan segera.

Terima kasih buat semuanya

Minggu, 21 Februari 2010

Slide Recent Posting

Sekarang ini semakin banyak alternatif pilihan untuk membuat blog agar terlihat unik, berbagai macam jenis tampilan pada widget blogger. Nah, pada kesempatan kali inimemaparkan tentang Recent Posting menggunakan Slide.

Untuk tool yang satu ini mungkin agak sedikit aneh, karena saya dapatkan dari hasil nyontek dikit di pagesource halaman blog lain yang menggunakan tool ini, karena sangat sulit sekali menemukan tutorial untuk membuat tool yang satu ini.

Namun jangan khawatir, walaupun hasil dari nyontek ga jelas, namun hasilnya ga ada yang kurang tuh, tetap perfect. Untuk Demonya bisa anda lihat disini atau disini

Oke, bagi yang berminat untuk menggunakannya, silakan ikuti langkah-langkahnya dibawah ini :

1. Pertama masuk ke Blogger => Tata Letak/Layout
2. Klik Add a Gadget, pilih HTML/Javascript
3. Copy Paste code dibawah ini kedalamnya :

Ganti tulisan berwarna merah dengan URL blog anda (ingat : harus pakai tanda " / " diakhir URL)
Angka berwarna biru adalah jumlah postingan yang akan ditampilkan, silahkan ganti sesuai selera anda
Untuk merubah warna serta ukuran, silakan edit dibagian CSSnya dibagian atas.

4. Simpan dan lihat hasilnya.

Sekian, selamat berkreasi
Semoga bermanfaat

Sabtu, 20 Februari 2010

Menampilkan Halaman Label Dengan Judul

Di tengah kesibukan dunia offline dalam beberapa hari ini, akhirnya bisa punya waktu juga nih buat ngeposting blog, semoga postingan kali ini bisa memberikan referensi yang bermanfaat buat sobat semua.
Buat yang udah susah payah buat mampir kesini, makasih banget nih atas segala partisipasinya.

Oke, pada kesempatan kali ini mencoba mensharingkan tips buat meminimalisasikan tampilan blog agar tidak mengakibatkan loading yang lama. Mungkin ini bukan hal yang baru lagi, buat yang udah menerapkan tips ini, maaf nih postingan jadul, hehehehe....

Posting kali ini memaparkan cara menampilkan halaman label dengan judul saja, kadang blog yang masih standar(asli), untuk menampilkan halaman label pastinya akan tampil halaman yang berisi postingan penuh, dan pastinya akan memakan waktu untuk menampilkan keseluruhan postingan dengan label tertentu, apalagi postingan tersebut memiliki gambar, video, dan lain-lain yang pasti memiliki kapasitas lebih besar untuk di load.

Nah, untuk meminimalisasikan tampilan tersebut, ada baiknya menampilkan halaman label tersebut hanya judul postingnya saja. Untuk contoh silakan klik salah satu label di bagian Categories

Adapun cara untuk mengubahnya seperti dibawah ini :
1. Login ke Blogger
2. Langsung menuju Tata Letak/Layout => Edit HTML
3. Centang tulisan "Expand Widget Template"
4. Tekan Ctrl+F dan cari code ini :

<b:include data='post' name='post'/>

5. Jika sudah ketemu, Hapus dan ganti dengan code dibawah ini (Replace)
<b:if cond='data:blog.homepageUrl!= data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
6. Simpan hasil kerja anda

Semoga berhasil
Semoga bermanfaat
(Sumber : http://www.whatmakesblog.com)

Kamis, 18 Februari 2010

Membuat Slide Headline

Wah, hampir seminggu absen ngeblog nih setelah kemarin sempat disibukkan oleh kegiatan offline.

Pada kesempatan kali ini mencoba menghadirkan satu tips untuk membuat "headline Slide". Cukup sederhana sekali, untuk demonya bisa lihat Disini.

Oke, jika anda tertarik untuk membuatnya, silakan ikuti langkah-langkahnya dibawah ini :

1. Login terlebih dahulu ke Blogger
2. Masuk ke bagian Tata Letak/Layout
3. Pilih Tab menu Edit HTML
4. Centang tulisan Expand Widget Template
5. Cari code ini ]]></b:skin> (untuk memudahkan pencarian tekan Ctrl+F)
6. Copy Paste code CSS dibawah ini sebelum code diatas :

#slider {
background:#101010;
height: 153px;
text-align:center;
overflow: hidden;
position: relative;
margin: -5px 0px;
}

#mover {
width: 600;
position:absolute;
overflow:hidden;
}

.slide {
padding: 15px 0px;
width: 1000px;
float: left;
position: relative;
height:130px;
}

.slide h2 {
font-family:Georgia, Helvetica, Sans-Serif;
font-size: 18px;
font-weight:bold;
text-align:left;
color: #FFFF00;
padding:0px 0px 0px 0px;
margin:0px 0px;
width:440px;
overflow:hidden;
}

.slide h2 a:link, .slide h2 a:visited {
color:#E1771E;
background-color: transparent;
}

.slide h2 a:hover {
color: #ff0000;
background-color: transparent;
}

span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 200px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #FFFFFF;
font-size: 12px;
text-align:left;
font-family: Georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 440px;
padding:0px 0px 0px 0px;
margin:0px 0px;
}

.slide img {
position: absolute;
top: 20px;
left: 225px;
background:;
padding:10px 10px;
}

#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 1000px;
right: -125px;
color: #FF0000;
padding: 3px 8px;
font-size: 14px;
font-weight:bold;
text-transform: uppercase;
z-index: 1000;
}

7. Langkah selanjutnya cari code ini </head>
8. Copy Paste code berikut sebelum code </head>

9. Simpan hasil kerja anda
10. Langkah selanjutnya klik tab menu Elemen Laman
11. Buat klik Add a Gadget, pilih HTML/Javascript
12. Paste code dibawah ini didalamnya

<div id="casing">

<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 1</a></h2>
<p>isi artikel slide 1</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 3</a></h2>
<p>isi artikel slide 3</p>
<img src=""/>
</div>
</div>

</div>

<div class="clear"/></div></div>

13. Ganti tulisan http://serba-seru.blogspot.com dengan link posting blog anda.
14. Ganti tulisan berwarna merah dengan Judul Slide anda
15. Ganti tulisan berwarna biru dengan isi artikel slide anda

NB: Untuk mengubah warna background dan lain-lainnya bisa anda edit pada code CSS diatas

Selamat berkreasi
Semoga bermanfaat
(Sumber : http://forantum.blogspot.com)

Senin, 08 Februari 2010

Thumbnail Related Posting with Marquee (Berjalan)

Setelah kemaren memposting tentang cara membuat Related Posting menggunakan Daftar list berdasarkan Label dan Related Posting menggunakan Gambar(Thumbnail). Nah kali ini sedikit berkaitan dengan Related Posting menggunakan Gambar(Thumbnail).

Nah, untuk menampilkan Related Posting menggunakan Gambar anda bisa lihat disini cara membuatnya.
Namun ada sedikit kekurangan dari Related posting ini, yaitu anda tidak bisa menampilkan Related postingnya dalam jumlah yang banyak, jumlah yang ditampilkan sebatas ukuran lebar halaman posting saja, seperti halnya blog ini, hanya bisa menampilkan 4 judul serta gambar dari related posting tersebut.

Lalu bagaimana cara menampilkan related posting tersebut dalam jumlah yang banyak...???
Oke, yang ingin di sharingkan kali ini mencoba mengangkat tentang menggunakan metode Marquee pada thumbnail related posting. Untuk contoh anda bisa lihat kebawah posting ini.

Setelah mengutak-atik sedikit, sampai sempat sedikit error, hingga akhirnya saya membuat blog lagi khusus untuk eksperimen kode ini (lebay neehhh), dan akhirnya berhasil juga nih Thumbnail Related Posting menggunakan metode marqueenya....karena ternyata utk membuat agar bisa berhasil namun tidak membuat seluruh dari komponen related posting ini berjalan semua harus ada sedikit perubahan.

Oke langsung saja deh...
Nah, untuk membuatnya, anda cukup melakukan perubahan pada kotak code yang kedua(Lihat code asli Thumbnail Ralated Postnya disini).
Contoh codenya seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-post-artikel-terkait.html' style='display:none;'>Thumbnail Related Post</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if></b:if>

Cukup ganti seluruh code tersebut dengan code dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.l`bels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='float:right;' target='_blank'>Thumbnail Related Post Berjalan (Marquee)</a></div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/' style='display:none;'>Serba Blog</a>
</b:if>
</b:if>

Anda bisa mengganti angka 10 dengan jumlah yang anda inginkan, ini adalah jumlah related posting yang ingin di tampilkan.
Jika sudah selesai, silakan simpan hasil kerja anda.

NB : Untuk yang sudah menggunakan code Thumbnail related post ini, jika anda ingin mencari code tersebut di Template anda, anda bisa menggunakan Ctrl+F lalu ketik code yang anda cari (misalnya : ).

NB : Sedikit informasi, yang saya ketahui untuk Related posts marquee ini hanya compatible jika anda menggunakan browser Firefox, Flock, Opera.

Smoga berhasil,
Smoga bermanfaat
Terima Kasih

Sabtu, 06 Februari 2010

Thumbnail Related Post (Artikel Terkait Menggunakan Gambar)

Setelah kemaren membahas tentang cara membuat related posting versi Daftar list berdasarkan label, nah kali ini mencoba mengangkat versi lainnya dalam membuat Related Posting. Untuk kali ini, Related Posting yang akan dipaparkan yaitu menggunakan "Gambar". Untuk contohnya, silakan anda scroll halaman blog ini hingga bagian bawah posting.

Setelah anda puas melihatnya, mungkin ada yang tertarik untuk menggunakannya, anda bisa lanjutkan membaca artikel ini hingga akhir, jangan lupa untuk mempraktekkannya juga yaaa...

Oke, cara untuk membuat Related posting ini sebagai berikut :

Login dahulu ke Blogger
Masuk pada Tata Letak/Layout
Lalu pilih Edit HTML
Centang tulisan Expand Widget Template
Kemudian cari code ini </head>
Letakkan code dibawah ini sebelum code </head> tadi

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

Langkah selanjutnya, cari code ini

Jika tidak menemukannya coba cari yang ini

Jika sudah ketemu, letakkan code dibawah ini Setelah code diatas

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-post-artikel-terkait.html' style='display:none;'>Thumbnail Related Post</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if></b:if>

Untuk code jumlah related post yang berwarna merah bisa anda sesuaikan dengan blog anda
Untuk tulisan Related Post bisa anda ganti sesuai selera anda, seperti Posting terkait, Artikel terkait, dll.
Simpan hasil kreatifitas anda, coba lihat hasilnya.

Jika anda ingin merubah warna atau yang lainnya, anda bisa merubah dibagian CSS.

Jika blog anda tidak menggunakan sistem Read More, dan anda ingin menampilkan Related Posting ini di seluruh halaman, tidak hanya di postingan pertama saja, silakan hapus code yang diberi tanda keterangan  pada code di dalam kotak yang pertama dan kedua

Selamat mencoba
Semoga bermanfaat
Terima Kasih
(Sumber : http://www.bloggerplugins.org)

Jumat, 05 Februari 2010

Blogger Hadir Dengan Fitur Baru (Static Page)

Wahhh...kabar gembira lagi buat para blogger mania...
Apaan tuh...dengan perkembangan blogger yang semakin pesat, akhirnya blogger mengeluarkan tool baru buat seluruh pengguna blogger/blogspot. Jika kita jeli dengan fitur-fitur baru yang dikeluarkan blogger, pasti kita tidak akan pernah mau ketinggalan dengan hadirnya hal baru dari blogger, contohnya yang satu ini, Blogger hadir dengan fitur baru yaitu Static Page.

Static Page...???
Apa tuh....jika di terjemahkan dalam bahasa Indonesia Static Page yaitu Halaman stasis yang mana berfungsi sebagai halaman alternatif yang dihadirkan terpisah dari halaman utama yang biasa kita pakai sebagai halaman posting.

Lalu apa gunanya Static Page ini...???
Kegunaan Static page ini bisa kita gunakan untuk menempatkan halaman seperti Profile, About, Contact, atau tempat Link/Banner Exchange....apalagi buat yang menggunakan template standar yang disediakan oleh blogger, ini ini mungkin bisa menjadi kabar yang istimewa untuk mengefisiensikan blognya...karena bisa memberikan variasi baru untuk blognya
Seperti waktu yang lalu kebanyakan para blogger membuat halaman statis ini dengan cara manual seperti membuatnya pada Entry baru, lalu di ubah format tanggalnya kebeberapa waktu yang lalu hingga entry baru tersebut akan hadir pada posting blog yang paling bawah.
Nah...sekarang tidak perlu repot dengan mengubah tanggal tersebut, blogger telah hadir dengan fitur Static Page khalayaknya seperti Website profesional dan tidak kalah fiturnya dengan Wordpress.

Pada fitur baru blog ini, kita bisa membuat halaman statis hingga 10 halaman, jadi kita bisa memanfaatkan halaman tersebut dengan cukup maksimal, sehingga tampilan halaman utama tidak begitu ramai dengan pernak-pernik yang bisa dibilang kurang penting untuk dihadirkan di halaman utama.

Untuk menggunakan fitur ini :

Masuk ke Blogger
Pilih Posting
Nah, kemaren halaman posting cuma terdiri dari 3 Tab saja (Entry baru, Edit Entry, Moderasi komentar), sekarang telah bertambah satu fitur lagi yaitu Edit Laman.(lihat gambar dibawah ini)

Klik Tab Edit Laman tersebut
Buat Halaman baru

Silakan isi halaman tersebut seperti anda membuat posting baru.(biasanya Halaman statis ini diisi dengan About, Profile, Contact, atau Link/Banner Exchange)
Setelah anda membuat halaman baru, Klik tombol Tayangkan Halaman
Pilih posisi tombol yang anda inginkan, bisa di Tab menu ( dibawah header/di jejeran Home ), bisa juga di Sidebar, bisa juga memilih Tidak ada gadget, artinya anda tidak ingin menampilkan tombol tersebut(anda ingin membuat sendiri tombol untuk menu tersebut)

Jika sudah dipilih, Klik Simpan dan Terbitkan
Selesai deh...

Selamat menggunakan fitur barunya yaaaa....
Semoga, Blogger bisa semakin maju dengan fitur barunya
Semoga Blogger bisa hadir dengan fitur-fitur baru yang lebih dahsyat lagi

Semoga bermanfaat
Terima Kasih

Rabu, 03 Februari 2010

Membuat Related Posting/Posting Terkait (Versi Daftar List Berdasarkan Label)

Akhirnya posting lagi nih, walaupun agak maksa-maksain karena ada sedikit gangguan di koneksi internet saya dalam beberapa hari ini, ga tau juga tuh apa penyebabnya. yang jelas blogging harus tetap jalan terus.

Oke, posting kali ini mencoba menjawab request dari sobat blogger yg paling gokil abis, yang pasti saya sangat senang sekali berkunjung ke blog beliau, bisa melepas penat di otak dengan postingannya yang selalu bikin saya tertawa. siapa lagi kalau bukan sobatku mas Bayu Lebond yang saya kasih nama akrab Master kehilangan korek. Hilangkan penat diotak anda bersama mas Bayu Lebond. Thanx mas bayu udah mengingatkan saya akan topik ini.

Nah, postingan kali ini mencoba balik lagi ke tahap awal, karena saya sempat lupa mau memposting artikel ini, saya coba memaparkan tentang membuat Related Posting/Posting Terkait (versi daftar list berdasarkan label). Karena yang saya ketahui ada beberapa macam jenis tampilan related posting, saya harap Related Posting seperti ini yang mas Bayu maksudkan.

Langsung ke tahap pembuatannya.
- Pertama pastinya Loggin dulu ke blogger.
- Masuk ke Tata Letak/Layout
- Pilih Edit HTML
- Centang tulisan Expand Widget Template
- Cari code dibawah ini, untuk memudahkan tekan Ctrl+f, cari code tersebut :
<data:post.body/>
atau
<p><data:post.body/></p>
- Pastekan code dibawah ini setelah code diatas tadi

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<b>Related Posting :</b>
<div id='data2007'/><br/><br/>
<div id='Randezvous'>
<u><h5><a href='http://serba-seru.blogspot.com/2010/02/membuat-related-postingposting-terkait.html'>
Grab This Widget</a></h5></u>
</div>
<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('data2007').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>
</div>
</b:if>

- Untuk template yang menggunakan metode Read more(Baca Selanjutnya), terdapat 2 code yang sama, pastekan code diatas setelah code yang kedua.
- Simpan hasil kerja anda
- Coba test hasilnya...
- Semoga berhasil

Semoga Bermanfaat
Terima Kasih
SERBA BLOG

Keaneka Ragaman dan Serba Serbi

Kamis, 10 Maret 2011

Kotak Komentar Facebook/Facebook Comment Box Terbaru (With Reply)

Selasa, 15 Februari 2011

Cara Membuat Halaman Posting Berpindah dari Kiri ke Kanan

Minggu, 13 Februari 2011

Mengoptimalkan Meta Tag Blog

Sabtu, 12 Februari 2011

Mengoptimalkan Blog Dengan Meta Tag Title

Jumat, 11 Februari 2011

Meningkatkan Jumlah Pengunjung dengan Meta Tag Blog

Kamis, 10 Februari 2011

Cara Pasang Kotak Komentar/Comment Form Facebook di Blogger

Selasa, 08 Februari 2011

Black Eleganisme Blogger Template

Selasa, 01 Februari 2011

Rahasia Google Pagerank Sulit di Tebak

Senin, 31 Januari 2011

Pagerank Meningkat - Hadiah dari Google

Jumat, 05 Maret 2010

Kembali Untuk Mencari Jawaban

Minggu, 21 Februari 2010

Slide Recent Posting

Sabtu, 20 Februari 2010

Menampilkan Halaman Label Dengan Judul

Kamis, 18 Februari 2010

Membuat Slide Headline

Senin, 08 Februari 2010

Thumbnail Related Posting with Marquee (Berjalan)

Sabtu, 06 Februari 2010

Thumbnail Related Post (Artikel Terkait Menggunakan Gambar)

Jumat, 05 Februari 2010

Blogger Hadir Dengan Fitur Baru (Static Page)

Rabu, 03 Februari 2010

Membuat Related Posting/Posting Terkait (Versi Daftar List Berdasarkan Label)

Entri Populer

Total Tayangan Halaman

Pengikut

Kategori