For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat menu nav bottom di blogger

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat widget menu navigasi bottom di blog dengan tampilan sticky alias melayang

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

Menu Navigasi bottom

Menu navigasi bottom merupakan fitur untuk menampilkan menu ataupun tombol yang bertujuan mengarahkan pengunjung untuk menggunakannya

Important: Pengetahuan mengenai cara penggunaan setiap tombol sangat di perlukan, karena nantinya admin hanya akan menampilkan svg standar, dan fungsi label untuk memunculkan tampilan lainnya

Mode sticky

Kerennya tampilan dari menu navigasi bottom nantinya akan tampil dalam mode sticky alias mode melayang, tepat di bawah blog, bukan di bawah postingan blog, hal tersebut bwrtujuan agar pengunjung blog anda bisa lebih mudah untuk mengaksesnya

Support menu layout

Admin telah merancang dan menyesuaikan kode agar support mode layout atau menu tata letak, meskipun support mode layout, tetap saja kamu harus menggunakan menu Edit HTML agar bisa mengedit tampilan semisal mengubah svg, dan lain sebagainya

Info: Selain support mode layout, pengguna menu navigasi bottom ini bisa di terapkan di selueuh template blogger, insyaallah

Contoh Tampilan

Jika kamu penasaran dengan contoh tampilan dari menu navigasi bottom tersebut, silahkan periksa menggunakan tombol di bawah ini oke

Info: Bagaimana sobat degan contoh tampilan nya keren sekali yak

Cara pembuatan

Baiklah sobat ICloudzer sekarang saatnya admin baialan menjelaskan mengenai cara membuat menu navigasi bottom di bawah blog mode sticky ataupun mode melayang, silahkan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini

Kode Javascript

Langkah pertama yang bisa kamu lakukan adalah menyalin kode javascript di bawah ini kemudian letakkan di atas kode </head>

<script>/*<![CDATA[*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('10 H=["\\v\\b\\I\\u\\a","\\s\\8\\a\\9\\b\\a\\11\\u\\a\\D\\a\\d\\b","\\b\\I\\o\\a","\\b\\a\\t\\b\\12\\s\\v\\v","\\b\\a\\t\\b\\X\\m\\d\\b\\a\\d\\b","\\p\\8\\9\\q\\13\\E\\g\\f\\v\\o\\u\\9\\I\\i\\w\\u\\a\\t\\r\\9\\u\\f\\k\\d\\y\\f\\b\\a\\D\\v\\i\\s\\a\\d\\b\\a\\8\\F\\p\\8\\9\\q\\B\\l\\E\\o\\m\\v\\f\\b\\f\\m\\d\\i\\w\\f\\t\\a\\g\\r\\u\\a\\w\\b\\i\\j\\r\\8\\f\\k\\q\\b\\i\\j\\r\\l\\m\\b\\b\\m\\D\\i\\j\\r\\g\\f\\v\\o\\u\\9\\I\\i\\w\\u\\a\\t\\r\\9\\u\\f\\k\\d\\y\\f\\b\\a\\D\\v\\i\\s\\a\\d\\b\\a\\8\\r\\T\\G\\v\\b\\f\\w\\I\\y\\s\\m\\d\\b\\a\\d\\b\\i\\s\\a\\d\\b\\a\\8\\r\\o\\9\\g\\g\\f\\d\\k\\i\\n\\c\\o\\t\\e\\C\\c\\o\\t\\e\\n\\j\\o\\t\\r\\14\\y\\f\\d\\g\\a\\t\\i\\n\\r\\l\\9\\s\\K\\k\\8\\m\\G\\d\\g\\y\\f\\D\\9\\k\\a\\i\\u\\f\\d\\a\\9\\8\\y\\k\\8\\9\\g\\f\\a\\d\\b\\z\\j\\g\\a\\k\\h\\e\\8\\k\\l\\9\\z\\n\\c\\c\\h\\n\\c\\c\\h\\n\\c\\c\\h\\p\\O\\A\\e\\n\\c\\J\\h\\e\\8\\k\\l\\9\\z\\n\\c\\c\\h\\n\\c\\c\\h\\n\\c\\c\\h\\p\\M\\c\\A\\e\\c\\j\\J\\h\\e\\8\\k\\l\\9\\z\\n\\c\\c\\h\\n\\c\\c\\h\\n\\c\\c\\h\\p\\x\\c\\A\\e\\M\\c\\J\\h\\e\\8\\k\\l\\9\\z\\n\\c\\c\\h\\n\\c\\c\\h\\n\\c\\c\\h\\p\\j\\C\\A\\e\\O\\c\\J\\A\\F\\e\\p\\8\\9\\q\\B\\l\\e\\U\\V\\E\\o\\m\\v\\f\\b\\f\\m\\d\\i\\8\\a\\u\\9\\b\\f\\15\\a\\r\\D\\9\\8\\k\\f\\d\\i\\j\\e\\c\\o\\t\\r\\l\\m\\8\\g\\a\\8\\y\\8\\9\\g\\f\\G\\v\\i\\C\\j\\o\\t\\r\\l\\m\\t\\y\\v\\q\\9\\g\\m\\P\\i\\j\\e\\C\\j\\o\\t\\e\\n\\j\\o\\t\\e\\y\\C\\j\\o\\t\\e\\8\\k\\l\\9\\z\\j\\h\\j\\h\\j\\h\\p\\n\\c\\A\\r\\s\\m\\u\\m\\8\\i\\L\\C\\Q\\C\\Q\\C\\M\\F\\e\\p\\8\\9\\q\\B\\l\\e\\U\\V\\i\\d\\m\\b\\z\\p\\8\\9\\q\\B\\l\\R\\A\\E\\P\\f\\g\\b\\q\\i\\N\\n\\o\\t\\r\\q\\a\\f\\k\\q\\b\\i\\N\\n\\o\\t\\r\\T\\G\\v\\b\\f\\w\\I\\y\\s\\m\\d\\b\\a\\d\\b\\i\\s\\a\\d\\b\\a\\8\\r\\l\\9\\s\\K\\k\\8\\m\\G\\d\\g\\i\\L\\w\\w\\w\\g\\w\\s\\F\\e\\p\\8\\9\\q\\B\\l\\e\\p\\8\\9\\q\\B\\l\\R\\E\\T\\G\\v\\b\\f\\w\\I\\y\\s\\m\\d\\b\\a\\d\\b\\i\\s\\a\\d\\b\\a\\8\\r\\o\\9\\g\\g\\f\\d\\k\\i\\j\\e\\C\\j\\o\\t\\r\\q\\a\\f\\k\\q\\b\\i\\N\\n\\o\\t\\r\\w\\u\\a\\t\\y\\k\\8\\m\\P\\i\\C\\r\\l\\9\\s\\K\\k\\8\\m\\G\\d\\g\\i\\L\\g\\a\\x\\c\\x\\c\\Y\\f\\D\\o\\m\\8\\b\\9\\d\\b\\r\\s\\m\\u\\m\\8\\i\\L\\w\\w\\w\\g\\w\\s\\Y\\f\\D\\o\\m\\8\\b\\9\\d\\b\\F\\e\\16\\D\\a\\g\\f\\9\\e\\v\\s\\8\\a\\a\\d\\e\\9\\d\\g\\e\\z\\D\\f\\d\\y\\P\\f\\g\\b\\q\\i\\c\\j\\C\\o\\t\\A\\E\\p\\8\\9\\q\\B\\l\\E\\g\\f\\v\\o\\u\\9\\I\\i\\d\\m\\d\\a\\F\\F\\p\\g\\8\\W\\e\\p\\8\\9\\q\\B\\l\\E\\l\\9\\s\\K\\k\\8\\m\\G\\d\\g\\y\\f\\D\\9\\k\\a\\i\\u\\f\\d\\a\\9\\8\\y\\k\\8\\9\\g\\f\\a\\d\\b\\z\\j\\g\\a\\k\\h\\e\\8\\k\\l\\9\\z\\x\\j\\h\\x\\j\\h\\x\\j\\h\\p\\O\\A\\e\\n\\c\\J\\h\\e\\8\\k\\l\\9\\z\\x\\j\\h\\x\\j\\h\\x\\j\\h\\p\\M\\c\\A\\e\\c\\j\\J\\h\\e\\8\\k\\l\\9\\z\\x\\j\\h\\x\\j\\h\\x\\j\\h\\p\\x\\c\\A\\e\\M\\c\\J\\h\\e\\8\\k\\l\\9\\z\\x\\j\\h\\x\\j\\h\\x\\j\\h\\p\\j\\C\\A\\e\\O\\c\\J\\A\\F\\e\\p\\g\\8\\W\\e\\p\\8\\9\\q\\B\\l\\e\\U\\V\\i\\d\\m\\b\\z\\p\\8\\9\\q\\B\\l\\R\\A\\E\\l\\9\\s\\K\\k\\8\\m\\G\\d\\g\\i\\L\\n\\N\\n\\c\\n\\Q\\F\\e\\p\\g\\8\\W\\e\\p\\8\\9\\q\\B\\l\\e\\p\\8\\9\\q\\B\\l\\R\\E\\l\\9\\s\\K\\k\\8\\m\\G\\d\\g\\i\\L\\n\\N\\n\\c\\n\\Q\\F","\\9\\o\\o\\a\\d\\g\\X\\q\\f\\u\\g","\\q\\a\\9\\g"];17 S=Z[H[1]](H[0]);S[H[2]]=H[3];S[H[4]]=H[5];Z[H[7]][H[6]](S)',62,70,'||||||||x72|x61|x65|x74|x35|x6E|x20|x69|x64|x2C|x3A|x30|x67|x62|x6F|x32|x70|x2E|x68|x3B|x63|x78|x6C|x73|x66|x33|x2D|x28|x29|x4D|x31|x6D|x7B|x7D|x75|_0xb44b|x79|x25|x6B|x23|x37|x34|x39|x77|x36|x4C|rahMbJs|x6A|x3E|x2A|x4B|x43|x21|document|var|x45|x2F|x49|x7A|x76|x40|const'.split('|'),0,{}))
/*]]>*/</script>

Info: Kode javascript di atas sudah admin enkripsi, so jangan mengubah ataupun mengedit kode apapun oke

Kode HTML

Langkah selanjutnya anda bisa menyalin lagi kode HTML di bawah ini kemudian letakkan di bawah kode </b:section>

<b:tag class='rahMb' itemscope='itemscope' itemtype='https://schema.org/SiteNavigationElement' name='div'>
<b:section cond='!data:view.isPreview' id='nav-button-menu' maxwidgets='1' showaddelement='false'>
<b:widget id='HTML05553330' locked='true' title='Menu Button' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[Edit melalui menu edit HTML]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<label class='rahI' for='your_id'>
 <!-- You can remove svg -->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='rahsvg-C' 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></label> 
<label class='rahI' for='your_id'>
<!-- You can remove svg -->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='rahsvg-C' 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></label> 
<label class='rahI' for='your_id'>
<!-- You can remove svg -->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='rahsvg-C' 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></label>
<label class='rahI' for='your_id'>
<!-- You can remove svg -->
<svg class='line' viewBox='0 0 24 24'><g transform='translate(2.500000, 2.500000)'><line class='rahsvg-C' 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></label> 
<label style='background:#de3535;color:#fefefe' class='rahMbL rahI' for='your_id'>
Mode Love
</label>
</b:includable>
</b:widget>
</b:section>
</b:tag>

Info: Kamu bisa mengubah svg, dan fungsi label jika di perlukan, atau menggunakan fungsi href untuk mengarahkan si pengklik ke url tertentu, sesuai tombol yang di inginkan

Penjelasan

Jika menginginkan tampilan sesuai keinginan kamu, silahkan hubungi saja admin, biar kita diskusikan bersama serta menyesuaikan kode dengan template yang anda gunakan

About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.