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