Home Blogger Tutorial Widget Membuat Menu & Subscribe Box di Footer Blog

Membuat Menu & Subscribe Box di Footer Blog

Diterbitkan

Kali ini saya akan memberikan tutor bagaimana membuat footer wrapper seperti di template INKA Story, jangan lupa download juga template saya ya
INKA Story Template Blogger Klik disamping kiri untuk download templatenya.

Untuk demonya kalian bisa cek pada template tersebut atau Klik DEMO.
Untuk saat ini footernya itu saya terapkan juga ditemplate yg saya pakai sekarang ini, terhitung dari februari 2019 ya, gk tau tahun depan apakah masih saya terapkan atau tidak ditemplate yang saya pakai ini 😅

Ok, langsung saja tanpa basa-basi kita ke pembahasannya.
1. Login ke akun Blogger kalian.
2. Pilih tema / themes
3. pilih Edit HTML
4. tambahkan CSS dibawah ini, dan simpan diatas </head>

@keyframes heart{from{transform:scale(1)}10%{transform:scale(1.2)}}
/* Footer Wrapper */
#footer-wrapper{margin:0 auto;padding:0;position:relative}#footer-wrapper{background:#1c1c1d;color:rgba(255,255,255,.6)}#footer-bottom{clear:both;background:#fff;color:#000;margin:auto;padding:40px 20px;display:block;font-weight:500;overflow:hidden;position:relative;font-size:13px}#footer-bottom a{color:#000}#footer-bottom a:hover{color:#f84436}.footer-bottomkiri,.footer-bottomkanan{display:block;margin:0 auto 20px auto;text-align:center}.footer-bottomkanan{margin:0 auto}.footer-bottomkanan i.fa.fa-heart{color:#f84436;margin:0 4px;animation:heart 2s infinite ease}#footer-wrapper .footer-nav{background:#f7f7f7;margin:auto}#footer-wrapper .footer-nav ul{max-width:100%;margin:auto;padding:40px 10px;text-align:center}#footer-wrapper .footer-nav li{display:inline;text-align:center;list-style:none;margin:0;padding:0}#footer-wrapper .footer-nav li:hover{transition:all .1s linear}#footer-wrapper .footer-nav li a{background:#fff;position:relative;text-transform:capitalize;padding:10px 22px;border-radius:99em;margin:0 3px;color:#000;line-height:normal;font-size:14px;font-weight:500;box-shadow:1px 2px 5px 0 rgba(0,0,0,0.1);transition:all 300ms cubic-bezier(0.250,0.100,0.250,1.000);transition-timing-function:cubic-bezier(0.250,0.100,0.250,1.000)}#footer-wrapper .footer-nav li a:hover{background:#fff;color:#888;box-shadow:1px 4px 10px 0 rgba(0,0,0,0.1)}.footer-column{position:relative;margin:auto;clear:both;font-size:14px;line-height:1.7;overflow:hidden;text-align:left;max-width:1080px;padding:4em 0}.footer-column h3{position:relative;margin:0 0 10px 0;padding:0 0 10px 0;color:rgba(255,255,255,.9);font-size:20px;line-height:20px}.footer-menu{float:left;width:31%;margin:0 20px 20px 0}.footer-menu ul{margin:0}.footer-menu ul li a{color:rgba(255,255,255,.6)}.footer-menu ul li a:hover{color:rgba(255,255,255,1)}
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:linear-gradient(107deg, #89f7fe 0%, #66a6ff 100%);overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:rgba(255,255,255,.15);color:#fff;margin:10px 0;padding:15px 20px;width:35%;border:0;border-radius:99em;box-shadow:5px 5px 25px 0 rgba(0,0,0,0.1);}
.subscribe-css-email-button{background:rgba(255, 255, 255, 0.15);color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s;border-radius:99em;box-shadow:5px 5px 25px 0 rgba(0,0,0,0.1);}
.subscribe-css-email-button:hover{background:rgba(255,255,255,.1);box-shadow: 1px 2px 5px 0 rgba(0,0,0,0.1);}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.88);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:&#39;&#39;;position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:#6aaeff;transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
@media only screen and (max-width:768px) {
.footer-menu{float:none;width:auto;margin:0 20px 20px 20px}#footer-wrapper .footer-nav ul{overflow:hidden}#footer-wrapper .footer-nav li{display:block;float:left;text-align:left;padding:8px 12px;width:50%}#footer-wrapper .footer-nav li a,#footer-wrapper .footer-nav li a:hover{background:transparent;padding:0;box-shadow:none;text-align:center}.subscribe-css-email-field, .subscribe-css-email-button{width:90%;margin:10px auto 17px 0;}}

5. Jika sudah, selanjutnya cari <footer ... </footer>
dan ganti dengan tag footer dibawah ini.

<footer id='footer-wrapper' itemscope='itemscope' itemtype='https://schema.org/WPFooter' role='contentinfo'>
<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>Here</span> To Receive New Updates</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
  <b:section class='myarside' id='Subsciption Box' maxwidgets='1' preferred='yes'>
    <b:widget id='HTML4' locked='true' title='' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'>InkaStory</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    &lt;form action=&#39;https://feedburner.google.com/fb/a/mailverify?uri=<data:content/>&#39; class=&#39;subscribe-form&#39; method=&#39;post&#39; onsubmit=&#39;window.open (&amp;apos;https://feedburner.google.com/fb/a/mailverify?uri=<data:content/>&amp;apos;, &amp;apos;popupwindow&amp;apos;, &amp;apos;scrollbars=yes,width=550,height=520&amp;apos;);return true&#39; target=&#39;popupwindow&#39;&gt;
&lt;input name=&#39;uri&#39; type=&#39;hidden&#39; value=&#39;<data:content/>&#39;/&gt;&lt;input name=&#39;loc&#39; type=&#39;hidden&#39; value=&#39;en_US&#39;/&gt;&lt;input autocomplete=&#39;off&#39; class=&#39;subscribe-css-email-field&#39; name=&#39;email&#39; placeholder=&#39;Enter your Email&#39;/&gt;&lt;input class=&#39;subscribe-css-email-button&#39; title=&#39;&#39; type=&#39;submit&#39; value=&#39;submit&#39;/&gt;&lt;/form&gt;
  </div>

  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
  </b:section>
</div>
</div>
</div>
<div class='footer-nav'>
  <b:section id='Footer Menu' maxwidgets='1' showaddelement='no'>
    <b:widget id='HTML64' locked='true' title='' type='HTML' version='1'>
      <b:widget-settings>
        <b:widget-setting name='content'>&lt;li&gt;&lt;a href=&#39;/p/about-us.html&#39; title=&#39;About Us&#39;&gt;About Us&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;/p/contact.html&#39; title=&#39;Contact&#39;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;/p/sitemap.html&#39; title=&#39;Our Sitemap&#39;&gt;Sitemap&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;/p/privacy-policy.html&#39; title=&#39;Privacy Policy&#39;&gt;Privacy Policy&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;/p/disclaimer.html&#39; title=&#39;Disclaimer&#39;&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;/p/terms-of-service.html&#39; title=&#39;Terms of Service&#39;&gt;Terms of Service&lt;/a&gt;&lt;/li&gt;</b:widget-setting>
      </b:widget-settings>
      <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<ul>
    <data:content/>
</ul>
  </div>

  <b:include name='quickedit'/>
</b:includable>
    </b:widget>
  </b:section>
</div>
<div id='footer-bottom'>
<div class='maxwrapx'>
<div class='footer-bottomkiri'>
Copyright &#169; <span id='current-year'/>
<a expr:href='data:blog.homepageUrl'><data:blog.title/></a> All Right Reserved
</div>
<div class='footer-bottomkanan'>
Designed With <i class='fa fa-heart'/> myAbdurrahim
</div>
</div>
</div>
</footer>

6. Simpan dan cek blognya.

Untuk ganti Link dan Nama menu di footer kalian bisa pergi ke Tata Letak / Layout dan cari widget yang namanya 'Footer Menu' klik Edit, dan ganti link serta nama menu tersebut.

Selanjutnya untuk Subsribe box, cari widget 'subscription box' klik edit dan ganti nama 'InkaStory' dengan nama feedburner kalian dan simpan widget.

Sekian artikel yang saya buat untuk kali ini, jika mengalami masalah atau kendala perihal tutor diatas silahkan tinggalkan pertanyaan kalian di kolom komen bawah.

Related Posts

myabdurrahim ID

Personal Blog.

Next Post
Previous Post

Berikan komentar anda sesuai Topik yang ada.

Langganan: Posting Komentar (Atom)