Cara Simpel Agar Artikel Mudah Diindeks Dengan Google Webmaster Tools

COPAD | Cara Simpel Agar Artikel Mudah Diindeks Dengan Google Webmaster Tools - Halo sobat COPAD, pada artikel kali ini mimin akan memberikan sebuah tutorial tentang penggunaan dari Google Webmaster Tools (GWT) atau yang biasa juga disebut dengan Google Search Console (GSC). Tapi sebelum itu, mari kita kenali dulu apa sih GWT atau GSC ini.

Apa itu Google Webmaster Tools (GWT)?

Google Webmaster Tools (GWT) adalah salah satu alat dari Google yang memudahkan para blogger dalam pengindeksan artikel atau kontennya, agar artikel atau konten tersebut dapat tampil di halaman pertama lebih cepat dibanding para blogger yang tidak menggunakan Google Webmaster Tools atau Webmaster Tools lainnya.

• Baca: Cara mendaftarkan blog di Google Search Console

Selain fungsinya yang sebagai alat untuk mempermudah pengindeksan, Google Webmaster Tools juga membantu kita dalam menyelesaikan masalah URL atau link pada blog yang sudah tidak terpakai atau mengalami eror. Serta memberikan data-data yang akurat mengenai pengunjung dari blog kita.

• Baca: Cara Menghapus URL Pada Blog Yang Sudah Tidak Terpakai Atau Mengalami Eror

Sudah paham sedikit kan mengenai Google Webmaster Tools, sekarang mari kita simak langkah-langkah dalam penggunaan Google Webmaster Tools ini.

Berikut langkah-langkah dalam pengindeksan artikel  dan juga halaman pada blog menggunakan Google Webmaster Tools.

- Cara Pertama -

1. Log In ke Google Webmaster Tools atau langsung Klik Di Sini, kemudian pilih blog yang akan dimintai pengindeksan.

2. Selanjutnya, pilih Crawl/Perayapan lalu pilih Fetch as Google. Masukkan sebagian dari link artikel kalian pada kolom yang telah disediakan, karena di sana sudah disiapkan sebagian dari link kita.

Contoh: 

Link artikel saya, https://www.zonacopad.com/2018/08/cara-menghapus-url-pada-blog-yang-sudah.html, maka saya hanya tinggal memasukkan 2018/08/cara-menghapus-url-pada-blog-yang-sudah.html.

3. Setelah itu, pilih Fetch/Ambil kemudian klik Request indexing/Minta pengindeksan. Selesaikan captcha lalu pilih antara Crawl only this URL/Rayapi URL ini saja (untuk meminta pengindeksan hanya pada URL tersebut) atau Crawl this URL and its direct links/Rayapi URL ini dan link langsungnya (untuk meminta pengindeksan pada URL tersebut dan juga URL yang ada pada artikel seperti backlink).

4. Selesai. Kalian hanya tinggal menunggu beberapa hari hingga proses pengindeksan selesai. Untuk mengeceknya, kalian tinggal pilih Google Index /Indeks Google lalu pilih Index Status/Status Indeks.

Catatan:

Untuk meminta pengindeksan pada halaman utama blog cukup dengan langsung memilih Fetch/Ambil tanpa memasukkan tambahan URL apapun.

- Cara Kedua -

1. Masih pada menu Crawl/Perayapan, pilih Sitemaps/Peta situs kemudian pilih Add/Test Sitemap (Tambahkan/Uji Peta Situs). 

2. Selanjutnya, masukkan satu per satu kode di bawah lalu klik Submit/Kirim. Maksudnya, masukkan dulu kode pertama lalu klik Submit/Kirim, kemudian masukkan kode kedua lalu klik Submit/Kirim, dan begitu seterusnya.

• sitemap.xml

• feeds/posts/default?orderby=updated

• atom.xml

3. Selesai. Kalian hanya tinggal menunggu beberapa hari hingga proses pengindeksan selesai. Untuk mengeceknya, kalian tinggal pilih Google Index/Indeks Google lalu pilih Index Status/Status Indeks.

Catatan:

Setiap ingin melakukan Submit/Pengiriman ada baiknya untuk dites terlebih dahulu, untuk mengetahui apakah ada yang eror dengan blog kalian.

Akhir Kata

Sekian tutorial untuk artikel Cara Simpel Agar Artikel Mudah Diindeks Dengan Google Webmaster Tools kali ini, semoga yang mimin berikan dapat bermanfaat. Terus kunjungi blog COPAD atau langsung Subscribe untuk mendapatkan artikel baru dan menarik lainnya secara gratis. Atas perhatiannya mimin ucapkan terima kasih dan mohon maaf atas segala keterbatasan serta kesalahan dalam penulisan.

Cara Menghapus URL Pada Blog Yang Sudah Tidak Terpakai Atau Mengalami Eror

COPAD | Cara Menghapus URL Yang Sudah Tidak Terpakai Atau Mengalami Eror - Pada artikel kali ini, mimin akan membahas tentang tutorial penghapusan URL yang sudah tidak terpakai lagi atau mengalami eror sesuai dengan judul dan gambar di atas yah, hehe... Tapi sebelum ke langkah-langkahnya, memangnya untuk apa sih penghapusan URL yang seperti ini? Apa saja dampaknya? Yuk kita simak pada uraian di bawah.

Dampak URL yang sudah tidak terpakai atau mengalami eror.

Berikut dampak dari URL yang sudah tidak terpakai atau mengalami eror.

1. Reputasi blog dalam dunia online akan menurun.
2. Blog dan artikel akan diabaikan oleh mesin telusur.
3. Trafik atau jumlah pengunjung akan menurun.
4. Jika benar-benar sial, dapat menyebabkan Akun Adsen dibanned.

Nah, ngeri banget kan dampaknya? Untuk penjelasan lengkap mengenai dampak-dampak dari URL yang eror ini bisa kalian cari di Google. Selanjutnya, mari kita simak langkah-langkah dalam menghapus URL pada blog yang sudah tidak terpakai atau mengalami eror.

• Baca: Cara Simpel Agar Artikel Mudah Diindeks Dengan Google Webmaster Tools

Berikut langkah-langkah dalam menghapus URL pada blog yang sudah tidak terpakai atau mengalami eror.

1. Copy URL yang mengalami masalah seperti sudah tidak terpakai, eror, atau memang sengaja untuk dihapus demi kepentingan pribadi.

2. Selanjutnya, Log In ke Google Webmaster Tools atau langsung Klik Di Sini, kemudian pilih blog yang URL-nya akan dihapus.

3. Dari Dashboard pilih Google Index lalu pilih Remove URLs.

4. Pada Remove URLs pilih Temporarity hide lalu masukkan URL yang akan dihapus kemudian klik Continue.

5. Setelah itu, kalian akan dialihkan ke halaman baru untuk memilih apakah ingin penghapusan permanen tanpa sisa (pilihan nomor satu), penghapusan hanya dalam cache (pilihan nomor 2), atau penghapusan sementara (pilihan nomor 3).

6. Setelah memilih, klik Submit Request.

7. Selesai. Kalian hanya tinggal menunggu proses penghapusan yang biasanya memakan waktu beberapa jam.

Catatan:
Kalian juga bisa mengecek URL mana saja yang eror pada blog kalian dengan mengunjungi situs berikut, Klik Di Sini. Caranya, cukup dengan memasukkan link blog pada kolom pencarian. Dan jika blog kalian tidak memiliki domain www hapus tulisan www pada kolom pencarian lalu ganti dengan link blog kalian yang sebenarnya. Contohnya, https://copadzone.blogspot.com atau http://copadzone.blogspot.com. Ingat, https dan http merupakan protokol yang berbeda.

Akhir Kata
Sekian tutorial untuk artikel Cara Menghapus URL Pada Blog Yang Sudah Tidak Terpakai Atau Mengalami Eror kali ini, semoga yang mimin berikan dapat bermanfaat. Terus kunjungi blog COPAD atau langsung Subscribe untuk berlangganan artikel terbaru dan bermanfaat lainnya secara gratis. Untuk perhatiannya mimin ucapkan terima kasih dan mohon maaf untuk segala keterbatasan serta kesalahan dalam penulisan ataupun kata-kata yang kurang berkenan.

7+ Hal Yang Harus Kamu Ketahui Agar Dapat Mendaftarkan Blog Di Google AdSense

COPAD | 7+ Hal Yang Harus Kamu Ketahui Agar Dapat Mendaftarkan Blog Di Google AdSense - Google AdSense atau yang biasa dipanggil adsen ini memang merupakan primadona bagi para blogger maupun youtuber karena penghasilannya yang lumayan besar dan terbukti membayar penggunanya. 

Google AdSense merupakan layanan periklanan oleh Google yang berfungsi untuk menampilkan iklan di blog, youtube, aplikasi, ataupun tempat lainnya. Dan jika seseorang mengkliknya atau hanya sekedar melihat maka akan memberikan penghasilan/pendapatan berupa uang bagi blogger maupun vlogger. Pendapatan itu nantinya dapat ditarik secara tunai melalui rekening bank ataupun kartu kredit jika minimal penarikannya sudah tercapai, misalnya $100 atau sekitar Rp.1.449.065 jika dirupiahkan.

Namun untuk mendapatkan itu semua diperlukan suatu proses yang terbilang lama dan juga tentu sulit untuk diraih. Berikut adalah hal-hal yang harus kamu ketahui agar dapat mendaftarkan blog kamu di Google AdSense juga merupakan syarat-syarat agar dapat memenuhi kriteria pendaftaran Google AdSense di blog secara garis besarnya.

1. Memiliki halaman dan menu navigasi di blog.
Menu navigasi merupakan menu-menu yang memudahkan pengunjung untuk mengakses suatu blog. Contohnya seperti tab menu bar / menu dropdown, menu navigasi di atas header, sidebar, maupun footer serta menu navigasi halaman dengan menggunakan angka seperti yang tertera pada halaman utama blog di bagian bawah untuk berpindah dari halaman satu ke halaman lainnya. 

Menu dan halaman navigasi itu seperti kontak/contact, privacy policy, sitemap, about, widget label/tag, widget halaman, widget profil blogger, widget search dan yang sejenisnya.

2. Memiliki artikel yang berkualitas, unik, dan menarik, bukan artikel terlarang.
Memiliki artikel yang tergolong biasa-biasa saja tentu tidak dilarang, namun program adsen akan memberikan poin lebih kepada blog yang memiliki artikel berkualitas bukan hasil copas apalagi yang memiliki hak cipta, unik, dan tentunya menarik. Hal ini akan memudahkan blog kita dalam proses pengajuan adsen kelak dan rentan untuk diterima.

Perlu diingat juga bahwa adsen tidak akan menampilkan iklannya bahkan menerima blog yang berisi artikel dan konten terlarang seperti artikel tentang senjata, pembunuhan, pelecehan, pornografi, narkoba, dan sejenisnya.

3. Blog setidaknya aktif selama 6 bulan.
Meski sebenarnya hal ini hanya berlaku di beberapa lokasi di dunia, namun tidak sedikit dari beberapa blog yang baru aktif beberapa hari sudah dapat mendaftar di adsen entah apa alasannya. Berdasarkan pengalaman mimin sendiri, mimin juga pernah mengalami hal yang sama. Seperti blog yang sudah mimin buat yang usianya bahkan belum sebulan namun sudah dapat didaftarkan di adsen padahal blog itu sendiri merupakan blog demo / blog tes.

4. Usia blogger minimal 18 tahun ke atas.
Usia 18 tahun ke atas memang sudah dianggap dewasa oleh orang-orang dan dianggap sudah memiliki pemikiran yang matang serta rasa tanggung jawab. Sehingga, program adsen menetapkan peraturan ini agar tidak diakses oleh orang-orang yang memiliki sifat dan sikap yang bertolak belakang dengan yang telah mimin jelaskan sebelumnya.

Meski begitu, tidak sedikit dari para blogger yang memanipulasi umurnya pada akun Googlenya. Yah, walau memang sebenarnya umur bukan merupakan batas bagi orang yang ingin menuntut ilmu.

5. Memiliki tampilan blog yang rapih dan sudah bukan merupakan sebuah kerangka.
Tampilan blog yang rapih akan menjadi poin tambahan lain ketika kita akan melakukan pengajuan pada Google AdSense sehingga dapat diterima dengan mudah. Kamu dapat merapihkan sekaligus memperindah tampilan blog dengan cara otomatis seperti mendownload tema/template blog, walau setelah didownload kamu masih harus tetap mendesainnya ulang sesuai data diri dan blog kamu. Atau dengan cara manual seperti mendesain blog sendiri sesuai keinginan pada menu Tata Letak/Layout dan Tema/Theme.

Perlu diingat, ketika kamu sedang dalam proses pengajuan tahap 2 Google AdSense, jangan sekali-kali untuk menyentuh / mendesain / mengedit tampilan ataupun bagian dari blog kamu karena program adsen akan menganggap blog kamu masih sebagai sebuah kerangka dan akhirnya gagal dalam pengajuan tersebut. Maka dari itu, sebelum melakukan pengajuan, perbaiki seluruh bagian dan tampilan blog hingga selesai.

6. Memiliki jumlah pengunjung / trafik yang memadai dan asli.
Jumlah pengunjung juga berpengaruh dalam pemenuhan syarat dari Google AdSense, jumlah pengunjung yang banyak dan asli dapat membuat blog kamu mudah untuk diterima. Contoh dari pengunjung palsu seperti para blogger yang yang terus-menerus melihat artikelnya sendiri. Melihat artikel sendiri untuk diperiksa apakah sudah bagus atau tidak sebaiknya dilakukan pada lembar kerja dengan mengklik Pratinjau/Preview sebelum dipublikasikan agar tidak mempengaruhi data dari pengunjung blog.

Perlu diingat juga bahwa menggunakan situs Traffic Exchange merupakan pelanggaran kebijakan dari program adsen karena dianggap juga sebagai pengunjung palsu serta tidak aman untuk blog, rentan untuk di hack dan dimasuki virus.

7. Blog harus memiliki maksimal 1 niche (topik pembahasan).
Memiliki niche dalam suatu blog memang sangat penting, karena niche inilah yang akan menggambarkan seperti apa dan tujuan apa dari blog yang akan kita bangun nantinya. Memiliki lebih dari satu niche atau yang biasa disebut blog gado-gado tentu akan sangat merugikan, seperti rentannya blog untuk tidak diterima oleh program adsen. 

Hal ini dikarenakan blog dianggap tidak jelas asal-usulnya serta tujuannya dan dapat meresahkan pengunjung. Maka dari itu, sebelum membuat blog lebih baik pertimbangkan terlebih dahulu niche apa yang akan digunakan, seperti tentang dunia teknologi, tentang kesehatan & kecantikan, atau bisa juga tentang travel, dan masih banyak lagi jenis niche lainnya.

8. Memiliki nama domain untuk blog.
Akun adsen dibagi menjadi dua jenis yaitu akun hosted dan akun non hosted. Akun hosted adalah akun adsen yang terbilang mudah untuk didapatkan, pendaftarannya pun cukup mudah dan prosesnya tidak memakan waktu terlalu lama. Walau begitu, untuk beberapa blog terkadang membutuhkan waktu lebih lama dari yang biasanya. Hal ini tergantung dari pemenuhan syarat adsen dan kelayakan blog untuk ditampilkan iklan. 

Namun dengan akun hosted ini, ketika ingin menampilkan atau memasang iklan baru yang akan muncul hanyalah tempat / kotak kosong berwarna putih (blank) di blog. Hal ini dikarenakan blog masih perlu ditinjau untuk ditampilkan iklan, dan terkadang membutuhkan waktu yang sangat lama bahkan bisa sampai berminggu-minggu agar iklan bisa tampil.

Baca: Cara Mendaftarkan Blog Di Google AdSense Untuk Akun Hosted

Sedangkan untuk akun non hosted adalah akun adsen yang cukup sulit untuk didapatkan baik dalam pendaftarannya maupun prosesnya. Untuk mendapatkan akun ini kamu memerlukan akun adsen hosted terebih dahulu, baru setelah itu mengupgradenya menjadi akun non hosted dan harus memiliki nama domain seperti .com / .co.id / .net / dan lainnya. Penjelasan lengkap mengenai domain Baca Di Sini.

Keistimewaan dari akun non hosted ini adalah iklan dapat ditampilkan di mana saja seperti di blog, wordpress, youtube, aplikasi dan lain sebagainya selama tidak bertolak belakang dengan kebijakan program adsen. Dan ketika melakukan pemasangan, iklan bisa langsung tampil namun terkadang butuh beberapa menit juga. Untuk penjelasan lengkap mengenai akun hosted dan akun non hosted bisa kalian cari di Google.

9. Membutuhkan kesabaran dan juga keberuntungan.
Selama membangun sebuah blog diperlukan sebuah kesabaran dalam segala aspek, begitu juga nantinya ketika kamu melakukan pengajuan untuk pendaftaran adsen yang dalam prosesnya terbilang sangat lama, mulai dari berjam-jam, berhari-hari, bahkan sampai berbulan-bulan.

Selain kesabaran, diperlukan juga sebuah keberuntungan. Seperti yang mimin jelaskan sebelumnya, walau blog masih terbilang baru namun sudah dapat didaftarkan di adsen. Bukan hanya itu, banyak dari para blogger yang mengalami hal serupa bahkan dapat lebih cepat, baik dalam pendaftaran adsen maupun dalam prosesnya.

Itulah hal-hal yang menurut mimin secara garis besar harus kamu ketahui agar dapat mendaftarkan blog kamu di Google AdSense dan juga merupakan syarat-syaratnya, mohon maaf bila terdapat kesalahan kata dan atas perhatiannya mimin ucapkan terima kasih. Terus kunjungi blog COPAD atau langsung Subscribe agar menjadi orang pertama yang mendapatkan artikel terbaru dan menarik lainnya.

Cara Membuat Halaman Kontak / Contact Us Sederhana Di Blog

COPAD | Cara Membuat Halaman Kontak / Contact Us Sederhana Di Blog - Halo sobat COPAD, pada artikel kali ini mimin akan membahas mengenai pembuatan formulir kontak yang sederhana. Halaman formulir kontak memang cukup dibutuhkan oleh kita para blogger maupun oleh para pengunjung. Karena dengan formulir kontak ini, komunikasi antar blogger dan pengunjung dapat terhubung melalui email. 

Jadi, ketika seorang pengunjung menemukan atau mendapatkan masalah saat mengakses blog kita, si pengunjung bisa menghubungi kita secara langsung lewat halaman formulir kontak ini nantinya. Baiklah kalau begitu, berikut langkah-langkah pembuatannya.

1. Silahkan Log In ke blog agan terlebih dahulu, kemudian pilih menu Halaman / Pages lalu pilih Halaman Baru / New Page.

2. Masukkan judul halaman seperi Contact Us, Contact Me, Hubungi Kami, ataupun yang sejenisnya. Setelah itu, pilih lembar kerja HTML dan paste-kan kode berikut. Jangan lupa untuk mengganti kode berwarna merah dengan alamat blog kalian.

<script>
var blogId = 'ISI ALAMAT BLOG DI SINI';
var contactFormMessageSendingMsg ='Mengirim...';
var contactFormMessageSentMsg = 'Pesan sudah dikirim. Semoga Anda bahagia.';
var contactFormMessageNotSentMsg = 'Pesan tidak dapat dikirim. Coba lagi nanti.';
var contactFormEmptyMessageMsg = 'Bidang pesan harus diisi.';
var contactFormInvalidEmailMsg = 'Alamat email harus valid.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': contactFormMessageSendingMsg , 'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg , 'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg , 'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();
}
return true;
}
</script>
<div class="Form">
<form name="contact-form">
<p></p>
Nama
<br />
<input class="contact-form-name" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Email
<span style="font-weight: bolder;">*</span><br />
<input class="contact-form-email"style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Pesan
<span style='font-weight: bolder;'>*</span>
<br />
<textarea class="contact-form-email-message" style="max-width: 400px; width: 100%;" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" onclick="sendEmailMsg()" type="button" value="Kirim" />
<p></p>
<div style="max-width: 400px; text-align: center; width: 100%;">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>

Perhatian!
Jika kalian ingin meng-Copy kode-kode HTML seperti di atas lebih baik Copy lalu Paste-kan dulu di Notepad ataupun Microsoft Word.

3. Matikan komentar pembaca dengan mengklik Pilihan / Setting yang bersimbol gerigi. Ini merupakan pilihan opsional (tidak harus).

4. Langsung publikasikan tanpa mengutak-atik hal lainnya lagi.

5. Selesai. Kalian bisa mengecek hasilnya dengan melihat blog kalian.

Catatan:
Jika kalian ingin menyampaikan pesan kepada pengunjung seperti screenshot di atas, silahkan tuliskan terlebih dulu pesannya pada lembar kerja Compose, baru setelah itu pilih lembar kerja HTML kemudian paste kode di atas di bagian paling bawah kode yang telah tertera.

Akhir Kata
Sekian untuk tutorial pada artikel Cara Membuat Halaman Kontak / Contact Us Sederhana Di Blog kali ini, semoga yang mimin berikan dapat bermanfaat. Terus kunjungi blog COPAD atau langsung Subscribe untuk berlangganan artikel terbaru dan bermanfaat lainnya secara gratis. Untuk perhatiannya mimin ucapkan terima kasih dan mohon maaf untuk segala keterbatasan serta kesalahan dalam penulisan ataupun kata-kata yang kurang berkenan.

Cara Simple Menambahkan Tombol Back To Top Pada Blog

COPAD | Cara Simple Menambahkan Tombol Back To Top Pada Blog - Pada artikel kali ini, mimin akan memberikan tutorial mengenai pembuatan Tombol Back to Top yang akan sangat berguna bagi kita para blogger dan juga bagi para pengunjung. Tombol Back to Top ini akan memudahkan pengunjung agar dapat kembali ke bagian atas dari blog kita dalam satu klik, tanpa harus menscroll ataupun mengusap layar smartphone lagi. Apalagi jika kita para blogger memiliki sebuah tulisan artikel yang sangat panjang. Tanpa basa-basi lagi, berikut langkah-langkahnya.

1. Pastikan terlebih dahulu pada template blog agan sudah terdapat kode jquery. Dengan cara, masuk ke blog lalu klik Tema / Theme kemudian klik Edit HTML. Letakkan kursor di salah satu tempat di mana saja pada kolom kode HTML yang ada lalu tekan Ctrl + F pada keyboard. Selanjutnya, ketik jquery pada kolom pencarian lalu tekan Enter. Contoh kodenya sebagai berikut.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>

Jika kode tersebut tidak ditemukan, silahkan copy kode tersebut kemudian paste di atas kode </head>. Cara menemukan kode </head> sama dengan langkah pada nomor satu mulai dari letakkan kursor dan seterusnya. Jangan lupa untuk menyimpan perubahan.

2. Selanjutnya, klik menu Tata Letak / Layout kemudian tambahkan gadget HTML/Javascript. Copy kode di bawah lalu paste pada kolom gadget HTML tadi.

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 2em;
    right: 10px;
    text-decoration: none;
    padding: 1em;
    display: none;
    cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="https://dabuttonfactory.com/button.png?t=%E2%88%86&amp;f=Calibri-Bold&amp;ts=45&amp;tc=fff&amp;hp=14&amp;vp=5&amp;c=5&amp;bgt=gradient&amp;bgc=00f0ff&amp;ebgc=5f5fed" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
    var offset = 220;
    var duration = 500;
    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('.mbw-back-to-top').fadeIn(duration);
        } else { //www.mybloggersworld.com
            jQuery('.mbw-back-to-top').fadeOut(duration);
        }
    }); 
  
    jQuery('.mbw-back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    })
});
</script>

Catatan:
Pada kode yang berwarna merah merupakan model atau desain dari tombol Back to Up nya nanti. Kalian dapat menggantinya sesuai dengan keinginan masing-masing atau kalian dapat membuatnya langsung dengan mengunjungi link berikut. Klik Di Sini.

Caranya:
1. Masuk ke situs lalu buat tombol.
2. Jika sudah selesai, klik </> Embed. Copy link pada kolom Link to the current button image kemudian parse kode tersebut pada link berikut. Klik Di Sini.
3. Selanjutnya, copy link yang telah diparse kemudian ganti dengan kode berwarna merah di atas.
4. Jangan lupa untuk menyimpan perubahan.

Perhatian!
Jika kalian ingin meng-Copy kode-kode html seperti di atas lebih baik Copy lalu Paste-kan dulu di Notepad ataupun Microsoft Word.

#Kode Alternatif Jika Kode Sebelumnya Tidak Berhasil

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >

var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src=" https://dabuttonfactory.com/button.png?t=+%E2%86%91+&amp;f=Calibri-Bold&amp;ts=33&amp;tc=fff&amp;hp=6&amp;vp=8&amp;c=5&amp;bgt=gradient&amp;bgc=ccc&amp;ebgc=000" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },

    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}

scrolltotop.init()
</script>

Berikut, beberapa desain tombol yang sudah mimin siapkan dan tinggal kalian yang mengganti kode berwarna merah tersebut.

#Style 1

https://dabuttonfactory.com/button.png?t=%E2%88%86&amp;f=Calibri-Bold&amp;ts=45&amp;tc=fff&amp;hp=14&amp;vp=5&amp;c=round&amp;bgt=gradient&amp;bgc=0ff&amp;ebgc=5f5fed

#Style 2

https://dabuttonfactory.com/button.png?t=%E2%88%86&amp;f=Calibri-Bold&amp;ts=45&amp;tc=fff&amp;hp=14&amp;vp=5&amp;c=round&amp;bgt=gradient&amp;bgc=f00&amp;ebgc=c00

#Style 3

https://dabuttonfactory.com/button.png?t=%E2%88%86&amp;f=Calibri-Bold&amp;ts=45&amp;tc=fff&amp;hp=14&amp;vp=5&amp;c=round&amp;bgt=gradient&amp;bgc=ccc&amp;ebgc=000

#Style 4

https://dabuttonfactory.com/button.png?t=%E2%88%86&amp;f=Calibri-Bold&amp;ts=45&amp;tc=fff&amp;hp=14&amp;vp=5&amp;c=5&amp;bgt=gradient&amp;bgc=00f0ff&amp;ebgc=5f5fed

#Style 5

https://dabuttonfactory.com/button.png?t=%E2%88%86&amp;f=Calibri-Bold&amp;ts=45&amp;tc=fff&amp;hp=14&amp;vp=5&amp;c=5&amp;bgt=gradient&amp;bgc=f90&amp;ebgc=f00

#Style 6

https://dabuttonfactory.com/button.png?t=%E2%88%86&amp;f=Calibri-Bold&amp;ts=45&amp;tc=fff&amp;hp=14&amp;vp=5&amp;c=5&amp;bgt=gradient&amp;bgc=ccc&amp;ebgc=444

#Style 7

https://dabuttonfactory.com/button.png?t=+%E2%86%91+&amp;f=Calibri-Bold&amp;ts=33&amp;tc=fff&amp;hp=6&amp;vp=8&amp;c=5&amp;bgt=gradient&amp;bgc=00fff4&amp;ebgc=0064ff

#Style 8

https://dabuttonfactory.com/button.png?t=+%E2%86%91+&amp;f=Calibri-Bold&amp;ts=33&amp;tc=fff&amp;hp=6&amp;vp=8&amp;c=5&amp;bgt=gradient&amp;bgc=ffb800&amp;ebgc=f00

#Style 9

https://dabuttonfactory.com/button.png?t=+%E2%86%91+&amp;f=Calibri-Bold&amp;ts=33&amp;tc=fff&amp;hp=6&amp;vp=8&amp;c=5&amp;bgt=gradient&amp;bgc=ccc&amp;ebgc=000

Akhir Kata
Sekian untuk tutorial pada artikel Cara Simple Menambahkan Tombol Back To Top Pada Blog kali ini, semoga yang mimin berikan dapat bermanfaat. Terus kunjungi blog COPAD atau langsung Subscribe untuk berlangganan artikel terbaru dan bermanfaat lainnya secara gratis. Untuk perhatiannya mimin ucapkan terima kasih dan mohon maaf untuk segala keterbatasan serta kesalahan dalam penulisan ataupun kata-kata yang kurang berkenan.