Cara Membuat Menu Navigasi Dengan Tombol Sosial Media di blog ala Evomagz - Evomagz adalah salah satu dari sekian banyak template yang di buat oleh mas sugeng , dengan model yang keren banyak sekali orang yang membeli dan tergiur untuk mempunyai template ini .
Lantas bagaimana cara membuat menu navigasi seperti evomagz?
Berikut saya share cara membuatnya :
!!!
Sebelum proses berlangsung masukkan font awesome di bawah ini pada template anda
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>Letakkan di atas </Head>
PENTING!!! : Sebelum melakukan praktek ada baiknya anda download template lengkap pada blog anda terlebih dahulu , ini untuk menghindari kegagalan dalam proses
1. Masuk ke blogger
2. Pilih Blog
3. Pergi ke template
4. Cari kode </style> atau ]]></b:skin>
PENTING : Untuk memudahkan pencarian , gunakan CTRL+F5. Setelah kode </style> atau kode ]]></b:skin>ketemu , pastekan kode di bawah ini tepat di atas kode </style> atau]]></b:skin>
/* ---- NAVIGASI MENU By Kirik Blog*/6. Cari kode
.menu{font:normal normal 12px Arial,sans-serif;padding:0 0;background:#ffffff;margin:0 auto;height:38px;border:1px solid #f0f0f0;overflow:hidden}
.nav-menu{list-style-type:none;margin:0 0 0 0;padding:0 0 0 0}
.nav-menu li{display:block;float:left;line-height:38px;margin:0 0 0 0;padding:0 0 0 0;border-right:1px solid #f0f0f0}
.nav-menu li a{background:#ffffff;color:#666666;display:block;padding:0 8px}
.nav-menu li a:hover{background:#f5f5f5}
ul.nav-social{height:38px;margin:0 0 0 0;padding:0 0;float:right}
ul.nav-social li{display:inline-block;list-style-type:none;float:right;margin:0 0;padding:0 0;border-right:none;border-left:1px solid #f0f0f0}
ul.nav-social li a{display:inline-block;line-height:38px;height:38px;padding:0 8px;margin:0 0 0 0;color:#666666}
ul.nav-social li a i{line-height:38px}
ul.nav-social li a:hover{color:#fff}
ul.nav-social li a.fcb:hover{background:#3B5A9B}
ul.nav-social li a.gpl:hover{background:#DD4B39}
ul.nav-social li a.twt:hover{background:#1BB2E9}
ul.nav-social li a.ytb:hover{background:#ED3F41}
<div class='header-wrapper'> atau kode <div id='header-wrapper'> atau <header id="header-wrapper">Pokoknya cari elemen div header.
7. Jika kode elemen di atas sudah ketemu , pastekan kode di bawah ini tepat di atas tadi
<div id='nav-wrap'>
<nav class='menu'>
<!-- primary navigation menu start -->
<ul class='nav-menu'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
<!-- primary navigation menu end -->
<!-- social media button start -->
<ul class='nav-social'>
<li><a class='fcb' href='https://www.facebook.com/evotemplatesnet' rel='nofollow'><i class='fa fa-facebook-square fa-2x'></i></a>
</li>
<li><a class='gpl' href='https://plus.google.com/+SugengRiyadi' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'></i></a>
</li>
<li><a class='twt' href='https://twitter.com/blogmassugeng' rel='nofollow'><i class='fa fa-twitter-square fa-2x'></i></a>
</li>
<li><a class='ytb' href='https://www.youtube.com' rel='nofollow'><i class='fa fa-youtube fa-2x'></i></a>
</li>
</ul>
<!-- social media button end -->
</nav>
<div class='clear'></div>
</div>
8. Pertinjau Template , apakah ada error . jika tidak ada kemudian save template
Sekian tutorial singkat Cara Membuat Menu Navigasi Dengan Tombol Sosial Media di blog ala Evomagz , Terimakasih sudah membaca tutorial ini .
