Showing posts with label Trik Blog. Show all posts
Showing posts with label Trik Blog. Show all posts

Friday, July 9, 2010

Hilangkan Judul Widget pada Sidebar

cara tips tutorial trik menghilangkan menghapus judul title blog sidebar widget gadget pada blogspot dan wordpress mudah ampuh cepatJadul nih temanya. Tapi ya daripada nggak di-update, parah lagi, hehe. Kembali di trik blog. Kali ini mengenai masalah Blogspot yang mengubah sistemnya menjadikan pengguna Blogspot kesulitan jika tidak memberi judul pada widget yang dipasang.

Padahal widget tidak diberi judul karena memang ada alasan tertentu, seperti penempatan Adsense, atau Menu Tab View. Itu jelas tidak bagus kalau menggunakan Judul atau Title. Nah, sekarang bagaimana cara untuk menghilangkannya? Gampang sekali. Kita cukup menghapus syntax berikut:
<h2>...</h2>
Kode tersebut berada pada Template anda. Eitz, tapi hati-hati ya? Nanti salah lagi kalau cuma saya berikan pengarahan begitu saja. Caranya mudah saja.

  1. Beri judul unik pada widget yang akan dihapus judulnya. Misal JUDULUNIK1.
  2. Simpan atau Save widget tersebut menggunakan judul tadi.
  3. Nah, sekarang menuju ke Edit HTML pada template anda. Beri tanda cek pada Expand Template Widget dan cari judul tadi, biar lebih cepat klik CTRL+f kemudian ketikkan JUDULUNIK1.
  4. Maka akan tampak kode berikut ini:
    <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
    </b:if>
  5. Hapus kdoe yang dituliskan dengan warna merah di atas.
  6. Save Template anda.

Refresh page anda maka judul widget pada sidebar anda pasti akan hilang. Berhasil dan mudah saja bukan? Pasti berhasil karena elemen h2 memang terletak di situ dan tidak ada pengaturan lain yang harus dilakukan. Semoga bermanfaat.

Friday, May 14, 2010

Background Style pada Widget Blog

Cara Memberi efek background pada widget blogspot Image Background StyleBackground Style yang dimaksudkan adalah memberikan efek background pada suatu widget pada blog. Style ini bisa berupa warna dan gambar. Dan dengan ini, anda bisa lebih mempercantik tampilan dengan gambar atau pilihan warna anda.

Teknik ini sangat sederhana. Namun karena ada salah satu teman yang request, jadi saya posting. Selain itu di sini juga belum membahas soal background tersebut.

Oke, teknik ini memerlukan beberapa perubahan pada CSS template anda. Dan saya akan memisahkan beberapa teknik yang memang berbeda cara dan berbeda style berikut ini:

  1. Colour Background Style
    Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:
    #side-wrapper {
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 25px 0px 0px 0px;
    width: 315px;
    background: #ffffff;
    }

    Tambahkan kode merah seperti di atas pada widget yang ingin anda tambahkan warna background. Untuk warna, anda bisa menggunakan Photoshop atau Tool Online untuk mengetahui kode warna, dan jangan lupa menggunakan tanda pagar (#) sebelum kode.

  2. Image Background Style
    Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Perhatikan gambar berikut:
    Cara Memberi efek background pada widget blogspot Image Background StyleNah, untuk pemasangan style ini, ada beberapa perubahan pada sintaks. Berikut selengkapnya:
    .post-footer {
    display: block;
    margin: 15px 0px 25px 0px;
    padding: 7px 20px 7px 20px;
    text-align: left;
    font: $postfooterTextFont;
    color: #ffffff;
    font-weight: normal;
    line-height: 1.6em;
    text-decoration: none;
    background-image:url("http://sites.google.com/site/cumaisenggroup/cabinet/dasbor/postfooter.gif");
    background-color:#0092dd;
    background-position:top right;
    background-repeat:no-repeat;

    border: 1px solid $postfooterBorderColor;
    }

    Penjelasannya adalah:
    • Background Image diisi URL gambar.
    • Background Color diisi kode warna yang sesuai dengan gambar.
    • Background Position diisi dengan posisi penempatan gambar. Misal top-left, bottom-left, top-right, bottom-right, center-right, center-left.
    • Background Repeat diisi ke sebelah mana gambar akan diulang. Untuk ke atas, gunakan repeat-y menjadi:
      background-repeat: repeat-y;
      Untuk ke samping, gunakan repeat-x menjadi:
      background-repeat: repeat-x;
      Dan jika tidak ingin diulangm gunakan no-repeat seperti contoh awal.

  3. Hover Image Background Style
    Style unik, seperti yang digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, namanya HOVER STYLE. Teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:
    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 20px 25px;
    }

    Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:
    #sidebar .widget {
    margin: 0px;
    padding: 0px;
    }

    Pemberian efek ini sangat mudah. Copy-Paste seluruh kode widget dan taruh di bawahnya, lalu tambahkan :hover pada akhir kata widget dan beri style background di dalam kode tadi. Selengkapnya:
    #main .widget {
    margin: 0px 0px 0px 0px;
    padding: 0px 25px 20px 25px;
    }

    #main .widget:hover {
    background:#e3e3e3;
    }

Gunakan kreasi anda dalam pemberian efek atau style ini. Buat blog anda secantik mingkin agar bisa menarik pengunjung dan dapatkan beberapa manfaatnya. Selamat berkreasi. [ardi33]

Sunday, April 25, 2010

Tombol Facebook Like untuk Blogspot

cara menambahkan Tombol Widget Facebook Like atau Recommend untuk BlogspotButton ini akan tampil pada setiap postingan yang ada dalam blog Anda. Seperti di halaman Facebook, tombol ini menandakan visitor menyukai artikel anda dan juga tidak lupa penghitungnya yang akan tampil di sebelah button ini. Berikut ini adalah demo untuk tombol yang saya maksud:


Cara Menambahkan Tombol Facebook Like ke Blogspot


  1. Login - Layout/Tata Letak - Edit HTML
  2. Cek pada Expand Template Widget
  3. Cari kode berikut ini:
    <data:post.body/>
  4. Letakkan kode berikut setelah kode tadi:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&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:450px; height:40px;'/>

    </b:if>

    Tombol tersebut akan tampil pada setiap post dan tidak akan tampil pada homepage, namun jika anda ingin menampilkannya di semua halaman (termasuk homepage), maka hilangkan atau hapus kode yang berwarna merah.
  5. Klik Save Template.

Kustomisasi Tambahan


Ada beberapa kustomisasi yang bisa anda terapkan pada tombol ini. Seperti berikut:
  1. Penggantian kalimat like menjadi recommend pada kode yang bertuliskan action=like menjadi action=recommend dan akan tampil seperti ini:


  2. Coba ganti tulisan colorscheme=light menjadi colorscheme=dark atau colorscheme=evil
  3. Anda juga bisa mengganti model tulisan yang semula font=arial menjadi salah satu dari opsi berikut ini:
    1. font=lucida+grande
    2. font=segoe+ui
    3. font=tahoma
    4. font=trebuchet+ms
    5. font=verdana

Saturday, April 10, 2010

Menambahkan Tombol StumbleUpon pada Blog

Cara Menambahkan Tombol Badge Button Vote StumbleUpon pada BlogspotSelain Twitter dan Facebook, kini StumbleUpon tidak kalah dengan mereka. StumbleUpon telah menyediakan badge untuk dipasang di blog kita sebagai penghitung pengunjung yang mensubmit artikel ke StumbleUpon dan pastinya anda akan menerima banyak trafik dari sini.

Pertama-tama, marilah ambil badge pada halamannya:
Get StumbleUplon Badge for Blog
Maka akan muncul tampilan berikut. Pilih model dengan klik salah satu style sesuai keinginan Anda.
cara memasang tombol button stumbleupon pada blogspot dan wordpress
Langkah selanjutnya adalah memilih platform dari blog anda, seperti tampilan berikut ini yang menyediakan beberapa engine seperti TypePad, Blogspot, Feedburner FeedFlare, Wordpress, Movable Type dan segala jenis engine blog.

cara memasang atau menampilkan tombol button badge stumbleupon pada blogspot dan wordpress atau yang lainnya
Sip, kemudian klik Get Code dan anda akan diberikan kode sesuai style yang anda pilih. Biasanya kodenya bergini:
<script src="http://www.stumbleupon.com/hostedbadge.php?s=2"/>
Sesuai instruksi, kode diletakkan setelah kode:
<p><data:post.body/></p>
Sehingga akan terlihat seperti ini:
<p><data:post.body/></p><script src="http://www.stumbleupon.com/hostedbadge.php?s=2"></script>

Menambahkan Tombol StumbleUpon pada Blog


Penempatan harus diperhatikan, jika di atas tadi kita meletakkan dengan kurang sempurna, maka kita akan coba untuk merapikannya. Dengan cara kita hanya akan menampilkan button jika postingan diklik. Caranya dengan menambahkan tag <b:if> untuk selengkapnya adalah berikut ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=2"></script>
</b:if>

Letakkan kode tersebut di bawah kode berikut:
<div class='post-header-line-1'/>
Sehingga akan menjadi seperti berikut ini:
<div class='post-header-line-1'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=2"></script>
</b:if>


Selamat berkreasi untuk beberapa pengaturan lainnya suoaya terlihat lebih memukau tentu saja menurut selera anda.

Wednesday, March 31, 2010

AutoHide Navbar Blogspot Solusi Terbaik

cara menghilangkan auto hode autohide iding menyembunyikan navbar pada blogspoBanyak rumor tentang dihapusnya blog dari akun Blogspot karena penghilangan Navbar yang menjadi identitas suatu blog yang memakai platform Blogspot. Dan ada lagi isu penghapusan blog massal akan diadakan akhir Maret 2010. Untuk berjaga-jaga benartidaknya, sebaiknya kita pakai auto jide Navbar saja, lebih aman dan tidak mengganggu pemandangan, hehe. Caranya mudah, simak saja:


  1. Login - Tata Letak/Layout - Edit HTML

  2. Klik pada Expand Template Widget.
    cara menghilangkan auto hode autohide iding menyembunyikan navbar pada blogspot

  3. Letakkan kode berikut sebelum kode ]]></b:skin> dan berikut kodenya:
    #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
    #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

  4. Sudah selesai, tinggal klik tombol Simpan Perubahan


Tags:
autohide navbar, auto hide, cara membuat navbar, hiding navbar, menghilangkan navbar pada blog, menyembunyikan navbar blogspot

Tuesday, March 30, 2010

Sosialisasi Dengan Feedburner

cara menampilkan update post artikel terbaru dari blog ke twitter melalui FeedburnerSosialisasi di Twitter pakai Feedburner bisa juga. Padahal sebelumnya saya sudah pernah posting artikel seperti ini sebelumnya namun menggunakan situs yang berbeda yaitu dengan TwitterFeed. Tak beda dengan TwitterFeed, Feedburner juga akan menampilkan posting secara otomatis pada akun Twitter anda setiap anda update. Untuk menggunakan cara ini, begini langkah-langkahnya:

  1. Login pada akun Feedburner anda.

  2. Kemudian, klik salah satu feed yang ada.

  3. Pilih Publicize, lalu Socialize.
    Sosialisasi Dengan Feedburner

  4. Klik Add a Twitter Account. Secara otomatis akan dibuka tab baru ke Twitter, login menggunakan akun anda dan klik Allow.
    Sosialisasi Dengan Feedburner

  5. Kembali ke pengaturan, pada menu dropdown, pilih Title and Body.
    Sosialisasi Dengan Feedburner

  6. Oke, kemudian klik tombol Activate.
    Sosialisasi Dengan Feedburner

Monday, March 29, 2010

Pasang Artikel Berlangganan + Kustomisasi

cara mudah memasang kotak form berlangganan artikel atau Article Subscriptions melalui menggunakan feedburnerSebuah blog tentu tidak lepas dengan pengunjung (visitor), baik visitor bertarget maupun tidak, visitor yang datang melalui Search Engine maupun hasil Blogwalking. Nah, biasanya ada suatu visitor yang menganggap blog anda selalu berguna untuknya, selalu dianggap menarik dalam segi isi dan cara penulisannya. Maka dari itu dibutuhkan widget seperti Artikel Berlangganan agar memudahkan visitor mengakses artikel anda apabila suatu saat anda meng-update.

Sekarang saya akan mencoba berbagi bagaimana cara memasangnya plus beberapa cara kustomisasi agar tidak dibilang sudah pernah, hehe. Beda dikit lah.

Feedburner, situs yang sudah diakuisisi oleh Google, yang bisa kita gunakan saat ini. Mengambil RSS dari suatu blog lalu mengubahnya menjadi fitur yang memuaskan, Artikel Berlangganan melalui email. Berikut selengkapnya:

  1. Kunjungi URL berikut:
    http://feedburner.com/
    Maka secara otomatis anda akan di-redirect ke halaman Google.

  2. Klik Claim Your Feeds Now.
    cara pasang kotak berlangganan Feedburner dengan mudah

  3. Login dengan akun Feedburner anda. Kalau anda bingung, jangan pilih metode ini. Pada sebelumnya, anda juga bisa login menggunakan alamat Gmail anda.
    cara pasang kotak berlangganan Feedburner dengan mudah

  4. Tulis URL RSS feed anda. Biasanya seperti ini:
    http://www.ardi33.web.id/feeds/posts/default
    Note: Ganti tulisan berwarna merah (URL blog) dengan URL blog anda)

  5. Langsung klik Next tanpa memberi tanda cek pada kotak I am a podcaster!

  6. Secara otomatis akan tampil Feed Title dan Feed Address dengan format:
    http://feeds.feedburner.com/alamatfeed
    cara pasang kotak form berlangganan Feedburner dengan mudahJika anda sudah selesai menulis Title dan Address-nya, silakan klik Next.

  7. Alamat feed baru anda telah selesai dibuat, simpan alamat feed tersebut.
    cara pasang kotak form berlangganan Feedburner dengan mudah
    Sekarang ganti dulu feed blog anda dengan feed dari feedburner. Caranya:
    • Login pada akun Blogspot anda kemudian pilih Settings

    • Pilih menu Site Feed dan isikan URL feed kamu di kolom yang telah disediakan.
      cara pasang kotak form berlangganan Feedburner dengan mudah

    • Klik Save Settings

  8. Klik Skip directly to feed management pada gambar no. 7 tadi, letaknya sebelah tombol Next.

  9. Pilih menu Publicize dan pada sub menu, pilih Email Subscriptions.
    cara pasang kotak form berlangganan Feedburner dengan mudah

  10. Klik Activate dan kemudian copy kode script form yang muncul ke gadget Blogspot anda. Sebelumnya pada menu dropdown, pilih Blogger sebagai Platform Blog anda.
    Pasang Artikel Berlangganan + Kustomisasi

  11. Jika anda sudah selesai memasangnya pada gadget blog anda, klik Save

  12. Nah, sekarang pasang juga widget penghitung visitor yang telah berlangganan artikel anda. Yaitu klik FeedCount pada sub menu. Pilih Animated jika anda ingin widget tersebut menggunakan efek animasi, dan juga pilih warna yang sesuai dengan selera anda. Kemudian klik Activate.
    Pasang Artikel Berlangganan + Kustomisasi

  13. Secara otomatis akan keluar kode script widget tersebut, letakkan widget tersebut ke gadget Blospot anda juga.

  14. Jangan lupa klik Save

Di atas adalah cara memasang form berlangganan email melalui Feedburner, untuk kustomisasi lebih lanjut anda bisa masuk link berikut:
Cara Mempercantik Form Berlangganan Artikel Melalui Feedburner

Tuesday, March 23, 2010

Trik Agar Shoutbox dari Shoutmix Tidak Error

Trik atau cara memperbaiki Agar bisa menampilkan link Shoutmix shoutbox Tidak Error atau rusakPecinta Shoutmix? Sampai tidak mau pindah dan rela mencari info di Google dan kesasar di sini? Cuma mau memperbaiki Shoutbox yang error dari Shoutmix? Nah, saya ada cara sederhana untuk menggunakannya kembali, tidak error dan masih bisa menampilkan link. Berikut caranya:

  1. Buka Shoutmix.com
  2. Pada link Demo shoutbox, klik kanan kemudian Open Link in New Tab. Perhatikan gambar berikut:
    cara memperbaiki shoutbox atau shoutmix yang rusak error tidak bisa menampilkan link

  3. Kemudian, susun kode berikut pada elemen widget HTML/Javascript anda:
    <!-- Begin ShoutMix - http://www.shoutmix.com -->

    <iframe src="URL Shoutmix Demo" width="160" height="400" frameborder="0" scrolling="auto" title="shoutmixhackedbyardi" >

    <a href="http://www.ardi33.web.id/" title="shoutmix hacked by ardi33">ShoutMix chat widget hacked by Ardi</a><br />
    </iframe>



    <!-- End ShoutMix -->

    Tulisan merah itu diisi URL demo shoutmix tadi.

  4. Selesai

Ingat, letakkan script di atas di widget Blogspot anda. Kemudian Save widget. Nah, untunk kelebihan, shoutmix ini ada online visitor-nya juga, seperti premium. Anda juga bisa memasang link seperti biasa dan tidak akan tidak nampak. Tapi untuk kelemahannya, anda tidak bisa menambahkan smiley/emoticon ke dalamnya karena tidak memakai akun. Anda cukup menggunakan emoticon standar bawaan Shoutmix. Dan juga anda tidak bisa mengganti warna shoutbox tersebut.
Trik Agar Shoutmix Tidak Error
Kalau anda berpikir Shoutmix masih lebih bagus dari CBOX atau yang lain, anda bisa memakai cara ini. Kalau ingin mempunyai akses sepenuhnya silakan upgrade Shoutbox pada akun Shoutmix anda.

Sunday, March 21, 2010

Widget Penting yang Harus Dimiliki Suatu Blog

Widget Penting yang Harus Dimiliki Suatu Blog
Sebagai seorang Blogger, pastinya kita menginginkan blog kita tampil maksimal. Tampil dengan desain yang mantab dan bisa menarik pengunjung. Namun, apakah desain atau tampilan blog yang anda pakai sehat untuk blog anda? Karena ada banyak widget yang mengandung banyak kerusakan atau error yang mungkin anda tidak tahu. Nah, kalau begitu, apa saja widget yang seharusnya ada dalam blog anda agar blog anda tetap bagus dan sehat? Mari kita lihat satu persatu:

  1. Link Navigasi Horizontal
    Menu ini sangat penting. Namun faktor ini tidak lepas dari link RSS yang ada pada navigasi ini. Beri link ke Posts RSS dan Comments RSS agar membantu Search Engine mengakses blog anda.
    menampilkan posts rss dan comments rss pada blog
    Jika anda bingung, berikut link Posts RSS:
    http://www.ardi33.web.id/feeds/posts/default
    Dan berikut link Comments RSS:
    http://www.ardi33.web.id/feeds/comments/default
    Ganti URL yang bercetak tebal dan berwarna merah dengan URL blog anda.

  2. Artikel Terbaru
    Widget ini digunakan untuk mengarahkan pengunjung blog anda ke artikel terbaru sebelumnya milik blog anda. Juga bisa digunakan untuk menambah pageviews karena memperbanyak navigasi ke posting yang lainnya. Berikan link ke 5 artikel terbaru anda agar tidak terlalu banyak link yang ada pada homepage.

  3. Komentar Terbaru
    Digunakan untuk mengetahui komentar terbaru pada blog anda. Jadi, sebagai Administrator blog, anda bisa langsung merespon komentar terbaru yang muncul pada blog anda. Ini juga bisa digunakan untuk menghindari terjadinya Spamming pada komentar.

  4. Artikel Terkait dengan atau Tanpa Thumbnail
    Widget ini digunakan untuk memberikan navigasi ke artikel yang mempunyai tema yang sama, misal trik blog. Artikel tentu berhubungan satu dengan yang lain. Maka dari itu diperlukan widget ini untuk mempermudah akses ke artikel lainnya juga. Ada juga yang menggunakan thumbnail. Maksudnya adalah dengan menampilkan gambar sebagai pendukung. Untuk lebih jelas, anda bisa membacanya pada cara membuat artikel terkait dengan thumbnail.

  5. Widget Arsip (Archive)
    Widget ini mengelompokkan postingan dalam bulan tertentu. Misalnya mengelompokkan posting yang dilakukan bulan Januari, Februari, dan lain-lain. Namun, ada optimasi yang harus anda lakukan. Jangan asal menggunakan widget ini. Pilih model Flat List agar tidak ada Error pada blog anda dalam widget ini.
    optimasi widget arsip pada blog

  6. Social Bookmark
    Digunakan untuk mempublikasikan postingan anda ke layanan sosial yang tersedia dalam widget. Dengan klik, artikel anda akan secara otomatis dipromosikan lewat situs berbasis direktori dan ini bisa membawa manfaat yang baik, yaitu trafik blog anda akan bertambah dan posisi pada Google akan naik juga.

  7. Widget Langganan Artikel Melalui Feedburner
    Widget ini juga berguna, khususnya untuk mempermudah pembaca blog anda mendapatkan info terbaru pada blog anda melalui email. Setiap artikel yang muncul pada blog anda akan secara otomatis masuk pada email pelanggan Feedburner anda. Ini menjadi cara tersendiri bagi blog anda untuk lebih terkenal.

  8. Kumpulan Link ke Posting terdahulu
    Untuk hal ini, anda bisa menggunakan widget HTML/Javascript dengan berbagai model, seperti scroll link list atau tab view. Berikan di dalamnya link yang mengarah ke postingan anda terdahulu. Ini digfungsikan agar artikel yang paling lama masih terdeteksi dan bisa dijangkau dengan mudah.

  9. Statistik
    Widget ini berfungsi untuk memberikan informasi tentang perkembangan blog anda, mulai dari PageRank hingga Alexa Rank. Anda juga bisa menambahkan statistik yang lain seperti Statistik Pengunjung, Widget Online Visitor dan lain-lain. Asal jangan kebanyakan karena script yang terlalu banyak menimbulkan efek samping yang akan membuat blog anda semakin berat.

Di atas adalah widget yang sangat penting dan wajib anda miliki. Untuk tambahan dan tidak masuk dalam widget adalah suatu blog sebaiknya memiliki maksimal 100 URL yang ditampilkan pada homepage, dan homepage memiliki ukuran tidak lebih dari 100 Kb. Ini bisa dilihat dari tool online, yaitu Meta Tag Analyzer milik SEOcentro.

Dan juga anda tidak direkomendasikan memasang Widget Follower pada blog karena ternyata Widget tersebut mengandung banyak sekali pesan Error. Jika anda tidak percaya silakan cek blog anda pada URL berikut:
http://validator.w3.org/

Lebih banyak mana pesan error yang terdapat pada blog anda sebelum dan sesudah anda mencopot widget ini, widget ini juga biasa disebut dengan Google Friend Connect.

Saturday, March 20, 2010

Posting Blogspot Efektif Pakai IE Daripada Mozilla

Bagi yang belum mengerti IE, kepanjangannya Internet Explorer. Web browser saingan Mozilla. Nah, sekarang kita bahas manfaatnya karena sangat membantu apalagi dalam SEO! Apakah itu? Cek saja dengan membuka browser Internet Explorer anda. Rekomendasi agar menggunakan versi 8 karena saya belum mencoba apakah efek ini sama dengan versi sebelumnya.

Oke, setelah membuka coba anda buka akun Blogspot anda. Kemudian posting sesuai mestinya. Kita akan menemukan perbedaan di sini. Untuk SEO-er, biasanya posting selalu dan tidak akan lupa dengan tag berikut:
<strong>...</strong>
<em>...</em>
Karena tag tersebut lebih kuat efeknya pada Search Engine daripada tag <b>...</b>
atau
<span style="font-weight:bold;">...</span>

Uniknya, pada IE 8, saat kita menulis dan drag teks kemudian tekan CTRL+B yang muncul adalah tag:
<strong>...</strong>
bukan yang lain. Demikian juga pada saat drag kemudian CTRL+I yang muncul adalah tag
<em>...</em>

Beda dengan Mozilla yang menampilkan tag
<span style="font-weight:bold;">...</span>
saat menekan CTRL+B. Mozilla cenderung menggunakan tag <span>...</span> dan itu sangat sedikit pengaruhnya untuk optimasi SEO. Lagipula capek juga kalau kita harus edit manual dari <span>...</span> ke <strong>...</strong>, dsb. Untuk Bukti, silakan lihat gambar berikut:
Posting Blogspot Efektif Pakai IE Daripada Mozilla

Dengan IE 8 kita bisa memanfaatkan hal ini untuk membantu kita optimasi SEO dan juga membuat kita mengambil langkah yang efektif.

Oh iya, ini hanya berlaku pada platform Blogspot. Wordpress sudah support beberapa tombol tag langsung klik dan memang telah diakui, kemampuan SEO-nya lebih mantap daripada Blogspot. [ardi33]

Friday, March 19, 2010

Menambahkan Tombol Google Buzz di Blogspot

Cara Menambahkan Menampilkan Widget Tombol Google Buzz Button pada blog di BlogspotGoogle Buzz diluncurkan oleh Google untuk menyemarakkan kegiatan berinternet, kegunaannya hampir sama dengan Twitter dan juga Facebook, yaitu sebagai alat sosial atau Social Tool (ya lebih enak dipanggil alat promosi). Seperti bookmark, Google Buzz ini mengumpulkan berbagai halaman yang menurut anda menarik. Selengkapnya tentang Google Buzz, anda dapat membacanya di official Google Blog.

Untuk menambahkannya ke dalam blog, mari kita lihat caranya:

  1. Login pada akun Blogspot, Layout kemudian Edit HTML, jangan lupa klik Expand Template Widget
  2. Perhatikan kode Google Buzz berikut ini:
    <div style="float:right;padding:4px;">
    <a expr:href='&quot;http://www.google.com/reader/link?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;srcTitle=&quot; + data:blog.title+ &quot;&amp;srcURL=&quot; + data:blog.homepageUrl ' rel='nofolloW' style='text-decoration:none;' target='_blank'>

    <img alt='Buzz It' src='http://i48.tinypic.com/idyc04.png' style='border:0px;'/></a>
    </div>

    Pada kode tersebut menggunakan image bawaan, yaitu ada di url [http://i48.tinypic.com/idyc04.png]. Anda bisa menggantinya dengan browsing di Google.
  3. Lanjut, letakkan kode Google Buzz di atas setelah kode berikut ini:
    <div class='post-header-line-1'/>
  4. Namun kalau anda tidak menemukan kodenya, ada dapat meletakkan kode Google Buzz sebelum kode berikut:
    <data:post.body/>
  5. Simpan template anda


Google Buzz Button with Share Count


image
Sama kayak yang atas, tapi yang ini ada penghitungnya. Diperoleh dari Njuice.Com dan tentunya anda bisa menemukan style yang berbeda di sana. Untuk memasangnya, gunakan kode ini untuk kode Google Buzz:
<div style="float:right;padding:4px;">
<script type='text/javascript'>
njuice_buzz_url = '<data:post.title/>';
njuice_buzz_title = '<data:post.url/>';
njuice_buzz_share = 'reader';
</script>

<script type='text/javascript' src='http://button.njuice.com/buzz.js'/>
</div>

Untuk beberapa editting, anda dapat juga menambah kode njuice_buzz_size = 'small'; atau njuice_buzz_size = 'simple'; di bawah kode njuice_buzz_share = 'reader';

Penempatannya sama, yaitu setelah kode:
<div class='post-header-line-1'/>
Tapi jangan letakkan dua-duanya, cukup satu saja. Karena akan aneh kalau dua, hehe. [ardi33]

Thursday, March 18, 2010

Cara Membuat Navigasi BreadCrumbs - SEO Friendly

Cara Membuat Memasang Navigasi BreadCrumbs yang di atas bawah posting judul blog - SEO FriendlyBreadCrumbs, menu navigasi seperti menu DTree jika disorot, selalu menjadi pilihan para SEO-er jika ingin menjadikan blognya SEO Friendly. Cara ini lebih ampuh daripada yang biasanya karena yang tampil pada Search Engine adalah seluruh judul posting, bukan sebagian.

Apalagi untuk blogspot yang mempunyai kelemahan hanya beberapa kata saja yang ditampilkan pada permalink, tidak seperti wordpress yang menampilkan seluruh kata pada judul sebagai permalink. Nah, dengan cara ini, kita dapat menutupi kekurangan tersebut sekaligus menambah kekuatannya dengan menambah kategori pada indeks Search Engine sehingga bisa memberikan efek tersendiri pada posting seperti penambahan kekuatan keyword dan sebagainya. Untuk contoh, breadcrumbs itu sendiri adalah seperti berikut ini:
Cara Membuat Navigasi BreadCrumbs - SEO Friendly
Screenshot diambil dari blog KR karena memakai breadcrumbs. Sudah paham bukan? Sekarang pemasangannya, berikut cara-caranya:

  1. Login - Layout - Edit HTML
  2. Klik kotak Expand Template Widget
  3. Cari kode berikut ini:
    <b:includable id='main' var='top'>
  4. Jika sudah ketemu, letakkan kode berikut tepat di atas kode tadi:
    <b:includable id='breadcrumbs' var='post'>

    <!-- Breadcrumbs hack. By Ardi33 16/03/2010 http://www.ardi33.web.id/ -->
      <b:if cond='data:blog.pageType == "item"'>
          <p class='breadcrumbs'>
          <span class='post-labels'>
            <b:if cond='data:post.labels'>

              Browse:
              <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
              <b:loop values='data:post.labels' var='label'>
                <b:if cond='data:label.isLast == "true"'>
                  <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
                </b:if>
              </b:loop>
              <b:if cond='data:post.title'>
    &gt;  <b><data:post.title/></b>
              </b:if>

            </b:if>
          </span>
          </p>
      </b:if>
    <!-- End of Breadcrums Hack -->
    </b:includable>
  5. Kdemudian cari kode berikut:
    <b:if cond='data:post.dateHeader'>
  6. Kalo sudah ketemu, letakkan kode berikut di atas kode tadi:
    <b:include data='post' name='breadcrumbs'/>
  7. Untuk kustomisasi, paste kode berikut di atas kode ]]></b:skin> dan berikut kodenya:
    .breadcrumbs {
    margin:0 0 0.5em;
    font-size: 86%;
    padding:0 0 0.5em;
    }
  8. Klik Save Template

Navigasi ini muncul di bawah judul posting dan hanya tampil pada inner-page, bukan home-page. [ardi33]

Wednesday, March 17, 2010

Update Artikel pada Blog Muncul di Twitter

cara memasukkan menyisipkan Update Artikel Terbaru Posting pada Blog langsung Muncul pada akun di TwitterMenampilkan artikel yang dipostingkan pada blog kita pada Twitter tidaklah sulit, hanya bermodalkan RSS feed kita dapat membuat Twitter kita ter-update dengan posting pada blog kita. Nah sekarang, bagaimana caranya agar postingan kita tersebut muncul pada Twitter? Mari kita selidiki lihat caranya:


  1. Buatlah akun di TwitterFeed dengan klik tombol Register Now.
    Update Artikel pada Blog Muncul di Twitter
  2. Kemudian masukkan email dan password anda pada kotak yang disediakan. Perhatikan gambar:
    Update Artikel pada Blog Muncul di Twitter
  3. Isikan feed blog Anda, biasanya seperti ini:
    http://www.ardi33.web.id/feeds/posts/default
    dan dengan menyertakan Feed Name pada kotak sebelumnya. Kemudian klik Continue to Step 2.
    Update Artikel pada Blog Muncul di Twitter
  4. Selanjutnya pilih Twitter pada pilihan yang tersedia.
    Update Artikel pada Blog Muncul di Twitter
  5. Klik Authenticate Twitter.
    Update Artikel pada Blog Muncul di Twitter
  6. Setelah Login, Twitter, muncul tampilan seperti ini, dan pilih Allow.
    Update Artikel pada Blog Muncul di Twitter
  7. Jika sudah, klik tombol Create Service.
    Update Artikel pada Blog Muncul di Twitter

Proses selesai, jika ingin mencoba, silakan update blog anda dan lihatlah tweet terbaru pada akun twitter anda. Selamat mencoba dan semoga berhasil! [ardi33]

Tuesday, March 16, 2010

Cara Membuat Sub Domain Sendiri

Cara Membuat Sub Domain Sendiri pada blogspot dengan mudahDaripada bosan dengan sub domain yang diberikan Blogger seperti http://anda.blogspot.com, kita buat sendiri aja menurut domain yang sudah kita beli. Jadi lebih asyik dan keren. Nah, gimana dulu sub domain itu? Mungkin bagi anda yang belum tau, istilah ini masih asing. Daripada arti yang terlalu bertele-tele, langsung contohnya saja, yaitu:

http://relaxtionship.ardi33.web.id/

Sub domain tersebut aktif kok, coba saja buka, hehe (promosi mode: on). Oke, dengan sub domain ini kita bisa memisahkan kategori atau tema tapi masih dalam satu domain. Misal anda ingin berbagi tentang kesehatan, maka anda bisa menggunakan sub domain http://health.domainku.com/ atau http://kesehatan.domainku.web.id/ dan lain sebagainya.

Cara membuatnya sangat mudah dan tidak susah (sama aja lah), tinggal memasang record CNAME pada DNS manager domain anda. Untuk tutorial ini, saya akan menggunakan DNSpark.net karena saya menggunakannya untuk DNS hosting. Berikut langkahnya:
  1. Login ke DNSpark.net
  2. Klik domain anda yang ada pada bawah kiri layar, berikut detailnya:
    Cara Membuat Sub Domain Sendiri
  3. Isi alamat sub domain anda, kemudian pilih type CNAME dengan destination name ke ghs.google.com, perhatikan gambar berikut ini:
    Cara Membuat Sub Domain Sendiri
  4. Selesai

Langkah selanjutnya, anda hanya tinggal memasangnya di Blog anda, caranya:
  1. Login - Setting - Publishing
  2. Klik Custom Domain dan klik Switch to advanced settingsCara Membuat Sub Domain Sendiri
  3. Ketikkan alamat sub domain anda tadi pada kotak yang disediakan, tulis kode verifikasi kemudian klik Save Settings

Sangat mudah bukan? Selain itu, trik ini berjalan pada domain gratis seperti Co.Cc karena Co.Cc support pada CNAME records. Dengan menggunakan cara ini kita dapat memperoleh satu manfaat, yaitu blog yang menggunakan sub domain, alexa rank-nya sama dengan domain utama, jika anda tidak percaya, silakan saja cek sendiri. Ini bisa kita manfaatkan untuk pengembangan bisnis atau yang lain sesuai kebutuhan. Oke, sampai di sini tutornya, semoga bermanfaat. [ardi33]

Saturday, March 13, 2010

Cara Menambah Widget Social Bookmark pada Blog

Cara Menambah Memasang Membuat Sosial Bookmarking Social Bookmark Widget pada Blog Wordpress dengan mudah dan cepatSubmit blog kita pada Social Bookmark merupakan salah satu langkah menaikkan trafik sekaligus menambah backlink ke artikel atau blog yang telah kita submit. Nah, sekarang saya akan berbagi cara membuat atau memasang widget Social Bookmark ini pada blog Anda, agar lebih efisien karena tinggal klik saja.

Tampilannya sama dengan yang dipasang di blog ini, letaknya bawah postingan, selengkapnya adalah seperti berikut ini:
Cara Menambah Social Bookmark Widget pada BlogOke, langsung saja kita lihat caranya:
  1. Login - Tata Letak / Layout - Edit HTML
  2. Jangan lupa cek tanda Expand Template Widget
  3. Letakkan kode berikut sebelum kode ]]></b:skin>
    .pdfardi { background: #000000; -moz-border-radius: 5px; border: 0px; padding:5px 5px 5px 5px; margin: 0 0 0px 0; }

  4. Kemudian cari kode <data:post.body/> (biasanya ada dua kode, pilih kode yang atas/pertama), taruh kode berikut di bawahnya:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='pdfardi'><center>
    <a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Add to Delicious' src='http://i46.tinypic.com/25a4v0o.jpg' width='122'/></a>
    <a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg It!' src='http://i45.tinypic.com/27x2r1c.jpg' width='122'/></a><br/>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='I Like It!' src='http://i45.tinypic.com/qpgevr.jpg' width='122'/></a>
    <a expr:href='&quot;http://twitter.com/home/?status=Chk Out-Numbering Comments In Blogger/BlogSpot Blogs &quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Tweet It!' src='http://i50.tinypic.com/vpzyus.jpg' width='122'/></a><br/>
    <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Add to Technorati' src='http://i47.tinypic.com/30xbiba.jpg' width='122'/></a>
    <a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Add to Facebook!' src='http://i50.tinypic.com/2ed7338.jpg' width='122'/></a></center></div>
    </b:if>
  5. Klik Simpan