-->
×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Social Plugin

Navigasi

Home Blogger

Cara Membuat Menu Navigasi Info Dropdown diBlog

November 08, 2019   • 4 Comments

Untuk tutorial kali ini saya akan membagikan bagaimana cara membuat menu navigasi diblog ala Igniel.

Jika kalian pernah berkunjung ke sebuah situs dan memakai template buatan Igniel, kalian pasti melihat ada icon pengguna di pojok kanan header. Icon tersebut merupakan info profil blog yang dimiliki situs tersebut seperti About, Privacy Policy, Disclaimer, Sitemap, dan ada juga Icon Social Link pada submenu tersebut. Jika kalian ingin menggunakan Info Profil Blog Ala Igniel kalian dapat mengikuti tutorial ini. Yuk simak bagaimana cara membuatnya :

Cara Membuat Info Profil Blog Dropdown Ala Igniel
  1. Pertama login dulu ke  Blogger,
  2. Masuk ke menu Tema Kemudian Pilih Edit HTML,
  3. Cari Kode Berikut  ]]></b:skin>, Kemudian Copy & Pastekan Kode Script dibawah ini tepat diAtas kode   ]]></b:skin>,
    4. /*Nav igniel - Anirocksite.com*/
.igniplexNavigation{display:inline-block;float: right;margin-top: 3px;position:absolute;right:0;top: 0;}
.igniplexNavigation svg{
width:24px;
height:24px;
}
.igniplexNavigation svg path{
fill:#fff;
}
.igniplexNavigation .check:checked ~ .NavMenu{
opacity:1;
visibility:visible;
top:45px;
min-width:200px;
transition:all .3s ease;
z-index:2;
}
.igniplexNavigation .icon .open{
display:block;
}
.igniplexNavigation .icon .close{
display:none;
}
.igniplexNavigation .check:checked ~ .icon .open{
display:none;
}
.igniplexNavigation .check:checked ~ .icon .close{
display:block;
}
.igniplexNavigation .NavMenu{
opacity:0;
visibility:hidden;
position:absolute;
right:0px;
top:0px;
background-color:#fff;
color:#3c4043;
box-shadow:0 16px 24px 2px rgba(0,0,0,0.14), 0 6px 30px 5px rgba(0,0,0,0.12), 0 8px 10px -5px rgba(0,0,0,0.4);
transition:all .3s ease;
}
.igniplexNavigation .NavMenu:before, .igniplexNavigation .NavMenu:after{
content:'';
top:-8px;
right:11px;
border-color:transparent;
border-bottom-color:#e6e6e6;
border-style:dashed dashed solid;
border-width:0 8.5px 8.5px;
position:absolute;
z-index: 1;
height: 0;
width: 0;
}
.igniplexNavigation .NavMenu:before{
border-bottom-color:rgba(0,0,0,.25);
}
.igniplexNavigation .NavMenu #ftprof{
max-width:50px;
max-height:50px;
border-radius:100px;
border:1px solid #fff;
margin:0px;
height: 50px;
width: 50px;
}
.igniplexNavigation .NavMenu ul{
margin:0px;
padding:0px;
}
.igniplexNavigation .NavMenu ul li{
list-style-type:none;
transition:all .3s ease;
}
.igniplexNavigation .NavMenu ul li:hover{
background:#e6e6e6;
}
.igniplexNavigation .NavMenu ul li a{
color:#3c4043;
display:block;
padding:10px 16px;
}
.igniplexNavigation .NavMenu ul li svg{
width:22px;
height:22px;
vertical-align:-7px;
margin-right:10px;
}
.igniplexNavigation .NavMenu ul li svg path{
fill:#3c4043;
}
.igniplexNavigation .NavMenu ul li.head{
background-color:#e6e6e6;
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
align-items:center;
padding:10px 16px;
border-bottom:1px solid #fff;
}
.igniplexNavigation .NavMenu ul li.head svg{
width:16px;
height:16px;
position:relative;
left:-7px;
margin-right:0px;
}
.igniplexNavigation .NavMenu ul li.head svg path{
fill:#4285F4;
stroke:#fff;
stroke-width:3px;
paint-order:stroke;
}
.igniplexNavigation .NavMenu ul li.head ul{
line-height:24px;
margin-left:3px;
}
.igniplexNavigation .NavMenu ul li.head ul li{
padding:0px;
font-size:17px;
line-height:normal;
white-space:nowrap;
}
.igniplexNavigation .NavMenu ul li.head ul li.name{
font-weight:700;
font-size:17px;
margin-bottom:5px;
}
.igniplexNavigation .NavMenu ul li.head ul li.follow a{
background-color:#4285F4;
color:#fff;
font-size:10px;
padding:3px 7px;
border-radius:25px;
display:inline-block;
}
.igniplexNavigation .NavMenu ul li.head ul li.follow a:hover{
background-color:#ff9800;
}
.igniplexNavigation .NavMenu ul li.head ul li.follow a:before{
content:'';
display:inline-block;
width:15px;
height:15px;
margin-right:3px;
margin-left:-3px;
vertical-align:-4px;
background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z' fill='%23fff'/%3E%3C/svg%3E") center no-repeat;
}
.igniplexNavigation .NavMenu ul li.social{
background-color:#e6e6e6;
display:-webkit-box;
display:-webkit-flex;
display:-moz-box;
display:-ms-flexbox;
display:flex;
justify-content:space-between;
padding:0px 15px;
border-top:1px solid #fff;
}
.igniplexNavigation .NavMenu ul li.social button{
margin:0px;
font-size:unset;
}
.igniplexNavigation .NavMenu ul li.social a{
padding:15px 7px;
z-index:1;
position:relative;
}
.igniplexNavigation .NavMenu ul li.social a:hover:before {
content:'';
position:absolute;
z-index:-1;
margin:auto;
background:rgba(0,0,0,.1);
border-radius:100px;
width:36px;
height:36px;
top:0px;
bottom:0px;
left:0px;
right:0px;
transition:opacity .3s linear;
}
.igniplexNavigation .NavMenu ul li.social svg{
margin:0px;
width:22px;
height:22px;
}
.igniplexNavigation .NavMenu ul li.social .facebook svg{
fill:#3a579a;
}
.igniplexNavigation .NavMenu ul li.social .twitter svg{
fill:#00abf0;
}
.igniplexNavigation .NavMenu ul li.social  .instagram svg path{
fill:#9c27b0;
}
.igniplexNavigation .NavMenu ul li.social .pinterest svg path{
fill:#e73e36;
}
.igniplexNavigation .NavMenu ul li.social .ytube svg path{
fill:#ff0000;
}
.igniplexNavigation .NavMenu ul li.social a:hover svg, .igniplexNavigation .NavMenu ul li.social a:hover svg path{
fill:#333333;
}
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
padding: 0;
}
.check {
display: none;
}
label{
cursor:pointer;
display:block;
padding:8px;
background-position:center;
transition:all .5s linear;
}
label:hover{
border-radius:100px;
background:rgba(0,0,0,.2) radial-gradient(circle, transparent 2%, rgba(0,0,0,.2) 2%) center/15000%;
}
label:active, #header-wrapper label:active{
border-radius:100px;
background-color:rgba(0,0,0,.1);
background-size:100%;
transition:background 0s;
}
  4. Letakkan kemudian kode ini tepat diatas  ]]></b:skin>, ( Sengaja saya pisahin karna ini untuk Foto Penggunanya), Ganti teks yang saya Highliht menjadi CSS ImageBase64.
    5. /*CSS FOTO PROFILE*/
.foto {
  background-image: Isi Dengan CSS ImageBase64 kalian; background-size: cover;}


  • Setelah selesai meletakkan kode tersebut, kemudian salin kode HTML ini dan letakkan tepat diatas   </header>,


    • <div class="igniplexNavigation">
<input class="check" id="igniplexNavigation" type="checkbox" />
<label class="icon" for="igniplexNavigation">
<svg class="open" viewbox="0 0 24 24"><path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z"></path></svg>
<svg class="close" viewbox="0 0 24 24"><path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path></svg>
</label>
<br />
<nav class="NavMenu" itemscope="itemscope" itemtype="https://schema.org/SiteNavigationElement">
<ul>
<li class="head">
<div alt="Author" class="foto" id="ftprof" title="Rahman">
<svg viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"></path></svg>

<ul>
<li class="name"Rahman;/li>
<li class="follow"><a href="https://www.blogger.com/follow-blog.g?blogID=92138521721921" rel="nofollow noopener" target="_blank" title="Follow">FOLLOW</a></li>
</ul>
</div>
</li>
<li>
  <a href="/p/about.html" itemprop="url" title="About Me">
<svg viewbox="0 0 24 24"><path d="M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M16.5,16.25C16.5,14.75 13.5,14 12,14C10.5,14 7.5,14.75 7.5,16.25V17H16.5M12,12.25A2.25,2.25 0 0,0 14.25,10A2.25,2.25 0 0,0 12,7.75A2.25,2.25 0 0,0 9.75,10A2.25,2.25 0 0,0 12,12.25Z"></path></svg><span itemprop="name">About Me</span></a>
</li>
<li>
<a href="/p/contact-us.html" itemprop="url" title="Contact">
<svg viewbox="0 0 24 24"><path d="M4,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4C2.89,20 2,19.1 2,18V6C2,4.89 2.89,4 4,4M12,11L20,6H4L12,11M4,18H20V8.37L12,13.36L4,8.37V18Z"></path></svg><span itemprop="name">Contact</span></a>
</li>
<li>
<a href="/p/disclaimer.html" itemprop="url" title="Disclaimer">
<svg viewbox="0 0 24 24"><path d="M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z"></path></svg><span itemprop="name">Disclaimer</span></a>
</li>
<li>
<a href="https:/p/privacy-policy.html" itemprop="url" title="Privacy Policy">
<svg viewbox="0 0 24 24"><path d="M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z"></path></svg><span itemprop="name">Privacy Policy</span></a>
</li>
<li>
<a href="/p/sitemap.html" itemprop="url" title="Sitemap">
<svg viewbox="0 0 24 24"><path d="M7,5H21V7H7V5M7,13V11H21V13H7M4,4.5A1.5,1.5 0 0,1 5.5,6A1.5,1.5 0 0,1 4,7.5A1.5,1.5 0 0,1 2.5,6A1.5,1.5 0 0,1 4,4.5M4,10.5A1.5,1.5 0 0,1 5.5,12A1.5,1.5 0 0,1 4,13.5A1.5,1.5 0 0,1 2.5,12A1.5,1.5 0 0,1 4,10.5M7,19V17H21V19H7M4,16.5A1.5,1.5 0 0,1 5.5,18A1.5,1.5 0 0,1 4,19.5A1.5,1.5 0 0,1 2.5,18A1.5,1.5 0 0,1 4,16.5Z">
<li class='social'>
<a class='facebook' href='AlamatURLFacebook' rel='nofollow noopener' target='_blank' title='Facebook'>
<button class='svg-icon-24-button'>
<svg class='svg-icon-24'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_facebook_dark' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</button>
</a>
<a class='twitter' href='AlamatURLTwitter' rel='nofollow noopener' target='_blank' title='Twitter'>
<button class='svg-icon-24-button'>
<svg class='svg-icon-24'>
<use xlink:href='/responsive/sprite_v1_6.css.svg#ic_24_twitter_dark' xmlns:xlink='http://www.w3.org/1999/xlink'></use>
</svg>
</button>
</a>
<a class='instagram' href='AlamatURLInstagram' rel='nofollow noopener' target='_blank' title='Instagram'><svg viewBox='0 0 24 24'>
<path d='M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z'></path>
</svg></a>
<a class='pinterest' href='AlamatURLPinterest' rel='nofollow noopener' target='_blank' title='Blogger'><svg viewBox='0 0 24 24'>
<path d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H9.29C9.69,20.33 10.19,19.38 10.39,18.64L11.05,16.34C11.36,16.95 12.28,17.45 13.22,17.45C16.17,17.45 18.22,14.78 18.22,11.45C18.22,8.28 15.64,5.89 12.3,5.89C8.14,5.89 5.97,8.67 5.97,11.72C5.97,13.14 6.69,14.89 7.91,15.45C8.08,15.56 8.19,15.5 8.19,15.34L8.47,14.28C8.5,14.14 8.5,14.06 8.41,14C7.97,13.45 7.69,12.61 7.69,11.78C7.69,9.64 9.3,7.61 12.03,7.61C14.42,7.61 16.08,9.19 16.08,11.5C16.08,14.11 14.75,15.95 13.03,15.95C12.05,15.95 11.39,15.11 11.55,14.17C11.83,13.03 12.39,11.83 12.39,11C12.39,10.22 12,9.61 11.16,9.61C10.22,9.61 9.39,10.61 9.39,11.95C9.39,12.83 9.66,13.39 9.66,13.39L8.55,18.17C8.39,19 8.47,20.25 8.55,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3Z'></path>
</svg></a>
<a class='ytube' href='AlamatURLYoutube' rel='nofollow noopener' target='_blank' title='Youtube'><svg viewBox='0 0 24 24'>
<path d='M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z'></path>
</svg></a>
</li>
</ul>
</nav>
</div>
</div>
</div>


  • Sesudah itu Simpan, dan lihat hasilnya.


    • Ikuti tutorial ini dengan tepat, agar tidak terjadi kesalahan.
    Sekian tutorial yang saya bagikan, semoga bermanfaat dan dapat mempercantik blog kalian^^
    Tags Blogger Desain Blog

    Creativity of codes and exploiting, with code we can do something fun.
    Facebook Instagram Twitter
    Show Comments!
    Hide comments

    4 Responses to "Cara Membuat Menu Navigasi Info Dropdown diBlog"

    Kebijakan berkomentar :

    Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

    Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

    Dilarang berkomentar menggunakan Link Aktif,

    Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

    1. AnonymousMarch 18, 2020 at 11:04 AM

      kok ngasih tutorial gak bisa di copy hmm

      ReplyDelete
      Replies
      1. Miradeviluke Rock ツMarch 19, 2020 at 2:45 AM

        Terimakasih telah berkomentar, sekarang codenya udah bisa dicopy 🙏

        Delete
    2. AdminApril 16, 2020 at 4:27 AM

      Gan, mending tutorialnya disimpen rapi di dalam lemari, percuma saja karena gak bisa dicopy kodenya :)

      ReplyDelete
      Replies
      1. Miradeviluke Rock ツApril 17, 2020 at 7:22 AM

        Kalau agan mau copy dari PC, gunakan CTRL + C

        Kalau dari HP tahan lama aja

        Bisa dicopas codenya gan

        Delete

    Subscribe to: Post Comments (Atom)

    Iklan Atas Artikel

    Iklan Tengah Artikel

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel

    © Copyright 2020 Anirock Site - All Rights Reserved Created With