Cara Membuat Bottom Menu Navigasi di Blogger

Cara Membuat Bottom Menu Navigasi di Blogger

 Oke guys, dipembahasan kali ini saya akan membuat tutorial untuk kalian semua Cara Membuat Bottom Menu Navigasi Di Blogger.

Tutorial ini saya dapat dari gurudzgn.com dan bisa setelah saya mencobanya. Untuk kalian yang ingin melihat demonya, silahkan kunjungi website PetikDua.com


Baiklah, sebelumnya pastikan kalian mempunyai Akun Google untuk login di Blogger ya, oke lanjut saja ke tutorialnya


Tutorial Pertama

Buka Blogger > Tema > Edit HTML > Cari tag Footer penutup </footer>  kemudian tambahkan kode dibawah ini, tepat diatas kode </footer>

<div class="menubottom"><!--float menubottom by gurudzgn.com-->
      <nav>
        <ul>
          <li class="ripple">
            <a href="#" itemprop="url" title="Home"><svg height="24" viewbox="0 0 24 24" width="24">
<path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z"></path></svg><span itemprop="name">Home</span></a>
          </li>
          <li class="ripple"><span class="ink animate" style="height: 111.594px; width: 111.594px; top: -30.0157px; left: 14.6093px;"></span>
<a arial-label="Menu" class="menu-toggle" href="javascript:;"><svg height="24" viewBox="0 0 24 24" width="24">
<path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg><span itemprop="name">Menu</span></a>
</li>
          <li class="ripple">
            <a href="#" itemprop="url" title="Share"><svg height="24" viewbox="0 0 24 24" width="24">
<path d="M18,16.08C17.24,16.08 16.56,16.38 16.04,16.85L8.91,12.7C8.96,12.47 9,12.24 9,12C9,11.76 8.96,11.53 8.91,11.3L15.96,7.19C16.5,7.69 17.21,8 18,8A3,3 0 0,0 21,5A3,3 0 0,0 18,2A3,3 0 0,0 15,5C15,5.24 15.04,5.47 15.09,5.7L8.04,9.81C7.5,9.31 6.79,9 6,9A3,3 0 0,0 3,12A3,3 0 0,0 6,15C6.79,15 7.5,14.69 8.04,14.19L15.16,18.34C15.11,18.55 15.08,18.77 15.08,19C15.08,20.61 16.39,21.91 18,21.91C19.61,21.91 20.92,20.61 20.92,19A2.92,2.92 0 0,0 18,16.08Z"></path></svg><span itemprop="name">Share</span></a>
          </li>
          <li class="ripple">
            <a href="#" itemprop="url" title="Kategory"><svg height="24" viewbox="0 0 24 24" width="24">
<path d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13C15,12.45 14.55,12 14,12H8V10H10C10.55,10 11,9.55 11,9V7H13C14.1,7 15,6.1 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16C9,17.1 9.9,18 11,18M12,2C6.48,2 2,6.48 2,12C2,17.52 6.48,22 12,22C17.52,22 22,17.52 22,12C22,6.48 17.52,2 12,2Z"></path></svg><span itemprop="name">Kategori</span></a>
          </li>
          <li class="ripple">
            <a href="#" itemprop="url" title="Show Chat"><svg height="24" viewbox="0 0 24 24" width="24">
<path d="M16.75,13.96C17,14.09 17.16,14.16 17.21,14.26C17.27,14.37 17.25,14.87 17,15.44C16.8,16 15.76,16.54 15.3,16.56C14.84,16.58 14.83,16.92 12.34,15.83C9.85,14.74 8.35,12.08 8.23,11.91C8.11,11.74 7.27,10.53 7.31,9.3C7.36,8.08 8,7.5 8.26,7.26C8.5,7 8.77,6.97 8.94,7H9.41C9.56,7 9.77,6.94 9.96,7.45L10.65,9.32C10.71,9.45 10.75,9.6 10.66,9.76L10.39,10.17L10,10.59C9.88,10.71 9.74,10.84 9.88,11.09C10,11.35 10.5,12.18 11.2,12.87C12.11,13.75 12.91,14.04 13.15,14.17C13.39,14.31 13.54,14.29 13.69,14.13L14.5,13.19C14.69,12.94 14.85,13 15.08,13.08L16.75,13.96M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C10.03,22 8.2,21.43 6.65,20.45L2,22L3.55,17.35C2.57,15.8 2,13.97 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.72 4.54,15.31 5.46,16.61L4.5,19.5L7.39,18.54C8.69,19.46 10.28,20 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z"></path></svg><span itemprop="name">WhatApp</span></a>
          </li>
        </ul>
      </nav>
    </div>

Selanjutnya Kedua

Kalian harus menambahkan style css dibawah ini tepat diatas kode </body>
 
<style>
/* Menubottom */
.menubottom{display:none}@media screen and (max-width:800px){.menubottom{position:relative/*fixed*/;right:0;left:0;z-index:5;/*add*/bottom:0}.menubottom nav ul{display:flex!important;width:100%!important;padding-left:0;justify-content:space-between!important;margin-bottom:0;flex-direction:row!important;list-style:none}.menubottom nav ul li{width:100%!important;list-style:none;}.menubottom nav ul li a{display:block;text-decoration:none;padding:.4rem 1rem}.menubottom nav ul li a svg{width:25px;height:25px;fill:#9aa3a9;}.menubottom nav ul li a span{color:#4b4f56;position:relative;font-size:8px;display:block;top:-5px}#openShare{display:block}#closeShare{display:none}#jpthemeFooter{padding-bottom:55px;position:relative;}}@media screen and (max-width:768px){.menubottom{left:0;text-align:center;width:100%;position:fixed;display:block}.menubottom nav{background-color:rgb(255,255,255);background-image: linear-gradient(110deg,rgba(33,150,243,0.1) 16%,rgba(33,150,243,0.1) 17%,rgba(33,150,243,0.05) 17%,rgba(33,150,243,0.05) 23%,transparent 8.5%,transparent 78%,rgba(33,150,243,0.05) 78%,rgba(33,150,243,0.05) 84%,rgba(33,150,243,0.1) 84%,rgba(33,150,243,0.1));display:block!important;position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;box-shadow:0 -1px 3px rgba(0,0,0,.3);}.menubottom ul li{float:left;width:100px;height:100%;transition:/*background-color 0.2s linear 0s*/;transition:/*all .5s linear*/;background-position:center;display:block}
.float_wrapper_menubottom{position:fixed;left:0;bottom:0;right:0;transition:all .3s ease-out;-webkit-transform:translateZ(0);transform:translateZ(0);font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Oxygen-Sans', 'Helvetica Neue', Arial, sans-serif;}.floatscroll{bottom:0}.floatno-scroll{bottom:-55px;}.jpthemeMenu .menu-toggle{display:none}.jpthemeMenu .back-toggle{display:block!important}}.jpthemeMenu .back-toggle{display:none}
</style>
Setelah itu kalian hanya klik Simpan Template, lalu silahkan di cek hasilnya.
Sekian tutorial dari saya, sampai jumpa di artikel selanjutnya
Download Counter Strike Extreme V.7 (Terbaru)

Download Counter Strike Extreme V.7 (Terbaru)

 


Pada kesempatan kali ini saya akan berbagi Game yang dulunya sangat Populer pada masanya, ya tentu saja seperti judulnya yaitu Counter Strike Extreme. Game ini terakhir Update 2019 lalu yaitu dengan versi 7 . Dan yang lebih bagusnya lagi, aplikasi Counter Strike Extreme ini masih bisa bermain Offline loh!

Untuk kalian yang ingin download Aplikasi atau Game ini kalian bisa download di paling bawah nanti ya!

Fitur Lengkap Game Counter Strike V.7

- Tambahan puluhan senjata : Tidak hanya satu ataupun dua senjata, tetapi banyak senjata baru yang dirilis di v.7 ini yang dapat kamu mainkan. Mulai dari senjata biasa, senjata masa lalu, dan senjata masa depan ada yang wajib kalian mainkan

- Beragam aneka Map baru : Tidak hanya senjata baru loh! map baru juga ditambahkan di versi 7 ini, gimana? kalian mau coba kah?

- Mode Hantu dan juga Zombie : Wah, keren sekali bukan? selain Hantu dan Zombie, kalian bisa melawan BOSS atau Rajanya loh gengs!

- Cutome Character : Kalian tau gak sih? sekarang di counter strike bisa mengganti character custome loh! Contohnya Anime dan masih banyak lagi!

- Mendukung Resolusi HD : Gimana gengs? buat kalian yang mempunyai PC/LAPTOP Gaming, kalian wajib mencoba fitur yang baru dari Counter Strike Extreme ini loh! kalo gak bakal sayang banget PC ATAU LAPTOP kalian wkwk

Download Counter Strike Extreme

Untuk kalian yang penasaran, bisa langsung download dibawah ini ya Sujud Gengs!
Download Template XAnime untuk Download dan Stream Anime

Download Template XAnime untuk Download dan Stream Anime


 Pada kesempatan kali ini, saya akan membagikan Template XAnime untuk Download dan Streaming Anime. 

Template ini dibuat oleh orang Vietnam yang saya gak tau namanya. 

Untuk seluruhnya masih berbahasa Vietnam, kalian bisa menggantinya dengan Edit HTML / Kalian juga bisa dengan NotePad/WordPad, dan juga kalian bisa menggantinya dengan aplikasi android yaitu Quick Edit dan sebagainya. 

Untuk fitur saya juga kurang paham, karna saya mendapatkan Template ini satu (1) tahun yang lalu, dan saya repost ulang di blog sujud ini. 

Saya sudah mencari demo Template XAnime ini, tapi tidak menemukannya karna saya lupa dengan blognya. 

Untuk kalian yang ingin melihat Demo dari Template ini silahkan cek screenshot dibawah ini


Untuk demo link, saya belum punya. Jadi hanya screenshotan saja. 

Kalian bisa download Template nya dibawah ini

Informasi Template
  • Version: -
  • Upload Date: 20-01-2021
  • Release: -

Features & Change Log

Download Median-UI v.1.4 Redesign

Download Median-UI v.1.4 Redesign

 



Pada kesempatan kali ini, saya akan membagikan Template Median-UI v. 1.4 gratis yang sudah saya redesain ulang, tapi saya hanya sedikit merubahnya. Seperti Header yang ditambahkan  .border-pading: 20px ; . 

Dan lumayan banyak merubah dari warna Template tersebut. 

Dan juga saya lumayan banyak menambahkan CSS penting untuk Blog Niche Download Template. Untuk dekomentasi nyusul saja ya, sekalian saya buat tutorialnya. 

Oke langsung saja kalian download dibawah ini ya

Informasi Template
  • Version: 1.4
  • Redesign Date: 17-01-2021
  • Release: Selasa,19-01-2021

Features & Change Log

Download Template Fletro Safelink

Download Template Fletro Safelink


Deskripsi

Pada update FletroPro v.5.5 kali ini, fokusnya adalah pada penyederhanaan tampilan template dan menyediakan lebih banyak space dan margin agar tampilan tidak terlihat ramai, beberapa element juga dibuat lebih jauh, anda mungkin menemukan widget memiliki lebih banyaj ruang dari tampilan sebelumnya, untuk kalian yang ingin download, silahkan cek fitur dibawah ini terlebih dahulu

Featured

Fitur Checklist
Google Pagespeed Cek
Google Testing Tools Cek
Ads Optimize Yes
Lazy Image & Lazy Yotube Yes
Layout v3 dan Widget v2 Yes
Complete Widget Style Yes
Adaptive Header Yes
Switch Post Layout Yes
Multipost Layout see
Page Split see
Infinite Scroll Yes
Related Posts 5 Style Yes
Blogger Comment v2 Yes
Custom Error Page Yes
Chat & Back to Top Button Yes
Random generate link Yes
2x click to bring up the link button Yes
More...

Download

Download Demo
Langganan: Postingan (Atom)