Membuat Widget Info Pada Bagian Footer

Anda mungkin sudah melihat Kolom ini disetiap anda kunjungi pada setiap blog. dengan Widget yang diletakan pada Kolom Footer ini dan Kolom ini terdapat Di bawah Posting. Footer terletak di bawah, di bawah postingan tentunya gunanya adalah untuk meletakan widget histats maupun widget alexa dan bisa juga di gunakan untuk meletakan widget yang lain.

Kolom Footer Widget berfungsi sama dengan sidebar yaitu untuk meletakan sebuah widget dimana anda dapat meletakan widget apapun yang bisa anda pasang. Widget yang ini biasa anda taruh Widget yang tidak terlalu penting untuk dipasang, Seperti Widget, Recent Comment, dan lain-lain. atau Widget yang dipasang terlalu penuh yang dipasang pada Sidebar.

Widget Footer jenisnya beraneka ragam, bisa hanya satu kolom, dua kolom, tiga kolom dan empat kolom. Model widget footer yang saya coba share klik gambar di bawah ini

Contoh Gambar Footer:

Oke deh gan, biar gak berpanjang lebar gimana caranya bikin widget footer, ikuti langkah-langkahnya berikut ini :

Login di akun blogger anda lewat http://www.blogger.com
Pilih Tata Letak (Lay Out), kemudian Pilih Templater
Masuk di bagian Template kemudian pilih Edit HTML
Kemudian cari kode ini ]]></b:skin>, untuk mempermudah pencarian, gunakan perintah ctrl+f atau atau F3
Copy kode dibawah ini dan simpan diatas kode tadi :

.footer-about { text-align:left; width:940px; margin: 0 auto; background:#ffffff; padding:30px; color:#676767; font-family: &#39;Source Sans Pro&#39;; padding-bottom:10px; margin-top:10px; }
.footer-about .text { padding-right:30px; width:560px; float:left; line-height:19px; }
.footer-about .text h1 { color:#61abe7; font-size:22px; margin-bottom:15px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTRqPNDSXk_Lmnx-GWs9H5S0gjSA_-OUKZpBwr3yRg71_ZAKnjcD1DFOw2BF3RicLE_HVJv6aqA4MZHTht051SXAbARmdWPIRULV9EbIGGD9GKrPiadEsvrznBXYgvVue9MAP7XS8e2BI/s1600/about-icon.png) left center no-repeat; padding-left:50px; padding-top:8px; height:30px; }
.footer-about .social { margin-top:-1px; float:left; padding-left:50px; }
.footer-about .social h1 { color:#61abe7; font-size:22px; font-weight:300; float:left; margin-right:20px; margin-bottom:9px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdrVTRs_DIu6FUQTw0Kgx-oLKukPfzs2gxVoOrgfsNaTsGq2WLejrR0q6RjeT5pkIG3NGh6igelcHyLT3lpayCSit1ayZ_HISsP-28UEH28o4SXSWEHsxTdgjeQONRUNvZT5I-ol0dEiA/s1600/findus-icon.png) left center no-repeat; padding-left:50px; padding-top:3px; height:35px; }
.footer-about .social .soc-img { margin-right:10px; display:block; float:left; margin-bottom:5px; }
.footer-about .contact { clear:both; line-height:19px; }
.social-icons { float:right; } .social-icons .soc-img { display: block; float: left; margin-left: 10px; }

Kemudian cari kode <div id='footer'> atau <div id='footer-wrapper'>
( Kode setiap blog berbeda. jadi cari kode yang hampir sama )
Copy kode di bawah ini dan simpan di atas kode tadi :


<div class='footer-about'>

<div class='text'>
<h1>Tentang Blog Refleksi</h1>
<p>Blog Refleksi ini merupakan arena curahan dari penulis sebagai media yang digunakan untuk mendokumentasikan setiap kegiatan, yang bisa dimanfaat untuk berbagi informasi sehingga member manfaat lebih bagi saya juga anda… </p>
</div>
<!-- Footer Hubungi Kami -->
<div class='social'>
<h1>Contact us</h1>
<div class='contact'>
<div class='phone'><strong>Phone:</strong> +6281379190846 </div>
<div class='fax'><strong>Fax:</strong> -</div>
<div class='email'><a href='mailto:support@blog.com'>gustibogor@gmail.com</a></div>
<div class='email'><a href='mailto:sales@blog.com'>agha_ku@stainmetro.ac.id</a></div>
</div>
</div>
<div class='clear'/></div>


Setelah itu, Klik Simpan. Lihat hasilnya ya gan....

Catatan:
Tulisan yang berwarna biru, dapat anda rubah sesuai dengan keinginan anda. Untuk widget footer dengan 2 kolom dan tiga kolom, akan dipublish pada kesempatan berikutnya.....