Cara mengganti forum Komentar Blogger dengan IntenseDebate

Forum komentar IntenseDebate memiliki banyak fitur menarik dibanding dengan forum komentar default milik blogger. Forum komentar IntenseDebate bisa digunakan pada banyak platform seperti Wordpress, Blogger, Tumblr dll.
Selain banyak fitur, forum komentar IntenseDebate memudahkan pengunjung memberikan komentar dengan menggunakan berbagai ID seperti profil facebook, akun twitter, OpenID, gavatar, ataupun memberikan komentar tanpa menggunakan akun. Dan juga dilengkapi banyak tombol share yang bisa digunakan.

Beberapa fitur dari IntenseDebate diantaranya :

Comment Threading. Reply-By-Email. Email Notifications. Commenter Profiles. Moderation/Blacklisting. Reputation Points & Comment Voting.

Plugins API. OpenID. Widgets. Twitter Connect. Facebook Connect. RSS Readers & Tracking

Berikut bentuk forum komentar IntenseDebate :

Atau anda bisa lihat forum komentar yang ada dibawah artikel ini, tapi maaf saya tidak banyak menggunakan fitur IntenseDebate. Anda bisa menggunakan semua fitur untuk blog anda nanti.

Bila anda berminat silahkan anda ikuti langkah - langkah dibawah ini :
1. Silahkan anda kunjungi dan SIGN UP di http://intensedebate.com

2. Isi forum yang diberikan, dan Klik tombol SIGN UP :

3. Halaman berikutnya anda diminta cek Email untuk Verifikasi email dan klik Link yang diberikan.

4. Setelah klik link verifikasi anda diarahkan kehalaman IntenseDebate kembali, silahkan Klik "Continue with your installation" :

5. Kemudian pada halaman Install IntenseDebate, pilih platform blog anda. Kali ini saya contohkan untuk platform Blogger :

6. Masukkan ULR Blog anda :

7. Pada bagian ini silahkan ikuti urutan petunjuk gambar dibawah ini :

Catatan : Anda bisa pilih forum komentar untuk setiap posting ataupun untuk seluruh posting blog. 

Pada bagian warna hijau, anda scroll lagi kebawah.

Sampai disini forum komentar sudah jadi, anda bisa lihat hasilnya. Kemudian anda tinggal melengkapi fitur - fitur yang lain, silahkan kembali ke Dashboard IntenseDebate anda: http://intensedebate.com/user-dashboard untuk seting forum komentar anda dan tambahkan plugins sesuai selera anda.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

5 Tampilan Dinamis dari blogger

Pada bulan maret yang lalu blogger telah memperkenalkan fitur baru yaitu 5 tampilan dinamis untuk blog dari blogger.com. Fitur ini memberikan pilihan kepada pengunjung untuk memilih tampilan yang berbeda pada sebuah blog, tapi tentunya pengunjung bisa mengakses blog tersebut bila sipemilik blog berkenan memberi ijin untuk menggunakan fitur tersebut.

Berikut 5 tampilan dinamis dari blogger tersebut :

1. Flipcard

Silahkan anda bisa KLIK fitur dibawah ini utuk melihat tampilan dinamis Flipcard :

Flipcard

Cara kerja :

• Arahkan mouse pada salah satu kartu atau gambar (bila artikel anda terdapat gambar) untuk melihat judul posting dan jumlah komentar.

• Klik kartu atau gambar tersebut untuk melihat posting di tampilan penuh.

• Anda dapat menggunakan navigasi older post (posting lama) dan newer post (posting baru) atau tombol panah.

• Klik Back to all posts untuk kembali semua posting atau ke tampilan Flipcard.

• Anda bisa pilih tab menu di kiri atas, untuk mengurutkan posting menurut Tanggal, Penulis dan Kategori.

2. Mosaic
Silahkan anda bisa KLIK fitur dibawah ini utuk melihat tampilan dinamis Mosaic :

Mosaic

 Cara kerja :

• Arahkan mouse pada salah satu kotak atau gambar (bila artikel anda terdapat gambar) untuk melihat judul posting dan memperbesar kotak atau gambar.

• Klik kotak atau gambar tersebut untuk melihat posting di tampilan penuh.

• Klik pada halaman posting tersebut untuk kembali semua posting atau ke tampilan Mosaic.

3. Sidebar

Silahkan anda bisa KLIK fitur dibawah ini utuk melihat tampilan dinamis Sidebar :

Sidebar

 Cara kerja :

• Dioptimalkan untuk membaca cepat dan browsing.Sidebar kiri adalah daftar posting kronologis, dengan jumlah komentar dan thumbnail untuk setiap posting.
• Anda bisa menggunakan menu navigasi melalui tulisan, dan komentar dapat ditampilkan pada halaman yang sama dengan mengklik link Tampilkan.

4. Snapshot

Silahkan anda bisa KLIK fitur dibawah ini utuk melihat tampilan dinamis Snapshot :

Snapshot

 Cara kerja :

• Tampilan ini hanya akan menampilkan artikel / posting yang memiliki gambar.

• Mengklik melalui foto atau gambar apapun akan menampilkan halaman posting penuh, dengan link naviagtion di bagian bawah untuk posting baru dan lama

• Mousing atas foto apapun akan menampilkan potongan posting

5. Timeslide

Silahkan anda bisa KLIK fitur dibawah ini utuk melihat tampilan dinamis Timeslide :

Timeslide

 Cara kerja :

• Tampilan ini berbentuk konten blog dalam tiga bagian yang berbeda:

• Kolom Kiri : Pembesaran gambar dengan judul posting potongan, dan snipppet ditampilkan dalam urutan kronologis

• Kolom Tengah : Menampilkan hanya judul posting dan potongan

• Kolom Kanan : Menampilkan hanya judul posting individu

• Saat mencari posting dalam tampilan ini, hasil akan disorot.

Bila anda berminat menampilkan fitur ini pada blog anda dan mengijinkan pengunjung melihat blog anda melalui 5 tampilan dinamis tersebut. Silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Pengaturan dan pilih Feed Situs.
3. Pada bagian "Izinkan Feed Blog" anda pilih Penuh / Full.

4. SIMPAN SETELAN.

Selanjutnya anda bisa coba melihat tampilan dinamis blog anda, silahkan tambahkan /view/NAMA TAMPILAN setelah ULR Blog anda. Jadinya sebagai berikut :

Untuk Flipcard    :  ULR BLOG ANDA/view/flipcard
Untuk Mosaic     :  ULR BLOG ANDA/view/mosaic
Untuk Sidebar     :  ULR BLOG ANDA/view/sidebar
Untuk Snapshot  :  ULR BLOG ANDA/view/snapshot
Untuk Timeslide :  ULR BLOG ANDA/view/timeslide

Atau anda bisa memberi pilihan menu tampilan dinamis menggunakan menu drop down seperti dibawah ini, agar pengunjung lebih mudah memilih dan melihat tampilan dinamis blog anda :

PILIH TAMPILAN BLOG INIFlipcard Mosaic Sidebar Snapshot Timeslide

Berikut kodenya :

<center><form><select onchange="window.open(this.options[this.selectedIndex].value,'_blank')" size="1" name="menu-drop-down"><option /> <h3>PILIH TAMPILAN BLOG INI</h3><hr>
 
<option value="ULR BLOG ANDA/view/flipcard">Flipcard</option>
<option value="ULR BLOG ANDA/view/mosaic">Mosaic</option>
<option value="ULR BLOG ANDA/view/sidebar">Sidebar</option>
<option value="ULR BLOG ANDA/view/snapshot">Snapshot</option>
<option value="ULR BLOG ANDA/view/timeslide">Timeslide</option>
</select></form></center>

Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

Cara menambah gadget pada Header

Menambah gadget tepat pada bagian header tentu bermanfaat, diantaranya kita bisa menambahkan gambar, slide show, banner, atau iklan pada bagian header tersebut. Cara ini berbeda dengan menambah gadget diatas ataupun dibawah header yang saya tulis pada artikel Cara Menambah Gadget diatas Header. Tapi cara ini sama dengan membuat header terbagi menjadi 2 bagian yaitu header disebelah kiri dan gadget terletak disebelah kanan header.
Berikut gambar header yang terbagi menjadi 2 :

Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Cari kode yang sama atau mirip dengan kode berikut :

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
  padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {

  padding: 0 $(header.padding);

}

Catatan :

Setiap template biasanya berbeda kodenya, yang penting perhatikan kode - kode yang ada pada bagian  (/* Header)

6. Ganti kode diatas dengan kode dibawah ini :

/* Header
----------------------------------------------- */
#header {
float:left;
width:40%;
margin: 0px;
text-align: center;
color:#ffcc66;
}

#header2{float:left; width:60%;}

7. Kemudian silahkan anda cari lagi kode yang sama atau mirip dengan kode berikut :

  <div class='region-inner header-inner'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
</div>

8. Ganti kode diatas dengan kode dibawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='TITEL BLOG ANDA (Header)' type='Header'/>
</b:section>
<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div><!-- end header-wrapper -->

10. Simpan Template.

Nah.... jadi deh....,
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

cara buat website gratis

Cara buat website ternyata tidak perlu mengerti tentang bahasa programer. Kita hanya membutuhkan lima langkah mudah, cepat dan gratis. Disini saya jabarkan bagaimana Cara membuat website gratis dari mulai cara dapat domain gratis, cara dapat hosting gratis, cara seting domain, cara dapat template gratis dan cara upload template gratis.

Mengapa kita perlu buat website ?
OK..., sebelum saya jabarkan bagaimana lima langkah Cara membuat website gratis, terlebih dulu saya ingin katakan bahwa Perkembangan teknologi informasi kini sudah berkembang sangat cepat, siapa yang tidak mengikutinya akan ketinggalan informasi. Jika kita menguasai atau paling tidak kita mengikuti informasi yang ada dimedia internet dan kita mampu memanfaatkannya dengan baik, bukan hal yang mustahil jika kita mendapat penghasilan yang tidak sedikit dari internet.

Perlu diketahui bahwa jumlah website kian hari kian bertambah, dan setiap website menjakankan peluang atau bisnisnya masing - masing, baik memasarkan produk sendiri maupun produk orang lain atau affiliate program. Dengan demikian dapat dipastikan bahwa didunia internet, sebuah website sangat diperlukan dan menjadi sesuatu yang sangat berperan sebagai media informasi, media pendidikan, jejaring sosial, bahkan sebagai media yang sangat menguntungkan untuk berbisnis.

Sebuah website menjadi media yang sangat menjanjikan sebagai peluang usaha didunia online. Dengan website, kita dapat menyebarkan informasi yang paling tidak masuk akal sekalipun, dan membuat ribuan orang percaya. Dengan cara membuat website, bisnis yang paling kecilpun dapat menjadi besar, asal bisa mengelola website tersebut.

Lalu bagaimana cara membuat website gratis sendiri ?
OK...,berikut lima langkah mudah, cepat dan gratis cara membuat website :

1. Domain
Domain merupakan nama yang kita pakai untuk website kita, misalnya: www.carabuatwebgratis.com . Untuk mendapatkan nama domain kita harus mendaftarkan nama domain pada penyedia layanan pemilihan nama domain. Untuk mendapatkan nama domain tentu kita harus membayar sejumlah uang. Tapi jangan khawatir didunia internet semuanya serba mungkin dan bisa kita lakukan. Sebab tidak semua domain berbayar, ada juga penyedia layanan domain yang gratis seperti co.cc, apalagi seperti yang sudah kita ketahui, bahwa co.cc adalah top level domain yang bisa kita dapatkan secara gratis.
LANGKAH PERTAMA :
Cara dapat domain gratis, silahkan anda baca DISINI.

2. Hosting
Hosting adalah perusahan penyedia ruangan atau space untuk website kita. Supaya website kita bisa dikunjungi orang, maka website tersebut harus mempunyai ruangan dagang. Dan ruangan tersebut harus bisa online agar orang dari tempat manapun bisa mengunjungi website atau toko kita sepanjang ada sambungan internet. Dan untuk penggunaan hosting, saya juga akan memberikan cara yang gratis.
LANGKAH KEDUA :
Cara mendapat hosting gratis, silahkan anda baca DISINI

3. Seting Domain dihosting gratis

Setelah dapat domain gratis dan hosting gratis, langkah selanjutnya tinggal seting domain dihosting gratis.

LANGKAH KETIGA :
Cara seting domain dihosting gratis, silahkan anda baca DISINI

4. Memilih Template

Kita harus memilih bentuk tampilan dan fungsi template sesuai dengan tujuan yang sudah kita tentukan. Silahkan anda bisa lihat, ada ratusan bentuk template yang bisa anda pilih.
LANGKAH KEEMPAT :
Silahkan anda pilih dan download gratis DISINI.

5. Upload Template
Nah bila ketiganya sudah kita selesaikan, maka website sudah bisa kita diakses termasuk olah orang lain dari tempat manapun di muka bumi sepanjang ada sambungan internet. Selanjutnya kita bisa langsung memanfaatkannya untuk menjalankan bisnis atau yang lain sesuai kebutuhan anda.
LANGKAH KELIMA :
Cara Upload Template, silahkan anda baca DISINI

Selamat mencoba... dan semoga bermanfaat untuk anda semuanya....amiin.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Mohon jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.


Keywords:  web, website, buat web, cara buat website, cara buat web gratis, cara buat web, cara buat wesite gratis, cara membuat web, cara membuat website, cara membuat website gratis

Baca artikel lain :

Cara submit sitemap blog

Fungsi sitemap atau Peta situs diantaranya adalah untuk meningkatkan mesin pencari mengoptimasi sebuah situs dengan memastikan bahwa semua halaman dapat ditemukan. Jadi untuk mempermudah search engine seperti google mengindek seluruh artikel yang ada dalam sebuah web atau blog kita, alangkah baiknya terlebih dulu Submit Sitemap blog kita ke webmaster google. Cara submit sitemap blog sangat mudah, anda bisa ikuti langkah - langkah dibawah ini :

Langkah pertama kita buat sitemap atau Peta situs : 
Untuk buat sitemap sebuah blog, yang kita lakukan hanya dengan menambahkan kode atom.xml pada ujung alamat ulr blog kita. Silahkan anda lihat contoh berikut :

• Alama Ulr : http://www.carabuatwebgratis.com 
• Maka alamat sitemap untuk didaftarkan menjadi :

http://www.carabuatwebgratis.com/atom.xml

Bila anda menggunakan layanan feedburner, maka tinggal menambahkan kode ?redirect=false, sehingga alamat sitemap untuk didaftarkan menjadi :

http://www.carabuatwebgratis.com/atom.xml?redirect=false

Cara lain buat sitemap, anda bisa gunakan layanan gratis Blogger Sitemap Generator, Berikut langkah-langkahnya :
1. Silahkan kunjungi Blogger Sitemap Generator :
http://digitalinspiration.com/tools/blogger/sitemap/index.php

Atau Klik tombol ini :

2. Masukan alamat blog anda pada kolom yang tersedia secara lengkap ( misal: http://www.carabuatwebgratis.com) seperti gambar dibawah ini, lalu Klik tombol Create Blogger Sitemap.

3. Setelah proses selesai seperti gambar dibawah :

Silahkan anda catat atau copy sitemap yang baru dibuat, seperti ini :

For Google : "atom.xml?redirect=false&start-index=1&max-results=500"
For Bing     : "Submit 1 - 500 posts"
For Yahoo   : "Submit 1 - 500 posts"

4. Kemudian langkah selanjutnya kita ke google webmaster tool , dan login dengan Id anda untuk masuk.
5. Pada beranda google webmaster tool, silahkan pilih blog anda yang mau disubmit sitemapnya.
6. Lalu pada dasbor Klik "Konfigurasi situs" 

7. Klik  " Peta situs "

8. Klik Kirim Peta Situs, kemudian muncul sebuah kolom atau forum.
Silahkan anda Paste alamat sitemap yang tadi di buat di blogger sitemap generator ( atom.xml?redirect=false&start-index=1&max-results=500 ) pada kolom tersebut, kemudian klik tombol Kirim Peta Situs.

 9. Proses Pengiriman Peta Situs atau Submit Sitemap telah selesai.

Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Cara memberi meta tag pada setiap posting

Salah satu cara untuk meningkatkan search engine optimization atau biasa disebut SEO adalah memberi meta tag yang berbeda pada setiap halaman atau setiap posting. Hal ini disebabkan karena search engine lebih mengutamakan informasi yang relevan melalui meta tag yang dipasang pada setiap halaman atau setiap posting suatu web atau blog.
Sebuah web atau blog yang hanya diberi meta tag pada halaman utama, maka meta tag yang terbaca pada halaman setiap posting akan selalu sama dengan meta tag pada halaman utama tersebut. Dengan demikian meta tag akan menjadi tidak relevan dengan isi yang ada pada setiap artikel yang kita posting, sehingga seluruh artikel yang kita posting sulit terbaca oleh search engine. Jadi untuk mengoptimalkan dan memperoleh peringkat tinggi disearch engine, maka memberi meta tag yang berbeda pada setiap halaman atau setiap posting sangat diperlukan.

Sebagai contoh pada posting artikel saya yang berjudul "Cara memberi Meta Tag pada blog" :

DESCRIPTION :

"Meta Tag adalah elemen yang digunakan untuk memberikan informasi meta data dan berfungsi membantu mesin pencari untuk mengkategorikan tentang data yang berisi pada sebuah halaman web atau blog."

KEYWORDS :

"Cara memberi Meta Tag pada blog, Artikel, meta tag, Seo, Tips, Tutorial blog"

Pada halaman tersebut bila dilihat dengan   "Page source  " atau   "pada kode HTML   ", maka akan terlihat seperti berikut : 

Pada search engine google, posting artikel saya yang berjudul "Cara memberi Meta Tag pada blog",  menempati halaman Pertama, nomor Satu :

Nah..., Bila anda berminat untuk memberi meta tag yang berbeda pada setiap halaman atau setiap posting anda, silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

<b:include data='blog' name='all-head-content'/>

5. Copy kode di bawah ini dan taruh setelah kode diatas :

<b:if cond='data:blog.url == "URL BLOG ANDA"'>
<title>TITEL / NAMA BLOG ANDA</title>

<meta content='DISINI DESCRIPTION / INFORMASI SINGKAT TENTANG WEB ATAU BLOG ANDA' name='description'/>

<meta content='DISINI KEYWORDS / KATA KUNCI WEB ATAU BLOG ANDA' name='keywords'/>

</b:if>

<b:if cond='data:blog.url == &quot;URL POSTING ANDA &quot;'><title><data:blog.pageName/> ~ <data:blog.title/></title>
<meta content='DISINI DESCRIPTION / INFORMASI SINGKAT TENTANG POSTING ANDA' name='description'/>

<meta content='DISINI KEYWORDS / KATA KUNCI POSTING ANDA' name='keywords'/>

</b:if>

Catatan : 

Jadi setiap anda habis posting, anda tinggal tambahkan deretan kode yang berwarna PINK, dibawah atau setelah deretan kode yang berwarna PINK diatas.
Kesimpulannya..., deretan kode yang berwarna PINK adalah  kode META TAG untuk setiap posting.

Berikut contohnya :

<b:if cond='data:blog.url == "URL BLOG ANDA"'>
<title>TITEL / NAMA BLOG ANDA</title>

<meta content='DISINI DESCRIPTION / INFORMASI SINGKAT TENTANG WEB ATAU BLOG ANDA' name='description'/>

<meta content='DISINI KEYWORDS / KATA KUNCI WEB ATAU BLOG ANDA' name='keywords'/>

</b:if>

<b:if cond='data:blog.url == &quot;URL POSTING ANDA &quot;'><title><data:blog.pageName/> ~ <data:blog.title/></title>
<meta content='DISINI DESCRIPTION / INFORMASI SINGKAT TENTANG POSTING ANDA' name='description'/>

<meta content='DISINI KEYWORDS / KATA KUNCI POSTING ANDA' name='keywords'/>

</b:if>

<b:if cond='data:blog.url == &quot;URL POSTING ANDA &quot;'><title><data:blog.pageName/> ~ <data:blog.title/></title>
<meta content='DISINI DESCRIPTION / INFORMASI SINGKAT TENTANG POSTING ANDA' name='description'/>

<meta content='DISINI KEYWORDS / KATA KUNCI POSTING ANDA' name='keywords'/>

</b:if>

<b:if cond='data:blog.url == &quot;URL POSTING ANDA &quot;'><title><data:blog.pageName/> ~ <data:blog.title/></title>
<meta content='DISINI DESCRIPTION / INFORMASI SINGKAT TENTANG POSTING ANDA' name='description'/>

<meta content='DISINI KEYWORDS / KATA KUNCI POSTING ANDA' name='keywords'/>

</b:if>

.....DAN SETERUSNYA....

6. Simpan Template.

Nah.... selesai, mudah - mudahan penjelasan diatas membantu.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara memberi Meta Tag pada blog

Meta Tag adalah elemen yang digunakan untuk memberikan informasi meta data dan berfungsi membantu mesin pencari untuk mengkategorikan tentang data yang berisi pada sebuah halaman web atau blog.
Dengan memberi Meta Tag, web atau blog kita lebih mudah terindek oleh mesin pencari. Apalagi description dan keywords yang kita buat sangat unik dan tertarget sesuai dengan isi dan tujuan web atau blog kita, ini akan meningkatkan peringkat web atau blog kita pada mesin pencari atau biasa disebut dengan search engine optimization (SEO). Sehingga secara otomatis akan meningkatkan pengunjung ke web atau blog.

Nah..., sekarang tinggal cara membuat Meta Tag dan cara memasangnya. Silahkan anda ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Cari kode di bawah ini atau yang mirip dengan kode ini :

<b:include data='blog' name='all-head-content'/>

5. Copy kode di bawah ini dan taruh setelah kode diatas :

<meta content='DISINI DESCRIPTION / INFORMASI SINGKAT TENTANG WEB ATAU BLOG ANDA' name='description'/>

<meta content='DISINI KEYWORDS / KATA KUNCI WEB ATAU BLOG ANDA' name='keywords'/>

6. Simpan Template

Cara memilih kata kunci silahkan anda bisa gunakan layanan gratis dari google, sehingga anda bisa tahu seberapa banyak kata kunci yang dicari dan ditulis pengunjung pada mesin pencari google.
Anda bisa ikuti Link dibawah ini :

https://adwords.google.com/select/KeywordToolExternal

Semakin banyak pengunjung yang mencari atau menulis sebuah kata kunci yang kita gunakan, maka akan semakin baik dan lebih banyak kemungkinan pengunjung akan datang ke web atau blog kita.

Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :

Cara membuat Read More otomatis

Pada waktu yang lalu saya sudah pernah membahas mengenai cara membuat read more yang bekerja secara manual, yaitu kita harus menambahkan beberapa kode HTML setiap kali kita membuat artikel atau posting artikel.
Tapi Read More kali ini bekerja secara otomatis akan membuat ringkasan posting artikel yang akan tampil dihalaman muka atau Home pada web atau blog kita. Jadi kita tidak perlu lagi menambahkan beberapa kode HTML pada setiap artikel yang kita buat. Selain itu kelebihan lain adalah ukuran tampilan yang sama antara artikel satu dengan yang lain, sehingga konten tampak lebih rapi. Anda bisa lihat contoh read more otomatis pada halaman Home blog ini, Rapi .... kan? hehehe....
Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode yang sama atau mirip dengan kode berikut :

</head>

7. Sisipkan kode dibawah ini sebelum kode </head> 

<script type='text/javascript'> summary_noimg = 450; summary_img = 280; img_thumb_height = 200; img_thumb_width = 200; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script>

8. Kemudian cari lagi kode yang sama atau mirip dengan kode berikut :

<data:post.body/>

9. Ganti kode <data:post.body/> dengan kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:right'><a expr:href='data:post.url'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcZiWJemE3LMQqAx-bcOyDP7XE2CM6W-SrVo_ktUInTOtmGs7JQnFSxa2jcw1ySq9bIVuM_73Uhf-fL8bunmK4bEsh-wwWtSQrOAj3KXEHU2Fq_Nf3Pux5O4HXUVTWBoFNIC8Pfp6DfY/' style='border-style:none;'/></a></span></b:if>

10. Simpan Template.

Nah.... jadi deh....,
Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

Cara membuat Tooltip

Tooltip adalah sebuah tool yang melekat pada sebuah link dan berfungsi memberikan keterangan atau petunjuk kepada pengunjung mengenai isi suatu dokumen atau sebuah halaman web atau blog yang akan dituju sebelum link tersebut di klik. Tooltip ini muncul ketika pointer mouse diarahkan diatas sebuah link teks atau link image. Jadi dengan adanya tooltip ini pengunjung akan tahu pentingnya isi sebuah artikel atau halaman web yang diarahkan lewat link yang menggunakan tooltip tersebut. Sebagai contoh, silahkan arahkan pointer mouse anda diatas link dibawah ini :

Cara buat web

Cara buat web

Bila anda berminat, silahkan anda ikuti langkah - langkah dibawah ini :
 1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<!-- begin Tooltips --> <script type='text/javascript'> $(document).ready(function(){ $("a.tooltip").easyTooltip(); }); </script> <script type='text/javascript'> //<![CDATA[ (function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'> "+content+"</div> ");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery); //]]> </script> <!-- end tooltips --> <style type="text/css"> #easyTooltip{ padding:5px 10px; border:2px solid #BDBDBD; border-top-width:10px; border-bottom-width:10px; background: #FFFFFF; color:#6E6E6E;} </style>

6. Simpan Template.

Langkah selanjutnya memasang tooltip pada sebuah link :
1. Bila anda akan memasang tooltip pada LINK TEKS. 

<a class="tooltip" title="PETUNJUK ATAU KETERANGAN ARTIKEL" href="ULR ARTIKEL" target="_blank">JUDUL ARTIKEL</a>

 2. Bila anda akan memasang tooltip pada LINK IMAGE. 

<a class="tooltip" title="PETUNJUK ATAU KETERANGAN ARTIKEL" href="ULR ARTIKEL" target="_blank"><img src="ULR IMAGE" width="100px" height="100px"></a>

Nah...., mudah kan....?

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :

Cara membuat slide dengan efek marquee

Animasi slide foto atau gambar dengan menggunakan efek marquee, tidak kalah menarik bila dibanding dengan animasi flash. Selain lebih ringan, animasi slide ini dilengkapi efek onmouseover, sehingga pada saat pointer mouse diletakkan diatas salah satu gambar atau foto yang sedang berjalan secara otomatis akan berhenti. Dan pada saat itu pula terjadi efek transform yang mengakibatkan gambar menjadi berukuran lebih besar. Dan pada saat bersamaan apabila pointer mouse ditahan beberapa saat diatas gambar, maka akan muncul sebuah "tooltip" atau catatan mengenai gambar - gambar tersebut.

Berikut bentuk animasi slide dengan efek marquee :

Bila anda berminat untuk memasang animasi ini pada web atau blog anda, silahkan ikuti langkah - langkah berikut ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<!-- begin Tooltips --> <script type='text/javascript'> $(document).ready(function(){ $("a.tooltip").easyTooltip(); }); </script> <script type='text/javascript'> //<![CDATA[ (function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'> "+content+"</div> ");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery); //]]> </script> <!-- end tooltips --> <style type="text/css"> <a href="http://www.carabuatwebgratis.com/2011/05/cara-membuat-slide-dengan-efek-marquee_04.html"/></a> div.animasislide{margin 2px; padding-top:6px; border: 5px solid #D8D8D8; border-style:double; background-color:#F2F2F2; width:auto; float:left; text-align:center;} div.animasislide img{margin:3px; width:100px; height:100px; border: 3px solid #D8D8D8; border-style:double; transition:width 2s; -moz-transition:width 2s; /* Firefox 4 */-webkit-transition:width 2s; /* Safari and Chrome */-o-transition:width 2s; /* Opera */} div.animasislide a:hover img{width:200px; height:100px;} </style>

6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Animasi slide foto atau gambar pada halaman depan blog anda.
Perhatikan langkah berikut :
1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget


3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript







4. Copy dan paste kode dibawah ini pada gadget tersebut :
 

<div id="tooltip"> <a href="http://www.carabuatwebgratis.com/2011/05/cara-membuat-slide-dengan-efek-marquee_04.html"/></a> <div align="center" class="animasislide"> <marquee direction="left" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="5" width="100%"> <a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a> <a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a> <a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a> <a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a> <a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR >>KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a> </marquee></div> </div>

Catatan :
Diantara kode diatas terdapat kode link seperti berikut :

<a href="ULR ARTIKEL" target="_blank" title="KETERANGAN ARTIKEL ATAU GAMBAR  &gt;&gt;KLIK UNTUK MEMBACA ARTIKEL INI."><img src="ULR GAMBAR" /></a>

Silahkan ganti ULR ARTIKEL , KETERANGAN ARTIKEL ATAU GAMBAR , dan  ULR GAMBAR, milik anda.

5. Simpan.

Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya......, Terima kasih.

Baca artikel lain :