Author by : Doublehorn
DAFTAR ISI
Protected by Copyscape Online Infringement Detector
aboutus website design services

Willkommen auf mein web blog

Best regard. I will do my best to make it interesting and useful. Greeting to toko online Prestashop!

30 Mei 2013

Hindari penggunaan CSS Inline Style untuk SEO website


CSS merupakan bahasa pemrograman untuk control komponen website sehingga lebih terstruktur dan seragam. Dengan Cascading Style Sheets memungkinkan ditampilkan page yang sama dengan format berbeda. Penempatan rule (code) style CSS diletakkan terpisah dari isi halaman code HTML. Isi halaman code HTML diletakkan dalam file HTML, sedangkan code style CSS dapat berupa file .css atau sebagai salah satu bagian dari file HTML yang ditaruh dalam tag <head>.

CSS ialah kumpulan batasan (Rule) untuk memformat dan mengendalikan tampilan isi halaman website (web page).
Fungsi utama Cascading Style Sheet CSS
Ada 3 bentuk (type) CSS styles :
  1. INLINE STYLES
    Adalah styles CSS ditulis langsung ke suatu tag pada dokumen HTML. Inline styles HANYA berpengaruh ke tag tertentu (hanya untuk tag dimana inline stlyles dituliskan).

    Contoh syntax yang bisa digunakan :

    :<a href="" style="text-decoration: none;">

  2. EMBEDDED STYLES
    Adalah styles CSS yang embedded (tertaman) di bagian head documen HTML. Embedded styles HANYA berpengaruh ke tag-tag pada halaman-halaman web tertentu yangmana Embedded styles ditanamkan di dalamnya.

    Contoh syntax yang bisa digunakan :

    <style type="text/css"> p { color: #00f; } </style>

  3. EXTERNAL STYLES
    Adalah styles CSS yang ditulis dalam suatu file CSS yang terpisah dan kemudian terpasang pada Web document. External style sheets berpengaruh pada dokumen apapun yang ada dalam web document.

    Contoh syntax yang bisa digunakan :

    <link rel="stylesheet" type="text/css" href="styles.css" />

    Para praktisi CSS terbaik menyarankan agar memprioritaskan penggunaan external style sheets untuk styling halaman-halaman Web (web pages) sehingga akan mendapatkan manfaat terbaik dari penggunaan cascade dan inheritance.

How to Write an Inline Style CSS - website files  

Inline styles merupakan CSS styles yang diterapkan HANYA untuk SATU ELEMEN SAJA.  Penulisannya pakai style attribute. Cara penulisannya sebagai berikut :
  • Tulis style property dengan cara sama seperti Anda akan menuliskannya di sebuah Style Sheet. Semuanya dalam satu baris. Beberapa properti dipisahkan dengan semi-kolon (;) sebagaimana dalam style sheet. Lihat Syntax berikut :

    background:#ccc; color:#fff; border: solid black 1px;

  • Tempatkan baris styles tersebut dalam atribut style dari elemen yang Anda inginkan untuk ditata. (e.g. elemen paragraf (p) pada content teks seperti berikut)


    <p style="background:#ccc; color:#fff; border: solid black 1px;">

Kelebihan dan Kekurangan Inline Style - arsip website

  1. Kelebihan Inline Style CSS - website files

    Cascade, inline-styles (CSS Inline-Styles) punya hak didahulukan dibanding dengan kedua tipe CSS lain. Itu berarti Inline-Styles akan diterapkan tidak peduli apapun*   Satu-satunya styles yang memiliki prioritas lebih tinggi daripada Inline Style adalah user styles.

    Jika tidak mendapati perubahan ketika menerapkan CSS, solusinya dengan menggunakan Inline Style pada elemen yang diinginkan (misalnya penerapan CSS untuk elemen PARAGRAF (p) pada content teks). Jika tetap tidak ada perubahan, berarti ada sebab lain dan harus dicari tahu.

    Inline Style mudah untuk ditambahkan. Anda tidak perlu membuat dokumen baru (seperti dengan style sheet eksternal) atau mengedit elemen baru di bagian header dokumen web (seperti dengan style sheet internal). Anda hanya perlu menambahkan atribut style yang berlaku pada hampir setiap elemen XHTML.
  2. Kekurangan Inline Style - website files

    Masing-masing inline style bersifat spesifik dalam Cascade, konsekuensinya sangat melelahkan karena setiap inline style harus Anda setting. Inline styles harus diaplikasikan pada setiap elemen yang Anda inginkan.  Misalnya ingin seluruh paragraf harus pakai font family Arial, maka harus menambahkan sebuah inline style ke setiap <p> tag dokumen web.

    Inline Style menambah beban pemeliharaan (pengeditan) untuk web designer dan juga menambah lama waktu download oleh pengunjung.

    Tidak mungkin melakukan style terhadap pseudo-elements dan -classes dengan inline styles.
    Sebagai contoh, dengan external dan internal style sheets, Anda dapat mengatur style warna anchor tag untuk visited, hover, active, dan link. Tetapi dengan inline style semua yang dapat Anda atur style-nya adalah HANYA untuk masing-masing link itu sendiri.  karena memang seperti itulah ATRIBUT STYLE ditambahkan.

Rekomendasi

JANGAN gunakan inline styles untuk web pages karena mereka akan mendatangkan masalah dan membuat halaman-halaman webpage terlalu banyak hal yang harus dilakukan untuk pemeliharaan blog.

Terkait teks judul post artikel ini, sangat disarankan JANGAN gunakan inline style CSS dalam dokumen HTML, karena itu cara buruk menjaga SEO blog. Jawaban lengkap terhadap isu ini silahkan kunjungi :


Satu-satunya cara terbaik menggunakan Inline-style adalah ketika ingin memeriksa style CSS dengan cepat selama proses pengembangan situs. Namun setelah terlihat beres (tidak ada masalah) untuk elemen bersangkutan, segera memindahkannya ke external style sheet.

That's all we know - Happy Blogger

Catatan untuk tanda bintang *
* Beberapa kasus Inline Style dapat ditimpa, seperti dengan atribut penting atau style sheet user.
    Prinsipnya dengan penggunaan CSS yang khas, Inline Style memiliki prioritas tertinggi.

Source : What is a CSS Inline Style?



read more website design

Lingkup kerja Search Engine Optimization website


Definisi dan ruang lingkup SEO

Search Engine Optimization (SEO) adalah proses dan melibatkan teknik-teknik untuk memodifikasi website atau blog dengan cara baik (hindarkan cara “Black Hat SEO”) untuk mendapatkan posisi peringkat lebih baik di halaman hasil pencarian search engine (Search Engine result Pages - SERP). Penerapan tips SEO selalu sebagai opsi pilihan atau sebagai rekomendasi - tetapi bagi blogger yang goal oriented, praktek SEO ini hukumnya WAJIB.

ruang lingkup teknik SEO

Ada banyak tahap-tahap tindakan yang harus dilakukan atau banyak tindakan yang terlibat dalam proses SEO, seperti berikut di bawah ini :

Semua itu hanyalah daftar pendek step-step yang harus dilakukan. Sebenarnya juga ada banyak konsiderasi (pertimbangan) yang harus diperhitungkan ketika Anda putuskan optimisasi mesin pencari untuk website Anda. Proses SEO terbaik untuk website Anda adalah lakukan coding yang disesuaikan dengan Search Engine Friendly fashion. Silahkan lakukan eksplorasi teknik, tips dan trik SEO pada daftar tindakan di atas.

SEO stands for Search Engine Optimization and used to make your website rank higher in search engines. Search Engine Optimization is the process and a technique to modify the website in better way to rank better in the search engine results page (SERP).
source : What is Search Engine Optimization?

Lakukan Search Engine Optimization, posting Anda mungkin mulai menjadi lebih baik pada halaman hasil pencarian search engine (SERP), dan dalam jangka panjang, blog Blogger atau website Anda akan tumbuh lebih baik di Google PageRank.



That's all we know - Happy Blogger

read more website design

25 Mei 2013

jQuery Scroll to Top to Bottom for website blog


Posting lama tombol jQuery back to top hanya menawarkan satu arah ke laman ATAS webpage. Kali ini saya ingin posting tombol jQuery back to top lain, yaitu tombol Back to Top plus tombol Back to Bottom disertai fade-In and fade-Out effect. Pengunjung blog dapat segera kembali ke atas dan ke bawah halaman. Dengan efek fade-In dan fade-Out ini, kedua tombol akan memudar sedikit ketika kita menggulir ke atas atau ke bawah halaman.

Ada 2 tombol dengan posisi FIXED di bagian kanan-tengah webpage, masing-masing dengan fungsi untuk bergerak sebagai pintasan baik ke paling bawah atau ke paling atas webpage secara otomatis. Jika Anda menggulir halaman, kedua tombol akan lenyap sehingga memberikan efek bagus dan halus.  Saya temukan widget bagus ini dari Helpblogger, maka penghargaan penuh layak diberikan kepadanya.

tombol back to top and to bottom

How To Install the Widget To website blog Blogger?

  1. Buka Blogger–>Template—>Edit HTML
  2. Tekan tombol keyboard CTRL + F untuk mencari  ]]></b:skin>  dalam HTML Editor blog
  3. Copy dan paste kode CSS berikut ini, dan letakkan tepat diatas  ]]></b:skin>

    jQuery-Scroll-Top-Bottom-website-blog-blogger-1

    CATATAN
    Kedua tombol ditampilkan di sisi kanan web page. Jika ingin menampilkan di sisi kiri, ganti saja teks warna merah right yang ada di 2 tempat dengan Left.  Anda bisa mengganti image tombol Arrow-Up (link warna biru … /arrow_up.png) dan Arrow-Bottom (… /arrow_down.png) dengan URL image lain.

    The Javascript - website archives

    Script Javascript dibawah ini akan berfungsi menggulung (scroll) halaman blog menuju ke atas dan bisa juga ke bawah dengan menggunakan  jQuery.
  4. Kemudian Tekan tombol keyboard CTRL + F untuk mencari </body>
  5. Copy dan paste script code di bawah ini dan letakkan tepat diatas  </body>

    jQuery-Scroll-Top-Bottom-website-blog-blogger2

    CATATAN PENTING

  6. SAVE TEMPLATE
  7. SELESAI!


DEMO :  Dapat Anda lihat sepasang 'arrow to Top' dan 'arrow to Bottom' di blog ini di sebelah kanan bawah halaman web.


That's all we know - Happy Blogger - Good Luck!!!


read more website design

24 Mei 2013

Script Mencegah Redirect blog ke domain ekstensi lain



Sumber-daya SEO website blog terbagi ke URL turunan

Awalnya saya senang ketika blog Website Design dimunculkan dengan akhiran kode negara-negara tertentu. Seperti http://website-download.blogspot.in atau http://website-download.blogspot.fr, atau berakhiran .de, .en, .eu (ekstensi kode negara). Anehnya semua itu mengarah ke halaman web alamat URL blog utama milik saya : http://website-download.blogspot.com.

Kegembiraan segera hilang ketika membuka situs alexa untuk check blog saya di :


Saya klik opsi Top Sites pada menu bar. Kemudian saya ketik unsur pembentuk URL blog ini pada kotak Pencarian (Entry Query), yaitu kata “website, download dan blogspot.” Hasilnya menunjukkan ada akibat buruk dari redirect diatas. Seperti gambar berikut :

redirect url blog blogger blogspot

Sumber daya SEO blog terbagi ke URL turunan, yaitu website-download.blogspot.in (ekstensi akhiran code negara India) dan ke akhiran banyak code negara lain. Hal ini berpengaruh negatif terhadap usaha optimisasi mesin pencari (SEO) blog Blogger.

Pada URL utama menunjukkan rank Alexa 328.362 saat ini, Seharusnya rank tersebut lebih tinggi lagi karena sumber daya SEO terbagi juga untuk URL turunan .in yang mendapatkan rank alexa 4.032.480 untuk pencarian di negara India (in). Kasus pencarian pada blog saya seperti di India juga terjadi untuk pencarian di Jerman (.de), Inggris (.en), Perancis (.fr), .it, .au dan ekstensi URL lain yang ada di belakang nama blogspot.

Mengapa URL website bisa terjadi Redirect di negara-negara tertentu?

Semua akhiran URL turunan diatas merupakan ekstensi spesifikasi suatu negara, yang akan dihadirkan kepada si pencari informasi via negara tertentu, kemudian diantarkan oleh Google ke blog Anda. Dan ekstensi .in artinya si pencari informasi berasal dari negara India. Dan .fr jika si pencari informasi berasal dari Perancis.

Redirect (pengarahan) domain ini berdasarkan negara secara spesifik. Tujuan Google melakukan ini untuk mengantisipasi jika content blog tersebut bermasalah, maka pihak Google bisa memblokirnya, namun blog tersebut tetap akan muncul di negara tertentu berdasarkan ekstensi domain. Misalnya tetap muncul di negara asal URL blog utama.

Dalam perkembangannya Redirect ke negara-negara tertentu ini bisa menimbulkan masalah pada blog blogspot kita.

Masalah yang ditimbulkan adalah sebagai berikut :
  • Jika halaman blog Anda telah mendapatkan sejumlah Like FB, Google Plus atau Tweet pembaca, maka semua itu hilang jika tampil di blogspot.in, blogspot.fr. blogspot.de, blogspot.eu et cetera.
  • Jika Anda menggunakan sistem komentar manajerial seperti Disqus atau Facbeook. Maka platform komentar tersebut bisa tidak aktif.
  • Masalah Link juice. Problem ini terkait dengan SEO, karena membuyarkan sistem canonical URL. Misalkan blog ini di-link oleh blogger negara tentu dengan ekstensi website-download.blogspot.fr

Apa solusinya?

Anda bisa menempatkan sejumlah kode di bawah ini, agar semua REDIRECT url turunan diatas HANYA MENGARAH ke URL utama :

http://website-download.blogspot.com ATAU website-download.blogspot.com
  1. Login ke Blogger.Com >> Template >> Edit HTML >> Expand Widget Templates
  2. Letakan kode berikut ini setelah tag <head>.

    Script Mencegah Redirect ke domain ekstensi

    Maafkan!!! Jika script yang dimaksud di atas ditampilkan sebagai image (gambar). Maksud dan tujuan saya melakukan ini untuk mengurangi loading time website page blog ini dan juga untuk memperbesar prosentase rasio perbandingan teks terhadap kode HTML (Text/HTML Ratio), karena hal ini sangat baik bagi SEO blog.

    Jika seluruh code pada script tersebut saya ketik begitu saja, akibatnya akan memperbanyak muatan code dan menurunkan nilai Text/HTML Ratio. Untuk mendapatkan script ASLI silahkan di-download dengan klik :


  3. Save Template
  4. SELESAI




That's all we know - Happy blog blogger


read more website design

23 Mei 2013

Making Tinkerbell Magic Sparkle Effect in website page


Banyak website mengabaikan teknologi, padahal jika penggunaannya tepat akan menciptakan kesan kuat. Namun penggunaan animasi, Flash, jQuery Zoom effect, manipulasi gambar dan semacamnya JANGAN berlebihan hingga bersifat mengganggu. Blog terlalu “riuh” kesannya tidak profesional dan berpengaruh jelek pada faktor Loading Time blog (waktu yang dibutuhkan untuk memuat halaman web).

How to make a website eye-catching?

Shiny-Stars for website design
Dengan sentuhan kecil Tinkerbell Magic Sparkle – dimanapun mouse digerakkan, akan terjadi efek ujung kursor mengeluarkan bintang-bintang kecil berwarna jatuh bertaburan. Versi lain efek Snow Storm. Efeknya berhenti ketika mouse tidak digerakkan.

Efek Tinkerbell Magic Sparkle di tampilan website

  1. Login ke  www.blogger.com
  2. Masuk Dashboard dan klik judul blog
  3. Klik Template
  4. Pilih Edit HTML
  5. Klik “Lanjutkan” dan beri tanda Check pada box diatasnya
  6. Tekan Ctrl – F untuk pencarian  </body> 
  7. COPY script dibawah ini dan PASTE diatas </body>

    CATATAN PENTING :
    Maaf!!!. Jika script yang dimaksud di atas ditampilkan sebagai image seperti gambar di bawah. Maksud saya melakukannya untuk mengurangi Loading Time blog ini dan memperbesar prosentase (%) rasio perbandingan teks terhadap kode HTML (Text/HTML Ratio) karena hal itu baik bagi SEO blog. Jika seluruh code script tersebut saya ketik begitu saja, akibatnya akan memperbanyak porsi muatan code dan menurunkan nilai Text/HTML Ratio.

    Perlu diketahui bahwa Text to Code Ratio suatu webpage digunakan oleh mesin pencari dan spider Crawler untuk melakukan kalkulasi relevansi halaman website yang bersangkutan. Nilai atau prosentase Text to Code Ratio yang tinggi akan memberikan peluang lebih baik untuk mendapatkan ranking halaman web (PageRank) yang bagus.

    Hampir semua search engine (e.g. Google) menetapkan basis hasil pencarian mereka (SERP) pada relevansi konten yang disediakan.

    • Sebagus apapun artikel, jika isi halaman web (content blog) tidak relevan dengan query di search engine, maka tidak akan muncul di halaman hasil mesin pencari (Search Engine Result Pages)

    Jika halaman web Anda mengandung terlalu banyak kode (seperti script, CSS atau HTML), hal ini bisa mencegah spider merangkak halaman website secara keseluruhan. Crawler kini jauh lebih canggih dan mampu memeriksa jumlah kode yang ada di halaman web dan membandingkannya dengan jumlah teks sebagai bagian dari algoritma. Jika halaman terlalu besar, spider crawler mungkin hanya menangkap sebagian halaman, dan meninggalkan konten penting dan relevan.

    Sekali lagi maaf, jika gambar terlalu kecil karena jika saya zoom (perbesar), hasil gambar menjadi semakin buram. Untuk mendapatkan script ASLI silahkan download dengan klik :


    SCRIPT Tinkerbell Magic Sparkle Effect
  8. PASTE Tepat diatas </body>
  9. Klik SAVE
  10. SELESAI

That's all we know - Happy blog blogger - Happy Blogging!



read more website design

22 Mei 2013

Tips SEO : Text to code ratio checker for website blog


SEO Tool kecil namun sangat membantu usaha SEO website (blog). Tool ini kegunaannya untuk mengukur berapa banyak content teks yang dimiliki file HTML. Ini berarti bahwa Anda bisa mengetahui persentase (%) data teks dibandingkan dengan seluruh content. Jika prosentase rendah, maka harus meningkatkan struktur HTML atau menambahkan teks ke webpage.

Berikut contoh tampilan hasil uji blog saya http://website-download.blogspot.com yang saat ini Anda kunjungi dengan menggunakan tool ini.

text ratio blog website design

I think it's a big mistake relying on magic formulas - far better to concentrate on content that people want to see.  As they almost say in the film, "have good content and they will come".

Tool ini akan memberitahu Anda berapa banyak kode yang digunakan dibandingkan dengan jumlah konten yang ada di halaman web. Untuk menggunakan alat ini silahkan klik link ini :


Why is the Code to Text Ratio Important for SEO website?

Text to Code Ratio sebuah halaman web digunakan oleh search engine dan spider Crawler untuk melakukan kalkulasi relevansi halaman web tersebut. Text to Code Ratio yang tinggi akan memberikan peluang lebih baik untuk mendapatkan ranking halaman web (PageRank) yang bagus.

Hampir semua mesin pencari, seperti Google, menetapkan basis hasil pencarian mereka pada relevansi konten yang disediakan. Sebagus apapun posting artikel, jika isi halaman web tidak relevan, maka tidak akan muncul di halaman hasil mesin pencari (SERP).

Jika halaman web mengandung terlalu banyak code, seperti HTML, ini bisa mencegah spider mesin pencari merangkaki halaman web secara keseluruhan. Crawler mesin pencari kini jauh lebih canggih dan mampu memeriksa jumlah code yang ada di web page, membandingkannya dengan jumlah teks sebagai bagian dari algoritma. Jika halaman terlalu besar, spider crawler mungkin hanya menangkap sebagian halaman, dan kemungkinan meninggalkan content penting dan relevan.

Ketik URL lengkap (incl. http://) ke blox DOMAIN dalam form seperti gambar di bawah. Tool tersebut akan menjalankan pemeriksaan cepat setelah klik tombol GET RATIO untuk melihat berapa besar perbandingan (rasio) teks terhadap code HTML. Hasilnya seperti tampilan gambar pertama.

text-HTML-code ratio test

Text Ratio dibawah standar
Untuk mengukur perbandingan (rasio) teks suatu blog terhadap besarnya elemen HTML (Hiper Text Markup Language) sebuah blog, hasil pengukuran text ratio dibandingkan dengan nilai standar 15%. Apabila nilainya dibawah 15%, Anda perlu mengikuti saran di bawah ini :

text ratio under standard value

We suggest adding a lot more text to your website.
You can strengthen your SEO by increasing the recurrence of keywords on your page and adding more text that pertains to your website's content.


That's all we know - Happy blog blogger - Happy Blogging!


read more website design

21 Mei 2013

Klaim owner website ke Alexa untuk Boost Ranking


Salah satu kriteria baiknya SEO blog Anda adalah semakin kecilnya ranking Alexa situs Anda. Saya browsing di internet dan saya temukan 8 cara yang bagaimana cara mempercepat peningkatan peringkat Alexa pada postingan ini : Boost Your Website's Alexa Ranking and Attract Advertisers Plus More Backlinks. Saya membuka artikel tersebut karena tertarik dengan judul headline.

Satu hal yang ditandai pada salah satu dari 8 cara tersebut ialah Claim your site at Alexa. Sesudah membacanya segera saya navigasi ke Alexa.com untuk klaim blog ini secepat mungkin. Maka jika Anda juga membacanya dan tertarik menambahkan  blog Anda ke Alexa atau melakukan klaim kepemilikan website di alexa.com, berikut ini cara yang harus dilakukan.

Claiming website at Alexa boosts its Alexa ranking

  1. Untuk klaim blog harus daftar dulu sebagai user, klik link Alexa to create an account or Login.

  2. Sesudah LOGIN klik menu Dashboard pada menu bar. Jawab pertanyaan "Do you have a Website?" klik tombol Add it Now. Masukkan URL situs Anda seperti berikut :

    masukkan URL website blog

  3. Setelah klik tombol Continue akan muncul halaman ini :

    claim website blog di alexa

    Untuk klaim website di Alexa pilih salah satu dari 2 opsi seperti terlihat pada gambar di atas.

  4. Karena pengguna blog blogspot tidak punya akses ke Root Directory (kecuali pengguna web server Apache atau IIS) maka saya harus pilih opsi 2. Verifikasi ID melalui HTML.

    Langkah-langkahnya :

    • Buka halaman HTML Blogger.
    • Tambahkan code ID Alexa Anda di bagian HEADER. Pilih salah satu cara berikut :

      1. Menempatkan ID verifikasi dalam komentar. Seperti contoh ini :

        <!—vMOk8YONQ8dKiVrOELC8LXDJkxM –>

        yang diletakkan dibawah tag title, sehingga seperti berikut :

        <title>The title of your home page</title>
        <!—vMOk8YONQ8dKiVrOELC8LXDJkxM –>

      2. Atau dalam satu meta tag tersendiri, seperti berikut :

        <meta name="alexaVerifyID" content="vMOk8YONQ8dKiVrOELC8LXDJkxM" />

      3. Atau sebagai salah satu kata-kunci dari keyword dalam meta tag keyword. Seperti berikut :

        <meta content='prestashop,monetize,vMOk8YONQ8dKiVrOELC8LXDJkxM,seo,toko online,' name='keywords'/>

        PERINGATAN : Jangan letakkan di bagian BODY (dibawah <Body>). karena verifikasi ID tidak akan terdeteksi.



  5. Klik tombol "VERIFY MY ID"   Maka website, blog platform WordPress, Blogger atau platform lain pun akan terverifikasi.

    alexa verified my blog

  6. Klik tombol CONTINUE
  7. SAVE

That's all we know - Happy blogging!

read more website design

20 Mei 2013

Response Codes of Online Broken Link Checker


Strategi SEO   dilakukan oleh pengelola website (blog blogger) untuk meningkatkan Google PageRank dan trafik kunjungan (natural), salah satu usaha Search Engine Optimization di antaranya menghapus broken-link (link mati). Tentu kita kesal ketika klik sebuah link tidak menuju URL bersangkutan karena sudah dihapus atau sebab lain. Namun sekarang webmaster semakin mudah menemukan dan memperbaiki link-mati. Masalah broken link kini ditangani dengan mudah!  Yaitu dengan memanfaatkan Free online Checker / Validator.

Scan website : Online Broken Link Checker

Broken Link Checker ini tidak hanya memberitahu Anda hyperlink (link) website yang sudah mati namun juga menunjukkan dimana tepatnya link-link mati ini ditemukan di dokumen 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.


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.

Copyright © 2012 brokenlinkcheck.com  |
Proses checking akan mendeteksi dan melaporkan masalah link atau HTTP response codes seperti kode response yang tersedia pada Online Broken Link Checker.

Cara Penggunaan - arsip website design

Buka ke URL BrokenLinkCheck, ketik URL website Anda,  klik << Find Broken Links >>:

Free Broken Link Checker_website
Lalu ketik karakter unik ke field security code Chaptcha. Klik  << Find Broken Links >>
Di bawahnya akan tampak halaman daftar seluruh broken link website 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 :

  1. 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>

  2. Blok saja URL-YANG-ADA-BROKEN-LINK sampai penutup nama URL (.html).

  3. 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.

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

  5. 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.



That's all we know - Happy blog blogger

read more website design

19 Mei 2013

Setting Blank Target Attribute pada website blog Blogger


Bagaimana membuka semua link eksternal dan link internal di jendela baru browser? Mengapa perlu dilakukan? Untuk solusinya kita akan setting Blank Attribute atau nama lengkapnya Blank Target Attribute. Kita akan bahas tuntas setting atribut blank target pada blog (Blogger).

Tujuan penggunaan atribut Blank Target adalah ketika pengguna klik pada suatu link, maka akan terbuka di jendela baru atau tab baru.

Ada kalanya Anda akan mentautkan link ke halaman terkait lainnya dalam sebuah artikel. Lalu jika user situs Anda memutuskan untuk klik link tersebut untuk melihat content, sementara dia harus berhenti membaca artikel yang sebenarnya karena akan memuat halaman web link tersebut.

Ini bisa menjadi serius dan sangat mengganggu user blog karena harus loading halaman baru (halaman link) sementara mereka masih membaca artikel sebenarnya. Jika hal ini terjadi dan user ingin kembali ke halaman sebelumnya, tentu membosankan dan melelahkan. Hal terburuk ialah mungkin mereka tidak mau datang kembali ke blog Anda.

Cara setting Blank Target di website blog blogger

Setting Blank Target bisa dilakukan dengan 3 cara ;

Blogger Editor telah memberi Anda pilihan yang dapat Anda gunakan untuk menambahkan atribut Blank Target untuk link (baik eksternal maupun internal) tanpa harus melakukan coding di HTML Editor.
  1. Pengaturan Atrtibute Blank via Blogger Editor

    Mari kita lihat bagaimana blogger blogspot dapat menambahkan Blank Target untuk link tanpa coding. Misalnya saja Anda ingin menyematkan link pada sebuah kata atau sebaris kata. Yang Anda lakukan adalah membuka Blogger Editor >> POST dan memilih posting yang akan diletakkan link tersebut.

    • Pada halaman editor, Anda blok teks (highlight the string of texts) yang akan diberi hyperlink (LINK).
    • Setelah melakukan itu, klik pada pilihan Link yang ditemukan di antara menu di bawah ini :
      menu bar editor blogger
    • Setelah klik tombol LINK, akan tampil jendela pops up seperti dibawah ini

      jendela popup blank target blogger
    • Anda bisa mengisikan URL untuk link baru, mengaktifkan blank attribute dengan memberi tanda check (centang) OPEN THIS LINK IN A NEW WINDOW
    • Sesudah input semua opsi seperti gambar di atas, klik OK untuk SAVE

    Saya akan pertegas tutorial dengan gambar disertai instruksi-instruksi berikut :
    jendela popup atribut blank blogger

  2. Menambahkan atribut Blank secara langsung ke URL link

    Secara teori hanya perlu menambahkan atribut kosong untuk link individual. Atribut ini bekerja baik untuk link internal maupun link eksternal.

    • Buka posting Anda di Editor Blogger. Blok (hyperlinking) teks atau sebaris teks (string of texts)
    • Pindah (switch) ke HTML section
    • Tekan Ctrl+F. Temukan the string of text (sebagai anchor text) atau URL.
    • Tambahkan kode : target'blank' atau ini : target"_blank" ke link tersebut.

      Lihat contoh di bawah ini :

    • Contoh default link (bawaan) <a href="http://www.URL.com">String of text</a>
    • Berikut ini contoh lainnya  : <a href="URL">Anchor Text</a>
    • Atau ini juga contoh lainnya : <a href="link">Text shown</a>

    Kemudian sekarang kita tambahkan “blank target”  pada kode diatas :

    • <a href="http://www.URL.com" target'blank'>String of text</a>
    • <a href="URL" target'blank'>Anchor Text</a>
    • <a href="link" target'blank'>Text shown</a>

    CATATAN
    String of texts (target'blank') berwarna merah dalam link diatas berfungsi sebagai blank attribute yang menjadikan link tersebut akan terbuka di jendela baru atau di tab baru.

  3. Open all External Links in New Window Automatically

    • Buka Blogger dashboard Anda
    • Klik tombol  "More options"
    • Klik "Template"
    • Klik "Edit HTML"
    • Tekan Ctrl+F  pada keyboard dan temukan  : </body>
    • Paste code berikut ini tepat DIATAS  tag : </body>
    Script Blank Target Attribute blogger

    Maaf jika script ditampilkan dalam bentuk image, untuk mengurangi loading time dan memperbesar % text/HTML ratio. Tulis ulang saja script diatas dengan benar atau download script tersebut dengan klik link SCRIPT BLANK TARGET. dan SAVE.

    CATATAN PENTING!
    Jika blog sebelumnya sudah punya jQuery Plugin (ditandai dengan adanya script pendek berwarna merah) maka Anda harus hapus potongan script pendek warna merah tersebut.

    Kini Anda bisa menambahkan sebuah link di website, baik itu di posting artikel, sidebar, footer dan dimana saja. Jika sebelumnya sudah menambahkan atribut kosong atau belum untuk link-link Anda (dengan cara 1 dan cara 2 diatas), maka dengan cara ke-3 ini, semua External Link akan terbuka di jendela baru atau tab ketika orang klik di atasnya.

    Note :
    Pembukaan di jendela baru atau tab baru hanya khusus untuk link eksternal saja.

    Cheers!  Happy Blogging!
    Source :
    How to Auto Open all External Links in New Windows or Tabs
    by Emmanuel Obarhua




That's all we know - Happy blog blogger


read more website design

16 Mei 2013

Hootsuite : how to submit social media management


Dampak media sosial sangat besar, ambil saja keuntungan model pemasaran versi digital word-of-mouth Marketing. Pastikan Anda telah membuka profil (submit) di social media profiles seperti : Facebook, Twitter, LinkedIn, Google+ dan situs lain yang menarik bagi pelanggan. Jika Anda sudah link ke banyak media sosial Facebook, Twitter, Linkedin, Google+, Google Buzz, StumbleUpon, Pinterest dan social media lain, untuk selanjutnya Anda dapat memanfaatkan fasilitas Hootsuite Social Media Management.

Hootsuite

Alat manajemen media sosial ini sangat berguna dan terdapat banyak piranti yang akan membantu mengatur waktu Anda dengan strategi pemasaran media sosial. Apa yang ingin Anda capai dari penggunaan alat ini adalah pertanyaan nyata dan jawaban yang tepat akan menjaga fokus Anda.

Hootsuite adalah salah satu tool manajemen media sosial yang paling tua keberadaannya. Hootsuite menawarkan fungsi-fungsi alat pengelolaan media sosial seperti Facebook, Twitter, LinkedIn, Google+ dan situs media sosial lain. Dengan aplikasi HootSuite, kita bisa membuka secara serempak berbagai aplikasi media sosial yang kita miliki. Jadinya mungkin seperti sebuah portal untuk social media. Dan bagian terbaik adalah Anda bisa mendapatkan rencana penggunaan yang gratis untuk alat luarbiasa ini.

Fungsi utama alat manajemen media sosial seperti HootSuite adalah :
  1. Kirim update yang terjadwalkan.
  2. Menghubungkan semua profil sosial media Anda.
  3. Menyediakan platform terpadu untuk mengelola beberapa jaringan.
  4. Meningkatkan keterlibatan anggota jaringan sosial.
  5. Mengukur keterlibatan anggota jaringan.
  6. Memberikan saran untuk meningkatkan metrik keterlibatan.

Gambar di bawah ini menampilkan contoh update di Facebook dengan menggunakan layanan HootSuite. Anda dapat mengatur variasi lebar tampilan dengan memainkan kotak geser pada sudut kanan atas.

Tab Update Facebook pada HootSuite Tools

Perhatikan pada baris bar seperti di bawah ini :

Tab-tab media sosial pada HootSuite Tools

Anda juga dapat menghadirkan tampilan Twitter, Linkedin, YouTube Free, RSS Reader, Blogger dan semua media sosial lain yang Anda miliki hanya dengan klik tab-tab tersebut. Atau menambahkan media jejaring sosial baru dengan setting seperti gambar di bawah ini :

beberapa jejaring media sosial di HootSuite

Bagaimana cara mendapatkan layanan HootSuite?

Tentu Anda harus mendaftar ke HootSuite untuk menjadi member, biaya submit gratis, dan tidak dibebani biaya penggunaan (meskipun ada juga ditawarkan paket berbayar).

Untuk mendaftar ke HootSuite ikuti tutorial berikut :
  1. Buka HootSuite dengan klik hootsuite dan Isi form submit : Email, nama dan password atau submit dengan account Facebook dengan klik tombol “Sign Up Using Facebook.”
  2. Halaman Utama HootSuite

    halaman utama HootSuite social Media Management

    Silahkan Anda eksplorasi menu drop-down pada kolom paling kiri pada halaman diatas.
  3. Pada menu Drop-down pilih menu Pengaturan (Setting) >> Account dan lakukan pengaturan account, misalnya seperti contoh ini :

    pengaturan setting account
  4. Silahkan lakukan eksplorasi sesuai dengan kebutuhan pengelolaan semua media sosial Anda.

Unique selling points of the tool - Hootsuite
  • Free basic version.
  • Schedule post updates.
  • Includes Google+ integration.
  • With the new Hootsuite interactions feature you can connect with real-time users of the tool.
  • Custom reports with Facebook Insights and Google Analytics.
  • It has recently acquired another Social Media Management tool called Seesmic.
  • Is used by big brands like McDonalds, Pepsico, WWF and many more.




That's all we know - Happy blog blogger

read more website design

11 Mei 2013

Setting G-Zip Encoding untuk Speed Loading website


Sebenarnya ini mirip file zip pada Personal Computer yang dikompres untuk mengurangi total size file selama transfer file secara online, maka demikian juga dengan heavy files di website (blog) dapat diubah menjadi file zip dengan sesuatu yang disebut Kompresi G-Zip (G-Zip Compression). Tujuannya untuk menghemat bandwidth dari server Anda, mengurangi waktu download dan terutama untuk mengurangi loading halaman web. Harus dilakukan konfigurasi web server Anda sehingga mampu mengembalikan content zip.

Compression sebenarnya simple saja, namun merupakan cara efektif menghemat bandwidth dan meningkatkan speed loading website atau blog Anda. Search engine Google and Yahoo yang pasti menggunakan gzip compression.

Kecepatan loading halaman web (webpage) adalah bagian paling penting dari kegunaan website atau blog dan juga penting untuk kepentingan SEO. Google menganggap kecepatan loading halaman web menjadi salah satu dari 200 faktor peringkat yang mempengaruhi posisi website dalam hasil pencarian organik dan dikenal untuk memperkaya pengalaman pengguna (enrich user-experience). Dengan adanya berbagai situs lain dalam niche Anda, maka kompetisi untuk mendapatkan lalu lintas pengunjung dan membuat orang terkesan dengan kegunaan yang kaya (rich usability) menjadi lebih penting setiap hari. Jika website Anda tidak muncul dengan cepat kemungkinan Anda pun akan kehilangan pengunjung situs ke pesaing Anda dalam hitungan detik.

Proses penampilan halaman website di Browser

Saya ingin menjelaskan content pengkodean apa ketika Anda mengajukan sebuah request file seperti http://www.yahoo.com/index.html, maka browser Anda akan “bicara” ke web server. Dan percakapan yang terjadi kurang lebihnya berjalan seperti ini dibawah ini :

HTTP-request-response-normal
  1. BROWSER :  “Hei!!!  Beri saya  /index.html
  2. SERVER : OK, saya akan lihat apakah  /index.html ada ...
  3. SERVER :  Ya saya menemukannya!  Berikut ini response code (200 OK) Anda dan saya kirim file tersebut (/index.html).
  4. BROWSER : Size 100KB? Oooh ... tunggu, tunggu...!!  OK, akan loaded.
Tentu saja, secara faktual protokolnya jauh lebih formal (silahkan monitor saja dengan Live HTTP Headers ). Tetapi yang jelas, setelah WEB SERVER bekerja, Anda akan mendapat file /index.html.

So what's the problem? - website archives

Well, sistem bekerja baik. Masalahnya apa? Masalahnya sistem tidak bekerja efisien. File /index.html. berukuran 100KB adalah jumlah teks yang banyak. Membebani HTML secara berlebihan.

Setiap tag <html>, <table> dan tag <div>  memiliki tag penutup yang hampir sama. Kata-kata yang diulang pada seluruh dokumen. menjadikan HTML (dan juga XML) menjadi tidak ramping.
Apa solusinya jika file yang di-request oleh browser terlalu besar dan tidak ramping? Ubah ke file ZIP.

Jika kita bisa mengirim file zip. Ke browser (index.html.zip) bukan index.html yang ASLI, MAKA kita akan menghemat bandwidth dan waktu download. Perlu Anda tahu.  Browser bisa men-download file zip, ekstrak, dan kemudian menunjukkan kepada pengguna dan dimuat dengan lebih cepat.

Percakapan Browser dan Server kurang lebihnya seperti terlihat di bawah ini :

HTTP-request-response-compressed file
  1. BROWSER : Hei! Bisakah saya dapatkan /index.html?
    Saya ingin versi compres jika Anda bisa lakukan.
  2. SERVER : Coba saya lihat.  Yup! Ini dia. Anda ingin compressed version? Ini dia, keren!.
  3. SERVER : Saya telah temukan /index.html, dan kini saya jadikan file zip dan kirimkan ke Anda.
  4. BROWSER : Great! Bagus! Ukuran file zip menjadi hanya 10KB. Saya akan unzip dan menunjukkannya ke pengguna saya.

Rumusnya sederhana  ==========>>  Smaller file = faster download = happy user.
Ilustrasi perbandingan penggunaan file compressed G-Zip dan file zip uncompressed seperti ini :

ilustrasi compressed gzip



Source : How To Optimize Your Site With GZIP Compression

That's all we know - Happy blog blogger

read more website design

08 Mei 2013

Manfaatkan Pinterest untuk Meningkatkan Trafik Blog


Pinterest adalah situs media sosial (sama seperti Facebook, Twitter, Linkedin, Stumbleupon etc), lebih tepatnya situs social media berbasis gambar. Ada yang berbeda pada social networking ini, Pinterest dimulai dengan konsep unik (menciptakan situs jaringan sosial berbasis gambar) menjadikannya salah satu situs paling populer. Pinterest membantu penayang mengarahkan trafik kunjungan ke situs mereka.

pinterest webpage in website design

Sebuah gambar bisa menceritakan banyak hal dan dengan demikian dapat menarik perhatian orang. Jaringan sosial berbasis gambar telah menjadi konsep unik di balik Pinterest.

Pinterest is an online pinboard.

Organize and share things you love.

Menambahkan tombol Pinterest di website blog Blogger

I) Button code

Berikut ini opsi code untuk tombol yang disediakan oleh official website Pinterest :

opsi-tampilan PINTEREST di website

II) Adding code to blog

Adding to Blogger
  1. » Layout > Add A Gadget dan pilih HTML/Javascript.
  2. » COPY salah satu opsi code diatas (diantara opsi 1-4) dan PASTE
    ke dalam content box.
  3. » Ganti USERNAME dengan Pinterest username (harus submit dulu
    ke PINTEREST).
  4. » SAVE.

Make your website blog post pinnable

Hal pertama harus dilakukan ialah mengubah website atau blog Anda bersifat pinnable. Menambahkan tombol Pinterest di halaman situs akan membuat lebih mudah bagi user untuk pin gambar. Ada banyak plugin yang dapat digunakan. Seorang user dapat dengan mudah berbagi foto dan memasangnya di papan Pinterest mereka dalam waktu singkat.

Dalam kasus website sedang dibuat dengan kepentingan utama untuk mendapatkan lalu lintas Pinterest, Anda harus memastikan bahwa tombol Pin harus dikaitkan dengan setiap gambar yang Anda posting. Ini akan memastikan bahwa gambar yang mudah pinnable.

Ask people to pin images on your Pinterest board

Tidak banyak yang tahu bagaimana ini bekerja. Ini  ide bagus untuk mendorong orang mendaftar di situs web sehingga mereka langsung mendapat pin gambar di dinding. Upaya sederhana dapat berakhir dengan hasil luarbiasa - memungkinkan lebih banyak visitor mengunjungi secara teratur dan membuat jaringan kuat kelompok pengguna. Ada berbagai cara mendapatkan trafik via Pinterest, seperti misalnya Anda mengatur kompetisi dan memberikan hadiah kepada pemenang.

Make the Pin Board flashy and lively

Ciptakan papan Pinterest semenarik mungkin, ini akan memicu imajinasi user, mendorong mereka untuk menambahkan berbagai gambar yang pada akhirnya akan membuat papan Pin akan lebih baik. Sebuah papan pin dihias dengan baik dan gambar-gambar yang disematkan menarik, pasti orang senang mengunjungi dan melakukan kunjungan ulang.

Pastikan Anda mematuhi terms-and-conditions. Tidak ada pelanggaran hukum, seperti isu copyright terkait dengan gambar-gambar di papan Pinterest. Pelanggaran akan menjadi publisitas buruk. Jika Anda dapat membuat penggunaan terbaik, boleh jadi papan Pinterest akan berubah menjadi alat pemasaran sangat kuat - membantu mendapatkan perhatian pelanggan/klien potensial.

source :How to add a Pinterest Follow button



That's all we know - Happy blog blogger

read more website design

07 Mei 2013

Tambah tombol Official Twitter Follow ke website blog


M anfaatkan alat integrasi Twitter dari sekarang. Jika baru memulai integrasi Twitter ke blog (website), maka menambahkan tombol Follow di sidebar blog adalah awal yang baik sebagai cara bagus menunjukkan tweets terbaru di blog. Ini cara efektif mendapatkan pembaca yang terlibat dalam update Twitter Anda sebagai cara mudah dan sederhana. Kesederhanaan bukan hal buruk.
official twitter follow button

Untuk memudahkan tamu blog mengikuti Anda di Twitter dapat dilakukan dengan menambahkan tombol Twitter Follow pada blog. Tombol ini memungkinkan mereka follow Anda secara langsung dari blog, tanpa harus mengunjungi situs resmi Twitter. Semua dilakukan hanya dengan SATU klik (jika mereka telah LOGIN).

Tombol tersebut bisa disertakan dengan (optional) followers count. Pengunjung dapat melihat  profile Anda dan tweets terbaru dengan klik tombol tersebut.

Mendapatkan tombol Twitter Follow untuk website

Ikuti tutorial singkat :
  1. Pergi ke Dashboard >> Layout .
  2. Klik Add A Gadget dan pilih gadget HTML/Javascript.
  3. COPY code di bawah ini dan PASTE ke content box (download script DISINI)

    Twitter-follow-button-start

  4. Ganti USERNAME dengan Twitter handle Anda (username Anda).
  5. Jika saat ini blog Anda sudah menggunakan Tweet Button, maka Anda tidak membutuhkan script Twitter widget (lihat code line 3). Hapuskan saja script tersebut (snippet nomor 3).
  6. Konfigurasikan tombol. Anda dapat mengkonfigurasi tombol Follow (lihat tabel dibawah ini) dengan menambahkan link data-attributes (letakkan sesudah class="twitter-follow-button") pada line 2. Refer to the list below :

    opsi-opsi tombol Twitter Follow

  7. SAVE the widget dan VIEW your blog.
  8. Lakukan uji coba dengan menekan tombol Follow untuk memastikan tombol tersebut bekerja.

Artikel Asli : http://www.bloggersentral.com/2011/06/add-official-twitter-follow-button.html


That's all we know - Happy blog blogger

read more website design
Penelusuran topik khusus di blog ini
Loading