Myscript2010

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('profilbox').style.right='15px';'> <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('profilbox').style.right='-300px';' 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

Myscript2010

View my profile

Link Exchange

MANFAAT TUKARAN LINK MENINGKATKAN TRAFFIK

/* Back Link */
<a href="http://myscript2010s.blogspot.co.id" target="_blank" title="Mari Belajar"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdBgYBv5m-aS4Uq74AGnGb_Kjl0RmTIhUOWPjhxK3zGgarn7C0NXWfQ805X04pRRfmt6jXAFsM7jE2FkNmwR41754yNfBDMFgK8dLCXTqerbl36gfKgVqFEMCNWobVzv6WISHTTm3xi5Y/s1600-r/backlink_mys2010.gif" alt="Mari Belajar" /></a>

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.

Link After Entering Back

Contact Us

LEARN EDITING SCRIPT

EMF Free Form Builder

Report Abuse

Back to email

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.

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

Contoh Warna 1

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

<style type="text/css">
.gradientbuttons ul{
padding: 3px 0;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 13px Verdana;
list-style-type: none;
text-align: center; /*set to left, center, or right to align the menu as desired*/
}

.gradientbuttons li{
display: inline;
margin: 0;
}

.gradientbuttons li a{
text-decoration: none;
padding: 5px 7px;
margin-right: 5px;
border: 1px solid #778;
color: white;
border:1px solid gray;
background: #3282c2;
border-radius: 8px; /*w3c border radius*/
box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* w3c box shadow */
-moz-border-radius: 8px; /* mozilla border radius */
-moz-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* mozilla box shadow */
background: -moz-linear-gradient(center top, #a4ccec, #72a6d4 25%, #3282c2 45%, #357cbd 85%, #72a6d4); /* mozilla gradient background */
-webkit-border-radius: 8px; /* webkit border radius */
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0,.5); /* webkit box shadow */
background: -webkit-gradient(linear, center top, center bottom, from(#a4ccec), color-stop(25%, #72a6d4), color-stop(45%, #3282c2), color-stop(85%, #357cbd), to(#72a6d4)); /* webkit gradient background */
}

.gradientbuttons li a:hover{
color: lightyellow;
}

.redtheme li a{
font-size:18px;
background: darkred;
background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); 
}

.greentheme li a{
font-size:12px;
background: green;
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); 
}

.blacktheme li a{
font-size:16px;
background: black;
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f)); 
}

.orangetheme li a{
font-size:14px;
background: #e55e3f;
background: -moz-linear-gradient(center top, #ecad9a, #e5937c 25%, #cf4c2a 45%, #e5937c 85%, #ecad9a);
background: -webkit-gradient(linear, center top, center bottom, from(#ecad9a), color-stop(25%, #e5937c), color-stop(45%, #cf4c2a), color-stop(85%, #e5937c), to(#ecad9a)); 
}

</style> <div class="gradientbuttons">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>

CSS3 Shadow Block Menu

<style type="text/css">

.shadowblockmenu{
font-weight: bold;
font-size: 85%;
width: 100%;
}

.shadowblockmenu ul{
border: 1px solid #BBB;
border-width: 1px 0; /* Show only top and bottom border for main menu container */
padding: 0;
margin: 0;
overflow: hidden;
}

.shadowblockmenu ul li{
display: inline;
margin:0;
padding:0;
}

.shadowblockmenu ul li a{
display:block;
float:left;
text-transform: uppercase;
color: #494949;
padding: 8px 15px 8px 9px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB; /*right border between menu items*/
-moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */
-webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4);
text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */
-moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}


.shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */
border-left: 1px solid #BBB; /* add border to left side of first menu link */
padding-left:25px;
background: url(media/onebit_home.png) 1px center no-repeat; /* Add icon */
}

.shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */
padding-left:25px;
background: url(media/onebit_bulb.png) 1px center no-repeat; /* Add icon */
}

.shadowblockmenu ul li a:hover{
color: black;
-moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item  */
-webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6);
}

</style> <div class="shadowblockmenu">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>
</ul>
</div>

Half moon tab menu

<style type="text/css">
<style type="text/css">

.halfmoon{
margin-bottom: 1em;
}

.halfmoon ul{
padding: 3px 9px 2px 5px;
margin-left: 0;
margin-top: 1px;
margin-bottom: 0;
font: bold 12px Verdana;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
border-bottom: 1px solid #fff000;
}

.halfmoon li{
display: inline;
margin: 0;
}

.halfmoon li a{
text-decoration: none;
padding: 3px 9px 2px 5px;
margin: 0;
margin-right: 1px; /*distance between each tab*/
border-left: 1px solid #fff;
color: aqua;
font-size: 13px;
background: #808080 url(media/tabright.gif) top right no-repeat;
}

.halfmoon li a:visited{
color: aqua;
}

.halfmoon li a:hover{
background-color: #CDDADA;
color: navy;
}

</style>
<div class="halfmoon">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li class="selected"><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
</ul>
</div>

CSS3 Semi Opaque Menu

<style type="text/css">

div.bottombar{ /* bar that runs across the bottom of the menu */
height: 10px;
background: #1a1109;
}

ul.semiopaquemenu{ /* main menu UL */
font: bold 14px Georgia ;
width: 100%;
background: red;
padding: 11px 0 8px 0; /* padding of the 4 sides of the menu */
margin: 0;
text-align: left; /* set value to "left", "center", or "right" to align menu accordingly */
}

ul.semiopaquemenu li{
display: inline;
}

ul.semiopaquemenu li a{
color:#444;
padding: 6px 8px 6px 8px; /* padding of the 4 sides of each menu link */
margin-right: 15px; /* spacing between each menu link */
text-decoration: none;
}

ul.semiopaquemenu li a:hover, ul.semiopaquemenu li a.selected{
color: blue;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiweVje4sCmzqcGAeavsuSCLvYNBufAG13wpTMV0_qEgB64b5BJ-iV4BfrSdFs5pyHoLQ-xELDUDm89GRUnE4F89nBydjfeMc9TOsyT9SsPV-zxmz9X-BaDvEcuZIXR1lT4zHwf7MvZGdA/s1600-r/gradient-background-3-1280x800.jpg); /* IE9+ SVG equivalent  of linear gradients */
background: -moz-linear-gradient(top,  rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.16) 100%); /* fade from white (0.82 opacty) to 0.16 opacity */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.82)), color-stop(100%,rgba(255,255,255,0.16)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
background: linear-gradient(top,  rgba(255,255,255,0.82) 0%,rgba(255,255,255,0.16) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1ffffff', endColorstr='#29ffffff',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959; /* CSS3 box shadows */
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 12px; /* large padding to get menu item to protrude upwards */
padding-bottom: 20px; /* large padding to get menu item to protrude downwards */
}

</style>
<ul class="semiopaquemenu">
<li><a href="#">HOME</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>
</ul>
<div class="bottombar">
</div>

CSS Tab Menu

<style type="text/css">
#top{margin:auto;padding: 0;width: 100%;background:#eeeeee;border-bottom:1px solid #fff;}
#top-wrap{margin:auto;padding: 0;width: 950px;background:#fafafa;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#808080;}
.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:#dad; color:#000000;}
#navbar-iframe {display: none !important;}

</style> <div id='top'>
<div id='top-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='#' title='Home'>HOME</a></li>
<li><a href='#' title='Menu 1'>MENU 1</a></li>
<li><a href='#' title='Menu 2'>MENU 2</a></li>
<li><a href='#' title='Menu 3'>MENU 3</a></li>
<li><a href='#' title='Menu 4'>MENU 4</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>

CSS Menu fixed header

<link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'/> <style> 
#ks-meno{
width:100%;
height:45px;
display:block;
padding:0;
margin:0 0 22px 0;
z-index:100;
top:0px;
left:0px;
position:fixed;
box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
background:#181818;
}

#ks-mano1{
  float:left;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:40px;
}

#ks-mano1 ul{
  float:left;
  margin:0;
  padding:0;
 border:#181818 1px hidden;

}

#ks-mano1 li{
  float:left;
  list-style:none;
  line-height:37px;
  margin:0;
  padding:0
  background:#181818;
  border:#181818 1px hidden;
 }

#ks-mano1 li a, #ks-mano1 li a:link{
  color:#fff;
  display:block;
  margin:0;
  font-family: 'Droid Serif', serif;
  font-size:16px;
  padding:10px;
  text-decoration:none;
 border:#181818 1px hidden;  line-height:25px;
}

#ks-mano1 li a:hover, #ks-mano1 li a:active, #ks-mano1 .current_page_item a  {
  color:#fff;
  padding:10px;
  background:#6CF;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease; border:#6CF 1px hidden;
}
#ks-mano1 li li a, #ks-mano1 li li a:link, #ks-mano1 li li a:visited{
  font-size: 12px;
  background:#181818;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  border:#181818 1px solid;
}

#ks-mano1 li li a:hover, #ks-mano1 li li a:active {
  color: #fff;border:#6CF 1px solid;
  background:#6CF;
  -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}

#ks-mano1 li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px
}

#ks-mano1 li:hover ul, #ks-mano1 li li:hover ul, #ks-mano1 li li li:hover ul, #ks-mano1 li.sfhover ul, #topks-mano1 li li.sfhover ul, #topks-mano1 li li li.sfhover ul{
  left:auto
}

#ks-mano1 li:hover, #ks-mano1 li.sfhover{
  position:static;
}

#ks-ico {
  float:right;
  width:220px;
  padding:0px 0px ;
   }
#ks-ico img
{
margin-left:6px;
margin-top:10px;
height:28px; width:28px;
border:none;
    -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}
#ks-ico img:hover
{
    opacity:.8;
        -webkit-transition: all .6s ease;
    -moz-transition: all .6s ease;
    -o-transition: all .6s ease;
    -ms-transition: all .6s ease;
    transition: all .6s ease;
}
/*crawlist.net CSS ends*/
</style> <!--crawlist.net nev starts-->   <div id='ks-meno'>
<div id='ks-mano1'>
<ul><!--menu-->
<li><a href='#'>HOME</a></li>
<!--menu-->            <!--menu-->
<li><a href='#'>MENU 1</a><!--menu-->              <ul><!--submenu-->
<li><a href='#'>MENU 1a</a></li>
<li><a href='#'>MENU 1b</a></li>
<li><a href='#'>MENU 1c</a></li>
<li><a href='#'>MENU 1d</a></li>
<li><a href='#'>MENU 1e</a></li>
<!--submenu-->                </ul>
</li>
<!--menu-->
<li><a href='#'>MENU 2</a><!--menu-->                <ul><!--submenu-->
<li><a href='#'>MENU 2a</a></li>
<li><a href='#'>MENU 2b</a></li>
<li><a href='#'>MENU 2c</a></li>
<li><a href='#'>MENU 2d</a></li>
<!--submenu-->                </ul>
</li>
<!--menu-->
<li><a href='#'>MENU 3</a></li>
<!--menu-->              <!--menu-->
<li><a href='#'>MENU 4</a></li>
<!--menu-->          </ul>
</div>
<div id='ks-ico'>
<a href='#' target='_blank' title="Join Us on Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVny88H2G957Iia4R0lVC36fBJkMhCMnzX0ftJ1nX7oZXFLy9AD3uRHxE3KrThyZrlh1B66LIIcbhEcXAk2XZwEj4oyqvU8SW5QcpYhg5uJFT5578fXhPtD2BZQmfnlbKf6PrpLdiVIC3M/s1600/facebook.png"/></a>  <a href='#' target='_blank' title="Follow us on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO0cXt4eyBKdxoKlpzZM-o-4jYYOENxn_x86GYP2hmlqSUXqe9hZz5fnd7vKYHs7P-DYxqk1fJjEDLuSl-NjmhNBhf0mRYio_Jo0ugocBXgDB1NAmjb9eFxI24r-vyO7krsFe7GRDsSfUF/s1600/twitter.png"/></a>  <a href='#' target='_blank' title="Add Us to Circles"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6aZK_VoVu_RWbgPDvjlhbbCEzWsCXdSazNRYe1brmIg6CZVolbU1aZG8q__uc8Zzce14fBcczGlMUZ0nSVWe7IDpP0444993MC9RCpT1BLbsN63TQrLHDtLwmyYJscO7fHcBYr_MibZrl/s1600/google_plus.png"/></a>  <a href='#' target='_blank' title="Add Us on Linked in"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCyk9N2oD2Lx5HHV25Sbjh_Hl2PXQ7-y4Ai4gOC_z7vqUFtO0DDdID-KWxz-ju8yclGNXHyxtUYWUwjDW-eNIKRR_z2AfjJNni-V1mMeJmxe16vLvxPVgITkIG7bOMkbAtNIXC5E7x6z-v/s1600/linkedin.png"/></a>     </div>

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

Penjelasan :
Ganti tanda yang berwarna orange
dengan link dan Judul menu Tambahkan Sub menu jika diperlukan

Editd by. Myscript2010
Sumber by. Dynamic drive

Demo Show

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

Penjelasan :
Ganti Link yang berwarna orange dengan link sobat

Sumber by. SB77
Edited by. Myscript2010

Demo Show

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

Penjelasan : Ganti tanda yang berwarna orange dengan link sobat

All Sources
Edited by. Myscript2010

Demo Show

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

Penjelasan : Ganti tanda yang berwarna orange dengan link sobat

All Sources
Edited by. Myscript2010

DEMOSHOW

Myscript2010

Menu

Menu Tab

Pages

Google Plus top right corner

Link Exchange

Contact Us

Forum Diskusi

Memasang Random Posts

Kode Warna

Post Komentar

Ada beberapa macam CSS Horizontal Menus

Memasang Menu CSS 3 Slide Up Tabs

Cara Memasang Sub Menu Rotatext

Memasang Menu Drop Down

Memasang CSS Menu Horizontal

Random Posts

Popular Posts

Blog Archive

M2010