Home » » Cara Menambah Elemen di Atas Footer [tips blogger]

Cara Menambah Elemen di Atas Footer [tips blogger]

Untuk memepercantik agar tampilan blog kita tidak membosankan kita perlu mendesign layoutnya sedemikian rupa. Sehingga dalam mengaksesnya kita lebih bersemangat, tentu saja pengunjung juga tidak akan jemu untuk kembali lagi.

Salah satunya dengan menambahkan elemen di atas footer, seperti terlihat pada gambar ini


image


langkah-langkah untuk menambahkan elemen diatas footer tersebut adalah sebagai berikut:


Login ke blogger dengan id anda
Menuju menu Tata Letak
Pada tab menu, klik Edit HTML
Backup template anda, klik Download Template Lengkap
Sekarang dengan cara mencari kode ini : 




#footer { 
width:900px; 
clear:both; 
margin:0 auto; 
padding-top:15px; 
line-height: 1.6em; 
text-transform:uppercase; 
letter-spacing:.1em; 
text-align: center; 
}



Tambahkan atau copy lalu paste kode berikut di bawah kode tadi 



/* bottom 
----------------------------------------------- */ 
#bottom { 
width:900px; 
clear:both; 
margin:0 auto; 
float:left; 
padding:10px 0; 
color:#333; 
background:#ffffff; 
border-top:1px solid #333; 
#bottom a:link { 
color:#006699; 
text-decoration:none; 
#bottom a:hover { 
color:#c06000; 
text-decoration:underline; 
#bottom a:visited { 
color:#045FB4; 
text-decoration:none; 
#bottom h2 { 
padding:20px 0 2px 0; 
margin:0 0 10px 0; 
border-bottom:1px dotted #cccccc; 
font-size:11px; 
font-weight:bold; 
line-height:1.4em; 
text-transform:uppercase; 
#bottom ul { 
padding:0; 
margin:0; 
color:#333; 
#bottom ul li { 
list-style-type:none; 
border-bottom:1px dotted #333; 
background:url("http://i35.tinypic.com/2n03mgz.jpg") no-repeat 0px .17em; 
padding-left:17px; 
margin-top:2px; 
#left-bottom { 
width:200px; 
float:left; 
padding-left:15px; 
#center-bottom { 
width:200px; 
float:left; 
padding:0 20px 0 20px; 
#right-bottom { 
width:420px; 
float:right; 
padding-right:15px; 
}

Sekarang kita membuat kode HTML untuk elemen di atas footer tersebut. Cari kode ini : 


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

Tambahkan kode berikut di atas kode tadi : 



<div id='bottom'> 
<b:section class='bottom' id='left-bottom' preferred='yes'/> 
<b:section class='bottom' id='center-bottom' preferred='yes'/> 
<b:section class='bottom' id='right-bottom' preferred='yes'/> 
</div> <!-- end bottom -->


klik tombol SIMPAN TEMPLATE


sesuaikan ukuran lebar (widht) footer dengan template anda dan lebar elemen yang akan ditambahkan sesuaikan selera anda dengan memperhatikan jarak marginnya.
Untuk melihat hasilnya masuk ke elemen halaman, semoga berhasil!






Sumber by http://amatullah83.blogspot.com

Semoga bermanfaat

8 comments:

  1. Ok sob ntar ane coba. kunjung balik sob + follow

    ReplyDelete
  2. weih mantab sob, salam kenal

    ReplyDelete
  3. terimakasih sobat

    ReplyDelete
  4. sama sama. terima kasih juga sudah berkunjung. sip saya biasa mengunjungi sobat sobatku semua. salam

    ReplyDelete
  5. Anonymous2:29 AM

    jbcajluke
    http://www.bootcityjp.com/ アグ
    http://www.bootsforgirlsjp.com/ ugg
    http://www.lovebootsjp.com/ ugg ムートン
    http://www.jpbootsforgirls.com/ アグ クラシックミニ
    http://www.jpbootsforkids.com/ ugg ブーツ

    hplzgsryh
    ugg ブーツ
    ugg ムートン
    ugg ブーツ
    ugg 安い
    ugg ムートン

    moncmnpjg
    [url=http://www.jpbootcity.com/#hznykolmj]ugg ムートン[/url]
    [url=http://www.jpbootshoes.com/#q#accawnbu]アグ サンダル[/url]
    [url=http://www.paylessjp.com/#cufrktjru]ugg クラシック[/url]
    [url=http://www.bootcityjp.com/#yhpsqkgwl]ugg ムートン[/url]
    [url=http://www.bootuggjp.com/#sdgocozcg]アグ[/url]

    ReplyDelete
  6. Anonymous12:02 PM

    If I miss that chance, she's gone It simply means that you need more practice, more experience The physical discomforts are trying to get your attention - Pay attention to a greater dis-ease within
    It's able to connect to the printer via the USM connection interface You have your own blissful happiness support system deep inside of you Never have your SS# printed on your checks It never argues with the findings of legitimate science

    [url=http://giantsofficialjersey.com/]Eli Manning Jersey[/url]
    [url=http://www.claymatthewsjersey.net/]Nfl Clay Matthews Jersey[/url]

    These brands provide a choice between cotton or polyester fight jerseys with rich details, and fighters enjoy the loose fit that allows lots of freedom of movement when worn in the ring In our efforts to understand the notations we must make the effort All rights reserved Put your own name on Aaron Rodgers or Brian Urlacher's jersey to show your pride

    [url=http://www.indianapoliscoltspros.com/]Pat Angerer Jersey[/url]

    ReplyDelete
  7. Anonymous7:06 PM

    http://www.legitpaydayloansonline2.com/ http://www.legitpaydayloansonline2.com/ Fundpopog http://www.legitpaydayloansonline2.com/ Stype [url=http://www.legitpaydayloansonline3.com/]Online Payday Loans[/url] Payday Loans For this we need something that can at into his needs to be repaid only with credit card receipts.

    ReplyDelete
  8. thanks follow balik ea

    www.master7chris.blogspot.com

    ReplyDelete

Silahkan berkomentar dengan sopan dan tidak Spam.... kalau tidak punya akun blogger silahkan pilih Name / URL isikan nama dan email juga bisa, atau kosongkan URL. Mohon maaf Live Link, langsung akan saya hapus.

.