SOFTWARE FULL VERSION 2013: HTML Series

Showing posts with label HTML Series. Show all posts

Javascript HTML CSS membangun blog website

1:19 AM | Labels: CSS Series, HTML Series, Javascript, Script HTML CSS Code

Integration of source codes

Website merupakan perpaduan aplikasi source code – Javascript, HTML dan CSS. Mau bukti, silahkan buka source code HTML Editor www.blogger.com. Pada dasarnya source kode dalam Editor Template Blogger merupakan integrasi antara program penulisan dokumen HTML (file html), penulisan presentasi dokumen (file css) dan Javascript (file js) dari JAVA Runtime Environment. Perpaduan ketiga macam kode diilustrasikan seperti berikut :

Javascript

Fungsi javascript digambarkan seperti ilustrasi berikut (berdasarkan pengalaman pribadi) :

Dini hari jam 02.00 di bulan November 2010 saya membuka blog, ingin edit HTML, namun ada masalah, hasil pengeditan HTML tidak bisa di-SAVE sama sekali. Saya segera mengirim email pengaduan ke Blogger. Sehari kemudian saya terima notifikasi dari Blogger ke alamat Gmail bahwa :

fungsi Javascript untuk Editor Template Blogger sedang mengalami masalah dan dalam Maintenance.

Saya menduga. Mungkin saya melakukan pelanggaran Term of Services Blogger tanpa disadari?

Namun saat mencoba Login dengan 2 akun Blog saya yang lain ke Blogger.com ternyata mengalami hal sama. Ada apa dengan 3 akun Gmail saya?. Saya pikir Blogger mungkin sedang Maintenance. Apalagi beberapa teman sesama blogger senasib dengan saya.

Benar dugaan saya. Blogger mengirim Notifikasi bahwa :

Editor Template Blogger sengaja mematikan sementara fungsi Javascript untuk tombol Save Template, tombol Bersihkan Template dan tombol Preview.

Hal ini beberapa kali terjadi sepanjang tahun 2010-2011. Pada bulan Maret 2011, selama 3 hari Blogger ditutup. Berulang lagi pada 1 september 2011. Setelah itu memang ada format me nu yang baru. Fitur Blogger mengalami perombakan. Misalnya fitur Live on Blog berdampingan dengan fitur Mobile (View blog dan View di HP). Di bawah Live on Blog ada fitur Customize dan Edit HTML.

Terkait pemberitahuan Blogger diatas, saya lebih menyoroti pesan tentang keberadaan fungsi Javascript untuk tombol menu Blogger. Artinya tombol tersebut menyiratkan fungsi Javascript.

Mengenal HTML

Hyper Text Markup Laguage seperti teks biasa tetapi memungkinkan dibaca semua Browser (FireFox, IE, Google, Opera) sehingga isi konten berupa kode dapat dibaca dan dieksekusi oleh semua Browser. HTML hanyalah salah satu bahasa penulisan file. Selain HTML juga ada XML dan XTML. Hampir semua penulisan Tag dilengkapi tag awal dan tag akhir. Setiap dokumen file HTML memiliki struktur dasar ini :

<!DOCTYPEhtml>
<html>
<head>
<title>'''Selamat Datang di Blog Saya'''</title>
</head>
<body>
<p>Nama saya Yusuf The Doublehorn!</p>
</body>
</html>

HEAD

Header section diapit tag <HEAD> dan </HEAD>. Snippet ini memuat tag TITLE yang menampilkan judul webpage pada browser. Tag title digunakan untuk memberi suatu mark pada website. Browser menyimpan “title” sebagai bookmark. Dalam searching, title digunakan sebagai keywordnya. Header memuat tag META yang berguna untuk menentukan informasi tertentu mengenai file HTML, misalnya menentukan author name dan keywords pada tag META. Contoh :

<meta name="Yusuf" content="Bisnis takaful online">

ELEMEN BODY

BODY Section diapit tag <BODY> & </BODY> sebagai tubuh (isi) file HTML dimana diletakkan informasi yang akan ditampilkan pada browser.

TAG

HTML tidak membedakan huruf besar atau kecil suatu elemen. Elemen HTML terdiri tag-tag beserta teks yang ada di dalamnya. Tag dinyatakan dengan tanda awal < dan tanda akhir > dan biasanya merupakan pasangan :

1. Tag awal, dinyatakan dalam bentuk <nama tag>
2. Tag akhir, dinyatakan dalam bentuk </nama tag>.

Contoh Format :

<nama tag> teks yang ditampilkan </nama tag>

ATRIBUTE

Tag awal bisa memiliki beberapa atribut yang menyatakan karakteristik tag tersebut. Misal, pada atribut ALIGN : Saat dinyatakan karakteristik alinea rata kiri dan rata kanan. Tag yang digunakan :

<p align=”justify”></p>

Nilai yang bisa menyertai atribut ALIGN ada 4, yaitu : Center, Left, Right dan Justify.

Mengenal Cascading Style Sheet

Isi atau konten blog terdiri 2 bagian :

1. Konten dokumen berupa teks, gambar, video, film, foto, audio dan sebagainya.
2. Berupa format desain untuk presentasi dokumen blog.

Awalnya tampilan dokumen blog diatur dengan membuat tag HTML. Namun kemudian tag tampilan ini dikembangkan lebih jauh menjadi bahasa penulisan kode untuk presentasi dokumen blog yang berdiri sendiri. Dalam praktek 2 penulisan ini - HTML dan CSS - kadang terpisah dan bisa pula terintegrasi. Dalam satu file kode pada website dapat digunakan bahasa HTML dan CSS secara bersamaan.

Jika penulisan terpisah maka akan ada file HTML dan file CSS sendiri-sendiri. Kelebihan penulisan secara terpisah adalah bisa menguraikan kerumitan (kompleksitas) penulisan kode dan juga lebih fleksibel dalam menuangkan ide dalam rekayasa website. Dan lebih memudahkan bagi yang memilki akses ke kode tersebut. Kelebihan lain adalah file CSS bisa direferensikan oleh file HTML.

Cascading Style Sheet merupakan bahasa pemrograman web untuk mengatur style halaman Website sehingga lebih terstruktur dan seragam. CSS merupakan bahasa penulisan kode sama seperti HTML menggunakan teks biasa. Penulisan CSS digunakan untuk mendefinisikan LAYOUT blog, pilihan huruf, warna dan aspek presentasi lain.

Sama seperti styles pada aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, seperti heading, sub-bab, bodytext, footer, images, dan style lainnya untuk digunakan bersama-sama dalam beberapa file. Biasanya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS mengatur size gambar, warna bagian tubuh teks, warna tabel, size border, warna border, warna hyperlink, warna mouseover, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lain.^[1] CSS adalah bahasa style sheet C yang digunakan untuk setting tampilan dokumen blog sehingga memungkinkan kita tampilkan halaman sama dengan format beda.

User HTML, CSS dan Javascript adalah webmaster, web developer, web designer dan pengakses kode Website lainnya. CSS memang diciptakan untuk memecah kerumitan penulisan kode blog atau website dengan memisahkan dan membagi menjadi penulisan file dokumen yang menggunakan HTML dan penulisan bentuk presentasi.

Read User's Comments(0)

Rich snippets testing : uji coba data terstruktur website

9:58 PM | Labels: HTML Series, Script code, Search Engine Optimization, SEO by Google, Trick of SEO

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 :

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 :

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;'/>
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' 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;'/>
</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 + "#more"' 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 :

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 :

SEMOGA BERMANFAAT

Read User's Comments(0)

Bagaimanakah Cara Menggunakan Microformats?

8:15 PM | Labels: HTML Series, Informasi blog, Script code, Search Engine Optimization, SEO by Google

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?

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

Atau ini?

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” 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:

Reviews
People
Products
Businesses and organizations
Recipes
Events
Video (Google mendukung markup video saat ini digunakan hanya untuk meningkatkan hasil pencarian video).

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!

Read User's Comments(0)

Membuat border style mengelilingi script code

6:48 PM | Labels: CSS Series, HTML Series, Script code, Tips Blogger

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?

Login dulu ke blogger
Pilih Design/Rancangan
Klik Edit HTML
Cari Kode ]]></b:skin> dengan cara sangat mudah, yaitu Klik CTRL – F dan ketik ]]></b:skin>
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).

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}Script

Read User's Comments(0)

Widget Chat in Yahoo Messenger di website blog

4:47 PM | Labels: Animation, HTML Series, Informasi blog, Script HTML CSS Code

Jika Admin website atau blog ingin membuka diri terhadap publik, atau membuka komunikasi interaktif, menerima comment dengan respon cepat, akan sangat elok jika website tersebut memasang widget Yahoo Messenger. Komunikasi via YM sangat efektif dan jauh lebih cepat bila dibandingkan dengan e-Mail. Komunikasi lebih hidup di banding dengan Short Message Services (SMS).

Widget ini cocok untuk blog tutorial, marketing, survey, Toko Online seperti webstore yang saya buat untuk client – www.bajuditoko.com. Ketika status Yahoo Messenger terlihat warna kuning (seperti gambar dibawah) di halaman web, artinya, dimungkinkan Anda melakukan komunikasi interaktif.

komunikasi interaktif Yahoo Messenger di blog

Cara pasang di blog tidak berbeda jauh ketika kita memasang widget HTML baru. Lebih dahulu memilih icon Yahoo Messenger sesuai pilihan Anda. Disini masing-masing ada 2 status yang berpasangan, yakni Online status dan Offline status. Anda juga bisa membuat gambar icon sendiri di YM.

Pilih salah satu :

Untuk icon 0-5

Untuk icon 6-8

Untuk icon 9-16

Untuk icon 16-24

Anda sudah punya pilihan icon? Sekarang buka Blogger atau Wordpress. Silahkan buka Design terus klik Page Elements -->Add Gadget --->klik opsi HTML /Javascript

Setelah itu copy dan paste kode dibawah ini :

<a href="ymsgr:sendIM?Id_yahoo_Anda"> <img src="http://opi.yahoo.com/online?u=Id_yahoo_Anda&m=g&t=0&l=us"/></a>

Penting: Dari kode script diatas Anda harus mengganti tulisan Id_yahoo_Anda(di 2 tempat) dengan ID akun yahoo Anda (Ingat! jangan tempatkan alamat email YM (Yahoo) tetapi ID akun) yang sebenarnya. Contoh yusufzulkarnain atau erickthohir.

Tulisan t=0 diganti dengan Kode Status Yahoo yang telah Anda pilih diantara pilihan icon diatas (ganti dengan t=1 atau t=2 atau t=10 atau … t=17 atau … …. ….. t=24).

Save dan lihat hasilnya ....

Read User's Comments(0)

Do not have entire website designed in Flash

11:57 PM | Labels: Flash, HTML Series, Navigation, Search Engine Optimization, SEO by Google, Sitemap, Tip membangun webstore, Tips Blogger, Website Development

Elemen Flash dan SEO Friendly

Bagilah content flash yang berbeda dalam fle terpisah, bukan sebagai satu file besar. Bingkailah elemen flash dalam HTML dan sispkan teks deskriptif untuk SEO blog dan agar diindeks oleh search engine

Pedulikah Anda dengan SEO Friendly? OK. Jangan membuat keseluruhan bangunan website berbasis Flash, saat melakukan kerja website design. Karena menyulitkan website SEO Friendly – bahkan robot crawler Googlebots (terkenal paling canggih) sulit mengindeks content flash. Padahal elemen flash support “eye-chatching” untuk menarik perhatian (mata) pengunjung.

Tujuan utama artikel : untuk mengetahui bagaimana mengoptimalkan website berbasis flash terkait SEO blog. Sementara penggunaan faktor lain - terutama elemen teks - harus ditempatkan pada bagian lebih tinggi dalam daftar prioritas saat membangun website berbasis flash. Artinya tempatkan elemen flash pada prioritas terendah!!!

Bagaimana mensiasati penggunaan elemen Flash?

Cobalah membagi content flash yang berbeda dalam berkas terpisah, bukan sebagai satu file besar

Anda juga dapat melakukan beberapa tindakan dibawah ini.

Add HTML Element to Flash Files

Search engine selalu mencari content teks dan elemen teks di dokumen HTML.karena lebih mudah dibaca oleh robot (Googlebots, Bingbots) daripada elemen flash. Elemen flash tidak menampilkan link eksternal seperti yang HTML lakukan. Ini alasan utama menambahkan content format HTML ke file flash agar bisa diindeks crawler.

Seperti saran diatas (membagi content flash yang berbeda dalam file terpisah), dalam pandangan SEO, file flash akan lebih baik tersajikan ketika dipisahkan dalam file terpisah. Setiap file flash harus punya halaman HTML sendiri. Anda juga harus menanamkan file flash ke HTML, menambahkan data deskriptif ke halaman web (web page) seperti judul halaman, header, tag alt gambar, anchor text and meta data.

Aturan umum :
Pastikan gunakan HTML untuk elemen paling penting dari website (blog) sekaligus hindari sebanyak mungkin elemen flash.
Jika memang tidak diperlukan jangan gunakan elemen flash. Sebaliknya sedapat mungkin dan sebanyak mungkin gunakan link teks biasa.

Berikut ini dua objek flash tertanam di HTML agar memudahkan pengindeksan search engine.

Tips SEO-friendly untuk file flash pada website atau blog :

Tambahkan teks HTML untuk file Flash.
Tambahkan Meta data untuk flash movies yang menggunakan FLV MetaData Injector.
Sisipkan tag <noembed> dan teks deskriptif di dalamnya, seperti ditunjukkan berikut :

contoh penggunaan tag noembed untuk website

Optimize flash blog for all browsers

Pengalaman user (visitor) yang ditingkatkan akhirnya akan mengarah ke optimasi mesin pencari (SEO) blog atau website.

Mengoptimalkan web berbasis flash untuk semua browser bertujuan memastikan kegunaan ditingkatkan. Gunakan Scalable Inman Flash Replacement method (slFR) atau Metode SWFObject untuk mengubah content flash dalam kasus browser tidak support flash.

Avoid using flash for blog navigation

Dua alasan utama Flash tidak seharusnya digunakan untuk navigasi pada website :

Alasan Pertama
Hindari penggunaan navigasi yang membingungkan karena mengganggu kegunaan website.
Alasan kedua
Analisa web untuk melacak & mengukur kinerja website tidak bisa memberikan data akurat.

Why?
Karena sulit mengukur data web blog berbasis Flash, seperti halaman yang dikunjungi, bagian mana dari website yang dilihat dan di tahap mana pengunjung meninggalkan website.

Use proper sitemap for your blog

Sitemaps memudahkan search engine mengindeks halaman blog (web page). Untuk website atau blog yang menggunakan Flash, file XML sitemaps dapat dibuat dan ditaruh di root directory. Namun Anda harus menghindari penggunaan “completely flash-based web designs” karena sulit diindeks search engine.

Jika tetap mau pakai elemen Flash, kaitkan saja dengan content HTML agar diindeks atau dimunculkan dalam SERPs (laman hasil pencarian search engine) untuk keyword Anda. Gunakan Google Analytics untuk pelacakan kinerja blog dan tingkatkan pelacakan elemen flash dengan menetapkan pengaturan special case goals and funnels.

[Source]

Read User's Comments(0)

Install Facebook Comments on each Post Page of Blog

3:02 PM | Labels: CSS Series, HTML Series, Script code, Script HTML CSS Code, social media, Tips Blogger, Tutorial Blog

Anda berminat memiliki komentar FB di setiap artikel blog Blogspot? Anda hanya perlu memasukkan snippet code kotak komentar Facebook di area data:post.body (atau sekitarnya). Tidak sampai setengah jam kotak komentar social network milik Mark Zuckerberg akan ditampilkan tepat dibawah setiap posting. Dengan menyediakan ruang berkomentar di setiap halaman artikel blog, kita dapat meningkatkan popularitas posting dengan sangat cepat.

Bagaimana penjelasannya?

Ketika pengunjung blog dalam status LOGIN ke Facebook dan membaca salah satu halaman posting, jika mereka berkomentar, maka secara otomatis posting tersebut langsung dalam status LIKE.

Dengan demikian posting kita seketika ditampilkan pada profil user Facebook, selain itu posting kita akan langsung mendapat LIKE (meskipun pengguna FB memberi tanda centang (check) atau tidak memberi centang (uncheck), postingan artikel tersebut tetap mendapatkan LIKE ). Ini cara bagus meningkatkan jumlah LIKE di setiap laman artikel blog.

Hasilnya dapat dilihat di area komentar di bawah artikel ini, seperti terlihat pada gambar ini.

Bagaimana mendapatkannya?

Tutorial

Login ke Blogger(dot)com dengan Gmail address Anda
Buka Dashboard Blogger
Pergi ke Template >>> Edit HTML >>> Expand Widget Templates.
Tekan kombinasi tombol keyboard Ctrl – F untuk mencari kode ini.

<div class='comments' id='comments'>
Letakkan snippet code dibawah ini tepat di bawahnya.

<div class='comments-tab' id='fb-comments'
onclick='javascript:commentToggle("#fb-comments");'
title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
Tekan kombinasi tombol keyboard Ctrl – F untuk mencari kode ini : /* Comments atau #comments atau yang mirip diantara keduanya. Pada halaman HTML Editor blog, saya hanya menemukan baris seperti di bawah ini sebagai satu-satunya yang bisa saya temukan.

/* Comments----------------------------------------------- */
Letakkan barisan kode CSS berikut tepat dibawahnya.

.comments-page { background-color: #f2f2f2;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
}
Letakkan script code berikut tepat di atas </head>

CATATAN PENTING

Maafkan! Script diatas hanya image untuk mengurangi loading time dan memperbesar prosentase Text/HTML Ratio, karena ini sangat baik bagi SEO blog ini. Jika setiap script code harus saya ketik, akibatnya akan memperbanyak script dan menurunkan prosentase Text/HTML Ratio.

Script ASLI untuk langkah nomor 7 dapat Anda download dengan klik link :

Script Komentar Facebook di blog Blogger

Letter yusufzulkarnain pada script diatas harus diganti dengan ID Facebook Anda sendiri.
SIMPAN template
SELESAI.

Read User's Comments(0)

Blogger Newbie : Bagaimana memulai belajar Coding?

4:45 PM | Labels: HTML Series, Newbie in the Blog

Mulailah belajar coding dari materi paling mudah dipahami dan mempelajari dalam jumlah kecil dari tag-tag HTML paling dasar. Untuk selanjutnya lakukan "Learning by Doing" dan "Try and Error" atas source website. Tentu saja setelah Anda buat backup-nya.

J ika ingin tahu isi yang tersirat dari halaman website atau web blog , maka bagian paling mudah ditemukan adalah dokumen HTML. Isi HTML mencakup code HTML, CSS, Javascript. script jQuery dan berbagai script lain yang terintegrasi didalamnya. Dokumen HTML template – untuk platform blog blogspot (blogger) – misalnya, bisa dilihat dengan cara berikut :

Masuk ke account Blogger Anda.
Pilih menu Template > Edit HTML.

Dokumen HTML template blog Blogger

Jika ingin mengotak-atik isi dokumen blog, Anda mutlak harus mempelajari HTML tapi mungkin terasa menakutkan dan gamang. Mulai dari mana belajarnya?

Bagaimana memulai?

Mulailah dari materi paling mudah dipahami. Cara paling mudah adalah : Mulai mempelajari dalam jumlah kecil dari tag-tag HTML paling dasar. Seperti setiap paragraf atau alinea berada di antara tag pembuka paragraf <p> dan tag penutup paragraf </p>

<p> ISI PARAGRAF </p>

Atau <br /> berfungsi sebagai “line break” pemutus baris atau untuk pindah ke baris baru di dalam paragraf atau di antara 2 paragraf.

Singkat kata, kenali tag-tag yang paling sering Anda temui seperti tag-tag yang sering ada di bawah kotak komentar pada banyak website. Seperti di bawah ini :

Allowed HTML tags :
<a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd><span>

Keterangan gambar tabel :
Kolom paling kiri       :   Berisi nama tag dan/ atau penjelasan tag
Kolom tengah :   Contoh penulisan tag dalam dokumen HTML
Kolom paling kanan :   Hasil tampilan yang terlihat pada halaman website (webpage)

Untuk informasi lebih lanjut lihat Spesifikasi HTML W3C atau gunakan mesin pencari favorit Anda untuk menemukan situs lain yang menjelaskan HTML.

Anda juga perlu mengenali karakter-karakter yang tidak lazim dan biasanya bisa langsung diketik tanpa masalah. Namun jika Anda menemui masalah, coba gunakan entitas karakter HTML.

Sebuah contoh umum seperti & untuk karakter ampersand &. Untuk mendapatkan daftar lengkap entitas, silahkan melihat halaman entities HTML. Beberapa karakter yang tersedia adalah :

Perhatikan! Setiap entitas karakter pada tabel diatas – diawali dengan “&” dan diakhiri dengan “;”

Untuk lebih memahami perhatikan elemen link berikut ini.

Bentuk source HTML :

<a href=”website-download.blogspot.com”>MENGENAL ENTITAS KARAKTER</a>
Bentuk entitas karakter HTML :

<a href=”website-download.blogspot.com”>MENGENAL ENTITAS KARAKTER</a>
Di halaman website atau blog akan tampak text-link seperti berikut :

MENGENAL ENTITAS KARAKTER

Happy blogging! Toward website design works.

Read User's Comments(0)

Pemasangan Scheme dalam Dokumen HTML Blog

10:47 AM | Labels: HTML Series, Search Engine Optimization, SEO by Google, Tutorial Blog, Website Development

Scheme template dalam elemen HTML untuk SEO Blogger

Untuk mengoptimalkan SEO suatu halaman website, Anda harus menempatkan keyword penting pada elemen HTML . Dengan menempatkan kata-kunci dalam elemen HTML akan membuat jelas kepada pengunjung - dan robot mesin pencari (misal Googlebots) – mengenai content halaman web Anda berisi tentang apa. Salah satu cara penempatan keyword dengan memanfaatkan SCHEME.

Scheme adalah deskripsi dokumen XML, biasanya dinyatakan dalam struktur dan isi jenis dokumen. Dengan adanya scheme yang tersusun dengan benar dalam template maka akan memudahkan spider bot mengindeks artikel dengan klasifikasi ContenT keyword yang ditanamkan didalam scheme.

Artikel ini kelanjutan dari posting Meta Tag Language Indonesia Valid, dan saling terkait erat dalam memahami ulasan SEO. Silahkan membaca artikel tersebut.

Cara Menanam SCHEME di BLOGGER BLOGSPOT

Scheme ini sangat menentukan trafik pengunjung yang datang melalui search engine dengan keyword yang telah Anda setting dengan cermat di dalam scheme template blogger.

Bagaimana cara kerja Scheme dalam menaikkan popularitas blog?

Scheme merupakan susunan deskripsi yang tertanam pada template blog, sifatnya valid dengan format HTML dan berbeda dengan teks biasa, sehingga keyword yang ada dalam scheme akan diprioritaskan oleh robot search engine untuk ditampilkan di Search Engine Result Pages (SERPs).

Sebagai perbandingan. Andainya artikel blog adalah "Rich Snippets for SEO: Konsep dasar Microformats," sementara blog Anda belum dipasangi SCHEME, maka spider bot (Googlebot) hanya merekam keyword yang terdapat dalam isi artikel saja dan terpisah-pisah dan kemudian menyempurnakannya berdasarkan history di SERPs. Hal berbeda akan terjadi jika keyword dipasang langsung dalam scheme. Spider bot akan membaca langsung semua keyword yang kita tentukan tanpa memotong (terpisah-pisah).

Contoh lain, misal judul post "Cara Menanam Padi.” Kita bisa menuliskan keyword yang ingin kita tentukan (cara menanam padi, menanam padi dengan baik, cara tepat menanam padi, et cetera).

untuk mengetahui ada tidaknya scheme tertanam dalam blog, kita bisa menggunakan add-ons Scheme Explorer. Anda bisa install add-ons tersebut dengan klik link ini. Jika ada terpasang di browser silahkan bukan suatu blog. Jika blog tersebut dipasangi scheme, maka scheme tersebut dapat dilihat dengan adanya indikator seperti gambar mata pada pojok ADDRESS BAR seperti gambar dibawah ini :

Jika Anda membuka Homepage blog WEBSITE DESIGN saat ini (5 Juni 2013) dan klik indikator scheme seperti dalam lingkaran merah, maka akan tampak layar pop-up berisi keyword, description webpage yang sudah dipasang pada blog tersebut atau judul-judul posting seperti gambar dibawah ini :

Pada gambar pop-up indikator keyword Homepage diatas, hanya tampak SATU description berisi keyword untuk artikel bersangkutan, karena untuk pertamakalinya di blog ini saya pasangi Scheme pada post Woorank SEO Metrics Tool untuk Check SEO Blog dengan cara mengetikkan rangkaian keyword yang relevan dengan isi artikel post. Saya ketikkan dalam laman kode HTML artikel tersebut (di bagian paling atas post – sekaligus sebagai baris pembuka) snippet ini :

<span itemprop="description">Tool instant SEO review untuk blog atau website</span>

Jika kemudian Anda buka artikel tersebut (test scheme), tampilan pop-up akan berbeda saat memeriksa scheme blog. Layar pop-up yang memunculkan Scheme Description adalah seperti gambar dibawah ini :

How to Install Description and Keyword Scheme?

Log in Blogger
Edit HTML
Expand Template

Pemasangan Schema Homepage di dokumen HTML Blogger

Temukan bagian paling atas dari file dokumen HTML blog Anda seperti dibawah ini :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml'
xmlns:b = 'http://www.google.com/2005/gml/b'
xmlns:data = 'http://www.google.com/2005/gml/data'
xmlns:expr = 'http://www.google.com/2005/gml/expr'

Kemudian ganti dengan snippet code dibawah ini (COPY dan PASTE saja).

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' itemscope='http://schema.org/Article'
itemtype='http://schema.org/Article'
xmlns='http://www.w3.org/1999/xhtml'
xmlns:b = 'http://www.google.com/2005/gml/b'
xmlns:data = 'http://www.google.com/2005/gml/data'
xmlns:expr = 'http://www.google.com/2005/gml/expr'

Setting Schema suatu Post di dokumen HTML Blogger

Temukan bagian dibawah ini dari file dokumen HTML blog Anda.

<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'>
         <a expr:href='data:post.url'><data:post.title/></a>
       <b:else/>
         <data:post.title/>
       </b:if>
    </b:if>
     </h3>
   </b:if>

Kemudian ganti dengan snippet code 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'><span itemprop='name'><data:post.title/></span></a>
    <b:else/>
       <b:if cond='data:post.url'>
         <a expr:href='data:post.url'><span itemprop='name'><data:post.title/></span></a>
       <b:else/>
         <data:post.title/>
       </b:if>
    </b:if>
     </h3>
   </b:if>

Proses pemasangan scheme di dokumen HTML blog untuk Homepage dan post artikel selesai.

Silahkan SAVE template.

Praktek Pemakaian Scheme dalam suatu Post di source code HTML Blogger

Untuk pemasangan scheme keyword dan scheme description suatu posting, silahkan copy kode berikut dan paste dalam posting saat membuat artikel blog (Letakkan di bagian mana saja).

<span itemprop="description">Scheme template dalam elemen HTML untuk SEO Blogger</span>
- Ganti teks berwarna merah dengan kyeword yang Anda inginkan. Tentu harus disesuaikan dengan isi artikel post Anda.
- Source : CARA MENANAM/ MEMASANG SCHEMA di BLOGGER

Setelah selesai menerapkan Scheme, sebaiknya memasang Breadcrumb di blog karena Breadcrumb ini menentukan keakuratan pengindeksan di Google. Silahkan kunjungi Cara Membuat Breadcrumb Super

Trik SEO : Memasang Microformats di Blogroll

Read User's Comments(0)

Response Codes of Online Broken Link Checker

5:04 PM | Labels: HTML Series, Layanan Situs FREE, Search Engine Optimization, SEO by Google

Strategi SEO harus dilakukan dalam meningkatkan pagerank dan trafik kunjungan, salah satu hal yang harus diperhatikan adalah menghilangkan broken link (link mati). Tentu kita kesal ketika klik sebuah link tidak menuju URL yang bersangkutan karena barangkali sudah dihapus atau sebab lain. Namun sekarang webmaster semakin mudah menemukan dan memperbaiki link mati. Masalah broken link akhirnya dapat ditangani dengan mudah! Yaitu dengan memanfaatkan Free online Checker / Validator.

Online Broken Link Checker

Broken Link Checker ini tidak hanya memberitahu Anda hyperlink website yang sudah mati namun juga akan menunjukkan dimana tepatnya link-link mati ini bisa ditemukan dalam kode HTML.

Fitur unik ini menonjolkan layanan pengecekan lokasi link mati sebagai alat deteksi masalah yang ada, dan membuat seorang webmaster merasa sangat nyaman karena begitu mudah dan dalam waktu singkat dapat menemukan bad URLs. Sesuatu yang sebelumnya tidak mudah dilakukan. (Hanya saja disyaratkan user memahami kode HTML untuk menelusuri broken link).

Scans webpages for bad hyperlinks •
Analyses unlimited number of pages* •
Useful for SEO optimization •
Checks both internal and external URLs and finds which are stale •
Reports dead link's location in your HTML code •
Supports sub-domains •
Validates web-sites online: the same way as how your users and Search Engines see those •
Detects "linkrot" and other problems of web site integrity •
Works on-line so can be used on Mac OSX, Linux, Windows and any other OS •
Shows 404 errors and other unsuccessful HTTP response codes - for each dead and/or problematic hyperlink ! •

Website Validation tool yang gratis ini hanya melaporkan hyperlink yang benar-benar rusak - tidak seperti aplikasi sejenis online lainnya, yang mencampurkan weblink baik maupun weblink buruk bersama-sama. Sehingga membuat laporan hasilnya sangat sulit untuk dipahami dan bekerja dengan informasi tidak valid.

BrokenLinkCheck Home | Free Google Sitemaps.

Berikut ini kode response yang sering ditemukan saat mengetik URL di address bar browser atau pada Online Broken Link Checker

Not Found
berarti TIDAK DITEMUKAN apapun permintaan URL setelah diproses dengan baik.
404
berarti resource tidak ditemukan di server atau hanya incorrect URL
400 atau Bad Request
berarti host server tidak dapat memahami permintaan URL.
Bad host atau Invalid host name
berarti server dengan nama ini tidak ada atau tidak dapat dicapai (unreachable).
bad url atau Malformed URL
berarti kesalahan menuliskan format URL (misalnya, penulisan tidak benar atau kurang karakter (missing bracket), kelebihan garis miring (extra slashes), protokol salah (http:// ataukah https) etc.).
timeout
berarti HTTP requests kehabisan waktu (timing out).
empty
berarti Host Server terus-menerus kembali ke response "empty" dan tidak ada content sama sekali.
500
berarti ERROR dalam (proses) memenuhi request atau mengindikasikan server Anda error. Namun jika request sudah diproses dengan baik, dan masih “not found”, berarti kembali ke 404.

Cara Penggunaan

Anda hanya perlu pergi ke URL BrokenLinkCheck, ketik URL website Anda, klik <<Find Broken Links>>:

Lalu ketik karakter unik ke field security code Chaptcha. Klik << Find Broken Links >>: kemudian di bawahnya tampak halaman daftar seluruh broken link website Anda seperti ini:

tampilan hasil pemeriksaan bad link checker

Untuk melihat tampilan broken link, silahkan klik nomor urut di kolom paling kiri. Untuk melacak lokasi broken link dalam kode HTML, klik << src >> di kolom 3. Gunakan CTRL–F untuk memudahkan mencari lokasi link di halaman HTML.
Broken link bisa ditemukan pada area yang di-blok warna PINK. Untuk melihat dalam artikel mana broken link itu berada, berikut ini caranya:

Carilah snippet berikut yang ada di atas area blok warna PINK :

<span class='meta_comments'>
<a href='URL-YANG-ADA-BROKEN-LINK#comment-form' onclick=''>comments</a></span>

Blok saja URL-YANG-ADA-BROKEN-LINK sampai penutup nama URL (.html). Selanjutnya klik kanan dan klik “Open Link in new Tab” jika Anda gunakan browser Mozilla Firefox atau klik “Buka http:// …..html” Anda lihat tanggal posting (misal 31 Mei 2012). Ada cara lebih cepat yaitu langsung klik << url >> di kolom 3.

Kemudian Anda lacak di daftar POSTING yang tercantum tanggal tersebut pada Blogger atau buka dengan Windows Live Writer jika Anda menggunakannya

Pada postingan tersebut buka halaman HTML dan dengan CTRL-F carilah kode URL broken link. Begitu ketemu langsung dihapus saja <a href=”broken-link”> dan penutupnya </a>. Lalu postingan tersebut diterbitkan lagi.Langkah-langkah diatas diulang lagi untuk menghapus broken link lain.

Read User's Comments(0)

Cara Penggunaan

Login ke Blogger >>> Design (Rancangan) >>> Edit HTML
Backup template.
Mengubah xHTML di bagian <body> punya resiko kegagalan yang mungkin menimbulkan kerusakan template, maka lakukan backup template seperti dibawah ini demi keamanan.
- Klik Download Full Template
- Simpan file template di folder computer (misalnya di folder My Document)
- File backup ini digunakan untuk memulihkan template seperti sebelum dilakukan modifikasi dengan cara upload kembali ke blogger.
- Cara upload :
  Klik browse. Temukan file backup di folder computer dan lanjutkan dengan klik upload.

Kembali ke Edit HTML dan Cari kode ]]></b:skin>

Letakkan kode CSS (snippet pada box 1) tepat di atas kode tersebut
Letakkan Javascript (snippet pada box 2) tepat di BAWAH kode tersebut
Sehingga :

kode ]]></b:skin> akan berada diantara kode css dan javascript

SAVE TEMPLATE
Lanjutkan kembali dengan klik Expand Widget Template dan cari kode <data:top.authorLabel/>

Di atas kode <data:top.authorLabel/> ada beberapa kode lain seperti berikut

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>

Letakkan xHTML (lihat isi Box 3) tepat di atasnya. Sehingga tersusun seperti berikut

posisi box XHTML Related Posts with CSS3 Effects

SAVE TEMPLATE

Keterangan

Angka 10 merupakan jumlah posting ditampilkan di widget related posts. Anda dapat mengubahnya sesuai jumlah yang diinginkan.
Jika ingin merubah tampilan related posts, perubahan cukup dilakukan pada kode css.

SELESAI - Jika kurang jelas atau ada masalah klik [Source]

Read User's Comments(0)

Categories

SOCIAL MEDIA

TIPS

Archives

Integration of source codes

Javascript

Mengenal HTML

HEAD

ELEMEN BODY

TAG

ATRIBUTE

Mengenal Cascading Style Sheet

Langkah 1

Langkah kedua

Langkah ketiga

Langkah keempat

Penjelasan

Mengapa Tool ini SANGAT PENTING?

Marking up data menggunakan microformats

Cara kerja Microformats

Item types dan item properties

Notes

Bagaimana caranya?

Bagaimana mensiasati penggunaan elemen Flash?

Add HTML Element to Flash Files

Optimize flash blog for all browsers

Avoid using flash for blog navigation

Use proper sitemap for your blog

Bagaimana penjelasannya?

Bagaimana mendapatkannya?

Tutorial

Bagaimana memulai?

Cara Menanam SCHEME di BLOGGER BLOGSPOT

Bagaimana cara kerja Scheme dalam menaikkan popularitas blog?

How to Install Description and Keyword Scheme?

Pemasangan Schema Homepage di dokumen HTML Blogger

Setting Schema suatu Post di dokumen HTML Blogger

Praktek Pemakaian Scheme dalam suatu Post di source code HTML Blogger

Online Broken Link Checker

Cara Penggunaan

Cara Penggunaan

Keterangan