Cara Pasang Breadcrumb Blogspot SEO Friendly 2

CARA membuat, menampilkan, memunculkan, atau memasang breadcrumbs di blog blogspot ini, untuk Anda yang template blognya belum dilengkapi breadcrumbs. Yang sudah ada, tentu saja tidak usah lagi memasang kodenya.

Bagi yang belum tau, breadcrumb adalah navigasi blog berupa "judul kecil" di atas judul posting blog, yang disertai nama label/kategori dan navigasi "home".

Breadcrumb merupakan salah satu "trik blog" karena menjadi navigasi yang berisikan label/kategori posting dan bisanya diawali dengan tombol menuju "home" (halaman depan blog/beranda/homepage).

Contohnya? Lihat navigasi berupa "judul kecil" atas judul posting yang sedang Anda baca ini. Ini breadcrumb-nya:  Home» Tips SEO Blog» Cara Memasang Breadcrumb di Blogspot. 

 Dengan adanya breadcrumb, maka itu memudahkan user untuk kembali ke halaman depan (tinggal klik "Home") atau menemukan posting lainnya di label yang sama (tinggal klik "Tips SEO Blog".

Cara Membuat/Memasang Breadcrumb di Blogspot

Ini cara terbaik memasang breadcrumbs. Kode dari Maskolis berikut tidak akan membuat breadcrumbs menggantikan Permalink posting blog kita di hasil pencarian Google.

1. Klik "Template" > "Edit HTML"
3. Cari (Ctrl+F) kode ]]></b:skin>
4. Copy + Paste kode berikut ini tepat sebelum  kode ]]></b:skin>

.breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:90%; 
line-height:1.4em; border-bottom:1px dotted #ccc}

5. Cari kode <div class='post hentry'> dan Copas kode berikut ini tepat setelahnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'>
<data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop>
</b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

6. SAVE Template!

Mudah 'kan cara memasang breadcrumb di Blogspot? Oh.... gak muncul? Coba cara lainnya berikut ini.

Cara Lain Memasang Breadcrumb Blog

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

.breadcrumbs {padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:85%; line-height: 1.4em; border-bottom:3px double #e6e4e3;}

2. Cari dan Ganti kode <b:includable id='main' var='top'> dengan kode di bawah ini

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

3. SAVE Template!

Masih gak muncul juga itu breadcrumb? Ah... masa sih...! Coba lagi ini yang kata sih Cara Memasang Breadcrumb di Blogspot yang SEO Friendly.

Breadcrumb Blogspot SEO Friendly

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

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}

2. Temukan kode <b:includable id='main' var='top'> dan ganti dengan kode berikut ini:

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Itulah Cara Memasang Breadcrumb di Blogspot untuk kepentingan user. Tapi, pentingkah breadcrumb bagi SEO Blog? Akan dibahas di posting lain.

Good Luck and Happy Blogging!

Read more »

Cara Memasang Breadcrumbs SEO Friendly

1. Buka Blogger > Klik Template > Edit HTML > Kemudian tambahkan kode CSS di bawah ini sebelum ]]></b:skin> atau </style>

/* Breadcrumbs */
.breadcrumbs{padding:20px 30px;background:#fff;margin-bottom:20px}
.breadcrumbs a,.post-info a {color:#19abea;}
.breadcrumbs a:hover,.post-info a:hover {color:#454545;}

2. Langkah selanjutnya, cari kode HTML post seperti ini

<b:includable id='main' var='top'>...</b:includable>

3. Kemudian tambahkan kode HTML breadcrumbs tepat di bawah kode di atas

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span>

<a expr:href='data:blog.homepageUrl' rel='tag' title='Home'>Home</a>

</span> / <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- Breadcrumb Untuk Halaman Pos -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs'>
Anda di sini : <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<a expr:href='data:blog.homepageUrl' itemprop='url' title='Home'>

<span itemprop='title'>Home</span></a></span>
<b:loop values='data:post.labels' var='label'>
/ <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'>

<a expr:href='data:label.url + &quot;?max-results=5&quot;' 

expr:title='data:label.name' itemprop='url'><span itemprop='title'>

<data:label.name/></span></a></span>
</b:loop>
/ <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' 

rel='tag' title='Home'>Home</a></span> / <span>Without Label</span> / <span>

<data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- Breadcrumb Untuk Label Search dan Search Pages -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> /

 <span>Archived For <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / 

<span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> / 

<span><data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

4. Simpan template.

Untuk mengetahui breadcrumbs sudah terpasang dengan benar di blog, Sobat bisa cek di sini Google testing tool

Demikian tutorial Cara Memasang Breadcrumb SEO Friendly, semoga beremanfaat.

Read more »

Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css. Seperti yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.

Untuk membuatnya bisa lakukan posedur berikut:
1.  Login ke menu blogger. Klik Design -> Edit HTML
2.  Backup template anda
3.  Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>

/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
Arial,Helvetica,sans-serif;
font-weight: bold;
}
#nav ul li{
float:left;
list-style:none
}
#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9J7jGfkJS3IypBgcQWMWeDTT0k9Nnb-Mulf_WvnkodhtfEr9u-5m_j0GJihac2hZA6BBiO9rvzgTKUzO259DjxYstmJMCi1sGR-AlHSE7gmumuAelzFSDl5dXKLxuulxryup1j6dIPK9E/) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}

Keterangan:

Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.

Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kode url(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:

background: #1c426d url(http://url-gambar);

4.  Setelah itu cari kode seperti dibawah ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='LKP Bina Tunas Education (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

Cari kode di template anda yang paling mendekati dengan kode diatas

5.  Kalau sudah ketemu, letakkan kode berikut dibawahnya.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

6.  Sehingga susunannya menjadi seperti ini:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>

<b:widget id='Header1' locked='true' title='LKP Bina Tunas Education (Header)' type='Header'/>

</b:section>

<div style='clear: both'/>

</div>

<div id='nav'>

<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>

<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>

<b:includable id='main'>

<div class='widget-content'>

<b:if cond='data:title'/>

<div id='nav-left'>

<ul>

<li><a href='/'>Home</a></li>

<b:loop values='data:links' var='link'>

<li><a expr:href='data:link.target'><data:link.name/></a></li>

</b:loop>

</ul>

</div>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML30' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

<div id='nav-right'>

<form action='/search' id='searchform' method='get' style='display:inline;'>

<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>

<input id='searchbutton' type='submit' value='GO'/>

</form>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

7.  Kalau sudah, Save Template lalu lihat hasilnya.

Jika anda tidak mau menggunakan kotak pencari tinggal hapus kode yang dicetak tebal. Beres. Untuk menambah link pada menu navigasi. Buka menu Page Element lalu klik Edit pada "Top Tabs". Tambahkan link yang ingin anda tampilkan disana.

Selamat mencoba. Semoga bermanfaat.

Read more »

Belajar 1 Membuat Email Gratis Di Gmail.com

Langsung saja kita ke pokok pembahasan, untuk cara membuat Email di gmail, silahkan ikuti langkah-langkah simple berikut...

Cara Membuat Email Gmail Gratis Di Gmail.com

• Buka http://gmail.com
• Klik Create An Account di bawah form login.

• Anda akan masuk ke halaman pengisian data, silahkan isi formulir pendaftaran sesuai data pribadi anda..

1. Nama : Isi dengan nama depan dan nama belakang anda.
2. Pilih nama pengguna anda : Isikan alamat email yang anda inginkan (nama email harus belum digunakan orang lain).
3. Buat sandi : Isi dengan password yang anda ingikan.
4. Konfirmasi sandi anda : Masukkan ulang password anda.
5. Tanggal lahir : Silahkan isi dengan tanggal lahir anda.
6. Gender : Pilih jenis kelamin anda.
7. Ponsel : Isikan dengan nomor telepon anda.
8. Alamat email anda saat ini : Masukkan alamat email lain (masukkan jika ada). Bisa anda kosongi.
9. Lokasi : Isi dengan lokasi negara tempat anda tinggal.
10. Centang dua persyaratan dari google tersebut...
11. Klik tombol LANGKAH BERIKUTNYA.

• Setelah anda mengisi formulir pendaftaran, anda akan dibawa ke halaman verifikasi akun, klik Lanjutkan..

• Anda akan diberi kode verifikasi yang dikirim oleh google secara otomatis ke nomor telepon yang anda isikan tadi. Kemudian masukkan angka verifikasi ke dalam kotak yang tersedia. Jika sudah, silahkan klik Verifikasi.

• Anda akan dibawa ke halaman Profil, langkah selanjutnya adalah menambahkan foto profil. Jika anda sudah punya silahkan ditambahkan dengan mengklik "Menambahkan Foto Profil". Jika sudah, klik saja Langkah berikutnya..

• Jika semua langkah diatas sudah anda lakukan dengan benar, akan ada ucapan sambutan dari Google. Klik Lanjutkan ke Gmail.

• Anda akan langsung dibawa ke halaman muka Gmail. Google akan langsung memberikan 4 pesan ke inbox email anda.

Sampai disini akun Gmail anda sudah jadi, silahkan anda manfaatkan fitur-fitur yang sudah disediakan oleh produk google gmail ini. Atau.. Jika anda tidak atau kurang mengerti dengan tutorial yang saya tuliskan diatas, anda juga bisa mempelajari cara membuat email melalui video dari youtube berikut ini...

Setelah anda membuat email, jika anda tertarik dengan blog dan ingin sekali punya blog, anda bisa ikuti juga tutorial Cara membuat blog Di blogger. Semoga artikel ini bisa membantu anda dan terima kasih sudah mau berkunjung.

Read more »

Cara Membuat Email Dengan Domain Sendiri

Artikel kali ini mengenai cara membuat email dengan domain sendiri dengan mudah. Jadi email anda nanti akan seperti zakaria@nesabamedia.com. Kenapa memiliki email dengan domain sendiri itu penting? Dengan menggunakan email dengan domain sendiri akan terlihat lebih profesional terutama untuk keperluan bisnis online.

Disini saya tidak menggunakan Cpanel atau membuat email server sendiri karena beberapa kasus malah memberatkan resource hosting yang anda gunakan. Dalam tutorial kali ini kita menggunakan layanan gratis untuk membuat email dengan domain sendiri, bukan layanan premium seperti Google Apps yang penggunanya diharuskan membayarnya setiap bulan.

Untuk ukuran perusahaan, mungkin menggunan layanan seperti Google Apps sangat disarankan karena fiturnya lengkap dan storagenya lebih besar. Tapi kalau yang gratis dengan fitur yang sudah lebih dari cukup dan hanya membutuh beberapa user saja, maka rekomendasi saya jatuh pada layanan email hosting dari Zoho. Dengan menggunakan email hosting gratis dari zoho, kita bisa membuat email dengan domain sendiri, maksimal 25 pengguna dan masing-masing pengguna mendapat jatah 5GB storage.

Cara membuat email dengan domain sendiri

1. Pertama daftar terlebih dahulu disini.

2. Masukkan email dan password anda. Jika sudah, pilih SIGN UP FOR FREE.

3. Jangan lupa untuk cek inbox email anda, dan klik email verifikasi yang dikirim oleh Zoho.

4. Selanjutnya pilih Mail seperti yang telah saya beri panah.

5. Anda akan disuruh memasukkan nomor ponsel untuk keperluan verifikasi. Masukkan nomor ponsel anda yang masih aktif beserta password akun zoho anda. Kemudian pilih Send code.

6. Anda akan menerima sms yang berisi kode verifikasi. Masukkan kode tersebut, lalu pilih Verify Code.

7. Nomor ponsel anda berhasil diverifikasi. Pilih Continue untuk melanjutkan.

8. Berhubung kita ingin menggunakan layanan email hosting gratis, jadi pilih yang Lite.

9. Masukkan alamat domain anda, lalu pilih Continue.

10. Disini kita diharuskan untuk melakukan verifikasi kepemilikan domain. Pada Select your domain’s DNS Manager (DNS Hosting provider) from the list, pilih Others.

11. Ada tiga metode yang bisa anda pilih yaitu dengan memasukkan CNAME atau TXT record pada registrar tempat anda membeli domain atau bisa juga mengupload file HTML yang diberikan Zoho. Pada contoh kali ini, saya memilih memasukkan CNAME record untuk verifikasi kepemilikan domain.

12. Untuk menambahkan CNAME atau TXT record disetiap masing-masing registrar tidak jauh berbeda satu sama lain. Tidak mungkin saya menjelaskannya semua,mulai dari Namecheap, Godaddy, Name, IDWebhost, Rumahweb dan lain sebagainya.

Setting CNAME records di Cloudflare

Domain saya terdaftar di Namecheap, tapi saya perlu mengatur CNAME recordnya ke pengaturan DNS di Cloudflare.

Loh kok bisa? Blog saya menggunakan CDN dari Cloudflare untuk meringankan kinerja, mempercepat loading situs dan memanajemen trafik pada blog saya. Nah ketika kita menggunakan layanan CDN dari Cloudflare, kita diharuskan mengganti default nameserver dari registrar tempat anda membeli domain menjadi nameserver yang telah diberi oleh Cloudflare.

Jadi misalkan anda tidak menggunakan Cloudflare, anda bisa langsung menambahkan CNAME record di hosting (dari Cpanel) atau langsung dari registrar tempat anda membeli domain.

1. Seperti yang sudah saya jelaskan, saya perlu login di Cloudflare untuk mengatur CNAME recordnya. Kunjungi link berikut ini untuk login.

2. Kemudian pilih DNS seperti yang saya beri tanda panah.

3. Masukkan CNAME record seperti pada gambar dibawah ini. Jika sudah, pilih Add Record.

4. CNAME record yang sudah ditambahkan tampilannya kurang lebih seperti gambar dibawah.

5. Kemudian kembali ke halaman verifikasi kepemilikan domain. Pilih Proceed to CNAME Verification.

6. Jika anda mendapat notifikasi seperti ini berarti anda sudah berhasil menambahkan CNAME recordnya. Setelah itu, pilih Verify Now untuk melanjutkan.

7. Pada halaman ini, anda dapat menambahkan pengguna utama yang anda inginkan. Sebagai contoh, saya ingin membuat email dengan alamat admin@nesabamedia.com. Maka saya cukup memasukkan admin saja, kemudian pilih Create Account.

8. Pada halaman Add Users, anda dapat menambahkan pengguna lain, maksimal 25 pengguna. Saya pribadi satu pengguna saja sudah cukup, jika anda ingin menambahkan pengguna lain, pilih Proceed to Add Users.

9. Masukkan nama, email ID serta password pada kolom yang telah disediakan. Mungkin anda bingung, email yang telah kita buat tadi (admin@nesabamedia.com) kok tidak ada kolom memasukkan password. Untuk password dari email tersebut sama dengan yang anda masukkan waktu awal registrasi di Zoho (Langkah nomor 2). Jika sudah selesai diisi, pilih OK.

10. Pada halaman Create Groups, anda bisa membuat akun grup di halaman ini. Saya rasa ini tidak begitu penting, jadi saya pilih SKIP.

11. Untuk menerima email, kita harus menambahkan MX Records di hosting atau registrar tempat anda membeli domain. Seperti yang sudah saya jelaskan, berhubung saya menggunakan Cloudflare, saya juga harus menambahkan MX Records ini di pengaturan DNS Cloudflare.

12. Masih pada halaman DNS di Cloudflare. Masukkan 2 MX records yang dibutuhkan, kemudian pilih Add Records untuk menambahkannya.

13. Jika sudah ditambahkannya, hasilnya kurang lebih seperti gambar dibawah ini.

14. Kembali ke halaman konfigurasi MX Records tadi, dan pilih MX Lookup untuk memastikan bahwa konfigurasi MX records yang anda masukkan tadi benar.

15. Tunggu beberapa menit, maka anda akan mendapat notifikasi seperti dibawah ini yang menandakan bahwa konfigurasi MX Records yang anda masukkan sudah benar. Setelah itu pilih OK, kemudian pilih Next.

16. Untuk mencegah spam email dari pengguna dari layanan email lain dan keperluan autentikasi, anda bisa menambahkan SPF dan DKIM records. Tambahkan SPF dan DKIM records ini melalui pengaturan DNS di Cloudflare. Cara menambahkannya sama seperti ketika anda menambahkan CNAME dan MX records. Berhubung step ini opsional jadi sengaja saya skip. Sampai disini, anda sudah bisa menggunakan email dengan domain anda sendiri untuk keperluan mengirim atau menerima email. 

Untuk halaman SPF/ DKIM, Email Migration, Mail Client Configuration sampai Mobile Acces sengaja saya skip karena termasuk opsional. Anda bisa mengaturnya sendiri jika anda anggap perlu karena langkah-langkahnya sangat mudah.

Masuk ke inbox email anda

Anda sekarang sudah memiliki email dengan domain anda sendiri. Nah untuk login ke inbox email anda, simak langkah-langkah berikut ini:

1. Klik link berikut ini untuk login ke inbox email anda.

2. Setelah itu, masukkan email dan password email anda.

3. Nah berikut ini merupakan tampilan inbox email anda.

Itulah panduan cara membuat email dengan domain sendiri dengan mudah dan gratis. Seperti yang telah saya katakan sebelumnya  bahwa memiliki email dengan domains sendiri akan terlihat lebih profesional dan sedikit keren, hehehe.

Misalkan anda menemukan hambatan atau ada step yang belum anda mengerti, silakan tanya melalui kotak komentar yang telah disediakan dibawah. Saya akan berusaha menjawabnya sesegera mungkin. Semoga bermanfaat dan sampai jumpa!

Read more »

Belajar 2 Cara Membuat Blog di Blogger

Jika anda membaca artikel berikut ini, mungkin anda merupakan salah satu orang yang sedang mencari tutorial cara membuat blog dengan mudah dan gak pakek ribet.

Melalui artikel berikut, saya akan berbagi panduan lengkap cara membuat blog yang cocok sekali bagi pemula. Tenang saja, meskipun tulisan saya ini seperti cakar ayam, saya akan berusaha menyajikannya sebaik dan sedetail mungkin.

Terdapat puluhan platform untuk membuat blog. Maka dari itu, terlebih dahulu anda harus memutuskan platform mana yang ingin anda gunakan, entah itu wordpress, blogger, tumblr, jimdo, webs, squidoo, atau lain sebagainya.

Kalau menurut saya, platform yang paling populer, mudah, dan cocok sekali bagi pemula adalah blogger. Lalu bagaimana langkah-langkah cara membuat blog di blogger? Yuuk simak langkah-langkahnya sebagai berikut :

Langkah-langkah cara membuat blog

1. Pertama-tama buka situs blogger.com. Kemudian klik CREATE YOUR BLOG untuk membuat blog baru.

2. Masukkan alamat gmail anda. Jika anda belum punya akan gmail, silakan baca artikel saya mengenai cara membuat email di gmail. Setelah itu, pilih BERIKUTNYA.

3. Kemudian masukkan password akun gmail anda dengan benar, lalu pilih BERIKUTNYA.

4. Terlebih dahulu anda harus memilih profil mana yang akan anda gunakan. Anda bisa menggunakan profil Google+ atau profil Blogger biasa. Dalam tutorial ini saya menyarankan menggunakan profil Google+ saja. Maka dari itu, pilih Buat profil Google+.

5. Form profil akan terisi secara otomotis. Jika ada yang perlu diubah, entah itu nama, jenis kelamin atau tanggal lahir, anda bisa mengeditnya disini. Jika sudah selesai mengedit, silakan pilih CREATE PROFILE.

6. Pada tahap ini anda bisa menambahkan foto profil anda. Anda bisa menambahkan atau mengganti foto profil nanti, jadi pilih SKIP.

7. Profil Google+ anda sudah berhasil dibuat. Setelah itu, pilih Lanjutkan ke Blogger.

8. Untuk membuat blog baru, pilih tombol BUAT BLOG BARU yang terletak di samping kanan. Lebih jelasnya, anda bisa melihat gambar dibawah ini.

9. Anda akan melihat tampilan seperti berikut ini. Silakan isi sesuai putunjuk nomor dibawah ini :

• Nomor 1 : Isi dengan judul blog baru anda, misal Blog Seputar Teknologi Terkini.
• Nomor 2 : Isi dengan alamat url pada blog anda, misal nesabatekno.blogspot.com. Jika ada tanda centang disampingnya berarti alamat blog tersebut tersedia.
• Nomor 3 : Pilih template yang anda sukai untuk blog baru anda.

12. Setelah itu, pilih Buat blog!
13. Selamat blog baru anda selesai dibuat. Tapi jangan keburu kabur dulu, yuk sekalian belajar juga mengenai menu-menu yang terdapat pada blogger, bagaimana sih cara menulis konten di blogger dan lain sebagainya.

Mengenal lebih jauh menu-menu pada Blogger

Terdapat beberapa menu dan tombol pada blogger yang perlu anda ketahui. Diantaranya sebagai berikut :

• Pos: menampilkan semua pos yang terdapat pada blog anda, pos yang sudah diterbitkan dan yang masih berbentuk draft. Dalam menu ini, anda juga bisa menghapus beberapa pos sekaligus dengan cepat.
• Statistik: menampilkan informasi statiska pada blog anda, seperti jumlah penayangan hari ini, kemarin, dan bulan lalu. Selain itu, pada menu ini juga menampilkan informasi mengenai bagaimana pengunjung menemukan blog anda dan lain sebagainya.
• Komentar: menampilkan komentar yang telah diterbitkan, komentar yang masih menunggu moderasi, dan komentar yang tergolong spam.
• Kampanye: menampilkan menu seputar Adwords. Anda bisa mempromosikan blog anda dengan Adwords ini, tetapi tentu saja ini tidak gratis.
• Laman: menampilkan jumlah laman yang terdapat pada blog anda, laman yang masih berbentuk draft, dan laman yang sudah diterbitkan.
• Tata Letak: disini anda bisa kustomisasi tampilan atau menambahkan widget (gadget) pada blog anda.
• Tema: menampilkan pengaturan pada template blog anda. Untuk mengedit, mengganti template blog anda, dan lain sebagainya bisa anda lakukan disini.
• Setelan: menampilkan pengaturan lanjutan pada blog anda, seperti pengaturan dasar, pos dan komentar dan lain sebagainya bisa anda lakukan disini.
• Daftar Bacaan: menampilkan postingan terbaru dari blog-blog yang anda ikuti.
• Bantuan: menampilkan beberapa artikel bantuan mengenai bagaimana cara menggunakan blog di Blogger.

Bagaimana cara menulis/ posting konten di Blogger?

Untuk menulis konten atau yang sering di sebut dengan posting sangatlah mudah, malahan mudah banget. Simak langkah-langkahnya sebagai berikut :
1. Klik tombol berbentuk pensil.

2. Sebelum memulai untuk menulis konten, terdapat beberapa menu, tombol, atau navigasi yang perlu anda pahami sebagai berikut :

• Nomor 1 : Judul konten anda.
• Nomor 2 : Deretan tombol yang berguna untuk mempublikasikan, menyimpan, atau mempratinjau konten anda.
• Nomor 3 : Terdapat 2 mode penulisan konten yang terdapat pada blogger, diantaranya mode Compose dan mode HTML. Secara default, mode penulisan konten menggunakan mode Compose. Jika anda awam dalam HTML, saya sarankan menggunakan mode Compose saja.
• Nomor 4 : Menu formatting toolbar yang digunakan untuk pengolahan teks pada konten anda. Fungsi tool-tool ini tidak jauh berbeda dengan yang terdapat pada Ms. Word.
• Nomor 5 : Beberapa menu pengaturan pada konten anda. Seperti memberikan label/ kategori, tautan permanen pada konten anda dan lain sebagainya.
• Nomor 6 : Isi konten anda.

3. Jika konten anda sudah siap dipublikasikan, silakan klik tombol Publikasikan.

Templatenya kurang nggreget mas? Bisa diganti ndak?

Memang sih template default blogger kurang gimana gitu, bukan jelek loh, hahaha. Untuk mengganti template blog anda agar lebih menarik, silakan simak langkah-langkahnya sebagai berikut :
1. Silakan download dulu template yang ingin digunakan pada blog anda. Anda bisa mencarinya di Btemplate, disana ada ribuan template yang bisa anda gunakan.
2. Setelah itu, masuk ke menu dashboard blog anda dan pilih Tema.
3. Pilih Backup / Pulihkan.

4. Klik tombol Choose File untuk mengupload template yang anda inginkan.

5. Terakhir, klik tombol Upload. Perlu diingat yah kalau templatenya wajib menggunakan format .xml

Penutup

Semoga dengan coretan sederhana saya ini, anda dapat membuat blog sendiri dengan mudah.

Jika anda mengalami kesulitan mengenai cara membuat blog, jangan sungkan yah untuk bertanya melalui kotak komentar yang telah disediakan. Sampai jumpa dan terima kasih banyak sudah membaca artikel pendek saya ini.

Read more »