Skip to main content

Cara Memasang Widget Follow By Blog dan Follow By Email dengan Style Modal Di Blogspot

Cara Memasang Widget Follow By Blog dan  Follow By Email dengan Style Modal Di Blogspot


Widget Follow By Blog adalah tombol ikuti yang terpasang di blog. Pengunjung sesama blogger dapat mengikuti blog kita dengan meklik tombol tersebut.

Widget Follow By Email adalah tombol ikuti melalui email. Tap tombol/button maka modal akan terbuka dengan kotak form tempat mengisi alamat email. Pengunjung siapapun dapat berlangganan posting terbaru di blog kita melalui email mereka dan akan terkirim secara otomatis ke email mereka serta dapat berhenti berlangganan kapanpun.

Sedangkan style modal adalah halaman tersembunyi dan bila tombol di klik maka modal berisi widget pengikut atau widget ikuti melalui email akan muncul mengapung di layar, tap tanda silang (×) atau tap di area transparan maka widget akan kembali tersembunyi. Style model sembunyi2ian ini atau disebut Modal marak digunakan di era smartphone ini bertujuan meminimalisir tampilan agar tidak terlalu tampak penuh dengan aneka widget. Contohnya ada dibagian footer paling bawah blog ini.

Di w3.scholl style modal ini ada dua jenis yaitu Modal Header yang bisa dipasang di atas atau sedikit ketengah dan Modal Bottom yang dipasang pada paling bawah blog. Untuk Template Contempo dan Notable saya memilih menggunakan Modal Bottom karena pada bawaan template tersebut sudah memiliki Modal Header.

Cara Memasang Widget Pengikut dengan Style Modal Di Blogspot ini cukup sederhana hanya perlu menambahkan css, widget dan kode js berikut.

1. Pasang css kebagian css.

2. Pasang kedua buah widget ke bagian footer dalam Template. 

2a. Pasang Widget Follow By Email kedalam section lain, jangan masukkan ke section milik Widget Follow By Email.

2b. Widget Follow By Blog ini dibalut oleh tag section jadi pastikan memasangnya dengan benar agar tidak error. Letakkan sebelum tag <section> atau setelah </section> dari section lain.

Dalam footer biasanya terdapat beberapa section dan widget. Sebagai contoh misalnya kondisi format footer seperti berikut maka tempatkan widget follow blog di area yang saya beri angka, jangan dalam section karena tidak boleh memasukkan tag section kedalam section lain. Begitu juga widget tidak boleh memasukkan widget kedalam widget.

<footer>
1
<section>
<widget></widget>
<widget>Pasang widget follow email disini</widget>
</section>
2
<section>
<widget></widget>
<widget>Atau Pasang widget follow email disini</widget>
</section>
3
Pasang section dan widget follow blog disini.
</footer>

Mungkin ada pertanyaan mengapa widget follow by email tidak dimasukkan saja ke section tempat widget follow by blog ditempatkan?

Jawabannya karena widget follow by blog memerlukan section khusus untuk dirinya sendiri dan juga kode js dan css-nya memiliki susunan yang mirip-mirip sehingga jika disatukan tidak akan berfungsi.

Atau pertanyaan lain mengapa widget follow by email tidak diberi section tersendiri juga?

Jawabannya: Iya memang sebaiknya begitu hanya saja saya terlanjur membuatnya menjadi seperti ini.

3. Pasang kode JS ke paling bawah diatas </body> dalam Template.

4. Pasang button berikut ini dimanapun yang diinginkan. Button inilah yang jika di tap akan membuka Modal menampilkan Widget Pengikut atau Widget Ikuti Melalui Email.
<button id='follower' class='follower'>Follow</button>
<button id='subscriber' class='subscriber'>Subscribe</button>

Catatan: 
1. Follow By Email harus sudah diaktifkan atau terkoneksi dengan Feedburner, jika belum maka modal tidak akan berfungsi dan jika tetap tidak berfungsi maka pergi ke Tata Letak lalu tap icon pensil selanjutnya klik simpan. Kondisi semacam ini biasa terjadi jika baru pertama kali mengaktifkan widget ini di Blog. 
2. Sesuaikan warna css berikut ini dengan warna yang ada di Template, jika tidak maka css akan error.
3. Kode dalam posting ini bisa saja berubah dengan sendirinya tanpa sepengetahuan saya jadi boleh juga di download disini. https://drive.google.com/file/d/14Z72jIoC2AJdtGaos8bzxvLDKNR4Jon9/view?usp=drivesdk
4. Demikian dan kalau tak keberatan ikuti juga blog ini ya, Selamat mencoba!

<!-- CSS -->

button.follower, .button.subscriber{
margin:0;
padding:0;
background-color:inherit;
border:none;
outline:none;
font-style:normal
}
.subscribers, .followblog{
visibility:hidden;
display:block;
position:fixed;
z-index:1;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgb(0,0,0);
background-color:rgba(0,0,0,0.4);
-webkit-animation-name:fadeIn;
-webkit-animation-duration:0.4s;
animation-name:fadeIn;
animation-duration:0.4s;
}
.modal-content, .followerss{
position:fixed;
bottom:0;
width:100%;
max-height:50%;
-webkit-animation-name:slideIn;
-webkit-animation-duration:0.4s;
animation-name:slideIn;
animation-duration:0.4s
}
.modal-header, .modal-footer, .Followers h2.title{
margin:0;
padding:10px 0;
text-align:center;
color:$(footers.text.color);
background:$(footers.background.color)
}
.modal-title, .Followers h2.title{
font-size:24px;
text-align:center
}
.modal-body, .Followers .widget-content{
color:$(footers.background.color);
background:$(footers.text.color);
margin:0
}
.modal-body{
text-align:center;
padding:10px 0
}
.Followers .widget-content{
padding:15px 28px 8em 30px
}
.modal-text{
padding:7px 5px;
color:$(footers.background.color);
border:solid 2px $(footers.background.color)
}
.modal-submit{
padding:7px 5px;
color:$(footers.link.color);
background:$(footers.background.color)
}
.modalclose{
margin:5px;
padding:5px;
color:$(footers.text.color);
text-align:center;
font-size:28px;
font-weight:bold;
}
.modalclose:hover, .modalclose:focus{
color:$(footers.link.color);
text-decoration:none;
cursor:pointer;
}
@-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0} 
to {bottom: 0; opacity: 1}
}
@keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
@-webkit-keyframes fadeIn {
from {opacity: 0} 
to {opacity: 1}
}
@keyframes fadeIn {
from {opacity: 0} 
to {opacity: 1}
}

<!-- Widget Follow By Email -->

        <b:widget id='FollowByEmail2' locked='true' title='Follow by Email' type='FollowByEmail' version='2' visible='true'>
          <b:includable id='main'>
  <b:include name='widget-title'/>
  <b:include name='content'/>
</b:includable>
          <b:includable id='content'>
  <div class='widget-content'>
<div class='subscribers' id='subscribers'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class='modal-title'><b:eval expr='data:messages.subscribeToThisBlog'/></h3>
</div>
    <div class='modal-body'>
      <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'>
        <input autocomplete='off' class='modal-text' expr:placeholder='data:messages.emailAddress' name='email' type='email'/>
        <input class='modal-submit' expr:value='data:messages.getEmailNotifications' type='submit'/>
        <input expr:value='data:feedPath' name='uri' type='hidden'/>
        <input name='loc' type='hidden' value='en_US'/>
      </form>
    </div>
<div class='modal-footer'>
<span class='modalclose'>&amp;times;</span>
</div>
</div>
</div>
  </div>
</b:includable>
        </b:widget>

<!-- Widget Follow By Blog -->

<div class='followblog' id='followblog'>
<b:section class='followerss' id='followerss' name='Follow Blog' showaddelement='false'>
        <b:widget id='Followers1' locked='true' title='Pengikut Blog' type='Followers' version='2' visible='true'>
          <b:widget-settings>
            <b:widget-setting name='borderColorTransparent'>true</b:widget-setting>
            <b:widget-setting name='useTemplateDefaultStyles'>true</b:widget-setting>
            <b:widget-setting name='contentSecondaryTextColor'>#000000</b:widget-setting>
            <b:widget-setting name='contentHeadlineColor'>#000000</b:widget-setting>
            <b:widget-setting name='endcapTextColor'>#292929</b:widget-setting>
            <b:widget-setting name='contentTextColor'>#292929</b:widget-setting>
            <b:widget-setting name='contentSecondaryLinkColor'>#FFFFFF</b:widget-setting>
            <b:widget-setting name='endcapLinkColor'>#25a186</b:widget-setting>
            <b:widget-setting name='contentLinkColor'>#25a186</b:widget-setting>
          </b:widget-settings>
          <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot; and data:codeSnippet != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <div expr:id='data:widget.instanceId + &quot;-wrapper&quot;'>
      <b:if cond='data:codeSnippet != &quot;&quot;'>
        <div style='margin-right:2px;'>
          <data:codeSnippet/>
        </div>
      </b:if>
    </div>
    <b:include name='quickedit'/>
  </div>
</b:includable>
        </b:widget>
</b:section>
</div>

<!-- Kode JS -->

<script>//<![CDATA[ 
var followblog = document.getElementById("followblog");
var follow = document.getElementById("follower");
var subscribers = document.getElementById("subscribers");
var subscribe = document.getElementById("subscriber");
var span = document.getElementsByClassName("modalclose")[0];
follow.onclick = function() {
followblog.style.visibility = "visible";
}
subscribe.onclick = function() {
subscribers.style.visibility = "visible";
}
span.onclick = function() {
subscribers.style.visibility = "hidden";
}
window.onclick = function(event) {
if (event.target == followblog) {
followblog.style.visibility = "hidden";
}
if (event.target == subscribers) {
subscribers.style.visibility = "hidden";
}
}
//]]></script>

Comments