July 31, 2019

Cara membuat footer stylist untuk template contempo, emporio, soho dan Notable

blogger footer example
contoh salah satu bagian footer buatan editblogtema
Secara default footer ke empat template template seperti contempo,  soho,  emporio dan notable terlihat monoton, namun kita dapat menambahkan footer dengan gaya dan warna tertentu beserta widget atau gadget yang terinstegrasi didalamnya. Pembuatannya juga tidak sulit:

Pertama tambahkan HTML
  1. Pilih tema
  2. Pilih edit HTML
  3. Pada halaman editor HTML blogger cari kode berikut:
</aside>
</div>
dibawah kode tersebut letakan kode berikut:
<div class='hbzsub'><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-pinterest'><a href='[Pinterest url]' target='_blank' title='Pinterest'>Pinterest</a></li> <li class='social-rss'><a href='[RSS url]' target='_blank' title='RSS'>RSS</a></li> </ul> </div> <center><small>Copyright&#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear()); </script><a expr:href='data:blog.homepageUrl'> <data:blog.title/> </a>. All rights reserved. dibagikan oleh: <a href='https://www.editblogtema.net'>editblogtema.net</a></small></center> </div></div>
Kedua Tambahkan CSS style
Masih didalam editor HTML blogger cari kode </head> dan letakan kode berikut tepat diatasnya:

</style>
<style type="text/css"> .hbzsub { background-color: #007ad6;
width: auto; height: 100%; padding: 0px;
box-shadow: 0px 0px 5px rgb(87, 98, 105);
}
.hbzform-inner {
text-align: center;
color: rgb(255, 255, 255);
font: bold 16px "trebuchet MS","Tahoma";
}
.Copyright-form {width: 240px;
margin: 10px auto;
}
#Copyrigh-tbox {
background-color: #007ad6;
color: #FFF; width: 208px; border: 1px solid #697780;
padding: 15px;
text-align: center; height: 18px;
box-sizing: content-box;
}
#Copyright-button {
background-color: #007ad6;
border: 1px solid #007ad6;
color: rgb(255, 255, 255);
width: 240px;
font: bold 16px "trebuchet MS","Tahoma";
padding: 15px;
text-align: center;
height: 50px;
margin: 10px auto;
cursor: pointer;
}
#Copyright-button:hover {
background-color: #007ad6;
border: 1px solid #BF4A49;
}
.hbzsignup-form {
margin-top: 15px;
}
.hbzsocial-icons {
overflow: hidden;
text-align: center;
border-bottom: 1px solid rgb(133, 133, 133);
width: 230px;
display: block;
margin: 20px auto;
}
.hbzsocial-icons ul {
margin: 0px auto !important;
text-align: center;
padding: 0px !important;
display: inline-block;
}
.hbzsocial-icons ul li {
background: transparent none repeat scroll 0% 0% !important;
border: medium none !important; float: left;
list-style-type: none !important;
padding: 0px !important;
margin: 0px 2px !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("https://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: 34px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s;
width: 34px;
}
.hbzsocial-icons ul li.social-facebook a {
background-position: -62px 1px;
}
.hbzsocial-icons ul li.social-facebook a:hover {
background-color: #3b5998;
}
.hbzsocial-icons ul li.social-twitter a {
background-position: -254px 1px;
}
.hbzsocial-icons ul li.social-twitter a:hover {
background-color: #00aced;
}
.hbzsocial-icons ul li.social-gplus a {
background-position: -95px 0px;
}
.hbzsocial-icons ul li.social-gplus a:hover {
background-color: #dd4b39;
}
.hbzsocial-icons ul li.social-pinterest a {
background-position: -159px 1px;
}
.hbzsocial-icons ul li.social-pinterest a:hover {
background-color: #cb2027;
}
.hbzsocial-icons ul li.social-rss a {
background-position: -190px 0px;
}
.hbzsocial-icons ul li.social-rss a:hover {
background-color: #F87E12;
}
</style>
Untuk merobah warna latar footer, silahkan ganti kode warna yang saya merahkan dengan kode warna css
yang anda sukai. Cari kode warna di internet.
Save template. Harusnya ini bekerja dengan baik,  namun karena saya membuat konten menggunakan hape, kuatir ada kesalahan penulisan maka jika ada error dalam penerapannya tolong di komen! Saya akan menuntun anda sampai sukses dalam pemasangannya. 

Lihat DEMO

www.editblogtema.net

A coding addict, a hard smoker, love boxing even not a boxer. Love maths even not a scientist

17 comments:

  1. Hasil akhirnya keren sekali ya, jadi tampak lebih profesional gitu

    ReplyDelete
  2. Ijn save blognya kebetulan pengen ganti template, ntar kalau sempat mau bongkar blognya cari tempalte yang AMP HTML sugan pas

    ReplyDelete
  3. wah terimakasih infonya..
    izin save yaa

    ReplyDelete
  4. itu.. supaya warna backgroundnya penuh sampai kebawah serpti blog ini gmn om.... saya coba kemaren masih menyisakan warna putih...

    ReplyDelete
    Replies
    1. cari kode:

      <b:widget-settings>
      <b:widget-setting name='copyright'/>

      Dalam struktur HTML SOHO letaknya diatas tag:

      </body>

      lalu tambahkan kode diatas kode yang saya tuliskan tersebut

      Delete
    2. Maaf ya admin koreksi dikit:

      Cari kode dibawah ini: (pada SOHO tempatnya diatas tag penutup </body>

      <b:template-script async='true' name='rockpool' version='1.0.0'/>
      <script type='text/javascript'> //<![CDATA[ function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); //]]>

      hapus semua.

      Jika itu sudah tidak ada cari kode berikut letaknya juga pada bagian atas </body> :

      Hapus saja semua kode dibawah berikut:

      <b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'>
      <b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='true'>
      <b:widget-settings>
      <b:widget-setting name='copyright'/>
      </b:widget-settings>
      <b:includable id='main' var='this'>
      <div class='widget-content'>
      <div class='blogger'>
      <a expr:href='data:bloggerUrl' rel='nofollow'>
      <b:include name='flatBloggerIcon'/>
      <b:message name='messages.poweredByBlogger'/>
      </a>
      </div>

      <b:if cond='data:imageAuthor'>
      <div class='image-attribution'>
      <b:if cond='data:imageAuthor.url'>
      <b:message name='messages.templateImagesByLink'>
      <b:param expr:value='data:imageAuthor.url'/>
      <b:param expr:value='data:imageAuthor.name'/>
      </b:message>
      <b:else/>
      <b:message name='messages.templateImagesBy'>
      <b:param expr:value='data:imageAuthor.name'/>
      </b:message>
      </b:if>
      </div>
      </b:if>

      <b:if cond='data:copyright != &quot;&quot;'>
      <div class='copyright'><data:copyright/></div>
      </b:if>
      </div>
      </b:includable>
      </b:widget>
      </b:section>

      Atau kalau bisa kode dalam artikel dalam postingan ini di letakan dibawah kode panjang terakhir jika tidak ingin menghapusnya. Aku sarankan menghapus untuk mempercepat loading dan mengurangi elemen DOM.

      Delete
    3. Terimakasih Anissa benar, tapi kode:

      <b:template-script async='true' name='rockpool' version='1.0.0'/>

      Jangan di hapus!

      Delete
  5. "warna latar footer, silahkan ganti kode warna yang saya merahkan dengan kode warna css
    yang anda sukai." Naah merah nya gak ada ?

    ReplyDelete
    Replies
    1. Maaf he he he... Maksudnya kode pada CSS style berikut:

      <style type="text/css"> .hbzsub { background-color: #007ad6;

      Ganti kode warna
      #007ad6 tersebut

      Delete
    2. Sebenarnya sblm sya tanya sudah ubah itu jg, tp warna nya tetap putih. Apa yg salah ya 🤔

      Delete
    3. Kalau benar ter copy-paste dengan benar, css style itu pasti akan merobah HTML bagian footer. Di ulangi saja.

      Delete
    4. Udah bolak balik mas,

      Delete
    5. Saya sudah periksa, mas umam ketinggalan kodenya, kode HTML yang mas umam pasang adalah:

      <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-pinterest'><a href='[Pinterest url]' target='_blank' title='Pinterest'>Pinterest</a></li> <li class='social-rss'><a href='[RSS url]' target='_blank' title='RSS'>RSS</a></li> </ul> </div> <center><small>Copyright&#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear()); </script><a expr:href='data:blog.homepageUrl'> <data:blog.title/> </a>. All rights reserved. dibagikan oleh: <a href='https://www.editblogtema.net'>editblogtema.net</a></small></center> </div>

      Perhatikan bagian atas kurang: <div class='hbzsub'>

      sedangkan bagian bawah kurang satu lagi penutup: </div>


      Seharusnya:

      <div class='hbzsub'><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-pinterest'><a href='[Pinterest url]' target='_blank' title='Pinterest'>Pinterest</a></li> <li class='social-rss'><a href='[RSS url]' target='_blank' title='RSS'>RSS</a></li> </ul> </div> <center><small>Copyright&#169; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear()); </script><a expr:href='data:blog.homepageUrl'> <data:blog.title/> </a>. All rights reserved. </small></center> </div></div>


      Saya buat dari contoh template mas Umam sendiri lho, coba lihat hasilnya di:

      https://kreditmotorkilat.blogspot.com/

      Delete
    6. Naah ini baru bener 🤭🤭

      Delete
  6. gpp pada template contempo v6 ini sidebarnya di munculkan, jadi memang sedikit beda tempat meletakan kodenya ya..

    Headernya juga bisa dibikin sticky dan fixed

    ReplyDelete