Featured Post Today
print this page
Latest Post
Tampilkan postingan dengan label blog. Tampilkan semua postingan
Tampilkan postingan dengan label blog. Tampilkan semua postingan

3 Tools Pengujian Desain Responsive Blog atau Website


Pada tutorial ini saya akan mengajak Anda untuk melihat 3 tools dari sekian banyak tools pengujian desain responsive. Alat ini sangat membantu web desainer dalam merancang maupun mengembangkan website desain responsive. Dan untuk cara kerja mesin tool yang saya bawa saat ini cara kerja hampir sama dan cukup simple. Yang perlu ada lakukan hanyalah memasukan URL dari website/blog Anda untuk melakukan pengujian. Dan hasilnya akan ditampilakan dalam berbagai platform atau device yang ada. berikut 3 tools pengujian desain responsive :

  1. Responsivetest
pada tools ini hasil resize di tampilkan pada 3 platform umum yaitu Desktop, Tablet dan Phone. cara kerjanya masukan URL website Anda di pojok kanan atas dan tekan Enter dan untuk melihat dalam platform yang beda klik pada ikon dan pilih ukurannya.


tools


sumber


   2.   Screenqueri

Di screenqueri platform yang ditampilkan hanya ada 2 yaitu phone dan tablet. Yang membedakannya dari tools lain, kita dapat mengubah ukuran hasil resize selain mengklik pada ikon bisa juga dengan mendrag atau menarik garis titik-titik merah. cara kerjanya, masukan URL pada pojok kanan atas dan klik view dan pilih platform yang ingin kita lihat tampilannya.

tools


sumber


     3.  Re-ponsive

Tools yang terkahir ini selain tampilannya yang simple, cara kerjanya juga simple hanya butuh 2 langkah untuk melihat semua hasil tampilan dari platform iphone, ipad dan android. cara kerjanya, masukan URL website Anda di dalam kotak putih setelah http:// dan tekan enter, hasilnya akan ditampilkan semua.

tools

sumber


Sekian dari saya tentang 3 Tools Pengujian Desain Responsive, jika Anda tertarik dengan template blogger dengan desain responsive, Anda bisa mengunjungi artikela saya yang lainnya : 10+ Template Blogger Responsive.



0 komentar

Cara Membuat Template Blog Menjadi Lebih SEO Friendly

Cara Membuat Template Blog Menjadi Lebih SEO Friendly -  Kali ini ini-caranya.blogspot.com akan berbagi tips seputar blog, Tips kali ini adalah membuat template lebih SEO Friendly. Banyak cara yang harus kita tempuh untuk membuat template blog lebih seo friendly. Salah satunya adalah dengan memilih template yang seo. Tapi tidak semua template itu seo dimata google. Jadi kita harus turun tangan untuk membuat template lebih seo friendly.
Nah, jika mungkin Anda ingin membuat template blog Anda agar menjadi template SEO friendly maka cara-cara di bawah ini mungkin bisa bermanfaat buat Anda. Berikut cara-caranya :
1. Page Title
Biasanya sob format page title dari blogger adalah seperti ini, JUDUL BLOG : JUDUL POSTING. Nah, agar blog kita lebih disukai oleh Google, kita harus merubah format page title standar itu menjadi seperti ini, JUDUL POSTING | JUDUL BLOG.
Caranya cari kode berikut ini di Edit HTML, cukup dengan menekan tombol Ctrl+F  atau F3 pada keyboard anda :

<title><data:blog.pageTitle/></title>

Kalau udah dapet kodenya, silakan Anda hapus dan ganti dengan kode berikut ini :

    <b:if cond=data:blog.pageType == "item">
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/></title>
    </b:if>

Atau Anda juga bisa tambahkan dengan beberapa kata kunci (keyword).

    <b:if cond=data:blog.pageType == "item">
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/> | KEYWORD ANDA | KEYWORD ANDA </title>
    </b:if>

Ganti kode "KEYWORD ANDA" dengan keyword yang Anda incar. Setelah semua selesai jangan lupa untuk save template.
2. Meta Keyword dan Deskripsi
Suatu mesin pencari seperti Google sangat menyukai sebuah website/blog yang jelas tema dan isi content-nya. Jadi, Anda harus tambahkan suatu tag yang namanya meta tag. Caranya adalah dengan menambahkan kode berikut ini sebelum kode <b:skin><![CDATA[/*.

    <b:if cond=data:blog.url == data:blog.homepageUrl>
    <meta name="description" content="DESKRIPSI BLOG ANDA" />
    <meta name="keywords" content="KATA KUNCI, KATA KUNCI, KATA KUNCI" />
    </b:if>

Setelah itu, save template Anda.
3. Memasang Breadcrumbs
Breadcrumbs adalah menu navigasi yang ada di atas sebuah posting atau artikel. Contohnya bisa dilihat diblog saya ini. Cara pasangnya juga sudah banyak dibahas di blog-blog guru blogging. Tinggal di search saja di google kan sudah banyak bertebaran :)
4. Memasang Related Post
Related post sangat bagus untuk SEO maupun buat pengunjung. Jadi pasanglah segera related post di blog Anda. Caranya sudah banyak dibahas di blog-blog para guru blogging. Tinggal buka atau klik disini
5.  Mematikan Setting Blog Archive (Arsip Blog)
Google sangat membenci dengan yang namanya duplicate content. Jadi ketika kita mengaktifkan opsi blog arsip, misalnya kejadiannya seperti ini, Anda ingin membuat sebuah blog di blogger.com. Lalu membuat 3 posting, 1 buah setiap hari. Maka di halaman utama atau homepage Anda akan ada 3 posting dan sebuah link arsip seperti ini, http://BLOGANDA.blogspot.com/2013_03_01_archive.html, yang memunculkan 3 posting yang sama dengan yang dimunculkan oleh homepage. Intinya, 2 buah link yang memunculkan sebuah halaman yang sama. Bagi Search Engine apa lagi Google, ini adalah masalah serius. Oleh karena itu kita harus me-nonaktifkan opsi arsip.

Caranya, cukup klik tab Setting, pilih Archiving. Nah, pada bagian Archiving Frequency ubah menjadi No Archive. Selesai deh

6. Menambahkan Kode ‘Rel=Canonical’
Gunanya kita menambahkan ‘rel=canonical’ adalah untuk menghindari konten ganda, karena seperti para Master of SEO bilang bahwa Google sangat tidak dapat mentolerir sebuah duplicate content. Caranya mudah, cukup klik Edit HTML, lalu Anda tambahkan kode berikut setelah kode <head>.

    <link expr:href=data:blog.url rel=canonical />

Save template dan selesai.
7. Tag Heading
Google sangat menyukai sebuah tulisan atau judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting Anda dengan tag H1. Caranya cari kode berikut!

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

Kode yang dicetak tebal dihapus dan diubah dengan tulisan h1. Setelah itu tambahkan kode berikut sebelum kode ]]></b:skin>.

    h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Nah, bagaimana sekian tips Cara Membuat Template Blog Menjadi Lebih SEO Friendly  semoga membantu yah

0 komentar
 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Catatan coretan - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger