Mengenal Google Sites Lebih Dalam (Platform Web Creator) - Google sites adalah platform web creator yang di sediakan google untuk pengguna nya secara gratis. Google menjadikan google drive sebagai file hosting situs web yang dibuat melaui platform google sites. Sebelum google sites populer platform ini sebelumnya adalah lebih di kenal dengan sebutan jotSpot yang kemudian pada tahun 2006 tepat nya di bulan Oktober jotSpot di-akuisisi oleh google untuk menggantikan Google Page Creator.

Sekarang "2018 ini" Google telah mengembangkan tekhnologi pada platform web creator nya tersebut "Google Sites" menjadi lebih propesional dengan fitur "in new site" dan metode penggunaan yang sangat mudah dalam membuat website layaknya menyusun sebuah puzzle.
Apakah manfaat dan kegunaan Google sites? Fungsi utama Google sites adalah sebagai wadah membuat situs web untuk usaha civil (kecil dan menengah) agar masing-masing mereka memiliki website. Tujuaannya adalah agar setiap perusahaan dapat dengan mudah mengembangkan bisnis dan  membuat promosi produk mereka melalui website.

Platform Pendukung Google Sites

Seperti yang telah di jelaskan diatas google menjadikan google drive sebagai file hosting situs web yang di buat melalui platform google sites sehingga sangat memungkinkan bagi pengguna untuk melampirkan semua file dan fitur yang ada pada google drive seperti;
  1. Google Docs (document)
  2. Goole form (Formulir)
  3. Google Spreadsheet
  4. Google Calendar, dan support
  5. YouTube dan Picasa
Dengan demikian pengguna akan lebih leluasa dalam mempromosikan produk/bisnis mereka melaui video, gambar, slide image, alamat via google map dalam satu halaman web saja. Tentunya hal tersebut akan meminimalisir atau mengurangi biaya promosi produk/bisnis anda bukan! Dibawah ini adalah beberapa contoh desain website untuk usaha civil yang dapat kamu jadikan reference sebelum membuat website bisnis/usaha anda.
  • Contoh Website Perusahaan Jasa [Lihat Detail]
  • Contoh Website Personal [Lihat Detail]
  • Contoh Website Restaurant/Caffe, dan
  • Contoh Website Boutique / Toko
Alamat Situs (url) & Crawl Index Website Google Sites

Jika pada umumnya alamat situs/url atau domain sebuah website adalah www.namabisnis.com maka sedikit berbeda dengan url website via google sites namun untuk masalah parayapan (crawl atau index) kamu tidak perlu khawatir karena website yang di buat dari google sites dapat di rayapi (di index) oleh google dengan sangat baik. Contoh url website via google sites:
  • https://sites.google.com/view/nama-usaha/beranda (Home New Site)
  • https://sites.google.com/site/nama-usaha/beranda (Home Classic Sites)
  • https://sites.google.com/view atau site/product atau about, contact, gallery dll (Page url)
Nah, dari penjelasan dan contoh diatas saya fikir kamu sudah tidak sabar untuk memulai membuat website bisnis atau usaha anda dari google sites, siapa saja bisa membuat website tanpa coding jquery, html dan css menggunakan google sites. Lihat selengkapnya "Cara membuat website dari google sites".

Demikian penjelasan tentang google sites "Mengenal google sites lebih dekat" ikuti terus situs ini untuk mendapatkan informasi/artikel terbaru mengenai google sites dan trik-trik penggunaan-nya yang akan admin ulas lebih dalam di waktu yang akan datang. Sampai jumpa kembali dan sukses selalu.

Beberapa bagian dari halaman interaktif di situs web seperti baru menu atau yang lainnya mungkin perlu ada yang di tonjolkan seperti tombol login atau tombol follow blog agar mudah dilihat oleh pengguna dan mendapatkan interaksi atau tindakan yang lebih positif dari pengunjung situs web sesuai dengan yang kita harapkan.

Maka dari itu kita perlu membuat strategi kecil dengan menyoroti elemen interaktif yang penting dengan memberikan warna yang berbeda dengan elemen interaktif lainnya.
Jika kamu pernah melihat situs-situs web raksasa yang memerlukan tindakan lebih dari pengguna, mereka juga melakukan strategi ini, yaitu menyoroti elemen interaktif dengan membuat warna yang berbeda dengan halaman interaktif lainnya, bahkan dari sekian banyak situs web milik google juga melakukan hal serupa.

Lalu bagaimana cara menyoroti elemen interaktif seperti menu navigasi agar mendapatkan lebih banyak interaksi dari pengunjung? Mari kita simak penjelasan berikut ini.

Cara Membuat Warna Berbeda (Sorotan) Pada Menu Navigasi.

Sebagai contoh kode menu navigasi di website anda menggunakan kode html seperti di bawah ini;
[code type="HTML"]<div id='menunaviy'>
<nav id='topmenu'>
<ul>
<li><a href='url'>About</a></li>
<li><a href='url'>Contact</a></li>
<li><a href='url'>Privacy Policy</a></li>
<li><a href='url'>Disclaimer</a></li>
<li><a href='url'>Login</a></li>
</ul>
</nav>
</div>[/code]
Kemudian tambahkan class='currentmenu' pada link menu yang akan disoroti misalnya menu Login, sehingga menjadi seperti yang terlihat di bawah ini;
[code type="HTML"]<li><a class='currentmenu' href='url'>Login</a></li>[/code]
Selanjutnya gunakan css berikut untuk membuat warna yang berbeda pada menunavigasi agar lebih menonjol dari elemen interaktif lainnya.
[code type="Css"]a.currentmenu{background-color:#008066;color:#fafafa;font-weight:bold;width:auto;border-radius:5px}
a.currentmenu:hover{background-color:#656666;}[/code]
Catatan: Kamu dapat menambahkan css "line-height:30px" untuk style tambahan untuk mendapatkan efek sorotan yang lebih memukau, tetapi jika itu digunakan, kamu juga harus menyeting tinggi line atau line-height menunavigasi setara dengan 30px.

Selesai...!

Bagaimana jika kode html menu dibuat dengan kode otomatis seperti script dan widget pagelist di blogger? Untuk versi yang seperti ini sebenarnya lebih mudah, kamu hanya perlu menambahkan css seperti berikut ini tanpa melekukan pengeditan di bagian html.

[code type="Css"]//css ini hanya sample saja, ini mungkin tidak cocok dengan format id atau class di html web anda.
#topmenu li:last-child{background-color:#008066;color:#fafafa;font-weight:bold;width:auto;border-radius:5px;height:30px;line-height:30px}[/code]
Jika yang akan di sorot adalah menu paling kanan atau akhir maka gunakan target elemen ul li:last-child atau jika yang akan di sorot adalah paling kiri menu gunakan target elemen ul li:first-child.

Lihat demo sorotan menu_navigasi pada link dibawah ini;

Demo #1
https://borisinil.blogspot.com
Demo #2
https://athiyablog.blogspot.com
Saya pikir sampai disini saja tutorial "cara menyoroti menu navigasi" atau membuat warna yang berda pada menunavigasi. Semoga saja totorial ini menjadi ilmu yang bermanfaat untuk anda dan dapat membantu anda dalam meningkatkan interaksi pengunjung di situs web.

Cara Membuat Tabel Responsive - Di tutorial ini, saya akan membagikan desain tabel data responsive yang simple, ringan namun tetap elegan dan memiliki aksesibilitas yang sangat baik untuk pengguna, dan itu saya lalukan hanya dengan menggunakan css dan html dasar dengan size yang sangat kecil karena saya mengerti, halaman web anda mungkin membutuhkan lebih banyak variasi table data yang responsive dan tidak membebani loading situs web.
Jadi langsung saja, ambil css table responsive-nya di bawah ini dan simpan atau pasang di kumpulan css situs web anda, untuk pengguna blogger silahkan letakkan css tabel data diatas kode ]]></b:skin> atau </style>.
[code type="CSS Table Responsive"]table th{color:#1e1e1e}table caption{color:#1e1e1e;font-size:17px;font-weight:700;text-transform:uppercase}table.data,main table{width:100%;background-color:#fff}table.number_list th:first-child{width:26px;text-align:center}table.data th,main table th{background-color:#007b37;color:#fff}table.data th[scope=col],main table th[scope=col]{border-bottom:grey 1px solid}table.data th[scope=row],main table th[scope=row]{border-right:grey 1px solid}table.data,table.data th,table.data td,main table,main table th,main table td{border-collapse:collapse;border:1px solid #ccc;vertical-align:top}table.data td,table.data th,main table td,main table th{padding:4px}table.data th,main table th{font-weight:700}table.data td,main table td{background-color:#fff!important}[/code]
Kemudian, untuk membuat table di halaman posts, silahkan gunakan kode html table data berikut ini melalui mode pengeditan HTML bukan Compose seperti contoh berikut ini;
html table

HTML Table (2 Column)

[code type="HTML"]<table class="data">
 <caption>Teks Table Caption Disini</caption>
<thead>
 <tr><th scope="col">Column 1</th><th scope="col">Column 2</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
 <tr><th scope="row">Teks</th><td>Data</td></tr>
  </tbody>
</table>[/code]
Jika kamu ingin membuat table data 4 column dan 5 row, gunakan kode html berikut ini dan ganti teks atau isi data sesuai dengan yang ingin input kedalam tabel.

HTML Table (3 Column)

[code type="HTML"]<table class="data">
 <caption>Teks Table Caption Disini</caption>
<thead>
 <tr><th scope="col">Column 1</th><th scope="col">Column 2</th><th scope="col">Column 3</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Row 1</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 2</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 3</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 4</th><td>Data</td><td>Data</td></tr>
 <tr><th scope="row">Row 5</th><td>Data</td><td>Data</td></tr>
  </tbody>
</table>[/code]

HTML Table (4 Column)

[code type="HTML"]<table class="data">
 <caption>Teks Table Caption Disini</caption>
<thead>
 <tr><th scope="col">Column 1</th><th scope="col">Column 2</th><th scope="col">Column 3</th><th scope="col">Column 4</th></tr>
  </thead>
  <tbody>
 <tr><th scope="row">Data 1</th><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
 <tr><th scope="row">Data 2</th><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
 <tr><th scope="row">Data 3</th><td>Data 2</td><td>Data 3</td><td>Data 4</td></tr>
  </tbody>
</table>[/code]
Kamu mungkin ingin melihat demo table responsive ini, sebelum menerapkannya ke situs web, silahkan uji demo table data responsive berikut di berbagai ukuran layar (deice)
Table Data Responsive
Kolom 1Kolom 2Kolom 3Kolom 4
Baris 1Data 1Data 2Data 3
Baris 2Data 1Data 2Data 3
Baris 3Data 1Data 2Data 3

HTML Table Dengan Daftar/List

Kusus untuk membuat table dengan list atau daftar (number list), gunakan kode html table berikut ini, sedangkan kode css table responsive yang digunakan masih sama.
[code type="HTML"]<table class="data number_list">
<caption>Teks Caption Disini</caption>
<thead>
<tr><th scope="col">No</th><th scope="col">Month</th><th scope="col">Production</th><th scope="col">Reject</th><th scope="col">Other</th></tr>
</thead>
  <tbody>
<tr><th scope="row">1</th><td>January</td><td>97%</td><td>2%</td><td>input</td></tr>
<tr><th scope="row">2</th><td>February</td><td>73%</td><td>0,5%</td><td>input</td></tr>
<tr><th scope="row">3</th><td>March</td><td>100%</td><td>5%</td><td>input</td></tr>
<tr><th scope="row">4</th><td>April</td><td>89%</td><td>1%</td><td>input</td></tr>
<tr><th scope="row">5</th><td>May</td><td>65%</td><td>0%</td><td>no data</td></tr>
</tbody>
</table>[/code]
Demo table resposnsive dengan dafar atau list (number list)
Table Responsive With Number List
NoMonthProductionRejectOther
1January97%2%input
2February73%0,5%input
3March100%5%input
4April89%1%input
5May65%0%no data

Spesifikasi Table
  • Desain responsive dan support di banyak jenis browser (IE, Firefox, Chrome, Safari, Opera)
  • Ringan (tidak mempengaruhi kecepatan loading situs web)
  • Font tabel mengikuti setelan font pada halaman web
  • Mudah di pasang di situs web apa saja (blogger, wordpress dll)
  • Gratis selamanya
Demikian tutorial membuat table responsive, semoga artikel ini bisa membantu anda dalam membuat tabel yang responsive di situs web anda dan memberikan manfaat kepada banyak blogger-blogger yang aktif di konten review.

Pengertian Inline Css Dan Cara Mengatasinya - Ketika menguji situs di Google PageSpeed Insights mungkin kamu akan melihat peluang untuk menambah kecepatan pemuatan (loading) situs yaitu dengan mengurangi atau menghilangkan Inline Css dari dalam template situs. Sebenarnya apa sih yang dimaksud dengan inline css itu? Inline Css adalah style css yang ditanamkan pada line/baris HTML, Sederhananya Inline Css merupakan style css yang berada di area tag pembuka <body> dan tag penutup </body> "tidak berada ditempat yang seharusnya yaitu <head>". Untuk lebih jelasnya mari kita simak contoh gambar dibawah ini;
Pengertian Inline Css Dan Cara Mengatasinya
Penjelasan: CSS (Cascading Style Sheets) sepatutnya dikumpulkan "berada" diantara tag pembuka <head> dan </head>, jika style css berada di bagian body atau berada pada line html maka style css tersebut disebut sebagai inline css.

Cara Mengatasi Inline Css

Sebagian kecil inline css dapat dihapus begitu saja namun sebagian lagi tidak, harus ditambahkan property (id='...' atau class='...') pada elemen html yang di dalamnya terdapat inline css, kemudian memindahkan style css pada properti baru dan menempatkan nya di <head>. Contoh;
[code type="HTML"]<textarea expr:id='&quot;postData-&quot; + data:post.id' style='display:none;'><data:post.body/></textarea>[/code]
Pada baris html textarea tersebut, style='display:none;' dikatakan sebagai inline css, karena berada pada baris atau line html, jadi untuk menghilangkan inline css dari baris html tersebut kita tambahkan property baru sehingga menjadi seperti dibawah ini;
[code type="HTML"]<textarea class='hide-textarea' expr:id='&quot;postData-&quot; + data:post.id'><data:post.body/></textarea>[/code]
Kemudian css style='display:none;' diganti menjadi .hide-textarea{display:none} kemudian ditempatkan pada kumpulan css yang berada diantara tag <head> dan </head>, atau di atas kode ]]></b:skin> jika kamu pengguna blogger.

Contoh Inline Css lainnya

Pada template web (blogger) kamu mungkin sering melihat kode ini <div style='clear: both;'/>, kode tersebut juga merupakan inline css karena terdapat property style css di dalam kode html, untuk merubahnya agar tidak menjadi inline css ganti kode tersebut dengan <div class='clear'/> kemudian tambahkan style css ini; .clear{display:block;clear:both;height:0} ke bagian kumpulan css yang berada di tag head.

Contoh inline css lainnya adalah; kode <div style='text-align: center; margin:10px 0'>Element Lain</div> kode ini biasanya digunakan untuk memposisikan suatu elemen menjadi center (ditengah-tengah), sebaiknya tidak seperti itu, silahkan ganti <div style='text-align: center; margin:10px 0'> dengan kode <div id='middle-ad'> misalnya, kemudian css nya menjadi;
#middle-ad{clear:both;display:block;text-align:center;margin:10px 0;}
Dan ditempatkan pada kumpulan css yang seharusnya yaitu di area <head>.

Catatan: Sebelum menambahkan id atau property 'class' baru misalnya: middle-ad pastikan nama id atau class baru tersebut belum ada pada elemen yang lain, agar style CSS tidak bercampur antara satu dengan yang lain.

Masih banyak lagi bentuk-bentuk inline css yang bisa kamu temui pada html template web kamu khusus nya template blogger, seperti properti "width" dan "height" ,biasanya inline css terdapat pada widget-widget blogger seperti widget header, followbyemail, popular post dan sebagainya.

Lakukan perubahan secara perlahan dan jangan lupa backup template anda sebelum merubah atau mengedit sesuatu di dalamnya guna menghindari kesalahan.

Tips: Pada prinsipnya inline css merupakan hal yang wajar, namun jika halaman web memuat terlalu banyak inline css maka akan menyulitkan browser dalam menguraikan situs web. Menghilangkan inline css hingga 100% memang sangat sulit dilakukan.

Meta Tag Theme Color - Tutorial kali ini akan membahas sebuah cara menyesuaikan warna theme browser (Chrome, Firefox & Opera) dengan theme website. Metode yang kita gunakan untuk merubah atau menyesuaikan warna theme address bar browser adalah dengan menggunakan meta tag theme color. Di-era android browser modern sudah mendukung untuk penyesuaian warna thema address bar dengan theme situs web termasuk situs blogger.

Mungkin kamu juga telah memperhatikan hal ini ketika membuka situs-situs raksasa seperti facebook, youtube dan lain-nya ketika di akses melaui browser chrome secara otomatis akan merubah warna address bar sesuai dengan warna template mereka. Penyesuaian itu tentu tidak terjadi begitu saja melainkan sebuah meta tag theme-color yang mengaturnya.

Praktek Terbaik:
  • Sebelum menambahkan meta tag theme-color kedalam html template, cari tahu terlebih dahulu kode warna template situs web anda, sebagai contoh jika header situs berwarna hijau (#003c30) maka tambahkan juga kode warna tersebut kedalam meta theme-color agar warna theme address bar browser dapat mengikuti warna template situs, atau
  • Kombinasikan warna yang sesuai agar tampilan situs di mobile browser terlihat mengagumkan, contoh; template situs gigi pages di dominasi dengan warna putih di bagian header, maka untuk mendapatkan kombinasi warna yang tidak canggung saya menambahkan warna hitam (#0e0e0e) ke meta theme-color.
Gambar diatas adalah contoh tampilan address bar browser sebelum menggunakan meta theme color dan sesudah menggunakan meta theme color, situs web yang dipasangi meta tag theme color akan meminta browser menyesuaikan warna address bar dengan warna yang minta oleh meta theme-color sehingga situs web akan terlihat lebih mengagumkan.

Cara Memasang Meta Theme Color

Tambahkan meta tag theme color berikut ini kedalam html template situs web anda tepat berada diatara tag pembuka <head> dan penutup </head>.
[code type="HTML"]<meta content='#color-code' name='theme-color'/>[/code]
[code type="Contoh"]<meta content='#d32f2f' name='theme-color'/>[/code]
Perhatikan kode "#d32f2f " dan ganti kode warna tersebut sesuai dengan kode warna yang anda inginkan atau gunakan kode template situs web agar theme address bar menyatu dengan warna theme situs web.

Info: Meta theme color tersebut support pada browser Google Chrome, Firefox & Opera "perangkat android", silahkan lihat hasilnya dengan membuka situs melalui browser di smartphone anda.

Catatan: Jika kamu ingin menerapkan <meta> theme-color yang support di banyak jenis perangkat dan browser silahkan gunakan meta theme color di bawah ini:
[code type="Meta Theme Color"]<!-- Support Google Chrome, Firefox & Opera -->
<meta content='#d32f2f' name='theme-color'/>
<!-- Support Windows Phone & Safari iOS -->
<meta content='#d32f2f' name='msapplication-navbutton-color'/>
<meta content='yes' name='apple-mobile-web-app-capable'/>
<meta content='#d32f2f' name='apple-mobile-web-app-status-bar-style'/>[/code]
Meta tag theme color diatas support untuk penyesuaian warna theme pada browser Google Chrome, Firefox & Opera pada perangkat Android, browser Windows Phone dan Safari iOS. Untuk mendukung kinerja meta tag sebaiknya gunakan kode warna "color hexadecimal".

Demikian penjelasan tentang meta theme color serta panduan cara penerapan meta tag theme color untuk mengatur atau menyesuaikan warna address bar browser dengan warna theme situs web. Semoga bermanfaat dan sampai jumpa kembali, jangan lupa follow dan subscribe ya.

Cara Memasang Komentar Disqus Di Template Blogger - Tutorial kali ini akan membahas cara memasang widget komentar disqus di blogger tanpa menghilangkan fungsi widget default komentar blogger, jadi jika kamu mengikuti trik yang saya gunakan dalam memasang atau menginstall widget komentar disqus maka kamu dapat menggunakan kedua sistem komentar "disqus dan blogger" tanpa harus mengedit template secara berulang.

Ketika ingin menggunakan komentar disqus kamu hanya perlu mengaktifkan switch disqus comment dan jika ingin kembali ke komentar blogger kamu hanya perlu menonaktifkan switch disqus comment nya saja (two comment system disqus & blogger).

Sebelum ke tutorial memasang komentar disqus di template blogger saya ingin memberikan satu penjelasan lagi mengenai lokasi penempatan kode "script komentar disqus" agar tutorial ini dapat diterapkan juga oleh blogger pemula. Script komentar disqus yang akan kita install di template blogger sepenuhnya di tempatkan pada tumpukan widget post blogger, lebih spesifik lagi di kumpulan kode comment form. untuk lebih jelasnya lihat contoh gambar di bawah ini;
Jadi sebelum memasang kode / script komentar disqus temukan terlebih dahulu kumpulan kode comment form default blogger dan beri spasi baris seperti contoh gambar di atas.

Ingat jangan membuka /mengklik tanda panah pada masing-masing folder kode seperti yang terlihat pada bagian kiri gambar agar proses pemasangan komentar disqus menjadi lebih mudah, Ciutkan kode dengan meng-klik tag pembuka <b:includable id='...' var='post'> jika sebelumnya folder kode html sudah terbuka. Sekarang kita masuk ke tahap pertama penginstalan kode atau script disqus comment, copy 2 kode berikut ini.

#Code 1 dan 2 - Disqus Comment
[code type="HTML"]<b:includable id='discusshortname' var='post'>
<div id='disqus-shortname' style='display: none'>somadtukanglistrikbatam</div>
</b:includable>[/code]
[code type="HTML"]<b:includable id='disqus-comment' var='post'>
<div class='disqus-comment comment-box' id='disqus_cm'>
     <div id='disqus-blogger-comment-block'/>
</div>
&lt;script type=&#39;text/javascript&#39;&gt;
var disqus_shortname = document.getElementById(&#39;disqus-shortname&#39;).innerHTML;
var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
if (!disqus_blogger_current_url.length) {
disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
}
var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
var disqus_url = disqus_blogger_current_url;
(function () {
&quot;use strict&quot;;
var get_comment_block = function () {
var block = document.getElementById(&#39;disqus-blogger-comment-block&#39;);
return block;
};
var comment_block = get_comment_block();
if (!!comment_block) {
var disqus_div = document.createElement(&#39;div&#39;);
disqus_div.id = &#39;disqus_thread&#39;;
comment_block.innerHTML = &#39;&#39;;
comment_block.appendChild(disqus_div);
comment_block.style.display = &#39;block&#39;;
var dsq = document.createElement(&#39;script&#39;);
dsq.async = true;
dsq.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/blogger_item.js&#39;;
(document.getElementsByTagName(&#39;head&#39;)[0] || document.body).appendChild(dsq);
}
})();
&lt;/script&gt;
</b:includable>[/code]
Tempatkan kode 1 dan 2 (kode html disqus-shortname dan script disqus comment) secara berurutan tepat berada di bawah kode brikut ini;
[code type="HTML"]<b:includable id='comments' var='post'>...</b:includable>[/code]
Lihat id atau disqus shortname somadtukanglistrikbatam, setelah menyelesaikan proses penginstallan komentar disqus silahkan ganti shortname disqus saya dengan shortname disqus kamu sendiri, untuk sementara biarkan saja dulu supaya nanti bisa melihat hasilnya.

#Code 3 Disqus Comment
[code type="HTML"]<b:includable id='fn_comment_picker' var='post'>
<div class='comments'>
<b:if cond='data:post.allowComments'>
       <b:include data='post' name='discusshortname'/>
<b:if cond='data:top.commentLabel != &quot;disqus&quot;'>
       <b:include data='post' name='comment_picker'/>
    </b:if>
<b:if cond='data:top.commentLabel == &quot;disqus&quot;'>
      <b:include data='post' name='disqus-comment'/>
</b:if>
</b:if>
  </div>
</b:includable>[/code]
Tempatkan kode tersebut (code-3) tepat berada di atas kode;
[code type="HTML"]<b:includable id='iframe_comments' var='post'>....</b:includable>[/code]
Save template untuk mengakhiri proses penginstallan komentar disqus di template blogger, pada tahapan itu komentar disqus sudah selesai di install namun posisinya masih stanby (belum berfungsi) jadi untuk menampilkan widget komentar disqus masih ada 2 langkah lagi yang harus dilakukan untuk menyetting switch disqus comment (untuk menampilkan form komentar disqus).

Cari atau temukan switch default komentar blogger yang di gunakan untuk menampilkan form komentar di halaman post dan static page blogger, seperti yang terlihat di bawah ini;
[code type="HTML"]<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <b:include data='post' name='comment_picker'/>
       </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <b:include data='post' name='comment_picker'/>
  </b:if>[/code]
Kemudian ganti comment_picker dengan fn_comment_picker dan save template blog anda,  Oh ya, pada tag conditional static_page adalah form komentar untuk halaman statis seperti halaman T.O.S dan sebagainya, jika kamu tetap ingin menggunakan kmentar blogger pada halaman static kamu tidak perlu menggantinya, cukup ganti comment_picker yang berada di dalam tag conditional "item" (halaman postingan).

Langkah trakhir pergi ke Tata Letak Blogger kemudian pada Widget Post / Blog klik edit, centang pada bagian "tampilkan komentar" dan ganti tulisan "komentar" menjadi "disqus" selesai, lihat contoh gambar di bawah ini;
Cara menampilkan komentar disqus
Cara menampilkan komentar disqus
Jika ingin kembali dari komentar disqus ke komentar blogger kamu hanya perlu menghapus tulisan disqus melalui tata letak tanpa harus menghapus semua kode disqus comment yang sudah terinstall, dengan begitu widget komentar disqus akan kembali pada posisi stanby dan tidak dijalankan oleh browser sehingga tidak mengganggu perenderan sama sekali karena hanya komentar blogger yang akan di jalankan oleh browser, begitu juga sebaliknya jika pada bagian tampilkan komentar di isi dengan "disqus".

Tambahan: Sebenarnya semua kode dan script komentar disqus seperti diatas "code 1,2 dan 3 bisa diurutkan kemudian di pasang secara bersamaan kedalam tumpukan widget comment form dan akan terformat (disusun secara otomatis) oleh platform blogger, tapi ketika menyimpan-nya kamu perlu menekan tombol seve 2 hingga 3 kali untuk memastikan kode atau script disqus comments benar-benar terseimpan, lalu kamu harus merefresh halaman untuk melihat apakan kode html dan script komentar disqus sudah terinstall atau tidak.

Saya fikir setiap desainer template harus menerapkan teknik memasang form komentar disqus seperti yang saya lakukan agar pengguna template akan lebih mudah menentukan pilihan form komentar yang mereka sukai, terlebih sekarang ini tombol balas pada form komentar blogger tidak berfungsi ketika pengguna menghapus bundle css widget blogger, jadi plugin komentar disqus ono benar-benar menjadi solusi untuk menggantikan komentar blogger.

Selain itu teknik memasang form komentar disqus di template blogger pada tutorial ini juga valid html5 dan masih bisa dikembangkan lagi misalnya menampilkan form komentar blogger dan disqus secara bersamaan dengan sistem Tab atau bisa juga dikembangkan menjadi 3 Tab Comment Sistem sekaligus (facebook, disqus dan blogger), itu akan membuat template anda lebih bernilai jika dibandingkan dengan template yang hanya dilengkapi satu sistem komentar saja.

Demikian tutorial "Cara Memasang Komentar Disqus Di Blogger (Two Comment Systems)" semoga bermanfaat dan menambah ilmu bagi kita semua khususnya blogger indonesia, untuk melihat demonya silahkan kunjungi themecreat.blogspot.com dan tinggalkan komentar, jangan lupa subscibe blog ini untuk mendapatkan notifikasi setiap post terbaru saya.

Optimasi Mobile Web (Website Seluler) Dengan Measure - Setiap developer (pengembang) situs web sekarang berlomba-lomba mengoptimalkan (optimasi) kinerja situs mereka di versi seluler, untuk itu saya fikir sebagai blogger kita juga harus melakukan pengoptimalan serupa pada blog yang kita kelola karena gelombang terbesar pengguna internet saat ini didominasi oleh pengguna seluler.

Dan untuk mencapai hasil (kinerja website seluler) yang ideal kita membutuhkan alat untuk mengukur seberapa baik performa website yang kita kembangkan ketika diakses pengguna melalui perangkat seluler.

Alat yang dimaksud atau yang akan kita gunakan untuk mengukur kinerja website seluler adalah web.dev measure, mengapa harus menggunakan web.dev measure? Measure merupakan alat pengukur website yang dikembangkan oleh web.dev dan terkonsentrasi pada performa website seluler (mobile web). web.dev menggunakan lighthouse (alat open-source) otomatis untuk meningkatkan kualitas halaman web kemudian lighthouse akan mengaudit situs web dalam beberapa kategori diantaranya adalah performance (speed), best Practice, accessibility, dan SEO.
Sedikit berbeda dengan PageSpeed Insights yang juga menggunakan lighthouse untuk meng-audit situs web, web.dev memiliki kelebihan yaitu mengarahkan anda ke halaman audit (lighthouse) dimana kekurangan situs web dapat dilihat secara detail seperti contoh berikut ini;
Measure - Audit by Lighthouse
Measure - Audit by Lighthouse
Tidak sampai disitu saja audit yang dilakukan measure lighthouse juga merambah hingga ke audit javascript, audit attributes, audit links crossing, audit tap targets, audit font size, audit contrast ratio dan banyak lagi. Disana kamu benar-benar dapat belajar banyak hal dalam mengoptimalkan website seluler.

Mengaudit Website Dengan Web.dev Measure (Lighthouse)

  1. Kunjungi https://web.dev
  2. Klik Tap Measure atau klik tombol Test My Site
  3. Tempelkan url situs web, dan
  4. Klik Run Audit (Jalankan Audit)
Measure - Audit Your Site
Measure - Run Audit
Setelah audit selesai dijalankan klik View Report untuk melihat hasil audit website anda yang lebih detail atau lengkap.
Measure: View Report Detail
Audit by open-source measure lighthouse
Selanjutnya lihat secara rinci kekurangan situs web di halaman hasil audit dan ikuti arahan-arahan yang ditunjuk lighthouse open-source guna mendapatkan performa dan aksesibilitas website seluler yang lebih baik dan SEO.

Selamat mencoba dan sampai jumpa kembali, jangan lupa untuk menceritakan kepada admin bagaimana pengalaman anda setelah menggunakan measure lighthouse dan mengikuti petunjuk-petunjuk pengoptimalan website seluler by web.dev measure lighthouse.

Cara Setting Thumbnail Share Posts Blogger - Masalah yang sering terjadi pada thumbnail share post adalah hilangnya thumbnail image atau gambar postingan ketika laman situs web di share ke social media, hal ini disebabkan karena browser social media seperti twitter dan facebook tidak menemukan meta Open Graph di dalam html situs web.

Selain itu masalah thumbnail share posts yang mungkin banyak dikeluhkan oleh blogger pemula yaitu posisi judul situs yang muncul dikiri judul posts yang dianggap kurang tepat. Judul situs yang terlalu panjang biasanya tidak terlihat bagus pada thumbnail share posts di social media karena dapat menghilangkan fokus audiens yang seharus-nya berpusat pada gambar dan judul konten (artikel).

Maka dari itu artikel ini akan menjelaskan cara mengatur tampilan (thumbnail share posts) situs web sesuai dengan keinginan anda dengan memanfaatkan meta open graph, ini merupakan trick yang paling mudah untuk mengatur thumbnail share posts agar lebih menarik dan lebih menonjol di social media (twitter, gplus dan facebook).
Setting Thumbnail Share Posts Blogger
Yang harus dilakukan untuk membuat thumbnail share post yang menarik dan menonjol adalah, dengan menambahkan Tag Meta dibawah ini ke dalam html situs web, Posisikan meta tag diantara tag <head> dan </head>, yang lebih tepat letakkan di bawah kode penutup </title>.
[code type="Meta Tags"]<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
</b:if>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
<b:else/><b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
</b:if></b:if>
<!-- Metadata Facebook -->
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='218168578325095' property='fb:app_id'/>
<meta content='100002549773049' property='fb:admins'/>
<!-- Metadata Twitter -->
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@gigi_pages' name='twitter:site'/>
<meta content='@gigi_pages' name='twitter:creator'/>
<meta content='1200' name='twitter:image:width'/>
<meta content='800' name='twitter:image:height'/>
<link href='https://twitter.com/gigi_pages' rel='me'/>
<!-- Blogger Authorship and Publisher Markup -->
<link href='https://www.blogger.com/profile/13988649334104083824' rel='author'/>
<link href='https://www.blogger.com/profile/13988649334104083824' rel='publisher'/>
<!-- Schema.org markup for Google+ -->
<meta expr:content='data:blog.pageTitle' itemprop='name'/>[/code]
Save template dan lihat hasilnya, dengan catatan "thumbnail share post" akan berubah setelah cache situs web di browser hilang, biasanya 1 x 24 jam atau paling lama 2 hari setelah menerapkan tag meta diatas.

Jika sebelumnya situs web sudah memiliki meta open graph seperti yang tertera diatas maka tidak perlu mengganti semua-nya. Cukup lakukan sedikit perubahan saja pada tag meta seperti berikut ini untuk mengatur thumbnail share post yang lebih relevan.

Thumbnail Share Post (Twitter Social Media)

Cari dan temukan sebaris kode berikut didalam html situs web.
[code type="Meta Tag"]<meta content='summary' name='twitter:card'/>[/code]
Kemudian ganti kode tersebut dengan;
[code type="Meta Tag"]<meta content='summary_large_image' name='twitter:card'/>[/code]
Selanjut-nya tamnahkan property image width dan height agar gambar (thumbnail share post) pada social media twitter terlihat lebih besar dan menonjol.
[code type="Meta Tag"]<meta content='1200' name='twitter:image:width'/>
<meta content='800' name='twitter:image:height'/>[/code]
Thumbnail Share Post (Twitter Social Media)

Thumbnail Share Post (Facebook Social Media)

Cari dan temukan sebaris kode tag meta berikut didalam html situs web;
[code type="Meta Tag"]<meta expr:content='data:blog.pageTitle' property='og:title'/>[/code]
Kemudian tambahkan tepat dibawahnya kode tag meta berikut;
[code type="Meta Tag"]<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if>[/code]
Kode tag meta tersebut berfungsi untuk memerintahkan browser social media facebook hanya menampilkan judul halaman (judul artikel) dan menyembunyikan judul situs dari thumbnail share post.
Thumbnail Share Post (Facebook Social Media)
Silahkan share artikel ini ke beberapa jenis social media kamu untuk melihat live demo thumbnail share post situs Gigi Pages, pengaturan yang saya terapkan di situs ini kurang lebih sama persir seperti yang telah dijelaskan di atas, Jika kamu sudah paham dan mengenal secara rinci tentang meta tags yang mengatur thumbnail share posts, kamu dapat mengganti semua meta tag yang telah ada dengan meta tags yang saya bagikan di atas.

Catatan: Ganti id facebook, twitter dan username google plus yang telah ditandai dengan huruf tebal dengan id dan username anda sendiri.

Demikian saja "Setting Thumbnail Share Post Blogger", semoga bermanfaat dan dapat membantu anda dalam mengatur ukuran gambar dan judul yang ditampilkan pada thumbnail share post situs web anda. Jangan lupa subscribe jika artikel ini benar-benar membantu.

Cara Install Google Font Ke Template Blog - Font atau huruf yang digunakan pada sebuah laman web sangat mempengaruhi tingkat ke popularan situs web tersebut, penggunaan jenis font dan besar kecil ukuran font yang kurang tepat dapat membuat minat pembaca hilang secara tiba-tiba. ideal nya ukuran font yang membuat nyaman pembaca adalah 15px sampai 17 px, sedangkan jenis font yang ideal untuk situs web/blog adalah open sans, arial reguler, raleway dan masih banyak lagi, namun intinya pilihlah font yang umum rapi dan ringan, sehingga tidak mengejutkan mata pembaca dan memberatkan loading situs.

Bagaimana Cara Mengganti Jenis Huruf (font) Pada Template Blog?

Login ke blogger, klik template > klik tingkat lanjut, kamu bisa memilih font header, font laman atau content yang sudah tersedia disitu. Namun saya tidak membahas itu lebih jauh karena saya rasa semua paham kalau memilih font dari pengaturan template.

Tapi bagaimana jika ternyata kita tidak menemukan jenis font yang sesuai dengan yang kita inginkan di pengaturan template tersebut, maka solusinya kita bisa menggunakan google font dengan cara menginstalnya langsung ke template blog. Google memiliki banyak jenis-jenis font yang bagus di google font, mungkin ratusan atau 300 jenis font bahkan mungkin lebih dari itu, saya tidak pernah menghitung nya.

Memilih Jenis dan Mengambil Kode Font

  1. Kunjungi https://fonts.google.com untuk memilih font
  2. Setelah menemukan jenis font yang tepat, klick tanda +,
  3. Setting sedikit pada jendela yang muncul seperti gambar di bawah ini.
Cara Install Google Font Ke Template Blog
Memilih jenis dan ukuran font
Keterangan Gambar:
  • Pada tab costumize pilih regular 400 dan bold 700, itu merupakan merupakan ukuran ketebalan font {font-weight: nilai_font;} yang paling umum, perhatikan juga indikator hijau pada gambar, itu merupakan tanda aman atau nilai kecepatan loading (pemuatan font) tersebut. jika kita memilih 3 ukuran ketebalan font misal 400,700, dan 800 maka indikator hijau biasanya berubah jadi kuning atau merah, memberi tanda bahwa memilih 3 ukuran font akan membuat loading (pemuatan) font lebih berat.
  • Tab-Embed, Copy kedua kode yang di berikan google font, simpan di notepad atau catatan untuk sementara.

Cara Memasang Google Font ke HTML Template

  1. Login ke Dashboard Blogger > klick Template > Edit Html
  2. Cari kode penutup tag-heading yaitu </head> dan pastekan kode google font tepat di atas kode </head> kemudian save template.
Lihat contoh di bawah ini.
[code type="HTML"]<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
</head>[/code]
Catatan: Proses pemasangan google font ke html template belum selesai, jika pada saat menyimpannya ternyata terjadi error (template kita tidak bisa menyimpan kode google font) tersebut, maka ubah kode google font tersebut menjadi seperti berikut ini.
[code type="HTML"]<link href='https://fonts.googleapis.com/css?family=Raleway:400,700' rel='stylesheet'/>[/code]
Perhatikan perbedaannya ada dibagian ujung kode yaitu; penambahan string di sebelum penutup tag />.
Selanjutnya simpan kode google font tepat di atas tag </head> seperti yang telah dijelaskan diatas, Setelah kode google font tersimpan, maka langkah selanjut-nya tinggal menyeting css elemen yang di targetkan misalnya elemen p atau paragraf contoh: p{font-family: 'Raleway', sans-serif;}
Masukkan kode css google tepat di atas kode ]]></b:skin> dengan format seperti di bawah ini.
[code type="CSS"]p {
  font-family: 'Raleway', sans-serif;
}[/code]
Huruf "p" berarti paragraf, maka css di atas meminta "tampilkan semua paragaf text dengn font raleway". sedangkan fungsi sans-serif; adalah font cadangan, jika jaringan internet sedang tidak bagus maka font raleway akan di gantikan dengan sans-serif untuk pemuatan (loading) yang lebih singkat.

Selain dengan format seperti di atas, css google font juga bisa di pasang dengan format seperti contoh berikut ini;
[code type="CSS"].post-body {
  font-family: 'Raleway', sans-serif;
}[/code]
Kode .post-body adalah class name atau id target untuk laman artikel, jadi semua yang di dalam laman artikel akan dimuat dengan tampilan huruf (font) raleway. Supaya artikel ini lebih panjang lagi, maka saya kasi contoh lagi yaitu memasang css google font dengan format seperti berikut ini;
[code type="CSS"].post-body,.post-tittle,.popular-post {
  font-family: 'Raleway', sans-serif;
}[/code]
Css tersebut artinya meminta judul artikel, laman artikel, dan post popular di tampilkan dengan jenis huruf raleway.

Penting: kode .post-body, .post-tittle dan .popular-post merupakan "id" element yang umum pada template blogger, lakukan inspect element untuk mengetahui "id atau class name" setiap element template anda, awali dengan memberi tanda titik di belakang name class dan pisahkan masing-masing name class dengan tanda koma, seperti terlihat pada contoh css diatas, tambahkan font-size untuk mengatur ukuran font dan font-weight untuk berat atau bobot font seperti contoh berikut;
[code type="CSS"].post-body atau body{font:normal normal 17px 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;line-height:1.42857143;color:#616161;font-weight:400;}[/code]
font-weight:400; merupakan bobot font normal dan font-weight:700; merupakan bobot font bold atau tebal, saya fikir cukup sekian penjelasan saya mengenai cara memasang google font ke template blogger semoga dapat membantu anda menyelelesaikan maslah font web.