Blog Ghifari

Membuat Sitemap Blogger dan Wordpress (Lengkap)

<b>Membuat Sitemap</b> yang dimaksud bukan merupakan site-map di dalam website ataupun blog yang merupakan halaman yang memuat semua link/isi website/blog (Baca Juga > Cara membuat daftar isi), melainkan sitemap (peta situs) yg menjadi rujukan bagi Mesin pencari dalam melakukan crawling sebuah website/blog. Dengan demikian, proses indeks menjadi lebih cepat dan tidak ada url/halaman yang terlewatkan oleh spiderbot. Sehingga setelah membuat sitemap nantinya akan mempelajari cara mendaftarkan sitemap ke google.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQkpxZ6sXOCdCSCKG93PVKbaibzHl7YEZeUUpjuCH-GsdnH7D7l6Zi6q_tg2SPdur0eb0OZKycX2GJGGYrd2vSQODG-3iZiHs6wkkSKyYTNvmD0VTTGfRA3lgyDH9e5HLqNhz22AxC-YT4/s1600/sitemap.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Sitemap" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQkpxZ6sXOCdCSCKG93PVKbaibzHl7YEZeUUpjuCH-GsdnH7D7l6Zi6q_tg2SPdur0eb0OZKycX2GJGGYrd2vSQODG-3iZiHs6wkkSKyYTNvmD0VTTGfRA3lgyDH9e5HLqNhz22AxC-YT4/s320/sitemap.jpg" title="Membuat Sitemap" width="320" /></a></div>
<div>
<br />
<div>
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: Ubuntu, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.3em; font: inherit; line-height: 23.99305534362793px; margin: 0.25em 0px; outline: 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
<b>Lalu, Apa Itu Sitemap(Peta situs)?</b></h3>
</div>
<div>
Sitemap adalah sebuah cara sederhana bagi para webmaster untuk menginformasikan kepada search engine ( Google misalnya ) tentang halaman-halaman pada situs mereka yang bisa di-crawl. Bentuk paling sederhana Sitemap adalah berupa file XML yang berisi daftar URL sebuah situs beserta metadata-nya masing-masing. Metadata misalnya : kapan terakhir di-update, seberapa sering URL biasanya berubah, dan tingkat relatif keutamaannya terhadap URL lainnya. Metadata ini akan membantu search engine sehingga lebih mudah membaca dan menge-crawl situs.</div>
<div>
<br /></div>
<div>
Web crawler biasanya menemukan halaman sebuah situs dari link-link di dalam situs itu sendiri, atau dari situs yang lain. Sebuah Sitemap menyediakan data-data link itu dan mengijinkan crawler yang mensupport Sitemap untuk menjelajah semua URL yang ada di dalamnya, lalu menganalisa masing-masing URL tersebut dengan menggunakan metadata yang menyertainya. Namun, menggunakan protocol Sitemap tidak menjamin bahwa halaman-halaman web kita akan terindeks oleh search engine. Penggunaan Sitemap juga disarankan pada dasar-dasar SEO, seperti telah ditulis pasa salah satu tips cepat diindex Google di blog ini.</div>
<div>
<br /></div>
<br />
<br />
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: Ubuntu, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.3em; font: inherit; line-height: 23.99305534362793px; margin: 0.25em 0px; outline: 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
<b>Fungsi Membuat Sitemap</b></h3>
<br />
<div>
Membuat dan men-submit Sitemap akan memastikan search engine mengetahui halaman-halaman pada situs kita, termasuk URL yang bisa jadi tidak akan ditemukan search engine ketika crawling tanpa sitemap. Sitemap juga akan sangat berguna jika :<br />
<ol>
<li>Situs kita mempunyai content yang dinamis / selalu berubah. Seperti blog misalnya.</li>
<li>Situs kita mempunyai halaman-halaman yang susah ditemukan oleh search engine pada saat dia crawling. Misalnya ; halaman yang banyak AJAX-nya, atau Flash.</li>
<li>Situs kita baru dan cuma punya sedikit link ke kita. Seperti kita tahu, crawler search engine menjelajah web dengan mem-follow link dari page satu ke page lainnya. Jadi, semakin sedikit jumlah link ke situs kita, semakin sulit pula si crawler menemukan situs kita.</li>
<li>Situs kita mempunyai arsip konten yang sangat besar tapi tidak saling link dengan baik, atau bahkan tidak sama sekali.</li>
</ol>
<br />
Sitemap juga dapat kita gunakan untuk memberikan tambahan informasi tentang halaman kita kepada search engine, misalnya :<br />
<br />
<ul>
<li>Seberapa sering halaman situs kita berubah.Contoh : kita mungkin meng-update halaman kita tentang produk setiap hari, tapi halaman About Me cuma 6 bulan sekali.</li>
<li>Tanggal terakhir halaman di modifikasi.</li>
<li>Tingkat keutamaan relatif dari halaman-halaman di situs kita. Misal, Home Page kita mempunyai keutamaan relatif 1.0, halaman-halaman Category 0.8, postingan blog 0.5, atau halaman produk juga 0.5. Yang perlu diketahui, angka-angka tadi hanya berarti bahwa Home Page kita relatif lebih utama daripada halaman Category, lalu halaman Category relatif lebih utama daripada postingan blog kita, dan tidak berpengaruh pada ranking masing-masing halaman kita di SERP.</li>
</ul>
<br />
<br />
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: Ubuntu, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: normal; font: inherit; line-height: 23.99305534362793px; margin: 0.25em 0px; outline: 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Cara Membuat Sitemap Blogger/Blogspot</h3>
</div>
<div>
Untuk blog merek Blogger, anda tidak perlu membuat sitemap karna pets situs (sitemap) telah tersedia otomatis tanpa membuat halamannya secara manual. Nah berikut cara submit sitemapnya :</div>
<div>
<br /></div>
1. <b>url sitemap</b>, yaitu url feed dari website/blog. Anda dapat menggunakan layanan <i>sitemap generator</i> yang sangat banyak ditemui, ketikkan saja 'sitemap generator' pada Google. contoh url feed blogger/blogspot: http:/<span style="color: red;">/blog.fispol.com</span>/feeds/posts/default. </div>
<div>
bisa juga seperti :</div>
<div>
http://<span style="color: red;">blog.fispol.com</span>/feeds/posts/default?max-results=9999&amp;amp;alt=json-in-script&amp;amp;callback=loadtoc<br />
atau bisa juga jenis feed atom.xml-nya, http://<span style="color: red;">blog.fispol.com</span>/atom.xml?redirect=false&amp;start-index=1&amp;max-results=500</div>
<br />
<br />
Tambahkan bagian yang berwarna merah dengan url blog anda dan itulah url sitemapnya.<br />
<div>
<br />
2. Masuk ke <a href="https://www.google.com/webmasters/tools">Google Webmaster Tools</a>.<br />
3. Klik url website/blog yg telah terdaftar dan hendak diberi sitemap.<br />
4. Pada menu konfigurasi/site configuration, pilih sitemaps.<br />
5. Klik submit a sitemap, dan masukkan url sitemap.<br />
6. Kemudian klik submit sitemap.<br />
7. Setelah disubmit, akan ditemui laporan yang menyatakan bahwa pendaftaran sitemap anda telah berhasil. Namun sebelumnya akan ada proses yang ditunjukkan dengan gambar jam. Proses ini relatif, ada yang 1 jam hingga 2 hari. Proses pendaftaran yang berhasil secara keseluruhan akan ditunjukkan dengan tanda centang (check).<br />
8. Selesai<br />
<div>
<br /></div>
</div>
<div>
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: Ubuntu, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: normal; font: inherit; line-height: 23.99305534362793px; margin: 0.25em 0px; outline: 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Cara Membuat Sitemap di Wordpress</h3>
</div>
Sebenarnya banyak cara untuk kita dapat membuat sitemap wordpres, sebagai contoh pada blog saya Tips sahabat ini dibuat dengan bantuan sebuah plugin. Untuk membuat sitemap dengan bantuan plugin silahkan ikuti tutorialnya berikut ini :<br />
<div>
<ol>
<li><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 12px; line-height: 18px; text-align: justify;">Download lah terlebih dahulu plugin </span><span style="background-color: white; color: #ff6600; font-family: "verdana" , sans-serif; font-size: 12px; line-height: 18px; margin: 0px; padding: 0px; text-align: justify;"><span style="margin: 0px; padding: 0px;"><strong style="margin: 0px; padding: 0px;"><a href="http://wordpress.org/extend/plugins/google-sitemap-generator/" rel="nofollow" style="color: #0000dd; margin: 0px; padding: 0px; text-decoration: initial;" target="_blank" title="google sitemap generator">XML Sitemap Generator for WordPress</a></strong></span></span></li>
<li><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 12px; line-height: 18px; text-align: justify;">Setelah itu upload dan ekstrak plugin tersebut kedalam</span><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 12px; line-height: 18px; text-align: justify;"> </span>hosting<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 12px; line-height: 18px; text-align: justify;"> </span><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 12px; line-height: 18px; text-align: justify;">tempat kita menginstal wordpress</span></li>
<li><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 12px; line-height: 18px; text-align: justify;">Setelah itu bukalah dashboard blog wordpress anda kemudian aktifkanlah plugin diatas.</span></li>
<li><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 12px; line-height: 18px; text-align: justify;">Setelah di aktifkan kita sudah bisa langsung mensetting sitemap yang akan kita buat.</span></li>
</ol>
<ul style="background-color: white; font-family: Verdana, sans-serif; font-size: 12px; line-height: 18px; list-style: none; margin: 0px; padding: 0px; text-align: justify;"><div id="chitikaSelectBeacon122" style="float: left; margin: 0px; padding: 0px;">
</div>
</ul>
<div style="background-color: white; font-family: Verdana, sans-serif; font-size: 12px; margin: 0px; padding: 0px; text-align: justify;">
Mengenai pengaturan sitemap tersebut anda bisa perhatikan pada gambar dibawah ini :</div>
</div>
<div style="background-color: white; font-family: Verdana, sans-serif; font-size: 12px; margin: 0px; padding: 0px; text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN3LW7Eoku4gBEGrvdJhgSjyHNbC_5cz_ZcPIqzbxInBtlKp_oRe3itDvoKFbG5RyqcgJ4XSXtK4OZ6qNwscq6H2g5eFphcHyOKpNPUgAPp_xUodQwKE8xYF76mkLWkobcvYzCenqZxWLy/s1600/sitemap-setting.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Sitemap di Wordpress" border="0" height="291" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN3LW7Eoku4gBEGrvdJhgSjyHNbC_5cz_ZcPIqzbxInBtlKp_oRe3itDvoKFbG5RyqcgJ4XSXtK4OZ6qNwscq6H2g5eFphcHyOKpNPUgAPp_xUodQwKE8xYF76mkLWkobcvYzCenqZxWLy/s400/sitemap-setting.jpg" title="Cara Membuat Sitemap di Wordpress" width="400" /></a></div>
<div style="background-color: white; font-family: Verdana, sans-serif; font-size: 12px; margin: 0px; padding: 0px; text-align: justify;">
Selesai membuat sitemap dan sekarang saatnya anda mendaftarkan / submit sitemap ke mesin pencari.</div>

Membuat Sitemap Blogger dan Wordpress (Lengkap)

Membuat Sitemap yang dimaksud bukan merupakan site-map di dalam website ataupun blog yang merupakan halaman yang memuat semua link/isi webs...

Baca juga »

2:57 AM

Condisi Tag | Tampilan Template Berbeda Tiap Halaman

Minggu lalu seorang sahabat mengingatkan saya tentang <b>conditional tag</b>,<b> </b>so tidak ada salahnya sekalian  saya tulis disini supaya semua teman-teman bisa memahami lebih tentang HTML / berbagai conditional tag dalam template Blogger. Sebelum mempelajari conditional tag mari kita sepakati dulu bahwa semua bagian dalam sebuah halaman blog terdiri dari kumpulan gadget/widget termasuk halaman artikel, sidebar, header, footer dan lain sebagainya. <u>Conditional Tag atau tag kondisional adalah tag yang digunakan untuk mengatur suatu gadget/widget</u> atau suatu elemen tertentu untuk ditampilkan atau tidak ditampilkan dalam halaman spesifik. Misal; pada halaman utama kita ingin menampilkan sidebar tetapi ketika pengunjung membuka halaman demi halaman artikel maka sidebar tersebut tidak ditampilkan. Nah, untuk mengatur sidebar tersebut tampil dan tidak tampil maka digunakanlah Conditional Tag.<br />
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwEJ7I67tZ7B-kDo8QuwgeC4HjDzr5c01bN1cLrm_EPyAz8jy8b1376E6_33nnZfWT38HsF9BoM3i6kaWzyXEnnP5bWBn3kYtEAYTzac1e2F9UuOI7ynJppW3rMlOaIPCEOXN44mzkZFd3/s1600/Tag+conditional.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Conditional Tag" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwEJ7I67tZ7B-kDo8QuwgeC4HjDzr5c01bN1cLrm_EPyAz8jy8b1376E6_33nnZfWT38HsF9BoM3i6kaWzyXEnnP5bWBn3kYtEAYTzac1e2F9UuOI7ynJppW3rMlOaIPCEOXN44mzkZFd3/s1600/Tag+conditional.png" title="Conditional Tag" /></a></div>
<div>
<br /></div>
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: Ubuntu, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: normal; font: inherit; margin: 0.25em 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Apa Itu Conditional Tag</h3>
<div>
<br /></div>
Conditional Tag merupakan suatu tag yang terdapat pada template blogger. Dinamakan Conditional Tag karena memiliki fungsi untuk mengkondisikan suatu elemen / widget tampil di halaman tertentu, sehingga dengan adanya Blogger Conditional Tag akan membuat sebuah template blogspot bisa menjadi lebih flexibel.<br />
<div>
<br /></div>
<div>
<b>Bebera Fungsi Tag Kondisional</b> (Kondisi) :</div>
<div>
<br />
-Menyembunyikan Sidebar pada halaman posting</div>
<div>
-Menyembunyikan sidebar Pada home</div>
<div>
-Meng-costum Template supaya beda setiap halaman</div>
<div>
-Menyembunyikan elemen/ Gadget.</div>
<div>
-Memuat Tapilan template berbeda setiap halaman blog</div>
<div>
-Costum Halaman statis pada blog</div>
<div>
<br /></div>
<div>
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: Ubuntu, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: normal; font: inherit; margin: 0.25em 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Syntax Conditional Tag</h3>
</div>
<div>
Umumnya Syntax Kondisi Adalah Sebagai Berikut :</div>
<blockquote class="tr_bq">
<b:if cond='[KONDISI]'> ... </b:if></blockquote>
Selalu diawali dengan tag <b:if> dan di tutup dengan tag </b:if>. Kemudian tag <b:if diikuti dengan atribut cond. Atribut cond diartikan sebagai condition atau kondisi yang digunakan sebagai subjek suatu kondisi, dan [KONDISI] adalah atribut objek atau yang menjelaskan maksud dari kondisi/condition. <br />
<div>
<br /></div>
<div>
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: Ubuntu, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: normal; font: inherit; margin: 0.25em 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Contoh2 Kondisional Tag | Costum Halaman Blog</h3>
</div>
<div>
<br /></div>
<b> Conditional Tag Halaman Index</b><br />
<div>
<b><br /></b>
<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;index&quot;'> ... </b:if> </blockquote>
<br />
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman index. Halaman index didalamnya termasuk halaman depan (homepage), halaman label/kategori dan halaman arsip. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan index' maka kode yang ada diantara conditional tag akan ditampilkan".<br />
<br />
<b>Conditional Tag Halaman Artikel</b> (item)<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'> ... </b:if></blockquote>
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman item. Halaman item (item page)adalah halaman artikel per artikel dan bukan keseluruhan kumpulan artikel. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman artikel (item)' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman artikel (item) menggunakan URL yang terkandung hurup bulan, tahun, dan judul artikel diantaranya, misal; http://namablog.blogspot.com/2010/09/judul_artikel.html.<br />
<br />
<b>Conditional Tag Halaman Statis</b> (static)<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> ... </b:if> </blockquote>
<br />
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman statis. Halaman statis (static page) adalah halaman lain artikel atau halaman yang berdiri sendiri dan isinya tidak mengambil dari database artikel. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman statis' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman statis menggunakan URL yang terkandung hurup "p" diantaranya, misal; http://bloggilabuanget.blogspot.com/p/halaman_statis.html.<br />
<br />
<b>Conditional Tag Halaman Arsip</b> (archive)<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;archive&quot;'> ... </b:if> </blockquote>
<br />
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan halaman arsip. Halaman arsip (archive page) adalah halaman yang menampilkan sekumpulan artikel yang diambil database blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan halaman arsip' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman arsip menggunakan URL yang terkandung bulan dan tahun diantaranya, misal; http://namablog.blogspot.com/2010_01_01_archive.html.<br />
<br />
<b>Conditional Tag Halaman Depan</b> (Homepage)<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.url == data:blog.homepageUrl'> ... </b:if><br />
atau :<br />
<b:if cond='data:blog.homepageUrl == data:blog.url'> ... </b:if> </blockquote>
<br />
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi halaman blog dengan URL halaman depan. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'halaman blog sama dengan URL halaman depan' maka kode yang ada diantara conditional tag akan ditampilkan". Biasanya halaman depan merupakan halaman utama dari blog kita dan URL yang digunakan adalah URL utama blog kita, misal; http://namablog.blogspot.com/.<br />
<br />
<b>Conditional Tag Halaman URL Tertentu</b><br />
<blockquote class="tr_bq">
<b:if cond='data:blog.url == "[URL]"'> ... </b:if> </blockquote>
<br />
Contidional tag ini digunakan untuk mengecek/membandingkan kondisi URL halaman blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'URL halaman blog sama dengan URL halaman blog (yang kita maksud atau kita masukan dalam [URL]' maka kode yang ada diantara conditional tag akan ditampilkan". Conditional tag ini digunakan jika kita ingin mengatur suatu gadget/widget atau elemen yang hanya akan ditampilkan atau tidak ditampilkan pada halaman yang lebih spesifik (artikel tertentu). misal; kita akan menampilkan banner iklan di-sidebar hanya pada halaman blogroll (kumpulan link teman). Maka penggunaan conditional tag-nya seperti dibawah ini:<br />
<b:if cond='data:blog.url == "http://namablog.blogspot.com/2010/09/blogroll.html"'> [disini kode gadget atau elemen yang akan ditampilkan] </b:if> <br />
<br />
<b>Conditional Tag Halaman 404 Not Found</b><br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;error_page&quot;'> ... </b:if> </blockquote>
<br />
Conditional tag ini digunakan untuk mengecek/membandingkan kondisi URL 404 Not Found atau tidak tersedianya suatu halaman. Contidional tag ini digunakan untuk mengecek/membandingkan kondisi URL halaman blog. Jika kita baca maka conditional tag diatas kurang lebih berbunyi "jika kondisi 'URL halaman blog tidak tersedia (error_page), maka kode yang ada diantara conditional tag akan ditampilkan". Conditional tag ini biasanya digunakan saat menjaga kemungkinan halaman yang dihapus namun masih terindex oleh mesin pencari. Ketika pengunjung membuka halaman tersebut maka pemberitahuan ketidaktersediaan halaman (404 Not Found) akan ditampilkan. Biasanya halaman ini disertai dengan link yang menuju ke halaman utama, halaman arsip atau about.</div>
<div>
<b><br /></b></div>
<div>
<b>Conditional Tag Meta Description</b><br />
<blockquote class="tr_bq">
<b:if cond='data:blog.metaDescription != &quot;&quot;'> ... </b:if></blockquote>
<br />
Conditional tag ini sebenarnya tidak tampak pada broswer tapi sangat bermanfaat seiring perubahan kebijakan mesin pencari yang menghapuskan meta keyword. Conditional tag ini digunakan untuk mengecek/membandingkan kondisi data blog, jika deskripsi meta blog tidak kosong (artinya memiliki meta description) maka yang ada diantara tag akan ditampilkan.</div>
<div>
<br /></div>
<div>
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; font: inherit; margin: 0.25em 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
<span style="color: #333333; font-family: "ubuntu" , "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large; font-weight: normal;">Menggunakan Tag | </span><span style="background-color: transparent;"><span style="color: #333333; font-family: "ubuntu" , "helvetica neue" , "arial" , "helvetica" , sans-serif; font-size: large;">Template  Berbeda Tiap Halaman</span></span></h3>
<div>
Lanjut ? belum Ngantuk kan? Tahan dulu deh. kita udah nyampai klimaksnya nih :D. Biar asyik coba ambil segelas kopi biar hangat...</div>
<div>
<br /></div>
...Mungkin anda heran, mengapa tampilan blog ini berbeda setiap halamannya. Coba perhatikan halaman <a href="http://blog.fispol.com/p/tukar-link.html" target="_blank">Tukar link</a>, Home, dan halaman Kategori. Pada bagian home ditampilkan sidebar lalu pada bagian halaman tidak ditampilkan. Nah Berikut Adalah Rahasia tersebut, Kita Akan menggunakan Tag Kondisi diatas untuk costum template atau menampilkan bentuk template berbeda setiap halamannya. Dengan ini kita akan bisa menyembunyikan sebagaian sidebar / widget pada halaman tertentu yang kita inginkan. Berikut Penggunaanya:</div>
<div>
<br /></div>
<div>
-. Penggunaan Conditional Tag Satu Gadget atau Elemen</div>
<div>
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]<br />
</b:if></blockquote>
 Gadget atau Elemen yang terletak diantara conditional tag akan ditampilkan jika hasil pengecekan/perbandingan dalam atribut cond (yaitu 'data:blog.pageType == "item"') adalah benar (true). Atau lebih spesifiknya; jika halaman blog yang sedang kita lihat/tampil pada alamat browser merupakan URL suatu item (misal; http://namablog.blogspot.com/2010/09/artikelku.html) maka Gadget atau Elemen yang ada diantara tag kondisional akan ditampilkan jika tidak maka Gadget atau Elemen tidak akan ditampilkan.<br />
<br />
- Penggunaan Conditional Tag Dua Gadget atau Elemen<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'>Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]<br />
<b:else/><br />
Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)]<br />
</b:if></blockquote>
<br />
Ini lebih rumit lagi... Hmmmm tarik napas dulu sambil putar kepala eh... otak...Misal; saya memiliki dua buah "laptop" yang terdiri dari 2 merk, "merk A" dan "merk B", suatu hari saya diberi pesanan editing gambar yang mengharuskan saya menggunakan software "digital imaging" yang hanya terdapat pada laptop merk B, maka saya pun menggunakan laptop merk B dalam mengerjakan pesanan editing gambar tersebut. Jika saya tuliskan maka kodenya menjadi seperti dibawah ini:<br />
<blockquote class="tr_bq">
<b:if cond='Laptop == &quot;Digital Imaging&quot;'><br />
Merk A<br />
<b:else/><br />
Merk B<br />
</b:if></blockquote>
 Laptop merk A tidak digunakan karena ternyata hasil perbandingan cond tidak memungkinkan menggunakan laptop merk A (tidak ada software digital imaging) atau hasil pengecekan/perbandingan nilainya salah (false). Laptop merk B digunakan karena hasil perbandingan/pengecekan cond bernilai salah (false). (Sebenarnya contoh ini tidak begitu mengenai sasaran tapi bingung memberikan contoh, ada ide?)Peranan tag <b:else/> digunakan sebagai alternatif jika ternyata hasil perbandingan/pengecekan bernilai salah (false) dan kita ingin menampilkan suatu gadget atau elemen jika hasilnya bernilai salah (false). Tetapi jika ternyata hasil perbandingan bernilai benar (true) maka gadget atau elemen setelah tag <b:else> tidak akan ditampikan.<br />
<br />
- Penggunaan Conditional Tag Lebih dari Satu Kondisi dan Lebih dari Satu Gadget ataT Elemen<br />
<blockquote class="tr_bq">
<b:if cond='data:blog.url == data:blog.homepageUrl'><br />
<b:if cond='data:blog.pageType == &quot;item&quot;'><br />
Gadget atau Elemen [akan ditampilkan jika bernilai benar (true)]<br />
<b:else/><br />
Gadget atau Elemen [akan ditampilkan jika bernilai salah (false)]<br />
</b:if><br />
</b:if></blockquote>
<br />
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: Ubuntu, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: normal; font: inherit; margin: 0.25em 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Memahami Operator Conditional Tag</h3>
Operator conditional tag merupakan alat khusus untuk membandingkan dua buah nilai. Operator conditional tag terdiri dari 2 jenis yaitu:</div>
<br />
<b>Operator "sama dengan"</b><br />
<blockquote class="tr_bq">
== </blockquote>
atau dalam bahasa script-nya dibaca "is equal to"<br />
<br />
<i>Contoh Kasus 1</i><br />
<br />
Seseorang memberikan teka-teki untuk menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya diberi uang Rp. 10.000,- jika saya menjawab salah saya tidak diberi uang. Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya menjawab 10 telur. Maka conditional tag ditulis sebagai berikut:<br />
<b:if cond='10 telur == 10 telur'> Saya diberi uang Rp. 10.000,- </b:if> <br />
Jawabannya : maka saya diberi uang Rp. 10.000,-<br />
<br />
<i>Contoh Kasus 2</i><br />
<br />
Seseorang memberikan teka-teki untuk menebak isi telur dalam sebuah kotak, jika saya menjawab benar maka saya diberi uang Rp. 10.000,- jika saya menjawab salah maka saya harus membayar Rp. 10.000,- . Sedangkan didalam kotak itu terdapat 10 telur, kemudian saya menjawab 5 telur. Maka conditional tag ditulis sebagai berikut:<br />
<b:if cond='10 telur == 10 telur'> Saya diberi uang Rp. 10.000,- <b:else/> Saya membayar Rp. 10.000,- </b:if> <br />
Jawabannya : maka saya membayar Rp. 10.000,-<br />
<br />
<b>Operator "tidak sama dengan"</b><br />
<blockquote class="tr_bq">
!= </blockquote>
atau dalam bahasa script-nya dibaca "is not equal to"<br />
<br />
Ini adalah operator kebalikan dari "sama dengan" dan sepertinya tidak harus dijelaskan lagi. (Atau mau ikut menjelaskan? Silahkan tinggalkan pada kotak komentar)<br />
<br />
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: Ubuntu, 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 1.3em; font-weight: normal; font: inherit; margin: 0.25em 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Kalimat Akhir | Conditional Tag</h3>
Selesai Belajar Conditional tag...berekspresi dan berpusing-pusing ria, jangan lupa siapkan peralatan untuk berfikir (makanan ringan, kopi dan obat sakit kepala). Selamat Belajar, Salam Blogger :)

Condisi Tag | Tampilan Template Berbeda Tiap Halaman

Minggu lalu seorang sahabat mengingatkan saya tentang conditional tag , so tidak ada salahnya sekalian saya tulis disini supaya semua tem...

Baca juga »

2:53 AM

Tampilan Mobile, Tutorial Modifikasi Template blog Menjadi Rensponsive

<b>Blog & Tips Seo</b>, <i>Modifikasi Template Blogger menjadi responsive</i> - Akhirnya blog ini telah diperbaharui dan sekarang <u>menjadi responsive</u>, sehingga jika diakses melalui perangkat manapun baik itu mobile seluler, tampilannya akan disesuaiakan sesuai dengan layar pembacanya. Saya juga edit-edit sedikit beberapa komponen lainnya agar tampilannya lebih menarik dan simple, salah satunya adalah <span style="color: blue;">logo blog</span> kita yang baru. Sudahkah anda lihat diatas? di footer blog ini merupakan tampilan logo mininya... :D dan mudah-mudahan anda tidak mengejek saya karna logo tersebut kurang mantap editannya.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirophBiOYHjWRV-7WIVVV132cCfhKHNoXViv8IfJ61yfnr8-cq3_OyEyUlttYm30zS0fJ0hF7LFvz-fFajY-h45Yy38f7jdLQ9ZMqOVB2ykTl9X22hJkduaoK5kgBVy2wxmv0khVASOCfa/s1600/blogseo+240x98.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Tampilan Logo baru Blog Responsive" border="0" height="80" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirophBiOYHjWRV-7WIVVV132cCfhKHNoXViv8IfJ61yfnr8-cq3_OyEyUlttYm30zS0fJ0hF7LFvz-fFajY-h45Yy38f7jdLQ9ZMqOVB2ykTl9X22hJkduaoK5kgBVy2wxmv0khVASOCfa/s200/blogseo+240x98.png" title="Tampilan Logo baru Blog Responsive" width="200" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan Logo Baru !!! </td></tr>
</tbody></table>
Oh ya, soal tampilan logo baru diatas, tolong jangan tanya macam-macam. Kenapa ada penembaklah ? kenapa Hurufnya miringlah? karna ini hanyalah tampilan logo sebagai pelengkap blog yang menjadi responsive :D #Mari ketawa :D 3333x hahahahah.....<br />
<h4>
Kenapa Oh kenapa, dan haruskah tampilan blog responsive?</h4>
Saya menyempatkan diri untuk <b>memperbaharui/modifikasi tampilan blog</b> karna banyak keluhan yang mengatakan "blog tidak menampilkan resolusi yang tepat bagi pembaca, tidak sesuai dengan ukuran lebar layar pada monitor mereka". Dan itu benar,  pembaca harus dilayani karna mereka adalah raja bagi sebuah blog.<br />
<br />
Dulu saya sempat mengabaikannya, saya pikir tampilan blog / template tanpa responsive tidak memiliki dampak besar bagi blog. Tapi ternyata saya harus mulai memikirkan tentang penyesuaian layar bagi pembaca setelah diketahui bahasanya pengunjung (pengguna internet) sekarang ini rata-rata 70% menggunakan perangkat mobile seperti Ipad, Hp, blackberry dalam berselancar didunia internet.<br />
<br />
Yups, untuk mengetahuinya anda bisa melakukan riset sediri. Masuk ke dashboard ==> statistik blog anda. Lihat dari mana datangnya para pengunjung tersebut. Banyak bukan dari perangkat seluler non PC?<br />
<br />
So, sudah menjadi dasar penting bagi kemajuan blog untuk mendesain tampilan layar menjadi lebih ramah perangkat seluler yang memiliki lebar berbeda-beda (Mobile friendly blog).<br />
<br />
Dalam beberapa waktu akhirnya template blog ini telah disulap menjadi Responsive, Mobile friendly dan bisa diakses perankat apa saja termasuk seluler dalam berbagai ukuran layar.<br />
<br />
Apakah template blog ini sudah responsive? Terus terang saya sendiri masih belum dapat memastikan apakah benar template ini sudah menjadi responsive atau tidak? dapatkah anda membaca artikel blog ini melalui handphone seluler, tab, ipad, iphone? bagaimana dengan resolusinya. Yuk mari bantu saya, coba cek melaui perangkat anda.<br />
<br />
<div>
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 23.99305534362793px; margin: 0.25em 0px; outline: 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Cara Saya Mengetahui Tampilan Blog Responsive</h3>
</div>
<div>
<br /></div>
<div>
Cara yang saat ini saya lakukan untuk mengetahui <i>apakah template blog yang kita gunakan sudah responsive</i> dengan tampilan mobile adalah dengan menyesuaikan (<span style="color: red;">minimaze</span> + maximaze) ukuran browser yang digunakan.</div>
<div>
<br /></div>
<div>
contohnya saat ini saat sedang memanfaatkan browser google chrome, maka untuk memastikan blog sudah responsive dan support mobile caranya adalah :</div>
<div>
<br /></div>
<div>
Pertama, kunjungi objek dalam contoh ini adalah halam beranda di blog ini sendiri http://blog.fispol.com/.</div>
<div>
<br /></div>
<div>
Langsung saja arahkan perhatian anda kesudut atas  paling kanan Chrome dan klik pada kotak Minimaze (Biasa terletak ditengah antara 3 tombol berdampingan). Seperti tampilan dibawah ini.<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMv-9ilIR39fpKdT5VeF1MTTj2iXhKJzwfuAxhC7jQpjWER6TEp3x38btmWLrna2csjnhHXMmab2wddCpqYqDCewl7qNg0Obi4S5TbkSUJVpb0FGkhDE3ujA1XntLNvLHXkjd3SlmGX4s/s1600/Tampilan+Blog+Responsive+Lebar+800.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Membuat Tampilan Blog responsive" border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFMv-9ilIR39fpKdT5VeF1MTTj2iXhKJzwfuAxhC7jQpjWER6TEp3x38btmWLrna2csjnhHXMmab2wddCpqYqDCewl7qNg0Obi4S5TbkSUJVpb0FGkhDE3ujA1XntLNvLHXkjd3SlmGX4s/s400/Tampilan+Blog+Responsive+Lebar+800.jpg" title="Membuat Tampilan Blog responsive" width="400" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan blog Home pada layar dengan lebar 800px keatas</td></tr>
</tbody></table>
Selanjutnya untuk menyesuaikan lebar layar adalah dangan menarik sudut tepi kanan / kiri kedalam, ini akan mengecilkan ukuran layar dan kita bisa melihat apakah blog tersebut responsive / mobile friendly?<br />
<br />
Ketika Dikecilkan (layar browser) maka blog akan menyesuiakan ukuran lebarnya sehingga konten dapat terbaca secara keseluruhan.<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7QmFN11PcbVKKL0UfoN95oAPhlZtvYNG-c2ARtmMx8yi4rl-0mFivVoZzKdUFuJGucNwJne4FDIiCrz07UpBra2fe07QNrk6S1HuN8hLSx7_scb-3ormeiFpNDF1uyf_kjrS0e8PyC6eW/s1600/Tampilan+responsive+Blog+ukuran+600.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="menjadikan Rensponsive / Mobile friendly" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7QmFN11PcbVKKL0UfoN95oAPhlZtvYNG-c2ARtmMx8yi4rl-0mFivVoZzKdUFuJGucNwJne4FDIiCrz07UpBra2fe07QNrk6S1HuN8hLSx7_scb-3ormeiFpNDF1uyf_kjrS0e8PyC6eW/s320/Tampilan+responsive+Blog+ukuran+600.jpg" title="menjadikan Rensponsive / Mobile friendly" width="252" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan Blog pada layar 650px kebawah</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
Pada layar dengan ukuran lebar 650px atau lebih kecil, tampilan blog berubah otomatis disesuikan dengan lebar monitor pembaca. Lihat pada menu navigasi dibawah judul blog menjadi 2 kolom dengan lebar 90% dari ukuran layar pembaca. Ketika anda mengecilkan layarnya maka ukurannya pun mengikutinya. Contohnya, pada ukuran ini Sidebar yang tadinya terletak disebelah kanan yang mengandung widget-widet blog seperti populer post dan lain tidak berada pada posisinya, sekarang anda akan menemukan sidebar diletakkan dibawah konten utama dan lebarnya pun lebih besar (sesuai dengan ukuran layar).... dan seterusnya.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYFzRgkiSbvyUpbrE0Qn7YaNavdogqmwp9Kalkh5pcriZKzOW0VWi_0pc110mfbRHrNNnEKHCtt2hEO4gicwAlGKTdnu_GCNsu6Y-ZjmOPtR2-d3hfIDBbb3ilTHw3u-xmIxhmH1jXKJl/s1600/Tampilan+Blog+responsive+ukuran+300.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="modifikasi tampilan blog Responsive" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmYFzRgkiSbvyUpbrE0Qn7YaNavdogqmwp9Kalkh5pcriZKzOW0VWi_0pc110mfbRHrNNnEKHCtt2hEO4gicwAlGKTdnu_GCNsu6Y-ZjmOPtR2-d3hfIDBbb3ilTHw3u-xmIxhmH1jXKJl/s320/Tampilan+Blog+responsive+ukuran+300.jpg" title="modifikasi tampilan blog Responsive" width="112" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tampilan Blog pada layar  dengan lebar maximal 320 px</td></tr>
</tbody></table>
<div class="separator" style="clear: both; text-align: center;">
Pada ukuran yang lebih seksi :D, maksud saya " Ramping", padat atau lebih kecil layarnya,  layar ukuran 320px (lebar) maka tampilannya juga menyesuaikan pada layar pengguna. Ada beberapa komponen blog yang di sembunyikan, dan beberapa lagi disesuaikan lebarnya agar benar2 tampil responsive. Pada blog ini, saya menyembunyikan related post beserta permalink otomatis karna menurut saya terlalu semraut dan membuat tampilan menjadi berantakan. Saya juga membuat menunya menjadi 1 kolom saja agar sesuai dengan ukuran pada layar di handphone pembaca.</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both;">
So, Apakah anda menemukan blog ini tampilannya responsive pada perangkat mobile / seluler yang sedang anda gunakan saat ini? *<span style="color: red;">Kotak komentar masih lapang loh untuk menceritakannya :)...</span></div>
<br />
<br />
<div>
<u><b>Jadi, Blog Responsive adalah</b></u><br />
<u><br /></u>
<br />
<blockquote class="tr_bq">
Kesimpulannya adalah Blog Responsive adalah blog yang dapat menyesuaikan lebar, tinggi, besar/kecil tulisan secara otomatis sesuai tempat-nya, Seperti gadget yang kita gunakan misalnya Laptop, Tablet, Smart Phone. Tentu setiap gadget ukuran resolusi layarnya berbeda-beda ada yang 1680x1050, 1024x768, 768x1024, 320x420 dll.</blockquote>
<span id="goog_29382238"></span></div>
<div>
<br /></div>
Jadi sebuah website/blog akan menyesuaikan dengan ukuran resolusi layar gadget itu sendiri misalnya website dengan ukuran lebar 1024px dibuka menggunakan gadget Iphone atau smartphone beresolusi 420x320 jika website tersebut bersifat responsive maka otomatis lebar website tersebut akan berubah menjadi 420px.<br />
<br />
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 23.99305534362793px; margin: 0.25em 0px; outline: 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Bagaimana cara saya membuat blog ini menjadi responsive</h3>
<div>
<br /></div>
Pertanyaan yang hanya dilontarkan oleh pemula seperti saya "Bagaimana cara mengedit template agara tampilan blog menjadi responsive dan support mobile?".<br />
<br />
Sebenarnya agar blog tampil dan support di perangkat seluler, blog dengan platform blogger mendukungnya. Pihak blogger memberikan peluang bagi anda untuk menampilkan versi mobile blog tanpa perlu usaha banyak otak-atik / <b>modifikasi template</b>. Anda dapat mengaktifkannya pada halaman template didashboard blogger anda.<br />
<br />
Namun bagi sebagian orang tampilan seluler mungkin kurang baik, karna penyesuaian blog diatur oleh google. Contohnya; gaya blog tidak sesuai kenginan, juga terpangkasnya beberapa widget dan aksesoris blog yang harusnya di tampilkan kepada pembaca.Sehingga perlu memodifikasi template agar sesuai dengan keinginan kita sendiri, menentukan widget pada perangkat dan jangan lupa untuk terlebih dahulu menonaktifkan tampilan seluler dari blogger.<br />
<br />
<b><span style="color: red;">Inilah Usaha yang saya kerjakan untuk membuat template blog menjadi responsif...</span></b><br />
<br />
Sebelum menjelaskan, ada persyaratan yang harus dipenuhi, saya tidak menganjurkan anda melakukan ini *edit template css / jika anda tidak yakin memahami dasar-dasar dan struktur template dengan paltform blogger. Karna resikonya cukup berat dan bisa merudak tampilan pada blog anda.<br />
<br />
Untuk Anda yang sekedar ingin memasang atau memperbaharui template, lebih baik dan direkomendasikan hanya perlu mencari template yang responsive serta support mobile saja, Salah satu rekomendasi saya untuk anda perimbangkan adalah kolekasi template rensponsive Maskolis atau cek di  <a href="http://mastemplate.com/" rel="nofollow" target="_blank">Mastemplate</a>. Sedangkan bagi anda yang ingin mengetahui secara lengkap tentang bahasan ini, silahkan download template (Blog dan Tips Seo ) lengkap nanti. Saya akan bongkar rahasia tak penting bagi anda, tanpa menyembunyikan satupun unsur yang saya pasang diblog kami ini. *<span style="color: red;">Email anda sisipkan</span><br />
<br /></div>
<div>
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; line-height: 23.99305534362793px; margin: 0.25em 0px; outline: 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Tutorial Dasar Modifikasi / Cara Membuat Rensponsive</h3>
</div>
<div>
<div>
<u><br /></u></div>
Karna Blog Responsive adalah blog yang dapat menyesuaikan lebar, tinggi, besar/kecil tulisan secara otomatis sesuai tempat-nya maka Untuk membuat blog menjadi responsive cukup menambahkan kode @media-query pada CSS. Apa itu media query? </div>
<div>
<br /></div>
CSS Media query memungkinkan Anda untuk menargetkan aturan CSS berdasarkan - misalnya - ukuran layar, perangkat-orientasi atau display-density. Ini berarti Anda dapat menggunakan CSS Media Query untuk men-tweak CSS untuk iPad, printer atau membuat situs responsif. Lengkapnya tentang CSS Media query selain pada topik ini (template responsif).<br />
<div>
<br />
<div>
Jadi, untuk membuat blog tampil responsif, kita akan membuat CSS Media query terlebih dahulu lalu menyisipkannya kedalam template.</div>
<div>
<br /></div>
<div>
"<span style="color: red;">ini sulit ya</span>?"</div>
<div>
Oh no!, ini sangat mudah man, santai saja anda akan mengerti jika anda belajar dan menyelesaikan bacaan ini.</div>
<div>
<br /></div>
<div>
Beruntungnya anda tidak perlu mempelajari semua tentang media query, tapi cukup memahami media query standar berbagai perangkat. Berikut silahkan dipahami:</div>
<div>
<br /></div>
<div style="text-align: center;">
<h4>
<b>1. Pedoman Media Queries diberbagai perangkat</b></h4>
</div>
<div style="text-align: center;">
<br /></div>
<br />
<span style="color: blue;">/* Smartphones (portrait dan landscape) ----------- */ </span><br />
<br />
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* <b>gaya Css responsive</b>  */ } <br />
<br />
<br />
<span style="color: blue;">/* Smartphones (landscape) ----------- */ </span><br />
<br />
@media only screen and (min-width : 321px) { /* <b>gaya Css responsive anda</b> */ } <br />
<br />
<br />
<span style="color: blue;">/* Smartphones (portrait) ----------- */ </span><br />
<br />
@media only screen and (max-width : 320px) { /* <b>gaya Css responsive anda</b> */ } <br />
<br />
<br />
<span style="color: blue;">/* iPads (portrait and landscape) ----------- */</span><br />
<br />
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* <b>gaya Css responsive anda</b> */ } <br />
<br />
<br />
<span style="color: blue;">/* iPads (landscape) ----------- */</span><br />
<br />
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* <b>gaya Css responsive anda</b> */ } <br />
<br />
<br />
<span style="color: blue;">/* iPads (portrait) ----------- */ </span><br />
<br />
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* <b>gaya Css responsive anda</b> */ } <br />
<br />
<br />
<span style="color: blue;">/* Media untuk layar komputer atau laptop ----------- */ </span><br />
<br />
@media only screen and (min-width : 1224px) { /* <b>gaya Css responsive anda disini</b> */ } <br />
<br />
<br />
<span style="color: blue;">/* layar besar ----------- */</span><br />
<br />
@media only screen and (min-width : 1824px) { /* <b>gaya Css responsive anda</b>  */ } <br />
<br />
<br />
<span style="color: blue;">/* iPhone 4 ----------- */</span><br />
<br />
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* <b>gaya Css responsive anda</b> */ }<br />
<br />
<blockquote class="tr_bq">
Catatan: Media quuery diatas boleh digunakan semua atau beberapa saja juga boleh tergantung kebutuhan setia anda. Yang warna <span style="background-color: blue;">biru</span> adalah komentar / penjelasan tentang pada perangkat berukuran apa saja dia akan bekerja (tidak ditulis juga tidak masalah). Sedangkan yang berwarna hitam tebal " <b>gaya Css responsive anda" </b>adalah kode style / css responsive yang akan menentukan tampilannya<b>.</b></blockquote>
</div>
<div>
<div>
<div style="text-align: center;">
<b>2. Komponen - Struktur Template Blog</b></div>
<br />
Seperti saya katakan diatas, anda setidaknya mengetahui dasar-dasar pada  HTML blogger karna usaha yang akan kita lakukan adalah berenang kedalam lautan kode-kode HTML pada template blogger...dan tentu saja, ulasan mengenai ini tidak akan bisa diceritakan pada halaman ini, disarankan untuk kembali membuka buku atau rajin bertanya kepada Om <a href="http://google.com/" target="_blank">google</a>, jika tidak? anda akan tenggelam dan terjatuh tak bisa bangkit lagi *cakra khan :D. Misalnya nih, anda menemukan bagian <div id="<span style="color: red;">keongracun</span>">blalalala teks dan blablalalallaa </div> maka itu adalah komponen <span style="color: red;">keongracun.</span><br />
<br />
<div style="text-align: center;">
Kita ambil contoh Pada template ini, strukturnya dibuat dengan komponen dasar:</div>
<br />
<div style="text-align: center;">
<span style="color: blue;">header</span></div>
<div style="text-align: center;">
<span style="color: orange;">botmenu</span></div>
<div style="text-align: center;">
Pengantar</div>
<div style="text-align: center;">
<span style="color: blue;">Content</span></div>
<div style="text-align: center;">
<span style="color: red;">right</span></div>
<div style="text-align: center;">
<span style="color: #3d85c6;">footer</span></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
<br /></div>
</div>
<div>
<div style="text-align: center;">
<b>3.Membuat Css Media Query responsive pada Template</b></div>
<br />
Setelah mengetahui komponen dalam struktur template diblogger anda, mari memasaknya agar siap hidang :D, maksud saya membuat @media query nya gitu loh :)...<br />
<br />
Pada contoh ini, Kita akan mengatur tampilan blog pada perangkat berlayar seksi atau kecil dengan lebar   320px atau lebih kecil. Langsung kita pasangkan sesuai dengan contoh komponen dan struktur template diatas, maka css query agar template menjadi responsive bisa jadi sebagai berikut:<br />
<br />
<span style="color: blue;">/* Inilah gaya blog responsive dihape anda berukuran kecil ----------- */</span><br />
<br />
@media only screen and (Max-width : 320px)<br />
{#header,#botmenu,#Pengantar,#Content,#right,#footer{width:100%} }</div>
<div>
<br /></div>
<div>
atau bisa juga</div>
<div>
<br /></div>
<div>
@media only screen and (Max-width : 320px)<br />
{#header,#botmenu,#Pengantar,#Content,#right,#footer{width:320px} }</div>
<div>
<br /></div>
<div>
Width pada style diatas mengatur lebarnya komponen, bisa diedit sesuai keinginan. Ini hanya contoh dasar saja, anda masih bisa membuatnya lebih oke, menambahkan style yang lainnya pada komponen tertentu, misalnya kita akan menyembunyikan komponen #<span style="color: red;">botmenu</span>, maka tambahkan saja stylenya menjadi:</div>
<div>
<br /></div>
<div>
@media only screen and (Max-width : 320px)<br />
{#header,,#Pengantar,#Content,#right,#footer{width:100%}<span style="color: red;">#botmenu{display:none}</span> }</div>
<div>
<br /></div>
<div>
Artinya : <span style="color: red;">display:none</span> menjelaskan bahwa komponen bootmenu tidak ditampilkan pada perangkat dengan lebar<span style="color: red;"> </span>320px kebawah.</div>
<div>
<br /></div>
Ingin memaksimalkan pengetahuan anda, saya rekomendasikan membuka pelajaran dasar css di <a href="http://www.w3schools.com/css/%E2%80%8E" rel="nofollow" target="_blank">www.w3schools.com/css/‎</a></div>
<div>
<br />
<div style="text-align: center;">
<b>4. Langkah terakhir adalah Menyisipkan Css Responsive Kedalam Template</b></div>
</div>
<div>
<br />
<div>
Langkah Terakhir Modifikasi Template blogger Menjadi Rensponsive adalah menyisipkan kode css responsive yang telah kita buat tadi (<span style="color: red;">Media Query</span>) kedalam Template blogger anda.</div>
<div>
<br />
Dimanakah <span style="color: red;">Media Query</span> diletakkan?<br />
<br /></div>
<div>
Seperti biasa, masuk ke edit HTML template anda.</div>
<div>
<br /></div>
<div>
Letakkan didalam tempat kode style ...saya tidak menganjurkan anda menggunakan CTRL+F, tapi cari dan temukan manuali, untuk ketepatan dan kerapian mengingat blogger tampilan baru sekarang membungkus beberapa komponen.</div>
<div>
<br /></div>
<div>
Biasanya style dalam temlapte blogger jika terbungkus akan seperti ini <span style="color: #0b5394;"><style>...</style></span>. Cari dan  Temukan,  biasanya tidak jauh, paling beberapa baris dibawah header, dan ingat SAYA TIDAK MENGANJURKAN ANDA UNTUK menggunakan CTRL+F karna akan ada banyak, jadi usahakan</div>
<div>
anda temukan secara manual.<br />
<br />
Setelah menemukan <span style="color: #0b5394;"><style>...</style> </span>klik (yang diklik adalah titik-titik ...) antara pembuka dan penutup style tersebut. Jika itu benar maka style akan membuka.<br />
<span style="color: #0b5394;"><br /></span>letakkan Media Query yang telah kita siapkan tadi tepat dibagian paling bawah style terbuka tersebut, sebelum penutup <span style="color: #0b5394;"></style>.</span><br />
<span style="color: red;">Contoh peletakkan:</span><br />
<span style="color: #0b5394;"><style></span><br />
<span style="color: #0b5394;">#cssblalalalalala{..}</span><br />
<span style="color: #0b5394;">#lain-lain{...}</span><br />
<div>
@media only screen and (Max-width : 320px)<br />
{#header,,#Pengantar,#Content,#right,#footer{width:100%}#botmenu{display:none} }</div>
<span style="color: #0b5394;"></style></span><br />
<br />
<h3 style="-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; background-color: #ebebeb; border-bottom-color: rgb(186, 186, 186); border-bottom-style: solid; border-top-color: rgb(186, 186, 186); border-top-style: solid; border-width: 1px 0px; box-shadow: rgb(255, 255, 255) 0px 1px 0px inset, rgb(255, 255, 255) 0px 1px 0px; color: #333333; font-family: inherit; font-size: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 23.99305534362793px; margin: 0.25em 0px; outline: 0px; padding: 0.25em 0px; text-align: center; vertical-align: baseline;">
Download Template Responsive Blog Ini Secara Utuh</h3>
</div>
</div>
<div>
<br /></div>
<div>
Pelajaran hari ini selesai. Terima kasih anda menyempatkan diri untuk belajar bersama kami sebagai pemula blogger dalam membahas Modifikasi Template Menjadi Rensponsive. Seperti dikatakan diatas bahwa bagi anda yang ingin melihat langsung bagaimana perubahan yang telah saya lakukan untuk membuat template ini menjadi responsive? maka kami akan dengan senang hati berbagi. Tapi Karna ini bukan template share publik dan juga merupakan template source asli blog ini (http://blog.fispol.com/) tidak berbeda sedikit pun, maka kami tidak dapat menyediakan link downloadnya, khusus bagi pembaca kami untuk keperluan belajar dapat saya kirimkan lewat email...*Gratis kok :).</div>
<div>
<br /></div>
<div>
<span style="color: red;">TERIMA KASIH, SALAM SUKSES BUAT ANDA, TEMAN-TEMAN, DAN KELUARGA...</span></div>
<div>
<br /></div>

Tampilan Mobile, Tutorial Modifikasi Template blog Menjadi Rensponsive

Blog & Tips Seo , Modifikasi Template Blogger menjadi responsive - Akhirnya blog ini telah diperbaharui dan sekarang menjadi responsive...

Baca juga »

2:49 AM

Cara Unfollow Blog di Daftar Blog yang Diikuti

<div>
<b>SEBENARNYA</b> berhenti mengikuti (<i>unfollow</i>) blog yang kita ikuti tidak perlu dilakukan, mengingat mengikuti sebuah blog artinya kita tetap update dengan posting blog tersebut dan berpotensi mendapatkan follow back (<i>folback</i>) dan "<i>link effect</i>".</div>
<div>
<br /></div>
<div>
Namun, jika kita ingin berhenti mengikuti sebuah blog, terutama blog-blog yang tidak aktif atau jaranga banget update postingnya, maka berikut ini langkah unfollow atau menghapus blog di Daftar Bacaan (<i>Reading's List</i>) sebagaimana panduan <a href="https://support.google.com/blogger/answer/126128?hl=en" rel="nofollow" target="_blank">Support Google</a>:</div>
<ol>
<li>Klik link "Settings" di daftar blog yang akan kita unfollow.</li>
<li>Akan muncul "new window pop up" yang meminta Anda Sing In ulang ke Blogger atau pilihan lain. </li>
<li>Klik "Google" dan Login lagi.</li>
<li>Akan muncul layar dengan pilihan menu "Stop following this site" </li>
<li>Klik "Stop" (Berhenti)</li>
<li>Setelah klik link itu, Anda diminta konfirmasi apakah benar-benar mau berhenti (unfollow).</li>
</ol>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6DXYAzGFbAeeMO3mVqhY7algDtY_bhF63qzekbAJ86VhbCGZTum8_8uv7fxw7pNr13mYo2JzpQYbdiUgoSmAra7WViigIc_Uy7ozwpkiY0Vihg9aIvyPSKA5htSAONdg4Ev_ZwUjJYLG8/s1600/Stop_follow.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Unfollow Blog " border="0" height="163" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6DXYAzGFbAeeMO3mVqhY7algDtY_bhF63qzekbAJ86VhbCGZTum8_8uv7fxw7pNr13mYo2JzpQYbdiUgoSmAra7WViigIc_Uy7ozwpkiY0Vihg9aIvyPSKA5htSAONdg4Ev_ZwUjJYLG8/s1600/Stop_follow.png" title="Cara Unfollow Blog " width="640" /></a></div>
<div>
<br />
<br /></div>
<br />
<br />
Posting cara Unfollow Blog di Daftar Blog yang diikuti ini tentu saja bukan anjuran agar Anda "unfollow" blog CB ini :) Rugi lho kalau berhenti mengikuti blog CB ini, nanti ketinggalan update terbaru seputar tips seo, template keren, dan lainnya. Good luck and Happy Blogging!<br />
<br />

Cara Unfollow Blog di Daftar Blog yang Diikuti

SEBENARNYA berhenti mengikuti ( unfollow ) blog yang kita ikuti tidak perlu dilakukan, mengingat mengikuti sebuah blog artinya kita tetap ...

Baca juga »

12:39 AM

Cara Ganti Nama Blog Tanpa Kehilangan Trafik

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCs7bVHbQz69PXp_riBw9VwUSgV9wthonNJexoJSRo7xaXM8iTHCyAI4K-9evte1U29XMTww3t_IhQl5THxmvLE9hKbTvZa6gd7rx9MoXlsI3ZFiadBv23xfK5EcM5lnQvAyTQFx-yjWn/s1600/Redirect-Your-Blog-URL.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Ganti Nama Blog Tanpa Kehilangan Trafik" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijCs7bVHbQz69PXp_riBw9VwUSgV9wthonNJexoJSRo7xaXM8iTHCyAI4K-9evte1U29XMTww3t_IhQl5THxmvLE9hKbTvZa6gd7rx9MoXlsI3ZFiadBv23xfK5EcM5lnQvAyTQFx-yjWn/s1600/Redirect-Your-Blog-URL.jpg" title="Cara Ganti Nama Blog Tanpa Kehilangan Trafik" /></a></div>
<b><i>Redirect Blog Lama ke Blog Baru Tanpa Kehilangan Trafik</i></b><br />
<br />
CB pernah share tentang cara memilih nama blog yang baik untuk seo. Jika Anda mau ganti nama blog, namun tidak mau kehilangan trafik atau pengunjung setia, maka jangan khawatir.<br />
<br />
Ada cara mengganti nama blog tanpa kehilangan trafik.<br />
<br />
Ganti nama blog penting dilakukan jika nama blog Anda saat ini susah diingat, kepanjangan, atau tidak relevan dengan kata kunci (keywords).<br />
<br />
Sebagai contoh, nama dan alamat blog lama adalah <span style="color: #990000;">http://mybestwpthemes.blogspot.com.</span> Lalu, kita mengubahnya menjadi <span style="color: #990000;">http://cb-templates.blogspot.com</span>.<br />
<br />
<blockquote class="tr_bq">
Risiko mengganti nama blog adalah kita mulai dari nol lagi. Google akan mengindeks ulang, dan mungkin saja butuh waktu lama.</blockquote>
<br />
Nah, bagaimana cara terbaik untuk mengganti nama blog?<br />
<br />
Cara terbaik adalah <b>membuat blog baru</b>, namun kontennya <b>persis sama dengan blog lama</b>. Nah, blog lama itu kita <b>REDIRECT</b> ke blog baru. Dengan begitu, blog tidak akan kehilangan trafik dan nama blog kita jadi lebih baik.<br />
<br />
<b># TAHAP 1: DI BLOG LAMA</b><br />
<br />
<ol>
<li>Klik "Setting" > "Other"</li>
<li>Klik menu "Export Blog" (akan terdownload file XML yang nanti kota import ke blog baru).</li>
<li>Jika perlu, download pula templatenya (jika akan menggunakan template yang sama): "Template"  > "Backup/Restore" > "Donload Full Template" (akan terdownload file template XML yang nanti diinstall ke blog baru)</li>
<li>Klik "Template" > "Edit HTML"</li>
<li>Copas kode berikut ini di bawah kode <head></li>
</ol>
<div>
<div>
<span style="color: blue;"><script type='text/javascript'></span></div>
</div>
<span style="color: blue;">var this_url = window.location.href;</span><br />
<span style="color: blue;">var new_url = this_url.replace(&quot;</span><span style="color: red;">namabloglama</span>&quot;,&quot;<span style="color: red;">namablogbaru</span><span style="color: blue;">&quot;);</span><br />
<span style="color: blue;">window.location = new_url;</span><br />
<span style="color: blue;"></script></span><br />
<span style="color: blue;"><br /></span>Jangan lupa, ganti nama tulisan yang berwarna <span style="color: red;">merah</span> dengan <b>nama blog lama</b> dan <b>nama blog baru</b> Anda.<br />
<br />
Jika hanya ingin <b>mengalihkan alamat blog saja</b>, tanpa mengalihkan link posting (permalink), misalnya karena tanggal posting dan permalinknya diubah, maka gunakan kode berikut ini:<br />
<br />
<div>
<div>
<span style="color: blue;"><script type='text/javascript'></span></div>
<div>
<span style="color: blue;">  var d='<data:blog.url/>';</span></div>
<div>
<span style="color: blue;">  d=d.replace(/.*\/\/[^\/]*/, '');</span></div>
<div>
<span style="color: blue;">  location.href = 'http://</span><span style="color: red;">namablogbaru</span><span style="color: blue;">.blogspot.com';</span></div>
<div>
<span style="color: blue;"></script></span></div>
</div>
<br />
<b>Save!!! </b><br />
<br />
<b>#TAHAP 2: DI BLOG BARU</b><br />
<br />
<ol>
<li>Jika belum membuat blog baru dengan nama baru, ya... bikin dulu dong! :)</li>
<li>Ganti Template Blog Anda dengan template blog lama yang sudah didownload di TAHAP 1. Yang belum tahu cara ganti template, silakan baca Cara Ganti Template Blog.</li>
<li>Setelah ganti template, klik "Setting" > "Other"</li>
<li>Klik menu "Import Blog" dan masukkan file hasil export di TAHAP 1 yang berekstensi .xml.</li>
<li>Selesai!</li>
</ol>
<div>
Selamat, kini blog Anda punya nama dan alamat baru!!! Asyiknya lagi, blog lama tetap ada kok, jangan dihapus, biarkan saja.... Coba buka blog lama Anda, pasti sekarang sudah mengarah (redirect) ke alamat blog baru.</div>
<div>
<br /></div>
<div>
Sekali lagi, trafik blog dan indeks posting blog di Google TIDAK BERUBAH, tidak berpengaruh, bahkan database blog Anda di Google berlipat ganda. </div>
<div>
<br /></div>
<div>
<b>DEMO</b></div>
<div>
1. Silakan buka: <a href="http://mybestwpthemes.blogspot.com/" rel="nofollow" target="_blank">http://mybestwpthemes.blogspot.com/</a></div>
<div>
2. Pasti yang muncul yang ini: <a href="http://cb-templates.blogspot.com/" rel="nofollow" target="_blank">http://cb-templates.blogspot.com/</a></div>
<div>
<br /></div>
<div>
Itu karena di blog no. 1 sudah dipasang kode redirect ke blog nomor dua, sebagaimana di TAHAP 1 langkah no. 5. Good Luck!</div>

Cara Ganti Nama Blog Tanpa Kehilangan Trafik

Redirect Blog Lama ke Blog Baru Tanpa Kehilangan Trafik CB pernah share tentang cara memilih nama blog yang baik untuk seo. Jika Anda ma...

Baca juga »

12:33 AM

200 Blog Dofollow untuk Komentar Pemburu Backlink

<b><i>Daftar 200 Situs Web/Blog Dofollow untuk Blogger Pemburu Backlink</i></b><br />
<b><i><br /></i></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS11iE5za_8qS7KyVfocmtxrOp_e-cj6pja84yq5b8nLyXTiLKZq6UD6UqRE5rJBTxJN9rmVXLU1nI_hs4GswFdiCkHuRjogJsPOV-fy6viOigG7jj0l0xXFZf0TQ8ktR61Q6keUENynYS/s1600/daftar+blog+dofollow.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="200 Blog Dofollow untuk Komentar Pemburu Backlink" border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS11iE5za_8qS7KyVfocmtxrOp_e-cj6pja84yq5b8nLyXTiLKZq6UD6UqRE5rJBTxJN9rmVXLU1nI_hs4GswFdiCkHuRjogJsPOV-fy6viOigG7jj0l0xXFZf0TQ8ktR61Q6keUENynYS/s1600/daftar+blog+dofollow.png" title="200 Blog Dofollow untuk Komentar Pemburu Backlink" width="320" /></a></div>
<b>SALAH </b>satu tips SEO untuk meningkatkan trafik/jumlah pengunjung blog adalah mendapatkan backlink. Namun, backlink melalui komentar hanya bisa didapat jika (1) komentar kita dipublish dan (2) blog yang kita komentari berupa blog dofollow.<br />
<br />
Blog dofollow masih menjadi incaran para blogger untuk mendapatkan backlink, termasuk dofollow backlink dari situs-situs jejaring sosial.<br />
<div>
<br /></div>
<div>
Untuk mendapatkan dofollow backlink dari media sosial, tentu kita harus membuat akun dan memasukkan alamat blog ke profil. Kita juga bisa mendapatkan dofollow backlink dari Pinterest.</div>
<div>
<br /></div>
<div>
Untuk mendapatkan backlink dari blog orang lain, minimal "effect link", kita harus menulis komentar berkualitas.</div>
<div>
<br />
Harus diingat, banyak komentar blogger yang tidak berkualitas dan tidak perhatikan "etika komentar".</div>
<div>
<br /></div>
<div>
Hal-hal yang harus diingat dalam berkomentar antara lain:<br />
<div>
<ol>
<li>Tuliskan komentar yang bernilai, berkualitas, dan relevan dengan posting yang dikomentari.</li>
<li>Jangan posting komentar pendek seperti <i>makasih gan, nice info,</i> <i>thanks, good, nice work etc</i>.</li>
<li>Jangan komentar hanya untuk mempromosikan blog.</li>
<li>Jangan gunakan profil palsu. Do not use fake profiles for commenting!</li>
</ol>
</div>
<div>
<h3>
<b>Daftar 200 Blog dan Situs Web Dofollow</b></h3>
<ol>
<li>Pinterest.com</li>
<li>YouTube.com</li>
<li>Reddit.com</li>
<li>BizSugar.com</li>
<li>Digg.com</li>
<li>Propeller.com</li>
<li>Flickr.com</li>
<li>Tagza.com</li>
<li>Ikeepbookmarks.com</li>
<li>LinkedIn.com</li>
<li>Kirstsy.com</li>
<li>Murl.com</li>
<li>Youdoze.com</li>
<li>Current.com</li>
<li>PostonFire.com</li>
<li>Buddymarks.com</li>
<li>Bookmax.com</li>
<li>Bloggingzone.com</li>
<li>Corank.com</li>
<li>Technorati.com</li>
<li>Oyax.com </li>
<li>LinkaGoGo.com</li>
<li>Bumpzee.com</li>
<li>Bookmarkgolden.com</li>
<li>abcnews.go.com</li>
<li>22.tmz.com</li>
<li>espn.go.com</li>
<li>USAToday.com</li>
<li>poynter.org</li>
<li>ojr.org</li>
<li>fannation.com</li>
<li>newsvine.com</li>
<li>blogs.msdn.com</li>
<li>iVillage.com</li>
<li>Airamerica.com</li>
<li>blogdooce.com</li>
<li>time-blog.com</li>
<li>www.tvsquad.com</li>
<li>thatsfit.com</li>
<li>community.active.com</li>
<li>HappyNews.com</li>
<li>absolutepunk.net</li>
<li>weblogtoolscollection.com</li>
<li>seomoz.org/blog</li>
<li>comluv.com</li>
<li>bluehatseo.com</li>
<li>seobythesea.com</li>
<li>freebloghelp.com</li>
<li>blogussion.com</li>
<li>kikolani.com</li>
<li>quicksprout.com/</li>
<li>basicblogtips.com</li>
<li>comptalks.com</li>
<li>animhut.com/</li>
<li>blog.ruski.co.za/</li>
<li>newcritics.com</li>
<li>dumblittleman.com</li>
<li>currybet.net\</li>
<li>bloggodown.com</li>
<li>blogengage.com</li>
<li>smartbloggerz.com </li>
<li>blogtap.net</li>
<li>webuildyourblog.com </li>
<li>weblogbetter.com</li>
<li>crayonwriter.com</li>
<li>dereksemmler.com/</li>
<li>articlesnatch.com/blog/ </li>
<li>kongtechnology.com</li>
<li>trafficgenerationcafe.com</li>
<li>blog.2createawebsite.com</li>
<li>iblogzone.com</li>
<li>letsbuildwebsites.com</li>
<li>growmap.com </li>
<li>intenseblog.com </li>
<li>freakify.com </li>
<li>contentmarketingup.com</li>
<li>ariherzog.com</li>
<li>dreamsystemsmedia.com </li>
<li>billcammack.com</li>
<li>bintoo.sourceforge.net/drpl/</li>
<li>birdhouse.org/blog/</li>
<li>blackhatbootcamp.com/blog/</li>
<li>dailypundit.com/</li>
<li>wordpress-websitebuilder.com</li>
<li>jonathanvolk.com</li>
<li>wordsellinc.com</li>
<li>theadventurouswriter.com</li>
<li>tekkaus.com</li>
<li>windowstalk.org </li>
<li>howtospoter.com</li>
<li>blogelephant.com</li>
<li>bloggersjourney.com</li>
<li>bloggingfornoobs.com</li>
<li>completerunning.com/</li>
<li>crayonwriter.com/</li>
<li>cwgordon.com/</li>
<li>devbee.com/</li>
<li>digitalhub-tips.com/</li>
<li>digitallostboys.com/</li>
<li>dillydesigns.com/</li>
<li>diydollars.com/</li>
<li>doctorvee.co.uk/</li>
<li>benspark.com</li>
<li>famousbloggers.net</li>
<li>theemotionmachine.com</li>
<li>zebida.com</li>
<li>mariareyesmcdavis.com</li>
<li>forthelose.org</li>
<li>ewriting.pamil-visions.com</li>
<li>myrecycledbags.com</li>
<li>lauraroeder.com </li>
<li>kimwoodbridge.com</li>
<li>stopdropandblog.com</li>
<li>ariwriter.com/</li>
<li>blondish.net/</li>
<li>communicatevalue.com/</li>
<li>fatfightertv.com/</li>
<li>theadventurouswriter.com/</li>
<li>thesisthemehq.com/</li>
<li>barbaraling.com/</li>
<li>entrepremusings.com/</li>
<li>heartofbusiness.com/</li>
<li>howtospoter.com/</li>
<li>onewomanmarketing.com/</li>
<li>replaceyoursalary.com/</li>
<li>rockyourday.com/</li>
<li>sitesketch101.com/</li>
<li>smartbloggerz.com/</li>
<li>tekkaus.com</li>
<li>webuildyourblog.com/</li>
<li>wordsellinc.com/</li>
<li>thevirtualhandshake.com/blog/</li>
<li>blogchef.net/</li>
<li>deardrmoz.com/</li>
<li>jhsiess.com/</li>
<li>uppergreenside.org/blog/</li>
<li>memwg.com/</li>
<li>steverenner.com</li>
<li>articlesnatch.com/blog</li>
<li>communityspark.com</li>
<li>memwg.com</li>
<li>dmiracle.com</li>
<li>blog.atyq.info/</li>
<li>ruhanirabin.com</li>
<li>bloggingstartup.com</li>
<li>blograters.com</li>
<li>bostonbrat.net</li>
<li>bradtheblogboy.com</li>
<li>bytecoders.homelinux.com</li>
<li>cbauer.edublogs.org</li>
<li>chrishoyt.com/</li>
<li>chrisjdavis.org/</li>
<li>colinwalker.me.uk/</li>
<li>dofollow.info</li>
<li>theblog.ca</li>
<li>graphicdesignblog.co.uk</li>
<li>thevirtualasst.com/</li>
<li>techatlast.com</li>
<li>technoupdates.org</li>
<li>superbloggingtips.com</li>
<li>emoneymarketing.com</li>
<li>bloggingjunction.com</li>
<li>seotops.com</li>
<li>extremejohn.com</li>
<li>seoaddicted.com</li>
<li>wassupblog.com</li>
<li>blogstash.com</li>
<li>tycoonblogger.com</li>
<li>youdofollow.com</li>
<li>growwithstacy.com</li>
<li>johncow.com</li>
<li>revellian.com</li>
<li>dogsrus.tv/</li>
<li>dojoblog.info/</li>
<li>dorischua.com/</li>
<li>drupal.mattwkelly.com/</li>
<li>drupalchina.org/</li>
<li>e-caremanagement.com/</li>
<li>superbloggingtips.com</li>
<li>emoneymarketing.com/</li>
<li>faq.wordpress.net/</li>
<li>financial-independence.net/</li>
<li>fishwrecked.com/</li>
<li>freshblogger.com/</li>
<li>fuery.com/</li>
<li>blogengage.com</li>
<li>techteen.net</li>
<li>beconfused.com</li>
<li>benspark.com</li>
<li>bill2me.com</li>
<li>dereksemmler.com/</li>
</ol>
<div>
Lho... kok nggak 200? Yang 9 dofollow blog/website lainnya mana? Gak tahu tuh... daftar ini CB dapatkan dari <a href="http://www.windroidclub.com/2013/12/200-dofollow-blogswebsites-for-comments.html" rel="nofollow" target="_blank">Windroid Club</a>. Silakan tanya di sana ya :)</div>
</div>
</div>
<div>
<br /></div>
<div>
Good Luck!</div>

200 Blog Dofollow untuk Komentar Pemburu Backlink

Daftar 200 Situs Web/Blog Dofollow untuk Blogger Pemburu Backlink SALAH satu tips SEO untuk meningkatkan trafik/jumlah pengunjung blog ...

Baca juga »

12:16 AM

Cara Membuat Posting Pake Password

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu228htk-iV-EYlam1I_Z_HzZoT4C1ghAwZ8SzbViH649h5rW0sn1VX5P_5ChjgF37rNGWrTwdQ2kroxD94BAf3EXfyFQrRXOsoW11Z7XcAD3ZeDFRe9T2jy7pfvNPcQFq09nSY9FQkCxr/s1600/PASSOWRD-PROTECT-POST-BLOG.gif" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Posting Pake Password (Protected Post) " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu228htk-iV-EYlam1I_Z_HzZoT4C1ghAwZ8SzbViH649h5rW0sn1VX5P_5ChjgF37rNGWrTwdQ2kroxD94BAf3EXfyFQrRXOsoW11Z7XcAD3ZeDFRe9T2jy7pfvNPcQFq09nSY9FQkCxr/s1600/PASSOWRD-PROTECT-POST-BLOG.gif" title="Cara Membuat Posting Pake Password (Protected Post) " /></a></div>
<b>SEBELUM</b> berbagi tentang cara membuat posting (tulisan) pake password (<i>protected post</i>) ini, CB sudah <i>share</i> tentang cara membuat halaman statis (static page) pake password.<br />
<br />
Gunanya password di posting blog ini tentu agar hanya mereka yang punya password yang bisa membukanya atau membacanya.<br />
<br />
DEMO atau Contoh Posting yang Menggunakan Password:<br />
<b><a href="http://contohblognih.blogspot.com/2014/11/7-kunci-rahasia-sukses-contoh-blog-cb.html" target="_blank">7 Rahasia Kunci Sukses CB Blogger</a></b><br />
<br />
<h3>
Cara Membuat Posting Blog Pake Password </h3>
Ini dia cara membuat posting atau konten blog yang dilindungi password. CB kutipkan dari <a href="http://www.mybloggertricks.com/2011/06/password-protect-posts-in-blogger.html" rel="nofollow" target="_blank">My Blogger Tricks</a>. Ada dua tahap.<br />
<br />
<b>TAHAP PERTAMA</b><br />
1. Klik menu "Template" >  "Edit HTML"<br />
2. Cari/Temukan (Ctrl + F) kode ]]></b:skin><br />
<div>
3. Copy + Paste kode berikut ini di bawahnya:</div>
<div>
<br /></div>
<div>
<div style="background-color: #eaeaea; border: 1px dotted rgb(68, 68, 68); color: #444444; font-family: 'Droid Sans', Arial, sans-serif; font-size: 14px; line-height: 20.2999992370605px; padding: 10px;">
<span style="color: black; font-family: "times new roman"; font-size: small; line-height: normal;"><script type="text/javascript" src="http://www.vincentcheung.ca/jsencryption/jsencryption.js"></script></span></div>
<div>
<br /></div>
</div>
<div>
4. Save Template!</div>
<div>
5. Kembali ke Dashboard Blog!</div>
<div>
<br /></div>
<div>
<b>TAHAP KEDUA</b></div>
<div>
1. Klik "New Post" (Entri Baru), seperti biasa kita akan membuat posting baru. </div>
<div>
2. Seperti biasa, isi JUDUL, ISI POSTING, Label, Masukkan Gambar, dst.</div>
<div>
3. Selesai nulis, klik mode "HTML". </div>
<div>
4. Buka situs <b><a href="http://www.vincentcheung.ca/jsencryption/" rel="nofollow" target="_blank">JavaScript Encryption</a></b></div>
<div>
<br /></div>
<div>
Di sana ada 4 kotak isian:</div>
<div>
<ol>
<li>Key</li>
<li>Plain Text</li>
<li>Clipher Text (Abaikan!)</li>
<li>HTML Code</li>
</ol>
<div>
5. Isi kolom "Key" dengan password yang Anda inginkan</div>
</div>
<div>
6. Copy semua teks posting di Blog Anda yang sudah dibuka dalam Mode HTML (<b>Tahap Kedua No. 3</b>) dan PASTE di kotak "Plain Text".</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOPF8RVLA7riCuh8m4HC9-XhPMi47RRHlR2gGC5VB2BXxrjrQrlVaWcOJFz_zemtrrzZ0BJIt7FRM4RHnlQSfel8FDGk8JzkU_HEdCkJ6vLe8XsYjHTAXu-oTu6tzJrcF6y7xcTv1CN_C/s1600/JavaScript+Encryption+and+Decryption.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Posting Pake Password (Protected Post) " border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOPF8RVLA7riCuh8m4HC9-XhPMi47RRHlR2gGC5VB2BXxrjrQrlVaWcOJFz_zemtrrzZ0BJIt7FRM4RHnlQSfel8FDGk8JzkU_HEdCkJ6vLe8XsYjHTAXu-oTu6tzJrcF6y7xcTv1CN_C/s1600/JavaScript+Encryption+and+Decryption.png" title="Cara Membuat Posting Pake Password (Protected Post) " width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
7. Klik tombol "<b>Encrypt</b>"</div>
<div>
8. Akan muncul kode di kotak "HTML Code" seperti ini:</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMzInHQ4SrGPJ_Ievg0Ms7QnL3KRtDucor9J5YB1Vh_JObBkfdefaVCYxTtHxkoF8uwL9_ybQRsj0ADSTJ6g9kF_M0GF774Jah1ECh0d-XPe_kk_LGCBz9WJI5o-l5la3O39Kel0n3ndEx/s1600/JavaScript+Encryption+and+Decryption+(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Posting Pake Password (Protected Post) " border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMzInHQ4SrGPJ_Ievg0Ms7QnL3KRtDucor9J5YB1Vh_JObBkfdefaVCYxTtHxkoF8uwL9_ybQRsj0ADSTJ6g9kF_M0GF774Jah1ECh0d-XPe_kk_LGCBz9WJI5o-l5la3O39Kel0n3ndEx/s1600/JavaScript+Encryption+and+Decryption+(1).png" title="Cara Membuat Posting Pake Password (Protected Post) " width="400" /></a></div>
<div>
<br /></div>
<div>
8. COPY deh tu kode HTML yang ada di sana!</div>
<div>
9. Hapus KONTEN posting Anda yang di Mode HTML.</div>
<div>
10. PASTE kode HTML tadi di kolom konten posting yang sudah dikosongkan</div>
<div>
<br /></div>
<div>
Kita bisa mengubah tulisan <b>"Show Encrypted text"</b><strong style="color: #555555; font-family: helvetica, arial; font-size: 14px; line-height: 22.3999996185303px; text-align: justify;"> </strong>menjadi tulisan apa saja, misalnya menjadi "Baca Tulisan Ini!".</div>
<div>
<br /></div>
<div>
Kita juga bisa menambahkan tulisan SEBELUM atau SESUDAH kode HTML tersebut.</div>
<div>
<br /></div>
<div>
<b>TAHAP AKHIR</b></div>
<div>
1. Jangan ubdah mode HTML. Tetap biarkan begitu.</div>
<div>
2. Klik "Publish" (Publikasikan)!</div>
<div>
<br /></div>
<div>
Selamat, Anda sudah punya Posting yang Pake Password (Protected Post)!</div>

Cara Membuat Posting Pake Password

SEBELUM berbagi tentang cara membuat posting (tulisan) pake password ( protected post ) ini, CB sudah share tentang cara membuat halaman...

Baca juga »

3:35 AM

Blog Ghifari

Membuat Sitemap Blogger dan Wordpress (Lengkap)

Condisi Tag | Tampilan Template Berbeda Tiap Halaman

Tampilan Mobile, Tutorial Modifikasi Template blog Menjadi Rensponsive

Cara Unfollow Blog di Daftar Blog yang Diikuti

Cara Ganti Nama Blog Tanpa Kehilangan Trafik

200 Blog Dofollow untuk Komentar Pemburu Backlink

Cara Membuat Posting Pake Password

Popular Posts

Blog Archive