Membuat menu quick edit custom di blogger

Hello sobat ICloudzer kali ini admin bakalan memberikan informasi mengenai bagaiamana caranya membuat menu Quick Edit custom di blogger

Info: Jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Menu Quick Edit

Apa itu menu quick edit? Menu quick edit kalau di jelaskan secara simple nya adalah sebuah tampilan menu custom pada wesbite terutama di blogger yang bertujuan menampilkan menu setting pannel atau menu setting blogger yang khusus hanya bisa di akses oleh pemilik blog itu sendiri melalui link dan Icon dari menu Quick Edit tersebut

Fungsi Quick Edit

Seperti yang sudah admin jelaskan sebelumnya menu setting quick edit ini sangat bermanfaat bagi si pengelola atau si pemilik blog, karena melalui menu quick Edit tersebut admin bisa dengan mudah mengelola postingan semisal mengedit postingan, melihat statistik, mengelola komentar dan sebagiannya lah, tapi hanya khusus yang memiliki akses kepada websitenya alias admin panel, jika pengunjung random menggunakan menu quik edit ya tidak bisa, khusus bagi panel admin nya saja

Contoh Tampilan

Jika kamu penasaran dengan contoh tampilan dari menu quick edit tersebut silahkan gunakan tombol di bawah ini untuk memeriksa nya

• Periksa

Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak

Cara pembuatan

Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat menu quik edit di blogger, silahkan baca dan pelajari artikel di bawah ini agar tidak salah paham

Kode CSS

Langkah pertama seperti biasa silahkan salin kode CSS di bawah ini kemudian letakkan di atas kode ]]></b:skin>

/* Quick Edit by Icloudice.com */ 
.rahqkMn, .rahqkBtn .svg-2{display:none}.rahqkBtn{position:fixed;bottom:20px;left:20px;background:#fff;box-shadow:0 0 15px rgba(0,0,0,.1);border-radius:50px;z-index:5;overflow:hidden;display:none;align-items:center;justify-content:center;width:35px;height:35px;-webkit-transition:all .2s ease,margin 1s ease;transition:all .2s ease,margin 1s ease;cursor:pointer}.removed .rahqkBtn{display:flex}
.rahqkBtns .rahqkBtn.a{bottom:22.5px;left:22.5px;width:30px;height:30px;z-index:4;box-shadow:none;opacity:0} .rahqkBtns .rahqkBtn.a:hover{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:1} 
.rahqkBtn svg{width:18px;height:18px;margin:auto} .rahqkBtn svg.line{stroke-width:1.3} .rahqkBtn.a svg{width:16px;height:16px} .rahqkMn:checked + .rahqkBtn{-webkit-transform:rotate(360deg);transform:rotate(360deg)} .rahqkMn:checked + .rahqkBtn .svg-1{display:none} .rahqkMn:checked + .rahqkBtn .svg-2{display:block} .rahqkMn:checked ~ .rahqkBtns .rahqkBtn{box-shadow:0 0 15px rgba(0,0,0,.1)} .rahqkMn:checked ~ .rahqkBtns .rahqkBtn.a{opacity:1} .rahqkMn:checked ~ .rahqkBtns .rahqkBtn.a:nth-child(1){bottom:60px} .rahqkMn:checked ~ .rahqkBtns .rahqkBtn.a:nth-child(2){bottom:96px} .rahqkMn:checked ~ .rahqkBtns .rahqkBtn.a:nth-child(3){bottom:130px} .rahqkMn:checked ~ .rahqkBtns .rahqkBtn.a:nth-child(4){left:60px} .rahqkMn:checked ~ .rahqkBtns .rahqkBtn.a:nth-child(5){left:96px} .rahqkMn:checked ~ .rahqkBtns .rahqkBtn.a:nth-child(6){left:130px} .rahqkMn:checked ~ .rahqkBtns + .rahfc{visibility:visible;opacity:1;z-index:4} @media screen and (max-width:896px){.rahqkBtn{margin-bottom:35px;margin-left:25px}} @media screen and (min-width:897px){.rahqkBtn{margin-bottom:5px;margin-left:55px}} .drK .rahqkBtn{background:var(--rahdarkBa)} 

Info: Atau sobat bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

Kode HTML

Langkah selanjutnya setelah menginstal kode CSS diatas, silahkan cari kode <data:post.body/> sampai kode </div>, kemudian letakkan kode di bawah ini tepat di bawah kode tersebut

<!--[ Quick Edit by Icloudice.com ]-->
<div class='qEdit' id='qEdit'>
<input class='rahqkMn hidden' id='offrahqkMn' type='checkbox'/>
<label class='rahqkBtn' for='offrahqkMn'>
<svg class='line svg-1' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.500000)'><path class='svgC' d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'/><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'/></g></svg><svg class='svg-2 line' viewbox='0 0 24 24'><line x1='18' x2='6' y1='6' y2='18'/><line x1='6' x2='18' y1='6' y2='18'/></svg></label><div class='rahqkBtns'><a class='rahqkBtn a' expr:href='&quot;https://www.blogger.com/blog/settings/&quot; + data:blog.blogId' rel='nofollow noopener noreferrer' target='_blank' title='Settings'><svg class='line svg-1' viewBox='0 0 24 24'><g transform='translate(3.500000, 2.500000)'><path class='svgC' d='M8.5,7 C9.88088012,7 11,8.11911988 11,9.5 C11,10.8808801 9.88088012,12 8.5,12 C7.11911988,12 6,10.8808801 6,9.5 C6,8.11911988 7.11911988,7 8.5,7 Z'/><path d='M16.6680023,4.75024695 L16.6680023,4.75024695 C15.9844554,3.55799324 14.4712377,3.15003899 13.2885153,3.83852352 C12.2597626,4.43613205 10.9740669,3.68838056 10.9740669,2.49217572 C10.9740669,1.11619444 9.86587758,0 8.4997646,0 L8.4997646,0 C7.13365161,0 6.02546233,1.11619444 6.02546233,2.49217572 C6.02546233,3.68838056 4.73976662,4.43613205 3.71199461,3.83852352 C2.52829154,3.15003899 1.01507378,3.55799324 0.331526939,4.75024695 C-0.351039204,5.94250065 0.053989269,7.46664934 1.23769234,8.15414609 C2.26546435,8.7527424 2.26546435,10.2472576 1.23769234,10.8458539 C0.053989269,11.5343384 -0.351039204,13.0584871 0.331526939,14.2497531 C1.01507378,15.4420068 2.52829154,15.849961 3.71101391,15.1624643 L3.71199461,15.1624643 C4.73976662,14.5638679 6.02546233,15.3116194 6.02546233,16.5078243 L6.02546233,16.5078243 C6.02546233,17.8838056 7.13365161,19 8.4997646,19 L8.4997646,19 C9.86587758,19 10.9740669,17.8838056 10.9740669,16.5078243 L10.9740669,16.5078243 C10.9740669,15.3116194 12.2597626,14.5638679 13.2885153,15.1624643 C14.4712377,15.849961 15.9844554,15.4420068 16.6680023,14.2497531 C17.3515491,13.0584871 16.9455399,11.5343384 15.7628176,10.8458539 L15.7618369,10.8458539 C14.7340648,10.2472576 14.7340648,8.7527424 15.7628176,8.15414609 C16.9455399,7.46664934 17.3515491,5.94250065 16.6680023,4.75024695 Z'/></g></svg></a><a class='rahqkBtn a' expr:href='&quot;https://www.blogger.com/blog/comments/&quot; + data:blog.blogId' rel='nofollow noopener noreferrer' target='_blank' title='Comments'><svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 2.000000)'><line class='svgC' x1='13.9394' x2='13.9484' y1='10.413' y2='10.413'/><line class='svgC' x1='9.9304' x2='9.9394' y1='10.413' y2='10.413'/><line class='svgC' x1='5.9214' x2='5.9304' y1='10.413' y2='10.413'/><path d='M17.0710351,17.0698449 C14.0159481,20.1263505 9.48959549,20.7867004 5.78630747,19.074012 C5.23960769,18.8538953 1.70113357,19.8338667 0.933341969,19.0669763 C0.165550368,18.2990808 1.14639409,14.7601278 0.926307229,14.213354 C-0.787154393,10.5105699 -0.125888852,5.98259958 2.93020311,2.9270991 C6.83146881,-0.9756997 13.1697694,-0.9756997 17.0710351,2.9270991 C20.9803405,6.8359285 20.9723008,13.1680512 17.0710351,17.0698449 Z'/></g></svg></a><a class='rahqkBtn a' expr:href='&quot;https://www.blogger.com/feeds/&quot; + data:blog.blogId + &quot;/archive&quot;' rel='nofollow noopener noreferrer' title='Backup content'><svg class='line' viewBox='0 0 24 24'><polyline class='svgC' points='8 17 12 21 16 17'/><line class='svgC' x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></a><a class='rahqkBtn a' expr:href='&quot;https://www.blogger.com/blog/stats/week/&quot; + data:blog.blogId' rel='nofollow noopener noreferrer' target='_blank' title='7-days blog stats'><svg class='line' viewBox='0 0 24 24'><g transform='translate(2.300000, 2.300000)'><line class='svgC' x1='5.18305279' x2='5.18305279' y1='7.960947' y2='14.6546312'/><line class='svgC' x1='9.73684179' x2='9.73684179' y1='4.757368' y2='14.6552627'/><line class='svgC' x1='14.2156838' x2='14.2156838' y1='11.498211' y2='14.6550531'/><path d='M-3.55271368e-14,9.73684211 C-3.55271368e-14,2.43473684 2.43473684,2.13162821e-14 9.73684211,2.13162821e-14 C17.0389474,2.13162821e-14 19.4736842,2.43473684 19.4736842,9.73684211 C19.4736842,17.0389474 17.0389474,19.4736842 9.73684211,19.4736842 C2.43473684,19.4736842 -3.55271368e-14,17.0389474 -3.55271368e-14,9.73684211 Z'/></g></svg></a><b:if cond='data:view.isPost'><a class='rahqkBtn a' expr:href='&quot;https://www.blogger.com/blog/posts/&quot; + data:blog.blogId' rel='nofollow noopener noreferrer' target='_blank' title='Dashboard'><svg class='line' viewBox='0 0 24 24'><line x1='8' x2='21' y1='6' y2='6'/><line x1='8' x2='21' y1='12' y2='12'/><line x1='8' x2='21' y1='18' y2='18'/><line class='svgC' x1='3' x2='3.01' y1='6' y2='6'/><line class='svgC' x1='3' x2='3.01' y1='12' y2='12'/><line class='svgC' x1='3' x2='3.01' y1='18' y2='18'/></svg></a><b:else/><a class='rahqkBtn a' expr:href='&quot;https://www.blogger.com/blog/pages/&quot; + data:blog.blogId' rel='nofollow noopener noreferrer' target='_blank' title='Dashboard'><svg class='line' viewBox='0 0 24 24'><line x1='8' x2='21' y1='6' y2='6'/><line x1='8' x2='21' y1='12' y2='12'/><line x1='8' x2='21' y1='18' y2='18'/><line class='svgC' x1='3' x2='3.01' y1='6' y2='6'/><line class='svgC' x1='3' x2='3.01' y1='12' y2='12'/><line class='svgC' x1='3' x2='3.01' y1='18' y2='18'/></svg></a></b:if><b:if cond='data:view.isPost'><a class='rahqkBtn a' expr:href='&quot;https://www.blogger.com/blog/post/edit/&quot; + data:blog.blogId + &quot;/&quot; + data:post.id' rel='nofollow noopener noreferrer' target='_blank' title='Edit post'><svg class='line' viewBox='0 0 24 24'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path class='svgC' d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg></a><b:else/><a class='rahqkBtn a' expr:href='&quot;https://www.blogger.com/blog/page/edit/&quot; + data:blog.blogId + &quot;/&quot; + data:post.id' rel='nofollow noopener noreferrer' target='_blank' title='Edit page'><svg class='line' viewBox='0 0 24 24'><path d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/><path class='svgC' d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/></svg></a></b:if></div><label class='rahfc' for='offrahqkMn' onclick='vibRate(50)'/></div>

Info: Ingat biasanya kode <data:post.body/> banyak, silahkan letakkan pada pos body postingan, atau jika tidak bisa silahkan letakkan di atas kode </body>