View AllFeatured

Top 10 Webhosting Terbaik di Indonesia: Penyedia Domain Hosting Terpopuler

Top 10 Webhosting Terbaik di Indonesia: Penyedia Domain Hosting Terpopuler

Webhosting Terbaik di Indonesia

Top 10 Webhosting Terbaik di Indonesia: Penyedia Domain Hosting Terpopuler untuk Custom Domain Blogger.


BLOGGER yang sudah melakukan Custom Domain tentu tak asing dengan istilah webhosting atau layanan hos web.

Web Hosting atau Layanan hos web adalah jasa layanan internet yang menyediakan sumber daya server-server untuk disewakan sehingga memungkinkan organisasi atau individu menempatkan informasi di internet berupa HTTP, FTP, EMAIL, atau DNS. (Wikipedia).

Pengertian praktisnya, webhosting adalah provider (penyedia) domain dan hosting untuk membangun websiste atau blog dengan nama domain sendiri.

Jika kita akan mengganti nama blogspot dengan nama domain sendiri (custom domain), maka kita harus membeli --tepatnya menyewa-- nama domain di salah satu webhosting atau layanan hos web.

Harga domain di kisaran Rp100 ribuan per tahun. Keuntungannya tetap hosting di blogger, jika domain lupa diperpanjang atau lupa bayar sewa tahunan, maka kita lepas setting custom domainnya, lalu kembalikan ke blogspot atau membeli nama domain baru. Data posting aman, tidak hilang, karena tetap ada di Blogger.

Custom Domain sangat dianjurkan agar blog kita lebih ramah mesin pencari, lebih kredibel, dan lebih profesional. Baca deh: Keuntungan Custom Domain.

Nah, jika sudah memutuskan untuk Custom Domain, mengganti naman dan alamat blog dengan nama domain sendiri, tentu kita segera menuju webhosting.

Berikut ini CB Share Webhosting Terbaik di Indonesia terbaru. Data ini CB dapatkan di Webhosting Info yang menurut CB terpercaya dan objektif.

Anda juga bisa melihat sendiri di laman Webhosting Info, tapi harus membuat akun dulu untuk login.

Webhosting Terbaik di Indonesia

Top 10 Webhosting Terbaik di Indonesia
Jika kita Googling dengan kata kunci Webhosting Terbaik di Indonesia, maka akan banyak sekali postingan tentang hal itu, termasuk iklannya.

Namun, jangan buru-buru percaya dengan klaim webhosting terbaik, karena banyak juga webhosting yang membuat postingan sendiri, di website atau blog yang dibuat sendiri, mungkin juga oleh karyawannya, dengan membidik kata kunci Webhosting Terbaik di Indonesia.

Makanya, CB cari sumber yang independen, bebas iklan, karena data provider domain dan web hosting terbaik berikut ini disusun berdasarkan jumlah domain yang paling banyak yang dihos di webhosting tersebut.

Data berikut ini per 22 November 2017 Pkl 23.00 WIB. Niagahoster menjadi webhosting No. 1 di Indonesai dengan total domain 38.796.

Wajar karena belakangan webshosting yang terbilang baru ini gencar sekali melakukan promosi plus pelayanan memuaskan.

Jika tidak memuaskan, kemungkinan besar jumlah pelanggan atau domain yang dihostingnya akan menurun. 

Idwebhost di posisi kedua "klasemen webhosting terbaik di Indonesia" dengan total domain 33.597 atau terpaut sekitar lima ribuan domain dari peringkat pertama.

Posisi tiga besar webhosting terbaik Indonesia terbaru ditempati Master Web dengan 32.658 pelanggan.

Webhosting Terbaik di Indonesia

Webhosting Terbaik di Indonesia

Posisi keempat, dengan jumlah domain yang cukup jauh tertinggal dari posisi tiga besar, dihuni Rumah Web dengan total domain 19.648. Jauh banget bedanya dengan posisi tiga besar.

Webhosting terbaik kelima ditempati Beon Intermedia dengan 17.857 pelanggan, diikuti Qwords di posisi keenam dengan 12.931 pelanggan.

Posisi webhosting terbaik ketujuh diduduki Dewaweb dengan 11.855 pelanggan, lalu Indosat ISP dengan 8.458 dan Ardh Gobal di posisi sembilan dengan 4.188 pelanggan.

Posisi 10 besar Webhosting Terbaik di Indonesia ditempati Dapur Hosting dengan 3.919 total domain.

CB senang karena dua webhosting langganan CB, yaitu Rumah Web dan Qwords, masuk dalam Daftar Top 10 Webhosting Terbaik di Indonesia ini.

Dengan demikian, untuk keamanan dan kenyamanan, jika Anda akan melakukan Custom Domain atau membuat website, gunakan layanan dari salah satu Top 10 Webhosting Terbaik di Indonesia di atas. Recommended: webhosting yang masuk "klasemen papan atas".

Bagaimana dengan Webhosting Terbaik Tingkat Dunia?

Webhosting terbaik secara global (dunia) ada dalam data gambar berikut ini. GoDaddy juaranya. Hostgator nomor 4.

Webhosting Terbaik Tingkat Dunia


Ingat ya, dalam iklan atau di websitenya, semua webhosting mengklaim sebagai webhisting terbaik, termurah, terpercaya, teraman, dan ter apalah apalah....

Kita doakan saja, semoga begitu, biar pelanggan tidak kecewa dan lari.

Ciri webhosting terbaik itu antara lain pelayanan, dukungan (support), kelancaran, harga, dan tentu saja.... kemudahan custom domain bagi para blogger.

Blog Anda yang sudah dicustom domain, ngehos di mana? Wehbosting mana yang Anda pilih? Masuk "Top 10 Webhosting Terbaik di Indonesia" di atas tidak?

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

Hormatilah Internet Explorer

Hormatilah Internet Explorer

Hormatilah Internet Explorer
Masih Ada Yang Pakai Internet Explorer? Masih! Meski sedikit, tapi Hormatilah Internet Explorer!

Internet Explorer atau Windows Internet Explorer (dulu dikenal sebagai Microsoft Internet Explorer, disingkat IE atau MSIE) adalah sebuah peramban web (internet browser) dan perangkat lunak gratis dari Microsoft dan disertakan dalam setiap rilis Sistem Operasi (OS) Microsoft Windows sejak 1995.

Pada mulanya, Internet Explorer dirilis sebagai bagian dari paket Plus! for Windows 95 (Inggris) pada saat itu.

Internet Explorer digunakan secara luas sejak tahun 1999, meliputi 95% dari keseluruhan penggunaan peramban web selama tahun 2002 hingga tahun 2003 dengan Internet Explorer 5 dan Internet Explorer 6.

Lama kelamaan, ia kehilangan pangsa pasar sejak terlibat dengan kompetisi peramban web dan kini meliputi 55,92%.

IE pula yang menjadi browser pertama yang dikenal pengguna internet di Indonesia pada umumnya.

Hormatilah Internet Explorer

Jasa IE sangat besar bagi pengguna internet. Saat CB "jalan-jalan" di Twitter dengan hashtag #SaveTelkom --saat itu koneksi internet CB di rumah lagi gangguan-- muncul gambar ini:

Hormatilah Internet Explorer

Secara tersurat, gambar ini mengajak kita agar menghormati IE sebagai browser pertama. Berkat jasa IE, kita bisa download Chrome, Firefox, Opera, Safari, dan internet browser lainnya.

Secara tersirat, karena ada d tagar #SaveTelkom, gambar ini juga mengatakan hormatilah Telkom karena ia pionir telekomunikasi sebelum datangnya era telepon seluler (ponsel) atau HP dan SmarPhone.

Itu dia inti postingan ini. Homatikan IE sebagaimana kita harus hormati Telkom beserta produk jadulnya seperti Telepon Umum yang kini sudah bisa dikatakan punah.

Masih Ada yang Menggunakan IE?

Masih ada yang pake IE di zaman now? Masih!

Coba cek statistik blog Anda. Klik Stats > Audience, akan muncul data pengunjung blog berdasarkan browser yang digunakannya.

Kalo punya CB, datanya menunjukkan mayoritas yang buka blog CB ini menggunakan Google Chrome (66%), lalu Firefox (18%), UCBrowser (5%), Safari (2%), SamsungBrowser (1%), Mobile Safari (1%).

Setelah itu, baru Internet Explorer. Meskipun di bawah 1% saja, tapi setidakanya masih ada ratusan yang buka blog CB.

pengunjung blog berdasarkan browser

Mayoritas pengguna internet tidak menggunakan lagi IE antara lain karena situs atau halaman web yang belum memenuhi standar website terbaru sering tidak dapat ditampilkan secara utuh oleh IE. Akibatnya, halaman yang tampil hanya setengah atau dalam keadaan berantakan.

Kecepatan IE juga kalah jauh dari Chrome dan browser lainnya. Tapi, sekali lagi, hormatilah IE. Bagaimanapun ia punya jasa bagi para pengguna internet zaman dulu dan zaman now. (www.contohblog.com).*

Cara Agar Skor SEO Blog 100% di Chkme

Cara Agar Skor SEO Blog 100% di Chkme

Cara Agar Skor SEO Blog 100% di Chkme
Cara Agar Skor SEO Blog 100% di Chkme

CHKME adalah situs sabahat blogger untuk mengecek SEO Blog. Setidaknya, Chkme membantu perbaikan SEO Blog agar memenuhi standar.

Banyak blogger yang mengetes blognya di Chkme lalu menemukan skor seo blognya tidak sampai 100%.

Chkme bukan satu-satunya situs tester seo, namun situs ini lebih sederhana dan lebih mudah bagi para blogger pemula untuk mengoptimalkan seo blognya.

CB sudah share dua postingan berikut ini:

Contoh, skor SEO Template Blog NTS Magz 100 Persen - Sempurna versi Chkme. Sudah memenuhi standar SEO Blog. Tinggal didukung posting berkualitas.

Skor SEO NTS Magz 100 Persen - Sempurna versi Chkme

Agar Sko SEO Tetap 100%, pastikan:

1. Tidak memasukkan kode iframe -- kode iframe tak terindeks Google, misalnya kode tempel (embeded) video Youtube.

2. Isi deskripsi image/gambar --Alt Text dan Title Text 

Cara Agar Skor SEO Blog 100% di Chkme

3. Hapus semua kode <b:include name='quickedit'/> di template. Kode ini akan muncul otomatis saat menambah widget baru di sidebar atuu tempat lain.

Cara Agar Skor SEO Blog 100% di Chkme

4. Pastikan H1 blog Anda, baik teks maupun gambar, dikasih kode h1 sebagaimana link kedua di atas (Mengatasi Zero H1).

Intinya sih, cek blog Anda di Chkme, nanti ada catatan dan rekomendasi perbaikan hingga skor seo blog Anda 100%.

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

Kode Open Graph Protocol (OGP) Tags untuk Share Facebook Posting Blogger

Kode Open Graph Protocol (OGP) Tags untuk Share Facebook Posting Blogger

Kode Open Graph Protocol (OGP) Tags untuk Share Facebook Posting Blogger

Open Graph Protocole adalah kode untuk mengatur tampilan posting saat dishare ke media sosial, terutama Facebook.

Saat posting dishare ke Facebook, tampilan normalnya sebagai berikut:
  • JUDUL - Judul Posting
  • DESKRIPSI -- Kutipan isi posting paling atas atau meta deskripsi
  • GAMBAR - Gambar Thumbnail yang diambil gambar di postingan paling atas.
Share Facebook Posting Blogger

Share Facebook Posting Blogger

Jika blog Anda bermasalah dengan tampilan posting saat dishare ke Facebook, tidak tampil normal seperti seharusnya, Anda bisa coba gunakan kode yang dishare Unidig Adv berikut ini:

1. Tema > Edit HTML
2. Copas kode berikut ini di bawah kode <head>

<!--START OG CODE-->
<meta property='og:url' expr:content='data:blog.canonicalUrl'/>
<meta property='og:title' expr:content='data:blog.pageTitle'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta property='og:image' expr:content='data:blog.postImageUrl'/>
<meta property='og:type' content='article'/>
<b:else/>
<title><data:blog.pageTitle/> - PUT ANY ADDITIONAL TITLE COPY HERE</title>
<meta property='og:image' content='PUT YOUR IMAGE URL HERE'/>
<meta property='og:type' content='blog'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>
<!--END OG CODE-->

3. Save!

Jika cara di atas tidak berhasil, coba cara lama mengatasi share Facebook posting blog. Good Luck and Happy Blogging! (www.contohblog.com).*

Meta Tags SEO Standar Blog di Template Simple Bawaan Blogger

Meta Tags SEO Standar Blog di Template Simple Bawaan Blogger

Meta Tags SEO Standar Blog di Template Simple Bawaan Blogger
Meta Tags SEO Standar Blog di Template Simple Bawaan Blogger.

KITA bisa menemukan banyak sekali Meta Tags SEO Friedly, yaitu meta tags yang --katanya-- ramah mesin telusur (search engine).

Postingan berikut ini "hanya" mengulas meta tags standar blogger, yang ada di template bawaan blogger, yang sudah standar SEO Google juga.

Meta Tags SEO Standar Blogger itu hanya dua baris berikut ini:

<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

Jika dilihat kode sumber (view source), maka meta tags yang hanya bisa dibaca dan memang diperuntukkan bagi mesin pencari itu akan terekstrak sebagai berikut. 

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link href='URL BLOG/favicon.ico' rel='icon' type='image/x-icon'/>
<link href=''URL BLOG' rel='canonical'/>
<link rel="alternate" type="application/atom+xml" title="Nama Blog - Atom" href="'URL BLOG/feeds/posts/default" />
<link rel="alternate" type="application/rss+xml" title="Nama Blog - RSS" href="'URL BLOG/feeds/posts/default?alt=rss" />
<link rel="service.post" type="application/atom+xml" title="Nama Blog - Atom" href="https://www.blogger.com/feeds/BLOG ID/posts/default" />
<link rel="openid.server" href="https://www.blogger.com/openid-server.g" />
<link rel="openid.delegate" href="'URL BLOG" />
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/3620414510-ieretrofit.js"></script>
<![endif]-->
<meta content='Deskripsi Blog' name='description'/>
<meta content='URL Blog' property='og:url'/>
<meta content='Judul Blog' property='og:title'/>
<meta content='Deskripsi Blog' property='og:description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<title>Nama Blog</title>

Meta Tags SEO Standar Blogger

Dengan demikian, meta tags standar blogger itu ada di kode ini:

<b:include data='blog' name='all-head-content'/>

Jika dibuka, maka kode tersebut berisikan kode-kode dan link sebagai berikut:

<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<link expr:href='data:blog.homepageUrl + &quot;favicon.ico&quot;' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.url' rel='canonical'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='data:blog.homepageUrl + &quot;feeds/posts/default?alt=rss&quot;' expr:title='data:blog.title + &quot; - RSS&quot;' rel='alternate' type='application/rss+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel='alternate' type='application/atom+xml'/>
<link expr:href='&quot;http://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/posts/default&quot;' expr:title='data:blog.title + &quot; - Atom&quot;' rel="service.post" type='application/atom+xml'/>
<!--Can't find substitution for tag [blog.ieCssRetrofitLinks]-->
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.homepageUrl' property='og:url'/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<!--[if IE]> <script> (function() { var html5 = ("abbr,article,aside,audio,canvas,datalist,details," + "figure,footer,header,hgroup,mark,menu,meter,nav,output," + "progress,section,time,video").split(','); for (var i = 0; i < html5.length; i++) { document.createElement(html5[i]); } try { document.execCommand('BackgroundImageCache', false, true); } catch(e) {} })(); </script> <![endif]-->
<!--[if IE]><script type="text/javascript" src="https://www.blogger.com/static/v1/jsbin/3620414510-ieretrofit.js"></script>
<![endif]-->
<link href='http://www.blogger.com/openid-server.g' rel='openid.server'/>
<link expr:href='data:blog.homepageUrl' rel='openid.delegate'/>

Meta Tags Buruk (Tidak Baik)

Patut diperhatikan ulasan tentang Meta Tags dari MOZ. Meta tags yang kodenya banyak (panjang) biasanya berisi kode-kode yang menurut MOZ tidak bagus buat seo blog, yaitu:
  • Author/Web Author – This tag is used to name the author of the page. It's just not necessary on the page.
  • Revisit after – This meta tag is a command to the robots to return to a page after a specific period of time. It's not followed by any major search engine.
  • Rating – This tag is used to denote the maturity rating of content. 
  • Expiration/date – "Expiration" is used to note when the page expires, and "date" is the date the page was made. 
  • Copyright – That Google article debates this with me a bit, but look at the footer of your site. I would guess it says "Copyright 20xx" in some form. Why say it twice?
  • Abstract – This tag is sometimes used to place an abstract of the content and used mainly by educational pursuits.
  • Distribution – The "distribution" value is supposedly used to control who can access the document, typically set to "global." 
  • Generator – This is used to note what program created the page. Like "author," it's useless.
  • Cache control – This tag is set in hopes of controlling when and how often a page is cached in the browser. It's best to do this in the HTTP header.
  • Resource type – This is used to name the type of resource the page is, like "document." Save yourself time, as the DTD declaration does it for you.

Kode Stantar Responsvie
<meta name=viewport content="width=device-width, initial-scale=1">

Demikian sekadar menyimpan Meta Tags SEO Standar Blogger. (www.contohblog.com).*

Cara Membuat Navigasi Menu Dropdown Responsive Murni CSS HTML

Cara Membuat Navigasi Menu Dropdown Responsive Murni CSS HTML

Cara Membuat Navigasi Menu Dropdown Responsive Murni CSS HTML Tanpa JavaScript

Demo Navigasi Menu Dropdown Responsive Murni CSS HTML Tanpa JavaScript untuk Blog ini bisa dilihat di Code Pen yang linknya ada di bawah. Karena responsive, tentu saja navigasi menu ini mobile-friendly alias ramah seluler.

Navigasi Menu Dropdown Responsive Murni CSS HTML


KODE CSS
Simpan di atas kode ]]></b:skin>

/*Strip the ul of padding and list styling*/
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
/*Create a horizontal list with spacing*/
li {
display:inline-block;
float: left;
margin-right: 1px;
}
/*Style for menu links*/
li a {
display:block;
min-width:140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
/*Hover state for top level links*/
li:hover a {
background: #19c589;
}
/*Style for dropdown links*/
li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}
/*Hover state for dropdown links*/
li:hover ul a:hover {
background: #19c589;
color: #fff;
}
/*Hide dropdown links until they are needed*/
li ul {
display: none;
}
/*Make dropdown links vertical*/
li ul li {
display: block;
float: none;
}
/*Prevent text wrapping*/
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
/*Display the dropdown on hover*/
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
/*Style 'show menu' label button and hide it by default*/
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
/*Hide checkbox*/
input[type=checkbox]{
    display: none;
    -webkit-appearance: none;
}
/*Show menu when invisible checkbox is checked*/
input[type=checkbox]:checked ~ #menu{
    display: block;
}

/*Responsive Styles*/
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}

HTML
Simpan di bawah kode </header>

<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button"/>
<ul id="menu">
<li><a href="/">Home</a></li>
<li>
<a href="#">About &#65516;</a>
<ul class="hidden">
<li><a href="#">Who We Are</a></li>
<li><a href="#">What We Do</a></li>
</ul>
</li>
<li>
<a href="#">Portfolio &#65516;</a>
<ul class="hidden">
<li><a href="#">Photography</a></li>
<li><a href="#">Web &amp; User Interface Design</a></li>
<li><a href="#">Illustration</a></li>
</ul>
</li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>

See the Pen Menu Dropdown Responsive Pure CSS by CB Blogger (@cbblogger) on CodePen.

Cara Membuat Kotak Pencarian Keren Simple Responsive

Cara Membuat Kotak Pencarian Keren Simple Responsive

Cara Membuat Kotak Pencarian Keren Simple Responsive
Cara Membuat Kotak Pencarian Keren Simple Responsive di Sidebar Blogger

KOTAK Pencarian (Search Box) merupakan elemen/widget penting yang wajib ada di Blog. Kotak Pencarian ini memudahkan pembaca mencari informasi yang mereka butuhkan di blog kita.

Kotak pencarian juga berguna untuk meningkatkan PageViews, bahkan juga diperlukan saat ada postingan kita berganti permalink atau berubah linknya.

Berikut ini kode kotak pencarian yang ditampikan di sidebar blog dan cara memasangnya. Tampilannya seperti gambar di bawah ini.

Kotak Pencarian Keren Simple Responsive

Cara Membuat Kotak Pencarian

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul kosongkan.
3. Copas kode berikut ini di kolom konten

<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {border: 1px solid #ebebeb;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}
#search-box input[type="text"] {width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #54a8d0;cursor: pointer;}
</style>
<div id="search-box">
<form action="/search" id="search-form" method="get" target="_top">
<input id="search-text" name="q" placeholder="Search here..." type="text" vk_1c225="subscribed"/>
<button id="search-button" type="submit"><span><i class="fa fa-search"></i></span></button>
</form>
</div>

Save!

Karena Tombol Cari (Search Button) menggunakan Awesome Font, pastikan di template Anda sudah terpasang linknya. Jika belum ada, pasang kode ini di atas kode </head>

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

Demikian Cara Membuat Kotak Pencarian Keren Simple Responsive. Good Luck & Happy Blogging! (www.contohblog.com).*

Cara Mudah Membuat Gambar Ilustrasi Posting Blog

Cara Mudah Membuat Gambar Ilustrasi Posting Blog

Cara Mudah Membuat Gambar Ilustrasi Posting Blog

POSTINGAN blog harus menggunakan gambar (image) atau foto sebagai ilustrasi maupun sebagai pelengkap.

Jika tanpa gambar, postingan kita kurang SEO, akan kalah bersaing di Google.

Berikut ini salah satu cara, termasuk cara berbaru dan termudah, untuk membuat gambar ilustrasi postingan blog, yaitu dengan menggunakan status update Facebook.

Sekarang kan kita bisa menulis update status dengan latar warna-warni. Maka, bagi blogger itu kabar baik. Membuat gambar ilustrasi jadi mudah.

Cara Mudah Membuat Gambar Ilustrasi Posting Blog

1. Buka Akun Facebook Anda
2. Buat Update Status seperti biasa, tulis, misalnya "Cara Mudah Membuat Gambar Ilustrasi Posting Blog"
3. Klik icon latar warna yang ada di bawahnya. Hasilnya seperti ini.

Cara Mudah Membuat Gambar Ilustrasi Posting Blog

4. Begitu sudah jadi, tampil seperti gambar di atas, gunakan Snipping Tools bawaan Microsoft Windows untuk menyimpan gambarnya.

Anda juga bisa gunakan FireShot atau LightShot untuk menyimpan gambarnya.

5. Beres!

Anda bisa teruskan dengan menulis status update Facebook atau batalkan.

Demikian Cara Mudah Membuat Gambar Ilustrasi Posting Blog. Biar gambar Anda orisinal, unik, lebih SEO Friendly karena fresh dan gambar baru di data mesin pencari.

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

Cara Membuat Auto Read More di Halaman Depan Blog

Cara Membuat Auto Read More di Halaman Depan Blog

Cara Membuat Auto Read More atau Ringkasan Posting, Summary, atau Snippet Post plus Gambar Thumbnail di Halaman Depan Blog dengan & Tanpa JavaScript.


Membuat Auto Read More di Halaman Depan Blog
CARA membuat Auto Read More disertai gambar (thumbnail) di halaman depan blog (homepage) ini sudah berkali-kali CB terapkan, dan berhasil.

Cara ini sudah diterapkan dalam banyak modifikasi template blog.

Tips ini untuk Anda yang menggunakan template bawaan blogger (default blogger templates), seperti template simple, yang belum menampilkan ringkasan posting di halaman depan alias tampilannya sama dengan single post/single page.

Umumnya, template blog sekarang sudah otomatis menggunakan auto read more atau menampilkan ringkasan posting di halaman depan blog.

Kode Auto Read More Terbaru

Untuk membuat auto read more atau menampilkan judul, gambar, dan snippet (kutipan bagian awal posting) cukup dengan menggunakan kode terbaru berikut ini, sudah seo friendly.

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

.thumbnail-post {width:100px !important; height:100px !important;float:left;margin:0px 10px 0px 0px;}

2. Hapus dan ganti kode <data:post.body/> yang kedua dengan kode berikut ini:

<!-- Auto Read More start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post'
expr:alt='data:post.title' expr:title='data:post.title' src='https://lh3.googleusercontent.com/-qJ5VVlQsLfY/VOBUcH3BV_I/AAAAAAAAGsA/MkUD8LKAhTE/s220-Ic42/noimage.png'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </div>
  </b:if>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
  <data:post.body/>
</b:if>
<!-- Auto Read More end -->

Selesai! 
Save tempate Anda.

Auto Readmore Pake JavaScript & Tanpa JS

Ada dua cara membuat Auto Read More di Halaman Depan Blog, yaitu Menggunakan JavaScript dan Tanpa JavaScript (JS).
  • Kelebihan menggunakan JS adalah kita bisa mengatur ukuran foto dan panjang-pendek ringkasan tulisan. Kekurangannya: "sedikit" mengganggu kecepatan loading blog.
  • Kelebihan Auto Readmore Tanpa JS adalah loading blog tetap kenceng (fast loading) atau tidak mengganggu loading time blog. Kekurangannya: ukuran gambar thumbnail distandar ke 72x72 pixel dan panjang-pendek ringkasan tulisan gak bisa diubah. Kalaupun mau diubah, tetap... akhirnya..... menggunakan javascript juga!

Membuat Auto Read More di Halaman Depan Blog #1 (JavaScript)

Ini cara Membuat Auto Read More di Halaman Depan Blog mengunakan JavaScript (JS). Tips, kode, atau script Membuat Auto Read More di Halaman Depan Blog menggunanakan JS ini CB kutip dari Help Blogger.

1. Klik "Template" > "Edit HTML"
2. Cari (CTRL+F) kode <data:post.body/>.

Jika ada lebih dari dua <data:post.body/>, pilih yang kedua. Jika gagal, pilih yang ketiga atau pertama dst. Coba saja satu-satu hingga berhasil. 

3. Replace atau ganti kode <data:post.body/> tersebut dengan kode di bawah ini:

  <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
  <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='readmore' style='float:right'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

4. Cari kode </head> dan COPAS kode berikut ini tepat di atasnya!

 <script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 5px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


5. SAVE Template!

CATATAN: 
1. Anda bisa mengganti ukuran gambar/thumbnail dengan mengubah angka 120 menjadi lebih kecil atau lebih besar.

2. Anda juga bisa mengubah jumlah/panjang karakter dengan mengganti angka 490 (jika postingnya tanpa foto) dan angka 400 (jika postingnya ada foto).

Membuat Auto Read More di Halaman Depan Blog #2 (Tanpa JavaScript)

Cara kedua ini tanpa skrip, hanya menggunakan CSS/HTML sehingga disebut "Fast Loading Auto Readmore", meski cuma beda dikit sama yang JS.

1. Template > Edit HTML
2. Copy & Paste kode berikut ini di atas kode ]]</b:skin>

.thumbnail-post {width:140px;height:80px;float:left;margin:0px 10px 0px 0px;padding-right:15px}

3. Ganti kode  <data:post.body/> dengan kode berikut ini:

<!-- Auto Readmore Start -->
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.firstImageUrl'> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a> <b:else/> <a expr:href='data:post.url'><img class='thumbnail-post' expr:title='data:post.title' src='https://lh3.googleusercontent.com/-qJ5VVlQsLfY/VOBUcH3BV_I/AAAAAAAAGsA/MkUD8LKAhTE/s220-Ic42/noimage.png'/></a> </b:if> <div class='post-snippet'> <data:post.snippet/> </div>
<div class='rm-button-wrap'> <a class='button' expr:href='data:post.url'>Read More</a> </div> </b:if> </b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> </b:if> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> </b:if>
<!--Auto Readmore Codes End-->

Keterangan:
  • Jika ada dua kode <data:post.body/> di template blog Anda, ganti kode yang kedua.
  • Ukuran gambar thumbnail (140px/80px) bisa diubah menjadi lebih besar atau kecil
  • Kode warna Orange adalah URL Gambar Thumbail Default. Bisa diganti dengan gambar sendiri.
  • Kode yang warna biru adalah teks Read More yang bisa diubah menjadi Baca Selengkapnya atau bisa juga dihapus saja jika tidak ingin ada tulisan Readmore.

Bagaimana jika mau tanpa gambar dan tanpa tombol "readmore" dsb? Tutorial lebih lengkap, bisa disimak di blog "wong" Vietnam, Duypham. Pake saja Google Translate!

Apa itu Auto Readmore?

Auto Readmore Blog
Auto Read More adalah istilah bagi tampilan halaman depan blog (Homepage) berupa judul tulisan, gambar thumbnail, dan kutipan bagian awal tulisan.

Contohnya seperti gambar di samping kiri ini.

Auto Read More ini sebenarnya sudah disediakan oleh Blogger, jika kita menggunakan template bawaan blogger, yaitu dengan cara klik menu/link "Insert jump break" saat kita posting. Klik bagian akhir alinea pertama atau kedua, lalu klik Insert jump break.

Namun, template bawaan blogger terbaru, sudah semuanya auto readmore.

Desain halaman depan berupa judul dan ringkasan posting ini sangat user friendly (ramah pengguna), memenuhi kaidah pengalaman pengguna (user experience, UX), karena halaman hasil pencarian Google juga menampilkan judul dan ringkasan posting.

Sebaiknya, hapus tulisn "Read more" atau "Baca selengkapnya", karena Google juga tidak mencantumkan hal itu, juga hanya menambah banyak link di halaman depan yang bisa memberatkan loading blog.

Demikian Cara Membuat Auto Read More (Ringkasan Posting) di Halaman Depan Blog Blogger/Blogspot dengan & Tanpa JavaScript.

Good Luck and Happy Blogging! (http://www.contohblog.com).*

CB Super SEO - Template Blog SEO Simple Terbaru Zaman Now

CB Super SEO - Template Blog SEO Simple Terbaru Zaman Now

CB Super SEO - Template Blog SEO Simple Terbaru Zaman Now.

Template terbaru ini didesain simple ala website zaman now, CB Super SEO sudah dilengkapi seo terbaru sesuai dengan update algoritma Google.

CB Super SEO - Template Blog SEO Simple Terbaru Zaman Now

Harga Rp 140.000,-

Harga 140.000 saja. Tadinya mau dipatok harga Rp150.000, tapi suka ada biaya admin kalo transfer beda bank, makanya dikasih diskon 10.000 buat biaya admin atau ongkos ojek ke ATM :)

Features:
  • SEO Optimized
  • Fast Loading, Ringan
  • Responsive / Mobile Friendly
  • Auto Readmore SEO
  • Related Post Simple
  • Breadcrumbs SEO
  • Heading Tags Dinamis
  • Komentar Blogger
  • Simple & Clean
  • Menu Responsive / Mobile Friendly
  • And more...

Fitur lainnya --mobile friendly (responsive), fast loading, meta tags seo (skor seo chkme 100%-- sebagaimana data berikut ini.

Page is mobile-friendly


Page is mobile-friendly
This page is easy to use on a mobile device

Structured Data OK, No Error

Structured Data OK, No Error

Kecepatan Loading: PageSpeed Insight HIJAU

PageSpeed Insight HIJAU
PageSpeed Insight HIJAU

Speed CB Super SEO GT Metrix

Speed CB Super SEO GT Metrix

Catatan:
Kecepata Loading Blog dipengaruhi JavaSscript dan Gambar. Jadi, data di atas bisa berubah karena pengaruh gambar yang terlalu besar atau tambahan script.

Skor SEO Chkme 100%

Skor SEO Chkme 100%

RESPONSIVE

CB Super SEO - Template Blog SEO Simple Terbaru Zaman Now

CB Super SEO - Mobile-Friendly Responsive


Contact Form

Name

Email *

Message *