Agar Artikel Tidak Bisa Di Copy Paste Dengan CSS

Agar Artikel Tidak Bisa Di Copy Paste Dengan CSS - Memiliki blog yang bagus dan selalu terupdate dengan artikel-artikel yang berkualitas pasti akan menjadi rujukan bagi pemilik blog yang lainnya. Baik untuk mempelajari apa yang di bahas didalam blog tersebut, sekedar membaca isinya, atau sekedar meninggalkan komentar sebagai salah satu ciri khas dalam blogwalking. Dari sekian cara yang dilakukan pengunjung blog adalah kebiasaan lama yang mungkin tidak bisa hilang yaitu melakukan copy paste artikel, gambar, video, atau pun konten lainnya yang mungkin konten tersebut akan melengkapi konten atau artikel blog yang lainnya yang ada didalam blog mereka

Banyaknya pengunjung blog yang datang dengan berbagai sifat, sikap dan perilaku terkadang membuat khuatir bagi pemilik blog dan akhirnya memilih untuk melindungi semua atau sebagian artikel yang ada di blognya agar artikel tersebut tidak bisa di copy paste. Dan bagi Anda yang khawatir dengan artikel blog Anda dan ingin melindungi artikel tersebut, silahkan gunakan cara yang akan saya bahas berikut ini. Namun jika Anda menginginkan artikel blog Anda diberi password, silahkan baca Memasang password artikel blog

Untuk melindungi blognya agar artikel tidak bisa di copy paste, banyak yang menggunakan script anti copy paste, baik script yang berupa peringatan atau mematikan fungsi klik kanan pada mouse dan pada artikel ini saya menggunakan kode css agar artikel blog tidak bisa di copy paste yaitu dengan mematikan atau mendisable fungsi blog pada artikel yang dipilih menggunakan mouse atau dalam bahasa awamnya adalah Disable Text Selection

Daaann ternyata sudah banyak yang membahas tentang disbale text selection ini, saya sendiri menulisnya sesuai dengan ide saya sedangkan untuk sumbernya tidak mungkin saya tulis karena di Google sudah sangat banyak yang membahasnya. Nanti kalau saya tulis satu sumber, yang lainnya malah minta di tulis juga, namun yang pastinya tidak ada artikel yang sama seperti apa yang saya tulis ini karena saya menulis menggunakan kalimat dan bahasa saya sendiri. Kalau ada yang mengaku ada tulisan atau artikel yang sama dengan artikel ini, silahkan banding kemanapun

Perhatikan tampilan gambar berikut ini




Gambar diatas merupakan bentuk dari penerapan dari text selection yang saya buat sedemikian rupa. Ada 2 tampilan yang terdapat didalam gambar tersebut yaitu adanya artikel yang bisa di blok dan tidak bisa di blok. Sedangkan untuk DEMO langsung dari, saya menerapkan disable text selection ini pada 2 tulisan berikut ini

Gunakan mouse Anda untuk memblok 2 artikel berikut ini dan lihat hasilnya

1. Belajar ngeblog di Panduantemplateblog.com ternyata mudah sekali
   
2. Hayoo ajak teman-teman Anda untuk belajar disini! Gratis loh....

Itulah cara kerja text selection, jika kita memblok sebuah artikel atau paragrap maka akan terpilih sesuai dengan keinginan dan kita bisa menyalin artikel yang telah dipilih tersebut. Namun jika kita mendisable text selection ini maka hasilnya akan seperti pada poin 1 atau pada gambar yang bergerak diatas. Dan dengan menghilangkan fungsi text selection tersebut maka artikel tidak bisa di copy paste secara langsung

Dengan menggunakan kode CSS dari Text Selection ini lah, kita bisa melindungi blog kita agar artikel tidak bisa di copy paste. Dan untuk menerapkannya kedalam blog, salin kode berikut ini kedalam kode template blog

.disable_text_selection {
-webkit-touch-callout:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

Dan salin markup html berikut ini untuk memanggil fungsi dari kode CSS disable_text_selection diatas. Penempatan kode markup sesuai dengan keinginan, bisa di artikel atau pun di bagian sidebar blog

<div class="disable_text_selection">
Letakkan artikel blog disini agar tidak bisa di copy paste
</div>

Jadi dengan menggunakan kode CSS dengan menghilangkan fungsi text selection tersebut maka artikel tidak bisa di copy paste secara langsung. Memang cara ini sangat sederhana namun setidaknya masih membingungkan orang yang akan melakukan copy paste terhadap artikel blog kita

Memasang Password Artikel & Widget

Untuk membaca artikel Memasang Password Artikel & Widget ini

Klik Disini

Key : panduantemplateblog

Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog

Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog - Sebuah artikel blog akan lebih berguna jika ada pengunjung dan pembaca artikel blog tersebut membagikannya ke media sosial yang mereka miliki dan dengan adanya artikel blog kita didalam sosial media maka akan membuat pengunjung blog akan bertambah. Namun akan terasa sulit jika didalam artikel blog tidak terdapat media yang digunakan untuk membagikan artikel tersebut dan syarat utamanya harus ada tombol share sosial media untuk artikel blog tersebut

Apa saja yang harus ada di tombol share sosial media tersebut? Seperti yang ada dibagian bawah artikel blog ini, terdapat 4 tombol sosial media yang terpasang yaiut Google Plus, Facebook, Twitter dan Linkedin. Dengan adanya tombol sosial media tersebut maka saya selalu berharap agar teman-teman blogger atau pembaca artikel blog ini dengan senang hati membagikan artikel-artikel yang ada di blog ini. Namun kalau tidak ada yang membagikan, ya tidak apa-apa, yang penting semoga blog ini tetap bermanfaat dan berguna bagi kita semua :)

Agar artikel-artikel blog bisa dengan mudah dibagikan maka kita harus memasang tombol sosial media tersebut seperti yang ada dibagian bawah artikel blog ini. Dan pada artikel ini, saya tidak akan membagikan tombol share sosial media seperti yang ada di blog ini. Saya akan membagikan sebuah tombol share sosial media dengan efek slide out, yaitu sebuah tombol yang akan keluar sosial media jika tombol tersebut di sentuh oleh pointer mouse

Baca juga Memasang Sosial Media Share di Gambar Blog

Bagaimana Cara Memasang Efek Slide Out Tombol Share Sosial Media Artikel Blog seperti pada gambar diatas?
Untuk memasang tombol share seperti yang terlihat diatas atau seperti pada DEMO berikut ini, silahkan salin kode-kode CSS berikut ini karena untuk memasang tombol share dengan efek slide out ini tidak diperlukan kode script atau jQuery hanya menggunakan kode CSS saja

#sh-sosmed {
position:relative;
margin:1em auto;
padding:0;
width:64px;
height:64px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrYXe-FOLhRyMGagbAk1RLn1udv8g783Z5JklX0hQ8Cwu0oWuquN1h4zTCUPrpHSz1kUXGo-qVOgChxzn-d5qUCcmiH5ooyqX-9ksU84RWxWYvNfu3Md03YeGXhPzoJHXC5ENhi9SqGM/s1600/bagikan-icon.png);
background-position:center center;
background-repeat:no-repeat;
list-style-type:none!important;
list-style-image:none!important;
line-height:1.0!important;
cursor:pointer;
}
#sh-sosmed {
float:center;
margin:80 auto;
}
#sh-sosmed li {
visibility:hidden;
position:absolute;
top:12px;
left:12px;
margin:0;
padding:0;
background-position:0 -45px;
background-repeat:no-repeat;
opacity:0;
transition-property:left,top,opacity,background-position,visibility;
transition-duration:0.2s,0.2s,0.2s,0s,0.2s;
transition-timing-function:ease-in,ease-in,ease-out,linear,linear;
transition-delay:0.2s,0.2s,0.2s,0s,0.2s}
#sh-sosmed li:hover {
background-position:0 0;}
#sh-sosmed li a {
display:block;
width:40px;
height:40px;
}
#sh-sosmed:hover li,#sh-sosmed.hover li {
visibility:visible;
opacity:1.0;
filter:0;
transition-property:left,top,opacity,background-position;
transition-duration:0.3s,0.3s,0.3s,0s;
transition-timing-function:cubic-bezier(.6,1.51,.66,.92),cubic-bezier(.6,1.51,.66,.92),ease-out,linear;
transition-delay:0s,0s,0s,0s;}
#sh-sosmed li.fbook {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1WDhbRJ3FJgqSOiSRXbwlgzCclFiFyoesSc0dDNCfGKxg5Pn-R-_ZcWZHDigTnaHfJ3RJCI9B4rXUVi_cQ5ImM9vbo2u2P91VMCpsjBJaKSRhy4LRSijypUr9wSax1968HDpfhdlnPhg/s1600/fb-icon.png);}
#sh-sosmed li.tweet {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSU_7qD3JX8K3P6-BsShQjup7UHbOhfTuJ8DG6IN4WRnyQPH4UsXJQLHElhtXgd95eIIJCGZ0f3j6xs1mxdehdHX9hyJWCNHIlvri-bAIjZpw7wrJQrD4GqQfi9EiKErAvA21c1n5Lei0/s1600/twt-icon.png);}
#sh-sosmed li.gplus {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5CoFH9QKsbdkwBTF-RvLLVqdkW_2de7NINIReM0PRc_0x3Glbbic4Gd5KJ2JHwbn2pR5XbPsdFe_zvzDHMUpfLSReKIQPIYuNY4Dev1E6cu0Rlw2thyphenhyphenfR9BbAzJulC8fahkgGWUE0uQ0/s1600/gplus-icon.png);}
#sh-sosmed li.linkedin {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4gMrdL_gR4jpYsqQ2TCLbO63aWfoXcwj5kWn5IsGwFVBjrwuXUy75Lfr9XcOFFGRh_n6UQms_3IBB4Ckh84T3ElWbmr9mQm5u6xSERUmITa3sCP8BzwdeFvJf7UNrLvB7jan9OfOCRrE/s1600/linkedin-icon.png);}
#sh-sosmed:hover li.fbook,#sh-sosmed.hover li.fbook {
left:-30px;
top:-30px;
}#sh-sosmed:hover li.tweet,#sh-sosmed.hover li.tweet {
top:-48px;
left:12px;}
#sh-sosmed:hover li.gplus,#sh-sosmed.hover li.gplus {
top:-30px;left:54px;}
#sh-sosmed:hover li.linkedin,#sh-sosmed.hover li.linkedin {
top:69px;right:-69px}

HTML

<ul id="sh-sosmed">
<li class="fbook"><a title="Share on Facebook" target="_blank" href="#"></a></li>
<li class="tweet"><a title="Tweet This" target="_blank" href="#"></a></li>
<li class="gplus"><a title="Plus on Google+" target="_blank" href="#"></a></li>
<li class="linkedin"><a title="Share on Linkedin" target="_blank" href="#"></a></li>
</ul>

DEMO Efek Slide Out Tombol Share Sosial Media - Silahkan arahkan pointer mouse Anda

Lalu bagaimana jika menginginkan agar tombol share sosila media ini terpasang secara otomatis di seluruh halaman artikel blog? Silahkan baca panduannya di Memasang Tombol Sosial Media Di Halaman Artikel Blog

Cara Menampilkan Jumlah Artikel Di Beranda Blog

Cara Menampilkan Jumlah Artikel Di Beranda Blog - Artikel ini merupakan artikel jawaban atas pertanyaan yang disampaikan teman saya +Ulfa Choiriyatun Nisa yang telah berkomentar di Cara membuat halaman blog berdasarkan Label  dan dengan adanya artikel ini semoga bisa menjawab pertanyaan tersebut

Untuk menampilkan jumlah artikel di halaman depan blog atau di Beranda blog sebenarnya sangat mudah dilakukan

• Buka blog yang ada di dashboard akun Blogger Anda
• Pilih menu Tata Letak >> Blog Posts >> Edit
• Muncul halaman Konfigurasi Posting Blog >> Opsi Laman Utama >> Jumlah posting di halaman utama:
  Ganti jumlah atau angka yang ada di kolom sesuai dengan jumlah artikel yang ingin ditampilkan
  
• Klik Simpan

Untuk menampilkan artikel blog di Halaman Blog silahkan baca di

Itulah cara menampilkan jumlah artikel di beranda blog yang bisa diterapkan untuk blog Anda

Memunculkan Deskripsi Penelusuran Artikel Blog

Memunculkan Deskripsi Penelusuran Artikel Blog merupakan salah satu faktor seo yang bisa membantu keberadaan artikel blog agar bisa terindeks oleh search engine. Deskripsi penelusuran artikel blog sama pentingnya ketika membuat kita memasang Label pada artikel namun deskripsi penelusuran ini tidak sama dengan deskripsi pada judul blog yang dipasang pada title tag didalam kode template

Dengan memunculkan deskripsi penelusuran artikel blog ini akan lebih memudahkan artikel blog cepat terindeks karena didalam deskripsi tersebut ada target kata kunci atau Label artikel yang terpasang didalam deskripsi. Jadi, saat menuliskan deskripsi penelusuran artikel blog, pastikan memasukkan kata kunci atau Label artikel atau salin paragrap pertama dari artikel blog tersebut

Nah, sebelum menuliskan deskripsi artikel, kita munculkan dulu kolom deskripsi penelusuran tersebut...

• Apa fungsi deskripsi penelusuran artikel tersebut?
  Sebagai deskripsi artikel di mesin pencari dan membantu pengindeks-an artikel blog. Untuk melihat contohnya, silahkan klik disini
• Dimana letak deskripsi penelusuran tersebut?
  Deskripsi penelusuran terdapat disebelah kanan kolom penulisan artikel yang berada dibawah menu Lokasi, sorot gambar dibawah ini
  
  
• Bagaimana jika deskripsi penelusuran artikel tidak muncul?
  Untuk memunculkan deskripsi artikel blog yang tidak ada, berikut caranya:
  
  1. 
     

     Pada menu dashboard Blog, pilih dan klik Setelan >> Preferensi penelusuran >> Tag meta >> Deskripsi >> Edit >> Aktifkan deskripsi penelusuran >> Ya >> Isi kolom sesuai dengan deskripsi tag blog >> Simpan perubahan
     Sorot gambar disamping untuk lebih jelasnya
  2. 

     Deskripsi penelusuran pun muncul di halaman pengeditan artikel atau saat Anda membuat artikel blog
• Bagaimana cara mengisi deskripsi penelusuran artikel blog tersebut?
  Sebagai contoh, saya akan menyalin paragrap pertama dari artikel blog ini kedalam kolom deskripsi penelusuran tersebut yaitu;
  Memunculkan Deskripsi Penelusuran Artikel Blog merupakan salah satu faktor seo yang bisa membantu keberadaan artikel blog agar bisa terindeks oleh search engine
  Dan hasilnya seperti pada gambar berikut ini:
  
  
• Benarkah deskripsi penelusuran ini bisa terindeks Google atau mesin pencari lainnya?
  Tidak hanya mesin pencari, setiap Anda meletakkan link artikel kedalam situs lain misalnya sosial media atau sosial bookmark atau direktori maka Deskripsi ini akan selalu muncul, seperti yang terlihat pada tumpukan gambar berikut ini
  
  

Namun bagaimanapun juga pengaturan atau penulisan deskripsi yang telah dilakukan, terkadang hasilnya di search engine tidak sesuai dengan pengaturan tersebut. Hal ini dikarenakan pengindeks-an atau perayapan yang dilakukan secara menyeluruh oleh robot search engine terhadap artikel blog tersebut

Bagaimana apakah artikel blog Anda sudah terdapat deskripsinya atau masih mau memunculkan deskripsi penelusuran artikel blog seperti yang telah saya jelaskan diatas?

userEditableContent: Teks Artikel Bisa di Edit Langsung

userEditableContent: Teks Artikel Bisa di Edit Langsung - Pada beberapa sistem CMS, memungkinkan pengguna untuk langsung mengedit teks atau tulisan pada halaman artikel blog sehingga mereka dapat melihat hasil dari perubahan tersebut atau dengan kata lain artikel tersebut bisa di edit langsung oleh orang lain. Salah satu situs yang memiliki pengeditan artikel secara langsung adalah Wikipedia, disana kita bisa mengganti artikel yang ada agar lebih sempurna. Bagaimana dengan Blogger? Bisakah teks artikel di edit langsung?

Jika didalam Blogger memiliki fitur userEditableContent yaitu sebuah fitur yang bisa mengedit teks atau artikel secara langsung, maka itu adalah sesuatu yang mungkin diharapkan oleh para blogger, yang tentunya juga tidak diperlukan akses langsung atau sebatas sebagai admin atau penulis blog yang di undang melalui email, yang selama ini dilakukan. Dan untuk menggunakan fitur userEditableContent ini ada akses tersendiri. Lalu bagaimana dengan Blogger, apakah bisa? Tentu masih bisa namun hanya sekedar bisa dilakukan tanpa bisa menyimpan hasil dari pengeditan pada teks atau artikel tersebut

Namun, jika menggunakan trik tertentu, tentu penggunaan userEditableContent juga bisa dilakukan pada Blogger dan bisa disimpan langsung! Caranya? Nah, kalau caranya saya juga tidak tahu :) Tapi untuk cara sederhananya masih bisa dilakukan secara langsung tanpa adanya penyimpanan hasil --- Untuk Demonya silahkan ikuti pentunjuk diatas

Untuk menampilkann konten seperti diatas, hanya diperlukan properti -user-modify yang akan mengubah elemen yang memungkinkan pengguna untuk mengedit teks artikel atau gambar dan properti ini hampir bekerja pada semua browser. Untuk penggunaan -user-modify, ada ketentuan khusus agar teks atau artikel bisa di edit, yaitu;

-webkit-user-modify: read-only | read-write | read-write-plaintext-only
-moz-user-modify: read-only | read-write | write-only

Keterangan:
read-only - Pengaturan default dan tidak akan memungkinkan pengguna untuk mengedit teks artikel atau gmabar
read-write - Pengaturan yang memungkinkan pengguna untuk menulis atau mengedit teks artikel atau gambar
read-write-plaintext-only - Pengguna dapat menimpa konten tetapi hanya teks biasa sehingga jika Anda paste apa pun di sini format akan hilang

Penggunaan:
Silahkan gunakan kode berikut ini untuk menerapkan user modify pada teks atau artikel
<div class="userEditableContent">
<p style="-webkit-user-modify:read-write;-moz-user-modify:read-write;">
Silahkan Ganti Tulisan Ini Sesukan Anda</p>
</div>

Demo:
Artikel Ini Bisa Dihapus, Silahkan Dihapus dan Isi Sesuai Dengan Keinginan Anda. Tapi Ingat, Tidak Bisa Dilakukan Penyimpanan
Petunjuk : Klik pada area artikel, dan hapus..

Namun sayang, untuk melakukan agar teks artikel bisa di edit langsung, tips di artikel ini tidak bisa dilakukan pada Blogger :)