Cara menambah gadget 4 kolom pada bagian footer

Menambahkan gadget pada bagian bawah atau pada bagian footer tidaklah sulit dan kode yang di gunakan juga hampir sama dengan cara menambah gadget dibawah header, bedanya kita tinggal menempatkan pada bagian footer. Bagi sobat blogger yang templatenya belum menggunakan fasilitas ini, anda juga bisa menambahkan gadget pada bagian footer. Dan memang cara ini sangat bermanfaat sekali. Sebab ketika pengunjung atau pembaca artikel blog kita sudah sampai pada bagian bawah, disitu kita sudah suguhkan menu, link atau hal - hal penting lain yang kita juga berharap pengunjung juga tertarik untuk membaca.

Artikel ini saya buat atas permintaan sobat blogger yang ingin tahu cara menambah gadget pada bagian bawah atau footer.

OK..., Bila anda berminat dengan cara ini, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

<b:section class='footer' id='footer'/>

Catatan :
Pada bagian HTML biasanya tampak seperti berikut :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

7. Silahkan ganti kode berwarna merah dengan kode dibawah ini :

  <div id='footer-column-container'>
<div id='footer1' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-1' preferred='yes' style='float:left;'>
<b:widget id='Text1' locked='false' title='About B-G' type='Text'/>

</b:section>
</div>
<div id='footer2' style='width: 225px; float: left; margin:0; '>
<b:section class='footer-column' id='footer-column-2' preferred='yes' style='float:left;'>
<b:widget id='Text4' locked='false' title='About Author' type='Text'/>
</b:section>
</div>

<div id='footer3' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-3' preferred='yes' style='float:right;'>
<b:widget id='Text3' locked='false' title='Subscribe in Reader' type='Text'/>
</b:section>
</div>

<div id='footer4' style='width: 225px; float: right; margin:0; '>
<b:section class='footer-column' id='footer-column-4' preferred='yes' style='float:right;'>
<b:widget id='Text2' locked='false' title='Access B-G on Go' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Catatan :
Anda bisa ganti kode berwarna merah pada kode diatas, itu adalah nilai lebar setiap gadgetnya. Silahkan anda sesuaikan dengan lebar template milik anda.

8. Kemudian anda cari lagi kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

9. Copy kode dibawah ini dan paste atau letakkan kode dibawah ini, sebelum kode ]]></b:skin>:

#footer-column-container { border: .3px dotted #cccccc;} .footer-column { margin: 0 10px 0 10px; padding:5px;
color: #666666; line-height: 1.5em; font-size:12px;}
.footer-column h2 {
padding-bottom:.15em; text-align:center;
font:"normal normal 80% 'Comic Sans MS','Lucida Sans Unicode','Trebuchet MS',Sans-serif";
color:#333333;
line-height:1em; letter-spacing:.1em;
border-bottom: 1px solid #cccccc;}
.footer-column ul { list-style:none; margin:0 0 0; padding:0 0 0;}
.footer-column ul li {
background: url(http://i421.photobucket.com/albums/pp296/rnbutpur/bullet-1.gif) no-repeat;
margin:0 0 0; padding-left: 16px;
padding-bottom: 0.5em; line-height:1.2em;}
.footer-column .widget {margin:0 0 .5em; padding:0 0 1em;}

10. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara membuat link senggol

Buat sobat blogger yang blognya suka menampilkan banyak fariasi, link senggol ini bisa jadi alternatif untuk menambah tampilan blog anda. Saya sebut link senggol sebab link ini memiliki efek slide, yaitu ketika pointer mouse diarahkan diatas link, maka link tersebut akan bergeser seperti disenggol....hehehee....., dan akan terlihat bergoyang bila diarea link pointer mouse diarahkan keatas dan kebawah.
Berikut bentuk Link senggol yang saya maksud :

• Cara buat web
• Cara buat blog
• HTML
• CSS
• JavaScript
• jQuery
• Tutorial blogger
• Tips and Trik
• Info RWP Group
• Peluang Usaha

Bila anda berminat silahkan anda bisa ikuti langkah - langkah dibawah ini :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(document).ready(function() { slide("#sliding-navigation", 25, 15, 150, .8); }); function slide(navigation_id, pad_out, pad_in, time, multiplier) { // creates the target paths var list_elements = navigation_id + " li.sliding-element"; var link_elements = list_elements + " a"; // initiates the timer used for the sliding animation var timer = 0; // creates the slide animation for all list elements $(list_elements).each(function(i) { // margin left = - ([width of element] + [total vertical padding of element]) $(this).css("margin-left","-180px"); // updates timer timer = (timer*multiplier + time); $(this).animate({ marginLeft: "0" }, timer); $(this).animate({ marginLeft: "15px" }, timer); $(this).animate({ marginLeft: "0" }, timer); }); // creates the hover-slide effect for all link elements $(link_elements).each(function(i) { $(this).hover( function() { $(this).animate({ paddingLeft: pad_out }, 150); }, function() { $(this).animate({ paddingLeft: pad_in }, 150); }); }); } //]]> </script> <style type="text/css"> ul.listpanah {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAHLzO-dC-1SB5jRjJUXFD02P4S8A2OG3sag2feJH_zpBHIuuw3KKKZbrlv5H2FagFge682e8gGzl2k6SgO-FlBRrDOVf3s95KYiY_pFLIjIfvLMKRGn91MIM2R4Forb1Yn_kbIWJX1Sk7/s12/List+6.jpg');} a:link {color:#000;text-decoration:none;} a:visited {color:#000;text-decoration:none;} a:hover {color:#669CFF;text-decoration:none;} </style>

Langkah selanjutnya anda tinggal menampilkan Link senggol tersebut pada sidebar blog anda. Berarti anda tinggal menambah gadget. Perhatikan langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div class  id="sliding-navigation">  
<ul class="listpanah">
  
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   1</a></li> 
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL  2</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   3</a></li> 
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   4</a></li> 
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   5</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   6</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   7</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   8</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL   9</a></li>
<li class="sliding-element"><a href="GANTI ULR"target="_blank">JUDUL 10</a></li>
 
</ul></div>

Ok...., Selamat mencoba dan Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

Baca artikel lain :