√ 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/

√ Cara Menciptakan Pengaruh Gradasi Warna Pada Teks Dan Background Blog

Buat kalian yang masih utak-atik template blog supaya tampilan dan desainnya bagus mungkin sanggup menambahkan efek gradasi warna pada teks judul atau pada background blog ibarat bab navigasi footer atau lainnya.

Efek warna gradasi (color gradient) ini memakai proteksi arahan CSS yang pastinya tidak akan menciptakan blog Anda berat, arahan css ini memang di khususkan untuk mendesain sebuah tampilan halaman situs web semoga terlihat lebih manis dan bagus.

Penggunaan arahan css ini sangat luas jikalau Anda paham cara penerapannya, dengan arahan css ini Anda sanggup memperlihatkan efek warna-warni pada teks atau judul blog Anda, selain itu sanggup mengubah warna background blog dengan warna gradasi yang akan mempercantik tampilan blog Anda.

Namun disini aku hanya akan memperlihatkan tutorial menciptakan efek warna gradasi untuk judul postingan dan juga background pada blog Anda.

Kode css yang sanggup Anda gunakan untuk menciptakan efek gradasi pada teks judul dan background blog sanggup Anda lihat di bawah ini.

DEMO

Untuk Teks:

Cara Membuat Efek Gradasi Warna Pada Teks

h1 {background: -webkit-linear-gradient(45deg, #5E64EE, #5EEE66);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}

Kode css di atas berfungsi untuk mengubah judul teks yang memakai tag heading H1. Anda sanggup mengubah atau menambahkan tag heading lainnya misal H2 dan H3. Selain untuk mengubah teks, tulisan, atau judul postingan, arahan css di atas juga sanggup dipakai untuk mengubah warna pada judul widget blog Anda.

Untuk Background:

Cara Membuat Efek Gradasi Warna Pada Background

.post h1 {background:linear-gradient(45deg, #5E64EE, #5EEE66);}

Kode css di atas berfungsi untuk mengubah warna background pada judul postingan yang mempunyai tag heading H1, Anda sanggup menyesuaikannya dengan tag heading yang dipakai pada template blog Anda. Selain itu, arahan css ini sanggup dipakai untuk mengubah warna background ibarat pada bab sajian navigasi, judul widget, dan juga footer.

Kedua arahan css di atas merupakan arahan dasar yang sanggup menampilkan efek warna gradasi, mungkin Anda masih perlu menyesuaikannya dengan komplemen arahan lainnya ibarat padding dan color pada teks.

Baca juga: Cara Mengubah Warna Pada Kata Pertama Judul Postingan dan Widget

Untuk mengubah warna semoga sesuai dengan harapan Anda silahkan gunakan tools online Kode Warna HTML.

Kode ID dan Class yang dipakai pada umumnya sebagai berikut:
.post h1 {kode css} ini untuk judul postingan dengan tag heading h1.
.post h2 {kode css} ini untuk judul postingan dengan tag heading h1.
.sidebar-wrapper h4 {kode css} ini untuk judul widget dengan tag heading h4.
.sidebar-wrapper h3 {kode css} ini untuk judul widget dengan tag heading h3.
#header-container {kode css} atau #header-wrapper {kode css} ini untuk sajian navigasi.
#footer {kode css} atau #footer-container {kode css} ini untuk footer.

Catatan:
Mungkin bagian-bagian arahan id dan class pada template yang Anda gunakan berbeda, untuk mengetahuinya silahkan gunakan inspect element, caranya klik pada bab tertentu yang ingin Anda ketahui id atau classnya lalu klik inspect.

Itulah artikel mengenai cara menciptakan efek gradasi warna pada teks dan background blog, semoga bermanfaat.
Sumber http://www.caramanual.com

√ Cara Menciptakan Widget Popular Post Keren Warna Warni Di Blog

Pada kesempatan kali ini aku akan membahas sedikit mengenai cara modifikasi widget popular post biar terlihat keren dan full color warna-warni menyerupai pelangi dilengkapi dengan nomor urut 1 hingga 10.

Widget popular post atau yang kita kenal sebagai widget artikel populer termasuk salah satu widget yang paling banyak dipakai oleh blogger.

Widget ini berfungsi untuk menampilkan artikel atau postingan yang paling banyak di cari oleh pengunjung dan paling terkenal di blog atau website tersebut.

Pernahkah Anda berpikir bahwa widget popular post sanggup kita modifikasi sehingga mempunyai tampilan yang keren dan penuh dengan warna-warni yang sanggup memanjakan mata ketika melihatnya?

Jika widget popular post blog Anda sudah di modifikasi atau di edit dengan isyarat css lainnya, sebaiknya isyarat tersebut di hapus terlebih dahulu kemudian di ganti dengan isyarat css yang gres dari sini.

Baca juga: Cara Membuat Efek Gradasi Warna Pada Teks dan Background Blog

Nah pribadi saja kali ini aku akan coba menciptakan tutorial edit widget popular post supaya terlihat keren dan menarik dilengkapi imbas warna-warni menyerupai pelangi, silahkan ikuti langkah-langkahnya di bawah ini.

Cara Modifikasi Widget Popular Post Keren Warna-Warni

Pastikan dulu blog Anda sudah memasang widget popular post, jikalau Anda belum memasang widget popular post silahkan ikuti langkah-langkahnya dari pertama hingga akhir, tapi kalau blog Anda sudah memasang widget popular post pribadi saja ke langkah nomor 3 dan ikuti hingga akhir.

1. Masuk ke Blogger.com.
2. Klik Tata Letak > Tambahkan Gadget > Postingan Populer > Simpan.
3. Klik Tema.
4. Cari isyarat ]]></b:skin> atau </style>.
5. Copy isyarat CSS di bawah ini, kemudian Paste sebelum isyarat ]]></b:skin> atau </style>.

/* Popular Post */  .PopularPosts ul, .PopularPosts li, .PopularPosts li img, .PopularPosts li a, .PopularPosts li a img {  margin: 0 0;  padding: 0 0;  list-style: none;  border: none;  background: none;  outline: none; }  .PopularPosts ul {  margin: .5em 0;  list-style: none;  color: black;  counter-reset: num; }  .PopularPosts ul li img {  display: block;  margin: 0 .5em 0 0;  width: 50px;  height: 50px;  float: left; }  .PopularPosts ul li {  background-color: #eee;  margin: 0 10% .4em 0 !important;  padding: .5em 1.5em .5em .5em !important;  counter-increment: num;  position: relative; }  .PopularPosts ul li:before, .PopularPosts ul li .item-title a, .PopularPosts ul li a {  font-weight: normal;  color: #000 !important;  text-decoration: none; }  .PopularPosts ul li:before {  content: counter(num) !important;  display: block;  position: absolute;  background-color: #333;  color: #fff !important;  width: 22px;  height: 22px;  line-height: 22px;  text-align: center;  top: 0px;  right: 0px;  padding-right: 0px !important; }   /* Set color and level */  .PopularPosts ul li:nth-child(1) {  background-color: #A51A5D;  margin-right: 1% !important }  .PopularPosts ul li:nth-child(2) {  background-color: #F53477;  margin-right: 2% !important }  .PopularPosts ul li:nth-child(3) {  background-color: #FD7FAA;  margin-right: 3% !important }  .PopularPosts ul li:nth-child(4) {  background-color: #FF9201;  margin-right: 4% !important }  .PopularPosts ul li:nth-child(5) {  background-color: #FDCB01;  margin-right: 5% !important }  .PopularPosts ul li:nth-child(6) {  background-color: #DEDB00;  margin-right: 6% !important }  .PopularPosts ul li:nth-child(7) {  background-color: #89C237;  margin-right: 7% !important }  .PopularPosts ul li:nth-child(8) {  background-color: #44CCF2;  margin-right: 8% !important }  .PopularPosts ul li:nth-child(9) {  background-color: #01ACE2;  margin-right: 9% !important }  .PopularPosts ul li:nth-child(10) {  background-color: #94368E;  margin-right: 10% !important }  .PopularPosts .item-thumbnail {  margin: 0 0 0 0; }  .PopularPosts .item-snippet {  font-size: 11px; }  .widget-content ul li {  margin: 0;  padding: 6px 0px;  border-bottom: 1px solid #ededed }  .widget-content ul li:last-child {  border-bottom: medium none !important }  .widget-content ul li a {  color: #333 }  .widget-content ul li a:hover {  color: #C80441 }  .item-date {  font-size: 11px;  font-style: italic;  font-weight: bold;  color: #FFCC00 }

6. Klik Simpan tema.

Catatan:
Anda sanggup mengganti warnanya sesuai dengan keinginan, silahkan gunakan tools online Kode Warna HTML.

Itulah artikel mengenai cara menciptakan widget popular post keren warna warni di blog, caranya cukup gampang bukan? Anda hanya perlu menambahkan isyarat css untuk melaksanakan modifikasi widget popular post. Selamat mencoba, semoga bermanfaat.
Sumber http://www.caramanual.com

√ Cara Menciptakan Widget Recent Post Keren Warna Warni Di Blog

Widget recent post atau yang kita kenal dengan widget artikel terbaru berfungsi untuk menunjukkan warta kepada visitor untuk membaca postingan terbaru yang ada pada blog tersebut.

Sebelumnya aku sudah pernah menciptakan tutorial modifikasi widget popular post keren dengan warna-warni ibarat pelangi. Widget popular post ini merupakan fitur yang sudah tersedia di blogger oleh alasannya itu penggunaan widget ini jauh lebih banyak di bandingkan dengan widget recent post.

Berbeda dari widget popular post, widget recent post ini tidak tersedia pada fitur blogger, maksudnya ialah saat Anda ingin menambahkan widget gres biasanya di bab tata letak blog saat Anda klik tambahkan gadget maka akan muncul widget-widget yang cukup banyak untuk dapat Anda gunakan pada blog.

Karena widget artikel terbaru atau recent post ini tidak tersedia di blogspot, maka kita perlu membuatnya dengan cara manual yaitu memakai sedikit derma arahan JavaScript.

Jika Anda ingin mengedit tampilan widget recent post ini dapat Anda gunakan arahan css, di sini aku akan menunjukkan arahan css yang dapat menciptakan widget recent post terlihat lebih keren dari biasanya dengan warna warni ibarat pelangi.

Jika Anda tertarik menciptakan widget recent post atau ingin memodifikasinya supaya terlihat anggun dan keren silahkan ikuti langkah-langkahnya di bawah ini.

Cara Membuat Widget Recent Post di Blogger

1. Masuk ke Blogger.com.
2. Klik Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Kemudian Copy dan Paste arahan JavaScript di bawah ini.

<div id='recent-wrapper' class='recent-wrapper'> <ul id="recent-posts"></ul> <script> //<![CDATA[ numPosts = 10; function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><a href="'+link+'" title="√ Cara Membuat Widget Recent Post Keren Warna Warni di Blog" target="_blank">'+title+'</a></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src='/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp); //]]> </script> </div>

4. Klik Simpan.

Catatan:
Anda dapat mengatur jumlah postingan yang di tampilan pada widget recent post, caranya cukup mengubah bab arahan numPosts = 10; silahkan ganti 10 dengan jumlah yang Anda inginkan. Namun saran aku tidak mengubahnya lebih dari 10 postingan.

Cara Modifikasi Widget Recent Post Keren Warna Warni

1. Masuk ke Blogger.com.
2. Klik Tema > Edit HTML.
3. Cari arahan ]]></b:skin> atau </style>.
4. Kemudian Copy arahan CSS di bawah ini, kemudian Paste sebelum arahan ]]></b:skin> atau </style>.

/* Recent Post */ #recent-wrapper{display:block;position:relative;overflow:hidden;font-size:15px} #recent-wrapper ul{margin:0;padding:0;list-style-type:none;} #recent-wrapper ul li{position:relative;padding:10px 35px 10px 10px!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;} #recent-wrapper ul li:first-child {background:#E11E28;width:100%} #recent-wrapper ul li:first-child:after{content:"01";} #recent-wrapper ul li:first-child + li{background:#FD3C03;width:97%} #recent-wrapper ul li:first-child + li:after{content:"02";} #recent-wrapper ul li:first-child + li + li{background:#FECB09;width:94%} #recent-wrapper ul li:first-child + li + li:after{content:"03";} #recent-wrapper ul li:first-child + li + li + li{background:#6EBE27;width:91%;} #recent-wrapper ul li:first-child + li + li + li:after{content:"04";} #recent-wrapper ul li:first-child + li + li + li + li{background:#149A48;width:88%;} #recent-wrapper ul li:first-child + li + li + li + li:after{content:"05";} #recent-wrapper ul li:first-child + li + li + li + li +li{background:#15d3c3;width:85%} #recent-wrapper ul li:first-child + li + li + li + li +li:after{content:"06";} #recent-wrapper ul li:first-child + li + li + li + li + li +li{background:#288abb;width:82%} #recent-wrapper ul li:first-child + li + li + li + li +li +li:after{content:"07";} #recent-wrapper ul li:first-child + li + li + li + li + li + li +li{background:#863e86;width:79%} #recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after{content:"08";} #recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li{background:#71264b;width:76%} #recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li:after{content:"09";} #recent-wrapper ul li:first-child + li + li + li + li + li + li + li + li +li{background:#502234;width:73%} #recent-wrapper ul li:first-child + li + li + li + li + li + li + li +li +li:after{content:"10";} #recent-wrapper ul li:first-child:after, #recent-wrapper ul li:first-child + li:after, #recent-wrapper ul li:first-child + li + li:after, #recent-wrapper ul li:first-child + li + li + li:after, #recent-wrapper ul li:first-child + li + li + li + li:after, #recent-wrapper ul li:first-child + li + li + li + li + li:after, #recent-wrapper ul li:first-child + li + li + li + li + li + li:after, #recent-wrapper ul li:first-child + li + li + li + li +li + li +li:after, #recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li:after, #recent-wrapper ul li:first-child + li + li + li + li +li + li + li +li +li:after {position:absolute;top:5px;right:5px;line-height:1em;text-align:center;color:rgba(0,0,0,0.2); font-size:23px !important; font-weight:700} #recent-wrapper ul li a{color:white;text-decoration:none}

5. Klik Simpan tema.

Catatan:
Kode CSS di atas berfungsi jikalau artikel terbaru atau widget recent post yang Anda gunakan tidak lebih dari 10 postingan, jikalau Anda menampilkan lebih dari 10 postingan pada widget recent post maka tampilannya tidak akan terlihat keren lagi.

Code by Bung Frangki

Itulah artikel mengenai cara menciptakan widget recent post keren warna-warni di blog, caranya cukup gampang bukan? selamat mencoba dan supaya bermanfaat.
Sumber http://www.caramanual.com

√ Cara Gampang Menciptakan Tabel Responsive Di Blogger

Cara Praktis Membuat Tabel Responsive di Blogger - Membuat postingan yang responsive merupakan salah satu cara untuk meningkatkan pengunjung di blog. Apalagi dalam menciptakan tabel di dalam postingan blog tentunya harus responsive baik pada tampilan desktop atau pada tampilan mobile.

Oleh sebab itu pada kesempatan kali ini aku akan membagikan cara menciptakan tabel keterangan pada postingan blog. Tabel ini juga aku gunakan dan aku terapkan sendiri di dalam blog saya, sebab selain tampilannya yang keren, responsive juga cocok untuk tampilan smartphone (mobile).

Tentunya hal yang baik jikalau kita menerapkan tabel pada postingan blog, sebab blog kita tidak terlihat menyerupai koran, lebih menarik, sanggup menarik minat pengunjung untuk berlama-lama dalam blog kita, juga memudahkan para pembaca dalam memahami isi postingan kita.

Sebenarnya beberapa ahad yang kemudian aku pernah membagikan cara menciptakan tabel keterangan. Namun sebab ada beberapa alasan, maka aku menciptakan tabel responsive terbaru ini, sebab berdasarkan aku terlihat lebih baik dan tentunya cocok untuk banyak sekali macam template pada blog.

Cara Membuat Tabel Responsive di Blogger

1. Petama masuk ke Blog anda > Pilih Tema > kemudian pilih Edit HTML

2. Kemudian letakkan arahan ini sempurna berada di atas arahan ]]></b:skin> atau </style>

/* Table Post Responsive */ table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} table{border-collapse:collapse;border-spacing:0;} .post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;} .post-body table tr th {border:1px solid #6f7785;color:#fff;padding:14px 10px;text-align:left;vertical-align:top;font-size:16px} .post-body table th {background:#747d8c;} .post-body table tr th:hover{background:#57606f} .post-body table.tr-caption-container {border:1px solid #f6f8f9;} .post-body table caption{border:none;font-style:italic;} .post-body td, .post-body th{color:#57606f;vertical-align:top;text-align:left;font-size:15px;padding:3px 5px;} .post-body table tr:nth-child(even) > td {background-color:#ecf0f1;} .post-body table tr:nth-child(odd) > td {background-color:#f6f8f9;} .post-body table tr:nth-child(even) > td:hover {background-color:#ecf0f1;} .post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px} .post-body td a:hover {color:#7f9bdf;border-color:#adbce0;} .post-body td a[target="_blank"]:after {margin-left:5px;} .post-body table.tr-caption-container td {border:none;padding:8px;} .post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;} .post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;} table {max-width:100%;width:100%;margin:1.5em auto;} table.section-columns td.first.columns-cell{border-left:none} table.section-columns{border:none;table-layout:fixed;width:100%;position:relative} table.columns-2 td.columns-cell{width:50%} table.columns-3 td.columns-cell{width:33.33%} table.columns-4 td.columns-cell{width:25%} table.section-columns td.columns-cell{vertical-align:top} table.tr-caption-container{padding:4px;margin-bottom:.5em} td.tr-caption{font-size:80%}

Contonya sanggup dilihat menyerupai gambar di bawah ini:

3. Untuk menerapkannya di dalam postingan kita, pilih sajian Postingan > Entri Baru > Pilih sajian HTML

4. kemudian letakkan arahan ini di dalamnya

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody> <tr><th>Nama</th><th>Keterangan</th> </tr> <tr><td>Analis</td><td>Analisyuki</td> </tr> <tr><td>Analis</td><td>Analisyuki</td> </tr> <tr><td>Analis</td><td>Analisyuki</td> </tr> <tr><td>Analis</td><td>Analisyuki</td> </tr> </tbody> </table>

Contoh penerapannya sanggup di lihat menyerupai ini:

5. Kemudian edit kata-katanya sesuai harapan anda, kemudian Publikasikan

DEMO

Sampai disini cukup sekian saja dari saya, biar dengan tutorial cara memasang tabel pada postingan blog ini sanggup bermanfaat bagi kita semua, jikalau ada sesuatu yang tidak dipahami sanggup pribadi menuju kolom komentar, Terimakasih.

Sumber http://www.analisyuki.com/

√ Cara Menciptakan Contact Form Responsive Di Blogger

Cara Membuat Contact Form Responsive di Blogger - Saya akan membagikan tutorial cara menciptakan contact form / contact us pada blog dengan mudah, serta dengan tampilan dampak yang keren dan lezat di pandang.

Sebenarnya aku sudah pernah membahas ihwal cara menciptakan kontak pada blog, namun pada kesempatan kali ini aku akan membagikan Contact Form yang lebih responsive, lebih keren dan cocok untuk banyak sekali macam template pada blog. Sebelumnya aku jelaskan terlebih dahulu contact form ini mempunyai beberapa nama yang cukup terkenal menyerupai contact us, hubungi kami, kontak namun bekerjsama mempunyai pengertian yang sama.

Halaman kontak atau contact form pada blog sangatlah penting, selain sebagai kelengkapan dalam blog contact form juga berfungsi untuk  mempermudah pengunjung untuk menghubungi admin atau pemilik blog secara pribadi atau bertanya suatu hal pribadi atau melaksanakan kerjasama.

Cara menciptakan Contct Form pada blog ini sangatlah mudah, kita tidak perlu memakai jasa website pihak ketiga untuk menggunakannya, cukup dengan menyalin arahan di bawah ini kita pribadi sanggup menggunakannya dengan mudah dan tentunya dengan tampilan yang lebih keren. Untuk itu aku akan membagikan 2 Versi Contact Form, anda tinggal menentukan mana yang anda suka dan ingin digunakan.

Cara Membuat Contact Form Responsive di Blogger

1. Masuk ke Blog anda > pilih sajian Halaman > kemudian buat Halaman Baru

2. Selanjutnya pilih sajian HTML > kemudian letakkan arahan ini di dalamnya

Versi 1

<style scoped="" type="text/css">   /*<![CDATA[*/      .contact-form-box {width: 100%;margin: 20px auto;padding: 0}   #contactForm .floating-label-form-group {font-size: 14px;position: relative;margin-bottom: 0;padding-bottom: 20px;border-bottom: 1px solid #ddd}   #contactForm .floating-label-form-group.floating-label-form-group-with-focus {position: relative}   #contactForm .floating-label-form-group:after,   #contactForm .floating-label-form-group:before {position: absolute;bottom: -1px;width: 0;height: 2px;background-color: #36d7b7;content: "";transition: width .4s ease-in-out;display: block}   #contactForm .floating-label-form-group:before {right: 50%}   #contactForm .floating-label-form-group:after {left: 50%}   #contactForm .floating-label-form-group.floating-label-form-group-with-focus:after,   #contactForm .floating-label-form-group.floating-label-form-group-with-focus:before {width: 50%}   #contactForm .floating-label-form-group input,   #contactForm .floating-label-form-group textarea {z-index: 1;position: relative;padding-right: 0;padding-left: 0;border: none;border-radius: 0;font-size: 14px;font-family: Roboto, Arial, sans-serif;font-weight: 400;background: 0 0;box-shadow: none!important;resize: none}   #contactForm .floating-label-form-group label {display: block;z-index: 0;position: relative;top: 2em;margin: 0;font-size: 12px;font-family: Roboto, Arial, sans-serif;font-weight: 300;line-height: 1.764705882em;vertical-align: middle;vertical-align: baseline;opacity: 0;     -webkit-transition: top .3s ease, opacity .3s ease;     -moz-transition: top .3s ease, opacity .3s ease;     -ms-transition: top .3s ease, opacity .3s ease;     transition: top .3s ease, opacity .3s ease   }   #contactForm .floating-label-form-group::not(:first-child) {padding-left: 14px;border-left: 1px solid #eee}   #contactForm .floating-label-form-group-with-value label {top: 0;     opacity: 1}   #contactForm .floating-label-form-group-with-focus label {color: #36d7b7}   #contactForm {border-top: 1px solid #ddd}   #contactForm textarea.form-control {height: auto}   #contactForm .form-control {display: block;width: 100%;color: #555}   #contactForm input:active,   #contactForm input:focus,   #contactForm textarea:active,   #contactForm textarea:focus {     outline: 0   }   #contactForm .btn,   #contactForm .contact-form-button-submit {font-family: Roboto, Arial, sans-serif;font-weight: 700;text-transform: uppercase;font-size: 18px;letter-spacing: 1px;border-radius: 0;padding: 0 25px;height: 51px;line-height: 51px;color: #333;background-color: #fff;border: 1px solid #ccc;cursor: pointer;margin: 20px 0 0;background-image: none}   #contactForm .contact-form-button {height: 51px;line-height: 51px}   #contactForm .btn-default:focus,   #contactForm .btn-default:hover,   #contactForm .contact-form-button-submit:focus,   #contactForm .contact-form-button-submit:hover {background-color: #36d7b7;border: 1px solid #36d7b7;color: #fff}   .contact-form-error-message-with-border,   .contact-form-success-message-with-border {background: #fff;border: 1px solid #ddd;bottom: 0;box-shadow: 0 2px 4px rgba(0, 0, 0, .2);color: #666;font-size: 16px;font-weight: 400;line-height: 30px;opacity: 1;position: static;text-align: center;margin: 20px 0 0}   .contact-form-cross {height: 11px;margin: 0 5px;vertical-align: 0!important;width: 11px;     -moz-box-shadow: none!important;     -webkit-box-shadow: none!important;     -goog-ms-box-shadow: none!important;     box-shadow: none!important}   .contact_layout {text-align: center;position: fixed;top: 0;left: 0;bottom: 0;right: 0;background:rgba(0, 0, 0, .8);z-index: 99999}   .contact_message {width: 50%;background: #fff;border-radius: 5px;padding: 20px;border: 1px solid transparent;text-align: center;color: #333;position: absolute;top: 10%;left: 50%;margin-left: -25%;     -moz-box-sizing: border-box;     -webkit-box-sizing: border-box;box-sizing: border-box;}   .contact_message:before {content: "\f164";font-family: FontAwesome;font-weight: 500;font-size: 30px;display: block;margin-bottom: 10px;}   @media screen and (max-width:768px) {     .contact_message {width: 90%!important;margin-left: -45%!important;}     .contact-form-box {width: 100%;}   }   /*]]>*/  </style>  <br /> <div class="contact-form-box"> <div> Jika ada sesuatu yang ingin ditanyakan secara probadi, anda sanggup mengirimkan email melalui form di bawah ini.<br /> <b><br /></b></div> <form id="contactForm" name="contact-form"> <div class="floating-label-form-group"> <label>Name</label>       <input class="form-control" id="ContactForm1_contact-form-name" name="name" placeholder="Name" type="text" value="" /> </div> <div class="floating-label-form-group"> <label>Email Address</label>       <input class="form-control" id="ContactForm1_contact-form-email" name="email" placeholder="Email Address" type="text" value="" /> </div> <div class="floating-label-form-group"> <label>Message</label>       <textarea class="form-control" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea>     </div> <input class="btn btn-default" id="ContactForm1_contact-form-submit" type="button" value="Kirim" />     <br /> <div class="clear"> </div> <div style="max-width: 100%; text-align: left; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/j4vascript"></script> <script> $(function() {   $("body").on("input propertychange", ".floating-label-form-group", function(e) {     $(this).toggleClass("floating-label-form-group-with-value", !!$(e.target).val());   }).on("focus", ".floating-label-form-group", function() {     $(this).addClass("floating-label-form-group-with-focus");   }).on("blur", ".floating-label-form-group", function() {     $(this).removeClass("floating-label-form-group-with-focus");   }); }); </script> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/j4vascript"></script> <script type="text/j4vascript"> if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = 'id blog anda';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d1877745665889604279','url blog anda','id blog anda'); _WidgetManager._RegisterWidget("_ContactFormView", new _WidgetInfo("ContactForm1", "footer1", null, document.getElementById("ContactForm1"), {"contactFormMessageSendingMsg": "Sending...", "contactFormMessageSentMsg": "<div class='contact_layout'> <div class='contact_message'> <b>Your message has been sent</b>.<br/>Jika tidak ada halangan dan kesibukan lainnya, admin akan pribadi merespon pesan yang Anda kirimkan.</div> </div> <br/>", "contactFormMessageNotSentMsg": "Message could not be sent. Please try again later.", "contactFormInvalidEmailMsg": "A valid email address is required.", "contactFormEmptyMessageMsg": "Message field cannot be empty.", "title": "Contact Form", "blogId": "id blog anda", "contactFormNameMsg": "Name", "contactFormEmailMsg": "Email", "contactFormMessageMsg": "Message", "contactFormSendMsg": "Send", "submitUrl": "https://www.blogger.com/contact-form.do"}, "displayModeFull")); </script>

3. Jika sudah pilih Publikasikan

DEMO 1

Kode di atas pribadi sanggup anda gunakan dan sanggup bekerja dengan baik ketika mengirim pesan, Untuk Versi 2 nya anda sanggup mengunakan arahan di bawah ini.

Versi 2

<div class="analisyuki-icon"> <i class="material-icons md-48">contact_mail</i> </div> <br /> Jika ada sesuatu yang ingin ditanyakan secara pribadi, anda sanggup mengirimkan email melalui form di bawah ini. Admin akan pribadi merespon pesan yang anda kirim, terimkasih.<style scoped="scoped">   .analisyuki-icon{text-align:center;}   @font-face {   font-family: 'Material Icons';   font-style: normal;   font-weight: 400;   src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype'); } .material-icons {   font-family: 'Material Icons';   font-weight: normal;   font-style: normal;   font-size: inherit;   display: inline-block;   line-height: 1;   text-transform: none;   letter-spacing: normal;   word-wrap: normal;   white-space: nowrap;   direction: ltr;   vertical-align:middle;   /* Support for all WebKit browsers. */   -webkit-font-smoothing: antialiased;   /* Support for Safari and Chrome. */   text-rendering: optimizeLegibility;   /* Support for Firefox. */   -moz-osx-font-smoothing: grayscale;   /* Support for IE. */   font-feature-settings: 'liga'; }   .md-48{font-size: 100px;     color: #1E8BC3;     padding: 10px;     background: #dde3ff;     border-radius: 100px;} .analisyuki-code{float:none;position:relative;margin-bottom:45px;margin-right:10px}.analisyuki-code input,.analisyuki-code textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.analisyuki-code input:focus,.analisyuki-code textarea:focus{outline:none}.analisyuki-code label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.analisyuki-code input:focus   label,.analisyuki-code input:valid   label,.analisyuki-code textarea:focus   label,.analisyuki-code textarea:valid   label{top:-20px;font-size:14px;color:#f14062}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#f14062;transition:1.2s cubic-bezier(1, 0.12, 0.25, 1) all}.bar:before{left:50%}.bar:after{right:50%}.analisyuki-code input:focus   .bar:before,.analisyuki-code input:focus   .bar:after,.analisyuki-code textarea:focus   .bar:before,.analisyuki-code textarea:focus   .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.analisyuki-code input:focus   .highlight,.analisyuki-code textarea:focus   .highlight{animation:inputHighlighter .3s ease}.analisyuki-code input:focus   label,.analisyuki-code input:valid   label,.analisyuki-code textarea:focus   label,.analisyuki-code textarea:valid   label{top:-20px;font-size:13px;color:#f14062} input#ContactForm1_contact-form-email-message{height:150px} input#ContactForm1_contact-form-submit{width:100%;color:#fff!important;background:#000000;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px} input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} #ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px} </style>  <br /> <form name="contact-form"> <div class="analisyuki-code"> <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> account_circle </i> Name</label> </div> <div class="analisyuki-code"> <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> email </i> Email</label> </div> <div class="analisyuki-code"> <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="highlight"></span> <span class="bar"></span> <label><i class="material-icons"> mode_comment </i> Message</label> </div> <link crossorigin="anonymous" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" rel="stylesheet"></link> <input id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </form> <script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/j4vascript"></script> <script type="text/j4vascript"> //<![CDATA[ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6154920600666252113';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogIDx3d6154920600666252113','//analisyuki.com/','6154920600666252113'); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': '6154920600666252113', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); //]]> </script>

Untuk tampilan Versi 2 ganti semua arahan yang di tandai 6154920600666252113 dengan ID Blog anda dan analisyuki.com dengan Blog Anda, Jika sudah silahkan Publikasikan.

DEMO 2

Bagaimana berdasarkan anda? cukup kere kan dampak dan tampilannya. Sebelum aku akhiri dan bagi yang belum tau BlogID anda, kau sanggup melihatnya sempurna berada di URL pada sajian blog anda.

Saya rasa cukup sekian tutorial dari aku ihwal Cara Membuat Contact Form Responsive di Blogger. Jika ada sesuatu yang kurang dipahami silahkan bertanya di kolom komentar, Terimakasih.

Sumber http://www.analisyuki.com/

√ Cara Menciptakan Double Click To Select Di Blogger

Cara Membuat Double Click To Select di Blogger - Double clik to select pada blog ini pada umumnya berfungsi untuk menandai teks supaya kita inginkan supaya sanggup di klik 2 kali dengan gampang tanpa menyeleksinya terlebih dahulu.

Double click to select ini biasanya dipakai oleh para tutorial blogger untuk mempermudah pembaca untuk menyalin aba-aba yang dituju. Kita hanya perlu mengklik kiri 2 kali pada teks yang dituju dan sanggup dengan gampang menyalinnya.

Terlebih lagi bagi para blogger yang memakai scrip anti copy paste atau anti seleksi, dengan dampak double clik to select ini anak menunjukkan dampak khusus pada teks atau kata yang kita inginkan supaya sanggup gampang di seleksi hanya dengan memakai double click.

Secara keseluruhan double click to select ini berfungsi untuk menambah nilai lebih di mata pengunjung, tampilan teks blog jadi lebih menarik, mempermudah membaca untuk menentukan teks dalam artikel tersebut tanpa harus menentukan manual dan cukup dengan dua kali klik saja, dan manfaat yang paling besar dengan memakai fitur ini yaitu membaca sanggup dengan gampang mengikuti tutorial yang diberikan. Oleh alasannya yaitu itu, pribadi saja kita simak baik-baik tutorialnya.

Cara Membuat Double Click to Select di Blogger

1. Login ke blog anda > pilih hidangan Tema > pilih Edit HTML

2. Cari aba-aba ]]></b:skin> atau </style> lalu letakkan aba-aba ini sempurna di atasnya

/* Double Click To Select */ kbd{position:relative;color:#28a1f0;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;} kbd:before{   position:absolute;   content:'Double click to select';   display:table;   bottom:23px;   left:0;   background:#45bae6;   color:#fff;   padding:4px;   border-radius:2px;   font-size:75%;   line-height:1;   opacity:0;   visibility:hidden;   transform:scale(0.8);   z-index:2;   transition:all .3s;} kbd:hover:before{transform:scale(1.0);opacity:1;visibility:visible;transition:all .3s} 

3. Jika sudah selanjutnya pilih Simpan Tema

Nama	Keterangan
#28a1f0	Kode warna pada teks yang ditampilkan*
Double click to select	Tulisan evek hover*
#45bae6	Kode warna teks backround pada dampak hover*
75%	Ukuran font teks pada dampak hover*

*Kode pada tabel tersebut sanggup anda ubah sesuai dengan impian anda

Cara Menerapkan Efek Double Click To Select di Bloger Agar Bisa Digunakan

1. Buat Postingan Baru > pilih hidangan HTML > lalu letakkan aba-aba di bawah ini di dalamnya

<kbd>KETIK-TULISAN-ANDA</kbd> 

Kemudian ganti goresan pena KETIK-TULISAN-ANDA dengan teks yang kau inginkan.

Cukup sekian tutorial dampak kbd Cara Membuat Double Click To Select di Blogger, jikalau ada sesuatu yang masih kurang dipahami anda sanggup pribadi berkomentar di bawah, Terimakasih.

Sumber http://www.analisyuki.com/