Myscript2010: 12/09/15

Tombol Link 3D Button

Tombol link 3D button
tombol ini dapat digunakan untuk demoshow maupun download isi postingan yang sudah disediakan
dibawah ini adalah kode tombol link 3D button yang dapat diterapkan di area gadged maupun entri halaman baru HTML

<style> <style type'text/css'>
#menu{ list-style: none; margin: 0; padding: 0; }
#menu img { border: none; } #menu { width: 150px; margin: 10px; }
#menu a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #0033CC; height: 24px; text-decoration: none; }
#menu a:link,
#menu a:visited { color: #FEF280; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSL9c7OwJn54_HZ3VZvcsJAgR7XD8ibo5WQfJuYTFc68oRHEL8a2p0G0c6aWVJGJcLX4Mw8-UoSoWFLkc6UXXKF5NPmM6NHBqKK8F7jhgMSNs5RlNL35uOSAfyyicaqz2FJao2wDVENwg/s1600-r/3Dbuttons.png); padding: 8px 0 0 35px; }
#menu a:hover { color: #1919B3; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSL9c7OwJn54_HZ3VZvcsJAgR7XD8ibo5WQfJuYTFc68oRHEL8a2p0G0c6aWVJGJcLX4Mw8-UoSoWFLkc6UXXKF5NPmM6NHBqKK8F7jhgMSNs5RlNL35uOSAfyyicaqz2FJao2wDVENwg/s1600-r/3Dbuttons.png) 0 -32px; padding: 8px 0 0 35px; }</font>
</style>

<p align="center">
<div id="menu">
<a href="http://Your Link" target="_blank">3D BUTTON</a></li> </ul> </div>
</font>

<style> <style type'text/css'>
#menu{ list-style: none; margin: 0; padding: 0; }
#menu img { border: none; } #menu { width: 150px; margin: 10px; }
#menu a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background: #0033CC; height: 24px; text-decoration: none; }
#menu a:link,
#menu a:visited { color: #FEF280; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiWunaICOrU85lgZoHqyjJFya70ZW_w-FSwAHcTXytGfUO2uypYDMinkZXbKL5UChNaIooYCe7XyyriVPzWOyEaEM-s0ZL6X5U8GPcECmtgrTXZsbGLhA8qyRvhmPm1nYu9xWTfnkS3LU/s1600-r/bt_mys2010.png); padding: 8px 0 0 35px; }
#menu a:hover { color: #fff; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLiWunaICOrU85lgZoHqyjJFya70ZW_w-FSwAHcTXytGfUO2uypYDMinkZXbKL5UChNaIooYCe7XyyriVPzWOyEaEM-s0ZL6X5U8GPcECmtgrTXZsbGLhA8qyRvhmPm1nYu9xWTfnkS3LU/s1600-r/bt_mys2010.png) 0 -32px; padding: 8px 0 0 35px; }</font>
</style>

<p align="center">
<div id="menu">
<a href="http://Your Link" target="_blank">3D BUTTON</a></li> </ul> </div>
</font>

<style> .button {
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
-moz-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
-webkit-box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
box-shadow:0 1px 3px rgba(0, 0, 0, 0.25);
background:scroll 0 0 #222222;
border-bottom:1px solid rgba(0, 0, 0, 0.25);
color:#FFFFFF !important;
cursor:pointer;
font-weight:bold;
line-height:1;
overflow:visible;
font-size:17px;
padding:8px 19px 9px;
position:relative;
text-decoration:none;
text-shadow:0 -1px 1px rgba(0, 0, 0, 0.25);
width:auto;
}
.demobutton {
background-color:#00008B;
text-align:center;
width:100px;
}
.demobutton:hover {
background-color:#EB7D05;
}
.downloadbutton {
background-color:#00008B;
text-align:center;
width:100px;
}
.downloadbutton:hover {
background-color:#00AC00;
}
.homebutton {
background-color:#00008B;
text-align:center;
width:100px;
}
.homebutton:hover {
background-color: #00BFFF;
}
.button:hover {
-moz-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
-webkit-box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);
box-shadow:0 1px 11px rgba(0, 0, 0, 0.45);}}
</style>
<p align="center">

    <a class="button homebutton" href="http://Your Link" rel="nofollow"
    style="float: center;" target="_blank"><span style="display:
    inline-block;">3D BUTTON</span></a></p>

<style>

a.css3dbutton {
    background: darkred; /* background color of button */
    color: white;
    text-decoration: none;
    font: bold 28px Arial; /* font size and style */
    position: relative;
       top: 0; /* anchor main button's position */
    bottom: -12px; /* Depth of 3D effect. :after pseudo element inherits this value so it's animated in Chrome. See: kizu.ru/en/pseudos */
       margin-bottom: 12px;
    -moz-box-shadow: 0 -15px 5px darkred inset;
    -webkit-box-shadow: 0 -15px 5px darkred inset;
    box-shadow: 0 -15px 5px darkred inset;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
a.css3dbutton, a.css3dbutton:after {
    display: inline-block;
    padding: 10px 15px; /* vertical and horizontal padding of button */
    -moz-border-radius: 8px/15px;
    -webkit-border-radius: 8px/15px;
    border-radius: 8px/15px;
    outline: none;
}
a.css3dbutton:after { /* pseudo element to construct 3D side of button */
    content: "";
    position: absolute;
    padding: 0;
    z-index: -1;
    bottom: inherit; /* Inherit main button bottom value to animate it. See: kizu.ru/en/pseudos */
    left: 0;
    width: 100%;
    height: 100%;
    background: #6e0e0c; /* background color of 3D effect */
    -moz-box-shadow: 1px 0 3px gray;
    -webkit-box-shadow: 1px 0 3px gray;
    box-shadow: 1px 0 3px fff;
}
a.css3dbutton:hover {
    -moz-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    -webkit-box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    box-shadow: 0 25px 5px rgba(182, 64, 61, 0.7) inset;
    background: #bc3835; /* background color when mouse rolls over button */
}
a.css3dbutton:active {
    top: 12px; /* shift button down 12px when depressed. Change 12px to match button's "bottom" property above */
    bottom: 0;
    -moz-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    -webkit-box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
    box-shadow: 0 -20px 5px darkred inset, 1px 1px 2px #eee;
}
</style>
<a href="http://Your Link" class="css3dbutton">3D BUTTON</a>

<style type="text/css">

.rssbutton{
background-color: #ff6600;
border: 1px #ff6600 outset;
padding: 0 2px;
color: white;
text-decoration: none;
font: bold 10px Verdana;
}
.rssbutton:visited, .rssbutton:hover, .rssbutton:active{
color: white;
}
.cssbutton{
background-color: #d1ec4c;
border: 2px #d1ec4c outset;
padding: 1px 4px;
color: black;
text-decoration: none;
font: bold 90% "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
}
.cssbutton:visited{
color: black;
}
.cssbutton:hover{
border-style: inset;
background-color: #e3f48e;
padding: 2px 3px 0 5px; /*shift text 1px to the right and down*/
}
.cssbutton:active{
color: black;
}
</style>
<p>
<a href="http://Your Link" class="rssbutton">Menu 1</a>
<a href="http://Your Link" class="rssbutton">Menu 2</a>
</p> <a href="http://Your Link" class="cssbutton">3D BUTTON</a>
<a href="http://Your Link" class="cssbutton">3D BUTTON</a></p>

<style type="text/css">
.container {
margin: 50px auto;
width: 480px;
text-align: center;
}
.container .button {
margin: 10px;
}
.button {
display: inline-block;
vertical-align: top;
position: relative;
padding: 0 15px 0 15px;
line-height: 35px;
font-size: 12px;
font-weight: bold;
color: white;
text-align: center;
text-transform: uppercase;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
background: #576dce;
background-clip: padding-box;
border: 1px solid;
border-color: #374fbb #344cb3 #2b3e94;
border-radius: 2px;
-webkit-font-smoothing: antialiased;
background-image: -webkit-linear-gradient(top, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
background-image: -moz-linear-gradient(top, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
background-image: -o-linear-gradient(top, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
background-image: linear-gradient(to bottom, #92a0df 0%, #576dce 50%, #3f58c7 80%, #576dce 100%);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.button:hover, .button.hover {
background-color: #5f74d0;
border-color: #2d429c #2d429c #253680;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #576dce;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #576dce;
}
.button:active, .button.active {
border-color: #253680 #2b3e94 #3147a8;
background: #475fc9;
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
}
.button:before {
content: '';
position: absolute;
top: 9px;
right: 12px;
width: 17px;
height: 17px;
background: #374fbb;
border-radius: 9px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.2);
}
.button:after {
content: '>';
float: right;
position: relative;
margin-left: 15px;
font: bold 18px/33px "Comic Sans MS";
/* I tried everything but couldn't get the vertical alignment to be
consistent in IE, so this is a hack targeting IE8-9-10. */
line-height: 31px\0;
color: #6377d1;
text-shadow: 0 -1px #8696dc, 0 1px 1px rgba(0, 0, 0, 0.3);
-webkit-font-smoothing: subpixel-antialiased;
}
.button-green {
background: #75a940;
border-color: #5b8432 #567d2f #425f24;
background-image: -webkit-linear-gradient(top, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
background-image: -moz-linear-gradient(top, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
background-image: -o-linear-gradient(top, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
background-image: linear-gradient(to bottom, #9bc86e 0%, #75a940 50%, #669338 80%, #75a940 100%);
}
.button-green:hover, .button-green.hover {
background-color: #7ab043;
border-color: #476627 #476627 #354d1d;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #75a940;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #75a940;
}
.button-green:active, .button-green.active {
border-color: #354d1d #425f24 #4f722b;
background: #6b9a3a;
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
}
.button-green:before {
background: #5b8432;
}
.button-green:after {
color: #7db444;
text-shadow: 0 -1px #94c462, 0 1px 1px rgba(0, 0, 0, 0.3);
}
.button-red {
background: #cf3e38;
border-color: #ab2e29 #a32c27 #82231f;
background-image: -webkit-linear-gradient(top, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
background-image: -moz-linear-gradient(top, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
background-image: -o-linear-gradient(top, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
background-image: linear-gradient(to bottom, #de7a76 0%, #cf3e38 50%, #bb332d 80%, #cf3e38 100%);
}
.button-red:hover, .button-red.hover {
background-color: #d14640;
border-color: #8a2521 #8a2521 #6d1e1a;
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #cf3e38;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 1px 5px #cf3e38;
}
.button-red:active, .button-red.active {
border-color: #6d1e1a #82231f #962924;
background: #c3352f;
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.8);
}
.button-red:before {
background: #ab2e29;
}
.button-red:after {
color: #d24a44;
text-shadow: 0 -1px #db6e69, 0 1px 1px rgba(0, 0, 0, 0.3);
}
</style>
<div class="container">
<a href="http://Your Link" class="button">Start</a><a href="http://Your Link" class="button button-green">Start</a><a href="http://Your Link" class="button button-red">Start</a><br><a href="http://Your Link" class="button hover">Start</a><a href="http://Your Link" class="button button-red hover">Start</a>
<a href="http://Your Link" class="button button-green hover">Start</a> </div>

Penjelasan :
Terapkan Link dan edit kode yang di warnai sesuai keinginan

All Sources
Edited by. Myscript2010

Test Script Untuk melihat hasil

Kode Script Iklan Melayang

Kode Script Iklan melayang
kode ini dapat menampilkan gambar
dengan format jpg, gif, png, serta dapat menampilkan script dengan cara menambahkan kode textarea. Untuk penerapannya Login ke akun blog, klik tata letak dan klik tambahgadged, copy kode dibawah ini : terapkan kedalam ruang gadged tersebutkemudian klik simpan selesai

<style type="text/css">
#topbar {
position:absolute;
z-index: 80;
padding: 7px;
background: #444;
background: #333)));
border: 1px solid #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #444 0 2px 15px;
-moz-box-shadow: #444 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #444;
}
#topbar img {
border:none;
}
#topbar .tombol {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .tombol button {
color:#fff;
border: solid 1px #000;
margin:0;
padding:2px 110px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #444;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#333));
background: -moz-linear-gradient(top, red, #333);
}
#topbar .isi_iklan {
background-color:#fff;
margin:0;
padding:4px;
width: 250px;
border: 1px solid #444;
}
</style>
<script src="https://sites.google.com/site/code6916/file/Kode-Iklan-Melayang-Mys2010.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>
<div class="isi_iklan">
<a href="http://toyotanasmoco.net/category/rush" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5jo6MmrGnjmm9lp2gKKLWMwN84rKwi4LTLV0E8UYlfspKRkqtK6hwGoc1TcSpOh43dXuTUmGcLxImp6SFy5DVNFc2wE5rvWzzUbpo2y-WlpU9eMuT4-BZWBGdOlRTjpr6zrqc2863muc/s1600/iklan-rush.gif " name="e902" border="0" width="250" height="150" /></a></script>

Penjelasan :
Terapkan Kode iklan dibawah Teks yang berwarna merah

Source Code by. Blogcunayz
Design code is edited by. Mys2010 on Codepen

If you want to directly copy and paste you canDownload Here Floating ad code

Kode Anti Copas

Kode Anti Copy Paste
Kode ini biasanya digunakan
untuk mengunci artikel yang tidak boleh di copy,
penyimpanan kode ini berada dibawah artikel
penerapannya ada yang di terapkan kedalam gadged ada juga yang diterapkan di edit HTML berikut kode tersebut serta cara penerapannya, login ke akun blog klik tata letak dan klik tambah gadged copy kode dibawah ini dan pastekan kedalam gadged tersebut klik simpan selesai

Kode Anti Copas 1.
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;' ondragstart='return false' onselectstart='return false' style='-moz-user-select: none; cursor: default;'>

Kode Anti Copas 2.
<script language='JavaScript1.2'>
function disableselect(e){
return false
}
function reEnable(){
return true
}
document.onselectstart=new Function ("return false")
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>

Kode Anti Copas 3
Login ke akun Blogger klik edit HTML temukan kode </body>
gunakan CTRL F untuk pencarian copy kode dibawah ini letakan diatas kode </body>
dan klik simpan selesai

<script language='JavaScript1.2'>
//Disable select-text script (IE4+, NS6+)- By Andy Scott
//Exclusive permission granted to Dynamic Drive to feature script
//Visit http://www.dynamicdrive.com for this script
function disableselect(e){
return false
}
function reEnable(){
return true
}
//if IE4+
document.onselectstart=new Function ("return false")
//if NS6
if (window.sidebar){
document.onmousedown=disableselect
document.onclick=reEnable
}
</script>
<script language='JavaScript'>curPage=1;
document.oncontextmenu = function(){return false}
if(document.layers) {
window.captureEvents(Event.MOUSEDOWN);
window.onmousedown = function(e){
if(e.target==document)return false;
}
}
else {
document.onmousedown = function(){return false}
}</script>

.do-not-copy {
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}
<div class="do-not-copy">
do-not-copy</div>

Kode Anti Copas
Login ke akun Blogger klik edit HTML temukan kode <body>
gunakan CTRL F untuk pencarian hapus kode <body> ganti dengan code
<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false'>
dan klik simpan selesai

All Sources
Edited by. Myscript2010

Subscribe to: Posts (Atom)