ombaron

Cara Pasang Schema Org Markup di Template Blog agar Lebih SEO

✔ Jainudin Naciro Mei 05, 2016

Schema org markup merupakan elemen baru dalam desain template blog. Schema Org Markup diyakini dan terbukti menambah seo dan mempermudah indeks Google atau mesin pencari lainnya.

Template-template seo friendly terbaru umumnya sudah menggunakan Schema Org Markup. Bagi kita yang awam soal coding, web desain, dan programming, cukup memahami Schema Marup ini sebagai berikut:

Schme Markup adalah rangkaian kode yang akan membantu mesin pencari (search engines) lebih mudah mengindeks konten blog atau website dan menyajikan informasi data paling akurat dan relevan kepada pengguna (user) atau pengunjung (visitor).

Selengkapnya tentang Schema Org Markup ini bisa dilihat melalui Pemandu Markup.

Cara termudah apakah template blog kita sudah menggunakan Schema Markup atau belum, tinggal cek di Google Structured Data Testing Tool.

Jika tidak ada error, sudah cukup. Ada error missing pun tidak terlalu masalah, karena schema markup ini hanyalah "senjata ekstra" untuk mendorong seo blog.

Pasalnya, Tips SEO terbaik adalah konten berkualitas dan konten masih akan selalu menjadi raja.

Cara Pasang Schema Org Markup di Template Blog

Banyak tips memasang schema org di template blog, dari yang rumit hingga termudah. Jangan lupa, untuk jaga-jaga, BACK-UP dulu template blog Anda!

Tips berikut ini sebenarnya saya kutip dari blog ContohBlog, dan sudah pernah diterapkan di Template New Thesis SEO (NTS) Magazine Style (Premium).

1. Buka dashbord blog anda
2. Pilih Template > Edit HTML
3. Ganti kode <nav> atau kode navigasi menu dengan:

4. Ganti kode <body> dengan kode ini:

5. Ganti kode <header> atau <header-wrapper> dengan:

6. Ganti kode <content-wrapper> atau <main-wrapper> dengan:

7. Ganti kode:

dengan:

8. Ganti kode:

dengan:

9. Cari dan ganti kode

dengan

10. Ganti kode <div id='sidebar-wrapper'> dengan:

11. Ganti kode <footer id='footer-wrapper'> dengan:

Kini struktur Schema Markup sudah terpasang di template blog Anda. Silakan anda cek ke Structured Data Testing Tool.

Baca Juga: Cara Membuat Akun Google AdSense

Tips Blogger

Tempat Beli Domain dan Hosting Murah, Terbaik dan Terpercaya

✔ Jainudin Naciro Februari 13, 2016

Saat ini sudah banyak sekali situs penyedia domain dan hosting, baik itu dari dalam negeri maupun dari luar negeri. Tak sedikit dari mereka berlomba-lomba mencari banyak pelanggan dengan melakukan berbagai cara, mulai dari diskon, harga murah, hingga iming-iming bonus yang diberikan.

Bagi seorang blogger pemula atau newbie, mereka lebih memilih harga domain dan hosting yang murah karena cenderung berpikir untuk sekedar coba-coba. Hal ini menjadi salah satu alasan mereka membelinya tanpa memperhatikan kualitas layanan penyedia domain dan hosting tersebut. Boleh saja membeli domain murah asalkan berkualitas, karena murah bukan berarti murahan.

Sebagai seorang blogger (bukan pemula dan bukan pula master) saya ingin memberi informasi kepada anda tentang 2 penyedia domain terbaik dan terpercaya yang berasal dari dalam dan luar negeri.

1. IDwebhost
IDwebhost merupakan salah satu penyedia domain murah, terbaik dan terpercaya yang berasal dari Indonesia. Perusahaan ini berdiri pada tahun 2005 dan mendapatkan akreditasi ICANN pada tahun 2009 untuk layanan registrasi nama domain.

Hal yang sangat luar biasa dari IDwebhost adalah pelayanannya. Mereka tidak hanya sekedar menjual, namun punya komitmen tinggi terhadap kepuasan pelanggannya. IDwebhost memilki para Customer Support profesional dan ramah yang selalu siap membantu para pelanggannya 24 jam non stop, melalui Online chatting, Telepon, SMS, Email, serta Pelayanan di kantor IDwebhost.

IDwebhost memiliki sistem yang cepat untuk memudahkan pelanggan dalam proses pendaftaran, pembayaran, pengecekkan, dan keluhan.

2. Namecheap
Namecheap merupakan salah satu penyedia domain dan hosting terbaik dan terpercaya sejak tahun 2000 yang berasal dari Los Angeles, Amerika Serikat. Mereka menyediakan produk seperti nama domain, webhosting, Whois Gurad, sertifikat SSL dan lain-lain.

Kelebihan Namecheap dibanding GoDaddy yang juga penyedia domain dan hosting berasal dari luar negeri, yaitu mendukung pembayaran melalui Paypal, serta banyaknya fitur-fitur lainnya yang bisa digunakan.

Jika anda ingin membeli domain atau hosting murah yang berkualitas, saya rekomendasikan untuk memilih salah satu dari keduanya, IDwebhost atau Namecheap. Selain murah, mereka merupakan penyedia terpercaya, terbaik, dan berkualitas.

Baca Juga: Cara Membuat Blog

HTML Tips Blogger Widget Blog

Cara Membuat Spoiler di Blog

✔ Jainudin Naciro Januari 14, 2016

Bagi anda yang aktif di forum pasti sudah tidak asing lagi dengan spoiler, karna hampir pasti semua forum pasti ada spoiler. Spoiler adalah posting konten (teks, foto atau video) tersembunyi yang bisa dilihat apabila pembaca meng-klik tombol dan pembaca juga bisa menyembunyikan kembali posting dengan menekan ulang tombol tersebut.

Spoiler ini sangat berguna sekali, karena fungsinya bisa menghemat ruang pada postingan, menghemat kuota pembaca serta bisa mempercepat loading halaman blog anda.

Judul Spoiler:

Jadi bagi anda yang belum tau cara membuat spoiler pada postingan blog bisa mengikuti langkah-langkah berikut ini.

1. Buat postingan terbaru seperti biasa
2. Kemudian Pilih tab HTML dan paste kode berikut

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Letakkan teks atau kode script (gambar atau video) di sini
<br>
</div>
</div>
</div>

3. Anda bisa mengganti tulisan warna biru sesuai keinginan
4. Pada tulisan warna merah, silahkan isi dengan konten anda, baik itu teks biasa, kode, ataupun lainnya.
5. Kemudian klik publikasi jika sudah selesai.

CSS HTML Tips Blogger Widget Blog

Cara Membuat Floating Media Sosial

✔ Jainudin Naciro Januari 13, 2016

Widget media sosial yang saya bagikan ini bisa mengikuti gerakan naik turun atau bisa dikatakan melayang pada bagian samping template blog, sehingga membuat blog anda terlihat lebih menarik dan bagus.

Pada widget ini juga ditambahkan jquery, apabila anda mengarahkan cursor pada salah satu media sosial tersebut, maka akan terlihat efek easing yang ada pada jquery-ui.min. Selain menambahkan efek easing, jenis media sosial yang dipasang juga lebih banyak.

Jika anda ingin memasang widget ini pada blog anda, silahkan ikuti langkah-langkah berikut ini.
1. Login blogger
2. Pilih Template > Edit HTML
3. Copy dan paste kode CSS berikut ini diatas ]]></b:skin>

.social-buttons {
position: fixed;
top: 130px;
width: 45px;
z-index: 9999;
}
.button-left {
left: 0;
}
.button-right {
right: 0;
}
.social-buttons #twitter-btn .social-icon,
.social-buttons #facebook-btn .social-icon,
.social-buttons #google-btn .social-icon,
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
background-color: #33353B;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWqjUy3O09tfIPYBw2JCdJT9KxPB0jmV4AirL4AdWbatkCB57a9Q3Uhj1mD5X0gg6kFnEgiOhf4DG1SxkmEwi2QDtZ-9ZafLd9rx6mJssJFQcE_ZDfbXYfUcWgSGzMaLI2Zhlcdo5oUK8/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
background-position: right 10px;
}
.button-left #twitter-btn span {
background-position: right -35px;
}
.button-left #google-btn span {
background-position: right -127px;
}
.button-left #rss-btn span {
background-position: right -80px;
}
.button-left #pinterest-btn span {
background-position: 11px -177px;
}
.button-left #youtube-btn span {
background-position: 11px -223px;
}
.button-right #facebook-btn span {
background-position: 12px 10px;
}
.button-right #twitter-btn span {
background-position: 11px -35px;
}
.button-right #google-btn span {
background-position: 10px -127px;
}
.button-right #rss-btn span {
background-position: 11px -80px;
}
.button-right #pinterest-btn span {
background-position: 11px -177px;
}
.button-right #youtube-btn span {
background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
background-color: #C4302B;
}
.social-buttons a:hover .social-text {
display: block;
}
.button-left .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: left;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-left .social-text {
display: none;
float: right;
font-size: 1em;
font-weight: bold;
margin: 11px 40px 11px 0px;
white-space: nowrap;
}
.button-right .social-icon {
-moz-transition: background-color 0.4s ease-in 0s;
-webkit-transition: background-color 0.4s ease-in 0s;
background-repeat: no-repeat;
display: block;
float: right;
height: 43px;
margin-bottom: 2px;
width: 43px;
}
.button-right .social-text {
display: none;
float: left;
font-size: 80%;
font-weight: bold;
margin: 11px 0 11px 40px;
white-space: nowrap;
}
.social-buttons .social-text {
color: #FFFFFF;
}

4. Kemudian menambahkan jquery dan JavaScript. Jika pada template anda sudah mempunyai jquery (warna biru), maka copy JavaScript saja, lalu paste diatas </head>

5. Selanjutnya copy dan paste kode berikut diatas </body>

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/xxxxx' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
<a class='itemsocial' href='https://twitter.com/xxxxx' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
<a class='itemsocial' href='https://plus.google.com/xxxxx' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
<a class='itemsocial' href='http://pinterest.com/xxxxx' id='pinterest-btn' target='_blank'><span class='social-icon'>
<span class='social-text'>Follow via Pinterest</span></span></a>
<a class='itemsocial' href='https://www.youtube.com/user/xxxxx' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
<a class='itemsocial' href='http://feeds.feedburner.com/xxxxx' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
</div>

6. Ganti tulisan warna biru dengan Id media sosial anda. Kemudian simpan kembali template blog anda.

Demikian tutorial cara membuat floating media sosial di blog anda. Semoga bermanfaat dan selamat mencoba.

Baca juga: Cara membuat blog

Tips Blogger

Cara Membuat Subdomain

Unknown Januari 12, 2016

Subdomain adalah domain yang berada dibawah naungan domain utama anda, seperti "namasubdomain.namadomainanda.com". Untuk membuat sub domain sebenarnya sangat mudah sekali untuk dilakukan, dengan catatan kita telah mempunyai domain dan hosting.

Lalu untuk apa kita perlu membuat sub domain?

Apabila blog / situs kita sudah berkembang pesat dan terkenal sehingga dikunjungi oleh banyak orang hingga mencapai puluhan ribu per hari, maka kita perlu membuat sub domain.

Selain alasan tersebut, kita juga tidak perlu lagi membeli domain lain, sehingga tidak menghabiskan banyak biaya. Jadi dengan membuat sub domain, sedikit banyaknya kita bisa lebih menghemat uang saku. Namun, jika kita ingin punya banyak sub domain, maka kita hanya perlu meng-upgrade paket hosting saja.

Berikut ini saya akan menjelaskan bagaimana membuat sub domain, silahkan ikuti langkah-langkah berikut ini :

Di bawah ini kita akan membuat sub domain dengan nama : contoh.domainanda.com

1. Pastikan anda sudah mempunyai domain dan hosting sendiri

2. Login Cpanel anda

3. Pilih domains > subdomains

Setelah masuk ke subdomain, selanjutnya silahkan anda isikan nama subdomain yang anda inginkan.

Setelah anda mengisi nama sub domain anda, lalu klik create.

Sangat mudah bukan ? Demikian cara sederhana membuat sebuah subdomain. Selamat mencoba.

HTML Tips Blogger Widget Blog

Cara Membuat Daftar Isi Blog Menurut Label

Unknown Januari 06, 2016

Tutorial cara membuat daftar isi blog sebenarnya sudah pernah dibagikan sebelumnya pada artikel "cara membuat sitemap (daftar is) blog". Namun untuk tutorial membuat daftar isi kali ini sedikit berbeda. Perbedaannya terletak dari segi tampilannya yang lebih bagus dan tertata rapi. Pokoknya indah dipandang mata.

Keuntungan membuat widget sitemap di blog adalah untuk memudahkan para pembaca dalam mencari dan menemukan artikel blog. Jadi, bagi blogger yang belum memasang ataupun membuat sitemap blog, mari untuk segera menerapkan agar blog anda terlihat lebih profesional.

Jadi, langsung saja sahabat OB, silahkan ikuti beberapa langkah penerapan sitemap berikut ini :

1. Buka Blogger
2. Pilih Laman > Buat Laman baru
3. Salin dan pastekan kode berikut ini pada tab HTML

<div dir="ltr" style="text-align:left;" trbidi="on">
<style scoped="" type="text/css">
.table-of-content{background-color:#222;color:#ddd;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.1)}
.table-of-content .toc-header{color:#fff;font-family:inherit;font-weight:400;font-size:14px;background-color:#333;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-top:1px solid #444;border-bottom:1px solid #222;transition:initial}
.table-of-content .toc-header:hover{background-color:#3a3a3a}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{background:#3a3a3a;color:#fff}
.table-of-content .toc-header.active:before{border-color:#fff transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#222!important;transition:initial}
.table-of-content a{color:#aaa;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#666;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#fff;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Memuat konten...</span></div>
<script>
var toc_config = {
    url: 'http://www.ombaron.com/',
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#009fef;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">baru</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-tea.js"></script>
</div>

Ganti url yang berwarna biru dengan url blog anda, lalu simpan dan kemudian pubikasikan. Sangat mudah buka ? Selamat mencobat.