AGUNG TUTORIAL

Belajar Bordir Wilcom dan Tajima Mesin SWF, VBA Macro Excel, Design Grafis CorelDraws, Video Editing, Download Software-software, Solusi Masalah Error Komputer, Jaringan dan Internet, Analisis Jaringan, Analisis Problem Hardware dan sebagainya

11/21/2018

Gadget Follow dan Berlangganan Artikel via email Pada Blog

Berbagi artikel baru atau update artikel kepada orang-orang telah mengikuti blog anda merupakan hal yang dianjurkan untuk meningkatkan rating atau traffik blog anda. Dengan begitu akan terjadi peningkatan jumlah pembaca setia blog anda. Adapun cara membagikan artikel via email dapat dengan cara memasang Gadget Berlangganan Artikel yang diletakan di sidebar blog. 

Manfaat lain dari Gadget Berlangganan Artikel

Dengan menambahkan Gadget Gadget Berlangganan Artikel dapat menjadi media yang efektif untuk mempromosikan blog, meningkatkan trafik, memberikan pesan email tentang artikel terbaru atau update, memberikan tautan media sosial misalkan facebook, google +, Twitter, dan lain-lain. Serta akan menambah penghasilan Google Adsense blog anda.


Cara Menambahkan Gadget Berlangganan Artikel Via Email

Untuk menambahkan Gadget ini dapat dengan mudah hanya dengan mengcopykan code dibawah ini ke dalam Add Gadget HTML/JAVASCRIPT dan simpan di Content tanpa Judul (Title).

Adapun script yang dapat digunakan adalah sebagai berikut,

<style type="text/css">  
 .hbzsignup-form {  
   background: transparent url("https://1.bp.blogspot.com/-Y_e_B9KzB-c/Vr6fNXna_BI/AAAAAAAAALo/dk3TFDW2-4I/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;  
   height: 150px;  
   width: 250px;  
   margin: 10px auto 60px auto;  
 }  
 .hbzform-inner p {  
   text-align: center;  
   color: #fff;  
   padding: 10px;  
   font: bold 18px "trebuchet MS","Tahoma";  
 }  
 .hbzemailform {  
   margin: 120px auto 5px;  
   width: 250px;  
 }  
 #hbzemailbox {  
   background: #FEFEFE none repeat scroll 0% 0%;  
   border: medium none;  
   font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;  
   margin-right: 5px;  
   box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);  
   padding: 7px;  
   box-sizing: content-box;  
   height: 12px;  
   vertical-align: top;  
   display: inline-block;  
 }  
 #hbzemailbutton {  
   background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;  
   box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;  
   border: medium none;  
   color: #FFF;  
   cursor: pointer;  
   font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;  
   padding: 6px;  
   border-radius: 5px;  
   height: 27px;  
   display: inline-block;  
 }  
 #hbzemailbutton:hover {  
   background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;  
 }  
 .hbzsocial-icons {  
   margin: 20px 0 0;  
   overflow: hidden;  
   display: block;  
   text-align: center;  
 }  
 .hbzsocial-icons ul {  
   display: inline-block;  
   margin: 0 auto !important;  
   text-align: center;  
   padding: 0px  
 }  
 .hbzsocial-icons ul li {  
   background: transparent !important;  
   border: none !important;  
   float: left;  
   list-style-type: none !important;  
   margin: 0 4px 10px !important;  
   padding: 0 !important;  
 }  
 .hbzsocial-icons ul li::before,  
 .hbzsocial-icons ul li::after {  
   display: none !important;  
 }  
 .hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {  
   background: url("http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png") no-repeat scroll 0 0;  
   -moz-border-radius: 50%;  
   -webkit-border-radius: 50%;  
   border-radius: 50%;  
   display: block;  
   height: 38px;  
   overflow: hidden;  
   text-indent: -999px;  
   transition: all 0.25s linear 0s; width: 38px;  
 }  
 .hbzsocial-icons ul li.social-facebook a {  
   background-color: #3b5998;  
   background-position: -60px 3px;  
 }  
 .hbzsocial-icons ul li.social-twitter a {  
   background-color: #00aced;  
   background-position: -253px 3px;  
 }  
 .hbzsocial-icons ul li.social-gplus a {  
   background-color: #dd4b39;  
   background-position: -93px 3px;  
 }  
 .hbzsocial-icons ul li.social-youtube a {  
   background-color: #cb2027;  
   background-position: -285px 3px;  
 }  
 .hbzsocial-icons ul li.social-rss a {  
   background-color: #F87E12;  
   background-position: -189px 3px;  
 }  
 .hbzsocial-icons ul li a:hover {  
   background-color: #333;  
 }  
 .hbzsocial-like {  
   display: block;  
   text-align: center;  
 }  
 .hbzsocial-like tbody, .hbzsocial-like tbody tr {  
   display: block;  
 }  
 .hbzfb-likes {  
   display: inline-block;  
   padding-bottom: 15px;  
   margin-right: 5px;  
 }  
 .hbztw-follow {  
   display: inline  
 }  
 </style>  
 <div>  
  <div class='hbzsignup-form'>  
  <div class='hbzform-inner'>  
   <p>Sign Up for Email Updates</p>  
  </div>  
  <div class='hbzemailform'>  
   <form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>  
   <input name='uri' type='hidden' value='[Your Blog uri]'/>  
   <input name='loc' type='hidden' value='en_US'/>  
   <input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter your email...'/>  
   <input id='hbzemailbutton' title='' type='submit' value='Sign up'/>  
   </form>  
  </div>  
  </div>  
  <div class="hbzsocial-icons">  
  <ul>  
   <li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>  
   <li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>  
   <li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>  
   <li class="social-youtube"><a href="[youtube url]" target="_blank" title="youtube">youtube</a></li>     <li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>  
  </ul>  
  </div>  
  <table class='hbzsocial-like'>  
  <tbody>  
   <tr>  
   <td class='hbzfb-likes'>  
    <div id="fb-root">  
    </div>  
    <script>(function(d, s, id) {  
  var js, fjs = d.getElementsByTagName(s)[0];  
  if (d.getElementById(id)) return;  
  js = d.createElement(s); js.id = id;  
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";  
  fjs.parentNode.insertBefore(js, fjs);  
 }(document, 'script', 'facebook-jssdk'));  
    </script>  
    <div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">  
    </div>  
   </td>  
   <td class='hbztw-follow'>  
    <a href="[Twitter url]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>  
    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');  
    </script>  
   </td>  
   </tr>  
  <tbody>  
  </table>  
 </div>



Catatan:
-   Warna hijau muda merupakan URL lokasi background tersebut dimuat.
-   Warna hijau tua merupakan posisi icon sosial media pada gambar yang tersimpan di url warna  
     hijau muda yang kedua namun file tidak akan terlihat karena berjenis file png.

http://3.bp.blogspot.com/-qXV1qRPIjHY/UbqjmHPAHzI/AAAAAAAACUE/7_sAZf8tHLY/s1600/sprite_32x32.png

  namun bila dicopykan dan ditambahkan background hitam maka image akan terlihat seperti ini,

      nilai -285px merupakan posisi dimulainya icon yang akan diperlihatkan yaitu icon youtube.
      jadi untuk pengaturan tombol media sosial mana yang akan diperlihatkan maka carilah posisi -px
      dari icon media sosial yang akan di perlihatkan

-    Warna Biru width: 230px; merupakan lebar dari box email ke button sign up
      
-    Warna Merah merupakan url address media sosial yang anda miliki
-    Untuk demo dapat lihat pada blog ini, jangan lupa follow dan isikan email anda.

Selanjutnya Cara Menerapkan RSS Feed Pada Gadget Berlangganan Artikel Via Email yang telah dibuat tadi.

Semoga Bermanfaat

Terima Kasih Telah berkunjung di https://www.agungpanduan.com/

1 komentar:

  1. Demonya seperti yang dipasang diblog ini ya? Lumayan sih

    BalasHapus