Widget Kotak Berlangganan Dengan Social Icons

Widget Kotak Berlangganan Dengan Social Icons - Apa kabar sobat Tutorial-ku? Bertemu lagi dengan saya diblog yang sederhana ini yang selalu memberikan info dan tutorial yang semoga dapat bermanfaat untuk anda semua para pembaca blog ini.

Seperti pada judul artikel kali ini, kita akan membahas tentang widget kotak berlangganan yang dilengkapi dengan Sosial icon, seperti FB, Twitter, dan G+.  Widget kotak berlangganan sangat membantu para pengunjung yang ingin berlangganan via email kepada anda, dengan begitu mereka tidak akan ketinggalan artikel terbaru dari blog anda.

Penampakan Widget Kotak berlangganan

Widget ini Memiliki Warna Latar Berwarna Putih Dan Biru Muda, dan widget ini di lengkapi Sosial Icons untuk bisa berkomunikasi dengan admin blog, gimana Tertarik, Dengan widget ini. Anda bisa ikuti langkah-langkah dibawah ini :

• Login ke Blogger
• Masuk ke Menu ''Tata letak''
• Klik ''Tambah Gadget''
• Pilih Gadget ''HTML/JavaScript''
• Copy kode di bawah ini, Di dalam gadget tersebut

     <style type="text/css">
  #byard-socialsub {
    width:300px;
    background:whitesmoke;
    border:1px solid #eaeaea;
    box-shadow:0 0 2px 2px #ccc;
  }
  .byard-socialsub-title {
    font-size:20px;
    font-family: 'Oleo Script', cursive;
    background:hsl(198, 100%, 49%);
    padding:5px;
    border-bottom: 2px solid #444;
    color:white;
    text-align:center;
  }
  #byard-socialsub-icons{
    padding-top: 8px;
    padding-left: 4px;
    padding-bottom: 15px;
    border-bottom: 2px dotted hsl(0, 0%, 27%);
  }
 
  ul.byard-socialsub-icons{
    margin:0;
    padding:0;
    list-style:none;
    perspective: 10000px;
  }
  ul.byard-socialsub-icons li{
    display: inline-block;
    width: 55px;
    height: 50px;
    margin-right: -px;
    background: none;
    font: bold 36px Arial;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    padding-left:10px;
  }
  ul.byard-socialsub-icons li a{
    display:block;
    width: 100%;
    height: 100%;
    color: black;
    text-decoration: none;
    outline: none;
    transition:all 300ms ease-out 0.1s;
  }
  ul.byard-socialsub-icons li a span{
    box-sizing: border-box;
    padding-top: 5px;
  
    display:block;
    width: 100%;
    height: 100%;
    transition:all 300ms ease-out 0.1s;
  }
  ul.byard-socialsub-icons li a img{
    border-width: 0;
  }
  ul.byard-socialsub-icons li:hover a{
    transform: rotateY(180deg);
    background: none;
  }
  ul.byard-socialsub-icons li:hover a span{
    transform: rotateY(180deg);
  }
  .byard-socialemailsub {
    font-size:14px;
    padding:5px;
    color:#444;
    font-family: Arial;
    font-family:bold;
  }
  .byard-socialemailsubname {
    background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN_rDnc56cuETZKgbUHKQaX7d3ykMQWDW9hQ_Gg-X2ozp-VWF1JSAPmIje29m3rr4aHa3_tSAhEwwV8hYdUoOsTMvmEeIZ78bpDvC_TUJIT6NhYxk6kYd5l7FbFHATJhWRD9UjiMf0b34/s320/name.png) no-repeat 7px 8px;
    border:1px solid #ddd;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:hsla(0,0%,27%,0.69);
    width:225px;
    height:25px;
    padding:5px 15px 5px 28px;
    margin-left:10px;
    display:inline-block;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  }
  .byard-socialemailsubemail {
    background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4KIzQ_vSzN-1esBQNkRyV4Wp4XOLpC_TWOxyUzr2ihPSIIxjEluq-w1ls8kaEcSf-YBnxQWpWTNmzu-h2reVzZBLDpDB2oCNKvfTmWxnhMCuFnK0WKEaEcnj3O_gD9TiPy8PgSwKA2Dc/s320/email.png') no-repeat 7px 10px;
    border:1px solid #ddd;
    font-family:Arial,sans-serif;
    font-size:13px;
    font-weight:bold;
    color:hsla(0,0%,27%,0.69);
    width:225px;
    height:25px;
    margin-top:10px;
    padding:5px 15px 5px 28px;
    margin-left:10px;
    display:inline-block;
    transition: border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
  }
  .byard-socialemailsubname:hover,.byard-socialemailsubemail:hover {
    border:1px solid #bebebe;
    box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
  }
 
  .byard-socialemailsubname:focus, .byard-socialemailsubemail:focus{
    border-color: hsl(198, 100%, 49%);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) inset, 0 0 8px hsl(198, 100%, 49%);
  }
  .byard-socialemailsubbutton {
    box-shadow: 3px 4px 0px 0px #1564ad;
    background:linear-gradient(to bottom, #79bbff 5%, #378de5 100%);
    background-color:#79bbff;
    border-radius:5px;
    border:1px solid #337bc4;
    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    font-weight:bold;
    padding:8px 70px;
    text-decoration:none;
    margin-top:10px;
    margin-left:35px;
    text-shadow:0px 1px 0px #528ecc;
  }
  .byard-socialemailsubbutton:hover {
    background:linear-gradient(to bottom, #378de5 5%, #79bbff 100%);
    background-color:#378de5;
  }
  .byard-socialemailsubbutton:active {
    position:relative;
    top:1px;
  }
</style>


<div id='byard-socialsub'>
  <div class='byard-socialsub-title'>
    Get In Touch With Us
  </div>
  <div id='byard-socialsub-icons'>
    <ul class="byard-socialsub-icons">
      <li>
        <a href="http://www.facebook.com/fb-Username">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNk1MmuxbvgqtyMb9_3fofikFLK3aKOBZdQPKRd4mNMSyZcbgjdHM3pBkgTohU3vlZERbqCRkN7d-p7fnmq-SXwHJ4OaCWBeyuQSBdcDgmRIOHfc2u8-EZqldKO4Q9EY1Bg3n9D9Yq8CI/s64/blueprint-social-03.png" title="Add to Facebook" />
        </a>
      </li>
      <li>
        <a href="https://plus.google.com/g+Username">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhveysPZeAMX1oDlitoI26J7nBBAKOuhHsq016bCfsE1vZaUR0-42YxsPnDSCB-ouU6mYYXImqR2JpgJ9QZmXoQnvTrED3ehLZYPSZHzwsaEC7-eBZPeASHnWFP1lDPryMYh-KmHS1ZU_c/s64/blueprint-social-04.png" title="Google plus" />
        </a>
      </li>
      <li>
        <a href="http://www.twitter.com/tweet-Username">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_lepIAGEmOmiuCwBCJwgGTG41NoBMbMonKryj6VEpFQmEzyO7cPngT-f3zWd_ljEUUuSGelyYVs5BwsT-h2yc5I72jM-wdPS7hQWIbHhB1JLw2aBzr2DMN4LgBDNtv2I5y8VUpc3LSBw/s64/blueprint-social-01.png" title="Add to Twitter" />
        </a>
      </li>
      <li>
        <a href="http://feeds2.feedburner.com/SemuaTutorial-ku">
          <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoA2H9CpjGmTV4Mppt2viNvLeSBdIi5Ug66W018KTRn6B7uSkWVzz4Wtjp7UeeLe4-0wI5n2XEOGcGfD85vOFpW_XjkzglrbrwzKCkGYZjznfVR7begCtGu_AH9nmZLRkIKxFLqfSF2q0/s64/blueprint-social-10.png" title="Add RSS Feed" />
        </a>
      </li>
    </ul>
  </div>
  <div class='byard-socialemailsub'>
    <p style='padding-top:5px;padding-bottom:10px;font-size: 14px;padding: 10px;font-family:Source Sans Pro;'>
      Sign Up For Free To Get Blogging Tips, Blogger Resources, Search Engine Optimization Tips, Templates and Widgets Straight In Inbox.
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify?uri=SemuaTutorial-ku' class='byard-subsbox-form' method='post' target='_new'>
      <input class='byard-socialemailsubname' name='name' placeholder='Your Name' type='text'/>
      <input class='byard-socialemailsubemail' name='email' placeholder='Your Email Address' type='text'/>
      <input class='byard-socialemailsubbutton' type='submit' value='Sign Up!'/>
    </form>
  </div>
 

Konfigurasi:

• Ganti fb-Username dengan Username Facebook anda
• Ganti tweet-Username dengan Username Twitter anda
• Ganti SemuaTutorial-ku dengan Id feedburner anda
• Ganti g+Username dengan Id Profile Google+ anda
• Setelah Semua, Diganti Silakan klik simpan

Demikianlah artikel ini semoga apa yang saya bagikan ini bermanfaat dan mudah untuk di terapkan oleh sobat, Silakan kalau sobat ingin memberi Pendapat tentang artikel yang saya share ini, Di kolom komentar dibawah ini. Sampai Jumpa :)