06/10/17 | Mys2010 on Codepen

Memasang kode Transparent Style
Login ke akun blog klik tombol blog baru, buat 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 : 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

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<style class="Mys2010-styles">
.ap {
position: fixed;
right: 0;
bottom:-8px;
left: 0;
height: 70px;
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;
text-align: center;
font-size:  11px;
 background: rgba(59,183,120,1);background: -moz-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -webkit-gradient(left top, right top, color-stop(47%, rgba(59,183,120,1)), color-stop(100%, rgba(71,196,218,1)));background: -webkit-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -o-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -ms-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: linear-gradient(to right, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bb778', endColorstr='#47c4da', GradientType=1 );border: 1px solid #222;
    } 
#M-2010, #teks, #posisi, #dibawah  {
    position: absolute;
    font-size: 11px;
    margin: 2px
}
#M-2010, #teks div {
    text-decoration: underline;
    cursor: pointer
}
#teks, #posisi {
    text-align: right;
    right:  50px;
}
#teks, #dibawah {
    text-align: left;
    left:  50px;
}
 #dibawah, #posisi {
    bottom:28px;
}

/*Transparent Style*/
    body {
    background: rgba(59,183,120,1);background: -moz-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -webkit-gradient(left top, right top, color-stop(47%, rgba(59,183,120,1)), color-stop(100%, rgba(71,196,218,1)));background: -webkit-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -o-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: -ms-linear-gradient(left, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);background: linear-gradient(to right, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bb778', endColorstr='#47c4da', GradientType=1 );
    }
.transparent .tuyin 
 {
 margin-top: 20px; 
 background-color: rgba(255, 255, 255, 0.37);
 border: 1px solid #222;
 border-radius: 5px;
 box-shadow: 0px 0px 2px 0px rgba(181, 181, 181, 0.3);
 padding:3%;
 text-align: center;
 width: 100%;
 min-height: 315px;
 position: relative;
 margin-bottom: 25px;
  }
.transparent .tuyin .title 
 {
 text-align: center; 
 color: #FFF;
 font-size: 49px; 
 }
.transparent .tuyin .plan-name 
 {
 font-size: 20px;
 font-weight: 400;
 border-bottom: 1px solid #FFF;
 padding-bottom: 15px;
 padding: 10px
 }
.transparent .tuyin .text
 {
 margin-top: 20px; 
 color: #474747;
 font-weight: 300;
 margin-bottom: 13px; 
 font-size: 16px;
 text-align: justify;
 }
    </style>

<meta name="viewport"content="width=device-width,initial-scale=1.0">
<body data-spy="scrolll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse navbar-fixed-top"style="background: linear-gradient(to right, rgba(59,183,120,1) 47%, rgba(71,196,218,1) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bb778', endColorstr='#47c4da', GradientType=1 );border: 1px solid #222;">
          <div class="container-fluid">
              <div class="navbar-header">
                 
                 <a class="navbar-brand" href="http://sule-parallax.blogspot.co.id/2017/04/quote-share.html"target="_blank"title="Quote share"> 
<i class="fa fa-share-square-o"style="font-size:14px;color:black">&nbsp;QUOTE</a></i></li>
    <a class="navbar-brand" href="http://sample-mys2010.blogspot.co.id"target="_blank"title="Mari Belajar"> 
<i class="fa fa-chain"style="font-size:14px;color:black">&nbsp;VISIT</a></i></li>
<a class="navbar-brand" href="http://sule-parallax.blogspot.co.id/2017/04/don-williams-i-would-like-to-see-you.html"target="_blank"title="My Music"> 
<i class="fa fa-music"style="font-size:14px;color:black">&nbsp; MUSIC</a></i></li>
      </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
<li><a href="https://ask.fm/Sule2010"target="_blank" title="Ask FM"> 
<i class="fa fa-font"style="font-size:14px;color:black">&nbsp;FM</a></i></li>
<li><a href="https://github.com/Myscript2010/freeCodeCamp-1"target="_blank"title="Github"> 
<i class="fa fa-github-alt"style="font-size:14px;color:black">&nbsp;GITHUB</a></i></li>           
        <li><a href="#"><span class="glyphicon glyphicon-search"style="font-size:14px;color:black"></span></a></li>
      </ul>
                 </div>
             </div>
          </div>
     </nav>

<div class="container">
  <div class="row transparent">
     <div class="col-md-6">
    <div class="tuyin first"> 
   <span class="title">Your Content</span>
    <div class="plan-name">Your Content Here Your Content Here </div>
     <div class="text">
<p>Your Content Here Your Content Here Your Content <br>
Your Content Here Your Content Here Your Content Here Your Content Here 
Your Content Here Your Content Here Your Content Your Content</p> </div>
<button type="button" class="btn btn-default">
<span style="color:red;">View <span class="glyphicon glyphicon-plus"></span> </button>
    </div>
  </div>

 <div class="col-md-6">
    <div class="tuyin first"> 
   <span class="title">Your Content</span>
    <div class="plan-name">Your Content Here Your Content Here</div>
     <div class="text">
<p>Your Content Here Your Content Here Your Content Here <br>
Your Content Here Your Content Here Your Content Here Your Content Here 
Your Content Here Your Content Here Your Content Your Content</p> </div>
<button type="button" class="btn btn-default">
<span style="color:red;">View <span class="glyphicon glyphicon-plus"></span> </button>
    </div>
  </div>

    <div class="col-md-12">
       <div class="tuyin first"> 
   <span class="title">Your Content</span>
<div class="plan-name">Your Content Here Your Content Here Your Content Here Your Content Here</div>
     <div class="text">
<p>Your Content Here Your Content Here Your Content Here <br>
Your Content Here Your Content Here Your Content Here Your Content Here 
Your Content Here Your Content Here Your Content 
Your Content Here Your Content Here Your Content Here Your Content Here 
Your Content Here Your Content Here Your Content Content Here Your Content M2010</p> </div>
<button type="button" class="btn btn-default">View <span class="glyphicon glyphicon-plus"></span> </button>
    </div>
  </div>
  </div>

<div class="ap" id="ap">
<div align="center">
<div id="dibawah">
<span style="font-family: arial;font-size:12px;color:#000;"> EDITED BY. <a href="https://Link Download"target="_blank"title="Edit Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; M - 2010 </a>&nbsp; DOWNLOAD </a> 
</div>
<div id="posisi">
<span style="font-family:arial;font-size:12px;color:#000;"> COPYRIGHT <a href="http://tools-gradiend.blogspot.co.id/2017/02/building-bditor.html"target="_blank"title="Edit Code"><span style="color: #FFFF00; font-size: 14px;">&nbsp; &copy; - 2017 </a>&nbsp; EDITORS </a> 
</div>
<h2>
<div align="center">
<a href="http://sample-mys2010.blogspot.co.id " target="_blank" title="Visit Links">
<img class="expando" border="0" src="https://sites.google.com/site/code6916/file/M-2010.png" width="140"height="10"></h2>
</a>
   </div>

<!DOCTYPE html>
<html>
<head>
<title>Myscript2010</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

Code by. Bootsnipp
Design Code is Edited by. M-2010

DEMOSHOW

* If you want to directly copy and paste you canDownload  Transparent Style

Category: Transparent Style

Mys2010 on Codepen

Transparent Style

POPULAR

Blog Archive