UnlabelledBox Email

Box Email

Memasang kode Box Email
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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>
body {
background:#adadad;
} 
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  overflow-x:hidden;
  width:100%;
  font-family: monospace;
  font-size: 16px;

}
h1 {
  font-size: 2em;
  text-align: center;
  margin-top: 1em;
}
h2 {
  font-size: 1.6em;
  display: flex;
  justify-content: center;
  margin-top: 1em;

}
p, ul {
  margin-top: 1em;
  margin-bottom: 1em;
  padding: 0em 2em;
  line-height: 1.6;
}
.avatar {
  height: auto;
  max-width:80px;
  border-radius: 50%;
}
.skills li{
  list-style-type: square;
}
.about-section {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
  flex-shrink: 0;
  align-items: center;
}
.flex-split-left {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #808;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: black;
  height: auto;  
  padding-bottom: 2em;
}
.logothing {
  margin-top: 1em;
  height: 50px;
  width: auto;
}
.flex-split-image {
  align-self: center;
  height: 90px;
  width: auto;
  margin-bottom: 2em;
  margin-top: 2em
}
.left-links {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
.flex-split-left a {
  text-decoration: overline;
  color:#ada;
  font-weight: bold;
  padding: 0.2rem 0.4rem;
}
.flex-split-left a:hover {
  background-color: #5e6cd6;
  color:#000;
}
.flex-split-left a:active {
}
.flex-split-left a:visited {
}
.flex-split-right {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex; 
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  color: hsl(0, 0%, 14%);
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
height: auto;
}
.flex-split-right h1, .flex-split-right h2 {
  color: hsl(255, 100%, 62%);
}
.flex-split {
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
 -ms-flex-direction: column;
flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
.middle-controls {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  /*FIXME get rid of importants*/
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
  -webkit-flex-direction: row !important;
      -ms-flex-direction: row !important;
          flex-direction: row !important;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  width: 100vw;
  background-color: hsl(255, 100%, 61%);
}
.circle-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  padding: 0.5em 2em;
  fill: white;
}
.social-icon {
  width: 24px;
  height: auto;

}
@media all and (min-width:60em) {
  .flex-split > div {
    min-width: 50%;
    width:50%;}
.flex-split {
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -webkit-flex-direction: row;
  -ms-flex-direction: row;
flex-direction: row;
overflow: hidden;
height: 100vh;
position: relative;
    -webkit-backface-visibility: hidden;
backface-visibility: hidden;
will-change: overflow;
}
.logothing {
    height: 300px;
    width: auto;
  }
  .left-links {
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
        -ms-grid-row-align: center;
align-items: center;
  }
  .flex-split-image {
    height: 300px;
    width: auto;
    margin-bottom: 2em;
  }
  /*circular*/
  .middle-controls {
    z-index: 1000;
    position: absolute;
    left: 50%;
    top: 20%;
    margin-left: -25px;
    max-width: 50px;
    /*FIXME get rid of importants*/
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -webkit-flex-direction: column !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background-color: transparent;
  }
  .circle-button {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 50px;
    width: 50px;
    box-shadow: 0px 2px 2px 2px hsla(255, 59%, 23%, 0.42);
    border-radius: 50%;
    border: 3px solid #222;
    background-color: orange;
    margin-bottom: 2em;
    color: hsl(255, 100%, 61%);
    padding: 0.5em 0.5em;
    fill: hsl(255, 100%, 61%);
    }
  .circle-button:hover {
    border: 2px solid white;
    background-color: hsl(255, 100%, 61%);
    -webkit-transition:all 0.4s ease-out;
    transition: all 0.4s ease-out;
    color: white;
    fill: white;
  }
  .circle-button:active {
    border: 2px solid white;
    background-color: hsl(255, 100%, 61%);
    -webkit-transition:all 60ms ease;
    transition: all 60ms ease;
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
    color: white;
    fill: white;
  }
  p, ul {
  padding: 0em 4em;
  }
}
.flex-split > div {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
</style> 

<div class="flex-split">
      <!-- Child divs -->
      <div class="flex-split-left">
        <!-- totally optional -->
        <div class="flex-split-image">
<img src="https://sites.google.com/site/sule62001/sule2001code/W-M-2010.png" alt="Smiley face" height="42" width="342">     
</div>     
   
<div class="middle-controls">
        <a rel="nofollow" rel="noreferrer"href="#" class="circle-button" target="_blank" title="M2010">
        <i class="fa fa-instagram"style="font-size:28px;color:yellow"></i></a>
        <a rel="nofollow" rel="noreferrer"href="#" class="circle-button" target="_blank" title="M2010">
        <i class="fa fa-facebook-square"style="font-size:28px;color:yellow"></i></a>
        <a rel="nofollow" rel="noreferrer"href="#" class="circle-button" target="_blank" title="M2010">
        <i class="fa fa-google-plus-square"style="font-size:28px;color:yellow"></i></a>
      </div>    
      
<nav class="left-links">
          <a rel="nofollow" rel="noreferrer"href="#about">Home Page</a>
          <a rel="nofollow" rel="noreferrer"href="#projects">Menu 1</a>
          <a rel="nofollow" rel="noreferrer"href="#skills">Menu 2</a>
          <a rel="nofollow" rel="noreferrer"href="#contact">Menu 3</a>
        </nav>
      </div>

<!-- Email Sule -->
<div class="flex-split-right">         
<script src="http://www.emailmeform.com/builder/forms/jsform/H2e47Fh107Uqtd5Jf2c3O" type="text/javascript"></script>
<div style="margin-top:18px;text-align:center"><div id='emf_advertisement'><font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src="//assets.emailmeform.com/images/footer-logo.png?RU1GLTAyLTI5" /></span><font face="Verdana" size="2" color="#000000">EMF </font><a style="text-decoration:none;" href="http://www.emailmeform.com/" target="_blank">
<font face="Verdana" size="2" color="#000000">Free Form Builder</font></a></div></div>
<div class="skills" id="skills">
          <h2>Skills</h2>
          <ul class="skill-list">
            <li>Always learning</li>
            <li>Always Evolving with satisfying results</li>             
           </ul>
         </div>     
      </div>
    </div>
</body>
</html>
Code by. Bootstrap/snipp
Design Code is Edited by. M-2010
DEMOSHOW
* If you want to directly copy and paste you canDownload  Box Email

Category: