Keaneka Ragaman dan Serba Serbi: Widget

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

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.

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)

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

Minggu, 31 Januari 2010

Efisiensi Random Banner Untuk Menghemat Tampilan Blog

Sempat bingung untuk menentukan judul postingan yang satu ini, karena sulit sekali membuat judul posting yang cukup pendek.
Oke langsung saja, topik kali ini sebenarnya sangat cocok bagi blogger yang senang sekali mengikuti affiliasi atau PTC/PTR/apa ajadeh, karena topik posting kali ini mengangkat tentang menampilkan banner menggunakan metode Random, anda pasti sudah tahu jika mengikuti program-program tersebut, biasanya ada program referralnya. nah selanjutnya untuk mencari referral pasti menggunakan sarana promosinya, dan biasanya sarana promosinya menggunakan media "Banner".

Pertanyaannya, apakah anda ingin menampilkan seluruh banner promosi program yg anda ikuti di blog anda???
Jawabannya pasti...tentu ( ya iyalaahhh )
Tapi apakah tidak memberatkan loading blog anda jika semua banner di tampilkan..???
Jawabannya pasti...tentu lagi dong.....
Anda coba bayangkan, banner promosi yang ingin anda tampilkan berjumlah 30 banner keatas, pastinya blog anda akan terlihat seperti pameran banner nantinya. dan yang pasti loading blog bisa berjam-jam lamanya.
Jadi bagaimana dong solusinya...???
Untuk bocoran saja, blog ini terpasang 14 banner 468x60 dan 8 banner 125x125, silakan anda cari sendiri dimana banner itu berada.

Nah, untuk ilustrasinya,
anda bisa lihat pada 2 banner berukuran 468x60 di atas...!!

Sudah puas melihatnya...???
Apa yang terjadi, tidak terjadi apa-apakaann...???? heheheee...
Yaa, pasti tidak terjadi apa-apa jika fungsinya akan terlihat pada saat anda refresh/reload blog ini.
Coba sekarang anda refresh/reload blog ini, anda perhatikan banner diatas, apakah sudah berubah...???

Nah, jika anda sudah tahu fungsi dari efisiensi random banner ini, jika anda tertarik menggunakannya, baca langkah selanjutnya....
- Pertama-tama login dulu ke Blogger
- Langsung menuju Tata Letak/Layout
- Klik Add a Gadget
- Pilih HTML/Javascript
Copy code dibawah ini kedalamnya :

if (pasang_iklan==3) {
txt="";
url="http://nama-blog-3.com/";
alt="judul 3 banner anda";
banner="http://nama-blog-3.com/banners.gif";
width="468";
height="60";
}

document.write('<center>');
document.write('<a href=\"' + url + '\"_top\">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br>');
document.write('<small>' + txt + '</small></a>');
document.write('</center>');
// End -->
</script>

Ganti tulisan yang telah saya beri warna sesuai dengan banner yg ingin anda pasang.
Tulisan berwarna Hijau = URL web yang di tuju
Tulisan berwarna Orange = Keterangan Web
Tulisan berwarna Biru = URL image banner
Angka berwarna Kuning = Keterangan urutan Banner

Untuk menambah jumlah banner silahkan ganti angka berwarna merah sesuai dengan jumlah banner yang akan anda pasang, serta copy code yang di beri kotak dan pastekan di bawahnya, jangan lupa ganti angka 3 dengan angka selanjutnya.

- Simpan hasil kerja anda.
- Coba di test dulu. apakah sudah berhasil
- Jika berhasil, jangan lupa commentnya yaaa...

Semoga bermanfaat
Terima Kasih
SERBA BLOG
(Sumber : http://www.o-om.com)

Jumat, 29 Januari 2010

Cara Membuat Random Posting Title Berjalan (Marquee)

Setelah kemaren sempat memposting "Cara menampilkan Top Comment Berjalan (Marquee)", nah, kali ini mencoba memaparkan "Cara Membuat Random Posting Title Berjalan (Marquee)". Postingan kali ini juga untuk menjawab pertanyaan dari sobat blogger pada waktu yang lalu sempat bertanya kalau cara membuat Recent Postingnya bagaimana? Thanx ya buat sobat Ngeposting ni yee + sobat yang satu lagi saya lupa (karena beliau bertanya via shoutbox dan sekarang shoutbox sudah saya ganti, jd maaf kl saya lupa yaaa...) karena pertanyaan anda memberikan saya ide untuk membuat postingan yang baru, abisnya saya sempat bingung mau membuat postingan apalagi yaaa....heheheheheeee....

Sebenarnya mau dikasi judul Recent Posting Title.....namun rasanya kurang pas kl mau bilang tentang tool ini Recent Posting Title, karena tool ini menghadirkan judul-judul posting blog kita secara acak bukan menampilkan judul postingan terbaru pada blog kita. Tapi ga apa-apa dech, ada baiknya juga sih, karena postingan-postingan lama pada blog kita bisa dilirik lagi sama pengunjung, jadi tidak terabaikan deh postingan lama kita.
Code ini sebenarnya berupa recent posting yang berurutan kebawah seperti daftar isi pada menu disamping, namun sedikit saya poles agar bisa menghasilkan daftar posting yang berurutan kesamping, supaya bisa menghemat ruang pada blog kita.

Oke deh, langsung saja.....

Seperti biasa masuk dulu ke Blogger
Terus Tata Letak/Layout
Pada halaman Page Element/Elemen Laman, klik Add a Gadget
Pilih HTML/Javascript
Copy code dibawah ini dan paste ke dalamnya :

<div style="text-shadow:4px 4px 4px #adadad; font-size: 14px; COLOR: black;"><b>Recent Posting :</b></div>
<div style="border: 3px dashed black; background: #ffffff; padding:2px; width:470px; font-size: 17px; color:red;">
<b>
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title + "</a> | ";
var pComment = " $" + feed.value.items[i].commentcount + " comments$";
var pList = "</a>" + "<a href="+ href + '">' + pTitle;
document.write(pList);
document.write(pComment);
document.write('</a></li>');
}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://nama-blog-anda.blogspot.com
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json"
type="text/javascript"></script>
<span style="font-size: 8px; float:right;"><a
href="http://serba-seru.blogspot.com/2010/01/cara-membuat-recent-posting-berjalan.html">
Grab this</a></span>
</b></div>

Ganti tulisan berwarna merah dengan URL blog anda.
Ganti Angka berwarna kuning sesuai dengan ukuran pada blog anda
Angka 2(keterangan kecepatan) yang berwarna biru bisa anda sesuaikan dengan selera anda
Simpan hasil kerja anda
Nah....coba deh lihat hasilnya...

Nah buat anda yang mengerti tentang code-code yang membingungkan seperti ini, silahkan custumize sendiri deh....
Kl ada yang kurang mohon di tambahin yaa di comment...
Atau mungkin ada yang mencobanya dan berhasil, jangan lupa commentnya yaaa...
Kl ada juga yang pengen ini itu...di code ini lhooo....(jangan pengen minta dibeliin mobil atau rumah...ntar saya miskin seumur hidup)...silakan comment di bawah ini yaaa...

Semoga bermanfaat
Terima Kasih
SERBA BLOG

Keaneka Ragaman dan Serba Serbi

Kamis, 10 Maret 2011

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

Kamis, 10 Februari 2011

Cara Pasang Kotak Komentar/Comment Form Facebook di Blogger

Minggu, 21 Februari 2010

Slide Recent Posting

Sabtu, 20 Februari 2010

Menampilkan Halaman Label Dengan Judul

Kamis, 18 Februari 2010

Membuat Slide Headline

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)

Minggu, 31 Januari 2010

Efisiensi Random Banner Untuk Menghemat Tampilan Blog

Jumat, 29 Januari 2010

Cara Membuat Random Posting Title Berjalan (Marquee)

Entri Populer

Total Tayangan Halaman

Pengikut

Kategori