Pasang Google Translator Pada Blog


google translateSatu lagi persembahan dari Google. Kalau sebelumnya saya memperkenalkan program translator online untuk menterjemah artikel maupun dokumen pribadi anda.

Sekarang saya akan memperkenalkan program translator untuk menterjemah isi dari blog anda.

Google Translator merupakan sebuah tool yang dibuat oleh google untuk mempermudah pengunjung dari negara lain membaca dan mengerti isi dari konten blog anda.

Translator ini sangat berguna sekali jika ada pengunjung dari negara lain yang datang ke blog Anda. Mereka bisa menggunakan tool ini untuk menterjemahkan kebahasa yang mereka inginkan. Sehingga isi dari blog Anda juga bisa dinikmati oleh pengunjung dari negara lain.

Ternyata Google memang paling ngerti dengan kebutuhan kita. Makin cinta love deh ama Google sengihnampakgigi. Tidak tanggung-tanggung tool ini mampu menterjemah hingga 35 jenis bahasa. Wow.. Sebuah angka yang fantastik mengingat tidak mudah untuk menterjemah 1 bahasa apalagi sampai 35 bahasa.

Namun ada satu kelemahan dari translator ini yaitu tidak bisa menterjemah bahasa gaul, seperti: elo, gue, bro, sobat. Jadi jika Anda ingin memasangnya sebaiknya gunakanlah bahasa yang baku untuk menulis artikel Anda. Supaya isinya tidak kacau nantinya jika diterjemahkan.

Jika Anda tertarik untuk mencobanya. Silahkan ikuti cara berikut untuk memasangnya.

1. Buka situs http://translate.google.com/translate_tools?hl=en

2. Pilih bahasa yang digunakan dalam blog/ website Anda. Tunggu beberapa saat hingga proses loading page selesai.

3. Copy kode HTML yang ada dalam kotak.

4. Login ke blog Anda. Masuk ke menu Layout -> Page Elements

5. Klik Add a Gadget. Klik tombol + pada HTML/ Javascript.

6. Pastekan kodenya kedalam kotak lalu klik Save.

7. Selesai. Klik View Blog untuk melihat tampilannya.

Selamat Mencoba.

Cara Mengatasi Masalah Pada Kode Read More

Beberapa hari yang lalu saya pernah memposting tentang cara menambahkan kode read more pada blogger. Dan cara tersebut yang saya gunakan pada blog saya. Namun setelah saya coba ternyata ada kelemahan dari metode ini dimana setiap kali saya mau memposting artikel. Saya harus memindahkan kode dibawah potongan artikel yang mau ditampilkan dan memindahkan kode di akhir artikel.

Jika saya lupa untuk memindahkan kode tersebut setelah memposting maka link read morenya akan muncul pada akhir artikel. Dan meskipun posisi kode read more sudah diperbaiki, link read morenya tetap muncul pada akhir artikel.

Masalah ini timbul dikarenakan ada kode atau yang dobel pada kotak posting Edit HTML. Untuk mengatasi masalah ini saya harus menghapus kode tersebut hingga tinggal satu kode dan pada kotak posting.

Cara ini sangat merepotkan karena biasanya kode ini akan menjadi sangat banyak. Sehingga sangat memakan waktu. Bagi anda yang juga mengalami masalah ini bisa mengatasinya dengan cara berikut:

1. Pada menu Blogger. Klik Settings lalu klik Formatting.
2. Hapus kode dan pada kotak "post template" lalu klik Save Settings.
3. Selesai.

Sekarang Anda tidak perlu khawatir lagi jika Anda lupa untuk mengatur posisi kode read morenya pada kotak posting Edit HTML saat memposting. Anda cukup mengetikkan sendiri kode dibawah teks yang mau ditampilkan dan kode pada akhir artikel.

Catatan:
Cara ini hanya sebagai tambahan saja dari saya. Jika cara ini lebih merepotkan daripada cara sebelumnya silahkan gunakan cara yang awal saja.

Semoga postingan ini bisa bermanfaat bagi teman-teman yang mempunyai masalah seperti saya.

Cara Membuat Widged Related Post V2

Kemarin ada seorang sobat yang bertanya kepada saya, 'bagaimana cara membuat widget related posts seperti yang saya gunakan pada blog ini'. Sebenarnya cara membuat widget related posts sudah pernah saya posting di blog ini, hanya saja memang versi related posts yang saya gunakan sekarang ini berbeda dengan versi related posts yang sudah pernah posting di blog ini. Oleh karena itu, pada postingan ini saya akan menjelaskan cara membuat related posts seperti yang saya gunakan pada blog ini atau yang saya beri nama related posts v2.

Mungkin anda akan bertanya apa perbedaan antara related posts v1 dan v2?
Kalau pada related posts v1, related posts akan ditampilkan bersamaan dengan judul labelnya dan dikelompokan berdasarkan labelnya masing-masing. Sebagai contoh, perhatikan screenshot dibawah ini.


Sedangkan versi 2, related posts atau artikel yang berhubungan hanya menampilkan judul posting saja (tanpa judul label) dan semua artikel yang berhubungan digabung menjadi satu sehingga mirip dengan widget related posts milik Wordpress. Contoh tampilannya seperti ini:

widget related posts
Bagi anda yang ingin memasang related posts v2 atau related posts ala wordpress silahkan ikuti langkah-langkah dibawah ini:

1. Pada halaman dashboard blogger, buka menu Design -> Edit HTML

2. Beri centang pada "Expand Widget Templates"

3. Cari kode ]]></b:skin>

4. Letakkan kode css berikut diatasnya

#related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; } #related-posts a{ color:#4b4b4b; }
#related-posts a:hover{
color:#ca1717; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }
5. Selanjutnya cari </head>

6. Letakkan kode javascript berikut diatasnya

<script src='http://hermanblog.googlecode.com/files/Related-posts.js' type='text/javascript'/>
7. Kemudian cari <p><data:post.body/></p> atau <data:post.body/>

8. Jika ada dua kode yang sama, pilih yang pertama

9. Letakkan kode berikut dibawahnya

<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<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&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
Keterangan:
Teks yang dicetak tebal adalah judul widget dan angka 5 adalah jumlah postingan yang muncul dalam related posts. Silahkan ganti sesuai keinginan

10. Jika sudah, simpan template anda dan lihat hasilnya. Kalau berhasil jangan lupa pencet tombol like dibawah

Cara Mengecek Blog Dofollow atau Nofollow di Berbagai Browser

Jika anda mencari informasi tentang tips meningkatkan pagerank blog biasanya salah satu tips yang disarankan adalah berkomentar di blog dofollow. Memang benar berkomentar di blog dofollow bisa meningkatkan google pagerank karena blog dofollow adalah blog yang telah menghilangkan atau melepaskan atribut nofollow dari form komentarnya sehingga jika ada pemilik blog yang meninggalkan komentar di blog tersebut, maka ia akan mendapat backlink dari empunya blog dengan catatan si pemilik blog harus berkomentar sebagai name/URL atau mencantumkan link blognya disana.

Bagi anda yang belum tahu apa itu Nofollow? Nofollow adalah atribut HTML yang berfungsi untuk memberi perintah kepada search engine untuk tidak menelusuri suatu link pada halaman blog sehingga google search engine tidak akan menganggap link tersebut sebagai backlink. Cara ini dibuat pertama kali oleh Matt cutts dan Jason Shellen pada tahun 2005 untuk mencegah pemilik blog melakukan spam dengan berkommentar sebanyak-banyaknya di blog ber PR tinggi.

Contoh kode link nofollow:

<a href="http://www.contoh.com/" rel="nofollow">bogger tips n tutorial</a>
Secara default, blog blogspot menggunakan sistem nofollow pada form komentarnya. Namun tidak sedikit pula blogger yang menerapkan sistem dofollow dalam comment formnya.

Untuk menemukan blog-blog mana saja yang menggunakan sistem dofollow, anda bisa googling dengan kata kunci 'dofollow blog list' atau 'daftar blog dofollow'. Ada banyak situs yang membuat daftar blog dofollow di situsnya.

Nah sekarang pertanyaannya adalah apakah blog tersebut masih menganut sistem dofollow? Sebab tidak sedikit blog yang awalnya memang bersifat dofollow tapi sekarang sudah tidak lagi. Untuk mengetahuinya, gunakan cara berikut:

Browser Firefox
Ada 2 cara yang bisa digunakan:

1. Melihat properties linknya
Ini adalah cara klasik yang sering digunakan blogger atau webmaster untuk mengecek status link. Caranya, klik kanan pada link yang berada pada kolom komentar lalu pilih Properties jika muncul tulisan relation: nofollow berarti blog tersebut bersifat nofollow.



2. Menggunakan addons Firefox
Ada banyak addons Firefox yang mampu mendeteksi link nofollow, salah satunya adalah SearchStatus. Dengan addons ini anda bisa melihat apakah suatu link dofollow atau nofollow dalam waktu yang bersamaan. sehingga lebih cepat. Anda bisa instal addonsnya disini. Setelah instal, aktifkan fitur pendeteksi nofollow dengan cara klik kanan pada logo SearchStatus yang terletak dipojok kanan bawah layar lalu pilih Highlight Nofollow Links. (Jika anda ingin menonaktifkan fitur ini cukup hilangkan centang pada 'Highlight Nofollow Links').


Jika link dihighlight merah berarti blog tersebut bersifat nofollow.



Browser Google Chrome
Instal Chrome SEO disini. Setelah itu, aktifkan fitur pendeteksi nofollow dengan cara klik logo Chrome SEO yang terletak di pojok kanan atas. kemudian tunggu beberapa saat hingga menu Chrome SEO muncul selanjutnya klik link Show Nofollow.



Browser IE
Untuk pengguna IE, caranya cukup mudah anda tinggal copas kode dibawah ini ke address bar pada halaman dimana anda ingin melakukan pengecekan.

javascript: var anchors;anchors = document.getElementsByTagName("a");var anchorIndex;for(anchorIndex = 0;anchorIndex < anchors.length;anchorIndex++) { if(anchors[anchorIndex].getAttribute("rel") && anchors[anchorIndex].getAttribute("rel")=="nofollow") anchors[anchorIndex].style.backgroundColor="red";} void(0);

Jika blog tersebut bersifat nofollow maka link akan dihighlight merah seperti gambar berikut.



Browser Safari
Caranya hampir sama dengan browser IE yaitu tinggal copas kode ke address bar pada halaman dimana anda ingin melakukan pengecekan.

javascript:var%20a=document.getElementsByTagName('a');for(var%20z=0;z%3Ca.length;%20z++){if(a[z].rel==’nofollow’){a[z].style.border=’1px%20solid%20%23F00';}}

Semoga bermanfaat..!

Cara Mengimport Feed Blog ke Digg V4

Kabar baik buat teman-teman yang menggunakan layanan Digg untuk mempromosi artikel blog anda. Kini anda tidak perlu lagi repot untuk mensubmit artikel anda satu per satu satu ke Digg karena melaui fitur baru Digg V4 yaitu Import feed, sekarang anda dapat mengimport feed blog anda ke Digg sehingga setiap kali anda memposting artikel baru, artikel tersebut akan secara otomatis dikirim ke Digg tanpa campur tangan dari kita.

Dengan adanya fitur ini, tentu akan mempermudah pemilik blog yang ingin mempromosikan artikel blognya di Digg.

Bagaimana Cara Mengimport Feed Blog ke Digg?

1. Login ke akun Digg anda.
2. Jika diminta untuk follow digger lain dan invite friend, abaikan saja dengan klik Next Step
3. Setelah masuk ke halaman akun anda. Pilih Setting -> Import Feeds
4. kemudian anda akan dibawa kehalaman seperti berikut.

digg import feeds
5. Isi alamat feed blog anda.Contoh http://namabloganda.com/feeds/posts/default atau http://feeds.feedburner.com/idanda jika anda menggunakan layanan feed dari feedburner dan pilih topik yang sesuai lalu klik tombol Add Feed

6. Setelah itu, anda akan diminta untuk memverifikasi blog anda. Copy kode yang diberikan dan letakkan diatas postingan terbaru anda lalu klik Veriry Now. (Anda bisa menghapus kodenya setelah proses verifikasi selesai). Jika berhasil maka akan muncul status verified seperti gambar dibawah ini.

digg import feed verified
7. Dan semua artikel anda akan muncul di halaman 'My News' dalam waktu kurang dari 24 jam. Berikut adalah contoh tampilan artkel blog saya yang muncul dihalaman Digg setelah melakukan import feeds.



Selamat mensubmit artikel blog anda ke Digg... Semoga bermanfaat

Membuat Navigasi Breadcrumb di Blogger

Tidak terasa sudah satu minggu saya tidak update blog ini. Hal ini dikarenakan saya sedang sibuk menata ulang konten di blog ini dan menambah beberapa tool ke dalamnya. Salah satunya adalah navigasi Breadcrumb.

Breadcrumb merupakan salah satu plugin milik Wordpress yang berfungsi untuk memudahkan pembaca dalam menelusuri halaman blog. Jadi ibarat peta atau sitemap dalam blog.

Plugin ini biasanya diletakkan diatas halaman posting. Contoh tampilannya seperti ini:
navigasi breadcrumb
Selain dapat memudahkan pembaca dalam mengetahui lokasi halaman yang sedang ditelusuri, plugin ini juga dapat mengoptimasi halaman blog di search engine (SEO). Bahkan dianjurkan langsung oleh Google lho. Tidak percaya? Berikut adalah kutipan yang saya ambil dari ebook 'Google Search Engine Optimization Starter Guide'.


Ingin mengetahui lebih banyak teknik-teknik SEO dalam ebook Google Search Engine Optimization Starter Guide? Silahkan baca disini.

Ok saya rasa cukup penjelasannya, untuk pengguna wordpress anda bisa download plugin Breadcrumb disini. Sedangkan untuk pengguna blogger ikuti langkah-langkah berikut untuk memasang navigasi breadcrumb:

1. Buka Blogger. Masuk ke menu Design -> Edit HTML

2. Beri centang pada 'Expand Widget Templates'.

3. Setelah itu, cari kode <b:if cond='data:post.title'>

4. Letakkan kode berikut dibawah <b:if cond='data:post.title'>

<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumb'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</div>
</b:if>
5. Selanjutnya cari kode ]]></b:skin>

6. Letakkan kode css berikut diatasnya

.breadcrumb {
padding:5px 5px 5px 0px;
margin: 0px 0px 10px 0px;
font-size:90%;
line-height: 1.2em;
border-bottom:3px double #e6e4e3;
}
7. Jika sudah simpan template anda dan lihat hasilnya.

Semoga bermanfaat :)

Cara Memasang Tombol Facebook Share Dalam Postingan Blog

tombol facebook shareSelain facebook like yang sudah pernah saya bahas sebelumnya, Facebook juga memperkenalkan widget lain yang cukup terkenal yaitu Facebook share.

Sesuai namanya, widget ini berguna untuk membagikan sebuah halaman situs ke profil facebook.

Lalu apa bedanya antara Facebook like dan Facebook share?


Secara umum kedua widget tersebut sama-sama berguna untuk membagikan sebuah halaman situs ke Facebook. Sebagai contoh anda menyukai postingan ini maka anda bisa membagikan halaman ini ke teman facebook anda dengan menekan tombol facebook like atau facebook share.

Nah yang berbeda adalah cara penyajiannya. Jika anda membagikan melalui facebook like maka halaman ini akan muncul pada menu 'recent activity' sedangkan dengan facebook share halaman akan muncul pada menu 'News Feed'.

Agar lebih jelas perhatikan screenshot berikut:

Contoh tampilan posting yang dibagikan melalui facebook like

facebook like
Contoh tampilan posting yang dibagikan melalui facebook share

facebook share
Ok... sudah jelas ya perbedaannya. Sekarang mari kita pelajari cara memasang tombol facebook share dalam postingan blog. Untuk cara memasang tombol facebook like bisa anda baca disini.

1. Buka blogger. Masuk ke menu Design->Edit HTML

2. Beri centang pada 'Expand widget templates'

3. Cari kode <data:post.body/>

4. Kalau anda menemukan dua kode <data:post.body/> maka pilih yang pertama

5. Letakkan salah satu kode tombol facebook share berikut ini dibawah kode <data:post.body/> jika anda ingin memasang tombol fshare dibawah postingan atau letakkan diatas <data:post.body/> jika anda ingin memasang diatas postingan.

Tombol Fshare tanpa counter

tombol fshare tanpa counter

Kode:
<a name="fb_share" type="button" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>


Tombol Fshare dengan counter diatas

tombol fshare dengan counter diatas




Kode:
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

Tombol Fshare dengan counter disamping

tombol fshare dengan counter disamping

Kode:
<a name="fb_share" type="button_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>

6. Jika sudah simpan template anda dan lihat hasilnya.

Cara Membuat Efek Gradiasi Dengan CSS3

Sebelumnya saya sudah sempat menyinggung tentang salah satu fitur dari CSS3 yaitu text-shadow yang berguna untuk membuat efek bayangan pada teks. Nah kali ini saya akan menjelaskan tentang fitur lain dari CSS3 yaitu efek gradiasi.

Pada umumnya untuk membuat efek gradiasi, orang akan menggunakan program image editing seperti Photoshop, Coreldraw, dan lain-lain untuk menghasilkan gambar gradiasi. Kelemahan dari cara ini tentu saja dapat memperlambat loading blog. Apalagi gambar yang digunakan berukuran besar bisa-bisa pengunjung sudah kabur sebelum blog anda berhasil kebuka.

Nah untuk mengatasi hal ini anda dapat menggunakan fitur gradiasi dari CSS3. Dengan menggunakan fitur ini anda dapat membuat efek gradiasi hanya dengan menambahkan kode css pada template blog anda sehingga tidak memperlambat loading blog.

Fitur ini sudah mendukung sebagian besar browser seperti IE, Safari, Firefox (versi 3.6 keatas), dan Google Chrome.

Berikut adalah kode CSS3 untuk membuat efek gradiasi:

background: #ffa45a;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);

Keterangan:

background: #ffa45a;
merupakan warna background yang akan muncul apabila browser tidak mendukung

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d');
merupakan kode efek gradiasi untuk browser IE. StartColorstr='#ffa45a' adalah warna awal gradiasi dan endColorstr='#ba5b0d' adalah warna akhir gradiasi

background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d));
merupakan kode efek gradiasi untuk browser webkit seperti Safari, Google Chrome, dll. Linear adalah tipe gradiasi. Anda dapat mengganti dengan Radial, Angle, dll. From(#ffa45a) adalah warna awal gradiasi dan to(#ba5b0d) adalah warna akhir gradiasi.

background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
merupakan kode efek gradiasi untuk browser Firefox v3.6 keatas. Linear adalah tipe gradiasi anda mengganti dengan Radial, Angle, dll. #ffa45a adalah warna awal gradiasi dan #ba5b0d adalah warna akhir gradiasi.


Cara peletakan kode gradiasi di blog
Ganti property background pada template blog anda yang ingin dipasang efek gradiasi

Sebagai contoh anda ingin memasang efek gradiasi di bagian menu navigasi maka cari kode css untuk menu navigasi di template blog anda. Contohnya:

#nav{
background: #403f3f url(http://lh3.ggpht.com/15FopxVONSo/nav-bg.gif) left repeat-x;
height:35px;
margin-left:10px;
margin-right:10px;
}
Ganti teks berwarna merah dengan kode efek gradiasi sehingga hasilnya menjadi seperti ini.

#nav{
background: #ffa45a; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa45a', endColorstr='#ba5b0d'); background: -webkit-gradient(linear, left top, left bottom, from(#ffa45a), to(#ba5b0d)); background: -moz-linear-gradient(top, #ffa45a, #ba5b0d);
height:35px;
margin-left:10px;
margin-right:10px;
}

Untuk mendapatkan efek gradiasi yang lebih bervariasi sebenarnya anda juga bisa menambahkan property 'color-stop' untuk mengatur scale warna seperti yang terdapat pada Photoshop Tapi karena pengaturannya agak ribet maka tidak saya jelaskan disini.

Sebagai penggantinya anda bisa membuat efek gradiasi yang lebih bervariasi dengan menggunakan CSS3 Gradient Generator yang beralamat di http://gradients.glrzad.com/

css3 gradient generator

Selamat berkreasi. Semoga bermanfaat

10 Gadget Menarik dari Google Friend Connect

google friend connectSebagai pengguna blogger, anda tentu sudah tidak asing lagi dengan gadget Follower yang dapat ditemukan pada halaman blogger gadget.

Gadget ini merupakan salah satu gadget populer dari Google friend connect yang memungkinkan pengunjung untuk bergabung dan berlangganan blog kita.

Selain Follower sebenarnya masih banyak gadget Google friend connect lainnya yang tidak kalah bagus dan menariknya seperti Newsletter Subscription, Social bar, Screensaver, dan masih banyak lagi. Hanya saja gadget tersebut tidak ditambahkan pada halaman blogger gadget sehingga banyak pengguna blogger yang tidak mengetahui keberadaan mereka.

Agar lebih jelas berikut saya cantumkan 10 gadget yang menurut saya cukup menarik dari Google Friend Connect. Untuk melihat lebih banyak gadget-gadget lainnya, silahkan kunjungi http://google.com/friendconnect/

1. Social bar
Gadget berbentuk toolbar yang menampilkan opsi join site, isi komentar, jumlah follower, dan lain-lain.

social bar








2. Comments
Memungkinkan pembaca untuk komentar pada postingan atau link video kita

comments










3. Rating and reviews

Memperbolehkan pembaca memberi rating dan mereview konten pada blog kita.

rating and reviews









4. Newsletter subscription

Memperbolehkan pengunjung untuk berlangganan newsletter anda melalui email

newsletter subscription





5. Iphone

Gadget Follower dengan tampilan iPhone. Cocok untuk blog yang berhubungan gadgets.

iphone









6. Recent Visitor

Hampir sama dengan widget recent visitor milik Mybloglog. Hanya yang ini dilacak berdasarkan id Google

recent visitor








7. Screensaver
Memungkinkan anda untuk menampilkan screensaver di blog anda yang gambarnya diambil dari komunitas anda. Pengunjung dapat mengklik pada gambar member untuk menjadi temannya.

screensaver









8. Top 10 members
Menampilkan 10 top member di blog anda berdasarkan jumlah kunjungannya

top 10 members















9. Get Answer
Mirip dengan yahoo answer dimana pembaca dapat bertanya, menjawab pertanyaan dari member lain dan memberi voting terhadapt jawaban yang menurut mereka bagus

get answer










10. Cloud
Gadget follower versi cloud dimana nama follower akan berotasi saat disorot mouse. Mirip dengan label cloud.

cloud









Untuk cara pemasangannya sangat mudah, cukup klik link Get this gadget pada masing-masing gadget yang ingin anda pasang kemudian atur tampilan yang anda inginkan dan klik tombol Generate Code. Copas kodenya ke blog anda. Selesai.

Semoga informasi ini bermanfaat untuk anda.

Pasang Avatar di Kotak Komentar Blogger

avatar on blogger comment formBerkat fitur Show your face dari Blogger kini kotak komentar blogger sudah dapat menampilkan gambar atau foto dari pengunjung yang memberi komentar di blog.

Untuk menampilkan avatar, caranya sangat mudah. Anda cukup mengaktifkannya dengan masuk ke menu Setting -> Comments lalu pada bagian "Show profile images on comments" pilih YES. Beres..

Hanya saja cara ini hanya berlaku untuk template tertentu saja khususnya template yang disediakan oleh blogger dan hasilnya kurang optimal dimana avatar hanya muncul jika pengunjung memberi komentar dengan blogger id. Sedangkan yang berkomentar dengan openid atau anonymous, avatar tidak muncul.


Meskipun demikian, anda juga dapat memunculkannya dengan melakukan sedikit pengeditan pada kode template anda sehingga hasilnya menjadi seperti ini.

avatar on blogger comments

Untuk mengimplementasikannya:

1. Pertama-tama masuk ke menu Setting->Comments. Pilih lalu YES pada bagian "Show profile images" dan tekan Save.

2. Setelah itu, masuk ke menu Design-> Edit HTML

3. Beri centang pada "Expand Widget Templates". Agar lebih aman backup template anda.

4. Cari kode berikut:


<dl id='comments-block'>
5. Ganti kode tersebut dengan kode ini

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
6. Setelah itu cari kode berikut

<a expr:name='data:comment.anchorName'/>
7. Ganti kode tersebut dengan kode berikut ini

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>
8. Setelah itu tambahkan kode css berikut diatas ]]></b:skin>

#comments-block .avatar-image-container img {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1nFYiYTM57blLwmE9XyaUItDd2rAKGh89yNVZfrCL-faKAyn8GApsJgRLfXRGzD7TnM_hQ1XngFWz2cSJ78aJmjCgoBBWLG4WMP64DSF-4Hjl2CH6WZBtJzW7E0ChUfP7C4Y5UvgsnIFP/s1600/oavatar.jpg) no-repeat left top;
width:32px;
height:32px
}
Keterangan:
Teks yang berwarna merah merupakan alamat gambar untuk avatar anonymous. Sedangkan teks yang dicetak tebal merupakan ukuran avatar. Anda bisa ganti sesuai keinginan.

9. Kalu sudah simpan template anda. Selesai


Selamat mencoba. Semoga berhasil senyum

Google Code - Alternatif Hosting File Javascript di Google

project hosting on google codeBagi anda yang sedang mencari tempat hosting javascript yang handal dan terpercaya maka Google code adalah jawabannya. Google Code merupakan layanan hosting milik Google sehingga soal kredibilitas sudah tidak perlu diragukan lagi.

Melalui project hosting dari Google code, anda bisa menyimpan file Javascript, PHP, Ajax, Flash, CMS, dan lain-lain secara gratis di Google Code. Kapasitas yang diberikan tidak tanggung tanggung yakni 2GB dan unlimited bandwith sehingga anda tidak perlu khawatir bakal kehabisan bandwith :D

Sebenarnya layanan hosting yang mendukung file javascript sudah dihadirkan oleh Google melalui Google Sites. Hanya saja berdasarkan pengalaman pribadi, file javascript yang disimpan di Google sites tidak bekerja jika kita tidak sedang login di akun Google Sites.

Saya tidak tahu apakah anda juga mengalami masalah yang sama dengan Google sites jika iya maka Google Code bisa menjadi alternatifnya.

Berikut cara menyimpan file javascript di Google Code:

1. Pertama login ke akun Google anda kemudian kunjungi http://code.google.com/hosting/

2. Klik create a new project
3. isi data-data sesuai yang diminta lalu klik Create Project.



4. Pilih tab 'Download' dan klik New download

5. Klik Browse dan pilih file javascript yang ingin upload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.


6. Sekarang file javascript anda akan diupload ke Google code.

7. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) seperti contoh.

Membuat Efek Bayangan Pada Teks Dengan CSS3

Memberi efek bayangan pada gambar merupakan salah satu teknik yang sering digunakan oleh para designer grafis karena dapat membuat gambar terlihat lebih hidup dan menarik. Untuk membuat efek bayangan pada gambar mungkin sudah menjadi hal yang biasa karena dengan menggunakan software pengolah gambar seperti Photoshop atau Coreldraw. Anda dapat dengan mudah memberi efek bayangan pada gambar. Lalu bagaimana dengan teks?

Nah pada postingan ini saya akan menjelaskan cara membuat efek bayangan pada teks seperti yang dapat anda lihat pada judul postingan blog ini. Untuk membuat efek ini sangat mudah, anda tidak perlu memakai tool apapun hanya memberi sedikit sentuhan kode CSS3 pada template blog anda maka efek bayangan akan muncul di teks blog anda.

Agar lebih jelas silahkan ikuti langkah-langkah berikut:

Catatan:
Efek ini hanya mendukung browser Firefox, Google Chrome, Safari dan Opera sedangkan IE efek ini tidak akan tampak. Sehingga bagi anda yang menggunakan browser IE silahkan diganti dulu dengan browser lain yang saya sebutkan diatas sebelum mengikuti tutorial ini.


1. Pada menu dashboard blogger. Klik menu Design -> Edit HTML

2. Letakkan kode text-shadow: 2px 2px 2px #ccc; dimana anda ingin memberi efek bayangan pada teks

3. Sebagai contoh anda ingin memberi efek bayangan pada judul postingan maka cari kode seperti ini.

.entrytitle h2{
margin:0px;
font-weight:bold;
font-size:25px;
line-height:100%;
padding:0px;
margin-bottom:5px
}
Setiap template tentu memiliki kode yang berbeda-beda. Jika anda tidak menemukan kode css seperti diatas maka cari kode di template anda yang mewakili judul postingan kemudian letakkan text-shadow property seperti berikut:

.entrytitle h2{
margin:0px;
font-weight:bold;
font-size:25px;
text-shadow: 2px 2px 2px #ccc;
line-height:100%;
padding:0px;
margin-bottom:5px
}
Keterangan text shadow property


4. Silahkan diatur nilai propertynya untuk mendapat efek shadow yang anda inginkan. Setelah itu simpan template anda.


Efek ini juga bisa ditambahkan pada teks di bagian sidebar, form komentar, footer, dan lain-lain. Selamat mencoba.

Jika ada pertanyaan silahkan sampaikan melalui kolom komentar saya akan berusaha untuk menjawab.

Backlink Gratis Dari Situs Direktori PR5 - PR9

backlinkBacklink adalah satu-satunya unsur untuk meningkatkan pagerank blog. Sehingga jika anda ingin menaikkan page rank blog anda maka tidak ada cara lain selain mencari backlink sebanyak-banyaknya.

Tentu saja pagerank tidak semata-mata dipengaruhi oleh kuantitas backlink saja namun juga kualitas dari backlink tersebut.

Sebagai contoh situs anda mendapat 1 backlink dari situs PR5 maka hasilnya akan lebih baik dibandingkan 10 backlink dari stus PR3 dan seterusnya.

Nah berikut saya akan menyampaikan sebuah web direktori yang memuat lebih dari 100 situs direktori PR5 hingga PR9. Yang menarik disini adalah sebagian besar dari situs direktori tersebut memperbolehkan anda untuk mensubmit blog anda secara gratis disitusnya tanpa memberi link balik artinya link yang anda dapat bersifat one way link.

Seperti yang kita ketahui, one way link memiliki kualitas yang lebih baik dibanding two way link sehingga dapat memperkokoh posisi situs kita di halaman search engine.

Bagi anda yang tertarik untuk mendapatkan backlink gratis dari situs direktori PR5 hingga PR9 langsung saja berkunjung ke http://www.greatdirectories.org/free.html. Setelah itu submit satu per satu situs anda ke situs direktori tersebut.

Selamat mengumpulkan backlink senyum

Memasang Opsi Replay di Form Komentar Blogger

Pada postingan ini saya akan menunjukkan cara memasang opsi reply di form komentar blogger. Seperti yang kita ketahui, tool ini sangat berguna untuk mempermudah pemilik blog maupun pengunjung dalam membalas komentar.

form komentar
Kalau pada platform Wordpress tool ini sudah otomatis terpasang dalam form komentarnya. Lain halnya dengan platform blogger. Meskipun demikian, anda juga dapat memasang opsi reply di blog blogspot anda hanya dengan sedikit penambahan kode pada template blog anda.

Bagi anda yang ingin mengetahui bagaimana cara kerjanya, langsung saja praktek di blog ini karena saya sudah memasang opsi reply di form komentar.

Nah bagi anda yang tertarik untuk memasang opsi reply di form komentar blog anda. Berikut tutorialnya:

1. Login ke menu dashboard Blogger. Buka menu Design -> Edit HTML

2. Beri centang pada 'Expand Widget Templates'

3. Cari kode

<data:commentPostedByMsg/>
atau

<data:comment.timestamp/>
4. Letakkan kode berikut diatasnya

<span class='comment-reply'><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=BloggerIdAnda&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0, location=0, statusbar=1, menubar=0, scrollbars=yes, width=400, height=450&quot;); return false;'>[Reply Comment]</a></span>

Ganti tulisan yang berwarna merah dengan id blog anda. Untuk mengetahui id blog anda klik menu Design lalu perhatikan digit angka pada address bar anda.


Jika anda ingin mengganti kata reply yang muncul dalam form komentar, edit tulisan yang berwarna hijau.

5. Kalau sudah simpan template anda dan lihat hasilnya.

Agar lebih menarik anda juga bisa mengganti tulisan reply dengan icon gambar. Caranya, ganti tulisan berwarna hijau dengan <img src='url-gambar'/>

Jangan lupa ganti url-gambar dengan alamat icon gambar anda. Misal: http://lh4.ggpht.com/_15FopxVONSo/TEF6-vtUqHI/rcwCiaUc-Os/reply.png

Sebagai contoh, berikut saya sediakan beberapa model icon reply. Kalau tertarik, silahkan upload icon gambar tersebut ke image hosting anda atau copy saja alamat gambar icon disamping untuk menggunakannya.


--> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk01crBLgTKLhRmdsMF-AeYRMVcNOGiJbD_T0ZqWUoIVe_3RCUCTdYRKVnsLLOvnuTRwaeQA1i3IZf_fb3aUyIQwjbgsLTMNjSyR3gWnNuByvLGlEubBC07_qdkf-NhJ-yvlsOmgfCNdfe/

--> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZvLCJwXY8o5WhYgbOoCRHxZMiEgIJMfUTVEOYEqhne7drwp1smBaz_FYQQ40R7BwLiwsXTfcf-tetnvEi20LKjsBltAwgiYr8tJgxHS2KGXKaImfKkbdTo57VXnM1FdIqNOhjMAlxiKto/

--> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcWjrAynHCKTdj6G4y-hx0_eiqEVPlSqSjFazCKFX_2YBEI9aUjntFXtM2Y_K0GarenLwPzhp-qFem6hzU05YmWcpEvcUcZPh61_1DjiSEobY4d7miDWvA6ljvkM1_BuEmhtsMfnMfmT76/

--> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4XPWvMEmWNBwbzvi31E7-JdSeCStDslEmKTG-Eua4l7W_RrOnwTO1WuJgmVbaWwGeJH1Wft4E64H3Ce2FDunCaIFClQskAPqsZD2Iu3M0Gra6667EGTL13VNp5CHnLOUZRdz_T-C13-Nt/

--> https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTTi7hyphenhyphenctfuKtxrIUFkfCG2m2nq_Jc_mp0lXAumgaP8JqQ-ZgAkauReySiiVhK6v1pcYBkQvKFkKaRSQa5kAC6DLYSbUuryGHMQzKwQSI57_6o71rRVSKriHXlqMLXPCrel53XMJf0BaCy/



Selamat mencoba. Semoga bermanfaat.