Menampilkan Gambar Profile dihalaman Hasil Pencarian Google

Bisa dipastikan robot Google sekalipun tidak mungkin bisa menentukan keaslian
suatu artikel, yang mungkin bisa tentu saja hanya penulis artikel itu sendiri.
Tapi dengan hadirnya fasilitas untuk menampilkan gambar Profile Anda dalam hasil
pencarian tentu ini akan menjadi cerita lain, selain terlihat bahwa Anda adalah
penulis sebenarnya dan itu juga menjadi kesan profesional buat Anda. Coba saja
Anda mencari artikel yang menarik di Google, Anda tentu akan melihat 10 hasil
pencarian pertama dan bisa dipastikan semuanya mempunyai judul yang hampir mirip
bahkan sama persis, lalu bagaimana jika di antara 10 hasil pencarian tersebut
terpajang wajah tampan Anda, tentu si pencari akan melirik Anda terlebih dahulu
walapun artikel blog Anda sendiri hanya berada pada urutan ke 6, itu karena
halaman Google sering berisi penuh dengan teks dan dengan demikian orang mungkin
akan tertarik lebih ke arah hasil yang memiliki beberapa elemen visual (foto
penulis) yang melekat padanya. Asalkan bukan artikel COPAS aja ya tar malah
malu2in, udah copas nampang pula hehehe

Cara menampilkan gambar Profile dihalaman hasil result Google:

 

CARA I:

1. Pertama, silahkan buat satu halaman "About me" di blog Anda, untuk
pengguna blogger Anda bisa membuatnya melalui halaman Statis Page atau bisa juga
menggunakan halaman Standar Post. Agar lebih mudah Anda bisa melihat halaman
"About me" milik saya
disini.

2. Buat satu Text Link yang mengarah ke halaman URL Profile Google+ Anda dan
jangan lupa menanamkan satu Tag rel="me" (ingat
hanya satu tag saja) dalam link tersebut.

 

<a href="https://plus.google.com/ID_Anda" rel="me">Agus Ramadhani</a>

3. Ini sangat penting, pastikan semua artikel diblog Anda terkait kehalaman
"About me". Caranya sangat mudah, Anda tinggal memasang saja link "About me" di
menu, saya sendiri memasangnya di halaman About dalam widget saya (lihat paling
bawah di blog ini ditandai dengan text link Read more
), dan pastikan Anda memasang Tag rel="author"
pada link tersebut.

 

<a href="http://www.blog-Anda.com/p/about-me.html"
rel="author">About me</a>

 

4. Langkah terakhir silahkan masuk ke halaman profile Google+ Anda disini
https://plus.google.com
dan tuju ke tombol "Edit Profile" kalau sudah silahkan tuju ke pengeditan
"Profile lainnya", biasanya Anda diminta untuk memasukan alamat blog Anda, nah disini Anda tinggal memasukan Link "About me" saja beserta
URL-nya.

 

Sampai tahapan ini sebenarnya sudah selesai dan biarkan google merayapi
halaman Anda terlebih dahulu. Perlu juga diketahui bahwa tidak ada jaminan
gambar anda akan tampil, semua tergantung analisa google itu sendiri setelah
merayapi halaman anda.

 

CARA II:

Cara yang kedua jauh lebih praktis dimana Anda tinggal
menambahkan satu badge icon profile saja, caranya silahkan langsung menggunakan
Profile Button Creator dialamat ini

http://www.google.com/webmasters/profilebutton

Pastikan cara kedua ini tidak berlaku jika Anda sudah menggunakan cara
pertama, jika tidak akan terjadi duplikat Profile Author.

Verifikasi Author

Agar gambar Profile Anda bisa tampil dan berjalan dengan sempurna sebaiknya
Anda perlu melakukan verifikasi dengan mengujicobanya terlebih dahulu.

1. Silahkan buka

Rich Snippets Testing Tool

2. Masukan salah satu link artikel (posting) Anda yang terbaru.

3. Jika tidak ada masalah maka gambar profile beserta nama Anda akan muncul
dan ditandai dengan nilai verifikasi yang bener.

Tips jika ada kesalahan

1. Pastikan Anda hanya menggunakan kedua tag rel="me" dan rel="author"
diatas satu kali saja jangan sampai ada duplikat.

2. Pastikan Anda benar-benar memasukan gambar Anda pada Profile Google+,
sebaiknya termasuk dengan Isi biodata Anda secara lengkap.

3. Pastikan halaman profile Google+ Anda benar-benar terkait dengan halaman
blog Anda, termasuk halaman About me tadi.

4. Google akan memilih thumbnail gambar dari halaman Profil Google+ Anda,
sebaiknya gunakan gambar yang sebenarnya dari diri Anda sendiri (bukan ikon).
Gambar harus terlihat baik bahkan ketika dikompresi menjadi gambar thumbnail
50x50.

 

Silahkan baca dokumentasi selengkapnya
disini

Semoga tutorial diatas berguna :)

Cara Memasang Tombol Google+ di Blogger

Saya yakin pembaca setia blog ini tidak kesulitan untuk memasang tombol Google+ (G+), tapi tidak semua juga mengerti caranya, terlebih yang baru
belajar ngeblog. Selain itu disini saya juga  mencoba menjelaskan secara
rinci dari beberapa masalah yang kadang membuat tombol Google+ tidak bekerja
sebagaimana mestinya. Jadi silahkan luangkan waktu sejenak untuk belajar
tutorialnya dibawah ini:

Langkah memasang tombol G+ sangat mudah silahkan ikuti tutorial dibawah
ini

Silahkan memasang Script dibawah ini atas Tag </body>

<!-- Tempatkan tag ini di bagian head atau tepat
sebelum tag body penutup -->

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

 

Kemudian anda bisa memasang tombol G+ dimana saja dengan menambahkan kode
dibawah ini.

<!-- Tempatkan tag ini di tempat yang Anda inginkan untuk menampilkan tombol +1
-->

<g:plusone size="small"></g:plusone>

Cara memasang tombol G+ diatas sebenarnya sudah selesai, tapi jika anda ingin
menambahkan kode yang lebih rinci anda bisa mencoba beberapa script dibawah ini:

Tombol G+ dengan ukuran Standar (24 piksel)

<g:plusone></g:plusone>

Tombol G+ dengan ukuran Kecil (15 piksel)

<g:plusone size="small"></g:plusone>

Tombol G+ dengan ukuran Sedang (20 piksel)

<g:plusone size="medium"></g:plusone>

Tombol G+ dengan ukuran Tinggi (60 piksel)

<g:plusone size="tall"></g:plusone>

Tombol G+ Untuk HTML5

<div class="g-plusone" data-size="standard" data-count="true"></div>

Anda juga dapat membuat custom tombol G+ sendiri

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {"parsetags": "explicit"}
</script>
<script type="text/javascript">
  function renderPlusone() {
    gapi.plusone.render("plusone-div");
  }
</script>
<body>
  <a href="#" onClick="renderPlusone();">Render the +1 button</a>
  <div id="plusone-div"></div>
</body>

Custom Tombol G+ dengan URL khusus

<!-- customized for a specific address -->
<g:plusone href="https://plus.google.com/108442421331149025926"></g:plusone>

Untuk customize tombol G+ saya menyarankan anda memasukan url dari Google+ profile atau halaman (page) G+ yang sudah ada buat, lihat tutorialnya disini

 

Cara pasang Tombol G+ disebelah Tombol Facebook (dalam halaman posting)

<span style='float:left;
width:65px;'><!-- Place this tag where you want the +1 button to render -->

<g:plusone expr:href='data:post.url' size='medium'/>

</span>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.pjumpjhp?href=&quot;
+ data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;'
frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:110px;
height:30px;'/>

</div>

Kode standar Google+ tidak bekerja pada postingan dalam lingkup halaman
home (index).

Pada halaman Posting dengan menggunakan kode

<G:Plusone/>
biasanya tidak terjadi masalah, tapi saat kalian mencoba memasang tombol G+ yang
ditujukan pada halaman post yang letaknya berada dalam halaman utama ini
biasanya bermasalah karena G+ setahu saya tetap akan mendeteksi sebagai halaman
index bukan sebagai halaman post. Untuk mengatasi masalah ini silahkan mencoba
menggunakan kode ini <g:plusone expr:href='data:post.url'/>

 

Sebenarnya G+ sendiri sudah menyedian Custom Badge yang bisa anda coba
langsung di alamat ini
disini atau
anda bisa melihat informasi Full API selengkapnya
disini

 

Jangan lupa bergabung dihalaman G+ saya:

Halaman Resmi Agus Ramadhani

Halaman Resmi o-om.com

Halaman Resmi
Zoomtemplate.com

 

Bagaimana Membuat Halaman di Google+

Seperti Facebook yang sukses membuat halaman Page khusus selain halaman
profile, Google+ (G+) beberapa waktu lalu juga kembali merilis halaman page yang
khusus dibuat untuk tujuan halaman penggemar seperti website, merek, bisnis dll. Dan tidak diragunakan lagi halaman ini sangat berguna untuk membuat saluran trafik dengan cara mempromosikan blog atau website. Jika anda sudah pernah membuat halaman
page untuk facebook saya rasa anda tidak akan bertanya lagi dengan page pada
G+ karena cara kerjanya sangat mirip dan hampir sama :)

Ada kelebihan yang di miliki Page pada G+ jika dibandingkan Facebook,
dimana Page pada G+ dalam waktu dekat akan terintegrasi dengan hasil pencarian
pada Google Search Engine, kita cukup memberi tanda (+) saja sebelum melakukan
pencarian, misalkan kita mengetikan +pepsi atau +angry bird maka secara
otomatis Google akan memberikan hasil result tertentu yang terkait dengan Page
pada G+. Bayangkan jika itu adalah halaman anda yang tampil pertama, tentu BOOM
trafik tidak akan diragukan lagi. Tapi ada tapinya, halaman yang muncul mungkin
adalah halaman yang populer dengan jumlah penggemar terbanyak :) jadi berusahalah
untuk membuat halaman G+ anda Populer, asalkan jangan buka halaman Salon ++ aja ya
wkwkwkkwk.

Tutorial Cara Membuat Halaman di Google+

Prosesnya gak ribet dan sangat sederhana yang penting anda sudah terdaftar
disana.

1. Langsung tuju ke halaman ini

https://plus.google.com/pages/create

2. Pilih halaman yang ingin anda buat, Saya sendiri memilih tab (Lainnya)
atau anda bisa memilih halaman tertentu misalkan blog atau website jadi terserah saja.

3. Silahkan masukan judul halaman dengan alamat blog yang ingin dipromosikan.
Jangan lupa beri tanda centang bahwa anda setuju dan tekan tombol (Buat)

4. Masukan slogan halaman minimal 10 kata dan tambahkan photo biar manis.

5. Selesai, tinggal di promosikan saja linknya :)

 

Jangan lupa bergabung dihalaman G+ saya:

Halaman Resmi Agus Ramadhani

Halaman Resmi o-om.com

Halaman Resmi
Zoomtemplate.com

 

Trik Sederhana Cara Proteksi Gambar di Blog

Rasanya sangat mustahil menghindari seseorang menyalin dan menyimpan gambar
yang ada dihalaman blog anda. Hanya dengan melakukan klik kanan dan "save as" siapapun dapat dengan mudah mengambil gambar anda hanya dengan hitungan detik.

 

Nah disini sebenarnya ada Trik Proteksi sederhana yang bisa anda lakukan
untuk menghindari gambar anda di simpan dari tangan-tanagn jahil, dimana hasil dari gambar yang dicoba disimpan nantinya hanya berupa gambar kosong.

 

Untuk uji coba silahkan klik kanan dan "save as" gambar dibawah ini:

 

Kode standar dari gambar biasanya seperti ini:

<img width="500" height="375" src="http://www.o-om.com/contohgambar.jpg"/>

 

Dengan menerapkan kode sederhana dibawah ini yaitu dengan hanya mengubah artibut src dan penggunaan css style langsung pada gambar maka cara Trik dibawah ini akan menciptakan gambar kosong pada hasil download.

<img style="background-image:url('http://www.o-om.com/contohgambar.jpg');"
src="data:image/gif;base64,R0lGODlhAQABAIAAAP
///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" width="500" height="375"/>

 

Ingat! selalu pastikan ukuran size dari gambar harus sama dengan aslinya. Walaupun Trik ini menurut saya tidak 100% akurat paling tidak khan cara ini bisa sedikit mengurangi dari tangan pengguna yang non-teknis :)

Pilihan Black atau White YouTube Video Player

Sebelumnya anda mungkin hanya bisa menampilkan Video Player Youtube
menggunakan warna standar Light (white) saja, sedangkan saat tulisan ini saya
buat melalui situs resmi
youtube

Shannon Behrens mengatakan bahwa YouTube akan beralih ke pemutar video gelap
untuk semua embeds dalam beberapa waktu mendatang. Lalu bagaimana jika anda
sudah terlanjur ingin menggunakan warna Light saja sebagai warna stardar payer
anda karena itu mungkin lebih sesuai dengan halaman blog anda saat ini.

 

Lihat Perbedaan Warna Player Video YouTube dibawah ini:

 

Untuk Light (white) Player:

<iframe src="http://www.youtube.com/embed/S1Q9bAochC0?theme=light"

      frameborder="0" width="575" height="350"></iframe>

 

Untuk Black Player:

<iframe src="http://www.youtube.com/embed/S1Q9bAochC0?theme=dark"
      frameborder="0" width="575" height="350"></iframe>

 

Untuk Mengubah warna player sesuai selera caranya anda tinggal mengganti saja
warna merah pada source diatas. Semoga Berguna :)

Semi Auto Generated Content For Blogspot - AGC

Pada kesempatan kali ini saya akan berbagi sedikit tips buat temen-temen blogger

yg lagi males atau gak punya banyak waktu untuk write and posts. Sesuai dengan

judul posting “Semi Generated Content” yg bisa diartikan dengan setengah

dari “Auto Generated Content (AGC)”. Maksudnya adalah kita hanya perlu edit sedikit

posting yang secata otomatis masuk dalam “Daftar Entri” Blog kita masing-

masing. Berikut ini peralatan yang temen blogger harus sediakan :

GUEST BLOG:

Penulis dibalik Artikel ini:
Ari Ibnu umar | silabusandrpp.blogspot.com

1. Account Blogger

Dalam hal ini harus jelas blog Semi Generated Content yang akan temen

buat tema dan isinya kemana [Tema Blog]

 

2. Account Yahoomail

Digunakan sebagai sumber artikel yang mengisi secara otomatis nantinya

dalam “dafta Entri” Blog Semi Generated Content kita.

 

Langkah-langkahnya adalah sebagai berikut :

1. Buat satu blog dengan tema tertentu, misalnya ttg
“Islam”

2. Pada tab “pengaturan” pilih sub menu
“email and Selluler” seperti gambar

dibawah ini :

3. Pada Opsi pengeposan isikan alamat email yg saudara inginkan, email ini

merupakan Subdomain dari Email Google,, saudara bisa lihat pada

gambar. Pada gambar diatas email google nya adalah rppsilab[at]

gmail.com dengan sub email yang saya isikan
arimatematika. Jadi

emailnya adalah rppsilab.arimatematika[at]blogger.com. Perlu diingat

pada bagian bawah gambar diatas tandai “simpan email sebagai entri

konsep” agar kita rapikan dahulu sebelum di terbitkan. [inilah yang saya

maksud dengan Semi Generated Content For Blogspot, artikelnya

masuk secara otomatis, tetapi masih perlu edit manual agar rapi ketika

kita tampilkan dalam postingan.

 

4. Setelah itu saudara tinggal gabung disalah satu YahooGroups dengan

account YahooMail yg telah temen buat. [makin banyak groups yg diikuti,

makin banyak artikel yg masuk dalam daftar entri blog kita]. Bergabung

dengan groups yg sesuai dengan tema Blog Semi Generated Content yg

akan saudara buat. Ketika saudara bergabung isikan email yg telah kita

buat pada langkah 3. Lihat screen shoot dibawah ini

Bayangkan saja dalam waktu yg relatif singkat, daftar entri blog saya mencapai

346 daftar postingan. Bisa lihat screenshoot dibawah ini pada blog saya yg

berjudul “BACALAH” yang saya mulai dari 09 desember 2010.

Tetapi blog ini

tidak saya kelola dengan baik, karena saya ingin focus pada blog saya yg tentang

pendidikan, ngeblog harus focus dan sebaiknya focus ke tulisan konten orisinil
itu akan lebih baik. Semoga bermanfaat :)

Menampilkan Thumbnail yang Berbeda Pada Halaman Home

Saya kurang tau apakah wordpress menggunakan plugin untuk menampilkan
thumbnail yang berbeda pada halaman home, tapi itu bisa dilakukan dengan lebih
mudah di blogger. Cukup dengan conditional Tag.

Thumbnail ini akan digunakan pada halaman home untuk memberikan gambaran
tentang isi artikel, dan akan hilang setelah visitor masuk ke artikel. Salah
satu blog yang menerapkan system ini adalah bloggerplugin. Disini saya akan
menjelaskan pengaplikasiannya.

Kita akan menggunakan conditional tag yang mengatur penampakan pada halaman
artikel (item).


<b:if cond='data:blog.pageType == &quot;item&quot;'>


Untuk membungkus Class tertentu. Class ini akan diletakkan pada HTML gambar yang
ingin dijadikan thumbnail.

Berikut total kode:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>




.thumb {display:none}



</style>

</b:if>

 

Letakkan kode tersebut diatas </head>

***

Masuk kehalaman posting & saat memasukkan gambar ke artikel, akan muncul kode
berikut:

<a
class="thumb" onblur="try

{parent.deselectBloggerImageGracefully();} catch(e) {}"

href="...s1600/anonymous.png"><img style="display:block; margin:0px

auto 10px; text-align:center;cursor:pointer; cursor:hand;width:

35px; height: 35px;" src="...s400/anonymous.png" border="0"

alt=""id="BLOGGER_PHOTO_ID_5529584144433618498" /></a>

Atau,

<img
class="thumb" src="...s1600/anonymous.png" alt="" />

Tambahkan kode yang berwarna merah seperti yang ditunjukkan pada kode HTML
diatas. Intinya adalah pada class="thumb". Commons
ini yang mengatur bahwa thumbnail/gambar dihidden jika masuk ke halaman artikel.

Penulis dibalik Artikel ini:
Biyan | hhttp://www.dzignine.com

Trik ini juga bisa dilakukan untuk mengobati thumbnail yang jelek pada auto read
more, tentu saja selain dengan melakukan cropping pada gambar.

Optimasi blog dengan Google Page Speed dan Yahoo! YSlow

Postingan kali ini
merupakan kelanjutan dari tulisan saya sebelumnya mengenai bahasan
15 Cara Optimasi Blog Agar Tampil Lebih Cepat,
buat yang sudah baca silahkan
lanjutkan baca artikel ini, kalau belum..silahan baca dulu, karena untuk bahasan
kali ini kita langsung praktek menganalisa menggunakan tools, dan artikel yang
saya tulis sebelumnya itu sebagai pegangan saja biar nanti gak bingun memilah
apa saja halaman yang sekiranya wajib dioptimasi.

 

Optimasi kali ini sebenarnya bertujuan untuk mengurangi pesan kesalahan ketika
browser melakukan rendering pada suatu halaman. Logikanya yaitu semakin sedikit
kesalahan tentu akan semakin baik karena ini akan mengurangi kerja berat dari
Browser atau paling tidak kita berusaha menghemat pemakain Bandwith.

 

Google Page Speed

Untuk Tools Optimasi yang pertama, saya biasanya menggunakan Google Page
Speed, selain karena tools ini besutan langsung dari Google, tools ini juga
memberikan informasi cukup lengkap mengenai laporan kesalahan pada halaman.
Setiap halaman blog yang kita analisa secara otomatis akan dilaporkan kedalam
tabel list. Page Speed akan memilah dan menginformasikan secara
rinci apa saja kesalahan yang ditemukan, selain pesan kesalahan, disitu juga di-informasikan pesan kebenaran, yang berarti
ditemukan sebagian element halaman yang
tidak perlu lagi diperbaiki karena dianggap sudah benar.

 

 

Halaman yang selesai dianalisa Google Page Speed biasanya akan diberi
nilai (score). Nilai score terbaik adalah 100, ingat! tidak mudah untuk bisa mencapai nilai 100,  saran saya cukuplah mencapai
score antara 80-90/100, inipun sudah terbilang angka yang lumayan bagus. 

 

Lalu bagaimana memperbaiki kesalahan?

Setiap pesan error yang ditampilkan
dalam list semuanya tentu sudah ada solusinya, misalkan pesan tersebut
menampilkan "Remove unused CSS" yang berati kita diminta untuk
membuang kode CSS yang tidak digunakan. Silahkan klik link yang 
menampilkan kesalahan, secara otomatis Google akan memberikan solusi terbaik
untuk mengatasi masalah tersebut. Nah, tugas kita tinggal pelajari saja intruksi
dan tips optimasi dari Google.

 

Yahoo! YSlow

Selain Google Page Speed ada satu lagi tools yang biasanya saya gunakan yaitu
Yahoo! YSlow. Pilihan pada YSlow karena saya menyadari tools ini
dikembangkan langsung oleh Yahoo, tentu saja keakuratannya gak perlu diragunakan
lagi. Sebenarnya cara kerja YSlow mulai dari informasi laporan kesalahan dan
tetek bengeknya hampir sama saja dengan Google Page Speed, keduanya sama-sama
memberikan informasi perbaikan dan tentu saja cara menangani kesalahan.
Perbedaan yang mecolok
terletak pada pemberian Nilai halaman, jika Google Page Speed berdasarkan pada
Score, Yahoo YSlow sendiri berdasarkan pada Grade A-F dimana nilai Grade
A adalah nilai terbaik dan Grade F adalah nilai yang terjelek. Seperti saya
bilang diatas tentu sulit sekali untuk mencapai nilai sempurna, saran saya cukup diantara Grade B-C saja.

 

 

Nah, sekarang terserah rekan saja memilih dari kedua tools diatas, keduanya
sama bagusnya. Hemat saya pilih salah satu saja, karena kedua tools diatas sudah
pasti memberikan nilai score yang berbeda.

 

Cara Installasi:

Sebelum mencoba kedua Tools diatas pastikan rekan sudah menginstall firefox
plugin untuk Firebug,
ok! kalau sudah, silahkan install plugin untuk
Google Page
Speed dan Yahoo!
YSlow. trus ngapain....apa ya?....ya tinggal langsung dicoba aja bro hehehe

Membuat RSS Feed Untuk Website Yang Tidak Mendukung Feed

Website standar atau jadul biasanya tanpa dukungan
Rss Feed, ini berbeda jika kita
menggunakan platform blog seperti Blogger, Wodpress dan platform lainya yang
memang sudah terlebih dahulu tertanam sindikasi Rss Feed. Keutamaan Rss Feed
tidak lain adalah sebagai cara termudah agar pembaca (subscriber) feed via online dapat mengetahui
update terbaru pada suatu situs,  selain itu tentu saja peran Rss Feed
sangatlah besar bagi spider search engine agar dapat mengindex semua halaman
Website.

 

Tutorial kali ini saya akan menunjukan bagaimana mudahnya membuat Rss Feed
dengan cepat tanpa harus menggunakan software tertentu atau tanpa harus menulis
baris kode XML yang bikin kita pusing.

 

Tutorial Membuat Feed dengan Goolge Reader:

 

Langkah I:

1. Silahkan kunjungi
Google Reader, login seperti biasa.

2. Tuju ke Notes

3. Arahkan mouse ke button Note In Reader, lalu drag and drop
button tersebut dengan cara menahan klik dan arahan ke tab bookmark website
rekan (dalam contoh saya menggunakan browser Flock)

 

Link Google reader yang sudah tersimpan dalam Bookmark

4. Sekarang buka website rekan yang ingin ditambahkan RSS Feed, Contoh disini
saya menggunakan
Premium template.

5. Blok sebagian tulisan yang menurut rekan penting, mulai dari title dan
deskripsi singkat. Lalu klik Note in Reader yang ada dalam Bookmark

6. Akan muncul Dialog Box Google Reader disebelah kanan.

7. Disini silahkan hilangkan tanda Check untuk Add to shared items, Masukan nama Tag utama kedalam Add Tags (contoh: Zoom Premium), dan
pastikan rekan menggunakan tag yang sama untuk setiap halaman yang akan rekan
buat Feednya.

9. Klik tombol Post Items

 

Langkah II:

1. Tuju ke menu Settings, lalu klik Reader Settings

2. Pilih Tab Folder and Tags

3. Akan tampil nama tag yang sudah rekan buat, jangan lupa set feed berwarna
abu-abu (private) ke Public

4. jangan lupa catat / copy alamat linknya.

 

Langkah III:

Langkah membuat feed sudah hampir selesai, sekarang kita membakar link Feed
yang sudah rekan copy tadi dengan
Feedburner. Maaf saya
tidak menjelaskan panjang lebar tentang pendaftara Feedburner, disini saya
anggap rekan sudah mengerti caranya :)

 

Langkah Terakhir:

Agar website langsung support Rss Feed, rekan hanya perlu menambambahkan kode
di bawah ini kedalam website. Letakan diantara Tag
<Head> </Head>

 

<link rel="alternate" type="application/rss+xml"
title="Title website"
href="http://feeds2.feedburner.com/feedburnerID"
/>

 

 

Note: Jika rekan ingin menambahkan Feed untuk halaman yang baru, rekan
dapat dengan mudah mendistribusikannya melalui RSS feed dengan hanya mengulangi
Langkah I

Fungsi Kode Untuk Mengatur Tampilan Content Blog

Seperti yang kita ketahui, template blog dengan gaya Magazine Style
merupakan salah satu favorit template yang sering di pakai oleh para blogger.
Salah satu ciri template blog dengan gaya Magazine Style adalah adanya
widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada
suatu halaman atau postingan blog.

Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog
dari muncul lalu menghilang dan menghilang kemudian muncul. yang bisa Anda
terapkan untuk mengatur tampilan widget blog Anda.

1. Hanya pada Halaman Utama Blog

<b:if cond='data:blog.url == data:blog.homepageUrl'>
... </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog
saja alias akan menghilang ketika sobat mengklik Label Post atau membaca
postingan secara keseluruhan.

Contoh penggunaan kode ini bisa anda liat pada demo blog berikut. Jika sobat
membaca artikel secara keseluruhan atau mengklik kategori post, 3 kolom diatas
main post akan menghilang.

2. Kategori Post dan Single Post

<b:if cond='data:blog.url != data:blog.homepageUrl'> ...
</b:if>

Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan
single post (membaca postingan secara keseluruhan).

Contoh penggunaan kode ini bisa Anda lihat pada href="http://demoblog-ajah.blogspot.com/" target="_blank">demo blog tadi
dimana ketika sobat mengklik kategori post atau membaca postingan secara
keseluruhan, widget pada kolom footer dengan judul DheTemplate.com - New Free
Blogger Template Everyday baru muncul. Widget ini tidak akan muncul pada halaman
utama blog.

3. Halama Utama Blog dan Kategori Post

<b:if cond='data:blog.pageType != &quot;item&quot;'> ...
</b:if>

Kode ini berfungsi untuk menampilkan widget blog pada main post dan kategori
post dan akan menghilang ketika membaca postingan secara keseluruhan.

Contoh penggunaan kode ini pada demo blog tersebut adalah widget pada sidebar
kiri dengan judul New Templates. Jika sobat membaca suatu postingan secara
keseluruhan atau mengklik kategori post (About dan DheTemplate pada menu
navigasi), maka widget tersebut akan menghilang.

4. Single Post

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
... </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja
atau ketika anda membaca postingan secara keseluruhan dan tidak akan muncul pada
main post atau kategori post.

Contoh penggunaan kode ini pada demo blog tersebut adalah widget sidebar kiri
dengan judul Blog Template dimana saat sobat membaca suatu postingan secara
keseluruhan, maka widget tersebut baru muncul.

5. Halama Utama Blog dan Kategori Post

<b:if cond='data:blog.pageType == &quot;index&quot;'>

Fungsi kode ini sama dengan fungsi kode pada nomer 3.

6. Menampilan Widget Blog Pada Postingan
Tertentu Saja

<b:if cond='data:blog.url == &quot;URL_POST_TERTENTU&quot;'>
... </b:if>

Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu
postingan tertentu. Untuk lebih jelasnya silahkan sobat melihat demo blog
tersebut. Lalu klik artikel post dengan judul DheTemplate.com - New Free Blogger
Template Everyday. Anda akan melihat widget blog dengan judul Templates By
DheTemplate muncul. Widget tersebut tidak akan muncul apabila sobat membaca
postingan blog yang lain. Misalnya sobat membaca postingan pada demo blog
tersebut dengan judul DheTemplate.com, maka widget tersebut tidak akan muncul.



7. Menyembunyikan Widget Post Pada Postingan
Tertentu Saja



<b:if cond='data:blog.url != &quot;URL_POST_TERTENTU&quot;'>
... </b:if>

Kode ini merupakan kebalikan dari kode no 6
dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul
pada postingan yang lain. Untuk lebih jelasnya, sobat klik artikel post dengan
judul DheTemplate.com - New Free Blogger Template Everyday dan bandingan jika
sobat mengklik postingan dengan judul DheTemplate.com. Apa yang akan Anda dapat??
Widget blog dengan judul BlogList tidak muncul pada artikel postingan dengan
judul DheTemplate.com - New Free Blogger Template Everyday dan widget tersebut
baru muncul pada artikel postingan dengan judul DheTemplate.com. termasuk juga
artikel postingan yang lain dan halaman utama dan kategori post  

Mungkin itu saja yang saya tahu tentang cara membuat widget blog dari muncul
menjadi menghilang atau menghilang kemudian muncul. Untuk penerapan kode-kode
diatas ada 2 cara yaitu langsung pada widget dan secara kelompok (mungkin pada
artikel selanjutnya). Semoga bermanfaat.

Penulis :

DheTemplate - "New Free Blogger Template Everyday - Everyday Is New free Blogger
Template"

Blog : http://www.DheTemplate.com

Membuat Highlighting Current Page atau Current Menu di Blogger

Highlighting Current Page atau Current Menu biasanya diartikan sebagai
penanda halaman aktif
untuk saat ini ketika user berada dalam halaman tertentu, misalkan dalam halaman Home,
About, Help us dan Contact. Pada Blogger sendiripun sebenarnya baru-baru saja
sudah menanamkan fitur ini jika kita sedang mengaktifkan fitur untuk halaman (Page).
Namun entah kenapa kebanyakan blogger termasuk saya sendiri tidak begitu
tertarik menggunakan. Mungkin sudah telat kali ya :)

 

Yang membuat Saya tertarik untuk membahas fungsi Current Page ini karena
hampir semua template yang saya sediakan di
zoomtemplate.com sudah tertanam fitur
untuk menampilkan menu navigasi, sayangnya ya itu tadi, menu yang seharusnya
bagus malah seperti hanya sebagai hiasan pengganti link saja, dan kebanyakan hanya
terlihat cantik ketika user mengarahkan mouse (mouse hover) namun tidak memiliki
fitur penanda bahwa menu tersebut seharusnya terlihat ikut aktif dalam halaman
yang juga aktif.

 

Sebagai contoh silahkan rekan melihat demonya di
zoomtemplate.com

 

 

 

Disitu bisa rekan lihat saat kita berada dalam area halaman HOME, Link
menu HOME juga terlihat ikut aktif. Begitupula saat rekan berapa dalam
halaman FAQ'S dan beberapa Menu lainnya yang terlihat juga ikut aktif. 

 

Biar lebih mudah mempelajarinya silahkan Download contoh Demo Menu yang sudah
saya rancang disini.

 

 

OK langsung ke tutorial saja ya. Oh iya contoh menu dibawah ini tidak sama
dengan contoh menu di zoomtemplate.com, tapi rekan dapat mengedit menu tersebut sesuai
kebutuhan. Terus terang saya kesulitan menjelaskannya, karena hampir setiap kode
CSS
Menu memiliki rancangan yang unik dan berbeda.Tapi dengan contoh kali ini saya yakin
rekan paling tidak mempunyai sedikit gambaran bagaimana cara Aktive Curren Page
/ Current Menu ini bekerja.

 

1. Silahkan langsung tuju ke halaman Edit HTML

 

2. Letakan kode CSS dibawah tepat diatas kode ]]></b:skin>

 

#nav ul {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlwUVBxMmsHvbKbWAVZSJbeVQ_PVt3em3vghSPIqo8aWfR9EUyYTDz2QM2Wc_WFQKFt99kYtUg4XlOZl4PzFRH5wwCHw2qKy9w5sQCPDCWW14NNGG3yBg-xkFbyzw1yQYvKf-4NUtmNI70/s400/backgr.jpg) repeat-x left top;

margin:0;

border-bottom:3px solid #98CB00;

border-top:1px solid #00CCFF;

list-style-type:none;

height:31px;

}

#nav li {

float:left;

}

#nav li a {

display:block;

padding:5px 15px 4px;

font:bold 16px "Trebuchet MS";

font-stretch:condensed;

text-decoration:none;

color:#00CCFF;

letter-spacing: -0.1em;

}

#nav li a:hover {

color:#98CB00;

}

#nav li.current {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNF8MvzGijQ4Ntke90RFiEYvVXLvgp-AoLzgPoBhvGY5a3jU7q1qYWY8KEHh1KBbGJeW-SpyAj3D2J9SV-NPCoZBt6_X8SB5PxPMQxTGpHagc5bs6NRZX4j4OWSpVJCsSSH4-D4XjSZgUC/s400/current.gi) no-repeat center bottom;

color:#98CB00;

}

 

2. Letakan kode Javascript dibawah ini tepat diatas kode
</head>

 

<script type='text/javascript'>

//<![CDATA[

function extractPageName(hrefString)

{

var arr = hrefString.split('/');

return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() +
arr[arr.length-1].toLowerCase();

}

function setActiveMenu(arr, crtPage)

{

for (var i=0; i<arr.length; i++)

{

if(extractPageName(arr[i].href) == crtPage)

{

if (arr[i].parentNode.tagName != "DIV")

{

arr[i].className = "current";

arr[i].parentNode.className = "current";

}

}

}

}

function setPage()

{

hrefString = document.location.href ? document.location.href : document.location;



if (document.getElementById("nav")!=null)

setActiveMenu(document.getElementById("nav").getElementsByTagName("a"),
extractPageName(hrefString));

}

//]]>

</script>

 

3. Kemudian silahkan cari kode dibawah ini dalam barisan kode pada halaman
Edit HTML

 

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

</b:section>

</div>

 

Lalu letakan kode dibawah ini tepat diatas kode diatas.

 

<div id='nav'>

<ul>

<li><a href='/'>HOME</a></li>

<li><a href='#'>FAQ'S</a></li>

<li><a href='#'>HELP US</a></li>

<li><a href='#'>CONTACT</a></li>

</ul>

<script language='javascript'>setPage()</script>

</div>

 

Agar Efek Current Page / Menu bisa bekerja, rekan harus mengganti tanda
# diatas dengan alamat url post yang aktif.

 

Untuk membuat dan mengedit tampilan menu jauh lebih cantik dari contoh menu diatas
rekan sebaiknya mau tidak mau harus banyak mempelajari pengkodean HTML, CSS dan
Javascript.

 

Selamat mencoba :)

Cara Membuat Sub Domain CO.CC

Penulis: Azhar Fahrurazi | henpina.co.cc

Mungkin sudah banyak oran-orang yang mengetahui trick ini, sampai-sampai orang
yang akan membacanya-pun enggan membaca Artikel tersebut, tapi, yang mereka
ajarkan adalah menggunakan
dnspark.net yang ada masa expired atau massa berlakunya, meskipun suangat
lama, tapi, sewaktu-waktu kita pastinya akan merasa tidak nyaman bukan?

Nah, disini saya ingin memperlihatkan kepada anda bagaimana caranya membuat
Sub-Domain langsung didalam Co.cc secara realive, gak percaya ? Simak Gan (
KasKus langue mode : On)

1. Masuk kedalam co.cc dengan Account anda masing-masing di

https://www.co.cc/log_in_out/login.php

2. Setelah itu, anda akan disuguhkan dengan sebuah Form yang berisikan 4
alamat domain yang sudah anda buat ( Apabila anda berhasil Login ).

3. Pilih domain yang akan anda jadikan Sub-Domain, disini dan didalam contoh
ini, saya akan memakai proxyesterday.co.cc

4. Klik Setup

5. Setelah itu, anda akan disuguhkan Form Setup

6. Klik zone record

7. Didalam Host, isikan apa yang ingin anda jadikan Sub domainnya, misalkan
oom

8. Dan otomatis, domain yang akan keluar adalah
oom.aktifiskaskus.co.cc

9. Didalam Value, isikan ghs.google.com

10. Klik Setup

11. Berhasil !!!!!

 

Lalu, apa yang harus kita lakukan selanjutnya?

 

Setup Sub-Domain didalam
Platform kita sendiri, disini saya menggunakan blogspot.com

 

1. Login kedalam Account Platform anda ( Didalam contoh ini saya menggunakan
Blogspot )

2. Setelah berhasil, masuk kedalam menu Pengaturan → Publikasikan dan
disana yang harus anda pilih adalah Domain Ubah Suaian

3. Kemudian pilih Beralih ke pengaturan lanjut

4. Masukkan Sub Domain yang sudah anda masukkan dan Setup tadi, yaitu
oom.aktifiskaskus.co.cc

5. Masukkan Capcay ( Verifikasi Kata )

6. Klik Simpan Setelan

7. Berhasil !!!!!!!

8. Kemudian klik Lihat Blog

Selamat, Sub-Domain
oom.aktifiskaskus.co.cc berhasil dibuat !

Installasi Twitter @Anywhere Pada Kotak Komentar

Penulis: ArdianZzZ | Ardianzzz.blogspot.com

Kotak komentar adalah sarana diskusi yang paling efektif. Atau paling tidak,
kotak komentar adalah salah satu tempat untuk sekedar saling sapa dan
berinteraksi. Karena pada engine blogger tidak terdapat fasilitas untuk reply
comment, kegiatan bertegur-sapa biasanya dilakukan dengan meniru Facebook atau
Twitter. Yaitu dengan menambahkan simbol “At”(@) pada awal nama. Misalnya saya
ingin membalas komentar o-om, maka saya menambahkan @oomdotcom
pada awal kalimat. Sebagai tanda bahwa tanggapan tersebut saya tujukan untuk o-om.

Kita dapat menambahkan interaktivitas kotak komentar dengan menggunakan plugn
Twitter @Anywhere. Dimana setiap kata yang diawali dengan simbol “At”(@) dapat
diconvert secara otomatis menjadi link yang menuju akun twitter yang dituju.
Sangat menarik bukan, karena dapat menambah suasana kotak komentar menjadi lebih
hidup dan interaktif.

Untuk lebih jelas, dapat dilihat pada demo page
disini.

Berikut ini adalah langkah-langkah installasi Twitter @Anywhere:

1. Masuk di @Anywhere

Sebelumnya, anda harus memiliki akun twitter terlebih dahulu. Kemudian
kunjungi
http://dev.twitter.com/anywhere

2. Daftarkan Aplikasi

Isikan segala informasi yang dibutuhkan. (Hal ini sangat mudah dan tidak
perlu penjelasan lebih)

 

3. Dapatkan API key.

 

4. Installasi



Setelah mengetahui API key, hal yang perlu dilakukan adalah dengan menambahkan
JavaScript berikut ini sebelum </head>

 

<script src="http://platform.twitter.com/anywhere.js?id=APIKey"
type="text/javascript"></script>

 

Gantilah APIKey dengan API
Key anda.

 

Beberapa fitur yang dapat digunakan adalah:

 

a. LinkifyUser

Script akan mengubah semua konten yang diawali dengan “at” simbol menjadi
link akun twitter.

 

b. Hovercards

Membuat link memunculkan tooltip yang berisi informasi tentang akun twitter.

 

Untuk melakukannya letakkan javascript berikut ini:

 

<script>

twttr.anywhere(function(twitter) {

twitter(&quot;.comment-body&quot;).linkifyUsers();

twitter.hovercards();

});

</script>

 

Ganti huruf yang berwarna merah dengan class yang sesuai. Jika anda menggunakan
Basic Minima, maka kotak komentar memiliki class .comment-body. Jika tidak yakin
dan anda menginginkan semua konten dalam body diconvert menjadi link maka
gantilah dengan body.

 

5. Kesimpulan

Cara ini sangat mudah dilakukan dan cukup efektif untk menambah
interaktivitas pada kotak komentar. Tetapi yang perlu diperhatikan adalah, jika
kita menuliskan username yang salah maka link yang dihasilkan menjadi tidak
relevan. Misalnya saya menuliskan @oomdotcom yang
menghasilkan link menuju http://twitter.com/oomdotcom.
Tetapi jika saya menuliskan @o-om, maka link yang dihasilkan adalah
http://twitter.com/o-om yang berarti salah sasaran.





Selain kedua fitur di atas, terdapat jga fitur-fitur seperti

• Follobutton


• Tweet Box


• Twitter Connenct

Untuk lebih jelasnya tentang cara penggunaannya dapat mengunjungi:

http://net.tutsplus.com

 

Profile Penulis:


ArdianZzZ adalah Seorang blogger biasa tetapi bukan blogger yang biasa-biasa saja. Sangat antusias dengan webdesain terutama pada Typography, CSS dan JavaScript.

Membuat "Bubble Tool Tips" 100% menggunakan CSS

Penulis: Eldo A Pradana | dindingcoret.com

Bubble Tool Tips ini berguna sekali untuk memberikan informasi tentang sebuah link (bisa link refferal supaya banyak orang yang ikutan). Jika digerakkan diatas link (hover) maka secara otomatis bubble tool tips akan keluar dengan segala informasi yang ada yang dituliskan.

Biasanya untuk membuat balon tip ini sebagian orang memanggilnya dengan javascript yang akan membebani blog dengan size yang sangat besar. Nah ini ada trik yang menggunakan CSS murni sebagai pemanggilan codenya.

Untuk lihat live previewnya silahkan klik aja link ini .

 

Penerapan trik ini pake CSS, dan ini dia codenya:

/*---------- balon tips -----------*/

a.bt{

position:relative;

z-index:24;

color:#3CA3FF;

font-weight:bold;

text-decoration:none;

}



a.bt span{ display: none; }



/*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/

a.bt:hover{ z-index:25; color: #aaaaff; background:;}



a.bt:hover span.balontips{

display:block;

position:absolute;

top:0px; left:0;

padding: 15px 0 0 0;

width:200px;

color: #993300;

text-align: center;

filter: alpha(opacity:90);

KHTMLOpacity: 0.90;

MozOpacity: 0.90;

opacity: 0.90;

}



a.bt:hover span.atas{

display: block;

padding: 30px 8px 0;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmg_aETfHD0RZrkS6R2hxkCbfEsVJ5wWi1dTjBW3ese_878zeknbZrWt28ONRE_gD7IgLDV8siYoboU7qHqXwVfRXMfq6Zm4VGmcShnAXBFgx4Uo_oK3SGRRcsUMYI28kjXXcB2M-CpgY/)
no-repeat top;

}



a.bt:hover span.tengah{

display: block;

padding: 0 8px;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_wSIMYX0JAuFl_aNraRvbCLVhWExRzJWCcLL6EWA-H9gI_UJO_WnAGStJJpVi2BXnsCkP8-GG7Vz6kXoMBkKkdqizpyMGEkH6yGEFoToUJgPoYWKUzSTzDNkmaJL6aXvYyq5d7ZvN6Xw/)
repeat bottom;

}



a.bt:hover span.bawah{

display: block;

padding:3px 8px 10px;

color: #548912;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmg_aETfHD0RZrkS6R2hxkCbfEsVJ5wWi1dTjBW3ese_878zeknbZrWt28ONRE_gD7IgLDV8siYoboU7qHqXwVfRXMfq6Zm4VGmcShnAXBFgx4Uo_oK3SGRRcsUMYI28kjXXcB2M-CpgY/)
no-repeat bottom;

}



/*---------- balon tips END-----------*/

 

Untuk penggunaannya:

 

1. Link yang udah dibuat di kasih deklarasi class="bt".

Link dalam code HTML bentuknya seperti ini <a href="http://dindingcoret.com"></a>
Setelah diberi deklarasi akan jadi seperti ini : <a class="bt" href="http://dindingcoret.com"></a>

 

2. Deklarasikan balontips. Panggil code balontips dengan menuliskan
<span="balontips"></span>. Masukkan diantara code link.

 

3. Panggil gambar atas dengan cara ketik <span="atas"></span>. Masukkan diantara kode "balontips".

 

4. Panggil gambar tengah dengan cara ketik <span="tengah"></span>. Masukkan diantara kode "balontips" dibawah code "atas". Ditempat inilah sobat menuliskan komentar sobat.

 

5. Panggil gambar bawah dengan cara ketik <span="bawah"></span>. Masukkan diantara kode "balontips" dibawah code "tengah".

 

Contoh penulisan code bisa dilihat disini:

<a class="bt" href="URL
SOBAT">

kata-kata terserah deh..

<span class="balontips">

<span class="atas">

</span>

<span class="tengah">

Tempat sobat tulis info tentang link dan akan keluar sebagai bentuk balon

</span>

<span class="bawah">

</span>

</span>

</a>

Thumbnail Related Posts with Marquee (Berjalan)

Penulis: G E O R G E O U Z | serba-seru.blogspot.com

Bagi anda yang sudah menggunakan atau ingin menggunakan Thumbnail Related
Posts (artikel terkait bergambar), tentu akan lebih tertarik menggunakannya,
karen tampilannya cukup menarik dengan adanya gambar, namun ada sedikit
kekurangan dari tool yang satu ini, yaitu memakan banyak tempat di halaman blog.
Maka dari itu, kebanyakan blog yang saya kunjungi meminimalkan jumlah related
post tersebut, apalagi dengan ukuran halaman posting yang sempit. Maka dari itu
untuk memaksimalkannya yaitu dengan alternatif marquee(berjalan).

Nah, untuk contoh Thumbnail Related Posting menggunakan metode Marquee ini bisa
sobat lihat

disini.

Pada postingan sebelumnya sudah dipaparkan cara membuat Related Posts +
Thumbnail, sobat bisa menerapkan terlebih dahulu tutorial Thumbnail Related
Postsnya

disini, namun cukup terapkan Code CSSnya saja (Script code yg pertama)

Untuk membuat Thumbnail Related Posts ini agar bisa ditampilkan dengan jumlah
yang banyak yaitu dengan metode Marquee, ada sedikit perubahan yang akan
dilakukan pada script code yang kedua.

 

Nah, untuk memulainya :

1. Silakan lihat cara membuat Thumbnail related posts

disini (Cukup terapkan code CSSnya saja/ code yang pertama)

2. Setelah sobat terapkan poin pertama diatas, sekarang silakan cari code ini :

<div class='post-footer-line post-footer-line-1'>

atau

<p class='post-footer-line post-footer-line-1'>





3. Jika sudah ketemu salah satu code diatas, letakkan code dibawah ini setelah
salah satu code diatas :

<!-- Marquee Serbablog Related Posts with Thumbnails Code
Start-->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != &quot;true&quot;'>

</b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;'
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=&quot;<data:post.url/>&quot;;

var maxresults=10;

var relatedpoststitle=&quot;&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script></marquee>

</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-posting-with-marquee.html'
style='display:none;'>Thumbnail Related Post</a>

<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger
tutorials</a>

</b:if>

</b:if>

<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->





- Untuk menampilkan jumlah postingan, sobat bisa merubah code yang berwarna
merah

- Untuk mengganti title, sobat bisa merubah code yang berwarna biru

4. Simpan dan lihat hasilnya

 

Selamat berkreasi, Semoga bermanfaat

Thanx buat O-Om yang sudah menampilkan artikel ini, sukses buat semuanya

Penasaran siapa dibalik penulis artikel ini? G E O R G E O U Z