Cara Membuat Menu Navigasi Author Box Dengan Efek Animasi

Anirocksite.com - Pada kesempatan kali ini saya akan membuat tutorial bagaimana cara membuat Navigasi Author Box lengkap dengan Social Plugin yang hasil seperti yang ada di blog ini, cukup klik icon profil pojok kanan atas dan begitulah hasilnya.

Tutorial ini saya buat karna banyak sekali yang request karna sangat menarik (katanya), nah jadi bagi kamu yang ingin mencoba untuk membuat Menu Navigasi seperti blog ini silahkan copy dan pastekan tutor dibawah ini ke template kamu, dan jangan lupa ganti data-datanya dengan milikmu. Oke langsung saja kita ke tutorial bagaimana cara membuat menu Navigasinya.

Cara Membuat Menu Navigasi Author Box Dengan Efek Wave Animation

Cape nulis login terlebih dahulu ke Blogger dan bla bla bla, jika kamu udah kesini brarti sudah tau harus melakukan apa.

1. Copy kode CSS dibawah ini dan letakkan tepat diatas </b:skin> atau </style>,

Perhatikan!! CSS yang saya beri highlighter itu merupakan posisi tombolnya, karna tidak semua blogger menggunakan Viomagz silahkan atur sendiri. Dan satu lagi mohon maaf karna CSS dibawah ini sangat berantakan, karna saya ngambilnya dari blog experiment saya, silahkan rapikan sendiri jika mau.

/* POSISI TOMBOL NANVIGASI */ 
#iconprofile{position:absolute;top:11px;right:0;z-index:6;font-size:25px;}
/* Menu Navigasi Author Box */
.anirock-profile{z-index: 7;position:fixed;left:0;top:0;width: 100%;height:100%;background-color:rgba(0, 0, 0, 0.5);opacity:0;    visibility:hidden;transform:scale(1.1);transition:visibility 0s linear 0.25s, opacity 0.25s 0s,transform 0.25s;}
.card-profile{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;border-radius:.5rem}.close-button{z-index:8;position:absolute;top:10px;right:10px;width:1.5rem;line-height:1.5rem;text-align:center;cursor:pointer;border-radius:50%;background-color:rgba(255,255,255,.36)}.close-button:hover{background-color:rgba(255,255,255,.81)}.show-anirock-profile{z-index:7;opacity:1;visibility:visible;transform:scale(1);transition:visibility 0s linear 0s,opacity .25s 0s,transform .25s}
@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}@keyframes spin {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}}
.__anirock-profile{border-radius:6px;background:#fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.4);box-shadow:0 0 10px rgba(0,0,0,.4);overflow:hidden;position:relative;width:300px;height:500px}
.__anirock-profile > .image img{position:absolute;z-index:1;opacity:.3;height:200px;width:300px}
.__anirock-profile > .image:after {height:100px;content:'';top:100px;position:absolute;width:100%;z-index:1;background:-webkit-gradient(linear,left top,left bottom,from(rgba(221,65,127,0)),to(#DD417F));background:linear-gradient(rgba(221,65,127,0),#DD417F)}
.__anirock-profile > .wave-animation {position:absolute;height:735px;width:750px;opacity:.6;left:0;top:0;margin-left:-70%;margin-top:-170%;border-radius:40%;background:radial-gradient(#B01DE8,#F34235);-webkit-animation:spin 3s infinite linear;animation:spin 3s infinite linear}
.__anirock-profile > .wave-animation:nth-child(2) {top: 0;-webkit-animation: spin 4000ms infinite linear;animation: spin 4000ms infinite linear;}
.__anirock-profile > .wave-animation:nth-child(3) {top: 0;-webkit-animation: spin 5000ms infinite linear;animation: spin 5000ms infinite linear;}
.__anirock-profile > .admin-info{position:absolute;bottom:170px;left:0;padding:13px;padding-bottom:0;text-align:center}
.__anirock-profile > .admin-info > .about{font-size:10px;font-family:Poppins,sans-serif;font-weight:normal;font-style:italic;color:#e6e6e6}
.__anirock-profile > .info-link {position:absolute;bottom:75px;left:0;right:0;padding:13px;padding-bottom:5px;text-align:center}
.__anirock-profile > .info-link > .title {font-size:15px;font-family:Poppins,sans-serif;font-weight:normal;font-style:italic;color:#000;padding-top:5px;border-top:thin solid #dadce0}
.__anirock-profile > .admin-info > .artist {font-family:Poppins,sans-serif;color:#000;font-size:15px;letter-spacing:.08em;text-transform:Capitalize;padding-bottom:2.5px;border-bottom:thin solid #dadce0}
.admin-info p{margin:0.5em 0;color: #393939; font-size: 12px; font-family: Poppins,sans-serif;}
.admin-info span a{margin:0 10px;}
.info-link span a:hover{color:#ff69b4}
.info-link span a svg path{fill:#fff}
.info-link span a svg {display:inline-block}
@media screen and (max-width:840px) { #iconprofile{position:absolute}}
.info-link ul{margin:0}
a .notif-icon{display:block;font-size:16px;background:#f00;position:absolute;top:0;right:0;width:8px;height:8px;border-radius:10px;animation:notif-icon 1s ease infinite;border: 1px solid rgb(0,0,0,.1);}
@media screen and (max-width:768px){a .notif-icon{top:8px;right:7px}}
@keyframes notif-icon{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.info-link li a.instagram{background:linear-gradient(15deg,#ffb13d,#dd277b,#4d5ed4)}
.info-link li a.facebook{background-color:#3b5999;}
.info-link li a.whatsapp{background-color:#3fbb50;}
.info-link li a.codepen{background-color:#413965;}
.info-link li a.github{background-color:#24292e;}
.info-link svg path{fill:#fff}
.info-link svg {width: 24px; height: 24px; vertical-align: 4px;}
.social-link li{float: left;width: 20%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 2px 5px; padding-bottom:10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 10px 0 0; border-bottom:thin solid #dadce0; }
.social-link li a{display: block; height: 35px; font-size: 22px; color: #fff; text-align: center; line-height: 50px; border-radius: 4px; width: 35px; -webkit-transition: opacity .17s; -o-transition: opacity .17s; transition: opacity .17s; }
.info-link h2{margin:0}
.navigasi h2{margin:0}
.__anirock-profile > .navigasi { position: absolute; bottom: 0; left: 0; right: 0; padding: 13px; text-align: center; }
.__anirock-profile > .navigasi > .title { font-size: 15px; font-family: Poppins,sans-serif; font-weight: normal; font-style: italic; color: #000; }
.navigasi li{float: left; width: 20%; -webkit-box-sizing: border-box; box-sizing: border-box; padding:0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin:0; } 
.navigasi li a{display: block; height: 35px; font-size: 22px; color: #fff; text-align: center; line-height: 50px; border-radius: 4px; width: 35px; -webkit-transition: opacity .17s; -o-transition: opacity .17s; transition: opacity .17s; } 
.navigasi ul{margin:0} 
.navigasi svg path{fill:#3c4043}
.navigasi svg {width: 18px; height: 18px; vertical-align: 4px;}
svg.ffacebook{width:18px;height:18px;vertical-align:6px;}

2. Lalu Copy kembali kode Javascript dibawah ini dan letakkan tepat diatas </body>,

<script type='text/javascript'>
  //<![CDATA[
var _0x3449=["\x2E\x61\x6E\x69\x72\x6F\x63\x6B\x2D\x70\x72\x6F\x66\x69\x6C\x65","\x71\x75\x65\x72\x79\x53\x65\x6C\x65\x63\x74\x6F\x72","\x2E\x74\x72\x69\x67\x67\x65\x72","\x2E\x63\x6C\x6F\x73\x65\x2D\x62\x75\x74\x74\x6F\x6E","\x73\x68\x6F\x77\x2D\x61\x6E\x69\x72\x6F\x63\x6B\x2D\x70\x72\x6F\x66\x69\x6C\x65","\x74\x6F\x67\x67\x6C\x65","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x74\x61\x72\x67\x65\x74","\x63\x6C\x69\x63\x6B","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72"];var modal=document[_0x3449[1]](_0x3449[0]);var trigger=document[_0x3449[1]](_0x3449[2]);var closeButton=document[_0x3449[1]](_0x3449[3]);function toggleModal(){modal[_0x3449[6]][_0x3449[5]](_0x3449[4])}function windowOnClick(_0x1ce8x6){if(_0x1ce8x6[_0x3449[7]]=== modal){toggleModal()}}trigger[_0x3449[9]](_0x3449[8],toggleModal);closeButton[_0x3449[9]](_0x3449[8],toggleModal);window[_0x3449[9]](_0x3449[8],windowOnClick)
//]]>
</script>

3. Terakhir letak kode HTML dibawah ini dan letakkan tepat diatas </header>, dan perhatikan kode yang saya beri Highlighter gradient, silahkan ganti dengan Link gambar profil milikmu.

<a class='trigger' href='javascript:void(0);' id='iconprofile'><svg style='width:24px;height:24px' viewBox='0 0 24 24'>
    <path d='M6,17C6,15 10,13.9 12,13.9C14,13.9 18,15 18,17V18H6M15,9A3,3 0 0,1 12,12A3,3 0 0,1 9,9A3,3 0 0,1 12,6A3,3 0 0,1 15,9M3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3H5C3.89,3 3,3.9 3,5Z' fill='#fff'/>
  </svg><span class='notif-icon'/></a>
<div class='anirock-profile'>
<div class='card-profile'>
<span class='close-button'>&#215;</span>
<div class='__anirock-profile'>
<div class='image'>
  <img itemprop='image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOWZa5ECMSM3tnHXd4I7TtuxBXhFWzbxcWZtvsVw2s9OaZ_RGmkVr8slo1dtFChjLh0Bzz0zEG-hmOYUNQ0gOxQkjwTQZU1MIsm7vnJmNZiZbCbX6p20HzUhBSIF2bZdqoN5P6bqYhOe2/w300-c-h190/79-791169_download-original-hd-anime-girl-sad.jpg'/></div>
<div class='wave-animation'/>
<div class='wave-animation'/>
<div class='wave-animation'/>
<div class='admin-info'>
  <h2 class='about'>Owner / Author / Admin / etc</h2>
<author class='artist'>&#160;&#160;&#160;&#160;Rahman NM&#160;&#160;&#160;&#160;</author>
<p>&quot;Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya.&quot;</p>
  </div>
<!-- Social Link -->
<div class='info-link'>
  <h2 class='title'>Social Plugin</h2>
<ul class='social-link'>
<li><a class='facebook' href='#'><svg class='ffacebook' id='AnirockSVG AnirockSVG' stroke-width='0' version='1.1' viewBox='0 0 310 310' x='0px' xml:space='preserve' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' y='0px'><g id='IconsRepo_bgCarrier'/> <g id='AnirockSVG'> <path d='M81.703,165.106h33.981V305c0,2.762,2.238,5,5,5h57.616c2.762,0,5-2.238,5-5V165.765h39.064 c2.54,0,4.677-1.906,4.967-4.429l5.933-51.502c0.163-1.417-0.286-2.836-1.234-3.899c-0.949-1.064-2.307-1.673-3.732-1.673h-44.996 V71.978c0-9.732,5.24-14.667,15.576-14.667c1.473,0,29.42,0,29.42,0c2.762,0,5-2.239,5-5V5.037c0-2.762-2.238-5-5-5h-40.545 C187.467,0.023,186.832,0,185.896,0c-7.035,0-31.488,1.381-50.804,19.151c-21.402,19.692-18.427,43.27-17.716,47.358v37.752H81.703 c-2.762,0-5,2.238-5,5v50.844C76.703,162.867,78.941,165.106,81.703,165.106z' id='AnirockSVG'/> </g></svg></a></li>
<li><a class='github' href='#' target='_blank'><svg viewBox='0 0 24 24'>
    <path d='M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z'/>
  </svg></a></li>
<li><a class='instagram' href='#' target='_blank'><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'/>
</svg></a></li>
  <li><a class='codepen' href='#' target='_blank'><svg viewBox='0 0 24 24'>
    <path d='M15.09,12L12,14.08V14.09L8.91,12L12,9.92V9.92L15.09,12M12,2C11.84,2 11.68,2.06 11.53,2.15L2.5,8.11C2.27,8.22 2.09,8.43 2,8.67V14.92C2,15.33 2,15.33 2.15,15.53L11.53,21.86C11.67,21.96 11.84,22 12,22C12.16,22 12.33,21.95 12.47,21.85L21.85,15.5C22,15.33 22,15.33 22,14.92V8.67C21.91,8.42 21.73,8.22 21.5,8.1L12.47,2.15C12.32,2.05 12.16,2 12,2M16.58,13L19.59,15.04L12.83,19.6V15.53L16.58,13M19.69,8.9L16.58,11L12.83,8.47V4.38L19.69,8.9M20.33,10.47V13.53L18.07,12L20.33,10.47M7.42,13L11.17,15.54V19.6L4.41,15.04L7.42,13M4.31,8.9L11.17,4.39V8.5L7.42,11L4.31,8.9M3.67,10.5L5.93,12L3.67,13.54V10.5Z'/>
</svg></a></li>
<li><a class='whatsapp' href='#' target='_blank'><svg viewBox='0 0 24 24'>
    <path d='M12.04 2C6.58 2 2.13 6.45 2.13 11.91C2.13 13.66 2.59 15.36 3.45 16.86L2.05 22L7.3 20.62C8.75 21.41 10.38 21.83 12.04 21.83C17.5 21.83 21.95 17.38 21.95 11.92C21.95 9.27 20.92 6.78 19.05 4.91C17.18 3.03 14.69 2 12.04 2M12.05 3.67C14.25 3.67 16.31 4.53 17.87 6.09C19.42 7.65 20.28 9.72 20.28 11.92C20.28 16.46 16.58 20.15 12.04 20.15C10.56 20.15 9.11 19.76 7.85 19L7.55 18.83L4.43 19.65L5.26 16.61L5.06 16.29C4.24 15 3.8 13.47 3.8 11.91C3.81 7.37 7.5 3.67 12.05 3.67M8.53 7.33C8.37 7.33 8.1 7.39 7.87 7.64C7.65 7.89 7 8.5 7 9.71C7 10.93 7.89 12.1 8 12.27C8.14 12.44 9.76 14.94 12.25 16C12.84 16.27 13.3 16.42 13.66 16.53C14.25 16.72 14.79 16.69 15.22 16.63C15.7 16.56 16.68 16.03 16.89 15.45C17.1 14.87 17.1 14.38 17.04 14.27C16.97 14.17 16.81 14.11 16.56 14C16.31 13.86 15.09 13.26 14.87 13.18C14.64 13.1 14.5 13.06 14.31 13.3C14.15 13.55 13.67 14.11 13.53 14.27C13.38 14.44 13.24 14.46 13 14.34C12.74 14.21 11.94 13.95 11 13.11C10.26 12.45 9.77 11.64 9.62 11.39C9.5 11.15 9.61 11 9.73 10.89C9.84 10.78 10 10.6 10.1 10.45C10.23 10.31 10.27 10.2 10.35 10.04C10.43 9.87 10.39 9.73 10.33 9.61C10.27 9.5 9.77 8.26 9.56 7.77C9.36 7.29 9.16 7.35 9 7.34C8.86 7.34 8.7 7.33 8.53 7.33Z'/>
  </svg></a></li></ul>
</div>
<!-- NAVIGASI BLOG -->
<div class='navigasi'>
  <h2 class='title'>Navigasi</h2>
<ul class='navigasi'>
  <li><a href='/p/about.html' target='_blank'><svg 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'/></svg></a></li>
  <li><a href='/p/contact-us.html' target='_blank'><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'/></svg></a></li>
  <li><a href='/p/disclaimer.html' target='_blank'><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'/></svg></a></li>
  <li><a href='/p/privacy-policy.html' target='_blank'><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'/></svg></a></li>
  <li><a href='/p/partner-blog.html' target='_blank'><svg viewBox='0 0 24 24'>
 <path d='M12,5.5A3.5,3.5 0 0,1 15.5,9A3.5,3.5 0 0,1 12,12.5A3.5,3.5 0 0,1 8.5,9A3.5,3.5 0 0,1 12,5.5M5,8C5.56,8 6.08,8.15 6.53,8.42C6.38,9.85 6.8,11.27 7.66,12.38C7.16,13.34 6.16,14 5,14A3,3 0 0,1 2,11A3,3 0 0,1 5,8M19,8A3,3 0 0,1 22,11A3,3 0 0,1 19,14C17.84,14 16.84,13.34 16.34,12.38C17.2,11.27 17.62,9.85 17.47,8.42C17.92,8.15 18.44,8 19,8M5.5,18.25C5.5,16.18 8.41,14.5 12,14.5C15.59,14.5 18.5,16.18 18.5,18.25V20H5.5V18.25M0,20V18.5C0,17.11 1.89,15.94 4.45,15.6C3.86,16.28 3.5,17.22 3.5,18.25V20H0M24,20H20.5V18.25C20.5,17.22 20.14,16.28 19.55,15.6C22.11,15.94 24,17.11 24,18.5V20Z'/></svg></a></li>
  </ul>
</div>
</div>
</div>
</div>

4. Dan simpan atau save template.

Dan sekali lagi untuk yang bukan pengguna template Viomagz, silahkan lihat isi CSS yang saya beri highlighter gradient dan atur posisinya sesuai template atau keinginan, dan mohon maaf sekali lagi apabila CSS tersebut terlalu berantakan.

Sekian tutorial bagaimana cara membuat Menu Navigasi Author Box Dengan Efek Wave Animation yang dapat saya bagikan untuk teman teman blogger, semoga dengan adanya tutorial ini dapat memperindah blog kamu dan semoga Bermanfaat :D

Tags Keyword - Cara Membuat Menu Navigasi Author Box Dengan Efek Wave Animation
Cara membuat Author Box Profile Keren, Cara membuat Menu Navigasi Author Box Seperti Anirocksite, Cara Membuat Author Box Profile Ala Anirocksite, Cara Membuat Menu Navigasi Header Keren, Tutorial Blogger Cara Membuat Navigasi Author Box Profile lengkap dengan Social Link.