√ Apa Itu Css ? Inilah Pengertian Dan Fungsinya

Apa Itu CSS ? Inilah Pengertian dan Fungsinya - Bagi designer web css yakni hal yang dihentikan di tinggalkan selain HTML, tanpa css tampilan suatu halaman web tidak akan terlihat indah dan rapih. Dengan instruksi css inilah kita sanggup melihat banyak sekali macam warna dan desain web yang menarik. Kode CSS dan HTML sangat berkaitan bersahabat keduanya saling melengkapi satu sama lain, tidak di pungkiri mereka yakni cinta sejati yang tidak akan terpisahkan dalam desain web. Fungsi-fungsi dari instruksi css sangatlah flexible, sebab css hanya sanggup menyesuaikan dirinya dengan instruksi ID dan Class pada serpihan html, dan tidak mutlak dalam penggunaanya sehingga kita sanggup bebas mengisinya dengan kata-kata kita sendiri, namun untuk serpihan inti css kita tidak sanggup mengisinya sesuai dengan impian kita.

Baca Juga : Apa Pengertian dan Fungsi HTML

Apa Itu CSS ?

Cascading Style Sheet (CSS) yakni bahasa pemrograman standar yang dipakai untuk mendesain tampilan dari suatu halaman web. CSS juga berfungsi untuk mengatur sebuah komponen yang terdapat pada instruksi markup (HTML) biar menjadi lebih terstruktur. Dengan memakai css suatu halaman web yang dibangun dengan instruksi html akan menjadi lebih baik dan rapih dibandingkan dengan halaman web yang tidak memakai instruksi css ini. Nah, dengan klarifikasi css diatas semoga Anda sudah paham mengenai pengertian css, namun dibawah ini akan aku jelaskan beberapa versi css dan fungsi dasar dari instruksi css.

Versi CSS Hingga Saat Ini

Dimulai pada tahun 1996 versi css hingga ketika ini terus berkembang sehingga memperlihatkan nilai baik bagi web designer hingga tahun 2016 versi css sudah masuk ke versi 3 yang artinya dalam waktu 20 tahun instruksi css berkembang dengan baik, nah berikut perkembangan css hingga hingga kini :

• Tahun 1996 : W3C menetapkan CSS1 sebagai bahasa pemrograman standar dalam pembuatan web.
• Tahun 1998 : W3C menyempurnakan instruksi CSS1 sehingga membuat instruksi standar CSS2.
• Tahun 2000 : CSS3 mulai dikembangkan hingga hingga ketika ini.

Apa Fungsi CSS ?

Secara keseluruhan CSS mempunyai fungsi dan tujuan utama yaitu untuk web desain biar tampilan terlihat menarik dan interaktif. Namun dalam pemrograman css sanggup berfungsi untuk mencari atau menentukan beberapa instruksi elemen dari tag html contohnya id, class, attribute, name dan lainnya. Fungsi dari tiap-tiap poperty css sangatlah banyak, bahkan lebih banyak dibandingkan dengan fungsi dari element html.

Kita ambil pola sederhana css yang berfungsi untuk selector atau milih instruksi yang ada di html :

Kode HTML :

<p>Tulisan di Tengah Warna Merah</p>

Kode CSS :

p{text-align:center;color:red}

Anda sanggup mencobanya eksklusif disini https://jsfiddle.net/kreasikan/7dwg6bwh/

Apa Saja Kode atau Poperti CSS ?

CSS mempunyai properti yang sangat banyak dibandingkan dengan HTML, instruksi properti css dari versi pertama hingga ketiga akan aku jelaskan pada potingan khusus, namun kali ini aku akan menjelaskan secara singat beberapa instruksi poperti css dibawah ini :

• text-align berfungsi untuk mengatur letak teks, kita sanggup mengisi value dengan center, left, right.
• color berfungsi untuk memperlihatkan warna pada teks, valuennya instruksi warna hex, rgb, atau nama warna (dalam bahasa inggris, pola : red, blue, yellow, green, brown, black).
• font-size berfungsi untuk memperlihatkan nilai atau ukuran teks, pada umumnya value diisi dengan satuan pixel contohnya 12px.
• font-weight berfungsi untuk memperlihatkan nilai tebal, tipis, atau normal pada teks, contohnya kita akan menulis karakter tebal maka value sanggup diisi bold atau 700. Jika memakai angka kita harus melihatnya dulu pada source atau sumber font yang kita gunakan.

Masih banyak lagi fungs-fungsi dari masing-masing properti css, kita akan membahasnya secara berkala, untuk sanggup mendalami lagi mengenai instruksi css kita sanggup mencar ilmu bersama disini.

Dari klarifikasi di atas semoga Anda sanggup memahami mengenai instruksi css, namun kita harus tetap mencar ilmu biar sanggup mengerti fungsi dari tiap-tiap instruksi properti css, untuk itu aku akan menulisnya kembali di artikel selanjut mengenai kumpulan instruksi properti css yang sanggup Anda gunakan sebagai rujukan untuk memakai instruksi css pada desain web.

Sumber http://www.caramanual.com

√ Cara Menciptakan Tombol Demo Dan Download Sederhana

Cara Membuat Tombol Demo dan Download Sederhana - Membuat tombol demo dan d0wnl0ad di blog sangatlah gampang dan sederhana sama saja dengan menciptakan link atau url biasa. Tetapi link tersebut kita ubah menjadi tombol yang lebih menarik dengan menawarkan kotak dan warna akan menawarkan kesan yang berbeda dibandingkan dengan link biasa.

Button demo dan d0wnl0ad ini aku buat dengan sangat sederhana tanpa memakai font awesome, aku hanya memakai dampak transisi sederhana namun tetap elok jikalau Anda gunakan. Tombol ini aku buat sederhana juga untuk mempercepat loading blog Anda, alasannya ialah jikalau memakai font awesome akan sedikit membutuhkan waktu untuk loading walaupun tombol demo dan d0wnl0ad yang memakai font awesome jauh lebih keren dibandingkan dengan ini.

Blogger yang memakai button d0wnl0ad dan demo ini biasanya untuk blog yang menyediakan template, ataupun blog d0wnl0ad lainnya. Demo ialah preview atau referensi tampilan dari sebuah file yang akan kita d0wnl0ad, sedangkan d0wnl0ad ialah file yang akan kita unduh sesuai dengan preview yang sudah kita lihat.

Demo Download

Nah, bagi Anda yang ingin memasang tombol demo dan d0wnl0ad ini di blog Anda silahkan ikuti langkah-langkahnya dibawah ini.

1. Masuk ke Blogger.com
2. Lalu masuk ke bab Template > Edit HTML
3. Cari arahan ]]></b:skin> atau </style>
4. Copy arahan CSS dibawah ini

.demo{border:none;border-radius:2px;padding:5px 20px!important;background:#5959ff;color:#FFF!important;text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.3);transition:background-color 1s ease-out 0s;letter-spacing:1px}.d0wnl0ad{border:none;border-radius:2px;padding:5px 20px!important;background:#4cc3ff;color:#FFF!important;text-align:center;text-shadow:0 0 1px rgba(0,0,0,0.3);transition:background-color 1s ease-out 0s;letter-spacing:1px}.demo:hover{background:#000;text-shadow:0 0 1px #222}.d0wnl0ad:hover{background:#000;text-shadow:0 0 1px #222}

5. Paste diatas arahan ]]></b:skin> atau </style>
6. Klik Simpan template

Bagaimana Cara Menggunakan Tombol Demo dan Download ?

Setelah memasang arahan css pada template blog Anda, kini Anda tinggal mencoba untuk menggunakannya. Lalu bagaimana cara memakai tombol demo dan d0wnl0adnya ? Silahkan simak dibawah ini.

Tambahkan arahan class='demo' untuk tombol Demo
Tambahkan arahan class='d0wnl0ad' untuk tombol Download

1. Buatlah sebuah link menyerupai biasanya pada artikel blog Anda
2. Jika Anda berada di bab Compose silahkan klik di bab HTML
3. Carilah link yang sudah Anda buat, contohnya menyerupai ini
<a href="aciknadzirah.blogspot.com" title="√ Cara Membuat Tombol Demo dan Download Sederhana"></a>
4. Tambahkan arahan class='demo' atau class='d0wnl0ad'
<a class='demo' href="aciknadzirah.blogspot.com" title="√ Cara Membuat Tombol Demo dan Download Sederhana"></a>
5. Silahkan publikasikan kembali artikel Anda

Jika Anda masih merasa kesulitan dengan tutorial diatas silahkan untuk menawarkan komentar Anda, aku usahakan akan membantu Anda dalam memasang tombol demo dan d0wnl0ad di blog Anda.
Sumber http://www.caramanual.com

√ Inilah Beberapa Jenis Dan Cara Penulisan Aba-Aba Warna

Inilah Beberapa Jenis dan Cara Penulisan Kode Warna - Dalam dunia pemrograman penulisan instruksi warna mempunyai beberapa jenis dan penulisannya yang berbeda-beda, instruksi warna yang sering kita dengar yaitu RGB (Red Green Blue) dan Hex atau Hexadecimal. Selain kedua instruksi warna tersebut ternyata masih ada lagi cara penulisan instruksi warna dalam bahasa pemrograman css, beberapa diantaranya yaitu :

• Hex (Hexadecimal)
• RGB (Red Green Blue)
• RGBA (Red Green Blue Alpha)
• HSL (Hue Saturation Lightness)
• HSLA (Hue Saturation Lightness Alpha)
• Color Names

Baca juga: Cara Memasang Widget Kode Warna di Blog

Disini aku akan menjelaskan secara singkat mengenai cara penulisan dari keenam instruksi warna yang sudah aku sebutkan diatas. Penulisan instruksi ini untuk di terapkan pada instruksi pemrograman css dan di panggil memakai instruksi pemrograman html, kedua bahasa pemrograman ini sangat berkaitan erat, keduanya akan saling membutuhkan dan melengkapi, umumnya instruksi html dipakai untuk menciptakan sebuah kerangka pada blog atau website sedangkan instruksi css dipakai untuk memperlihatkan warna atau desain pada kerangka tersebut sehingga terlihat lebih indah.

Perlu Anda perhatikan bahwa tidak semua browser sanggup mendukung semua penulisan instruksi warna, sehingga kalau browser yang kita gunakan tidak mendukung salah satu dari 6 cara penulisan instruksi warna tersebut maka blog atau situs web yang memakai salah satu penulisan instruksi warna itu tidak akan menampilkan warna yang semestinya. Kita ketahui bahwa beberapa browser yang paling banyak dipakai ketika ini yaitu Chrome, Firefox, Safari, Opera, Internet Explorer dan lainnya. Anda sanggup melihat pada sumber kemudian lintas di situs Anda, kebanyakan pemirsa atau pengunjung blog situs Anda memakai browser apa ? Ini sanggup Anda jadikan sebagai pola dalam penulisan instruksi warna untuk situs web Anda.

Baja juga: Cara Mendaftarkan Blog ke Google Analytics

Setelah Anda menganalisis browser yang paling banyak dipakai oleh pengunjung situs Anda, sekarang saatnya Anda untuk mencoba menerapkan cara penulisan instruksi warna yang sempurna untuk situs web blog Anda, jangan hingga situs Anda tidak menampilkan warna yang semestinya ketika pengunjung blog Anda sedang membuka web Anda dengan memakai browser yang berbeda. Karena warna juga merupakan faktor yang penting dalam sebuah desain web. Oleh alasannya ialah itu ini sangat penting untuk kita pelajari dan menerapkannya pada blog atau website kita masing-masing. Baiklah eksklusif saja kita mulai bahas mengenai 6 jenis dan cara penulisan instruksi warna dibawah ini.

Warna Hex (Hexadecimal)

Kode warna hexadecimal ialah kombinasi dari angka dan huruf, format penulisannya menyerupai ini #RRGGBB. Warna hexadecimal terdiri dari RR (Red), GG (Green), dan BB (Blue). Dalam penulisan warna hexadecimal #FF0000 ialah penulisan instruksi warna untuk warna merah. Contoh penerapannya dalam instruksi css dan html menyerupai berikut ini.

Kode:

<style> .merah{color:#ff0000} .hijau{color:#00ff00} .biru{color:#0000ff} </style> <div class="merah">Ini ialah contoh warna merah.</div> <div class="hijau">Ini ialah contoh warna hijau.</div> <div class="biru">Ini ialah contoh warna biru.</div>

Hasilnya:

Ini ialah contoh warna merah.

Ini ialah contoh warna hijau.

Ini ialah contoh warna biru.

Baca juga: Kumpulan Kode Tag HTML Lengkap Dengan Fungsinya

Perlu Anda Ketahui:
- Nilai warna hexadecimal didukung oleh semua browser.
- Nilai warna hexadecimal ditentukan dengan: #RRGGBB.
- Nilai RR (Red), GG (Green), dan BB (Blue) ialah bilangan bundar dari hexadecimal 00 dan FF yang memilih intensitas warnanya.
- Nilai angka terdiri dari (0-9) dan nilai abjad terdiri dari (A-F).

Warna RGB (Red Green Blue)

Kode warna RGB tidak beda jauh dengan instruksi warna hexadecimal hanya saja warna RGB lebih ke nilai desimal atau decimal, format penulisannya menyerupai ini rgb(red,green,blue). Warna RGB terdiri dari Red, Blue, Green. Dalam penulisan warna RGB, rgb(255,0,0) ialah penulisan instruksi warna untuk warna merah. Contoh penulisan dan penerapannya menyerupai dibawah ini.

Kode:

<style> .merah{color:rgb(255,0,0)} .hijau{color:rgb(0,255,0)} .biru{color:rgb(0,0,255)} </style> <div class="merah">Ini ialah contoh warna merah.</div> <div class="hijau">Ini ialah contoh warna hijau.</div> <div class="biru">Ini ialah contoh warna biru.</div>

Hasilnya:

Ini ialah contoh warna merah.

Ini ialah contoh warna hijau.

Ini ialah contoh warna biru.

Perlu Anda Ketahui:
- Nilai warna RGB didukung di semua browser.
- Nilai warna RGB ditentukan dengan: rgb(red,green,blue).
- Setiap parameter (Red,Green,Blue) memilih intensitas warna sebagai bilangan bundar dari 0 hingga 255.

Warna RGBA (Red Green Blue Alpha)

Sama menyerupai dengan warna RGB, warna RGBA mempunyai nilai A (Alpha) atau Opacity yaitu tingkat transparan atau tembus pandang dengan nilai 0 hingga 1. Nilai 0 akan membuatnya menjadi transparan 100% jadi tidak akan memperlihatkan warna apapun ketika nilai alpha 0, sedangkan kalau nilai alpha 1 maka akan menghasilkan warna yang solid dan tidak transparan. Contoh penulisan dan penerapannya menyerupai dibawah ini.

Kode:

<style> .biru-100{color:rgba(0,0,255,1)} .biru-75{color:rgba(0,0,255,0.75)} .biru-50{color:rgba(0,0,255,0.5)} .biru-25{color:rgba(0,0,255,0.25)} .biru-0{color:rgba(0,0,255,0)} </style> <div class="biru-100">Ini ialah contoh warna biru alpha 1.</div> <div class="biru-75">Ini ialah contoh warna biru alpha 0.75.</div> <div class="biru-50">Ini ialah contoh warna biru alpha 0.5.</div> <div class="biru-25">Ini ialah contoh warna biru alpha 0.25.</div> <div class="biru-0">Ini ialah contoh warna biru alpha 0.</div>

Hasilnya:

Ini ialah contoh warna biru alpha 1.

Ini ialah contoh warna biru alpha 0.75.

Ini ialah contoh warna biru alpha 0.5.

Ini ialah contoh warna biru alpha 0.25.

Ini ialah contoh warna biru alpha 0.

Perlu Anda Ketahui:
- Nilai warna RGBA tidak didukung di semua browser, hanya browser IE9+, Firefox, Chrome, Safari, dan Opera 10+ yang mendukung warna RGBA.
- Nilai warna RGBA ditentukan dengan: rgba(red,green,blue,alpha).
- Setiap parameter (Red,Green,Blue) memilih intensitas warna sebagai bilangan bundar dari 0 hingga 255 dan parameter (Alpha) bernilai 0 hingga 1.

Warna HSL (Hue Saturation Lightness)

Warna HSL merupakan kombinasi antara hue, saturation, dan lightness. Hue mempunyai nilai 0 hingga 360, dimana nilai 0 untuk warna merah, nilai 120 untuk warna hijau, dan nilai 240 untuk warna biru. Saturation mempunyai nilai persentasi dari 0 hingga 100, dimana nilai 0 ialah warna abu-abu atau grey dan nilai 100 untuk memperlihatkan warna full sesuai dari warna Hue, kalau warna Hue berada pada warna biru atau nilai 240 makan ketika kita atur nilai Saturation pada nilai 100 maka akan menghasilkan warna full sesuai dengan warna Hue, sedangkan kalau kita menurunkan nilainya hingga ke 0 kualitas warna akan semakin turun hingga menjadi warna abu-abu atau grey kalau nilai Saturation 0. Lightness atau Brightness suatu tingkat kecerahan warna yang di hasilkan dari Hue, lightness mempunyai nilai persentasi dari 0 hingga 100, dimana kalau kita atur ke nilai 0 maka warna yang dihasilkan akan menjadi hitam meskipun warna Hue merah, hijau, atau biru, kalau kita memperlihatkan nilai lightness 50 maka akan menghasilkan warna yang full misalkan warna pada Hue merah maka ketika kita memperlihatkan nilai 50 pada warna lightness akan tetap menghasilkan warna merah, sedangkan kalau kita memperlihatkan nilai 100 maka akan menghasilkan warna putih meskipun warna Hue merah, hijau, atau biru. Contoh penulisan dan penerapannya menyerupai dibawah ini.

Kode:

<style> .merah{color:hsl(0,100%,50%)} .hijau{color:hsl(120,100%,50%)} .biru{color:hsl(240,100%,50%)} </style> <div class="merah">Ini ialah contoh warna merah.</div> <div class="hijau">Ini ialah contoh warna hijau.</div> <div class="biru">Ini ialah contoh warna biru.</div>

Hasilnya:

Ini ialah contoh warna merah.

Ini ialah contoh warna hijau.

Ini ialah contoh warna biru.

Perlu Anda Ketahui:
- Nilai warna HSL tidak didukung di semua browser, hanya browser IE9+, Firefox, Chrome, Safari, dan Opera 10+ yang mendukung warna HSL.
- Nilai warna HSL ditentukan dengan: hsl(hue,saturation%,lightness%).
- Nilai H (Hue) mulai dari 0 hingga 360. Nilai 0 untuk warna merah, 120 untu warna hijau, 240 untuk warna biru, dan nilai 360 akan kembali menghasilkan warna merah.
- Nilai Saturation mempunyai persentasi mulai dari 0% hingga 100%. Nilai 0 akan menjadi warna grey dan nilai 100 akan menghasilkan warna full atau normal.
- Nilai Lightness mempunyai persentasi mulai dari 0% hingga 100%. Nilai 0 akan menjadi warna hitam, nilai 50 akan menjadi warna full atau normal, dan nilai 100 akan menjadi warna putih.

Warna HSLA (Hue Saturation Lightness Alpha)

Untuk penjelasannya sama menyerupai pada warna HSL, hanya saja warna HSLA mempunyai nilai A (Alpha) atau Opacity yaitu tingkat transparan atau tembus pandang yang sama menyerupai pada warna RGBA yaitu mempunyai nilai 0 hingga 1. Contoh penulisan dan penerapannya menyerupai dibawah ini.

Kode:

<style> .merah-100{color:hsla(0,100%,50%,1)} .merah-75{color:hsla(0,100%,50%,0.75)} .merah-50{color:hsla(0,100%,50%,0.5)} .merah-25{color:hsla(0,100%,50%,0.25)} .merah-0{color:hsla(0,100%,50%,0)} </style> <div class="merah-100">Ini ialah contoh warna merah hsla 1.</div> <div class="merah-75">Ini ialah contoh warna merah hsla 0.75.</div> <div class="merah-50">Ini ialah contoh warna merah hsla 0.5.</div> <div class="merah-25">Ini ialah contoh warna merah hsla 0.25.</div> <div class="merah-0">Ini ialah contoh warna merah hsla 0.</div>

Hasilnya:

Ini ialah contoh warna merah hsla 1.

Ini ialah contoh warna merah hsla 0.75.

Ini ialah contoh warna merah hsla 0.5.

Ini ialah contoh warna merah hsla 0.25.

Ini ialah contoh warna merah hsla 0.

Color Names (Nama Warna)

Penulisan instruksi warna dengan memakai Color Names memang sangat mudah, tentu syaratnya kita harus sanggup menghapal nama-nama warna dalam Bahasa Inggris. Anda sanggup membacanya pada artikel Daftar Nama Warna Lengkap Dengan Kode Hex, RGB, dan HSL disini https://www.w3schools.com/colors/colors_names.asp. Contoh penulisan dan penerapannya dibawah ini.

Kode:

<style> .merah{color:red} .hijau{color:green} .biru{color:blue} </style> <div class="merah">Ini ialah contoh warna merah.</div> <div class="hijau">Ini ialah contoh warna hijau.</div> <div class="biru">Ini ialah contoh warna biru.</div>

Hasilnya:

Ini ialah contoh warna merah.

Ini ialah contoh warna hijau.

Ini ialah contoh warna biru.

Perlu Anda Ketahui:
- Semua browser modern mendukung kurang lebih 140 nama warna (lihat pada artikel daftar nama warna).

Itulah klarifikasi singkat mengenai beberapa jenis dan cara penulisan instruksi warna, kurang lebih ada enam jenis penulisan instruksi warna yang saja jelaskan di atas, supaya kedepannya aku sanggup menjelaskannya secara detail. Semoga bermanfaat.
Sumber http://www.caramanual.com

√ Cara Menonaktifkan Fungsi Seleksi Teks Di Blog Memakai Css

Cara Menonaktifkan Fungsi Seleksi Teks di Blog Menggunakan CSS - Salah satu cara untuk menghindari artikel blog Anda di copy paste ialah dengan mematikan fungsi seleksi teks di blog dengan memakai css, mengapa harus dengan memakai css? Banyak arahan script untuk mencegah postingan di blog dari copas atau copy paste dengan memakai JavaScript namun hal ini masih dapat di atas dengan menonaktifkan fungsi j4vascript pada browser yang digunakan.

Menonaktifkan seleksi teks atau block teks di blog atau website dengan memakai css, jauh lebih kondusif dibandingkan jikalau memakai j4vascript, selain itu dengan memakai css tidak akan besar lengan berkuasa terhadap loading blog Anda. Penggunaan arahan css ini akan menonaktifkan fungsi dari klik kiri pada potongan teks namun masih dapat jikalau kita mengklik link atau url yang ada pada blog tersebut. Untuk mencegah supaya konten atau artikel Anda terhindar dari copas dapat juga untuk mematikan fungsi klik kanan pada blog, untuk tutorial lebih jelasnya dapat Anda baca pada postingan di bawah ini.

Baca juga: Cara Mematikan Fungsi Klik Kanan Pada Blog

Menonaktifkan fungsi seleksi dengan css di blog berarti semua teks yang ada pada blog Anda tidak dapat di select atau di blok. Jika blog atau website Anda membahas mengenai coding atau bahasa pemrograman sebaiknya tidak perlu menonaktifkan fungsi seleksi ini, sebab pengunjung blog Anda akan kesulitan dikala akan mengcopy arahan pemrograman yang mereka butuhkan. Namun jikalau Anda masih ingin tetap mematikan fungsi seleksi dengan css pada blog, sebaiknya beberapa potongan penting pada blog Anda dibiarkan supaya tetap dapat di copy paste, contohnya potongan blockquote, pre, dan code. Biasanya potongan ini sering dipakai untuk menyimpan kode-kode menyerupai HTML, CSS, JavaScript, PHP, maupun arahan pemrograman lainnya.

Baca juga: Cara Agar Artikel Blog Bisa di Copy Paste Pada Bagian Tertentu

Langsung saja kita bahas cara disable text selection, silahkan ikuti langkah-langkahnya dibawah ini:

1. Masuk ke Blogger.com
2. Lalu masuk ke potongan Tema > klik Edit HTML
3. Copy arahan css dibawah ini, lalu Paste sebelum arahan ]]></b:skin> atau </style>

.post-body{  -webkit-user-select: none;  -khtml-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none; }

4. Klik Simpan tema

Kode css di atas akan menonaktifkan fungsi seleksi text yang ada pada blog Anda, sehingga blog Anda akan lebih kondusif terhindar dari copas. Jika dengan menerapkan cara di atas masih kurang nyaman aku sarankan supaya Anda membaca artikel full cara menghindari blog dari copy paste orang lain pada artikel dibawah ini.

Baca juga: [FULL] Cara Mencegah Artikel Blog di Copy Paste

Itulah tutorial mengenai cara menonaktifkan fungsi seleksi teks dengan css di blog, semoga bermanfaat.
Sumber http://www.caramanual.com

√ Cara Semoga Artikel Blog Dapat Di Copy Paste Pada Bab Tertentu

Cara Agar Artikel Blog Bisa di Copy Paste Pada Bagian Tertentu - Sebelumnya saya sudah pernah menciptakan artikel mengenai cara menonaktifkan fungsi seleksi di blog ini berfungsi semoga artikel atau postingan blog tidak sanggup di copy paste orang lain. Namun, bila Anda menonaktifkan fungsi seleksi pada blog maka semua goresan pena atau teks yang ada di blog Anda tidak akan sanggup di blok atau di seleksi sehingga susah untuk di copas. Oleh sebab itu pada kesempatan kali ini saya memberika solusinya semoga artikel masih sanggup di copy paste di belahan tertentu walaupun Anda menonaktifkan fungsi seleksi di blog.

Baca juga: Cara Menonaktifkan Fungsi Seleksi Teks di Blog Menggunakan CSS

Menghindari postingan blog di copy paste orang lain memang perlu dilakukan, ada banyak cara untuk mengatasi semoga artikel blog tidak sanggup di copy paste ibarat dengan mematikan fungsi klik kanan di blog, menonaktifkan fungsi seleksi, memasang script anti ctrl+u, mempersingkat rss feed blog dan masih banyak cara lain semoga artikel blog sulit untuk di copas orang lain.

Baca juga: Cara Mematikan Fungsi Klik Kanan Pada Blog

Cara semoga artikel blog sanggup di copy paste pada belahan tertentu contohnya belahan blockquote, pre, code, dan sebagaian kebanyakan blogger pada umumnya memakai belahan tersebut untuk menyimpan banyak sekali macam arahan script baik itu HTML, CSS, JavaScript, PHP dan sebagainya. Oleh kesudahannya kita perlu memasang arahan css untuk mengaktifkan fungsi seleksi pada belahan tertentu di blog Anda. Kode ini tidak akan besar lengan berkuasa pada loading blog Anda sebab hanya memakai css saja dan ukurannya sangat kecil bahkan saya katakan tidak akan mempengaruhi loading blog Anda menjadi lambat.

Langsung saja bagi Anda yang ingin mencoba cara semoga artikel blog tidak sanggup di copy paste kecuali pada halaman tertentu, silahkan untuk simak tutorialnya dibawah ini.

1. Masuk ke Blogger.com
2. Kemudian klik Tema > Edit HTML
3. Cari kode ]]></b:skin> atau </style> (gunakan ctrl + f supaya lebih gampang)
4. Kemudian Copy arahan css dibawah ini dan Paste sebelum arahan ]]></b:skin> atau </style> (salah satu saja)

.post blockquote,.post pre,.post code{   -webkit-touch-callout:text;   -webkit-user-select:text;   -khtml-user-select:text;   -ms-user-select:text;   -moz-user-select:text; }

5. Lalu klik Simpan tema

Catatan:
Kode di atas berfungsi untuk mengaktifkan atau memperblehkan pengunjung blog atau siapa saja untuk sanggup melaksanakan seleksi teks atau blok teks di blog pada belahan tertentu, arahan css di atas membuktikan bahwa setiap teks yang berada pada belahan .post blockquote, .post pre, dan .post code sanggup di copy paste orang lain. Anda sanggup menyesuaikannya sendiri dengan arahan class yang ada pada template blog Anda.

Baca juga: [FULL] Cara Mencegah Artikel Blog di Copy Paste

Itulah cara semoga artikel blog sanggup di copy paste pada belahan tertentu, bila ada pertanyaan silahkan berikan komentar dibawah ini atau sanggup menghubungi kami melalui kontak yang ada pada blog ini. Semoga bermanfaat.
Sumber http://www.caramanual.com

√ Cara Menciptakan Artikel Terkait Di Tengah Postingan

Cara Membuat Artikel Terkait di Tengah Postingan - Memasang related post atau artikel terkait di dalam postingan blog tepatnya di tengah artikel yaitu salah satu cara untuk menarik perhatian pengunjung untuk membaca artikel lainnya yang ada pada blog Anda. Salah satu alasan memasang artikel terkait di tengah postingan yaitu untuk menggantikan artikel terkait atau related post yang dipakai oleh iklan adsense, kita ketahui bahwa ada beberapa blogger yang sudah memakai iklan dengan format menyerupai artikel terkait atau related post ini yaitu jenis iklan "Matched Content".

Iklan adsense matched content ini mempunyai gaya atau tampilan menyerupai artikel terkait, oleh alasannya itu memasang artikel terkait di dalam postingan blog merupakan solusi untuk menggantikan bab artikel terkait yang dipakai atau diubah menjadi iklan matched content tersebut.

Baca juga: Cara Memasang Iklan Adsense di Tengah Postingan

Cara menciptakan artikel terkait atau related post di tengah-tengah postingan tidak jauh beda dengan tutorial cara memasang iklan adsense di tengah postingan yang sudah aku jelaskan pada artikel sebelumnya. Disini kita hanya perlu menambahkan beberapa instruksi JavaScript pemanis dan instruksi CSS untuk menampilkan widget related post tersebut.

Banyak orang-orang yang bertanya gimana cara memasang atau menciptakan Artikel Terkait, Related Post, Baca Juga di tengah postingan blog? Dan pada kesempatan kali ini aku akan mencoba untuk menjelaskannya cara menciptakan artikel terkait ditengah postingan blog.

Cara Membuat Artikel Terkait di Tengah Postingan Blog

1. Masuk ke Blogger.com
2. Lalu klik Tema > Edit HTML
3. Cari instruksi </head> atau &lt;/head&gt;&lt;!--<head/>--&gt; (gunakan ctrl + f untuk mempermudah)
4. Copy instruksi dibawah ini, lalu Paste diatas kode </head> atau &lt;/head&gt;&lt;!--<head/>--&gt;

<b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> /* related and ads on middle postpage */ #inline_wrapper{display:block;padding:0;margin:0 auto} .related_inline_wrapper{width:100%;display:block;overflow:hidden} .related-post-by-title{width:70%;margin:15px auto;display:block;float:left;position:relative} .related-post-by-title ul{padding:18px 17px 17px 30px;border:1px solid #ddd;margin:0} .related-post-by-title h4{display:inline-block;background:#fff;padding:0 15px;margin:0;position:absolute;top:-12px;left:40px;font-size:15px;font-weight:700} .related-post-by-title li a{font-size:14px;font-weight:700!important;margin-top:10px!important} .ads_middle{margin:15px auto 0;padding:0;text-align:center;display:block;position:relative;} .ads_middle span{background:#ddd;color:#999;display:none!important;margin:15px 0 0;padding:0 9px!important;float:left;font-size:12px;} @media screen and (max-width:600px){.related-post-by-title{width:100%;}} </style>  <script type='text/j4vascript'> //<![CDATA[ var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}} function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];}} relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;} function printRelatedLabels(){var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;document.write('<ul>');while(i<relatedTitles.length&&i<3){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++;}else{r=0;} i++;} document.write('</ul>');document.write();}; //]]> </script> </b:if>

5. Cari instruksi yang menyerupai mirip instruksi dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='artbody' itemprop='articleBody'><data:post.body/></div> </b:if>

Catatan:
Untuk mempermudah mencari instruksi yang menyerupai mirip diatas silahkan cari instruksi <data:post.body/> (kode menyerupai ini di setiap template berbeda-beda dan mungkin lebih dari 2, silahkan pilih instruksi yang ke 2).

6. Setelah ketemu instruksi tersebut (nomor 5), silahkan ganti dengan instruksi dibawah ini

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='widget-middle' id='widget-middle' itemprop='articleBody'><data:post.body/></div> </b:if>

7. Lalu tambahkan instruksi ini dan letakan dibawah instruksi (nomor 6)

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='inline_wrapper' id='inline_wrapper'> <div class='related_inline_wrapper' id='related_inline_wrapper'> <!-- Related posts inline --> <div class='related-post-by-title' id='related-post-by-title'> <h4>Baca juga:</h4> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=3&quot;' type='text/j4vascript'/></b:if> </b:loop> <script type='text/j4vascript'> removeRelatedDuplicates(); printRelatedLabels(); </script> </div> <!-- Related posts inline --> </div> </div> <script type='text/j4vascript'> function insertAfter(addition,target) {var parent = target.parentNode;if (parent.lastChild == target) {parent.appendChild(addition); } else {parent.insertBefore(addition,target.nextSibling);}} var middleads = document.getElementById(&quot;inline_wrapper&quot;);var sasaran = document.getElementById(&quot;widget-middle&quot;); var opsi1 = target.getElementsByTagName(&quot;br&quot;);if (opsi1.length &gt; 0){insertAfter(middleads,opsi1[3]);} var opsi2 = target.getElementsByTagName(&quot;blockquote&quot;);if (opsi2.length &gt; 0){insertAfter(middleads,opsi2[0]);} var opsi3 = target.getElementsByTagName(&quot;h2&quot;);if (opsi3.length &gt; 0){insertAfter(middleads,opsi3[0]);} </script> </b:if>

8. Lalu klik Simpan tema

Catatan:
1. Lihat pada instruksi diatas (nomor 7) disana ada kode max-results=3 angka 3 yaitu jumlah artikel terkait yang ingin ditampilkan.
2. Lihat pada instruksi di atas (nomor 7) disana ada kode [3], [0], dan [0] ini yaitu opsi untuk meletakan posisi widget artikel terkait di dalam postingan, semakin tinggi nilainya maka akan semakin kebawah.

Itulah tutorial mengenai cara menciptakan related post di tengah postingan, memakai artikel terkait di tengah postingan mempunyai banyak manfaat diantaranya yaitu untuk meningkatkan pageview blog dan juga dapat memperkecil bounce rate blog Anda. Kalau aku masih memakai cara manual untuk menawarkan artikel terkait dan tentunya lebih relevan dibandingkan cara otomatis ini.
Sumber http://www.caramanual.com

√ Cara Menciptakan Tombol Demo Dan Download Sederhana Di Postingan Blog

Cara Membuat Tombol Demo dan Download Sederhana di Postingan Blog - Membuat tombol demo dan d0wnl0ad pada suatu blog sangatlah gampang dan sederhana. Sama Halnya menciptakan link ulr pada postingan blog biasa, namun dibentuk lebih menarik dan terlihat lebih keren dengan menunjukkan kotak berwarna tanpa memerlukan dampak elemen namun tetap terlihat indah, dan terang dilihat.

Membuat tombol demo pada postingan blog tidak hanya sekedar tombol demo saja, tetapi sanggup juga di ubah secara bebas contohnya saja mengubahnya dengan tombol Lihat, Kunjung, Contoh Beli dan lain-lain. Pembuatan tombol ini juga sangat menguntungkan bagi para pembaca untuk melihat lebih terang hasil apa yang akan di tampilkan.  Jika ada yang belum paham, cara kerja tombol blog ini yaitu sama halnya link biasa yang diubah menjadi teks atau yang menggantikan tombol link dan diarahkan ke link tujuan jikalau anda menekan tombol tersebut namun tetap ringan sebab memakai isyarat CSS.

Baca Juga: Cara Membuat Tombol dan Download Efek Gradient (Pelangi)

Menurut aku satu atau kedua tombol ini sangatlah penting bagi seorang blogger, terutama bagi pembuat tutorial blogger atau penjual template blog, niscaya menyertakan yang namanya tombol demo atau review. Dengan adanya Tombol link Demo/Result ini juga sanggup menciptakan blog kita jadi  terlihat lebih rapi dan jelas. Penggunaan tombol yang terlihat mencolok ini juga memudahkan para pembaca untuk tidak salah memilih.

Tutorial Cara Praktis Memasang Tombol Demo dan Download pada Postingan Blog

1. Pertama buka Blog anda > Pilih sajian Tema > lalu pilih Edit HTML

2. Kemudian letakkan isyarat berikut sebelum ]]></b:skin> atau </style>

/* Tombol btn-demo dan btn-d0wnl0ad CSS */ .yukibutton{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important} .yukibutton ul {margin:0;padding:0} .yukibutton li{display:inline;margin:5px;padding:0;list-style:none;} .btn-demo,.btn-d0wnl0ad{padding:12px 50px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out} .btn-demo {background-color:#3498DB;} .btn-d0wnl0ad {background-color:#EB1943;}

3. Kemudian Pilih Simpan Tema

4. Untuk menerapkan Kedua Tombol Demo dan Downoad di blog anda, pilih Entri Baru > pilih HTML > letakkan isyarat ini di dalamnya > lalu Publikasikan

<div style="text-align: center;"> <ul class="yukibutton"> <li><a class="btn-demo" href="LINK-ANDA" rel="nofollow noopener" target="_blank">demo</a></li> <li><a class="btn-d0wnl0ad" href="LINK-ANDA" rel="nofollow noopener" target="_blank">d0wnl0ad</a></li> </ul> </div>

Sedangkan Jika anda hanya ingin memasang Tombol Demo Saja sempurna di tengah-tengahnya maka gunakanlah isyarat ini

<div style="text-align: center;"> <ul class="yukibutton"> <li><a class="btn-demo" href="LINK-ANDA" rel="nofollow noopener" target="_blank">demo</a></li> </ul> </div>

Sedangkan jikalau untuk Tombol Download Saja gunakan isyarat ini gunakan isyarat ini

<div style="text-align: center;"> <ul class="yukibutton"> <li><a class="btn-d0wnl0ad" href="LINK-ANDA" rel="nofollow noopener" target="_blank">d0wnl0ad</a></li> </ul> </div>

Keterangan:

Kode	Keterangan
#3498DB	Kode warna untuk tombol Demo
#EB1943	Kode warna untuk tombol Download
LINK-ANDA	Isi dengan Link url yang akan dituju
DEMO dan DOWNLOAD	Dapat diubah sesuka hati (misalnya: Lihat, Beli dan lain-lain)

DEMO

Demikianlah Tutorial Cara Membuat Tombol Demo dan Download di Postingan Blog dari analisyuki.com, jikalau ada sesuatu yang kurang terang dan tidak dimengerti silahkan berkomentar dibawah ini, Terimakasih.

Sumber http://www.analisyuki.com/