Social Counter Widget + Newsletter Subscription Form

Social media counter dan widget newsletter merupakan widget yang sangat penting untuk blog. Dengan kedua widget tersebut kita dapat mempromosikan konten sekaligus memelihara minat pengunjung terhadap blog yang kita kelola.

Maka dari itu saya memutuskan untuk membuat design widget yang lebih menarik yaitu dengan menggabungkan widget social counter dengan widget newsletter blogger.

Kenapa harus menggabungkan widget social counter dengan widget newsletter blogger?

Alasan yang paling kuat adalah menghemat tata letak blog agar terlihat rapi dan profesional, selain itu menggabungkan widget social counter dengan widget newsletter blogger merupakan upaya untuk meningkatkan fokus serta daya tarik pengunjung.

View Demo

[ads id="ads1"] Jika kamu sependapat dengan saya ikuti tutorial menambahkan/menggabungkan widget social counter dengan widget newsletter blogger berikut ini:

Menggabungkan Social Counter Dengan Widget Newsletter Blogger

Sebelumnya pastikan blog anda sudah menginstal widget newsletter dan hapus style/css widget newsletter dari template blog anda. Jika belum menginstal widget newsletter ikuti langkah dibawah ini:

Masuk ke tata letak blog.
Klik tambahkan widget.
Pilih widget newsletter (follow by email).
Selanjutnya klik menu template kemudian pilih edit html.
Klik Lompat ke widget dan pilih newsletter/followbyemail.
Tambahkan kode html widget social counter berikut ini tepat berbeda sebelum/di atas tag pembuka <form> di widget newsletter.
Terakhir tambahkan kode css widget newsletter dan kode css social counter sebelum/di atas kode ]]></b:skin> dan save template.

Kode html widget social counter + svg icon

<h4>Connect With Us On:</h4>

<div class="social-counter">

  <a href="https://www.facebook.com/cordialblogger" rel="noopener" target="_blank" class="social-link facebook-bg"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 60.734 60.733"><path d="M57.378 0H3.352C1.502 0 0 1.5 0 3.354V57.38c0 1.852 1.502 3.353 3.352 3.353h29.086v-23.52h-7.914v-9.166h7.914v-6.76c0-7.843 4.79-12.116 11.787-12.116 3.355 0 6.232.252 7.07.36v8.2h-4.853c-3.805 0-4.54 1.81-4.54 4.463v5.85h9.08l-1.188 9.167h-7.892v23.52h15.475c1.852 0 3.355-1.503 3.355-3.35V3.35C60.732 1.5 59.23 0 57.378 0z"/></svg></a>

  <a href="https://twitter.com/cordialblogger" rel="noopener" target="_blank" class="social-link twitter-bg"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 612 612"><path d="M612 116.258c-22.525 9.98-46.694 16.75-72.088 19.772 25.93-15.527 45.777-40.155 55.184-69.41-24.322 14.378-51.17 24.82-79.775 30.48-22.906-24.438-55.49-39.66-91.63-39.66-69.333 0-125.55 56.218-125.55 125.514 0 9.828 1.11 19.427 3.25 28.606-104.325-5.24-196.834-55.223-258.75-131.174-10.822 18.51-16.98 40.078-16.98 63.1 0 43.56 22.182 81.994 55.836 104.48-20.575-.688-39.926-6.348-56.867-15.756v1.568c0 60.806 43.29 111.554 100.692 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.2 117.253 87.194-42.946 33.655-97.098 53.656-155.915 53.656-10.134 0-20.116-.612-29.944-1.72 55.568 35.68 121.537 56.484 192.44 56.484 230.947 0 357.187-191.29 357.187-357.188l-.42-16.253C573.87 163.525 595.21 141.42 612 116.257z"/></svg></a>

  <a href="https://codepen.io/cordialblogger" rel="noopener" target="_blank" class="social-link codepen-bg"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100"><path d="M100 34.2c-.4-2.6-3.3-4-5.3-5.3-3.6-2.4-7.1-4.7-10.7-7.1-8.5-5.7-17.1-11.4-25.6-17.1-2-1.3-4-2.7-6-4-1.4-1-3.3-1-4.8 0-5.7 3.8-11.5 7.7-17.2 11.5L5.2 29C3 30.4.1 31.8 0 34.8c-.1 3.3 0 6.7 0 10v16c0 2.9-.6 6.3 2.1 8.1 6.4 4.4 12.9 8.6 19.4 12.9 8 5.3 16 10.7 24 16 2.2 1.5 4.4 3.1 7.1 1.3 2.3-1.5 4.5-3 6.8-4.5 8.9-5.9 17.8-11.9 26.7-17.8l9.9-6.6c.6-.4 1.3-.8 1.9-1.3 1.4-1 2-2.4 2-4.1V37.3c.1-1.1.2-2.1.1-3.1 0-.1 0 .2 0 0zM54.3 12.3L88 34.8 73 44.9 54.3 32.4V12.3zm-8.6 0v20L27.1 44.8 12 34.8l33.7-22.5zM8.6 42.8L19.3 50 8.6 57.2V42.8zm37.1 44.9L12 65.2l15-10.1 18.6 12.5v20.1zM50 60.2L34.8 50 50 39.8 65.2 50 50 60.2zm4.3 27.5v-20l18.6-12.5 15 10.1-33.6 22.4zm37.1-30.5L80.7 50l10.8-7.2-.1 14.4z"/></svg></a>

  <a href="https://www.cordialblogger.com/" rel="noopener" target="_blank" class="social-link blogger-bg"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 20c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-4 7v1c0 .55.45 1 1 1s1 .45 1 1v3c0 1.66-1.34 3-3 3H9c-1.66 0-3-1.34-3-3V8c0-1.66 1.34-3 3-3h4c1.66 0 3 1.34 3 3v1zm-6.05 1h2.6c.55 0 1-.45 1-1s-.45-1-1-1h-2.6c-.55 0-1 .45-1 1s.45 1 1 1zM14 13H9.95c-.55 0-1 .45-1 1s.45 1 1 1H14c.55 0 1-.45 1-1s-.45-1-1-1z"></path></svg></a>

</div>

Contoh menambahkan social media counter di widget newsletter (html).

Cupilkan kode dibawah ini adalah contoh lokasi penerapan kode html social counter untuk disematkan kedalam kode htm widget newsletter blogger.



<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail' version='1'>

      <b:includable id='main'>

  <b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>

  <div class='widget-content'>

    <div class='follow-by-email-inner'>

     // Tambahkan kode html widget social counter

      <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>

        <table width='100%'>

          <tr>

            <td>

              <input class='follow-by-email-address' name='email' placeholder='Email address...' type='text'/>

            </td>

            <td>

              <input class='follow-by-email-submit' type='submit' value='Submit'/>

            </td>

          </tr>

        </table>

        <input expr:value='data:feedPath' name='uri' type='hidden'/>

        <input name='loc' type='hidden' value='en_US'/>

      </form>

    </div>

  </div>

</b:includable>

</b:widget>

Kode css newsletter subscription form

Ganti semua kode css widget newsletter anda dengan kode css widget newsletter dibawah ini.

// Salin dan tambahkan kode css widget newsletter sebelum/di atas kode ]]></b:skin> di dalam template anda

.follow-by-email-inner{

  box-sizing:border-box;

  font-family:'Open Sans', sans-serif;

  background:#313131;

  width:100%;

  min-width:240px;

  padding:20px;

  height:auto

}

.follow-by-email-inner h4{

  font-size:1.4em;

  color:#fff;

  margin-top:0;

  margin-bottom:25px;

}

.follow-by-email-inner p{

  font-size:14px;

  color:#fff;

  padding-top:12px;

  line-height:inherit;

}

.follow-by-email-inner td{

 display:block

}

.follow-by-email-address{

  box-sizing:border-box;

  background:rgba(0,0,0,0.50);

  border:0;

  margin-top:15px;

  margin-bottom:25px;

  padding:12px;

  width:100%;

  color:#fff;

  border-radius:4px;

}

.follow-by-email-submit{

  font-family:'Open Sans', sans-serif;

  font-weight:bold;

  font-size: 0.8em;

  background:-webkit-linear-gradient(left, #ad39e4 0%, #3f59d7 100%);

  width:100%;

  padding-top:12px;

  padding-bottom:12px;

  color:#fff;

  border-radius:4px;

  border:0;

}

Kode css widget social counter

Sesuaikan kode warna baground widget social media count jika diperlukan.

// Salin dan tambahkan css widget social counter sebelum/di atas kode ]]></b:skin> di dalam template blog anda.

.social-counter{

  width:100%;

  height:30px;

  display:flex

}

.social-link{

  fill:#fff;

  display:flex;

  flex-direction:column;

  align-items:center;

  justify-content:center;

  flex-grow:1;

  min-width:30px;

  border-radius:4px;

  border:#fff 1px solid;

  transition: background-color 0.1s ease-in-out;

}

.social-link:hover{

  border-color:#313131

}

.twitter-bg{

  margin:0 5px

}

.codepen-bg{

  margin-right:5px

}

.twitter-bg:hover{

  background-color:rgba(29,161,242,1.00)

}

.facebook-bg:hover{

  background-color: rgba(59,89,153,1.00)

}

.codepen-bg:hover{

  background-color:rgba(64, 64, 64,1.00)

}

.blogger-bg:hover{

  background-color:rgba(252, 79, 8,1)

}

Jika kamu ingin menambahkan message khusus di widget newslater, silahkan tambahkan teks yang diapit dengan tag <p>...</p> di bawah kode penutup </div> social counter atau di atas tag pembuka <form> widget newsletter.



Contoh:

<p>Enter your email address to subscribe to this blog and receive notifications of new posts by email.</p>

Selesai...! Bagaimana menurut anda tentang widget social counter yang di gabungkan dengan widget newsletter blogger ini cukup menarik bukan.

Saya harap kalian suka dengan widget ini, design yang simple, responsive dan menonjol menjadikan gabungan antara widget social media counter dan widget newsletter ini lebih terlihat di blog anda.