Powered by Blogger.
RSS
Showing posts with label Script code. Show all posts
Showing posts with label Script code. Show all posts

Menambahkan jenis font baru pada blog Blogspot


  • Font adalah jenis atau gaya tulisan.

J   ika Anda user blog blogspot (blogger), Anda bisa mengganti font template blog. Sebenarnya ada beberapa jenis font yang dimiliki blogger yaitu arial, courier, georgia, lucinda grande, times, trebuchet, verdana dan webdings. Sayangnya tipe huruf bawaan Blogger jumlah jenis font sangat terbatas. Sementara mungkin Anda menginginkan font gaya tersendiri - lebih stylis dan elegan.

Font huruf untuk website blog

Kebanyakan template hasil download tidak bisa diedit di perancang template. Tapi jangan khawatir, Anda tidak perlu melakukan sejauh itu untuk menambahkan tipe font pada blog blogspot Anda. Simaklah tutorial berikut ini :

Memilih Jenis Font

daftar tipe huruf google Font
  • Jika Anda sudah menemukan huruf yang anda sukai, misalnya, saya memilih Tangerine (seperti gambar diatas). Maka lakukan klik tombol biru “Add to Collection pada bagian sudut kanan bawah sampel huruf yang Anda pilih. Silahkan pilih lebih dari satu huruf jika diperlukan.
  • Jika anda sudah selesai memilih huruf, silahkan klik tombol Use
tombol use google font
  • Anda akan dialihkan ke halaman baru. Pada halaman baru ada 2 hal yang harus anda lakukan

    • Pertama, pilih jenis ketebalan huruf yang diinginkan. aaberi centang diantara 2 kotak pilihan. Jika Anda beri tanda centang kotak Normal dan kotak Bold, maka akan semakin berat loading halaman anda nantinya.

page load blog blogger

1. Choose the styles you want:

  • Normal 400

  • Bold 700

2. Choose the character sets you want:

  • Latin (latin)


Kemudian kopi kode dari Google Font (seperti gambar di bawah ini, kode ini hanya contoh saja tidak perlu anda kopi).

<link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'>

add this code to your website


Menambahkan Font Pada Blog

  • Jika sudah menyelesaikan tahapan di atas sekarang masuk ke account blogger Anda.
  • Pilih menu Template > Edit HTML
  • Ikuti instruksi ini:
  • Instructions: To embed your Collection into your web page, copy the code as the first element in the <head> of your HTML document.
  • Maksudnya : Letakkan snippet yang didapat (seperti gambar diatas) atau paste kode yang tadi anda copy tepat dibawah <head>
  • Jangan lupa untuk menambahkan kode / sebelum penutup > kode tersebut. Hasilnya akan terlihat seperti contoh di bawah
  • <head>
    <link href='http://fonts.googleapis.com/css?family=Tangerine:400,700' rel='stylesheet' type='text/css'/>
  • Simpan Template

Penggunaan Font Baru

Sekarang setelah selesai melakukan langkah langkah sebelumnya anda tinggal memanfaatkan font baru.  Saya akan mengganti jenis huruf pada nama blog saya – “WEBSITE DESIGN” dengan membuka dokumen HTML di bagian ini :

Semula :
#header h1{color:ff38b3;margin-top:-14px;margin-left:450px;margin-right:200px;padding:0px 0px 0px 10px;font-family:Arial, Helvetica, Sans-serif;font-weight:bold;font-size:60px;line-height:50px}

nama website design lama
Menjadi :
Title website design baru

#header h1{color:ff38b3;margin-top:-14px;margin-left:450px;margin-right:200px;padding:0px 0px 0px 10px;font-family:Tangerine, Helvetica, Sans-serif;font-weight:bold;font-size:85px;line-height:50px}



Good luck!

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Rich snippets testing : uji coba data terstruktur website



Berawal dari usaha cari tahu, apa yang error pada blog http://breakdown-cover-cheap.blogspot.com sehingga sampai hari ini di-reject Google Adsense. Semua badlink sudah dihapus, begitu juga semua snippet yang saya tambahkan ke file template blogger – yang dulu dipasang untuk SEO dengan harapan meningkatkan visitor dan memperbaiki pagerank. Tapi masih saja ini ditolak untuk ketiga kalinya dalam bulan September 2011.

Saya temukan ERROR ketika cek URL blog dengan fitur baru Webmaster Tools - rich snippets testing tool (Alat Uji Coba Data Terstruktur).  Penjelasan resmi dari Google Webmaster tentang alat ini :

  • Gunakan - Rich snippets testing tool untuk memeriksa apakah Google dapat mengurai markup data terstruktur dengan benar dan menampilkannya dalam hasil penelusuran.
Penggunaan fitur ini dengan cara klik link di atas, ketik URL blog lalu klik PRATINJAU seperti DIBAWAH ini :

uji data terstruktur website blog


Setelah sebelumnya saya membuat komentar dengan reply yang berbeda warna untuk admin  ternyata membuat hcard errors = Missing required field "name (fn)" terjadi pada blog saya.  Hasil analisa blog memunculkan 7 postingan di blog saya Error seperti di bawah ini :

error post blog

Warning: Missing required field di Rich Snippets Testing Tool ini banyak didapati pada blog Blogger, tapi banyak blogger tidak ambil pusing. Padahal setiap error seharusnya diatasi karena akan mempengaruhi kredibilitas blog di hadapan si penentu posisi (Pagerank) pada mesin pencari, khususnya Google.

Jika pada Rich Snippets Testing Tool terdapat tulisan warning berwarna merah, Itu akan dibahas disini. Untuk mengatasi masalah Warning : Missing required field "updated" dan Warning: Missing required hCard "author" dilakukan dengan cara menambah meta data berikut pada file template blogger (HTML) :

<div class='vcard' id='hcard- Nama anda'>
<span class='fn n'>
<span class='given-name'>Posted by: nama anda</span>
</span>
</div>
<a class='updated' href=' http://namablog.blogspot.com/ ' rel='bookmark'>namablog,</a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>

Anda ingin langkah lebih detail atau Anda masih pemula sebagai Blogger, ikuti tahapan rinci di bawah ini :

Langkah 1

Masuk ke dashboard blogger  >> Desain >> Edit HTML.   Jangan lupa centang 'Expand Template Widget', untuk keselamatan, disarankan untuk "Download Full Template" dan SAVE  template ke hard disk Anda.

Langkah kedua

Cari kode di bawah ini :
  • <data:post.body/>
    <div style='clear: both;'/><!-- clear for photos floats -->
    </div>
    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
    </div>
    </b:if>

Langkah ketiga

Memasukan kode meta data tadi di antara code yang baru saja kita cari di langkah ke-2, sehingga menjadi seperti ini :

<data:post.body/>
<div style='clear: both;'/><!-- clear for photos floats -->
</div>
<div class='vcard' id='hcard- Nama anda’>
<span class='fn n'>
<span class='given-name'>Posted by: Nama anda</span>
</span>
</div>
<a class='updated' href=' http://namablog.blogspot.com/ ' rel='bookmark'>nama blog</a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

Langkah keempat

SAVE dan lihat hasilnya pada test - rich snippets testing tool (Alat Uji Coba Data Terstruktur).

Penjelasan

Pada setiap template adanya error tersebut akan berbeda-beda dan tutorial diatas adalah untuk mengatasi error seperti contoh di atas yaitu adanya 3 unsur error;
1. error Hcard
2. error name (fn)
3. error updated

Jika blog mengalami salah satu error di atas, maka Anda cukup mengatasi dengan langkah di bawah ini :
1.   Untuk error Hcard silahkan cari kode yang mengandung <div class='vcard' id='hcard- Nama anda’>
       Mungkin setiap template berbeda-beda, jadi dalam pencarian focus saja pada kode vcard dan Hcard
       Jika tidak ada, masukkan kode <div class='vcard' id='hcard- Nama anda’> seperti tutorial di atas.
2.   Untuk error name (fn) caranya seperti di atas anda tinggal cari kode <span class='fn n'> dan jika tidak
       ada ikuti saja tutorial di atas.
3.   Untuk error updated, silahkan cari kode seperti di bawah ini :

<a class='updated' href=' http://namablog.blogspot.com/ ' rel='bookmark'>nama blog</a> Updated at: <abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr> </a>

Pada sebagian template kodenya seperti di bawah ini :

<a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>

Jika ada kode seperti diatas, maka cukup mengganti kode timestamp-link dengan updated. Dan yang seperti ini yang paling banyak ditemukan pada blog yang ada sekarang.

Mengapa Tool ini SANGAT PENTING?

Saya menjawabnya dengan praktek seperti di bawah ini :
Masuk ke penggunaan tool dengan klik link ini : Rich snippets testing tool
Tool richsnippets google webmaster tools

Silahkan URL blog/web Anda dimasukkan dan lihat hasilnya. Jika Anda menemukan ini :

contoh hasil Tool richsnippets
Maka ini sangat fatal karena blog/web Anda tidak terdeteksi adanya data author dan publisher. Dan ini sangat tidak bersahabat dengan SEO.  Idealnya Anda menemukan hasil seperti di bawah ini :

contoh hasil Tool richsnippets

SEMOGA BERMANFAAT


  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

website toko online Prestashop : navigasi footer – Bagian 2



Bagian ini adalah kelanjutan bagian I modifikasi menu navigasi footer halaman website toko online Prestashop. Pada bagian pertama membicarakan pemahaman dasar bagaimana mengubah footer dan file website mana yang harus diubah.

Kita tahu sistem navigasi website sangat vital bagi kenyamanan pengunjung. Navigasi baik akan memudahkan mereka mencari dan menelusuri content website. Menu-menu navigasi horizontal bisa ditempatkan di bagian header, menu navigasi horizontal bisa ditempatkan dalam kolom kiri dan lebih banyak lagi yang lebih suka ditempatkan pada kolom kanan.

Default footer bar Prestashop

Untuk edit footer silahkan buka file public_html/modules/blockcms/blockcms.tpl di Control Panel Anda seperti dibawah ini :

=============================================================

{if $block == 1}
    <!-- Block CMS module -->
    {foreach from=$cms_titles key=cms_key item=cms_title}
        <div id="informations_block_left_{$cms_key}" class="block informations_block_left">
            <h4><a href="{$cms_title.category_link}">{if !empty($cms_title.name)}{$cms_title.name}{else}{$cms_title.category_name}{/if}</a></h4>
            <ul class="block_content">
                {foreach from=$cms_title.categories item=cms_page}
                    {if isset($cms_page.link)}<li class="bullet"><b style="margin-left:2em;">
                    <a href="{$cms_page.link}" title="{$cms_page.name|escape:html:'UTF-8'}">{$cms_page.name|escape:html:'UTF-8'}</a>
                    </b></li>{/if}
                {/foreach}
                {foreach from=$cms_title.cms item=cms_page}
                    {if isset($cms_page.link)}<li><a href="{$cms_page.link}" title="{$cms_page.meta_title|escape:html:'UTF-8'}">{$cms_page.meta_title|escape:html:'UTF-8'}</a></li>{/if}
                {/foreach}
                {if $cms_title.display_store}<li><a href="{$link->getPageLink('stores.php')}" title="{l s='Our stores' mod='blockcms'}">{l s='Our stores' mod='blockcms'}</a></li>{/if}
            </ul>
        </div>
    {/foreach}
    <!-- /Block CMS module -->
{else}
    <!-- MODULE Block footer -->
    <ul class="block_various_links" id="block_various_links_footer">
        <li class="first_item"><a href="http://website-download.blogspot.com/2012/06/webdesign-services-layanan-pembuatan.html" title="webdesign"><img src="{$img_lang_dir}6.jpg" alt="webdesign" width="16" height="11" /></a>           </li>
        {if !$PS_CATALOG_MODE}<li class="first_item"><a href="{$link->getPageLink('prices-drop.php')}" title="{l s='Specials' mod='blockcms'}">{l s='Specials' mod='blockcms'}</a></li>{/if}
        <li class="{if $PS_CATALOG_MODE}first_{/if}item"><a href="{$link->getPageLink('new-products.php')}" title="{l s='New products' mod='blockcms'}">{l s='New products' mod='blockcms'}</a></li>
        {if !$PS_CATALOG_MODE}<li class="item"><a href="{$link->getPageLink('best-sales.php')}" title="{l s='Top sellers' mod='blockcms'}">{l s='Top sellers' mod='blockcms'}</a></li>{/if}
        {if $display_stores_footer}<li class="item"><a href="{$link->getPageLink('stores.php')}" title="{l s='Our stores' mod='blockcms'}">{l s='Our stores' mod='blockcms'}</a></li>{/if}
        <li class="item"><a href="{$link->getPageLink('contact-form.php', true)}" title="{l s='Contact us' mod='blockcms'}">{l s='Contact us' mod='blockcms'}</a></li>
        {foreach from=$cmslinks item=cmslink}
            {if $cmslink.meta_title != ''}
                <li class="item"><a href="{$cmslink.link|addslashes}" title="{$cmslink.meta_title|escape:'htmlall':'UTF-8'}">{$cmslink.meta_title|escape:'htmlall':'UTF-8'}</a></li>
            {/if}
        {/foreach}
        <li class="last_item">{l s='Powered by' mod='blockcms'} <a href="http://www.prestashop.com">PrestaShop</a>&trade;</li>
    </ul>
    <!-- /MODULE Block footer -->
{/if}

=============================================================

Membuat menu navigasi sendiri di footer bar

Prestashop memberi keleluasaan untuk membuat modifikasi footer bar sendiri dan Anda pun dapat melakukannya. Berikut ini contoh toko online pesanan client saya www.bajuditoko.com

Screenshot toko online MYTOKO-juli-2012

Untuk membuat menu navigasi footer milik Anda sendiri – bagian mana yang harus dimodifikasi?  Untuk membuat menu footer bar Anda bisa melakukan perubahan snippet diantara ini.
    <!-- MODULE Block footer –>     dan     <!-- /MODULE Block footer –>
Langsung saja praktek, saya membuat menu footer bar untuk toko online bajuditoko.com seperti ini :

Screenshot-bagian-footer-toko-online

Saya ubah kode html diantara  <!-- MODULE Block footer –> dan <!-- /MODULE Block footer –>
menjadi seperti dibawah ini :

=============================================================

            <!-- MODULE Block footer -->
<table style="margin: 0 0px auto" cellspacing="0" cellpadding="0" align="center" width="980px">
    <tbody>
        <tr>
                <table cellspacing="0" cellpadding="0" bgcolor="#0072ab" align="center" width="980px">
                    <tbody>
                    <tr>
                        <td background="#0072ab" height="41" width="980px" align="center">
                                <ul class="block_various_links" id="block_various_links_footer" >
<li class="first-item"><a href="http://website-download.blogspot.com/2012/06/webdesign-services-layanan-pembuatan.html" title="Prestanesia"><font color="white"><strong>WebDesign</a>&trade;</strong></font></li>
<li class="item"><a href="http://bajuditoko.com/cms.php?id_cms=4" title="Tentang kami" title="About us"><font color="white"><strong>Tentang kami</strong></font></a></li>   
<li class="item"><a href="http://bajuditoko.com/contact-form.php" title="Hubungi kami"><font color="white"><strong>Kontak</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/new-products.php" title="Produk baru"><font color="white"><strong>Produk Baru</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/cms.php?id_cms=8" title="How To Order"><font color="white"><strong>Cara Berbelanja</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/cms.php?id_cms=1" title="Delivery"><font color="white"><strong>Pengiriman</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/prices-drop.php" title="Spesial"><font color="white"><strong>Spesial Discount</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/cms.php?id_cms=9 title="faq"><font color="white"><strong>F.A.Q</strong></font></a></li>
<li class="item"><a href="http://bajuditoko.com/sitemap.php" title="sitemap"><font color="white"><strong>Sitemap</strong></font></a></li>
<li class="item"><a href="#" title="Legal Notice"><font color="white"><strong>Legal Notice</strong></font></a></li>
<li class="last"><a href="http://bajuditoko.com"><font color="white"><strong>HOME</font></strong></a></li>
<li class="last-item"><a href="http://website-download.blogspot.com/2012/06/webdesign-services-layanan-pembuatan.html"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxVOOoG2aMbeYByArrOeNJG0LujjujB-V_VuZ64haU00Wbp9rO_oLM6vgbLUGwsz37CVRZZMkxvt5kfT3FHIU62O5vTPU-wG9QLQK948IlCRca-iEdKnwpvW28VRhLWzrCYprvN4mHHDE/s0/favorites.png"/></a></li>
                                </ul>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
    <!-- /MODULE Block footer -->
{/if}

=============================================================
Gambar dari snippet kodenya seperti ini:

footer-toko-online-mytoko-olstore-final

Bagaimana cara mendapatkan URL suatu CMS?

Silahkan ke TOOLS>>CMS kemudian menuju ke CMS  <<Tentang Kami>>  pada kolom AKSI klik  "tombol  <<View>>  Maka akan terbuka halaman webpage CMS “Tentang Kami” Silahkan masukkan ke:
<li class="item"><a href="disini” title="Tentang kami" title="About us"><font color="white"><strong>Tentang kami</strong></font></a></li>

Lakukan dengan cara yang sama untuk mendapatkan URL CMS lain.

Catatan :
{/if}  jangan sampai lupa karena sebagai penutup snippet
Kembali ke Bagian Pertama


  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Bagaimanakah Cara Menggunakan Microformats?

 

Microformats atau microdata    adalah konvensi sederhana (dikenal juga sebagai entitas) yang digunakan pada halaman website untuk menggambarkan jenis informasi khusus-misalnya, review, acara (event), produk, bisnis, hotel, restoran, resep atau seseorang (person). Masing-masing entitas punya property (sifat) sendiri. Misalnya, Microdata tentang person (orang) memiliki nama property alamat, nama orang, jabatan (job title), nama perusahaan, dan alamat email.

Pengertian lain Microformats (microdata) adalah seperangkat property (sifat) yang dilekatkan pada tag html standar, yang memungkinkan mesin pencari untuk mengenali bahwa data spesifik yang dilekatkan adalah jenis data tertentu.

Topik artikel ini adalah bagaimana menggunakan microdata untuk menampilkan informasi yang diperluas (extended information) di halaman hasil pencarian search engine, yang disebut Rich Snippets (Cuplikan Kaya).  Banyak blogger atau pengelola website mungkin ingin menampilkan data tambahan di halaman hasil pencarian SERP, seperti kita dapat dilakukan dalam 3 contoh gambar di bawah ini.

Pernahkah Anda melihat halaman hasil pencarian mesin pencari (SERP) seperti di bawah ini?

micro1-contoh rich snippet microdata 

Atau mungkin seperti gambar di bawah ini?
contoh rich snippet microformats
Atau ini?
tiga macam rich snippet microformats

Untuk menamplkan hasil pencarian untuk website seperti ketiga gambar diatas, Anda membutuhkan beberapa tuning (penyesuaian) tambahan pada situs Anda. Tidak terlalu sulit untuk melakukan, tetapi pengetahuan dasar tentang HTML sangat diperlukan.

This article is targeting more advanced users, who have some knowledge in HTML and preferably in PHP. Otherwise, it will be very hard for you to figure out how to do it.

Marking up data menggunakan microformats

Secara umum, Microformats menggunakan atribut class dalam tag HTML (sering tag yang digunakan adalah <span> atau <div>) untuk menetapkan nama singkat dan deskriptif pada entitas dan property entitas tersebut. Berikut ini contoh blok HTML yang menampilkan informasi kontak dasar untuk Bob Smith.

(source Google : http://support.google.com/webmasters/bin/answer.py?hl=id&hlrm=en&answer=146897)
<div>
<img src="www.example.com/bobsmith.jpg" />
<strong>Bob Smith</strong>
Senior editor at ACME Reviews
200 Main St
Desertville, AZ 12345
</div>

Berikut ini HTML marked up dari code HTML diatas dibuat menggunakan hCard (Person) microformat.

<div class="vcard">
<img class="photo" src="www.example.com/bobsmith.jpg" />
<strong class="fn">Bob Smith</strong>
<span class="title">Senior editor</span> at <span class="org">ACME Reviews</span>
<span class="adr">
<span class="street-address">200 Main St</span>
<span class="locality">Desertville</span>, <span class="region">AZ</span>
<span class="postal-code">12345</span>
</span>
</div>

Cara kerja Microformats

Bagaimana cara kerja Microformats diatas?
  • Pada baris pertama, class="vcard" mengindikasikan bahwa HTML tercakup dalam tag <div> yang menerangkan tentang seseorang (person). (Microformat yang digunakan untuk menerangkan tentang seseorang “dipanggil” hCard dan disebutkan dalam HTML sebagai vcard. Catatan disini tidak ada salah ketik ditulis apa adanya!.)
  • Contoh diatas menjelaskan property-property item Person (properties of the Person item), seperti adanya sebuah foto, nama, title, organisasi, dan alamat. Untuk pemberian label property-property tentang Orang diatas dijelaskan dengan vcard, setiap elemen berisi SATU property dari semua property ini (seperti <span>, <img>, atau <title>) diberikan 1 atribut class yang mengindikasikan sebuah property.
    Sebagai contoh, fn menjelaskan sebuah nama seseorang; title jabatan (job title).
    (The Help article for each information type includes a full list of recognized properties.)
  • Property dapat berisi property-property lain.
    Dalam contoh diatas, property adr menjelaskan address atau alamat orang (dalam contoh diatas), dan meliputi di dalamnya subproperty alamat jalan (street-address), localitas, wilayah dan code pos.
  • Non visible content. Google tidak akan menampilkan content (microdata) yang tidak dapat dilihat oleh pengguna atau pengunjung website. Google tidak menunjukkan content (microformats atau microdata) ke pengguna dengan cara penggunaan teks tersembunyi untuk menandai informasi secara terpisah untuk mesin pencari dan untuk aplikasi web. Hasil tampilan HTML sebelum dan sesudah disisipkan Rich Snippets ditampilkan sama persis di webpage. Lihat tampilan “AVATAR” tampilan sama di webpage sebelum dan sesudah disipkan rich snippets di URL ini : A Basic Understanding and Use of Microdata for SEO
  • Anda harus mark up teks yang benar-benar muncul untuk pengguna website Anda ketika mereka mengunjungi webpage.
Untuk contoh lain, lihat Nested entities.
dalam situasi tertentu mungkin perlu mensupply informasi detail ke mesin pencari, meskipun Anda tidak menginginkan informasi tersebut dapat dilihat pengunjung website.

Misalnya, menyediakan informasi rinci derajat lintang dan bujur suatu lokasi (tempat) dapat membantu Google memastikan bahwa itu benar dipetakan, memberikan tanggal event dalam format tanggal ISO dapat membantu memastikan bahwa itu muncul dengan benar dalam SERP. Dalam hal ini Anda dapat menggunakan Microformats pola nilai kelas (value class pattern).

Pertimbangkan contoh ini :

<span class="dtstart">
<span class="value-title" title="2009-10-15T19:00-08:00" />
15 October, 7PM
</span>

Dengan melingkupi <span class="value-title" title="2009-10-15T19:00-08:00" />   dalam blok berlabel class="dtstart", Anda menunjukkan bahwa parser rich snippets harus menggunakan nilai dalam judul atribut untuk menemukan tanggal awal acara (event). Tanggal dalam judul atribut dapat direpresentasikan dengan menggunakan format tanggal ISO tanpa mempengaruhi cara ditampilkannya tanggal ke pengguna website.

Untuk specific vocabulary dan examples, silahkan lihat link ini:
Untuk memeriksa markup, gunakan structured data testing tool.

Item types dan item properties

Ada berbagai jenis item. Semua item bisa ditemukan pada proyek microdata Bing, Yahoo dan Google: http://schema.org

Berikut ini daftar jenis konten yang didukung http://schema.org/docs/schemas.html. Ketika mengklik pada masing-masing, Anda mungkin menemukan item property yang perlu ditambahkan ke HTML. Beberapa item utama meliputi: events, recipes, place, local business, aggregate offer, product etc.

Misalnya saat ini Anda bekerja pada template resep, maka direkomendasikan memulai dengan itu, seperti contoh di URL ini http://schema.org/Recipe

Notes

Google dan search engine lain tidak menjamin tampilan blog akan disertai Rich Snippet, meski code yang digunakan telah support. Dibutuhkan waktu lama agar website terindeks disertai Rich Snippets. Berdasar pengalaman dan catatan ahli SEO kadang dibutuhkan waktu 6-9 bulan. Bersabarlah!



  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Membuat border style mengelilingi script code


kita akan membuat kotak Script yang menjadi bagian dari teks content (teks artikel) blog atau website. Tujuan pembuatan kotak mengelilingi script code ini adalah agar dapat memperjelas dalam membaca code tersebut karena ada efek highlight. Tentu saja ini menjadi lebih menarik bila dibandingkan latar belakang tulisan script polos apa adanya.

Caranya mudah. Anda hanya perlu menambahkan code CSS dan HTML di bawah ini ke dalam template, maka setiap kali ada posting yang akan ada di dalamnya script, maka script tersebut akan berada di dalam kotak.

Bagaimana caranya?

  1. Login dulu ke blogger
  2. Pilih Design/Rancangan
  3. Klik Edit HTML
  4. Cari Kode ]]></b:skin> dengan cara sangat mudah, yaitu Klik CTRL – F  dan  ketik ]]></b:skin>
  5. Letakkan kode dibawah ini persis diatas ]]></b:skin>

/* Alert */
.alert {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #e0ffff;
border: 1px solid #000000;
border-style: dashed }

Anda dapat mengubah-ubah letter berwarna biru (dashed dan #e0ffff) dengan pilihan lain sesuai selera dan warna latar belakang website atau blog. Untuk pilihan selain “dashed” Anda bisa memilih diantara alternatif-alternatif dibawah ini (beserta contoh Border Style yang akan ditampilkan).

Border Styles for website

Agar kode tersebut berfungsi, maka script atau kode yang akan Anda posting pada halaman Source atau Sumber harus diapit dengan kode   <p class="alert"> dan </p>

atau seperti di bawah ini :

<p class="alert"> ISI / SCRIPT KODE DALAM KOTAK</p>

ISI / SCRIPT KODE DALAM KOTAK misalnya ini :

/* Alert */
.alert {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #e0ffff;
border: 1px solid #000000;
border-style: dashed }

Silahkan melihat hasilnya seperti Script yang pertama (diatas gambar Border Style) dengan pilihan “border-style: inset”   Dan jika Script tidak diapit dengan <p class="alert">  dan  </p>, maka hasil tampilan script akan sama seperti tampilan Script persis diatas, yaitu POLOS tanpa border style sama sekali.

Selesai.


Tag Technorati: {grup-tag}

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Animated flying bird Twitter for website -1



Di kalangan Netter (pengakses internet), siapa tidak kenal Twitter? Facebook and Twitter  are both of the most popular Social networking sites in the world.. Tidak berlebihan jika saat ini ada sejumlah widget Twitter, script dan plugins tersedia untuk mengintegrasikan Twitter dengan blog atau website.

Jika Anda pengelola website dan juga punya account Twitter, sebaiknya integrasikan sekarang. Bagi blogger atau pemilik website yang belum punya account Twitter, lakukan registrasi ke Twitter. Mengapa?

Salah satu cara terbaik menemukan new follower account Twitter Anda adalah dengan meningkatkan setiap profil online lain yang mungkin telah Anda miliki. Atau sebaliknya populerkan website atau blog dengan mengintegrasikannya ke Twitter, meskipun sudah Anda lakukan dengan Facebook atau media Social Networking lain.
animasi flying bird blog blogger

Saya menawarkan Script Animated twitter bird follower widget code untuk dipasang ke website. Animasi burung twitter di halaman website ini sangat menarik sekaligus akan meningkatkan jumlah “Follower” account Twitter. Pasti kelak juga akan memberi pengaruh positif terhadap trafik pengunjung website.

  • Plugin ini berbasis Javascript dan akan menampilkan animasi burung Twitter yang mengendap pada tempat-tempat berbeda di area website. Jika Anda scroll (menggulirkan) halaman website (web page), burung “Twitter” terbang menuju bagian yang terlihat dan menetap di tempat baru. Jalur penerbangan acak. Burung Twitter terbang setiap Anda tempatkan kursor dan di atasnya link "Tweet This"  dan "Follow Me." Melalui link ini pengunjung dapat melakukan Tweet artikel yang sedang dibaca atau memutuskan sebagai “Follow You.”
flying twitter for website design blog
Berikut kami berikan script code untuk Burung Terbang Twitter.  Jika situs Anda menggunakan platform Blogger, maka cara mudah, seperti berikut ini :
  1. Klik saja gambar Add to Blogger di bawah ini.
    Click to install Animated twitter widget to your Blog
    Maka Anda akan dibawa ke jendela di bawah ini

    jendela add widget to your blog
  2. Pilih blog yang ingin Anda tambahkan animasi “Flying Bird” dan tentukan judul Widget. kemudian tekan tombol Add Widget. Secara otomatis script code Flying Twitter Bird akan ditambahkan pada halaman editor widget tersebut.

    Script code yang terkandung di dalamnya seperti berikut :

    script code animated flying twitter
  3. SAVE.
CATATAN
Anda bisa edit isi script code sesudah tekan tombol Add widget. Ganti "Your twitter account name" dengan nama pengguna twitter Anda. Anda hanya perlu menambahkan username saja, tapi jangan seluruh URL profil Twitter Anda.
Sebagai contoh  twitterany.com/twitte4u, maka twitte4u adalah username.

TAMBAHAN
Replace "Your Twitter account name" with your twitter user name.You add just the username not the entire URL of your Twitter profile.

For twitter.com/twitte4u,, so twitte4u  is the username.


Happy blogging!

  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Rel=nofollow, spider search engine dan pagerank blog


Penggunaan nofollow untuk mengurangi efektivitas spam di search engine termasuk pada komentar blog sehingga terhindar dari Pagerank leak

Hindarkan “Pagerank Leak” di blog. Anda ingin menambahkan link tetapi tidak ingin kehilangan spider search engine dari web blog atau website? Maka sebaiknya selalu menambahkan teks tambahan berikut dalam a href :

rel="nofollow"

Atribut rel nofollow ini dapat menghindarkan website dari “Leaking Pagerank.”

Apa itu Nofollow?


Nofollow adalah sebuah tag dari atribut rel yang menginstruksikan search engine untuk tidak mengindeks (mengikuti) link yang mengarah ke sebuah halaman atau ke blog (website) lain.


Penggunaan nofollow dimaksudkan untuk mengurangi efektivitas spam di search engine termasuk pada komentar blog.

Mengapa disarankan pakai rel="nofollow" tag?

Atribut Rel=nofollow sesungguhnya bukan meta-tag nyata, tapi lebih merupakan deskripsi html. Ini sering digunakan di blog dan forum. Tetapi juga dimungkinkan menggunakannya di website Anda jika tidak ingin link tertentu (baik link internal maupun link eksternal) harus diikuti.

Jika sebuah link diberikan tag rel nofollow di belakangnya maka search engine tidak akan mengindeks link tersebut atau tidak memberikan backlink ke link tersebut. Robot search engine akan mengindeks posting artikel saja dan bukan link eksternal.

Tujuan penggunaan atribut Nofollow

Penambahan tag rel="nofollow" ini membuat optimal SEO untuk blog kita tetap terjaga dengan baik dan hal ini membuat blog Anda terlihat lebih baik di mata search engine Google.

Dengan menambahkan rel=”nofollow” berarti Anda membiarkan laba-laba tahu bahwa Anda tidak menambahkan link sendiri tapi itu karena ditempatkan oleh blog lain atau forum. 

Ini tidak berarti bahwa spider mesin pencari (robot crawler) akan menolak link. Itu hanya menunjukkan bahwa link tidak ada hubungannya dengan website (blog). Website tidak akan dirugikan dalam kasus ada link ke website Anda dengan rel=”nofollow”

NOTICE :
Cara satu-satunya dengan menambahkan rel="nofollow" dan bukan rev="nofollow" atau ref="nofollow"

Bagaimana cara penggunaan rel="nofollow" dan dampak ke blog?

Tag rel=nofollow dapat digunakan oleh text links (dengan atau tanpa anchor text) dan image (gambar) yang diletakkan di sebelah kiri seperti contoh textlink berikut ini :

<a href://www.testdomain.com/page.html">Kunjungi blog</a>

Setelah penambahan tag ini, maka akan tampak seperti berikut ini :

<a href://www.testdomain.com/page.html" rel="nofollow">Kunjungi blog</a>

Google Spider melihat tag di atas akan seperti ini :
  1. NOT follow this link. It won't mean that your page can't or won't be indexed but this isn't because of the rel=nofollow link. All other links that link to your page (without the nofollow) will be followed.
  2. add NO value to the link in relation to the Page Rank. Page rank is nothing more than how other sites validate external sites to your website. The more votes (or links) are placed to your page, the more change you get being placed higher in the SERPS. The rel=nofollow avoids that the link gets a vote. More about links and the power of linking was reviewed earlier.
  3. add NO value to the anchortext. If you link to a page with keywords that appear on that page and in the title, it WILL add more value to that link, so that is the best way to get more links. With this tag Google will not add any value to the anchor text.

Dimana sebaiknya menambahkan meta tag?

Anda dapat menambahkan meta tag ke semua halaman Web, tidak hanya di halaman indeks pertama saja. Pastikan setiap meta tag yang ditambahkan relevan dengan halaman web. Tambahkan keyword dan frase relevan. Sesuai dengan teks dan bahasa pada halaman tertentu. Mungkin banyak pekerjaan untuk menambahkan meta tag khusus untuk setiap halaman tetapi Anda akan lihat pada waktunya akan bekerja.


Mengubah semua Link Eksternal menjadi Nofollow

Anda ingin mengubah semua link eksternal blog blogger menjadi nofollow secara otomatis :

TUTORIAL :

  1. Login ke akun blogger.com
  2. Pilih Template kemudian Edit HTML
  3. Centang Expand Template Widget
  4. Letakkan kode di bawah ini tepat di atas </head>

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
    <script type='text/javascript'>
    <![CDATA[
    jQuery('a').each(function(){var a=jQuery(this).attr('href');if(typeof a!='undefined'&&a!=""&&(a.indexOf('http://')!=-1||a.indexOf('https://')!=-1)&&a.indexOf(window.location.hostname)==-1){jQuery(this).attr("rel","nofollow")}});
    ]]>
    </script>

  5. SAVE template

Blogger.com sekarang menawarkan fitur tag rel nofollow ketika membuat link saat Anda menulis posting Untuk lebih jelasnya bisa lihat contoh berikut. 

nofollow Blogger website design

Isian teks untuk nama URL Permalink untuk blog Blogger (blogspot) tidak boleh ada spasi dan hanya boleh menggunakan tanda TITIK ( . ) dan tanda-hubung / Hyphen  ( – ).  Selanjutnya Anda perlu memberi tanda “check” (centang) pada kotak Add "rel=nofollow."   dan klik OK.




  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Navigation Blog : Use Related Post in your Website



Thumbnail dibawah Artikel web blog atau website support SEO friendly dan eye-chatching  

“Everyone likes image”

Gambar mengungkap lebih banyak pesan dibanding rangkaian teks pada website atau web blog. Salah satu cara terbaik meningkatkan tampilan blog, sekaligus memudahkan navigasi web blog adalah penggunaan plugin related posts. Pasang saja Related Post dalam kerja website design. Ini membantu meningkatkan tampilan website atau blog blogger sekaligus meningkatkan traffic.

Related Posts untuk blog Blogger & WordPress

Prinsip Related Post akan menambahkan link yang mengarah ke content web blog dengan gambar. Widget ini mudah di-instal dan otomatis mewarisi tampilan & nuansa blog. Kurang 60 detik, reader bisa melihat gambar thumbnail link mengarah ke halaman website.

Kami presentasikan 2 macam Related Posts, versi Outbrain dan versi Aneesh.

Related Post widget versi OUTBRAIN

Saya pernah bikin posting berjudul Related Post under posting by using OutBrain : Easy navigable. Namun pada tulis ulang kali ini saya  tambahkan hal yang baru. Bagaimana memasang Related Post ke website atau blog? Caranya mudah! 
  1. Kunjungi official site Outbrain
  2. Sign-Up (Sign-In, jika Anda pernah registrasi)
  3. Go to bottom of Outbrain Dashboard.
  4. Klik “THE OUTBRAIN WIDGET” menuju halaman "Get Blog Widgets
  5. Pilih Recommendation Type (TEXT atau THUMBNAIL)
  6. Pilih paltform blog (Blogger, WordPress, TypePad, Squarespace, Javascript - “any Platform”)
  7. Isikan URL blog (diawali http://…..), pilih bahasa & centang “I agree.” 
  8. Klik  “INSTALL” atau "Install widget?" jawab YES.

    • After clicking "Install," a new tab will open with your Blogger dashboard. Sign into Blogger account, check the blogs you want to add the widget to. Click "Add widget"


Related Post Widget dengan Thumbnail versi Aneesh

FREE for platform Blogger / Wordpress dan alternatif bagus selain Outbrain related post widget plugin. Aneesh mengembangkan widget yang sama, tapi kode custom Aneesh lebih handal dan customizable. Dengan mudah bisa ditampilkan Related Posts with thumbnail dibawah setiap artikel blog atau website.

Install Related Posts with thumbnail

STEP SATU
  • Login Blogger >> Layout >> Edit HTML. Pilih "The tick-box Expand Widget Templates"
  • Temukan </head>
  • </head> DIHAPUS dan GANTI dengan script berikut

Snippet STEP SATU-Aneesh Related Post

I am Sorry!  Script saya tampilkan berupa image untuk mengurangi load time blog ini. Jika Anda tidak ingin mengetikkan sendiri script seperti terlihat pada gambar, silahkan download dengan klik link :
 

STEP DUA
Temukan kode berikut dalam .
 
<div class='post-footer-line post-footer-line-1'/>

Atau temukan di bawah ini.

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

Sekarang letakkan potongan kode dibawah ini tepat dibawah baris kode yang disebutkan diatas (yang mana saja yang Anda temukan).
 
Snippet STEP DUA-Aneesh Related Post
Jika tidak mau mengetik sendiri script seperti terlihat pada gambar, silahkan download dengan klik link :


SAVE TEMPLATE 

SELESAI

NOTE :
Saya kebingungan ketika pertama memasang Related Posts versi Aneesh di blog Website Design yang sedang Anda baca. Karena saya temukan potongan kode

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

ada baris ke 651 editor HTML template blog dan baris ke 762 seperti berikut :

    <div class='post-footer'>
<div class='post-footer-line post-footer-line-1'/>
<div class='post-footer-line post-footer-line-2'/>
<div class='post-footer-line post-footer-line-3'>

Opsi pertama GAGAL. Opsi ke-2 sukses, yaitu setelah meletakkan snippet tepat dibawah <div class='post-footer-line post-footer-line-1'/>  atau tepat diatas <div class='post-footer-line post-footer-line-2'/>

Modifikasi Related Posts versi Aneesh di website atau blog

Anda boleh memodifikasi kode. Misalnya

Mengubah jumlah "5" Related Posts yang ingin ditampilkan, edit baris berikut (ada pada snippet STEP 1)

var maxresults=5;

Edit judul "Related Posts" dengan teks sendiri, misalnya frase "Artikel Terkait," ubah saja baris berikut

var relatedpoststitle="Related Posts";

Edit warna "#d4eaf2" pada Splitter Line, lakukan edit baris berikut 

var splittercolor="#d4eaf2";

Edit default thumbnail atau URL gambar disini


Jika tidak ada gambar yang ditampilkan, maka lakukan edit baris berikut


Catatan Related post di blog Blogger

Related Posts versi Aneesh di semua page (Homepage & post pages)

Anda hanya perlu menghapus baris berwarna merah baris kedua

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

dan hapus ini  <!-- remove --></b:if>

Happy blogging!

Kedua script diatas juga bisa diperoleh dari [Source]


  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS

Arahkan user Pakai versi WWW atau Non-WWW saja!


Blog tanpa Webpage Default Standar berakibat duplicate content seluruh isi blog.

Duplicate Content

Kesalahan ini sering terjadi karena ketidaktahuan seorang blogger. Secara default domain punya versi WWW dan versi non-WWW. Ini tidak baik dimata search engine. Saya menyadari masalah ini setelah check SEO blog pakai layanan www.lipperhey.com/ (Report dibawah ini).

Tools untuk check Duplicate Content

seo blog report

Saya temukan   “Pages contain unique content”  :  96%   (lihat bagian paling bawah gambar). Padahal masih pada hasil analisis yang sama, tool ini menginformasikan

Duplicate content  : 100% of the pages are unique”

Saya ingin tahu lebih jauh masalahnya.  Saya pakai layanan beberapa situs untuk check masalah copy paste (plagiarism / plagiat content blog).

Report http://plagiarisma.net/ : Seluruh artikel blog ini 100% orisinil. Saya lampirkan laporannya.


report plagiarism checker blog You are using a limited version of plagiarism checker. Please Register, it's free!

Website Design| SEO|web|blog|prestashop|internet|toko online skip to main | skip to sidebar Website Design Get tutorials in css, html, how to, seo, web, web design, blog, website, internet and webstore Willkommen auf mein blog - Yusufzulkarnain s website Best regard. I will do my best to make it interesting and useful.  Greeting to toko online Prestashop! Home Bisnis Goto passive income Insurance Universal Life General Insurance Tips Bisnis Online Bisnis Online Adverts Download Spyware Antivirus Spyware Doctor Malware Fighter Advanced SystemCare Software Internet Download Mgr TuneUp Utilities Important Softwares Dreamweaver CS 5.5 Windows Live Writer Adobe Flash Player 10.3.183.5 Tutorial Software Tips Software Review of Softwares Layanan Situs Gratis Animasi website PDF Converter Tools Webmaster Tools Other Tools Video Internet About Internet Internet Tip dan Trik Internet Cyber Cyber War Cyber Crime Hacker and Cracker Computer About Computer Tip dan Trik Computer Hosting About Hosting Tutorial Hosting SEO About SEO Search Engine Optimization SEO by Google Tip dan Trik SEO Social Media Backlinks Sitemap Do-follow RSS Feeds Burner Meta tags Robot.txt Monetize Paid Per Click Click Per Millie Affiliate Marketing Others Monetize Sell Products Product Reviews Membership Site Tutorial Program Un-Rated Newbie in the blog Breakdown Cover Cover Cheap Inspiring Words Interlude Something beautiful Video Inspiring Quotes Interlude Webstore TOKO ONLINE Macam webstore PRESTASHOP BLOGGERSTORE Referensi Toko Online Script Code Series of HTML Series of CSS Series of Javascript Code Editor Tools Blog Newbie in the Blog Advanced Blogger Navigation Blog Social Media Twitter Web Health Website Development Web Engineering Security Code Editor Tools Advanced System Care FREE TuneUp Utilities Psyware dan Anti virus Info News Informasi Blog Referensi PayPal Social Networking Toko Online Prestashop, Mau? Universal Life WebDesign Sabtu, 22 Juni 2013 Sitemap+RSS Feed: Biarkan Google Crawl Blog

Total 64971 chars (2000 limit exeeded) , 287 words, 1 unique sentences, 100% originality


Apa yang salah?

Tidak adanya Webpage Default Standar penyebab duplicate content

Penyebabnya ditemukan setelah check Duplicate Content pakai layanan http://www.virante.org/

Analisa Hasil Pemeriksaan Duplicate Content oleh Virante

report hasil check duplicate content Virante

Saya mendapati dua PERINGATAN.

Peringatan 1 :   WWW/NonWWW Header Check: FAILED

    • Your site is not returning a 301 redirect from www to non-www or vice versa. This means that Google may cache both versions of your site, causing sitewide duplicate content penalties [SHOW | HIDE].

Masalah : WWW / NonWWW -----> Hasil check Header : GAGAL.

Dikatakannya bahwa : 
“Blog saya tidak mengembalikan 301 redirect dari www ke non-www atau sebaliknya. Ini berarti bahwa Google meng-cache kedua versi situs, www(dot)example(dot)com dan example(dot)com. Jadi ada alasan kuat Google menjatuhkan hukuman karena adanya konten duplikat seluruh situs [SHOW | HIDE].

Saya baru menyadari fakta bahwa 2 bulan lalu, jumlah page terindeks blog tiba-tiba drop dari 1.530 pages menjadi 1310 pages sampai hari ini padahal saya update postingan artikel hampir setiap hari.

Informasi setelah klik link  “SHOW” menunjukkan content informasi yang identik untuk keduanya.

Headers berisi informasi teknis untuk http://www.website-download.blogspot.com

Array
(
    [0] => HTTP/1.0 200 OK
    [1] => Content-Type: text/html; charset=UTF-8
    [2] => Expires: Sun, 23 Jun 2013 12:47:37 GMT
    [3] => Date: Sun, 23 Jun 2013 12:47:37 GMT
    [4] => Cache-Control: private, max-age=0
    [5] => Last-Modified: Sun, 23 Jun 2013 06:37:48 GMT
    [6] => ETag: "062197d0-fb11-4434-bef3-9e22f1519521"
    [7] => X-Content-Type-Options: nosniff
    [8] => X-XSS-Protection: 1; mode=block
    [9] => Server: GSE
)

=====

Headers berisi informasi teknis untuk website-download.blogspot.com

Array
(
    [0] => HTTP/1.0 200 OK
    [1] => Content-Type: text/html; charset=UTF-8
    [2] => Expires: Sun, 23 Jun 2013 12:47:37 GMT
    [3] => Date: Sun, 23 Jun 2013 12:47:37 GMT
    [4] => Cache-Control: private, max-age=0
    [5] => Last-Modified: Sun, 23 Jun 2013 06:37:48 GMT
    [6] => ETag: "062197d0-fb11-4434-bef3-9e22f1519521"
    [7] => X-Content-Type-Options: nosniff
    [8] => X-XSS-Protection: 1; mode=block
    [9] => Server: GSE
)

Peringatan 2 :   Default Page Check: FAILED

    • You have not standardized your default pages meaning the following versions of your url return a 200/OK Header, which may cause duplicate content issues.

Peringatan kedua ini menguatkan peringatan pertama.  Blog saya ini tidak punya HALAMAN DEFAULT STANDAR, artinya versi URL berikut ini mengembalikan  Header 200/OK,  sehingga dapat menyebabkan masalah konten duplikat.

Ekstensi berikut ini bekerja :
http://www.website-download.blogspot.com/index.html
http://www.website-download.blogspot.com/

- Lihat lebih lanjut di :
http://www.virante.org/seo-tools/duplicate-content?domain=www.website-download.blogspot.com&submit=Submit+Your+Domain#sthash.NlxbjuhF.dpuf



  • Digg
  • Del.icio.us
  • StumbleUpon
  • Reddit
  • RSS