Skip to main content

follow us


www.azid.web.id - Cara Membuat Subscribe dan Follow This Blog Seperti Pada Blog Kompiajaib. Mungkin dari sebagian besar blogger sudah mengenal bang Adhy Suryadi pemilik blog www.kompiajaib.com. Beliau merupakan blog mastah dan terkenal dari Sunda, sudah banyak karya yang beliau buat mulai dari tutorial seputar blog sampai template blog yang fenomenal seperti kompi flexible.

Dari tutorial blog yang disajikan oleh bang Adhy Suryadi rata-rata merupakan hasil eksperimen beliau dan dari template yang beliau buat. Namun dari beberapa tutorial yang ada, saya belum menemukan tutorial beliau tentang membuat tombol subscribe perdampingan dengan follow  tihs blog. Oleh karena itu saya disini akan membagikan kepada sobat tentang cara membuat subscribe this email dan follow this blog yang digunakan ole kompiajaib. Mungkin bagi sobat yang tertarik untuk membuatnya bisa mengikuti langkah-langakhnya.

Baik, berikut cara untuk membuat subscribe dan follow this blog seperti blog kompiajaib.

Pertama, seperti biasa hal pertama yang perlu sobat lakukan adalah login ke blogger dan klik menu template dan pilih edit HTML

Kedua, langkah selanjutnya adalah copas kode berikut ini dan letakkan diatas kode </head>

<style>
#FollowByEmail1 h2{width:20%;color:#fff;margin:0;line-height:38px;padding-top:20px}
.follow-by-email-inner{width:80%;margin:0}
.follow-by-email-inner .follow-by-email-address{width:39.5%;width:calc(40% - 10px);font:400 14px -apple-system,BlinkMacSystemFont,&quot;Roboto&quot;,&quot;Segoe UI&quot;,&quot;Oxygen-Sans&quot;,&quot;Ubuntu&quot;,&quot;Cantarell&quot;,&quot;Helvetica Neue&quot;,sans-serif;height:36px;line-height:1;margin:0 10px 0 0;padding:0 10px;color:#555;position:relative;z-index:1;background:#fff;border:none}
.follow-by-email-inner .follow-by-email-submit{width:35%;height:38px;font-size:16px;text-transform:uppercase;color:#FFF;padding:0 20px;cursor:pointer;background-color:#36d1dc;border:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}
.follow-button{width:24.5%;width:calc(25% - 10px);margin:0 0 0 10px}hr{height:0;border:0;border-top:1px solid #ddd}
kbd{-moz-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;-webkit-box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;background-color:#f7f7f7;border:1px solid #ccc;box-shadow:0 1px 0 rgba(0,0,0,.2),0 0 0 2px #fff inset;font-family:Arial,Helvetica,sans-serif;font-size:11px;line-height:1.4;margin:0 .1em;padding:.1em .6em;text-shadow:0 1px 0 #fff;vertical-align:3px}
.post-body a.btn[href^=&quot;http://&quot;],.post-body a.btn[href^=&quot;https://&quot;],a.btn-primary,a.btn:hover{color:#fff}
.follow-button{background-color:#36d1dc;color:#fff;font-size:16px;line-height:1.3em;min-width:54px;text-align:center;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;cursor:pointer;padding:0;height:38px;line-height:38px}
@media screen and (max-width:960px){
#FollowByEmail1 h2,.follow-by-email-inner,.follow-by-email-inner .follow-by-email-address,.follow-by-email-inner .follow-by-email-submit,.follow-by-email-inner .follow-by-email-submit,.follow-button{float:none;width:100%;margin:0 0 10px}
#FollowByEmail1 h2{text-align:center;}
}
.floatleft{float:left}
.floatright{float:right}
.displayblock{display:block}
</style>

Jika blog sobat versi AMP, maka letakkan kode tersebut didalam tag <style amp-custom='amp-custom'>

Ketiga, Setelah meletakkan script css langkah selanjutnya adalah copas kode berikut dan letakkan pada bagian footer, atau bisa terserah sobat.


<div class='footer fontroboto fontweight400 section' id='footer'><div class='widget FollowByEmail' data-version='1' id='FollowByEmail1'>
<h2 class='title fontroboto fontweight600 color45034d floatleft'><span class='fontroboto fontweight600 m0'>Subscribe</span></h2>
<div class='widget-content p0'>
<div class='follow-by-email-inner floatleft'>
<form action='https://feedburner.google.com/fb/a/mailverify' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=PendidikanDanPerkembanganIslam&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input class='follow-by-email-address fontroboto fontweight400 borderradius3 floatleft' name='email' placeholder='Your Email Address...' title='Your Email Address' type='text'/>
<input class='follow-by-email-submit displayblock fontroboto fontweight600 borderradius3 floatleft' type='submit' value='Submit'/>
<input name='uri' type='hidden' value='PendidikanDanPerkembanganIslam'/>
<input name='loc' type='hidden' value='en_US'/>
</form>
<a href='https://www.blogger.com/follow.g?blogID=4110298765504517079' rel='nofollow noopener' target='_blank' title='Follow This Blog'>
<div class='follow-button fontroboto borderradius3 fontweight600 displayblock floatleft'>Follow This Blog</div>
</a></div>
</div>
  <div class='clear'/>
</div></div>

Keempat, setelah mengeksekusi langkah diatas, langkah selanjutnya adalah Save Template sobat dan lihat hasilnya.

KETERANGAN: jangan lupa ganti ID blog 4110298765504517079 dengan ID blog sobat dan PendidikanDanPerkembanganIslam ganti dengan ID feed burner sobat.

Demikianlah tutorial Cara Membuat Subscribe dan Follow This Blog Seperti Pada Blog Kompiajaib. Semoga tutorial ini bermanfaat. Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar