Menu


Menu Tab

Pages

Google Plus top right corner

Kode tombol Share GGplus 
yang terletak dipojok kanan atas
Kode ini menggunakan Kode CSS dan HTML
Jika sahabat blogger membutuhkannya
Silahkan Copy Paste Kode berikut ini :
Masuk ke edit HTML Letakan kode tersebut
Diatas kode  
]]></b:skin>
.profil-photo{ background-size: 32px 32px; border-radius: 50%; display: block; height: 33px; width: 33px; position:fixed; top:21px; right:25px; z-index:10000; } .profil-photo img{ border-radius: 50%; } .profile-img { float : left; margin : 0 15px 0 0; } .profile-data { margin : 0; } .profile-datablock { margin : 0 0 20px; } .profile-name-link { background : left top no-repeat; display : inline-block; min-height : 20px; padding-left : 20px; } .profile-textblock { margin : 0.5em 0; } #profilbox{ background:#fff; border:1px solid #ccc; color:#333; font-size:14px; font-family: 'Open Sans', Helvetica, Arial, sans-serif; line-height:1.2em; top:75px; right:-300px; padding:15px; position:fixed; width:250px; height:80px; box-shadow: 0 2px 10px rgba(0,0,0,.2); z-index:10000; } #profilbox:before{ content:""; width:0; height:0; position:fixed; top:-22px; right:14px; border:11px solid transparent; border-color:transparent transparent #ccc; } #profilbox:after{ content:""; width:0; height:0; position:absolute; top:-19px; right:15px; border:10px solid transparent; border-color: transparent transparent #fff; } .closeprofil{ background:none; border:none; position:absolute; top:0px; right:0px; cursor:pointer; font-size:18px; font-weight:700; color:#888; } .closeprofil:focus{ outline:none }
Jika sudah selesai temukan kode  </body>
gunakan CTRL F untuk pencarian
Copy kode HTML dibawah ini
,

Pastekan kode HTML diatas kode  </body>  dan klik simpan Selesai
<div class='profil-photo' onclick='document.getElementById(&#39;profilbox&#39;).style.right=&#39;15px&#39;;'> <img alt='Foto' class='profile-img' height='56' src='http://google plus.png' title='Click me!' width='56'/> </div> <div id='profilbox'> <a href='https://plus.google.com/u/0/101254379497511200564/posts' target='_blank' title='My Profil'><img alt='My Photo' class='profile-img' height='80' src='http://google plus.png' title='My Profile' width='80'/></a> <div class='profile-datablock'> <div class='profile-data'> <a class='profile-name-link g-profile' href='https://plus.google.com/u/0/101254379497511200564/posts' rel='author' style='background-image: url(//www.google.com/images/icons/ui/gprofile_button-16.png);' target='_blank' title='Mys2010'> Myscript2010 </a> <br/> <div class='g-follow' data-annotation='bubble' data-height='20' data-href='https://plus.google.com/u/0/101254379497511200564/posts'></div> </div> </div> <a class='profile-link' href='https://plus.google.com/u/0/101254379497511200564/posts' rel='author' target='_blank' title='View my profile'>View my profile</a> <input class='closeprofil' onclick='document.getElementById(&#39;profilbox&#39;).style.right=&#39;-300px&#39;;' title='Close this' type='button' value='×'/> </div>
Catatan :
Yang ditandai warna biru
No. Link ID serta Link Logo GGplus atau Poto 
ganti dengan link sobat, Lihat Contoh Tombol GGplus di pojok kanan atas
All Sources
Edited by. Myscript2010



Foto Saya

Link Exchange




LINK BLOG PageRank BLOG
MANFAAT TUKARAN LINK MENINGKATKAN TRAFFIK


Fungsi tukaran link adalah sebagai hubungan sebuah jaringan antar sesama blog serta meningkatkan sumber lalu lintas links in ke dalam webblog sehingga akan meningkatkan traffik pengunjung, dengan demikian webblog akan mudah terindex oleh search engine.

Contact Us

LEARN EDITING SCRIPT














Forum Diskusi

Demo forum

Memasang Random Posts

Fungsi Random Posts
sama dengan Popular Post yang berguna untuk memudahkan pengunjung mengeksplorasi konten Webblog. Berikut cara penerapannya :
Login ke akun blog klik tataletak dan klik tambah gadged, copy code dibawah ini pastekan kedalam gadged tersebut.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">

<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:355px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:335px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigmMCbrextKEVTf0-oKzvWPXuPQ0BTrzhUwwAC14VB5X0cX8aAEVgxNhNaJ8i8XaimAcbm0ERlMSx_yclSWf7tgYYRKDRQFoXxa1zAwIHUK2AjjQnXA001j5Q5KB-9KKq1Wqq6bHucEMo/s1600-r/bg_mys2010.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

    <script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcP5qWv1Cnxe2E20JHUEaz8jVo_7k3MYOslJlAPHUu_wa5AOQLSyq7RhG9iKQbM0vSQpd8fQEWFJS6TQnDsowcTYMZ9fSoellUsssSAost-gtq9i2a_s5-4FQY0xSwp3uEJTp3Gw-Ei_k/s1600-r/tidak_mys2010.jpg";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcP5qWv1Cnxe2E20JHUEaz8jVo_7k3MYOslJlAPHUu_wa5AOQLSyq7RhG9iKQbM0vSQpd8fQEWFJS6TQnDsowcTYMZ9fSoellUsssSAost-gtq9i2a_s5-4FQY0xSwp3uEJTp3Gw-Ei_k/s1600-r/tidak_mys2010.jpg";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcP5qWv1Cnxe2E20JHUEaz8jVo_7k3MYOslJlAPHUu_wa5AOQLSyq7RhG9iKQbM0vSQpd8fQEWFJS6TQnDsowcTYMZ9fSoellUsssSAost-gtq9i2a_s5-4FQY0xSwp3uEJTp3Gw-Ei_k/s1600-r/tidak_mys2010.jpg";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcP5qWv1Cnxe2E20JHUEaz8jVo_7k3MYOslJlAPHUu_wa5AOQLSyq7RhG9iKQbM0vSQpd8fQEWFJS6TQnDsowcTYMZ9fSoellUsssSAost-gtq9i2a_s5-4FQY0xSwp3uEJTp3Gw-Ei_k/s1600-r/tidak_mys2010.jpg";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcP5qWv1Cnxe2E20JHUEaz8jVo_7k3MYOslJlAPHUu_wa5AOQLSyq7RhG9iKQbM0vSQpd8fQEWFJS6TQnDsowcTYMZ9fSoellUsssSAost-gtq9i2a_s5-4FQY0xSwp3uEJTp3Gw-Ei_k/s1600-r/tidak_mys2010.jpg";
showRandomImg = true;
boxwidth = 300;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 60;
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "Komentar";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 5;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://myscript2010s.blogspot.co.id/";
limitspy=5
intervalspy=6000
</script>

<div id="spylist">
    <script type='text/javascript'>
//<![CDATA[
 /*
 * Script dikombinasikan dari bloggerstricks.com
 * spy effect dari jqueryfordesigners.com
 * Oleh Abu Farhan (www.abu-farhan.com)
 * Modifikasi oleh daw-xp.blogspot.com
 */
jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
//]]>
</script>
</div>
Penjelasan :
Ganti Link Title dan link Gambar yang berwarna Orange Test kode tersebut disi lihat hasil
Sumber by. Abu-Farhan
Edited   by. Myscript2010

Kode Warna

Contoh Kode Warna buat desain blog

Kode warna ini berfungsi untuk mewarnai
Teks, backgroud, margin, maupun border pada webblog yang akan didesain
Pilih Kode Warna
dengan cara mengcopy nomor kode


#000000
#111111
#222222
#333333
#444444
#555555
#666666
#777777
#888888
#999999
#aaaaaa
#bbbbbb
#cccccc
#dddddd
#eeeeee
#eee8aa

Warna: #98FB98 Palgreen
Warna: #AFEEEE Paleturquoise
Warna: #DB7093 Palevioletred
Warna: #FFEFD5 Papayawhip
Warna: #FFDAB9 Peachpuff
Warna: #CD853F Peru
Warna: #FFC0CB Pink

All Sources
Edited by. Myscript2010


Post Komentar

Ada beberapa macam CSS Horizontal Menus

Ada beberapa macam
model CSS Horizontal Menus, Fungsinya adalah agar dapat memudahkan pengunjung membaca artikel diarea postingan blog. dan juga dapat meminimalisasikan halaman.
Dengan berbagai macam model kita dapat memilih adanya CSS Horizontal Menus sesuai dengan
desain tampilan blog. Dibawah ini tersedia Code CSS Menus

untuk dijadikan pilihan dan diterapkan kedalam sebuah ruangan gadged
CSS3 Gradient Menu Buttons
CSS3 Shadow Block Menu
Half moon tab menu
CSS3 Semi Opaque Menu 
CSS Tab Menu
CSS Menu fixed header
All Sources Edited by. Myscript2010
Test Script untuk melihat hasil

Memasang Menu CSS 3 Slide Up Tabs

MEMASANG
MENU CSS 3 SLIDE UP TABS
Login ke akun blog klik tata letak dan klik tambah gadged
copy code berikut letakan kedalam gadged tersebut klik simpan selesai
<style>
ul.slideuptabs{
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: left; /* change to "center" or "right" to align differently */
    border-bottom: 10px solid green; /* bottom border */
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #d8d8d8 100%); /* gray gradient background */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d8d8d8));
    background: -webkit-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
    background: -o-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
    background: -ms-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#d8d8d8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d8d8',GradientType=0 );
}
ul.slideuptabs li{
 display: inline;
}
ul.slideuptabs li:first-of-type{
    margin-left: 10px;
}
ul.slideuptabs a{
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: black; /* font color */
    text-decoration: none;
    padding: 8px 20px;
    font-size: 14px; /* font size */
    font-weight: bold;
    vertical-align: bottom;
    -webkit-transition: color 0.5s; /* transition property and duration */
    -moz-transition: color 0.5s;
    transition: color 0.5s;
}
ul.slideuptabs a span{
    position: relative;
    z-index: 10;
}
ul.slideuptabs a::before{
    content: '';
    color: white;
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: green; /* tab background */
    left: 0;
    top: 110%; /* extra 10% is to account for shadow dimension */
    box-shadow: -2px 2px 10px rgba(255,255,255,.5) inset;
    border-radius: 15px 15px 0 0 / 12px 12px; /* oval shaped border for top-left and top-right corners */
    -webkit-transition: top 0.5s; /* transition property and duration */
    -moz-transition: top 0.5s;
    transition: top 0.5s;
}
ul.slideuptabs a:hover{
    color: white; /* hover color */
}
ul.slideuptabs a:hover::before{
    top: 0; /* slide tab up */
}
/****** Responsive Code ******/

@media screen and (max-width: 640px) {
  
    ul.slideuptabs li:first-of-type{
        margin-left: 0;
    }
}

/****** Theme Red ******/

ul.slideuptabs.red{
    border-bottom-color: darkred;
}
ul.slideuptabs.red a::before{
    background: darkred;
}
</style>

<!--[if lte IE 8]>
<style type="text/css">
    ul.slideuptabs a:hover{
        color: black; /* hover color for IE8 where tabs don't slide up */
    }
</style> 
<![endif]-->

<ul class="slideuptabs red">
    <li><a href="http://#/"><span>HOME</span></a></li>
    <li><a href="http://#/"><span>MENU 1</span></a></li>
    <li><a href="http://#/"><span>MENU 2</span></a></li>  
    <li><a href="http://#/"><span>MENU 3</span></a></li>  
    <li><a href="http://#/"><span>MENU 4</span></a></li>  
    <li><a href="http://#/"><span>MENU 5</span></a></li>  
</ul> Penambahan sub menu 
           diletakan diatas tanda </ul>

Penjelasan :
Ganti tanda yang berwarna orange
dengan link dan Judul menu Tambahkan Sub menu jika diperlukan
Editd by. Myscript2010
Sumber by. Dynamic drive

Cara Memasang Sub Menu Rotatext

MEMASANG 
CSS MENU ROTATEXT
Login ke akun blog klik tata letak dan klik tambah gadged
copy code berikut letakan kedalam gadged tersebut klik simpan selesai
<style type="text/css"> #menufixed {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
.menu3Dflip {
   border-bottom:2px solid #006400;
   margin:0 auto;
   text-align:center;
   position:relative;
   height:40px;
   z-index:999;
   background:#808080;
   -moz-perspective: 100px;
   -webkit-perspective: 100px;
   -o-perspective: 100px;
   perspective: 100px;} .menu3Dflip ul.nav li {display:inline-block; display:inline;}
.menu3Dflip ul.nav {
   padding:0;margin:0;
   list-style:none;
   display:inline-block;
   -moz-transform-style: preserve-3d;
   -webkit-transform-style: preserve-3d;
   -o-transform-style: preserve-3d;
   transform-style: preserve-3d;} .text-logo {
   text-align:center;position:absolute;
   position: fixed;left: 52px;z-index: 999;
   overflow: hidden;color:#000;
   font-weight:bold;margin-top:-34px;
   border-bottom:3px solid blue;} .menu3Dflip ul.nav li {float:left; display:block; padding:0 4px;}
.menu3Dflip ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menu3Dflip ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menu3Dflip ul.nav li a.top-a b {display:block; padding:0 20px; font:bold 14px/30px arial, sans-serif; color:#006B6B;} .menu3Dflip ul.nav li:hover a.top-a {
   background:red;
   border-radius:8px 8px 0 0;
   -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);} .menu3Dflip ul.nav div {
   position:absolute;
   top:40px; left:4px;
   background:#fff;
   padding:5px 0 10px 0;
   border-radius:0 0 15px 15px;
   -webkit-transition: 0.5s;
   -moz-transition: 0.5s;
   -o-transition: 0.5s;
   transition: 0.5s;    -moz-transform-origin: 0px 0px;
   -moz-transform: rotateX(-90deg);
   -webkit-transform-origin: 0px 0px;
   -webkit-transform: rotateX(-90deg);
   -o-transform-origin: 0px 0px;
   -o-transform: rotateX(-90deg);
   transform-origin: 0px 0px;
   transform: rotateX(-90deg);
   -moz-backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   -o-backface-visibility: hidden;
   backface-visibility: hidden;} .menu3Dflip ul.nav div.left {left:auto; right:4px;}
.menu3Dflip ul.nav div ul {
   padding:10px 0; list-style:none;
   width:140px; margin:10px 5px 0 5px;
   float:left; display:inline;
   text-align:left; background:#DCDCDC;
   border-radius:6px;
   -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
   box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);} .menu3Dflip ul.nav div ul li:last-child {border:0;}
.menu3Dflip ul.nav div ul.colLeft {margin-left:10px;}
.menu3Dflip ul.nav div ul.colRight {margin-right:10px;}
.menu3Dflip ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menu3Dflip ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;} .menu3Dflip ul.nav div ul li a {
   display:block; width:105px;
   text-decoration:none;
   font:13px/16px arial, sans-serif;
   color:#8B0000 ; margin:0;
   padding:4px 0 4px 15px;
   background:transparent url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) no-repeat left center;} .menu3Dflip ul.nav div ul li a:hover {color:red; background:transparent url(http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png) no-repeat 1px center;} .menu3Dflip ul.nav div.col1 {width:160px;}
.menu3Dflip ul.nav div.col2 {width:310px;}
.menu3Dflip ul.nav div.col3 {width:460px;}
.menu3Dflip ul.nav li:hover div {
   -moz-transform: rotateX(0deg);
   -webkit-transform: rotateX(0deg);
   -o-transform: rotateX(0deg);
   transform: rotateX(0deg); .logo {
   text-align:left;position:absolute;
   position: fixed;top: 0;left: 5px;
   z-index: 999;overflow: hidden;} </style>

<div id='menufixed'>
  <div class='menu3Dflip'>
    <ul class='nav'>
    <li><a class='top-a' href='#'><b>MENU 1</a>
<div class='col3'>
    <ul class='colLeft'>
<li><a href='http://myscript2010s.blogspot.co.id' title='HOME'>STOP</a></li>
    <li> <a href='http://Your Link'>Judul 1a</a> </li>
    <li> <a href='http://Your Link'>Judul 1b</a> </li>
    <li> <a href='http://Your Link'>Judul 1c</a> </li>
    </ul>
  <ul class='col'>
     <li><a href='http://Your Link'>Judul 2a</a></li>
     <li><a href='http://Your Link'>Judul 2b</a></li>
     <li><a href='http://Your Link'>Judul 2c</a></li>
     <li><a href='http://Your Link'>Judul 2d</a></li>
     </ul>
    <ul class='colRight'>
     <li><a href='http://Your Link'>Judul 3a</a></li>
     <li><a href='http://Your Link'>Judul 3b</a></li>
     <li><a href='http://Your Link'>Judul 3c</a></li>
     <li><a href='http://Your Link'>Judul 3d</a></li>
    </ul>

<!!!..logo..:>
<div class='text-logo'>
<font size="3" color="grey"face="vivaldi">
&nbsp;&nbsp; <b>Mys2010<b></b></b></font> &nbsp;
<!..logo..!!:>

</!..logo..!!:></div>
      </!!!..logo..:></div></li>
  <li><a class='top-a' href='#'><b>MENU 2</a>
<div class='col2'>
   <ul class='colLeft'>
   <li><a href='http://Your Link'>Judul 1a</a></li>
   <li><a href='http://Your Link'>Judul 1b</a></li>
   <li><a href='http://Your Link'>Judul 1c</a></li>
   <li><a href='http://Your Link'>Judul 1d</a>
   <li><a href='http://Your Link'>Judul 1e</a>
      </li>
      </li></ul>
      <ul class='colRight'>
   <li><a href='http://Your Link'>Judul 2a</a></li>
   <li><a href='http://Your Link'>Judul 2b</a></li>
   <li><a href='http://Your Link'>Judul 2c</a>   
   <li><a href='http://Your Link'>Judul 2d</a>
   <li><a href='http://Your Link'>Judul 2e</a>

    </li></li></li></ul>
</div>
  </li>
     <li><a class='top-a' href='#'><b>MENU 3</a>
<div class='col1'>
    <ul class='colSingle'>
      <li><a href='http://Your Link'>Judul 1a</a></li>
      <li><a href='http://Your Link'>Judul 1b</a></li>
      <li><a href='http://Your Link'>Judul 1c</a></li>
    </ul>
</div>
     </li>
     <li><a class='top-a' href='#'><b>MENU 4</a>
<div class='col2 left'>
 <ul class='colLeft'>
      <li><a href='http://Your Link'>Menu  1a</a></li>
      <li><a href='http://Your Link'>Menu  1b</a></li>
      <li><a href='http://Your Link'>Menu  1c</a></li>
      <li><a href='http://Your Link'>Menu  1d</a></li>
    </ul>
    <ul class='colRight'>
       <li><a href='http://Your Link'>Menu 2a</a></li>
       <li><a href='http://Your Link'>Menu 2b</a></li>
       <li><a href='http://Your Link'>Menu 2c</a></li>
       <li><a href='http://Your Link'>Menu 2d</a></li>
    </ul>
</div>
    </li>
     <li><a class='top-a' href='#'><b>MENU 5</a>
<div class='col1'>
    <ul class='colSingle'>
       <li><a href='http://Your Link'>Menu 1a</a></li>
       <li><a href='http://Your Link'>Menu 1b</a></li>
       <li><a href='http://Your Link'>Menu 1c</a></li>
    </ul>
</div>
      </li>
     <li><a class='top-a' href='#'><b>MENU 6</a>
<div class='col1'>
    <ul class='colSingle'>
      <li><a href='http://Your Link'>Beranda</a></li>
      <li><a href='http://www.blogger.com/follow-blog.g?blogID=8776766672634547419' target="_blank">
         Follow My Blog</a></li>     
    </ul>
</div>
  </li></ul></div><!!..ending to class='menu3Dflip'..!!>
</!!..ending></div><!!..edited by. myscript2010'..!!>
<!!..ending to id='menufixed'..!!></!!..ending></!!..edited>
Penjelasan :
Ganti Link yang berwarna orange dengan link sobat
Sumber by. SB77
Edited by. Myscript2010

Memasang Menu Drop Down

Menu Drop down berfungsi untuk membuat menu
tanpa harus memakan banyak tempat, berikut cara memasang menu tersebut.
Login ke akun blog klik tatletak klik tambah gadged
copy code dibawah ini letakan kedalam gadged tersebut klik simpan selesai
<style>
#menu
{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #000000;
background: -moz-linear-gradient(#444, #000000);
background: -webkit-gradient(linear,left bottom,left top,color-stop(1, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);

}
#menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
}
#menu a
{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a
{
color: #fafafa;
}
*html #menu li a:hover /* IE6 */
{
color: #fafafa;
}
#menu li:hover > ul
{
display: block;
}
/* Sub-menu */
#menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 2px;
}
#menu ul ul
{
top: 0;
left: 150px;
}
#menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a
{
padding: 10px;
height: 10px;
width: 130px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html #menu ul a /* IE7 */
{
height: 10px;
}
#menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
#menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
#menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}

#menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
</style>
<ul id="menu">
<li><a href='http://myscript2010s.blogspot.co.id/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiao5bxLqHJnLJhfsah6b9hNh1jZLEn014O2vKiVPU_we0JCGNL_c3VLq_agxJVkbBG4M77L7cEJy2fCqAyMq2ynPl5VqkwfXpOgLbi0mkbEKsfzb8aqvr9P8ZsnpFTwWj0Uvey3WFSI/s1600-r/button-mys2010.png" name="e902" border="0" width="28" height="29" /></a>

</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='nofollow'>Drop menu a</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu a1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a3</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a4</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu a5</a></li>
</ul>
</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='nofollow'>Drop menu b</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu b1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3 next</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu b3.1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3.2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3.3</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu b3.4</a></li>
</ul>
</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='dofollow'>Menu c</a></li>
<li><a href= rel='dofollow'>Menu d</a></li>
</ul>
</li>
<li><a href='http://myscript2010s.blogspot.co.id/' rel='nofollow'>Drop menu c</a>
<ul>
<li><a href=' #/ ' rel='dofollow'>Menu c1</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c2</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c3</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c4</a></li>
<li><a href=' #/ ' rel='dofollow'>Menu c5</a></li>
</ul>
</li>
<a href='http://myscript2010s.blogspot.co.id/'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBiao5bxLqHJnLJhfsah6b9hNh1jZLEn014O2vKiVPU_we0JCGNL_c3VLq_agxJVkbBG4M77L7cEJy2fCqAyMq2ynPl5VqkwfXpOgLbi0mkbEKsfzb8aqvr9P8ZsnpFTwWj0Uvey3WFSI/s1600-r/button-mys2010.png" name="e902" border="0" width="28" height="29" /></a></ul>
Penjelasan : Ganti tanda yang berwarna orange dengan link sobat
All Sources
Edited by. Myscript2010

Memasang CSS Menu Horizontal

Memasang CSS Menu Horizontal
Fungsi CSS Menu Horizontal Sama halnya  dengan yang membedakan hanya tampilannya saja
berikut cara penerapannya :
Login ke akun blog klik tatletak klik tambah gadged
copy code dibawah ini letakan kedalam gadged tersebut klik simpan selesai
<style type="text/css">#cssmenu ul{margin:0;padding:0;list-style-type:none;position:relative;display:block;height:36px;text-transform:uppercase;font-size:12px;font-weight:bold;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglamUmBic5iaAbwhR0LBpPQ2JQLcSyRjiX1vkzvSwrSeL94YQDUgzzgbmQNOJVXnVHaNQr7YEeK1_kJGtPtBq8Ey63s0m1rzUpDPVGlQy-EbtctEE6d7Nr7S5fLGIMCE6UKIrshm9fYIo/s1600-r/Capture.PNG') repeat-x top left;font-family:Helvetica,Arial,Verdana,sans-serif;border-bottom:4px solid #004c99;border-top:1px solid #74b0c6;width:auto}#cssmenu li{display:block;float:left;margin:0;padding:0}#cssmenu li a{display:block;float:left;color:#6d7078;text-decoration:none;font-weight:bold;padding:12px 20px 0 20px;height:24px;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglamUmBic5iaAbwhR0LBpPQ2JQLcSyRjiX1vkzvSwrSeL94YQDUgzzgbmQNOJVXnVHaNQr7YEeK1_kJGtPtBq8Ey63s0m1rzUpDPVGlQy-EbtctEE6d7Nr7S5fLGIMCE6UKIrshm9fYIo/s1600-r/Capture.PNG') no-repeat top right}#cssmenu li a:hover{background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirgMoCEK8iANs2bwwehBGZyNqC2rxUdUVQ-SLBgRz2tPt2Awhz3iCxd0OtcE38ua3P_ZOAidjrMmitIej-QR0CpjZhwLyOcO36iO8Kp3uWxENe7e3FXvnthial_aFtmdXV6C6AYisitZE/s1600-r/3-mys2010.PNG') no-repeat top right;color:#6d7078}</style><a href="http://myscript2010s.blogspot.co.id/" rel="dofollow" target="_blank" title="Mys2010"><img src="http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png" alt="Mys2010" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://myscript2010s.blogspot.co.id/" rel="dofollow" target="_blank" title="Mys2010"><img src="http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png" alt="Mys2010" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://myscript2010s.blogspot.co.id/" rel="dofollow" target="_blank" title="Mys2010"><img src="http://www.blogblog.com/1kt/awesomeinc/body_background_dark.png" alt="Mys2010" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><!-- Dont edit this code Pure CSS Menu Mys2010 or it will not work -->

<!-- customize your menus Links -->
<div id="cssmenu">
<ul>
<li class="active"><a href="#/" ><span> MENU 1</span></a>
</li>
<li class="active"><a href="#/" target="_blank"><span>MENU 2</span></a></li>
<li class="active"><a href="#/"><span>  MENU 3 </span></a></li>
<li class="active"><a href="#/"><span>  MENU 4 </span></a></li>
<li class="active"><a href="#/"><span>  MENU  5 </span></a></li>
<li class="active"><a href="#/"><span>  MENU 6 </span></a></li>
<li>
<li class="active"><a href="#/"><span>  MENU 7 </span></a></li>
<li class="active">
<a href="#/"><span> MENU 8 </span></a></li></li></ul></div>
Penjelasan : Ganti tanda yang berwarna orange dengan link sobat
All Sources
Edited by. Myscript2010

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi