Css Fallback Untuk Manipulasi Bab Komentar - Dewa Blogger

Halaman

    Social Items

Buy Now
CSS Fallback untuk Manipulasi Bagian Komentar CSS Fallback untuk Manipulasi Bagian Komentar

Ini mengenai manipulasi bab komentar Blogger yang pernah Saya tuliskan di sini dan di sini. Seperti yang kita tahu bahwa JavaScript mempunyai satu keterbatasan alasannya ialah setiap peramban mempunyai kanal untuk menonaktifkannya. Sehingga kita harap kita dapat menawarkan semacam fallback atau perilaku cadangan pada blog kita ketika sesuatu yang tidak kita inginkan pada JavaScript terjadi. Di sini Saya sudah menciptakan isyarat CSS untuk fallback tampilan bila suatu ketika JavaScript mengalami konflik atau dinonaktifkan oleh pembaca. Dengan cara ini maka meskipun JavaScript telah dinonaktifkan, atau mengalami konflik dengan JavaScript yang lain, tampilan manipulasi komentar Anda akan tetap tampak rapi:

#comments i[rel="code"] {   font:normal normal 12px/normal Monaco,Monospace !important;   font-style:normal;   color:blue; }  #comments i[rel="pre"] {   display:block;   background-color:#333;   font:inherit;   color:white;   white-space:pre;   word-wrap:normal;   overflow:auto;   padding:.5em 1em;   margin:10px 0; }  #comments i[rel="image"], a[href*="//www.youtube.com/embed"] {   display:block;   margin:20px auto;   width:120px;   height:100px;   border:2px solid black;   position:relative;   overflow:hidden; }  #comments i[rel="image"]:before, a[href*="//www.youtube.com/embed"]:before {   content:"Please enable the JavaScript to see this image!";   position:absolute;   top:0;   right:0;   bottom:0;   left:0;   background-color:red;   padding:10px;   font:normal bold 12px/normal Arial,Sans-Serif;   color:white;   text-decoration:none; }  a[href*="//www.youtube.com/embed"]:before {content:"Please enable the JavaScript to see this video!"}  #comments b[rel="quote"] {   font-weight:normal;   display:block;   background-color:pink;   padding:10px 15px;   margin:10px auto; }  #comments b[rel^="h"] {   display:block;   margin-bottom:10px; }  #comments b[rel="h1"] {font-size:240%} #comments b[rel="h2"] {font-size:200%} #comments b[rel="h3"] {font-size:140%} #comments b[rel="h4"] {font-size:120%} #comments b[rel="h5"] {font-size:100%} #comments b[rel="h6"] {font-size:60%}

Pada pada dasarnya ialah kita memakai CSS untuk mengubah semua tampilan elemen-elemen pemicu manipulasi semoga “tampak” sebagai elemen-elemen yang akan menggantikannya nanti. Begitu saja. Bahkan bila Anda belum dapat menerapkan manipulasi komentar yang pernah Saya tuliskan itu, memakai teknik ini saja tolong-menolong juga sudah cukup.

Kode di atas hanya sebagai pola saja, alasannya ialah yang harus menjadi perhatian utama Anda ialah selektornya. Untuk memastikan semoga tampilan fallback tampak sama dengan tampilan default elemen <pre>, <code>, <blockquote> dan tag-tag yang akan menjadi pengganti lainnya, akan lebih baik bila Anda menuliskan selektor-selektor CSS3 tersebut di samping elemen yang dikehendaki JavaScript ibarat ini:

pre, #comments i[rel="pre"] {   /* tampilan default tag `<pre>` ... */ }  blockquote, #comments b[rel="quote"] {   /* tampilan default tag `<blockquote>` ... */ }  h1,#comments b[rel="h1"] { /* tampilan default tag `<h1>` ... */ } h2,#comments b[rel="h2"] { /* tampilan default tag `<h2>` ... */ } h3,#comments b[rel="h3"] { /* tampilan default tag `<h3>` ... */ } h4,#comments b[rel="h4"] { /* tampilan default tag `<h4>` ... */ } h5,#comments b[rel="h5"] { /* tampilan default tag `<h5>` ... */ } h6,#comments b[rel="h6"] { /* tampilan default tag `<h6>` ... */ }

Dan seterusnya… Saya harap Anda mengerti maksud Saya.

Saya menyadari ini ketika Saya iseng mencoba menerjemahkan blog Saya ke bahasa Inggris memakai Google Translate dan ternyata sistem manipulasi komentar untuk mengubah tag <i> dan <b> menjadi tag lain pada blog Saya tidak bekerja. Tapi dengan ini semua dapat teratasi.

Lihat Demo


Sumber https://www.dte.web.id/

Css Fallback Untuk Manipulasi Bab Komentar

CSS Fallback untuk Manipulasi Bagian Komentar CSS Fallback untuk Manipulasi Bagian Komentar

Ini mengenai manipulasi bab komentar Blogger yang pernah Saya tuliskan di sini dan di sini. Seperti yang kita tahu bahwa JavaScript mempunyai satu keterbatasan alasannya ialah setiap peramban mempunyai kanal untuk menonaktifkannya. Sehingga kita harap kita dapat menawarkan semacam fallback atau perilaku cadangan pada blog kita ketika sesuatu yang tidak kita inginkan pada JavaScript terjadi. Di sini Saya sudah menciptakan isyarat CSS untuk fallback tampilan bila suatu ketika JavaScript mengalami konflik atau dinonaktifkan oleh pembaca. Dengan cara ini maka meskipun JavaScript telah dinonaktifkan, atau mengalami konflik dengan JavaScript yang lain, tampilan manipulasi komentar Anda akan tetap tampak rapi:

#comments i[rel="code"] {   font:normal normal 12px/normal Monaco,Monospace !important;   font-style:normal;   color:blue; }  #comments i[rel="pre"] {   display:block;   background-color:#333;   font:inherit;   color:white;   white-space:pre;   word-wrap:normal;   overflow:auto;   padding:.5em 1em;   margin:10px 0; }  #comments i[rel="image"], a[href*="//www.youtube.com/embed"] {   display:block;   margin:20px auto;   width:120px;   height:100px;   border:2px solid black;   position:relative;   overflow:hidden; }  #comments i[rel="image"]:before, a[href*="//www.youtube.com/embed"]:before {   content:"Please enable the JavaScript to see this image!";   position:absolute;   top:0;   right:0;   bottom:0;   left:0;   background-color:red;   padding:10px;   font:normal bold 12px/normal Arial,Sans-Serif;   color:white;   text-decoration:none; }  a[href*="//www.youtube.com/embed"]:before {content:"Please enable the JavaScript to see this video!"}  #comments b[rel="quote"] {   font-weight:normal;   display:block;   background-color:pink;   padding:10px 15px;   margin:10px auto; }  #comments b[rel^="h"] {   display:block;   margin-bottom:10px; }  #comments b[rel="h1"] {font-size:240%} #comments b[rel="h2"] {font-size:200%} #comments b[rel="h3"] {font-size:140%} #comments b[rel="h4"] {font-size:120%} #comments b[rel="h5"] {font-size:100%} #comments b[rel="h6"] {font-size:60%}

Pada pada dasarnya ialah kita memakai CSS untuk mengubah semua tampilan elemen-elemen pemicu manipulasi semoga “tampak” sebagai elemen-elemen yang akan menggantikannya nanti. Begitu saja. Bahkan bila Anda belum dapat menerapkan manipulasi komentar yang pernah Saya tuliskan itu, memakai teknik ini saja tolong-menolong juga sudah cukup.

Kode di atas hanya sebagai pola saja, alasannya ialah yang harus menjadi perhatian utama Anda ialah selektornya. Untuk memastikan semoga tampilan fallback tampak sama dengan tampilan default elemen <pre>, <code>, <blockquote> dan tag-tag yang akan menjadi pengganti lainnya, akan lebih baik bila Anda menuliskan selektor-selektor CSS3 tersebut di samping elemen yang dikehendaki JavaScript ibarat ini:

pre, #comments i[rel="pre"] {   /* tampilan default tag `<pre>` ... */ }  blockquote, #comments b[rel="quote"] {   /* tampilan default tag `<blockquote>` ... */ }  h1,#comments b[rel="h1"] { /* tampilan default tag `<h1>` ... */ } h2,#comments b[rel="h2"] { /* tampilan default tag `<h2>` ... */ } h3,#comments b[rel="h3"] { /* tampilan default tag `<h3>` ... */ } h4,#comments b[rel="h4"] { /* tampilan default tag `<h4>` ... */ } h5,#comments b[rel="h5"] { /* tampilan default tag `<h5>` ... */ } h6,#comments b[rel="h6"] { /* tampilan default tag `<h6>` ... */ }

Dan seterusnya… Saya harap Anda mengerti maksud Saya.

Saya menyadari ini ketika Saya iseng mencoba menerjemahkan blog Saya ke bahasa Inggris memakai Google Translate dan ternyata sistem manipulasi komentar untuk mengubah tag <i> dan <b> menjadi tag lain pada blog Saya tidak bekerja. Tapi dengan ini semua dapat teratasi.

Lihat Demo


Sumber https://www.dte.web.id/