Menu


Menu Tab

Pages

Slider with stylized CSS3

Memasang CSS3 image Slider with stylized thumbnails
dengan gambar format JPG.
kode slide ini berfungsi juga untuk gambar format Gif.
Langkah penerapannya sebagai berikut :
login ke akun blog klik template klik edit HTML
temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian, copy kode berikut
pastekan diatas kode ]]></b:skin> klik simpan selesai.
.slider{ 
width: 640px; /*Same as width of the large image*/
position: relative;        
/*Instead of height we will use padding*/
padding-top: 320px; /*That helps bring the labels down*/
margin: 100px auto;
/*Lets add a shadow*/
box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}
/*Last thing remaining is to add transitions*/
.slider>img{
position: absolute;
left: 0; top: 0;
transition: all 0.5s;
}
.slider input[name='slide_switch'] {
display: none;
}
.slider label {
/*Lets add some spacing for the thumbnails*/
margin: 18px 0 0 18px;
border: 3px solid #999;
float: left; 
cursor: pointer;
transition: all 0.5s;
/*Default style = low opacity*/
opacity: 0.6;
}
.slider label img{
&display: block;
}
/*Time to add the click effects*/
.slider input[name='slide_switch']:checked+label {
border-color: #666;
opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.slider input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.slider input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
Kemudian klik tataletak dan klik tambah gadged,
copy kode berikut pastekan kedalam gadged tersebut dan klik simpan selesai
<div class="slider">
<input type="radio" name="slide_switch" id="id1"/>         
<label for="id1">       
<img src="https://Your Link.gif" width='100' height='100'>
</label>
<img src="https://Your Link.gif"width='650' height='320'>
<!--Lets show the second image by default on page load-->
<input type="radio" name="slide_switch" id="id2" checked="checked"/>
<label for="id2">
<img src="https://Your Link.gif" width='100' height='100'>         
</label>         
<img src="https://Your Link.gif"width='650' height='320'>
<input type="radio" name="slide_switch" id="id3"/>          
<label for="id3">         
<img src="https://Your Link.gif" width='100' height='100'>       
</label>        
<img src="https://Your Link.gif"width='650' height='320'>
<input type="radio" name="slide_switch" id="id4"/>        
<label for="id4">          
<img src="https://Your Link.gif" width='100' height='100'>                  
</label>           
<img src="https://Your Link.gif"width='650' height='320'>
<input type="radio" name="slide_switch" id="id5"/>        
<label for="id5">        
<img src="https://Your Link.gif" width='100' height='100'>          
</label>       
<img src="https://Your Link.gif"width='650' height='320'>             
</div>
Sumber by. Kodeplayer
Edited   by. Myscript2010 on Codepen

Slide Auto Show


Cara memasang Slide Auto untuk menampilkan Foto, Wallpaper di postingan blog
seperti biasa copy kode berikut pastekan kedalam gadged ataupun kedalam entri halaman baru HTML dan klik simpan selesai

<script language="JavaScript1.1">
<!--

/*
JavaScript Image slideshow:
wap design by. Myscript2010
Sumber by. JavaScript Kit
*/
var slideimages=new Array()
var slidelinks=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}

function slideshowlinks(){
for (i=0;i<slideshowlinks.arguments.length;i++)
slidelinks[i]=slideshowlinks.arguments[i]
}

function gotoshow(){
if (!window.winslide||winslide.closed)
winslide=window.open(slidelinks[whichlink])
else
winslide.location=slidelinks[whichlink]
winslide.focus()
}

//-->
</script>

<a href="http://Your link.blogspot.co.id/"><img border="0" src="http://Your link.jpg" height="500" name="slide" width="700" /></a>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("http://Your link.jpg","http://Your link.jpg","http://Your link.jpg"," http://Your link.jpg","http://Your link.jpg"," http://Your link.jpg","http://Your link.jpg"," http://Your link.jpg","http://Your link.jpg"," http://Your link.jpg","http://Your link.jpg"," http://Your link.jpg")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>

Sumber by. JavaScript Kit
Edited   by. Myscript2010


Slider Efek Chop

Chop Slider Auto
adalah slider yang menapilkan
beberapa slide  menarik dan tempaltenya pun harus sudah mendukung slide tersebut. berikut cara penerapannya :
Login ke akun blog klik tombol blog barubuat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  ganti dengan kode blank template, yang tersedia pada sumber  berikut ini 
Get Blank Template    edit background warna sesuai keinginan dan klik simpan selesai
Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai
<style class="Mys2010-styles">
body {background-image: url(http://4.bp.blogspot.com/-V1qFZYc1N8g/Vv6LIgaRVBI/AAAAAAAAZQo/SLOIXts3BfcZct1jVtGynL2EAulxOEn0A/s1600-r/Darkwood-mys2010.jpg);color:red;height:100%;overflow:hidden;} 
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  10px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #222;
  border-bottom: 3px solid #dad;
}
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 10px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background:  #000020;
border-top: 2px solid #f0f;
z-index: 9999;
}  
h2 {
padding: 15px; 
background: -webkit-linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
background: linear-gradient(transparent 10%, goldenrod 50%, transparent 90%); 
}
.wrapper {
    position: relative;
    margin: 0 auto 15px;
    width: 500px;
    height: 350px;
    display: block;
    padding: 5px;
    background: #;
    z-index: 2
    }
#slide-prev, #slide-next {
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    padding: 15px;
    bottom: 50%;
    position: absolute;
    z-index: 4
    }
#slide-prev {
    left: 20px;
    background: #FFF url(http://3.bp.blogspot.com/-vjIXs1ktYSs/T-JaYVBdLzI/AAAAAAAACe8/fvZJeayf9ew/s1600/arrow_left.png) no-repeat center
    }
#slide-next {
    right: 20px;
    background: #FFF url(http://3.bp.blogspot.com/-2G1xuDOoAlM/T-JaYnZkpFI/AAAAAAAACfI/-jnzqF3ogS8/s1600/arrow_right.png) no-repeat center
    }

#slider {
    width: 500px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    display: block
    }

#slider img {
    width: 100%;
    height: 100%
    }

.slide {
    display: none
    }

.cs-activeSlide {
    display: block
    }

.slide-descriptions {
    display: none
    }

.caption {
    background: rgba(238, 238, 238, 0.83);
    color: #333;
    display: none;
    padding: 5px 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 5px;
    z-index: 3;
    font: normal 13px/20px Arial, sans-serif
    }
</style> 
<div class="wrapper">
<a href="https://www.blogger.com/blogger.g?blogID=2797383530765388234#" id="slide-next"></a>
<a href="https://www.blogger.com/blogger.g?blogID=2797383530765388234#" id="slide-prev"></a>
<div id="slider">
<div class="slide cs-activeSlide">
<img src="http://4.bp.blogspot.com/-27tMQpyWtco/VlSAr9X2BCI/AAAAAAAAQsk/8sQEt-yTfwo/s1600-r/Scottadkins_Mys2010s2.jpg" /></div>
<div class="slide">
<img src="http://1.bp.blogspot.com/-D8EpI8Rwf5Q/VlR_jw-Lm4I/AAAAAAAAQsM/vTJdBUQ5xKA/s1600-r/Scottadkins_Mys2010s1.jpg" /></div>
<div class="slide">
<img src="http://1.bp.blogspot.com/-ccV4HKUlM_s/VlR9aYSZX9I/AAAAAAAAQrk/Js-SSpfhx_M/s1600-r/Scottadkins_Mys2010s.jpg" /></div>
<div class="slide">
<img src="http://1.bp.blogspot.com/-Jt4VdKo9YwA/VlR8l6iT_XI/AAAAAAAAQrc/4iaj2oV6-J4/s1600-r/Scottadkins_Mys2010.jpg" /></div>
</div>
<div class="slide-descriptions">
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=P6fKD_U8iGs" target="_blank" title="watch movies on youtube">Undisputed III</a>&nbsp;Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=GIQWR7qQzvQ" target="_blank" title="watch movies on youtube">Close Range</a>&nbsp;Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=t03wigE8GK0" target="_blank" title="watch movies on youtube">Undisputed II</a>&nbsp;Youtube</div>
<div class="sl-descr">
<a href="https://www.youtube.com/watch?v=P6fKD_U8iGs" target="_blank" title="watch movies on youtube">Undisputed III</a>&nbsp;Youtube</div>
</div>
<div class="caption">
</div>
</div>
</div>
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<a href="https://sites.google.com/site/code6916/file/Chop-Slider-mys2010s.css"title="Myscript2010s"> 
<h2>
<font size="1" color="blue"face="arial">DOWNLOAD CODE</2></a>  
</div>
<header> 
<div class="Top Title Header">
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id/2016/04/chop-slider-auto.html"title="Myscript2010s"><b><font size="1" color="orange"face="arial">LET'S STUDY</b>
</div>
</header>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-chopslider-2.2.0.js"></script>
<script src="https://sites.google.com/site/vanzdy/script/jquery-cstransitions-1.2.js"></script>
<script src='//assets.codepen.io/assets/common/stopExecutionOnTimeout.js?t=1'></script>
<script>jQuery(function () {
    $('#slider').chopSlider({
        slide: '.slide',
        nextTrigger: 'a#slide-next',
        prevTrigger: 'a#slide-prev',
        hideTriggers: true,
        sliderPagination: '.slider-pagination',
        useCaptions: true,
        everyCaptionIn: '.sl-descr',
        showCaptionIn: '.caption',
        captionTransform: 'scale(0) translate(-600px,0px) rotate(45deg)',
        autoplay: true,
        autoplayDelay: 3000,
        t3D: csTransitions['3DFlips']['random'],
        t2D: [
            csTransitions['multi']['random'],
            csTransitions['vertical']['random']
        ],
        noCSS3: csTransitions['noCSS3']['random'],
        mobile: csTransitions['mobile']['random'],
        onStart: function () {
        },
        onEnd: function () {
        }
    });
}); 
</script>
Source Code by. Irvan Efendy
Design code is edited by. Mys2010 on Codepen
If you want to directly copy and paste you canDownload Here Chop Slider Auto

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(http://1.bp.blogspot.com/-seem0mB3cSU/VlM1bOM_B3I/AAAAAAAAQp0/PF4VouE3_aY/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] = "http://1.bp.blogspot.com/-b8az2MhLvuA/VlM0zXT-O0I/AAAAAAAAQps/EoqI9sfknAI/s1600-r/tidak_mys2010.jpg";
imgr[1] = "http://1.bp.blogspot.com/-b8az2MhLvuA/VlM0zXT-O0I/AAAAAAAAQps/EoqI9sfknAI/s1600-r/tidak_mys2010.jpg";
imgr[2] = "http://1.bp.blogspot.com/-b8az2MhLvuA/VlM0zXT-O0I/AAAAAAAAQps/EoqI9sfknAI/s1600-r/tidak_mys2010.jpg";
imgr[3] = "http://1.bp.blogspot.com/-b8az2MhLvuA/VlM0zXT-O0I/AAAAAAAAQps/EoqI9sfknAI/s1600-r/tidak_mys2010.jpg";
imgr[4] = "http://1.bp.blogspot.com/-b8az2MhLvuA/VlM0zXT-O0I/AAAAAAAAQps/EoqI9sfknAI/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

Myscript2010

Home Page
 
 

Copyright@2015

Copyright © Cibeber Cimahi