7 Ciri Template Blog SEO Friendly dan Ramah Pengguna

7 Ciri Template Blog SEO Friendly dan Ramah Pengguna

TEMPLATE blog tidak saja harus SEO Friendly (bersahabat dengan mesin pencari) agar mudah diidensk Google, tapi juga harus User Friendly (bersahabat dengan pengunjung).

Blog yang User Friendly akan disukai pembaca dan otomatis akan disukai juga oleh Google --karena mesin pencari terpopuler di dunia ini selalu berpihak kepada pengguna.

Dalam memilih blog, jangan fokus ke keren, bagus, atau indahnya, meski itu juga penting, namun yang terpenting adalah Fast Loading --cepat loadingnya! Ringan. Itu salah satu ciri template blog User Friendly.

Ciri-Ciri Template Blog SEO & User Friendly

1. Fast Loading

Ringan. Disebut juga Loading Time. Tampilannya cepat! Anda bisa menguji atau mengetahui kecepatan loading blog di GT Metrix. Rekomendasi perbaikannya juga nanti muncul di sana.

Menurut Google, idealnya kecepatan loading blog itu di bawah 4 detik! Menurut sebuah penelitian, sebanyak 75 % pengunjung tidak akan kembali lagi ke blog yang loadingnya lebih dari empat detik.

The speed at which your blog loads is critical to attracting more readers to your blog. If your blog takes a long time to load, many readers may leave your blog before they have the chance to read it.(Make Your Blog Load Faster!).

2. Memiliki Menu Navigasi & Link yang Baik

Good navigation. Blog harus memiliki navigasi menu atau internal link yang memudahkan pengunjung untuk mengeksplorasi isi blog.

Navigasi Menu diletakkan di posisi yang mudah dilihat user, misalnya di atas atau di bawah Header.

Internal link juga harus ada di sidebar blog, seperti Posting Terbau, Posting Terpopuler, dan Random Posts (Optional).

Di bawah tiap postingan "wajib" ada Related Posts untuk memandu pengunjung ke posting sejenis atau setema.

3. Social Share

Tombol Share ke Facebook, Twitter, Google Plus, dll wajib ada di bawah postingan untuk memudahkan user membagikan posting berkualitas di blog Anda ke media sosial.

Minimal buat kepentingan admin blog sendiri untuk share ke sosmednya.

4. Scannable!

Pembaca blog itu hakikatnya memindai (scanning), bukan membaca (reading). Makanya, di dunia online ada istilah scannable text, yakni teks yang mudah dipindai alias mudah dibaca dan dipahami.

Ciri-ciri blog yang user friendly a.l. menyajikan tulisan yang scannable, yakni:

• Ukuran huruf tidak terlalu kecil, juga tidak terlalu besar, antara 13px s.d. 16px, tergantung jenis huruf yang digunakan.
• Jenis huruf yang baik yaitu kelompok Sans-Serif, seperti Arial, Verdana, Tahoma, Helvetica. Hindari jenis huruf yang "indah" namun sulit dibaca di layar monitor.
• Menggunakan alinea/paragraf pendek. Idealnya maksimal 5 baris per alinea.
• Ada jarak antar-alinea. Istilahnya: White Space! Jangan bertumpuk tanpa jarak!
• Align left. Rata kiri, bukan justify. Rata kiri lebih mudah dibaca, terkesan rileks, dan menyisakan banyak ruang untuk istirahat mata. Align Text "Justify" alias rata kiri-kanan kesannya "formal", "kaku", mirip surat resmi, dan gaya media cetak.

5. Dominasi Biru atau Hitam

Termasuk Ciri-Ciri Template Blog User Friendly adalah dominasi warna hitam atau biru yang sudah familiar dengan user (UX).

Warna gelap seperti hitam/biru tidak menyilaukan mata, berbeda dengan merah, orange, dsb yang bikin mata "sakit".

Warna link, terutama dalam posting, hendaknya biru, sebagaimana link di Google dan Yahoo. Warna biru link sudah familiar dengan pengunjung alias user friendly.

6. Tidak Kumuh

Banyak blogger yang terlalu banyak "memainkan" warna di blognya. Akibatnya, blognya terkesan "kumuh". Gunakan template blog yang simple, minimalis, bersih, sehingga bikin nyaman user juga menjadikan blog Fast Loading.

7. Responsive!

Kini era mobile device. Banyak pengguna internet menggunakan HP atau SmartPhone. Maka, gunakan template responsive (mobile friendly) agar tampilan blog mampu "menyesuikan diri" (adaptif) dengan perangkat yang digunakan user.

Demikian 7 Ciri Template Blog User Friendly. Ada tambahan? Tampilan blog yang bagaimana yang Anda sukai?

Cek: Koleksi Template SEO & User Friendly

Good Luck & Happy Blogging! (www.contohblog.com).*

Pengertian Startup dan Contohnya

Pengertian Startup dan Contohnya

Memahami pengertian startup dan contoh start-up akan menginspirasi kita untuk membuatnya. Startup merupakan bagian dari peluang bisnis online.

Istilah startup merujuk pada usaha rintisan secara online di internet dengan menggunakan situs web (website) atau aplikasi (app). Blogger juga bisa melakukannya.

Pengertian Startup

Secara bahasa, startup berasal dari kata start (yang artinya mulai) dan up (yang artinya naik atau meningkat).

Startup secara bahasa artinya "mulai meningkat" atau "mulai naik". Lawannya startdown atau mulai turun.

Istilah startup merujuk pada usaha atau perusahaan dengan memanfaatkan teknologi internet.

Pengertian startup yang dimaksud selama ini adalah "memulai usaha secara online yang nantinya akan berkembang" atau "sebuah bisnis online yang baru dirintis".

Startup adalah perusahaan yang baru saja didirikan dan berada dalam fase pengembangan dan penelitian untuk menemukan pasar yang tepat.

Menurut data Wikipedia, startup adalah sebuah perusahaan rintisan yang merujuk pada semua perusahaan yang belum lama beroperasi, baru didirikan, baru mulai (start).

Istilah startup menjadi populer dengan banyaknya perusahaan dot com yang didirikan secara bersamaan.

Bisnis startup identik dengan teknolog internet atau website dan aplikasi.

Karakteristik Startup

Ciri-ciri startup yang utama adalah baru didirikan, beroperasi melalui website. dengan jumlah pegawai masih sedikit. Berikut ini karakteristik selengkapnya:

1. Usia perusahaan kurang dari 3 tahun
2. Jumlah pegawai kurang dari 20 orang
3. Pendapatan kurang dari $ 100.000/tahun
4. Masih dalam tahap berkembang
5. Umumnya beroperasi dalam bidang teknologi
6. Produk yang dibuat berupa aplikasi dalam bentuk digital
7. Biasanya beroperasi melalui website

Contoh startup adalah toko online atau jasa tiket online yang baru didirikan.

Startup bisnis dalam bidang komunikasi seperti aplikasi jejaring sosial atau forum-forum obrolan, jual kue secara online, jasa privat online, pengajar online (seperti ruangguru yg sudah berkembang)

Contoh startup yang sudah berkembang pesat dan tidak lagi dinamakan startup karena sudah lama a.l. Bukalapak, Gojek, Tiket.com.

Saat dirikan hingga tahun ketiga, Bukalapak adalah startup. Saat ini sudah berkembang pesat hingga mampu mensponsori kompetisi sepakbola Liga 1 2018.

Saat CEO dan pendirinya menulis "presiden baru" di status Twitter, Bukalapak diserang #UnsitallBukalapak, namun kemudian gelombang serangan balik muncul bak tsunami berupa tagar #UninstallJokowi dan #InstallPrabowo.

Seru!

Good Luck & Happy Business Blogging! (www.contohblog.com).*

Sumber
https://id.wikipedia.org/wiki/Perusahaan_rintisan
https://www.wartaekonomi.co.id/read156356/7-bisnis-startup-paling-potensial.html

Cara Memasang Tombol Share LinkedIn di Bawah Postingan Blog

Cara Memasang Tombol Share LinkedIn di Bawah Postingan Blog

Media sosial Linkedin menjadi salah salah satu sumber sinyal sosial untuk SEO blog, selain Facebook, Twitter, dan Youtube. Karenanya, blogger dianjurkan memiliki akun LinkedIn untuk share posting blog.

Setelah membuat akun, pasang pula tombol berbagi LinkedIn (Share Button) di bawah postingan. CB kasih panduannya berikut ini bagi yang belum pasang.

Cara Memasang Tombol Share LinkedIn di Bawah Postingan Blog

1. Tema > Edit HTML

2. Copas kode share to LinkedIn berikut ini di bawah kode <data:post.body/> yang kedua atau ketiga.

Pilih satu kode:

Style 1:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='https://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='top' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

Style 2 :



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='https://platform.linkedin.com/in.js' type='text/javascript'/><script data-counter='right' expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>

Style 3 :



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;margin-left:10px;'>
<script src='http://platform.linkedin.com/in.js' type='text/javascript'/><script expr:data-url='data:post.url' type='in/share'/>
</div>
</b:if>
Save! Simpan template! 

Tombol berbagi ke LinkedIn sudah terpasang.

ALTERNATIF

Kode share ke LinkedIn berikut ini sudah digabungkan dengan kode share Twittr dan Facebook dengan tampilan seperti gambar berikut ini:

Pasang kode berikut ini di bawah <data:post.body/> yang kedua:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Scripts Start -->
<b:if cond='data:post.isFirstPost'>
<!-- Facebook -->
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = &quot;https://connect.facebook.net/en_US/all.js#xfbml=1&quot;;
fjs.parentNode.insertBefore(js, fjs);
}(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
</script>
<!-- Twitter -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script>
</b:if>
<!-- Scripts End -->
<!-- Horizontal social buttons Start -->
<div class='horizontal-social-buttons' style='padding:10px 0 10px;'>
<!-- Twitter -->
<div style='float:left;margin-right:5px'>
<a class='twitter-share-button' data-count='horizontal' data-lang='en' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<!-- Facebook Like+Send -->
<div style='float:left;'>
<fb:like colorscheme='light' expr:href='data:post.url' font='' layout='button_count' send='true' show_faces='false'/>
</div>
<div style='float:left;margin-left:8px'>
<script src='https://platform.linkedin.com/in.js' type='text/javascript'/><script expr:data-url='data:post.url' type='in/share'/>
</div>
</div>
<div style='clear: both;'/>
<!-- Horizontal social buttons End -->
</b:if>

Save!

Demikian Cara Memasang Tombol Share LinkedIn di Bawah Postingan Blog untuk memudahkan share ke LinkedIn dan mengundang pengunjung. 

Good Luck & Happy Blogging! (contohblog.com).*

Tombol Kembali ke Atas Murni CSS - Scroll Back To Top Button Tanpa JavaScript

Tombol Kembali ke Atas Murni CSS - Scroll Back To Top Button Tanpa JavaScript

Tombol Kembali ke Atas merupakan faktor seo tak langsung. Keberadaan Back To Top Button menjadikan blog jadi ramah pengguna (user friendly). Dari ramah pengguna itulah blog jadi seo.

Berikut ini kode Tombol Kembali ke Atas Murni CSS (Scroll Back To Top Button) Tanpa JavaScript dan cara pasangnya. Tampilan begini:

Cara Pasang:

1. Tema > Edit HTML
2. Simpan di atas kode ]]></b:skin>

.scrolltop-wrap {
  box-sizing: border-box;
  position: absolute;
  top: 12rem;
  right: 2rem;
  bottom: 0;
  pointer-events: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.scrolltop-wrap #scrolltop-bg {
  fill: #007bff;
}
.scrolltop-wrap #scrolltop-arrow {
  fill: white;
}
.scrolltop-wrap a:hover #scrolltop-bg {
  fill: #2990ff;
}
.scrolltop-wrap a:hover #scrolltop-arrow {
  fill: white;
}
@supports (-moz-appearance: meterbar) {
  .scrolltop-wrap {
    clip: rect(0, 3rem, auto, 0);
  }
}
.scrolltop-wrap a {
  position: fixed;
  position: -webkit-sticky;
  position: sticky;
  top: -5rem;
  width: 3rem;
  height: 3rem;
  margin-bottom: -5rem;
  -webkit-transform: translateY(100vh);
          transform: translateY(100vh);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: inline-block;
  text-decoration: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  pointer-events: all;
  outline: none;
  overflow: hidden;
}
.scrolltop-wrap a svg {
  display: block;
  border-radius: 50%;
  width: 100%;
  height: 100%;
}
.scrolltop-wrap a svg path {
  transition: all 0.1s;
}
.scrolltop-wrap a #scrolltop-arrow {
  -webkit-transform: scale(0.66);
          transform: scale(0.66);
  -webkit-transform-origin: center;
          transform-origin: center;
}
@media print {
  .scrolltop-wrap {
    display: none !important;
  }
}

3. Simpan di atas kode </body>

<div class="scrolltop-wrap">
    <a href="#" role="button" aria-label="Scroll to top">
        <svg viewBox="0 0 48 48" width="48" height="48px" xmlns="http://www.w3.org/2000/svg">
          <path id="scrolltop-bg" d="M0 0h48v48h-48z"></path>
            <path id="scrolltop-arrow" d="M14.83 30.83l9.17-9.17 9.17 9.17 2.83-2.83-12-12-12 12z"></path>
        </svg>
    </a>
  </div>

Tombol Kembali ke Atas dengan JavaScript

Kalo yang ini BtT menggunakan Javascript, tapi ringan kok!

1. Simpan kode berikut ini di atas kode ]]></b:skin>

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}
#myBtn:hover {
  background-color: #555;
}

2. Simpan di atas </body>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    document.getElementById("myBtn").style.display = "block";
  } else {
    document.getElementById("myBtn").style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

Sumber
https://www.w3schools.com/howto/howto_js_scroll_to_top.asp
https://codepen.io/rolandtoth/pen/eMamVK

See the Pen
Pure CSS Scroll To Top by rolandtoth (@rolandtoth)
on CodePen.

Etika Komentar di Blog Orang Lain: Hindari Menulis Alamat Blog & Link

Etika Komentar di Blog Orang Lain: Hindari Menulis Alamat Blog & Link

Jangan tuliskan alamat blog Anda saat komentar. Hindari promosi blog via kolom komentar. Itu melanggar etika.

Demikian dikemukakan Brick Marketing dalam postingnya tentang Etika Komentar di Blog.

"Don’t be promotional," tulisnya.

Selengkapnya:

"A blog comment is not an online billboard for you to promote your products/services. Unless you have a very, very good reason to include a link in the comment (such as an article that backs up your point) don’t drop links in the comment field, especially not ones back to your own site." 

"Most blog owners realize that blog comments are part of a link building strategy, but there is no need to get greedy about it. Very few blog owners that actively monitor the comments are going to let a promotional blog comment go through and might mark you as a spammer, meaning you’ll never get another comment (even if it isn’t promotional) to go live on that blog."

Etika komentar dengan tidak menyertakan link hidup atau alamat blog ini sering dilanggar.

Banyak blogger, dengan tujuan mendapatkan, menulis komentar dan menyertakan alamat blognya dalam komentar. Misalnya: 

• "Nice info gan, sudah saya terapkan di https://www.contohblog.com"

Banyak juga yang menulis komentar alakadarnya, lalu minta kunjungan balik. Misalnya,

• "Artikel menarik, jangan lupa kunjungi blog saya juga https://www.contohblog.com..."

Yang lebih parah adalah komentar yang isinya 100% promosi blog atau promosi bisnis.

Selain di komentar blog, komentar promosi ini sering kita jumpai di situs berita dan komentar Facebook yang gak nyambung sama sekali dengan berita.

Komentar Blog yang Baik

Komentar yang baik di blog orang lain di antaranya:

1. Tidak menyertakan link hidup atau link aktif (Spammy Comments)
2. Tidak minta kunjungan balik (kunbal)
3. Isi komentar tidak terlalu pendek, minimal dua kalimat.
4. Isi komentar relevan atau "nyambung" dengan topik posting
5. Isi komentar berupa koreksi atau tambahan

Jika kelima ciri komentar yang baik itu dilakukan, maka blogger lain akan terkesan dan tanpa diminta akan membuka link akun Google Plus Anda untuk kemudian membuka blog Anda.

Sebaliknya, jika komentar Anda hanya "modus" atau "basa-basi" untuk mendapatkan backlink dan promosi blog, maka blogger lain juga akan "enek" dan itu menurunkan reputasi Anda dan blog Anda.

Demikian etika komentar blog khususnya tentang menuliskan alamat blog di dalam isi komentar. Ada pandangan lain?

Just leave a comment! (contohblog.com).*

5 Ciri Template Blog SEO Friendly dan Contohnya

5 Ciri Template Blog SEO Friendly dan Contohnya

ANDA mau membuat blog dan/atau mengganti template (tampilan)?

Kenali dulu contoh & ciri-ciri template blog SEO Friendly yang akan dibahas dalam postingan ini.

Template Blog sangat menentukan "nasib" blog Anda di mesin pencari, terutama Google, dan di kalangan pengguna (user) atau pengunjung (visitor).

Konten, posting, atau tulisan sebagus apa pun, jika tidak didukung template yang baik, hasilnya tidak akan maksimal.

Fungsi template blog seo friendly adalah mendukung trafik pengunjung agar menemukan postingan itu (findability). Template merupakan salah satu dari 5 pilar utama teknik seo.

Pengertian SEO Friendly

Kita pahami dulu apa itu template blog seo friendly. Mulai dari pengertian seo itu sendiri.

SEO itu singkatan dari Search Engine Optimization ayai optimisasi mesin telusur. Maksudnya, pengoptimalan situs web/blog dari sisi desain dan konten agar mudah dirambah, diindeks, dan diperingkat oleh mesin pencari.

Friendly artinya ramah, bersahabat. Dengan demikian, template blog seo friendly adalah template blog yang ramah mesin pencari sehingga menjadikan blog mudah dirambah, diindeks, dan diperingkat dan mendatangkan pengunjung.

5 Ciri Template Blog SEO Friendly

Setelah mengetahui pengertian template blog seo friendly, kini kita ulas ciri-cirinya.

1. Fast Loading.

Tampil cepat, ringan, merupakan ciri utama blog seo friendly.

Kata Google, blog lelet, loadingnya lama alias lambat (berat), akan ditinggalkan pengunjung. Umumnya user menutup blog yang durasi loadingnya di atas 4 detik!

Test kecepatan blog di PageSpeed Insight dan GT Metrix. Data speed akan ditampilkan di sana beserta saran perbaikannya.

2. Mobile-Friendly

Ramah seluler. Mudah dibuka, diakses, dan cepat tampil saat dibuka di HP. Mobile-index menjadi algoritma tersendiri dari Google. 

Silakan cek: MobileGeddon yang mengobrak-abrik pemenang di hasil pencarian Google.

3. Navigasi & Internal Link.

Pastikan template Anda sudah menyediakan tautan internal, seperti Related Posts (Tulisan Terkait), Breadcrumbs, serta "Newer Post" dan "Older Post" di bawah setiap posting.

Navigasi template yang baik akan membuat blog ramah pengguna (user friendly), yang berdampak pada pengalaan pengguna (user experience) yang menjadi perhatian Google dalam algoritmanya.

4. Dynamic Heading H1 Tags.

Heading Tags H1 Dinamis, yait judul-judul posting di halaman depan (home) menggunakan Tags H2/H3, namun di halaman dalam (begitu diklik, single post) menjadi H1. 

Sebaliknya, untuk judul/nama blog, menggunakan Tag H1 di home, namun berubah menjadi H2/H3 di halaman dalam karena H1 Tags sudah "diambil-alih" judul postingan.

5. Structured Data

Pastikan data template blog Anda tersusun dengan baik dan dikenali Google. Cek di Google Structured Data Testing Tool dan perbaiki jika dan warning/error.

Itulah lima ciri template blog keren dan seo friendly yang akan mendongkrak popularitas dan pengunjung blog Anda.

Koleksi tema yang ada di Galeri Template sudah memenuhi kriteria Template Blog SE Friendly dan User Friendly.

Good Luck & Happy Blogging! (www.contohblog.com).*