Tips & Trick

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. 

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

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.

COPAD | Cara Membuat Sitemap / Daftar Isi Sederhana Otomatis Pada Blog Sesuai Label – Baiklah, pada kesempatan kali ini mimin akan memberikan tutorial mengenai pembuatan Sitemap yang sangat bermanfaat bagi kita dan juga bagi pengunjung. Seperti, memudahkan kita untuk lolos dalam pengajuan tahap satu maupun tahap dua dalam pendaftaran Google Adsense, memudahkan artikel-artikel kita agar dapat diindeks oleh mesin pencarian seperti Google, serta dapat memudahkan pengunjung untuk mengakses seluruh bagian dari blog kita. Kalau begitu langsung saja, berikut langkah-langkahnya. 

Namun sebelum itu silahkan cek dan lihat sendiri contohnya pada blog berikut hanya untuk memastikan. DEMO.

1. Silahkan agan masuk ke blog terlebih dahulu, setelah itu klik Halaman / Pages lalu klik Halaman Baru / New Page dan pilih HTML.

2. Masukkan judul terlebih dahulu, seperti Sitemap atau Daftar Isi. Selanjutnya, copy kode HTML di bawah lalu paste-kan pada kolom HTML sebelumnya. 

Perhatian!
Jangan lupa untuk mengganti alamat blog mimin dengan alamat blog milik kalian. Biasanya alamat blog terletak di bagian bawah dari kode HTML berikut.

<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postLabels=new Array();var postRecent=new Array();function sitemaplabel(a){function b(){if(“entry” in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel==”alternate”){j=n.link[g].href;break}}var o=””;for(var g=0;g<n.link.length;g++){if(n.link[g].rel==”enclosure”){o=n.link[g].href;break}}var c=””;if(“category” in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(“;”);if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postUrl[ii]=j;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy=”titleasc”;sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2()}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d==”orderlabel”){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy=”orderlabel”;sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h=””;var e=”Post Title”;var c=”Category”;var j=””;if(postFilter!=””){j=”Click to view all”};if(l==postTitle.length)var b=document.getElementById(“toc”);b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write(“<p/>”);document.write(‘<p class=”labels”><a href=”/search/label/’+temp1+'”>’+temp1+”</a></p><ol>”);firsti=a;do{document.write(“<li>”);document.write(‘<a class=”post-titles” href=”‘+postUrl[a]+'”>’+postTitle[a]+”</a>”);if(postRecent[a]==true){document.write(‘ – <strong><span style=”color: rgb(255, 0, 0);”>Baru!</span></strong>’)}document.write(“</li>”);a=a+1}while(postLabels[a]==temp1);b=a;document.write(“</ol>”);sortPosts2(firsti,a);if(b>postTitle.length){break}}};
//]]>
</script>
<script src=”https://copadzone.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=sitemaplabel”></script>

3. Silahkan matikan komentar pembaca dengan mengklik simbol gerigi yang bertuliskan di sampingnya Pilihan / Options lalu pilih Jangan izinkan / Don’t Allow. Setelah itu klik Selesai. Ini merupakan pilihan opsional (tidak harus) namun saya sarankan.

4. Setelah semuanya selesai, langsung klik Publikasikan / Publish tanpa mengutak-atik hal lainnya lagi karena akan dapat menyebabkan eror pada kode tersebut. Contohnya, mengklik Compose lalu baru mempublikasikannya, ini akan menyebabkan eror pada kode HTML tersebut.

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

Dan jika eror, kalian hanya perlu menghapus halaman yang eror tersebut lalu menggantinya dengan halaman yang baru dengan mengikuti langkah-langkah yang sudah mimin jelaskan di atas. Ingat! Orang yang pintar tidak jatuh ke dalam lubang yang sama sebanyak dua kali.

Akhir Kata
Sekian untuk tutorial pada artikel Cara Membuat Sitemap / Daftar Isi Sederhana Otomatis Pada Blog Sesuai Label 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.

COPAD | Cara Mempersingkat Tulisan Artikel Dengan Menambahkan Read More Pada Blog Di Halaman Utama – Tentunya kita akan risih atau merasa terganggu dengan artikel yang bertumpuk di halaman utama pada blog kita. Apalagi jika tulisan kita begitu panjang dan tanpa tahu ujungnya, sehingga pengunjung tidak dapat membedakan atau kesulitan dalam membaca artikel yang kita posting dan akhirnya menimbulkan rasa tidak nyaman.

Maka dari itu, pada artikel kali ini mimin akan memberikan dua cara untuk mempersingkat tulisan artikel dengan menambahkan read more agar tampilan blog terlihat lebih rapih. Langsung simak saja, berikut penjelasannya.

1. Silahkan Log In ke blog kalian terlebih dahulu, lalu klik Tema / Theme kemudian klik Edit HTML.

2. Cari kode </head> dengan menaruh kursor di salah satu tempat pada kode yang ada, kemudian tekan Ctrl + F pada keyboard. Ketik </head> lalu tekan Enter, maka kode </head> nya akan ketemu. Setelah itu, paste kode berikut di atas kode </head>.

<script type=’text/javascript’>
no_thumb_sum = 500;
thumb_sum = 330;
thumb_h = 200;
thumb_w = 300;
</script>
<script type=’text/javascript’>
//<![CDATA[
function removeHtmlTag(t,e){if(-1!=t.indexOf(“<“)){for(var n=t.split(“<“),i=0;i<n.length;i++)-1!=n[i].indexOf(“>”)&&(n[i]=n[i].substring(n[i].indexOf(“>”)+1,n[i].length));t=n.join(“”)}for(e=e<t.length-1?e:t.length-2;” “!=t.charAt(e-1)&&-1!=t.indexOf(” “,e);)e++;return t=t.substring(0,e-1),t+”…”}function createSummaryAndThumb(t,e,n){var i=document.getElementById(t),m=””,r=i.getElementsByTagName(“img”),s=no_thumb_sum;r.length>=1&&(m='<span class=”posts-thumb” style=”float:left; margin-right: 10px;”><a href=”‘+e+'” title=”‘+n+'”><img src=”‘+r[0].src+'” width=”‘+thumb_w+’px” height=”‘+thumb_h+’px” /></a></span>’,s=thumb_sum);var g=m+”<div>”+removeHtmlTag(i.innerHTML,s)+”</div>”;i.innerHTML=g}
//]]>
</script>
<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’>
<style type=’text/css’>
.post-footer {display: none;}
.jump-link  {float: right; }
.jump-link a {text-decoration: none; }
</style>
</b:if>
</b:if>

Catatan:
Kalian juga dapat mengganti seberapa banyak karakter (kata) yang akan muncul pada satu artikel di menu utama blog dan juga dapat mengganti ukuran dari gambar yang akan tampil. Berikut penjelasan beserta keterangannya.

no_thumb_sum = 500; (Banyaknya karakter yang akan tampil pada menu utama blog jika artikel tanpa gambar)

thumb_sum = 330; (Banyaknya karakter yang akan tampil pada menu utama blog jika artikel memiliki gambar)

thumb_h = 200; (Lebar gambar yang akan tampil pada menu utama blog)

thumb_w = 300; (Tinggi gambar yang akan tampil pada menu utama blog)

Sebagai catatan lain, perubahan ini tidak akan mempengaruhi artikel aslinya yang dalam bentuk lengkap ketika pengunjung mengklik read more. Perubahan ini hanya akan ditampilkan pada menu utama blog.

3. Cari kode <data:post.body/> dengan cara yang sama seperti sebelumnya. Biasanya akan terdapat dua kode <data:post.body/>, maka dari itu cari kode yang kedua dengan menekan Enter dua kali. Setelah kodenya ketemu, ganti kode <data:post.body/> dengan kode di bawah.

<!– Auto Read More Body Start by COPAD –>
<b:if cond=’data:blog.url == data:blog.homepageUrl’>
<b:if cond=’data:blog.pageType == &quot;index&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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class=’jump-link’ style=’float:right;’><a expr:href=’data:post.url’ expr:title=’data:post.title’><img  src=”https://dabuttonfactory.com/button.jpg?t=Read+More+%3E%3E&amp;f=Calibri-Bold&amp;ts=14&amp;tc=fff&amp;hp=6&amp;vp=8&amp;c=5&amp;bgt=gradient&amp;bgc=783f04&amp;ebgc=e69138“/></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>
<div style=’clear: both;’/> <!– clear for photos floats –>
<!– Auto Read More in Body End by COPAD –>

1. Silahkan Log In ke blog kalian terlebih dahulu, lalu di menu Postingan / Posts, klik Edit pada artikel yang akan kalian persingkat.

2. Tentukan terlebih dahulu “mulai dari mana” dan “sampai di mana” kalian akan persingkat tulisan artikel kalian, dengan cara cukup menaruh kursor di salah satu tempat pada tulisan artikel kalian. 

3. Setelah itu, klik Insert jump break, maka akan muncul pembatas tulisan pada artikel yang akan ditampilkan nantinya pada halaman utama blog. Selanjutnya, klik Perbarui / Update. Contohnya kalian bisa lihat pada gambar di bawah.

4. Selesai. Kalian bisa mengecek hasilnya dengan melihat blog kalian. Kalian juga bisa melakukan hal serupa dengan artikel-artikel lainnya.

Catatan:
Jika kalian ingin mengubah kata read more / baca selengkapnya dengan kata yang lain, silahkan klik menu Tata Letak / Layout pada blog. Kemudian klik Edit pada Posting Blog / Blog Post. Ubah kata pada kolom Teks link halaman entri / Post page link text dengan kata yang kalian inginkan lalu jangan lupa untuk disimpan.

Perhatian:
Tutorial ini mungkin tidak akan berlaku pada blog yang memiliki tema lain selain yang disediakan oleh blogger.com atau mungkin saja hanya dapat digunakan pada blog yang menerapkan tema sederhana yang telah disediakan oleh blogger.com. Untuk itu, mimin mohon maaf atas keterbatasan ini.

Sekian artikel untuk kali ini, semoga yang mimin berikan dapat bermanfaat dan memiliki hasil yang baik. Jika memiliki kendala ataupun masalah dalam tutorial tersebut silahkan tinggalkan pesan pada kolom komentar dan menceklis kotak Notify me untuk mendapatkan pemberitahuan tanggapan secepatnya. Atas perhatiannya mimin ucapkan terima kasih.

COPAD | Blogger Pemula Harus Tahu! Penjelasan Mengenai Domain, Hosting, Website, dan cPanel – Tidak sedikit dari kita yang masih belum tahu mengenai Domain, Hosting, Website, dan cPanel. Maka dari itu, pada kesempatan kali ini mimin akan membahas tentang semua itu dalam artikel yang telah mimin rangkum di bawah, jadi simak baik-baik ya.

Pengertian Domain

Domain merupakan sebuah string pengenal yang digunakan untuk mengidentifikasi sebuah server seperti web server atau mail server pada sebuah jaringan komputer ataupun internet agar mudah untuk diakses oleh penjelajah internet. 

Maka dari itu, kita tidak perlu lagi untuk mengingat alamat IP dari server yang akan dituju, karena semuanya telah diatur oleh Domain Name Server (DNS) sehingga domain yang ditulis akan langsung terhubung dengan alamat IP server.

Pada Domain Name System (DNS), domain terbagi menjadi beberapa tingkatan yaitu: Top Level Domain, Second Level Domain dan Third Level Domain. Masing-masing dari tingkatan tersebut memiliki karakteristik yang berbeda-beda. 

1. Top Level Domain (TLD) sering juga disebut sebagai ekstensi domain yang merupakan bagian paling akhir dari nama domain yang dapat dilihat setelah tanda titik. Contohnya seperti: .com, .org, .net, .co.id, .gov, dan lainnya.

Terdapat dua macam Top Level Domain, yaitu Generic Top Level Domain (gTLD) dan Country Code Top Level Domain (ccTLD). Contoh dari gTLD yaitu seperti yang telah mimin tuliskan sebelumnya (.com, .org, .net, dan seterusnya). 

Sedangkan ccTLD merupakan TLD yang digunakan untuk masing-masing negara, seperti Indonesia dengan kode ID (contoh: co.id, net.id, or.id, web.id, dan seterusnya), Malaysia dengan kode MY (contoh: .com.my, .net.my, dan seterusnya), Singapura dengan kode SG, Jepang dengan kode JP, dan masih banyak lagi lainnya.

Seluruh penggunaan nama domain tersebut diatur oleh Lembaga Internasional yang bernama Internet Corporation for Assigned Names and Numbers (ICANN). Sedangkan untuk penggunaan domain dengan kode negara diatur oleh negaranya sendiri, contohnya negara Indonesia untuk domain .id diatur oleh Pengelola Nama Domain Internet Indonesia (PANDI).

2. Second Level Domain (SLD), yaitu bagian dari domain yang terletak sebelum Top Level Domain (contohnya: zonacopad.com) dimana “zonacopad” merupakan Second Level Domain dan “.com” merupakan Top Level Domain-nya. 

3. Third Level Domain yaitu bagian dari domain yang merupakan karakter sebelum Second Level Domain. Misalnya domain dari blog mimin yaitu zonacopad.com, mimin dapat menambahkan nama lain sebelum zonacopad, seperti mail.zonacopad.com atau estrex.zonacopad.com. Terdapat banyak layanan yang menyediakan Third Level Domain, seperti situs enom.

Fungsi Domain pada Website

Pada website, domain memiliki peran penting, selain agar pengunjung dapat dengan mudah mengakses web kita, nama dari domain itu sendiri nantinya akan menjadi identitas atau brand dari web yang kita miliki. Domain yang unik dan mudah diingat salah satu faktor agar web dapat dengan mudah ditemukan oleh penjelajah internet.

Maka dari itu, buatlah nama domain yang mudah untuk diucapkan dan mudah untuk dituliskan, ada baiknya untuk tidak menggunakan tanda strip (-) ataupun angka pada nama domain. 

Dalam pembelian dan pembuatan domain, kita dapat menggunakan karakter yang sudah ada dan menambahkan karakter lainnya seperti, zonacopad.com atau copadzone.com. Di mana “copad” merupakan karakter yang sudah ada sebelumnya. 

Atau kita juga dapat membuat sebuah karakter baru yang unik dan mudah diingat seperti tulisanharian.com atau sumbertutorial.com. Di mana sudah tidak ada lagi karakter yang pernah digunakan.

Contoh-contoh Domain

Terdapat berbagai macam jenis domain, masing-masing dari jenis domain tersebut memiliki tujuannya sendiri, yang berhubungan dengan jenis website yang akan dituju atau biasa juga disebut dengan niche web. Berikut, beberapa contoh dari domain dan penjelasan singkatnya.

1. Domain .com
Domain .com merupakan bagian dari Generic Top Level Domain (gTLD) pada Domain Name System (DNS). Nama .com diambil dari kata commercial, yang awalnya ditujukan untuk organisasi komersial, namun kemudian dibuka untuk tujuan umum dan paling terkenal serta paling sering digunakan.

2. Domain .net
Domain .net juga merupakan bagian dari Generic Top Level Domain (gTLD) pada Domain Name System (DNS). Nama .net diambil dari kata network, yang awalnya ditujukan untuk organisasi yang bekerja dalam teknologi jaringan seperti penyedia layanan internet dan perusahaan infrastruktur lainnya. 

Namun kemudian batasan tersebut tidak dipatuhi sehingga penggunaan domain .net menjadi terbuka untuk tujuan umum dan menjadi alternatif lain sebagai pengganti domain .com.

3. Domain .org
Domain .org juga merupakan bagian dari Generic Top Level Domain (gTLD) pada Domain Name System (DNS). Nama .org diambil dari kata organization, yang awalnya ditujukan untuk organisasi yang bersifat non-profit. 

Namun kemudian batasan tersebut tidak diberlakukan dan telah dihapus, sehingga domain ini dapat digunakan secara umum. Biasanya digunakan oleh sekolah, poyek yang bersifat opensource, komunitas dan juga dapat digunakan untuk hal yang berkaitan dengan dunia pendidikan.

Apa itu Hosting?

Hosting merupakan ruang penyimpanan harddisk dalam server komputer yang digunakan untuk penyimpanan database, email dan file web.

Ada banyak spesifikasi hosting, tetapi terdapat beberapa yang penting seperti:

1. Space / kapasitas hosting, yang merupakan besarnya data yang bisa kita simpan di dalam hosting. Contoh ukurannya seperti: Megabytes, Gigabytes, dan Terabytes.

2. Bandwidth atau besarnya kuota transfer data per bulan. Contoh ukurannya seperti: Megabytes/bulan, Gigabytes/bulan, dan Terabytes/bulan. Bandwidth ini direset ke nol pada tiap bulannya.

3. Jumlah database, berperan dalam penentuan banyaknya database yang bisa dibuat atau disimpan di dalam hosting.

4. Jumlah addon domain, merupakan banyaknya domain lain yang bisa kita tambahkan ke dalam hosting.

5. Jumlah akun email, merupakan banyaknya akun email yang bisa kita buat.

Apa itu Website?

Website merupakan halaman informasi yang disediakan melalui jalur internet sehingga bisa diakses oleh seluruh dunia selama terkoneksi dengan jaringan internet. Website merupakan kumpulan komponen yang terdiri dari teks, gambar, suara, animasi, ataupun video.

Berdasarkan Content Management System (CMS) jenis website dibagi menjadi beberapa jenis seperti:

1. Web Statik (Static Website)
Yaitu situs web yang langsung ditulis dalam bentuk HTML dan berbentuk sederhana seperti website dengan lima halaman, website ini biasanya berisi brosur produk dan jasa.

2. Web Dinamis (Dynamic Website)
Yaitu situs web yang ditulis dalam bentuk bahasa pemrograman dan database, seperti PHP, ASP, Javascript, Ajax, jQuery dan MySQL. Dalam perkembangannya, web dinamis menggunakan CMS sebagai back-end untuk administrator web tersebut. 

Salah satu yang paling terkenal karena sangat SEO Friendly adalah WordPress. CMS lainnya seperti Joomla, Drupal, CMS simple, Aura CMS dan lainnya. Contohnya, detik.com, kompas.com, dan lainnya.

3. Website Interaktif
Yaitu website yang memiliki komunikasi dua arah antar pengunjung dan pengelola web. Contoh website interaktif seperti blog dan forum.

Website juga dibedakan berdasarkan fungsi dan kegunaan, seperti:

1. Web Perorangan, yaitu web yang digunakan untuk menceritakan tentang biografi diri, pengalaman pribadi, catatan harian, dan lainnya.

2. Web Komersial, yaitu web yang dipakai untuk menunjukkan produk dan jasa suatu perusahaan atau juga dapat melakukan transaksi penjualan online. Contohnya seperti web company profile dan toko online.

3. Web Pemerintahan, yaitu web yang hanya boleh dipakai untuk keperluan website pemerintahan yang resmi. Seperti .gov untuk pemerintah US, atau .go.id untuk web instansi pemerintah di Indonesia.

4. Web Non-Profit, yaitu web yang digunakan untuk kepentingan non profit. Jenis web ini biasanya digunakan oleh yayasan, sekolahan, universitas, organisasi, LSM dan lainnya. Web jenis ini biasanya menggunakan domain dengan akhiran.org, .edu, ac.id, or.id, dan lainnya.

Apa itu cPanel?

cPanel merupakan sebuah control panel untuk mengatur hosting. Dengan cPanel, kita dapat mengelola hosting dengan lebih mudah daripada menggunakan control panel jenis lainnya atau yang gratisan.

Ada banyak layanan hosting yang menggunakan cPanel, sehingga akan lebih mudah dalam proses pemindahan data antar hosting dan lain sebagainya.

• Baca: Blogger Pemula, Catat! Inilah 3 Hal Yang Menyebabkan Blog Kamu Lambat Dimuat

Itulah penjelasan dari Domain, Hosting, Website, dan juga cPanel yang dapat mimin rangkum. Semoga bermanfaat dan terus kunjungi blog COPAD atau Subscribe untuk mendapatkan berbagai artikel baru lainnya seputar dunia blogging secara gratis! Atas perhatiannya terima kasih.

COPAD | Tutorial Membuat Blog Di Blogger.com Untuk Pemula – Halo sobat COPAD, untuk artikel kali ini mimin akan memberikan tutorial mengenai pembuatan blog di blogger.com. Tapi sebelum itu, sebenarnya blog itu apa sih? Blog adalah singkatan dari web log yang berupa aplikasi web berbentuk tulisan-tulisan (dimuat sebagai postingan) pada sebuah halaman web. Tulisan-tulisan tersebut terkadang dimuat dalam urutan terbalik, walau tidak selamanya seperti itu. Situs web ini terkadang dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuannya.

Gitu kata mas Wikped, hehe.. Selain ngeblog untuk mengisi waktu luang dan merupakan sebuah hobi, terkhusus bagi penulis dan jurnalis. Blog juga dapat menghasilkan uang loh, gimana caranya? Nanti mimin kasih tau deh caranya, maka dari itu terus kunjungi COPAD untuk mendapatkan update terbaru tentang artikel-artikel dari blog ini. Baiklah tanpa basa-basi lagi yuk simak langkah-langkah dalam membuat blognya, check it out!

• Baca: Blogger Pemula Harus Tahu! Penjelasan Mengenai Domain, Hosting, Website, dan cPanel

1. Log In ke blogger.com lalu klik Buat Blog, daftar dengan akun google yang dimiliki. Selesaikan pendaftaran sampai tahap akhir.

2. Lanjut ke blog klik Buat Blog Baru, masukkan judul, alamat blog, dan pilih tema yang diinginkan.

3. Setelah itu, klik Setting. Di menu Dasar klik Edit pada pilihan Deskripsi. Di sini kita membuat deskripsi blog (boleh juga tidak). Pada pilihan HTTPS klik Tidak dan ubah menjadi Ya agar pengunjung akan langsung dialihkan dan beranggapan bahwa blog kita aman untuk diakses (boleh juga tidak).

4. Di menu Prefensi penelusuran pada pilihan Tag meta klik Edit, dari Tidak klik Ya. Isikan deskripsi tentang blog yang akan kalian buat. Ini merupakan tempat untuk membuat deskripsi singkat yang akan mewakili seluruh konten yang nantinya kita posting. Gunanya, ketika orang melakukan pencarian dan menemukan blog kita, mereka akan tertarik untuk mengakses blog kita. Maka buatlah semenarik dan seunik mungkin, maksimal 150 karakter.

5. Selanjutnya, mendaftarkan blog ke Google Search Console. Baca: Cara mendaftarkan blog di Google Search Console

6. Setelah itu, hubungkan blog ke Google Analytics. Baca: Cara menghubungkan blog ke Google Analytics

7. Selesai. Kalian sudah bisa memulai untuk menerbitkan sebuah konten. Caranya, pada blog, klik menu Postingan kemudian klik Entri baru, silahkan buat konten sesuai dengan topik blog yang akan dibuat.

Sekian dulu tutorial untuk artikel pembuatan blog khusus pemula, terus kunjungi COPAD untuk mendapatkan tutorial-tutorial lainnya mengenai dunia blogging yang akan datang. Dan bila ada yang ingin ditanyakan silahkan tinggalkan pesan di kolom komentar atau dengan menghubungi admin secara langsung mengggunakan formulir kontak yang telah disediakan.