Skip to main content

cara membuat menu navigasi di blog terbaru

cara membuat menu navigasi di blog terbaru - sebenarnya banyak sih totorial yang menjelaskan tentang cara membuat menu navigasi di blog,
namun biar tambah banyak jadi aku membahas nya lagi...hehehe boleh kan


#1
MEMBUAT MENU NAVIGASI TANPA ADA SOSIAL MEDIA
langsung saja pergi ke blog anda

>klik menu edit template lalu klik edit html
>kemudian search dengan menggunakan control +F
cari kode ini >]]></b:skin> 
nah klo sudah ketemu silah kan tempelkan kode di bawah ini di atas ]]></b:skin> 

/*CB Top Menu*/
#top{margin:auto;padding: 0;width: 100%;background:#eeeded;border-bottom:1px solid #ddd;}
#top-wrap{margin:auto;padding: 0;width: 950px;background:#eeeded;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#080705;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:11px;display:block;padding:10px 10px;color:#222;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}
#navbar-iframe {display: none !important;}


*catatan
untuk angka warna merah=untuk mengedit lebar widged
untuk warna background  = #eeded
untuk warna hurup           = #222

selanjutnya cari lagi kode  <body>
kemudian tempelkan kode di bawah di bawah kode <body>

<div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='http://myagusbray.blogspot.com/' title='Top Menu'>Top Menu</a></li>
<li><a href='http://myagusbray.blogspot.com/' title='Contact'>Contact</a></li>
<li><a href='http://myagusbray.blogspot.com/' title='Disclaimer'>Disclaimer</a></li>
<li><a href='http://myagusbray.blogspot.com/' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='http://myagusbray.blogspot.com/' title='Facebook'>Facebook</a></li>
<li><a href='http://myagusbray.blogspot.com/' title='Twitter'>Twitter</a></li>
<li><a href='http://myagusbray.blogspot.com/' title='Google Plus'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>


*catatan
ganti link: http://myagusbray.blogspot.com dan nama navigasi nya sesuai kemauan anda

kemudian simpan tmplate hasil editan anda,lalu lihat deh hasil nya...keren kan


#2
meembuat menu navigasi plus medsos

langsung aja seperti biasa,silahkan masuk ke template > edit Html

> cari dulu kode </head>
>klo sudah ketemu tempelkan kode di bawah ini di atas </head>


<style>
#menutop{width:100%;margin:0 auto;height:45px;background:#fff;border:1px solid #e9e9e9;}
#menutop ul,#menutop li{margin:0;padding:0;list-style:none;}
#menutop ul{height:45px}
#menutop li{float:left;display:inline;position:relative;font-family:&#39;Open Sans&#39;;font-size:12px;
font-weight:bold;}
#menutop a{display:block;line-height:45px;padding:0 14px;text-decoration:none;color:#919392;}
#menutop ul li:hover a{color:#666;}
#menutop input{display:none;margin:0 0;padding:0 0;width:100%;height:45px;opacity:0;cursor:pointer}
#menutop label{font-family:&#39;Open Sans&#39;;font-size:30px;font-weight:400;display:none;width:35px;height:45px;line-height:45px;text-align:center;}
#menutop label span{font-size:13px;position:absolute;left:35px}
#menutop ul li ul{height:auto;overflow:hidden;position:absolute;z-index:99;color:#919392}
#menutop ul li ul li a{color:#919392;height:45px;line-height:45px;background:#fff;width:100%;}
#menutop ul.menux{visibility:hidden;opacity:0;height:auto;overflow:hidden;background:#fff;position:absolute;z-index:99;color:#919392;box-shadow: 0px 2px 3px rgba(0,0,0,0.1);top:10px;transition:all 0.3s ease-in-out;}
#menutop li:hover &gt; ul.menux{visibility:visible;opacity:1;top:45px;}
#menutop a.dutt{padding:0 27px 0 14px}
#menutop a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop a.dutt:hover::after,#menutop ul li:hover a.dutt::after{content:&quot;\f0d7&quot;;font-family:FontAwesome;margin:0 auto;width:10px;height:10px;line-height:45px;position:absolute;top:0;right:10px;}
#menutop ul.menux li a{background:#fff;color:#919392;}
#menutop ul li ul li a:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook {padding:0 5px;}
#menutop li.facebook,#menutop li.twitter,#menutop li.youtube,#menutop li.googleplus,#menutop li.linkedin{background:#fff;text-align:center;color:#666;float:right;transition:all 0.2s ease-in-out;}
#menutop li a.facebook:hover,#menutop li a.twitter:hover,#menutop li a.youtube:hover,#menutop li a.googleplus:hover,#menutop li a.linkedin:hover{color:#8493a0;}
#menutop li.facebook .fa.fa-facebook,#menutop li.twitter .fa.fa-twitter,#menutop li.youtube .fa.fa-youtube,#menutop li.googleplus .fa.fa-google-plus,#menutop li.linkedin .fa.fa-linkedin{color:#919392;transition:all 0.2s ease-in-out;}
#menutop li.facebook:hover,#menutop li.twitter:hover,#menutop li.youtube:hover,
#menutop li.googleplus:hover,#menutop li.linkedin:hover{background:#fcfcfc;color:#8493a0;}
#menutop li.facebook:hover .fa.fa-facebook,#menutop li.twitter:hover .fa.fa-twitter,#menutop li.youtube:hover .fa.fa-youtube,#menutop li.googleplus:hover .fa.fa-google-plus,#menutop li.linkedin:hover .fa.fa-linkedin{color:#8493a0;}

@media screen and (max-width:960px) {
#menutop li:hover &gt; ul.menux{display:block;}
#menutop ul{border:none;border-bottom:4px solid #e9e9e9;}
#menutop{position:relative;border:none;border-bottom:4px solid #e9e9e9;}
#menutop ul{background:#fff;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menutop ul.menux{width:100%;position:static;border:none}
#menutop li{display:block;float:none;width:auto;text-align:left}
#menutop li a{color:#666}
#menutop li a:hover{background:#f1f1f1;color:#f9f9f9}
#menutop li:hover{background:#8493a0;color:#fff;}
#menutop a.dutt{font-weight: bold;}
#menutop li:hover &gt; a.dutt,#menutop a.dutt:hover{background:#b1b1b1;color:#fff;}
#menutop input,#menutop label{display:inline-block;position:absolute;right:0;top:0;}
#menutop input:after,#menutop label:after {content:&quot;\f0c9&quot;;font-family:FontAwesome;
font-style:normal;font-weight:normal;text-decoration:none;font-size:30px;color:#666;
display:inline-block;position:absolute;right:15px;top:25%;line-height:30px;}
#menutop input{z-index:4;}
#menutop input:checked + label{color:#fff;font-weight:700}
#menutop input:checked ~ ul{display:block}
#menutop ul li ul li a{width:100%;color:#666;}
#menutop ul li ul li a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux a{background:#fff;color:#666;}
#menutop ul.menux a:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li{background:#fff;color:#666;}
#menutop ul.menux li:hover{background:#8493a0;color:#fff;}
#menutop ul.menux li a{background:#fff;color:#666;}
#menutop ul.menux li a:hover{background:#f1f1f1;color:#8493a0;}
</style>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>



> selanjut nya cari kode ini <div class='header-wrapper'>  atau <div id='header-wrapper'> 
>kemudian tempelkan kode ini di di bawah nya

<nav id='menutop'>
<input type='checkbox'/>
<label/>
<ul>
<li><a href='/' title='Home'>Home</a></li>
<li><a class='dutt' href='#'>Drop-Down</a>
<ul class='menux'>
<li><a href='#'>Sub-item 1</a></li>
<li><a href='#'>Sub-item 2</a></li>
</ul>
</li>
<li><a class='dutt' href='/p/get-in-touch.html'>Contact</a>
<ul class='menux'>
<li><a href='#'>e-mail Form</a></li>
<li><a href='#'>Twitter</a></li>
</ul>
</li>
<li><a href='/p/privacy-policy.html'>Privacy Policy</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<li class='sorting-01 facebook'><a href='#'><i class='fa fa-facebook fa-lg'/><span class='inv'/></a></li>
<li class='sorting-02 twitter'><a href='#'><i class='fa fa-twitter fa-lg'/><span class='inv'/></a></li>
<li class='sorting-03 googleplus'><a href='#'><i class='fa fa-google-plus fa-lg'/><span class='inv'/></a></li>
<li class='sorting-06 linkedin'><a href='#'><i class='fa fa-linkedin fa-lg'/><span class='inv'/></a></li>
<li class='sorting-04 youtube'><a href='#'><i class='fa fa-youtube fa-lg'/><span class='inv'/></a></li>
</ul>
</nav>



*catatan
ganti tanda '#' dengan link anda dan link akun medsos anda.

oh ia hampir lupa,tempel kan kode di bawan ini di atas kode </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>


kemudian simpah deh hasil editan nya,lalu lihat blog nda,waw keren kan...heheh


nah sekian dulu deh tutorial nya ok..semoga bermanfaat yah 
wassalam

Comments

Popular posts from this blog

Alternatif adsense terbaik maret 2017

Alternatif adsense terbaik - di sat berbiacar tetntang cara untuk menghasilakn uang di internet melalui blog/web yang pertama kali kalian soroti google adsense,karena adsense adalah ppc terbik yang di sediakan oleh bah google untuk para publisser,namun yang menjadi kendala dan permasalahan nya adalah ,sulit dan susah nya di terima oleh adsense utuk menjadi mitra yang full approved,
kalian pasti kesal dan stres kan dengan susah nya di terima oleh adsense?
bahkan yang lebih kesal dan marah nya adalah ketika trapikc bagus,kontent menarik,masih saja tidak diterima.
sebenarnya bukan adsense ajj ppc yang membayar sob,tapia banyak ko alternatif lain selain adsense,dan cukup menggiurkan pula pembayaran nya..gimana tertarik tida untuk menggunakan layanan ppc alternatif selin adsense?
disini saya akan membahas alternatif ppc selain adsense yang menggiurkan sob:yu kita baca terus,apa aja alternatif adsense yang menggiurkan?

1.MEDIA.NET Media.net adalah jaringan iklan yang di prakarsai oleh yahoo…

manfaat buah sirsak

halo sobat ,kali ini mimin mau posting tentang manfaat buah sirsak,
mungkin kalian sering mengkonsumsi buah sirsak ini tapi pertanyaan nya apakah kalian mengetahui manfaat dai buah sirsak??
ok kita bahas dulu kebanyakan buah ini di tanam di amerika tengah dan dan amerika selatan,lalu indonesia juga menjadi pelestari tanaman ini.
lalu apakah manfaat dari buah ini??mungkin kalian sudah tak asing lagi dengan buah ini tapi seberapa tau kah kalian dengan manfaat nya,nah mimin akan membahas tentang manfaat dari buah ini
langsung aja kita bahas yah...buah ini mengandung vitamin B1,B2,C,dan kabohidrat ,dan manfaat yang bisa di dapat dai buah ini
1.sebagah peningkat kekebalan tubuh,karena buah ini memiliki kandungan senyawa acetagonins dan muricapentocin yang berguna sebagai imunitas dari bahaya penyakit,dan sebagai obat penyakit
2.meningkatkan kosentrasi,nah bagi kalian yang konsentrasi nya suka ngawur atau tidak fokus rutin aja konsumsi buah ini yah
3.menjaga kesehatan pencernaan ,jadi bagi…