Cara pasang meta tag lengkap

Menambahkan meta tag sangat berfungsi mendapatkan lebih banyak lalu lintas dari mesin pencari seperti google, yahoo, msn, dll, terutama yang paling penting deskripsi meta.

Meta tag adalah tag yang menjelaskan web ataupun blog kita dan memberitahu pada search engine tentang seluruh isi yang ada pada web ataupun blog kita. Pasang meta tag merupakan faktor penting dalam SEO. (Search Engine Optimisation) Meta tag memungkinkan mesin pencari untuk mengindeks halaman web ataupun blog kita lebih akurat.. Dengan kata lain, Meta tag berkomunikasi dengan mesin pencari dan memberitahu informasi lebih lanjut tentang web ataupun blog kita dan mesin pencari mengindeks secara benar dan akurat.

Kali ini saya bagikan cara lengkap pasang meta tag, mengingat ada permintaan sobat blogger yang menginginkan pasang meta tag lebih lengkap, .... tak masalah, sebab setiap hari memang selalu saja ada yang masih belajar blog. Bagi yang belum baca cara yang lebih sederhana, silahkan anda baca DISINI

OK....., silahkan anda ikuti 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='DESCRIPTION' name='description'/>
<meta content='KEYWORDS' name='keywords'/>
<meta content='NAMA PENULIS' name='author'/>
<meta content='all,follow' name='robots'/>
<meta content='General' name='Rating'/>
<meta content='never' name='Expires'/>
<meta content='Indosesia' name='Language'/>
<meta content='Global' name='Distribution'/>
<meta content='INDEX,FOLLOW' name='Robots'/>
<meta content='4 Days' name='Revisit-after'/>

6. Simpan Template

Saya ingatkan kembali, 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 ataupun 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 memberi tombol Google +1 dan tombol share blogger

Pada bulan maret yang lalu Google telah meluncurkan tombol baru yang disebut dengan "tombol Google +1", dan tombol tersebut kini sudah berjejer dengan tombol share bawaan dari blogger. Tombol Google +1 sangat berguna bagi para blogger untuk Optimasi SEO sebab tombol Google +1 selain sebagai cara untuk membantu berbagi konten web ataupun artikel post juga membuat pencarian yang lebih personal dan relevan.
Bagi teman blogger yang belum mengaktifkan tombol Google +1 dan tombol share bawaan blogger, saran saya sebaiknya segera diaktifkan, mengingat tombol Google +1 sangat bagus untuk mendukung Optimasi SEO.
Silahkan anda bisa lihat cara kerja "tombol Google +1" pada video berikut :

Bila anda berminat, silahkan ada ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan dan pilih Elemen Laman

3. Pada bagian Posting Blog, silahkan anda Klik Edit

4. Silahkan anda beri tanda centang pada bagian tombol share seperti gambar dibawah ini :

Catatan : Bagi yang sudah mengaktifkan tombol share ini, silahkan lewati langkah ini.

5. Jangan lupa Klik SIMPAN

Langkah selanjutnya tinggal penempatan Tombol Google +1 tersebut, akan ditempatkan dibawah posting atau diatas posting. Biasanya bagi yang menggunakan template bawaan blogger tombol share berada dibagian bawah setelah artikel post. Tapi bisa juga menambahkan Tombol Google +1 diatas artikel post.

1. Klik Rancangan.

2. Dan KLik tab Edit HTML.

3. Jangan lupa Klik tombol "Expand Widget Templates"

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

</head>

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

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
{lang: 'en-US'}
</script>

6. Kemudian cari kode di bawah ini atau yang mirip dengan kode ini :

<data:post.body/>

7. Copy kode dibawah ini dan taruh sebelum kode <data:post.body/> :

<b:if cond='data:top.showDummy'>
<div class='goog-inline-block dummy-container' style='float:right;'>
<data:post.dummyTag/></div>
</b:if>

Catatan :

• Taruh kode diatas sebelum <data:post.body/>, bila akan diletakkan diatas artikel post.
• Taruh kode diatas setelah <data:post.body/> , bila akan diletakkan dibawah artikel post.
• Anda  bisa ganti right menjadi left, sesuai selera.

8. SIMPAN TEMPLATE.

Silahkan anda lihat yang ada dibawah artikel ini, silahkan anda coba Klik.


Selamat mencoba ya... 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 mengganti favicon blogger tanpa Edit Html

Fitur baru dari Blogger..... !!,
Bagi sobat blogger yang belum mengganti favicon default dari blogger, kini blogger telah menambahkan fitur baru yaitu kostum favicon atau sebuah gambar kecil atau logo yang ditampilkan di jendela browser dan tab browser. Fitur ini sangat memudahkan pemilik blog atau pengguna blogger untuk mengganti favicon default dari blogger dengan favicon milik kita sendiri, sehingga dapat disesuaikan dengan blog kita masing - masing tanpa harus ribet Edit Html.

OK..., bila blog anda masih menggunakan favicon default dari blogger, anda bisa menggantinya dengan mudah melalui Blogger in Draft, tanpa harus Edit Html.
Silahkan anda bisa ikuti langkah - langkah berikut :

1. Terlebih dahulu, sebaiknya anda siapkan gambar kecil atau logo blog anda dengan format file bisa JPG, PNG, atau file gambar non ICO yang lain, dengan ukuran file maximal 10 kb.

2.Kemudian anda konversi gambar atau logo anda, menjadi file ICO menggunakan layanan gratis konversi online : http://www.icoconverter.com/

Atau anda bisa Klik tombol dibawah ini :

3. Lihat gambar dibawah ini dan ikuti petunjuknya :

Catatan : Simpan file dicomputer.

4. Baru selanjutnya silahkan anda menuju Blogger in Draft milik anda http://draft.blogger.com/.

5. Login dengan akun google anda, kemudian anda akan diarahkan ke Blogger in Draft milik anda.
6. Pada sidebar sebelah kiri, silahkan anda Klik Dashboard pada blog anda yang ingin diganti Faviconnya.

7. Halaman berikutnya pada tab menu sebelah kiri, silahkan anda Klik Layout.

8. Pada gadget Favicon, Klik Edit :

Lalu muncul jendela baru seperti gambar berikut :

9. Upload file gambar atau logo yang sudah di konversi menjadi file ICO tadi, dan Klik SIMPAN.
10. Kemudian terlihat seperti gambar dibawah ini :

11. Klik lagi tombol SIMPAN
12. Langkah terakhir, Pada bagian paling bawah jangan lupa Klik tombol SAVE ARRANGEMENT.

Selesai..... Sekarang silahkan anda Sign out dan buka blog anda serta lihat hasilnya.

Selamat mencoba ya... 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 multi tab

Multi tab ini berisi beberapa konten yang bisa kita isi apa saja seperti video, gambar, slide foto, daftar isi, daftar link, dll. Dengan menggunakan multitab ini, kita dapat menghemat tempat yang ada pada halaman depan blog kita. Silahkan anda bisa lihat contoh bentuk multi tab yang ada dibawah ini, disitu terdapat tiga konten : Multi Tab 1, Multi Tab 2, dan Multi Tab 3. Tapi anda bisa menambah tab sesuai kebutuhan dan disesuaikan lebar sidebar template anda tentunya.

TUTORIAL BLOG

• Cara menambah tombol feed pada label / kategori
• Cara mengubah Tag Heading untuk optimasi SEO pada blog
• Cara membuat menu tooltip
• Cara membuat code color picker interaktif
• Cara membuat tab menu Accordion
• Cara membuat gambar memutar
• Cara agar blog cepat diakses dengan HP
• Cara mengganti forum komentar blogger dengan Disqus
• Cara mengganti forum Komentar Blogger dengan IntenseDebate
• 5 Tampilan Dinamis dari blogger
• Cara menambah gadget pada Header
• Cara submit sitemap blog
• Cara memberi Meta Tag pada blog
• Cara memberi meta tag pada setiap posting
• Cara memasukkan Blog ke Facebook
• Cara membuat Read More otomatis
• Cara membuat Tooltip
• Cara membuat slide dengan efek marquee
• Cara membuat efek membesar pada gambar
• Cara membuat gambar melayang
• Cara membuat efek transparan pada gambar
• Cara membuat daftar isi menggunakan efek marquee
• Cara membuat daftar isi dengan drop down
• Cara Membuat Link Dalam Satu Halaman
• Cara membuat background warna gradasi
• Cara membuat tombol scroll "To Top"
• Cara pasang tombol share
• Cara mencari kode HTML
• Cara membuat Blog menjadi Dofollow
• Cara membuat textarea dengan tombol "select all"
• Cara membuat effek scroll pada Titel Bar
• Cara membuat tanggal otomatis update
• Cara Membuat Pop-up Window
• Cara Membuat Navigasi Halaman
• Cara Membuat Subscribe email pada blog
• Cara membuat efek shadow pada kotak dan gambar
• Cara Membuat Tabel (Tahap 2)
• Cara membuat List pada daftar
• Cara pasang Iklan diatas postingan
• Cara membuat "Embed ULR, HTML, Link Forum" dibawah artikel
• Cara membuat artikel berhubungan
• Cara Menambah widget pengatur Ukuran dan Warna teks pada Blog
• Cara Menambahkan Efek Teks pada Cursor Mouse
• Cara buat kotak Pencarian
• Cara buat Menu navigasi Drop-Down Horisontal
• Cara Membuat Label Animasi "blogumulus"
• Cara membuat Tag Cloud
• Cara Pasang Radio Online
• Cara Membuat label di blog
• Cara membuat Slider
• Cara membuat slideshow
• Cara Membuat variasi Font pada Teks
• Cara Buat Kotak atau Teks Area
• Cara membuat Scroll Box
• Cara Membuat Tabel (Tahap 1)
• Cara membuat Link Terbuka di halaman Baru
• Cara Menambah Gadget diatas Header
• Cara Buat Sitemap / Peta Situs
• Cara buat tabel kode warna
• Cara Membuat Teks Berjalan ( Marquee )
• Cara Membuat Refresh Otomatis pada Blog
• Cara Membuat Rounded Corner
• Cara membuat Text-Shadow
• Cara Memasang Background Gambar pada postingan
• Cara membuat daftar isi otomatis
• Cara Menambah Widget Jam pada Blog
• Cara Membuat Read more
• Cara Menghilangkan Navbar Pada blog
• Cara Membuat Navbar Auto-Hide
• Cara Membuat Forum Login
• Cara Membuat Anti Copy Paste
• Cara Membuat pesan selamat datang
• Cara Membuat Animasi Status Loading
• Cara Membuat Text Area blok Otomatis

CARA BUAT WEB

Cara buat web ternyata tidaklah sesulit yang kita fikirkan. Kita hanya membutuhkan lima langkah mudah, cepat dan gratis. Tak perlu khawatir kalau anda merasa sangat pemula dan belum tahu atau mengerti tentang bahasa programer. Disini saya jabarkan bagaimana Cara buat web dari mulai Cara dapat domain gratis, Cara dapat hosting gratis, Cara seting domain gratis dihosting gratis, Cara dapat template gratis, dan Cara Upload Template gratis.

GAMBAR

Bila anda berminat, silahkan 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> :

<script type='text/javascript'> //<![CDATA[ document.write('<style type="text/css">.tabber{display:none;}<\/style>'); function tabberObj(argsObj) { var arg; this.div = null; this.classMain = "tabber"; this.classMainLive = "tabberlive"; this.classTab = "tabbertab"; this.classTabDefault = "tabbertabdefault"; this.classNav = "tabbernav"; this.classTabHide = "tabbertabhide"; this.classNavActive = "tabberactive"; this.titleElements = ['h2','h3','h4','h5','h6']; this.titleElementsStripHTML = true; this.removeTitle = true; this.addLinkId = false; this.linkIdFormat = '<tabberid>nav<tabnumberone>'; for (arg in argsObj) { this[arg] = argsObj[arg]; } this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); this.tabs = new Array(); if (this.div) { this.init(this.div); this.div = null; } } tabberObj.prototype.init = function(e) { var childNodes, i, i2, t, defaultTab=0, DOM_ul, DOM_li, DOM_a, aId, headingElement; if (!document.getElementsByTagName) { return false; } if (e.id) { this.id = e.id; } this.tabs.length = 0; childNodes = e.childNodes; for(i=0; i < childNodes.length; i++) { if(childNodes[i].className && childNodes[i].className.match(this.REclassTab)) { t = new Object(); t.div = childNodes[i]; this.tabs[this.tabs.length] = t; if (childNodes[i].className.match(this.REclassTabDefault)) { defaultTab = this.tabs.length-1; } } } DOM_ul = document.createElement("ul"); DOM_ul.className = this.classNav; for (i=0; i < this.tabs.length; i++) { t = this.tabs[i]; t.headingText = t.div.title; if (this.removeTitle) { t.div.title = ''; } if (!t.headingText) { for (i2=0; i2<this.titleElements.length; i2++) { headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0]; if (headingElement) { t.headingText = headingElement.innerHTML; if (this.titleElementsStripHTML) { t.headingText.replace(/<br>/gi," "); t.headingText = t.headingText.replace(/<[^>]+>/g,""); } break; } } } if (!t.headingText) { t.headingText = i + 1; } DOM_li = document.createElement("li"); t.li = DOM_li; DOM_a = document.createElement("a"); DOM_a.appendChild(document.createTextNode(t.headingText)); DOM_a.href = "javascript:void(null);"; DOM_a.title = t.headingText; DOM_a.onclick = this.navClick; DOM_a.tabber = this; DOM_a.tabberIndex = i; if (this.addLinkId && this.linkIdFormat) { aId = this.linkIdFormat; aId = aId.replace(/<tabberid>/gi, this.id); aId = aId.replace(/<tabnumberzero>/gi, i); aId = aId.replace(/<tabnumberone>/gi, i+1); aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); DOM_a.id = aId; } DOM_li.appendChild(DOM_a); DOM_ul.appendChild(DOM_li); } e.insertBefore(DOM_ul, e.firstChild); e.className = e.className.replace(this.REclassMain, this.classMainLive); this.tabShow(defaultTab); if (typeof this.onLoad == 'function') { this.onLoad({tabber:this}); } return this; }; tabberObj.prototype.navClick = function(event) { var rVal, a, self, tabberIndex, onClickArgs; a = this; if (!a.tabber) { return false; } self = a.tabber; tabberIndex = a.tabberIndex; a.blur(); if (typeof self.onClick == 'function') { onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; /* IE uses a different way to access the event object */ if (!event) { onClickArgs.event = window.event; } rVal = self.onClick(onClickArgs); if (rVal === false) { return false; } } self.tabShow(tabberIndex); return false; }; tabberObj.prototype.tabHideAll = function() { var i; for (i = 0; i < this.tabs.length; i++) { this.tabHide(i); } }; tabberObj.prototype.tabHide = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } div = this.tabs[tabberIndex].div; if (!div.className.match(this.REclassTabHide)) { div.className += ' ' + this.classTabHide; } this.navClearActive(tabberIndex); return this; }; tabberObj.prototype.tabShow = function(tabberIndex) { var div; if (!this.tabs[tabberIndex]) { return false; } this.tabHideAll(); div = this.tabs[tabberIndex].div; div.className = div.className.replace(this.REclassTabHide, ''); this.navSetActive(tabberIndex); if (typeof this.onTabDisplay == 'function') { this.onTabDisplay({'tabber':this, 'index':tabberIndex}); } return this; }; tabberObj.prototype.navSetActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = this.classNavActive; return this; }; tabberObj.prototype.navClearActive = function(tabberIndex) { this.tabs[tabberIndex].li.className = ''; return this; }; function tabberAutomatic(tabberArgs) { var tempObj, divs, i; if (!tabberArgs) { tabberArgs = {}; } tempObj = new tabberObj(tabberArgs); divs = document.getElementsByTagName("div"); for (i=0; i < divs.length; i++) { if (divs[i].className && divs[i].className.match(tempObj.REclassMain)) { tabberArgs.div = divs[i]; divs[i].tabber = new tabberObj(tabberArgs); } } return this; } function tabberAutomaticOnLoad(tabberArgs) { var oldOnLoad; if (!tabberArgs) { tabberArgs = {}; } oldOnLoad = window.onload; if (typeof window.onload != 'function') { window.onload = function() { tabberAutomatic(tabberArgs); }; } else { window.onload = function() { oldOnLoad(); tabberAutomatic(tabberArgs); }; } } /* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ if (typeof tabberOptions == 'undefined') { tabberAutomaticOnLoad(); } else { if (!tabberOptions['manualStartup']) { tabberAutomaticOnLoad(tabberOptions); } } //]]> </script> <style type='text/css'> .tabberlive{ margin:0; padding:5px; clear:both; background:#f8f8f8; border:1px solid #DDD; } .tabbernav { margin:0; padding: 3px 0; border-bottom: 1px solid #ddd; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:bold; } .tabbernav li { list-style:none; margin-right:5px; display:inline; } .tabbernav li a { padding:3px 0.5em; margin-right:1px; border:1px solid #DDD; border-bottom:none; background:#6c6c6c; text-decoration:none; color:#ffffff; outline:none; } .tabbernav li a:hover { color:#6c6c6c; background:#ffffff; border:1px solid #DDD; text-decoration:none; outline:none; } .tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover { background:#ffffff; color:#6c6c6c; border-bottom: 1px solid #ffffff; outline:none; } .tabberlive .tabbertab { padding:5px; border:1px solid #DDD; border-top:0; background:#ffffff; } .tabberlive .tabbertab h2, .tabberlive .tabbertabhide { display:none; } .tabbertab .widget-content ul{ list-style:none; margin:0 0 10px 0; padding:0; } .tabbertab .widget-content li { border-bottom:1px solid #ddd; margin:0 5px; padding:2px 0 5px 0; } </style> <style type="text/css"> div.scrolltutor { background-color:#FFFFFF; width:100%; height:300px; overflow:auto; } </style>

6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Widget 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 class='tabber'>
<div class='tabbertab' id='tab1'>
<h2>MULTI TAB-1</h2>
<div class="scrolltutor">


AREA KONTEN TAB-1


</div>
</div>


<div class='tabbertab' id='tab2'>
<h2>MULTI TAB-2</h2>
<div class="scrolltutor">


AREA KONTEN TAB-2


</div>
</div>

<div class='tabbertab' id='tab3'>
<h2>MULTI TAB-3</h2>
<div class="scrolltutor">


AREA KONTEN TAB-3


</div>
</div>
</div>

Catatam :

Silahkan anda ganti tulisan berwarna merah dengan judul tab milik anda, dan warna biru area daftar, artikel, gambar, video, atau apa saja terserah anda.

5. Simpan.

Selamat mencoba ya...
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 tombol feed pada label / kategori

Dengan memberi tombol feed pada setiap label atau kategori pada blog kita, tentu akan lebih memudahkan bagi pengunjung blog untuk memilih dan berlangganan artikel sesuai dengan label atau kategori yang diinginkan. Tombol ini akan mengarahkan label atau kategori yang dipilih menuju feeds posts default blog kita atau Google home page dan google reader.
Bila anda berminat silahkan anda bisa lihat gambar dibawah ini, dan  ikuti langkah - langkahnya :

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 di bawah ini atau yang mirip dengan kode ini :

<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

Catatan:
Setiap template belum tentu sama, tapi biasanya perbedaan tidak jauh dari kode - kode diatas.

7. Silahkan copy kode dibawah ini, dan silahkan anda sisipkan pada kode diatas :

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

8. Hingga secara keseluruhan akan tampak seperti kode di bawah ini :

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

<a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default/-/&quot; + data:label.name'><img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0'/></a>

<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<span dir='ltr'/>
</li>
</b:loop>

9. Simpan Template.

Nah jadi deh.....,
Selamat mencoba ya...
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 mengubah Tag Heading untuk optimasi SEO pada blog

Tag Heading yang biasa kita kenal dengan h1, h2, h3, h4, h5, dan h6 sangat berpengaruh sekali pada optimasi SEO, dalam hal ini mesin pencari lebih cenderung mengutamakan tag heading h1 dalam mengindek sebuah blog. Sementara pada template blogger, biasanya menggunakan tag heading h2 atau h3. Jadi alangkah baiknya bila kita ingin blog yang kita miliki lebih optimasi SEO, kita perlu untuk mengubah tag heading h2 atau h3 tersebut menjadi tag heading h1, terutama penggunaan tag heading pada judul artikel atau posting. Dan tips ini termasuk salah satu diantara tips SEO yang bagus menurut saya.

Nah bila anda berminat untuk optimasi SEO pada blog anda, silahkan anda bisa 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 di bawah ini atau yang mirip dengan kode ini :

    <b:if cond='data:post.title'>
      <h3 class='post-title entry-title'>
      <b:if cond='data:post.link'>
        <a expr:href='data:post.link'><data:post.title/></a>
      <b:else/>
        <b:if cond='data:post.url'>
          <b:if cond='data:blog.url != data:post.url'>
            <a expr:href='data:post.url'><data:post.title/></a>
          <b:else/>
            <data:post.title/>
          </b:if>
        <b:else/>
          <data:post.title/>
        </b:if>
      </b:if>
      </h3>
    </b:if>

Catatan:
Setiap template belum tentu sama, bisa menggunakan tag h3 atau tag h2

7. Silahkan ganti kode diatas dengan kode dibawah ini :

    <b:if cond='data:post.title'>
      <h1 class='post-title'>
      <b:if cond='data:post.url'>
        <a expr:href='data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h1>
    </b:if>

8. Langkah selanjutnya cari lagi kode dibawah ini atau yang mirip dengan kode ini :

]]></b:skin>

9. Copy kode dibawah ini dan taruh sebelum kode ]]></b:skin> :

.post h1{ border-bottom:0 Dotted #000; margin:-4px 0 0 0; padding:0 0 4px; color:#1c3c6f; font:bold 150%/1.4em impact,"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif } .post h1 a,.post h1 a:visited,.post h1 strong{ display:block; text-decoration:none; color:#333; font-weight:normal; font-family:impact,"Segoe UI",Calibri,"Myriad Pro",Myriad,"Trebuchet MS",Helvetica,Arial,sans-serif;outline:none } .post h1 strong,.post h1 a:hover{ text-decoration:none; color:#333; outline:none }

Catatan :
Anda bisa mengatur style font atau tampilan tampilan judul artikel, dengan merubah nilai besar kecilnya font, warna font, ataupun jenis font, sesuai selera anda.

10. Simpan Template.

Selamat mencoba ya...
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 menu tooltip

Menu yang berbentuk vertikal ini sangat menarik untuk dipasang pada web atau blog kita. Selain berfungsi sebagai daftar isi, tepatnya digunakan untuk daftar link atau kita bisa gunakan menu ini sebagai daftar artikel, menu ini juga dilengkapi dengan tooltip yang berisi gambar dan informasi singkat tentang artikel atau link lain yang ada pada daftar tersebut. Cara membuat menu ini sangat mudah, yang kita perlukan hanya kode HTML dan beberapa kode CSS, tanpa menggunakan Javascript. Berikut ini anda bisa lihat contoh menu tooltip dibawah ini :

Cara membuat code color picker interaktif color picker interaktif dilihat dari bentuk dan fungsinya memang sangat berbeda dengan tabel kode warna yang saya bahas pada waktu yang lalu dalam artikel cara buat tabel kode warna. tabel kode warna yang ini lebih interaktif dan lebih banyak fungsinya, diantaranya adalah kita dapat menyesuaikan warna dengan menyeret panah keatas dan kebawah pada bar warna sebelah kanan, dan dapat menyesuaikan saturation dengan menarik lingkaran kecil disekitar area gradasi. dan pada kotak output disebelah bawah selain muncul kode color hex, juga kode color rgb, dan nilai-nilai hsv, serta dilengkapi sebuah kotak warna yang muncul sesuai dengan warna yang ada pada area gradasi ketika lingkaran kecil ditempatkan pada posisi tertentu.

Cara membuat tab menu Accordion bentuk tampilan tab menu accordion ini sangat menarik, sangat bagus bila kita pasang pada web atau blog kita. tab menu accordion ini dilengkapi dengan efek animasi sliding. yaitu animasi sliding yang bekerja ketika kita mengklik pada salah satu tab menu accordion, maka ketika itu pula muncul sebuah kotak bergerak kebawah yang berfungsi menampilkan sebuah dokumen informasi singkat tentang link yang kita klik tadi.

Cara membuat gambar memutar fitur css memungkinkan kita untuk membuat banyak hal khususnya membuat tampilan halaman web ataupun blog menjadi lebih menarik. pada waktu yang lalu saya sudah banyak mengulas tentang fitur css dan contoh - contohnya. kali ini saya akan berikan contoh lagi tentang bagaimana kita membuat gambar memutar menggunakan css transitions. cara kerjanya sangat sederhana, yaitu ketika pointer mouse diletakkan diatas gambar maka secara otomatis gambar akan memutar dan membesar.

Cara agar blog cepat diakses dengan HP saat ini sudah bukan hal yang baru lagi, orang mengakses internet menggunakan hp. hal ini karena selain hp sudah dilengkapi fitur gprs atau 3g, tapi karena memang sudah banyak situs yang menggunakan fasilitas tersendiri sehingga dapat lebih mudah dan cepat diakses menggunakan hp, misalnya seperti facebook, twitter, yahoo, google, dan lain - lain.

Cara mengganti forum komentar blogger dengan Disqus disqus adalah platform komentar yang membantu membangun komunitas yang aktif dari pengunjung web atau blog kita. forum komentar ini memiliki banyak fitur dan bisa digunakan pada banyak platform seperti wordpress, blogger, tumblr dll, sama seperti forum komentar intensedebate

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.

Gimana... bagus kan...?

OK... bila anda berminat, anda bisa ikuti lankah - 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> :

<style type='text/css'> .tooltp a:link,a:visited{ display:block; float:left; color:#FFFFFF; border:1px solid #ffffff; background-color:#004478; width:220px; min-height: 45px; text-align:left; padding:5px; text-decoration:none; } .tooltp a:hover,a:active { color:#004478; background-color:#B3C0EF; padding:5px; } .tooltp li{ display:block; color:#FFFFFF; border:1px solid #ffffff; background-color:#8797D3; width:245px; min-height: 58px; padding:4px; text-decoration:none; } .tooltp li:hover,li:active { border:1px solid #5867A0; background-color:#5867A0; } a.tooltp { position:relative; z-index:24; text-decoration:none; } a.tooltp span{ display: none; } a.tooltp:hover span.muncul { display: block; position:absolute; float:left; top:-6px; width:200px; border:2px solid #5867A0; border-top-width:134px; border-right-width:5px; border-bottom-width:5px; font-style:italic; color:#004478; background-color:#E9EEFF; margin-left:244px; padding: 10px; } .tooltpimg{ display: block; position:absolute; float:left; top:-128px; margin-left: -9px; width:215px; height:119px; border:2px solid #ffffff; } </style>

6. Simpan Template.

Langkah selanjutnya anda tinggal menampilkan Widget 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 class="tooltp"> <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR) ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li> <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li> <li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li> </div>

Catatam :

• Untuk menambah daftar, anda tinggal menambah kode hiperlink seperti dibawah ini sesuai kebutuhan anda :

<li class="warna"><a href="ULR ARTIKEL ANDA" target="_blank" class="tooltp">JUDUL ARTIKEL ANDA<span class="muncul"><img class="tooltpimg" src="ULR GAMBAR ANDA"/>DISINI INFORMASI SINGKAT ARTIKEL ANDA</span></a></li>

5. Simpan.

Selamat mencoba ya...
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 :