05/06/17

Yu kita lanjut lagi saya kan kasiha anda lagi menu yang super duper keren  ,dengan saya sini saya akan anda kasih menu  Sub Menu yang paling keren dan juga jarang memakai nya kran menu baru saja saya buat pada waktu malam ,maka saya akan langsung saja shree pada anda yang sedeng mencari menu  Sub Menu yang bagus dan juga keren jika anda ,saya akan kasiha anda gambar contoh anda bisa lihat di bawah ini. 
<div class="separator" style="clear: both; text-align: center;">
<img alt="Cara Membuat Sub Menu di Blog Tanpa Harus Edit Html di Blogspot" border="0" height="202" src="https://1.bp.blogspot.com/-n_bn6vefki8/WM8afnEguGI/AAAAAAAAAf0/yHb7jIG3PFIw8koMbZHZ7FL4qFluM-VjQCLcB/s640/Cara%2BMembuat%2BSub%2BMenu%2Bdi%2BBlog%2BTanpa%2BHarus%2BEdit%2BHtml%2Bdi%2BBlogspot.gif" title="Cara Membuat Sub Menu di Blog Tanpa Harus Edit Html di Blogspot" width="640" /></div>
<div class="DEMO">
<div style="text-align: center;">
<strike> DEMO</strike></div>
</div>
Seperti yang anda lihat pada gambar di atas itu sebagi contoh saja jika anda mua lebih jelas dan detil anda bisa klik saja menu demo maka akan di bawa ke tampilan aslinya jika kamu tertarik sama menu yang saya akan shree ini kamu bisa lasngung saja pasang di blog anda dengan cara yang sangat mudah. 
 
<h3>
Langkah Pertama..</h3>
1. Kamu Login ke blogger anda masing masing 
2. Dan kamu pilih menu Tema dan tekan menu Edit Html 
3. Kemudian kamu tekan Kibot Pc CTRL+F kemudian kamu cari kode yang bernama ]]></b:skin> jika sudah ketemu kamu ambil kode di bawah dan copykan di atas kode ]]></b:skin> ini. 
<blockquote class="tr_bq">
/* icons Css3 menu spotkreatif.blogspot.com*/ 
 
ul#navbt { 
    display:block; 
    float:left; 
    font-family:Trebuchet MS,sans-serif; 
    font-size:0; 
    padding:5px 5px 5px 0; 
 
    background: -moz-linear-gradient(#f5f5f5, #c4c4c4); /* FF 3.6+ */ 
    background: -ms-linear-gradient(#f5f5f5, #c4c4c4); /* IE10 */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #c4c4c4)); /* Safari 4+, Chrome 2+ */ 
    background: -webkit-linear-gradient(#f5f5f5, #c4c4c4); /* Safari 5.1+, Chrome 10+ */ 
    background: -o-linear-gradient(#f5f5f5, #c4c4c4); /* Opera 11.10 */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4'); /* IE6 & IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#c4c4c4')"; /* IE8+ */ 
    background: linear-gradient(#f5f5f5, #c4c4c4); /* the standard */ 
} 
ul#navbt,ul#navbt ul { 
    list-style:none; 
    margin:0; 
} 
ul#navbt,ul#navbt .subs { 
    background-color:#444; 
    border:1px solid #454545; 
 
    border-radius:9px; 
    -moz-border-radius:9px; 
    -webkit-border-radius:9px; 
} 
ul#navbt .subs { 
    background-color:#fff; 
    border:2px solid #222; 
    display:none; 
    float:left; 
    left:0; 
    padding:0 6px 6px; 
    position:absolute; 
    top:100%; 
    width:300px; 
 
    border-radius:7px; 
    -moz-border-radius:7px; 
    -webkit-border-radius:7px; 
} 
ul#navbt li:hover>* { 
    display:block; 
} 
ul#navbt li:hover { 
    position:relative; 
} 
ul#navbt ul .subs { 
    left:100%; 
    position:absolute; 
    top:0; 
} 
ul#navbt ul { 
    padding:0 5px 5px; 
} 
ul#navbt .col { 
    float:left; 
    width:50%; 
} 
ul#navbt li { 
    display:block; 
    float:left; 
    font-size:0; 
    white-space:nowrap; 
} 
ul#navbt>li,ul#navbt li { 
    margin:0 0 0 5px; 
} 
ul#navbt ul>li { 
    margin:5px 0 0; 
} 
ul#navbt a:active,ul#navbt a:focus { 
    outline-style:none; 
} 
ul#navbt a { 
    border-style:none; 
    border-width:0; 
    color:#181818; 
    cursor:pointer; 
    display:block; 
    font-size:13px; 
    font-weight:bold; 
    padding:8px 18px; 
    text-align:left; 
    text-decoration:none; 
    text-shadow:#fff 0 1px 1px; 
    vertical-align:middle; 
} 
ul#navbt ul li { 
    float:none; 
    margin:6px 0 0; 
} 
ul#navbt ul a { 
    background-color:#fff; 
    border-color:#efefef; 
    border-style:solid; 
    border-width:0 0 1px; 
    color:#000; 
    font-size:11px; 
    padding:4px; 
    text-align:left; 
    text-decoration:none; 
    text-shadow:#fff 0 0 0; 
 
    border-radius:0; 
    -moz-border-radius:0; 
    -webkit-border-radius:0; 
} 
ul#navbt li:hover>a { 
    border-style:none; 
    color:#fff; 
    font-size:13px; 
    font-weight:bold; 
    text-decoration:none; 
    text-shadow:#181818 0 1px 1px; 
} 
ul#navbt img { 
    border:none; 
    margin-right:8px; 
    vertical-align:middle; 
} 
ul#navbt span { 
    background-position:right center; 
    background-repeat:no-repeat; 
    display:block; 
    overflow:visible; 
    padding-right:0; 
} 
ul#navbt ul span { 
    background-image:url("http://1.bp.blogspot.com/-6qHJT8xyxS8/UOlcZaSZsmI/AAAAAAAAGR8/-39aKs8TNEU/s1600/bloggetrix-arrow.png"); 
    padding-right:20px; 
} 
ul#navbt ul li:hover>a { 
    border-color:#444; 
    border-style:solid; 
    color:#444; 
    font-size:11px; 
    text-decoration:none; 
    text-shadow:#fff 0 0 0; 
} 
ul#navbt > li >a { 
    background-color:transpa; 
    height:25px; 
    line-height:25px; 
 
    border-radius:11px; 
    -moz-border-radius:11px; 
    -webkit-border-radius:11px; 
} 
ul#navbt > li:hover > a { 
    background-color:#313638; 
    line-height:25px; 
}</blockquote>
4. Go to blogger and click Layout Click Add Gadget and select 'HTML/Javascript Paste below code. 
<blockquote class="tr_bq">
<ul id="navbt"> 
<li><a href="#"><img src="http://3.bp.blogspot.com/-0-D5shInI1Y/UOlcZtDnt2I/AAAAAAAAGSE/1JK6hQhmAwg/s1600/bloggetrix-home.png" /> Home</a></li> 
                <li><a href="#"><img src="http://3.bp.blogspot.com/-SH72B_8sKyM/UOlcand-e1I/AAAAAAAAGSM/dIpSZGPefJQ/s1600/bloggetrix-top1.png" /> HTML/CSS</a> 
                    <div class="subs"> 
                        <div class="col"> 
                            <ul> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 1</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 2</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 3</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 4</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Sublinks</a> 
                                    <div class="subs"> 
                                        <div class="col"> 
                                            <ul> 
                                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 41</a></li> 
                                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 42</a></li> 
                                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 43</a></li> 
                                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 44</a></li> 
                                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 45</a></li> 
                                            </ul> 
                                        </div> 
                                        <div class="col"> 
                                            <ul> 
                                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 46</a></li> 
                   nbsp;                             <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 47</a></li> 
                                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 48</a></li> 
                                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 49</a></li> 
                                            </ul> 
                                        </div> 
                                    </div> 
                                </li> 
                            </ul> 
                        </div> 
                        <div class="col"> 
                            <ul> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 6</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 7</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 8</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 9</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 10</a></li> 
                            </ul> 
                        </div> 
                    </div> 
                </li> 
                <li><a href="#"><img src="http://1.bp.blogspot.com/-WUG46uZpVOI/UOlcbHUp8yI/AAAAAAAAGSY/PRQkX5G3Guk/s1600/bloggetrix-top2.png" /> jQuery/JS</a> 
                    <div class="subs"> 
                        <div class="col"> 
                            <ul> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 1</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 2</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 3</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 4</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 5</a></li> 
                            </ul> 
                        </div> 
                        <div class="col"> 
                            <ul> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 6</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 7</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 8</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 9</a></li> 
                                <li><a href="#"><img src="http://2.bp.blogspot.com/-XQe77MKg5HA/UOlcZjkt5qI/AAAAAAAAGSA/JlQ7K-Rjbw4/s1600/bloggetrix-bub.png" /> Link 10</a></li> 
                            </ul> 
                        </div> 
                    </div> 
                </li> 
                <li><a href="#"><img src="http://3.bp.blogspot.com/-Y00EXW8ZSmU/UOlcbm4ZqHI/AAAAAAAAGSc/v68M-g7MDr8/s1600/bloggetrix-top3.png" /> PHP</a></li> 
                <li><a href="#"><img src="http://2.bp.blogspot.com/-6U5E7L3tcNs/UOlcb_MW7PI/AAAAAAAAGSk/Ryn__dNwG2A/s1600/bloggetrix-top4.png" /> MySQL</a></li> 
                <li><a href="#"><img src="http://3.bp.blogspot.com/-zbAW77u5p2Y/UOlccqY37FI/AAAAAAAAGSs/tkYBQTIKS6E/s1600/bloggetrix-top5.png" /> XSLT</a></li> 
            </ul></blockquote>
 5. Demikian lah pada tutorial<a href="http://serba-berbagi-ilmu.blogspot.com/2017/05/cara-membuat-sub-menu-di-blog-dengan.html" rel="nofollow" target="_blank"> Cara Membuat Sub Menu di Blog Tanpa Harus Edit Html</a> di Blogspot ini jika anda suka pada postingan yang saya buat ini anda bisa like dan shree pada teman teman anda di facebook Dll cukup sampai di sini semoga bermanpaat bagi anda wasalam.

Pada kali ini saya akan Shree pada teman-teman blogger pasti nya anda belum tau Widget Recent Post Blogger Dengan Navigasi Terbaru pasti blog anda akan lebih Seo friendly ,jadi Widget Recent Post Blogger Dengan Navigasi Terbaru manpaat pada blog anda, ketika anda mau pos atau mebuat artikel yang baru pasti akan di tanpilkan  pada menu Widget Recent Post Blogger Dengan Navigasi nah bagi anda yang mau mencobanya silihkan anda ikuti pentunjuk di bawah ini. 
 
<div class="separator" style="clear: both; text-align: center;">
<img alt=" Widget Recent Post Blogger Dengan Navigasi Terbaru" border="0" height="320" src="https://3.bp.blogspot.com/-ZSh7XAJsq14/WIacFYzT_GI/AAAAAAAAEdY/1rpWp9b89qkd4K8XhU_b055N1sMZm8VmACLcB/s320/Widget%2BRecent%2BPost%2BBlogger%2BDengan%2BNavigasi%2BTerbaru.png" title=" Widget Recent Post Blogger Dengan Navigasi Terbaru" width="253" /></div>
 
1. nada Login saja ke Blogger 
2. Kemudian  kamu pilih saja Menu Tambahkan Wigdet pada blog anda 
3. Dan kamu pilih Saja Menu Tata Letak > Tambahkan Gendet Dan kamu pilih menu HTML/JavaScript 
4.Langkah Selanjutnya kamu masukan kode di bawah pada Kotak Wigdet 
<div>
 </div>
<div>
 </div>
<blockquote class="tr_bq">
<div id="recentpostsae"></div> 
<div id="recentpostnavfeed"></div> 
<script type='text/javascript'> 
//<![CDATA[ 
    var numfeed = 5; 
    var startfeed = 0; 
    var urlblog = "http://yourwebsite.blogspot.com"; 
    var charac = 40; 
    var urlprevious, urlnext; 
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+=""+arlinafeed(i,charac)+"...",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"Previous",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"Next",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)}; 
//]]> 
</script> 
<style> 
#recentpostnav{border:1px solid #000;width:100%;margin:0 auto;} 
#recentpostsae{margin:0} 
.recentpostel{background:#333;display:block;border:2px solid #111;margin:5px 0;padding:10px;height:79px} 
.recentpostel img{background:#222;padding:5px;float:left;height:70px;margin-right:8px;width:70px;} 
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px!important;font-weight:700!important;margin:0;color:#aaa;} 
.recentpostel:hover{background-color:#111;} 
.recentpostel p{font-size:12px;text-align:left;color:#aaa;line-height:normal;margin:5px 0} 
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #2c3e50;height:470px;border:1px solid #111} 
#recentpostnavfeed{border:2px solid #000;color:#bbb;background:#333;font-family:Verdana;font-size:12px;text-align:center;margin:0} 
#recentpostnavfeed:hover{background-color:#111;} 
#recentpostnavfeed a{color:#bbb!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px} 
#recentpostnavfeed span{padding:5px 10px} 
#recentpostnavfeed .next{float:right} 
#recentpostnavfeed .previous{float:left} 
#recentpostnavfeed .home{text-align:center} 
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important} 
</style></blockquote>
 
5. Kemudian kamu Seve setelah meyipan nya dan lihat hasilnya , demikian lah tutorial kali ini 
Warna MErah Tu Ganti Dengan Website anda

Tutorialjib

Cara Membuat Sub Menu di Blog Dengan Gambar

Cara Membuat Widget Recent Post Blogger Dengan Navigasi

Popular Posts

Sponsor Iklan

Blog Archive