Cara Melaporkan dan Mencegah Pencurian Artikel (Copas) ke Google DMCA

Cara Melaporkan dan Mencegah Pencurian Artikel (Copas) ke Google DMCA

Tips Blog Tutorial Blog

Blogcahti November 05, 2017

Melaporkan dan Mencegah Pencurian Artikel (copy paste) - Pernah kebayang tidak? Ketika kamu mempublikasi artikel di blog dengan tulisan murni hasil pemikiran sendiri lalu dicopas (copy-paste) begitu saja oleh orang tidak bertanggung jawab? Ya, rasanya memang agak menyebalkan, atau bisa dibilang sangat menjengkelkan. Beberapa waktu lalu sebelum saya posting artikel ini, hampir semua konten blog saya dicuri oleh blog yang sama. Saya rasa blog tersebut generate secara otomatis artikel dan kemudian mempublikasikannya.

Berdasarkan hasil yang saya telusuri di internet, ternyata ini adalah masalah fitur /feeds/posts/default yang ada di blogger. Fitur ini akan memudahkan pengunjung menelusuri artikel sebuah blog. Nah, ini yang menjadi penyebab artikel mudah dicopas. Namun jangan kawatir, disini saya akan memberikan solusi untuk mencegahnya.

Cara Melaporkan Konten Blog yang Dicuri

Ketika konten kamu dicuri hal yang pertama diakukan adalah melaporkannya terlebih dahulu. Supaya blog pencuri kapok atas perbuatannya dan mendapat hukuman dari google. Blog pencuri dari kasus saya ini menggunakan paltform blogger.

Langkah-langkah melaporkan konten yang dicuri

1. Pergi menuju https://www.google.com/webmasters/tools/dmca-notice
2. Disitu ada beberapa hal yang harus kamu isi untuk kebutuhan informasi.
3. Isi Firstname, Lastname, dan Company Name yang sesuai (dalam hal ini blog milikmu). Kemudian klik Copyright holder you represent, pilih Self dan jangan lupa centang untuk konfirmasi. Serta isi Email address (sesuai dengan email yang digunakan blog kamu) dan pilih Country/Region.

4. Pada bagian yang bertanda merah pertama, beri alasan mengapa kamu ingin melaporkan. Karena konten kamu dicuri, maka berikan alasan yang sesuai misal Konten blog saya dicuri oleh orang yang tidak bertanggung jawab. Lalu bagian kedua bisa diisi dengan link konten asli milikmu (bisa diisi banyak link perbarisnya, maksimal 1000 baris.)

5. Setelah itu isi link konten/artikel yang dicuri (jika terdapat banyak link, maka sesuaikan dengan link konten/artikel asli secara urut). Dan jangan lupa centang 3 checkbox untuk konfirmasi.

6. Step terakhir yaitu SIGNATURE. Isikan tanggal sekarang dan tanda tangan (diisi dengan nama kamu). Lalu isi CAPCHA untuk memastikan kamu bukan robot dan klik tombol Submit.

7. Setelah selesai tunggu beberapa hari untuk mendapatkan approve dari google.

Cara Mencegah Konten Blog yang Dicuri

Hal berikutnya setelah melaporkan pencurian konten adalah mencegah pencurian itu terjadi lagi. Sebelum saya mengetahui cara mencegahnya, banyak artikel saya dicopas oleh blog yang sama dan saya melaporkannya lagi dan lagi. Saya rasa itu cukup menyebalkan dan saya tidak ingin itu terjadi terus menerus. Belajarlah dari pengalaman, ya itu yang kebanyakan orang bilang dan itu sangat wajib bagi saya. Seperti yang sudah saya jelaskan sebelumnya yaitu mengenai fitur feeds di blogger yang menjadi penyebab artikel mudah dicopas orang lain secara otomatis. Oleh karena itu kita harus mematikan fitur tersebut dengan cara Masuk ke blogger > Setelan > Lainnya > Izin Umpan Blog > Singkat/Tidak Ada

Jadi kita harus menyembunyikan fitur ini agar Umpan Blog tidak dapat diakses oleh pengunjung. Tujuannya untuk mengantisipasi pencurian konten oleh orang yang tidak bertanggung jawab. Karena plagiat itu sama dengan pengecut kecuali sudah mendapatkan izin dari pemillik konten.

Hasil Laporan DMCA

Setelah laporan dikirim, kamu bisa lihat laporannya di dashboard. Berikut adalah hasil laporan milik saya. Tanda merah tersebut menunjukkan jumlah link yang dilaporkan dan masih pending. Kamu bisa menunggu beberapa hari hingga laporan diterima. Bisa dilihat pada laporan saya sebelumnya. Cukup banyak kan yang copas artikel saya hehe.

Sekian tutorial tentang cara meaporkan dan mencegah konten blog yang dicuri (copas) ke google DMCA. Jika ada yang ingin ditanyakan, silahkan berkomentar.

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.

Cara Membuat Menu Navigasi Responsive di Blog dengan Javascript dan CSS

Cara Membuat Menu Navigasi Responsive di Blog dengan Javascript dan CSS

Tutorial Blog

Blogcahti September 02, 2017

Cara Membuat Menu Navigasi Responsive - Navigasi menu berperan penting didalam sebuah blog atau website. Tombol yang satu ini menjadikan isi blog lebih mudah ditelusuri oleh pengguna. Membuat menu responsive (mobile friendly) tentunya sangat diperlukan supaya blog terlihat rapi dan mudah diakses oleh pengguna, baik ketika menggunakan layar dekstop maupun mobile.

Coba kamu bayangkan jika navigasi menu blog kamu rapi ketika tampil di layar dekstop, tapi berantakan ketika tampil di layar mobile. Tentu sangat tidak nyaman dipandang oleh pengunjung bukan? Ya meskipun kamu masih bisa menggunakan template standar dari blogspot untuk tampilan mobile, namun saya rasa masih kurang bagus dipandang.

(Baca juga : Cara Mengatasi Error Image Missing Titles dan Descriptions Agar SEO Meningkat)

Cara Membuat Navigasi Menu Responsive

Disini kita akan menggunakan pure javascript untuk membuat navigasi menu. Sedangkan responsive menu akan dibuat menggunakan CSS. Oke, langsung saja ikuti langkah-langkah berikut ini :

1. Taruh kode javascript ini sebelum </head>  :

<script type='text/javascript'>
function MenuFunction() {
    var x = document.getElementById(&quot;NavigasiMenu&quot;);
    if (x.className == &quot;main-menu&quot;) {
        x.className += &quot; responsive&quot;;
    } else {
        x.className = &quot;main-menu&quot;;
    }
}
</script>

2. Jika template kalian masih standar, taruh kode berikut tepat dibawah </header> . Tapi kalau template kalian sudah custom maka tinggal ganti bagian navigasi menu yang lama dengan kode dibawah ini :

<nav class='main-menu' id='NavigasiMenu'><a classn' href='javascript:void(0);' onclick='MenuFunction()'><i aria-hidden='true' class='fa fa-bars'/> Menu</a>
<ul>
<li><a href='#' itemprop='url'><span itemprop='name'><i aria-hidden='true' class='fa fa-home'/>
</span></a></li>
<li><a href=#>Menu 1</a></li>
<li><a href=#>Menu 2</a></li>
<li><a href=#>Menu 3</a></li>
</ul>
</nav>

Catatan : Tanda '#' dapat kalian ubah dengan link kategori atau internal link blog kalian. Dan pada bagian yang diberi warna merah dapat kalian ganti sesuai keinginan kalian.

3. Taruh kode CSS berikut sebelum </b:skin> :

/* Main Menu */
nav.main-menu ul{overflow: hidden;padding:0; margin:0 ; background: #0288D1;padding: 8px 0px;}
nav.main-menu li{list-style-type:none;display:inline; } 
nav.main-menu li a{color:#fff; text-decoration: none; transition: 0.3s;padding: 10px 12px; } 
nav.main-menu a.icon {display: none;}
nav.main-menu li a:hover{background-color: #0172af;}

4. Buat CSS responsive seperti berikut sebelum </head> :

<stlye type='text/css'> 
@media screen and (max-width:768px){
.main-nav{display:none; }
nav.main-menu{padding: 0px;}
nav.main-menu li {display:none;}  
nav.main-menu ul{overflow: hidden;padding:0; margin:0;}
nav.main-menu a.icon {background: transparent;color:#0288D1; font-size:20px;display:block; text-align:left; padding:10px;}
nav.main-menu a.icon:hover{color:#0172af; }
nav.main-menu.responsive {position:relative;}
nav.main-menu.responsive li { display:block; }
nav.main-menu.responsive li a{;display:block; text-align:left; background: #6C7A89; }
nav.main-menu.responsive li a:hover{background: #555e68}
nav.main-menu.responsive a.icon{ text-align:left; background:transparent; color:#555e68 } }
</style>

Navigasi menu yang responsive telah dibuat, coba buka blog kamu menggunakan mode desktop dan juga menggunakan mode mobile. Atau kamu bisa buka sampleblogcahti.blogspot.com untuk melihat hasilnya pada template standar blogspot.

Sekian tutorial tentang cara membuat menu navigasi responsive di blog dengan Javascript dan CSS. Jika ada yang ingin ditanyakan, silahkan berkomentar.

Terimakasih telah mengunjungi blogcahti, semoga bermanfaat.

Cara Mengatasi Error Image Missing Titles dan Descriptions Agar SEO Meningkat

Cara Mengatasi Error Image Missing Titles dan Descriptions Agar SEO Meningkat

SEO Tips Blog Tutorial Blog

Blogcahti August 03, 2017

 

Cara Mengatasi Error Image Missing Titles dan Descriptions - Kebiasaan yang sering dilakukan blogger yaitu lupa memberikan judul maupun deskripsi pada gambar. Padahal untuk bersaing di mesin pencari sangat perlu optimasi gambar. Bila kamu mengabaikan hal ini, maka jangan kaget jika blog kamu sepi pengunjung. Akibatnya kamu akan malas ngeblog. Tenang saja, di situs www.chkme.com kamu bisa cek skor SEO blog kamu dan bisa melihat letak error image missing titles dan descriptions.

Kamu bisa lihat error image di blog saya seperti pada gambar berikut :

Lumayan juga kan bisa mengurangi skor SEO blog? Oleh sebab itu saya akan memberikan solusi untuk mengatasi hal tersebut. Pastinya dijamin skor blog kamu bisa naik hingga 100%. Namun perlu diingat bahwa untuk mencapai skor 100%, kita perlu memperhatikan optimasi SEO on page lainnya. Jadi tidak hanya optimasi pada gambar, melainkan seperti pada deskripsi blog, meta keyword, dan lainnya.

Cara Mengatasi Error Image Missing Titles dan Descriptions

Ada beberapa kesalahan yang sering terjadi pada gambar yang tidak memilik deskripsi. Kesalahan tersebut diantaranya ada pada postingan, widget, quickedit, dan lain-lain. Tapi saya akan bahas tiga masalah saja karena itulah yang sering terjadi.

1. Image Missing Titles dan Descriptions pada Postingan

Terkadang kita lupa memberikan deskripsi pada gambar di postingan blog. Mengatasi hal ini sangatlah mudah. Caranya :

1. Edit Postingan
2. Klik gambar yang belum diberikan deskripsi
3. Properties
4. Isikan judul dan deskripsi gambar (seperti gambar dibawah ini)

  

5. Klik OK, lalu simpan/perbarui postingan

2. Image Missing Descriptions pada Quickedit

Quickedit merupakan sebuah ikon berbentuk obeng yang berfungsi untuk memudahkan blogger mengedit blog secara cepat. Biasanya terletak pada widget blog. Ikon tersebut akan otomatis ada ketika kita login ke blogger dan tidak akan terlihat oleh pengunjung lain. Biasanya ini menjadi kendala untuk urusan SEO serta tidak sedikit blogger yang menyukainya. Untuk mengatasi masalah ini, kita hanya perlu menghapus kode quickedit pada template blog kita. Caranya :
1. Edit Tema > Edit HTML
2. Tekan CTRL+F, cari kode berikut :

<b:include name='quickedit'/>

3. Hapus semua kode yang sama seperti diatas
4. Simpan Template

3. Image Missing Descriptions pada Widget

Biasanya ketika kita meletakan kode HTML/Javascript pada widget terutama gambar, maka perlu teliti sebelum menyimpannya. Kebanyakan blogger tidak teliti sehingga menjadi penyebab tidak optimalnya SEO karena lupa memberikan deskripsi gambar. Cara mengatasinya cukup mudah :
1. Tata Letak
2. Sunting widget HTML/Javascript yang dirasa bermasalah. Sebagai contoh perhatikan kode berikut ini :

<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLRMNrDcZV2ILoTewDgs6nyiF2zyVxMDwNzlk7k5cx4Tbug1iE4DUa7xnREwOIoDlnLRtndkMPIKT-sDtLZsKTKtZujrwldy3DwB1FS2G_ra7Ge87cGAveS8zCiK7tGHZEO3kzVdpMhU/s1600/Back-To-Top.png" title="Back to Top"/>

3. Tambahkan kode alt="Deskripsi Gambar" didalam tag html tersebut
4 Sehingga menjadi seperti ini :

<img class="mbw-back-to-top" 
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLRMNrDcZV2ILoTewDgs6nyiF2zyVxMDwNzlk7k5cx4Tbug1iE4DUa7xnREwOIoDlnLRtndkMPIKT-sDtLZsKTKtZujrwldy3DwB1FS2G_ra7Ge87cGAveS8zCiK7tGHZEO3kzVdpMhU/s1600/Back-To-Top.png"
 title="Back to Top" alt="Deskripsi Gambar"/>

5. Klik Simpan

Catatan : Ganti tulisan "Deskripsi Gambar" sesuai dengan keinginanmu


Berikut adalah hasil akhir skor SEO blog di www.chkme.com setelah melakukan langkah-langkah diatas :

Nah, itulah artikel tentang Cara Mengatasi Error Image Missing Titles dan Descriptions Agar SEO Meningkat dan akhirnya skor SEO pun naik, semoga bermanfaat.

Cara Membuat Breadcrumbs Diatas Judul Postingan Blog yang SEO Friendly

Cara Membuat Breadcrumbs Diatas Judul Postingan Blog yang SEO Friendly

SEO Tutorial Blog

Blogcahti July 27, 2017

Cara Membuat Breadcrumb di Blog - Saat kamu mengunjungi sebuah blog, pada bagian atas halaman terdapat navigasi berupa link. Biasanya navigasi tersebut berada tepat diatas judul postingan. Link tersebut menunjukkan lokasi dimana kamu sedang berada pada sebuah halaman blog, itulah yang disebut breadcrumb. 

Breadcrumb menunjukkan posisi kamu ketika mengunjungi suatu artikel, label, atau halaman tertentu. Tujuan membuat breadcrumb yaitu agar memudahkan mesin pencari untuk menemukan blog kita. Selain itu breadcrumbs juga sangat user friendly.

Cara membuat breadcrumbs yang SEO friendly

Oke, ikuti langkah-langkah berikut supaya blog kamu menarik di mata pengunjung dan juga mesin pencari.

1. Login ke blogger
2. Klik Tema > Edit HTML
3. Cari kode <b:includable id='main' var='top'> atau bisa tekan CTRL+F lalu ketikkan kode tersebut kemudian tekan enter
4. Ganti kode diatas dengan kode berikut :

<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> &#187; <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'>
<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'>
&#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;amp;max-results=7&quot;' expr:title='data:label.name' itemprop='url'><span itemprop='title'><data:label.name/></span></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' title='Home'>Home</a></span> &#187; <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> &#187; <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> &#187; <span>All Post</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></span> &#187; <span><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'/>

Catatan : Kamu bisa ubah tulisan yang berwarna biru sesuai keinginan kamu. Kode &#187; merupakan spesial karakter. Dapat kamu lihat disini untuk kode-kode spesial karakter lainnya.

5. Copy kode ini dan taruh dibawah <b:skin> atau sebelum </b:skin> :

.breadcrumbs{padding:10px 5px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.breadcrumbs a {color:#999;}
.breadcrumbs a:hover{color:#2471a3 ;text-decoration:underline;}

6. Klik Simpan

Setelah itu kamu bisa cek dengan mengunjungi blog kamu. Jika berhasil maka breadcrumbs akan muncul diatas judul artikel, label, atau halaman lainnya.

Sekian artikel tentang Cara Membuat Breadcrumbs Diatas Judul Postingan Blog yang SEO Friendly semoga bermafaat.

Cara Membuat Tombol Back to Top Melayang di Blog

Cara Membuat Tombol Back to Top Melayang di Blog

Tutorial Blog

Blogcahti July 16, 2017

Cara Membuat Back to Top (Tombol Navigasi) Melayang - Kali ini blogcahti akan membagikan tutorial membuat tombol navigasi back to top. Mungkin kamu sering melihat tombol navigasi ini ketika berkunjung ke sebuah website/blog. Tidak sedikit website/blog yang sudah menggunakan fungsi tombol navigasi ini. Seperti pada blog ini, kamu bisa lihat tombol navigasi tersebut yang sudah saya terapkan tepat di samping sidebar bawah pada blog ini. Cukup keren bukan? Saya rasa kalian sudah tahu fungsi dari tombol navigasi ini. Ya, fungsi dari tombol itu sendiri untuk memudahkan pengunjung kembali ke halaman atas blog.

Tentunya ini juga akan membuat blog kita menjadi lebih keren dan memberikan pengalaman yang bagus untuk pengunjung. Apalagi jika website/blog yang memiliki banyak komentar, jadi pengunjung tidak perlu susah payah scroll ke atas lagi, tinggal "klik" atau "touch" tombol satu kali saja langsung menuju halaman paling atas.

Cara Membuat Tombol Back to Top di Blogspot

Oke, langsung saja ikuti langkah-langkah berikut ini. Script ini cukup sederhana, menggunakan CSS dan JQuery. Oleh karena itu kamu harus memasang kode JQuery di template blog.

1. Pastikan di template kamu sudah terdapat kode JQuery seperti ini :

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Kamu bisa cek terlebih dahulu, caranya :

• Tekan CTRL + F untuk melakukan pencarian
• Cari kode tersebut diatas  </head>

Catatan : Ada banyak versi kode JQuery, saya menggunakan versi 2.x, jika sudah terpasang versi lain abaikan langkah ini. Tapi saya sarankan menggunakan versi 2.x .

Jika belum ada kode JQuery, lakukan langkah berikut :

• Masuk ke blogger, Tema > Edit HTML
• Salin kode JQuery diatas </head>
• Simpan 

2. Klik "Tata Letak" (Layout)
3. Klik "Tambahkan Gadget" di Sidebar
4. Pilih HTML/Javascript
5. Copy dan paste kode berikut :

<style>
.mbw-back-to-top {
    position: fixed;
    bottom: 8px;
    right: 10px;
    text-decoration: none;
    display: none;
    cursor:pointer;
    width: 40px;
}
</style>
<img class="mbw-back-to-top" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLRMNrDcZV2ILoTewDgs6nyiF2zyVxMDwNzlk7k5cx4Tbug1iE4DUa7xnREwOIoDlnLRtndkMPIKT-sDtLZsKTKtZujrwldy3DwB1FS2G_ra7Ge87cGAveS8zCiK7tGHZEO3kzVdpMhU/s1600/Back-To-Top.png" />
<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 : Kode yang berwarna merah adalah gambar tombol navigasi back to top. Kamu bisa menggantinya dengan gambar yang lain.

6. Klik Simpan.

Kumpulan gambar-gambar tombol navigasi Back to Top

Kamu bisa coba menggunakan gambar-gambar tombol navigasi keren lainnya seperti berikut ini. Cara menggantinya cukup copy URL gambar berikut dan paste di bagian kode yang berwarna merah tadi.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_qnKQpDlwE20vj8-PoL_84ckA-8FrecE-umc2d0kxsd92PACtTVkYgh_ejfUS_e2Xk1L_hOrLJGv-T4K-_NG6TmBD7kTdvhtSXUruy26RATG_2deRapTvfYMtYB_qgeFoD0LVyhmfxTE/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLVmf31kSsmM2TywZQx9ARU4kNMCiGB8gzHU6q0Dx7PSwu2tSE38nwpSsK89ql9vGyhJPAhTfCpSqttWhIprPvcV_XVKE3nLhHVJpiCo_s35hZwQn5njO4xeb6XTA_0CQtYdfkb4uf5Q/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX615QpJBv2sQPZA1g31t7Zdh3foLmW6LcZQ-9-MMJmaLUCuDB_PDZRejWr0skNLvsY9pimwkdKxTABmK0i3CXrFlnBdhF5iucbeUNr0BoSR58rssviIo21Fydp_L16JErVuI5k_ExPTE/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6WlN0UYYLDvIwtwjcgEc_PAMJXnuOATq30D1tRRl1af-FWeZByR82IjzwAdztBr7hVAvjd6_VW99LWqvs4oiuLiOMPbuaBKeWOLhNREVwtpYhOoI4-WanaySwyOwYnJs3CBfRlFfmFb0/s1600/back+to+top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQVpkJW2mCHKVcUVAgoEdIZm_YJXGKVMfSn_Zy7aL2QTI6bCfzw6FCmEap5REu9h1WWELesYq1SmHkz7PxFYTlhAwcdpHyOmD6syxcFhH91JTAPYwbAMwczICL8C-YeraFLdeDK8T6bWo/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgBv8YolQwE4obJbqH4Iq3lDuPSicWACeLh9Bm1geOpMOiLsGy-zPYMUtPfUkdc7eSvMSsqV7Nd9jGl3LauZ_g1CemzOcZuK6_pK9QZ-0PwdRx7keK-fp9VA1YK0aamCwtS2PNSf3BLuQ/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM0ekJ_eTEYGoQkW_dkYPpzPEbgSz9Sqr0YBPIH5HtNcIP259z1VlUJIoVq4145dcm3IjRnOianmT8PGEqsTl2NbXvpIAqY2lPHFQV-fBLP-EXY8Xp81MzClRdkQuDxC0OpV5zvYxI1y4/s1600/back+to+top+button.gif 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgufZ-hzOyVrc1yhSyOptoTcdbJgTAs3fc3E3R4dKGQtl8K2m-P62t4qGFTK3gyzGlqSX2KrnF511fhD7PhK8S1CTVyZCvjNw3yNfbK7GxRKJgp4ny_FHO-KqZLMHgbra5ZZMAcqvAErnU/s1600/back+to+top+button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLwLmoeFLQO1C0qzPPi0bS-uz4bG810VbG6Wwi_5TWXy3j4_MJkfJEZdLSjbZ02IoAwH70FgBAaK9LEn3dTgvDUaahbucsymw_YXMkDWX1LpvLtm7_F8YsJ-ri52KukeVI2sU1Dsv9WCo/s1600/back+to+top.png 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYPjWVIHW8VzdJ3dogAGeq8l904qfWIx1uVjKk6UNkiQtroL45qmSq5SoLkdzvVW0lhklNjEpUCstuQAlQLTOBGoYD5BGWLwcVwzR5eYrUpN7OlKbOSeyiCCJkAtPoGWR99ExCHAdN-Lk/s1600/Back-To-Top.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlO5_jptFnBnL8zaYEbGjN4ro-_i-lrnKntudjkWnExAiT7WMH40vcCJETgmM7CoH_blVJMItw4vhwPzP_TCqwzKuFD97xpJxvxuoqE8vYCKblQ4BV9PVCyGWqgitcXzpREPHJSD3UJUY/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk5nHguDU-ogjDhHSFXibjc8dJrYZnZ-TLkvfTXeCDM_5aatT4xkROIqhvUFrkgeGzVfK9TWcUEfd-e0IjG8-DkW_CiUhFFnr2Iec6Wwrn9lIpRqHjHxlkgWP8v_d1BUstQckOmqdpN3M/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheTk7qR9yGthuSlPzJ__RQqjCob-hRznaD6VL6d0or6qT2YN7wT2URy-a4LqihByGtbw9lS-aPRxhe8UM6kpvs3hkwfcmzPLzEb6tdrk0yNFGPei2pN1vAiZ_nN2FPvnsZBy9u_76bhIY/s1600/back-to-top-button.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJLRMNrDcZV2ILoTewDgs6nyiF2zyVxMDwNzlk7k5cx4Tbug1iE4DUa7xnREwOIoDlnLRtndkMPIKT-sDtLZsKTKtZujrwldy3DwB1FS2G_ra7Ge87cGAveS8zCiK7tGHZEO3kzVdpMhU/s1600/Back-To-Top.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3gujbQbcXzFG2QyLrivWjXB5fJiORvYmBIu8d4gc9KdhzOJGD7c2Izk09Ik2SEHwGLlRAXDeQoKCLA1zY1YsUDTrrScphIxlt_X03u6BMlEpP_16mlugtCOciytSxm1sdY97XvX2Cn0o/s1600/back_to_top_button.png

Sumber gambar : http://www.forumblogindo.com/2015/05/koleksi-gambar-tombol-back-to-top-button-blog-keren-user-friendly.html

Sekian tutorial tentang Cara Membuat Back to Top (Tombol Navigasi Kembali ke Atas) Melayang di Blog semoga bermanfaat.

Cara Membuat Kotak Script Keren didalam Postingan Blogger

Cara Membuat Kotak Script Keren didalam Postingan Blogger

Tutorial Blog

Blogcahti May 11, 2017

Cara Membuat Kotak Script Keren didalam Postingan - Halo sobat blogcahti, kali ini saya akan membagikan tutorial membuat kotak script. Apa itu kotak script? Kotak script atau script box adalah sebuah kotak yang didalamnya berisi script atau kode program. Menggunakan scriptbox akan membuat tulisan script pada postingan sobat menjadi lebih rapi. Bayangkan jika script yang kamu tulis berantakan, pasti tidak menarik dimata pengunjung.

Cara Membuat Scriptbox

Sebagai contoh kamu bisa lihat kotak script yang ada di beberapa postingan blogcahti. Pasti menarik kan? Kamu bisa mencobanya dengan mengikuti langkah-langkah berikut.

Cara pertama

Cara pertama sering digunakan oleh blogger. Membuat kode html dan css secara langsung di mode html pada postingan memang cukup mudah.

1. Login ke blogger > Entri Baru
2. Pada mode penulisan, pilih HTML

3. Masukkan kode berikut

<pre style="background: #f1f1f1; border-left: solid 5px #0288d1; padding: 12px;margin:10px 0px; width:auto; height:auto; max-height:130px; overflow:auto;">Masukkan script disini</pre>

5. Setelah itu ubah mode penulisan ke Compose, maka akan muncul kotak script seperti gambar dibawah. Lalu ganti tulisan Masukkan script disini dengan script sobat atau sobat bisa menuliskannya di mode HTML namun jika script sobat berupa html, sobat harus mem-parse terlebih dahulu script tersebut disini.

Cara kedua

Cara pertama memang mudah, tapi itu membuat kamu harus menulis kode html dan css nya disetiap kamu memposting artikel. Tentu cara ini kurang efektif karena kamu harus menghafal kodenya dan menulisnya panjang lebar. Misal kamu menulis di beberapa script box, pasti capek kan harus mengulang? Repot banget tinggal copas aja min? Iya copas gak apa, kalau suatu saat ingin nulis lagi gimana? Nah, cara kedua ini akan memudahkan kamu dalam membuat script box pada postingan karena cukup menuliskan class nya saja, nanti akan otomatis dieksekusi oleh kode CSS.

1. Login ke blogger > Tema > Edit HTML
2. Masukkan kode berikut sebelum </:bskin>

.scriptbox{background: #f1f1f1; border-left: solid 5px #0288d1; padding: 12px;margin:10px 0px; width:auto; height:auto; max-height:130px; overflow:auto;}

Catatan : kamu bisa mengubah warna background pada kode yang diberi tanda berwarna merah

3. Save Template
4. Masuk ke "Entri Baru", pilih mode penulisan HTML. Masukkan kode berikut <pre class="scriptbox">Masukkan script disini</pre>
5. Setelah itu tinggal ganti tulisan Masukkan script disini dengan script sobat

Cara ini menerapkan langsung kode css kedalam class yang bersangkutan di template blogger. Selanjutnya class dipanggil jika ingin digunakan. Kamu hanya perlu mengingat nama class nya saja sehingga kamu tidak perlu repot menulis panjang lebar kodenya.

Saya rasa cukup sekian artikel tentang Cara Membuat Kotak Script Keren didalam Postingan Blogger semoga bermanfaat buat sobat semua.

Cara Membuat Meta Deskripsi di Blogspot Agar Lebih SEO

Cara Membuat Meta Deskripsi di Blogspot Agar Lebih SEO

SEO Tutorial Blog

Blogcahti April 27, 2017

Cara Membuat Meta Deskripsi di Blogspot - Seperti yang kita  ketahui bahwa blog adalah rumah bagi pemiliknya. Blog harus terlihat menarik agar tamu bisa betah lama-lama di blog kita. Ketika orang akan mengunjungi blog kita melalui mesin pencari, mereka melihat cuplikan kalimat. Itulah yang namanya deskripsi.

Deskripsi menggambarkan tentang apa yang ada di blog kita dan bertujuan agar pengunjung tertarik untuk melihat atau sekedar mampir ke blog kita. Deskripsi juga merupakan teknik seo yang bertujuan agar mesin pencari dengan mudah dapat merayapi blog kita. Namun ini bukan satu-satu cara yang bisa dilakukan untuk optimasi mesin pencari. Masih banyak tekhnik lain untuk memaksimalkan seo.

Banyak penyedia layanan blog yang memasang fitur deskripsi seperti pada wordpress, blogspot, dll. Deskripsi berisi sepenggal kata atau kalimat yang menunjukkan isi dari sebuah blog. Membuat deskripsi pada blogger mudah kok, tidak harus mengerti kode-kode html atau apapun yang agak memusingkan.

(Baca juga : Cara Membuat Breadcrumbs Diatas Judul Postingan Blog yang SEO Friendly)
 
Sebenarnya deskripsi juga merupakan tag html yaitu <meta> yang berada dalam tag <head>. Bermaksud untuk memberikan arahan kepada mesin pencari bahwa kode tersebut nantinya akan ditampilkan di halaman pencarian.

Cara Membuat Meta Deskripsi

Ada dua jenis deskripsi pada blog, yaitu deskripsi untuk blog itu sendiri dan deskripsi untuk artikel. Lalu apa perbedaannya? Jika deskripsi blog berarti mengacu pada seluruh konten yang ada di blog. Sedangkan deskripsi pada artikel berarti menyangkut tentang isi dari artikel tersebut. Oke, untuk membuat dua deskripsi tersebut ikuti langkah-langkah berikut.

Deskripsi blog

• Login ke blogger.com
• pilih menu setelan lalu cari "Preferensi penelusuran"
• Tepat dibawah informasi judul terdapat deskripsi. Kemudian klik "edit" dan ketikkan deskripsi sesuai dengan isi dari blog kamu.

Di kolom terlihat bahwa batas karakter yang dapat diinput kurang lebih 150 saja. Jika lebih, google secara otomatis akan memotongnya. Setelah itu klik simpan dan pastikan centang pada pilihan aktifkan deskripsi penelusuranBuatlah deskripi yang singkat dan jelas. Misalnya kamu mempunyai blog tentang kesehatan, maka deskripsi yang tepat adalah "Blog yang menyajikan tentang informasi seputar kesehatan" atau apa saja yang menurut kamu bagus. Intinya sih buat deskripsi dengan kata kunci yang sesuai isi blog kita.

Deskripsi artikel

• Login ke blogger.com
• Masuk ke post, klik "New entry" atau kamu bisa juga edit post langsung dengan klik edit pada masing-masing daftar postingan.
• Pada sebelah kanan ada Setelan entry, klik pada "Deskripsi Penelusuran"

Deskripsi pada artikel juga diperlukan agar ketika orang mengetikkan kata kunci di mesin pencari, kemudian artikel kita muncul dengan deskripsi yang sesuai dengan isinya.

Sekian artikel tentang Cara Membuat Meta Deskripsi di Blogspot Agar Lebih SEO semoga bermanfaat.