Cara membuat footer style ide blogspot v1

Cara membuat footer style ide blogspot v1, Cara membuat footer style ide blogspot v1 ini merupakan suatu desain footer template blogspot, thread kali ini terinspirasi dari seorang sahabat saya yang berminat untuk mendesain footer halaman blogspotnya setelah melihat template template dari Ide Blogspot memiliki desain footer yang meungkin menarik buat beliau, sehingga saya berencana untuk memposting tutorial ini untuk umum agar berkesan saling membagi. Untuk melihat tampilan dan link sumber artikelnya silahkan lihat demo dibawah ini

Demo dari tutorial Cara membuat footer style ide blogspot v1kali ini telah terpasang pada salah satu template Ide Blogspotyang akan dipublish untuk kedepannya, silahkan klik demo, pada bagian Template PARBADA silahkan lihat bagian footer halaman template PARBADA tersebut. Demo

Tutorial cara pemasangan

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code
   
   Code:

   ]]></b:skin>
   

   ataupun code
   
   Code:

   <style>
   

   pada template blogspot anda.
4. Kemudian Cari code yang bersangkutan dengan code CSS " Footer " kemudian hapus sampai semua code CSS Footer yang lama benar benar tidak ada lagi.
   Perlu anda pahami bahwa tutorial ini mengganti semua element ataupun tampilan footer blogspot anda, jadi hal pertama yang anda lakukan adalah menghapus semua code yang bersangkutan dengan footer blog anda sebab kita akan mengganti dengan style footer yang baru yaitu footer style ide blogspot v1
5. Setelah semua code CSS yang bersangkutan dengan footer template anda terhapus kemudian copy code CSS footer style ide blogspot v1 dibawah ini lalu pastekan sebelum code
   
   Code:

   ]]></b:skin>
   

   ataupun code kemudiansave template anda.

Spoiler

Code:

/**************************
Name : footer style ide blogspot v1
Update : Senin 03 Maret 2014
Design : Rivai Silaban
Site : www.rivai.org
Publish : www.ideblogspot.com
**************************/
#footer-wrapper {width: 100%;clear: both;margin: 0px;padding: 0px;background: none repeat scroll 0% 0% rgb(27, 41, 65);}
#footer-wrapper h3, #footer-wrapper h4 {border-bottom: 2px dotted #666;font-family: Georgia;font-size: 13px;color: rgb(153, 153, 153);font-style: normal;font-weight: bold;text-shadow: 1px 2px 2px rgb(0, 0, 0);line-height: normal;margin: 10px 0 0 5px;padding-bottom: 10px;text-transform: none;text-align: left;}
#footer-wrapper .credit-link {font-size: 10px;font-family: Verdana;color: #999;text-align: center;line-height: 25px;background: none repeat scroll 0% 0% rgb(13, 20, 32);}
#footer-wrapper .credit-link a{color: rgb(153, 153, 153);text-decoration: none;}
#footer-wrapper .credit-link a:hover{color: #f7f7f7;}
#footer1, #footer2, #footer3 {width: 30%;padding: 5px;float: left;margin: 5px 12px;}
.footer {margin: 0px;padding: 0px;}
.footer ul {margin: 0px 13px;padding: 0px;width: 30%;float: left;}
.footer ul li {margin: 0px;padding: 8px 0;list-style: none;border-bottom: solid 1px #444;}
.footer li {font-size: 12px;font-family: arial;color: #999;}
.footer li a {font-size : 12px;font-family : arial;text-decoration : none;color :rgb(153, 153, 153);margin-bottom : 5px;}
.footer li a:hover {color : #f7f7f7;}
.ide-blogspot {width: 100%;margin:0;padding:0;}
#footer-wrapper .widget {color: #999;font-family: Arial;font-size: 12px;padding: 5px 15px;line-height: normal;}
.bagian {width: 95%;padding: 0px;margin: 0px auto;}
.bagian .idekiri {width: 68%;padding:0;margin:0;float: left;}
.bagian .idekanan {width: 30%;padding:0;margin:0;float: right;}
.tombol a {float: right;margin: 20px 0px 0px;padding: 5px 20px;background: #249FEA;color: #fff;text-shadow: 0 0 2px #000;border-radius: 5px;font-weight: bold;}
.tombol a:hover {background: #2B5B84;color: #999;}
.contacts h5, .contacts h6 {
font-family: Georgia;
font-size: 13px;
color: rgb(153, 153, 153);
font-style: normal;
font-weight: bold;
text-shadow: 1px 2px 2px rgb(0, 0, 0);
line-height: normal;
margin: 10px 0 0 5px;
padding-bottom: 10px;
text-transform: none;
text-align: left;}
.contacts{color: #999;font-family: Arial;font-size: 12px;padding: 5px 15px;line-height: normal;}
.bagian {width: 95%;padding:2%;margin:0;}
.contacts ul {margin: 0px 0 5px 10px;padding : 0;width: 100%;}
.contacts ul li {margin: 0px;padding: 2px 2px;list-style: square;border-bottom: none;}
.contacts li {font-size: 12px;font-family: arial;color: #999;}
/*** footer style ide blogspot v1 end css ***/

Setelah anda memasang CSS footer style ide blogspot v1 ini pada template anda, saatnya kita menampilkan kolom layout footer style ide blogspot v1 ini dengan menggunakan kode html dibawah. Untuk memasang code html footer style ide blogspot v1 ini anda juga perlu menghapus semua code html yang bersangkutan dengan code html Footer template anda. Hapus semua code footer template anda mulai dari code footer tag pembuka seperti contoh code

Code:

<div id='footer-wrapper'>

s/d

Code:

</div>

code footer tag penutup template anda. Mungkin dibeberapa code template credit link template tidak satu element dengan footer template, jadi untuk sementara silahkan hapus juga semua code credit linknya sebab kita sudah menyertakan code credit linknya yang nantinya akan anda rubah linknya sehingga seperti semula. Setelah semua code html footer template blog anda sudah bersih atau dihapus, silahkan copy code tag html footer style ide blogspot v1 dibawah ini dan pastekan kembali ketempat semula code footer template blogspot anda yang telah anda hapus sebelumnya. Save template anda, kemudian lihat hasilnya pada bagian " Tata Letak " dasbord template anda.

Spoiler

Code:

<div id='footer-wrapper'>

<div class='bagian'>
<div class='idekiri'>

<b:section class='footer' id='footer-kiri' showaddelement='yes'>
<b:widget id='HTML55' locked='false' title='foter kiri' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h3><data:title/></h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<div class='idekanan'>

<b:section class='footer' id='footer-kanan' showaddelement='yes'>
<b:widget id='HTML66' locked='false' title='footer kanan' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h3><data:title/></h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div><div style='clear:both'/>
<div class='ide-blogspot'>

<b:section class='footer' id='footer1' showaddelement='yes'>
<b:widget id='HTML77' locked='false' title='footer 01' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h3><data:title/></h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>

<b:section class='footer' id='footer2' showaddelement='yes'>
<b:widget id='HTML88' locked='false' title='footer 02' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h3><data:title/></h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>

<b:section class='footer' id='footer3' showaddelement='yes'>
<b:widget id='HTML99' locked='false' title='footer 03' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
<h3><data:title/></h3>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</div><div style='clear:both'/>

<div class='credit-link'>
Copyright © 2014 <a expr:href='data:blog.homepageUrl' expr:title='data:blog.title' rel='nofollow'><data:blog.title/></a>
| Template by : <a href='http://www.ideblogspot.com' target='_blank' title='Template Owner'>
Rivai Silaban
</a>
</div>
</div><div style='clear:both;'/>

Untuk menjaga hal hal yang tidak diinginkan atau kesalahan pemasangan silahkan download dulu template anda agar lebih memastikan keselamatan template anda bila mana terjadi kesalahan.

1. footer style ide blogspot v1 ini dapat digunakan disemua ukuran lebar halaman blog sebab memakai sistem % dalam penghitungan lebar widgetnya, jadi bilamana ukuran lebar halaman blogspot anda kecil maka secara otomatis ukuran lebar widget footernya juga akan kecil, silahkan edit ukuran lebar dari widgetnya sesuai dengan kebutuhan template anda.
2. Silahkan anda edit CSSnya sesuai dengan kebutuhan anda.
3. Pada bagian widget HTMLnya, contoh HTML99 bila ditemplate anda sudah ada sebelumnya code HTML99 maka silahkan ganti code HTML footernya misalkan HTML98.
4. Silahkan anda lebih kreatif lagi untuk mengembangkan desain footer style ide blogspot v1 ini agar lebih bagus lagi..

Bila anda membutuhkan code dari setiap isi widget seperti pada halaman demo tersebut silahkan kunjungi halaman sumbernya untuk menagmbil codenya silahkan kunjungi Halaman Sumber

 

Wah Keren Nih

Tutorialnya mangtab. Coba dulu ahh *dance4*

 

Ketemu lagi gan..

Hallo gan, apa kabar? Horas bah..
Wah, ternyata juragan Rivai rupanya sudah cukup lama hadir di forum bersosial.com ini..
Acung jempol deh buat konsistensinya menulis tutorial blogspot.. Mantab gan..

 

Horas juga gan...

heheh iya nih gan mau nimba ilmu sama master master disini, selamat bergabung ya gan....

 

Tetap kreatif aja nih masbro.

Tetap kreatif aja nih masbro. Keren responsif.

 

thx gan atas pendapatnya...

iya gan semoga bermanfaat, btw untuk template htmly juga dapat berfungsi gan, dan tetap responsive...

 

Bookmark dulu,

pake kapan kapan aja master,

 

silahkan...

iya gan silahkan..
btw bukan master tapi masih newbie...