Tutorial | Cara Membuat Footer Blog Elegant SEO Friendly - jika
blog anda belum memiliki footer dan anda ingin membuat footer blog dan
belum memiliki kodenya, maka kali ini kita akan belajar bersama dalam
memasangkan kode tersebut kedalam template blog dan tidak usah
membuatnya lagi karena kodenya sudah ada. Kode footer blog yang saya
buat ini adalah kode yang lain dari pada kode_kode footer yang biasa
kita jumpai seperti footer tiga kolom, footer empat kolom, atau footer
dua kolom. Untuk footer kali ini saya mengkategorikan kedalam footer
dengan mutti-kolom seperti yang terlihat pada tampilan gambar berikut
ini.
Cara Membuat Footer Blog Elegant SEO Friendly :
- Masuk dulu ke akun Blogger anda
- Buka menu pengeditan template
- Salin kode berikut sebelum atau diatas kode ]]></b:skin>
#footer {-webkit-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);-moz-box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);box-shadow:inset 0px 1px 0px rgba(0,0,0,0.4), inset 0px 2px 0px rgba(255,255,255,0.2), 0px 1px 3px rgba(0,0,0,0.4);background:#1F8F07 repeat-x;width:100%;margin-bottom:0px;padding:0 auto}
#footer-content {color:#ddd;font-size:12px;margin:20px auto;padding-top:5px;width:980px;text-align:left;}
#footer-content a {color:#EBF5FA;font-size:12px;}
#footer-content a:hover {color:#FFFFFF;font-size:12px;}
#footer-content img {border:none;}
#footer-menu {float:left;margin-left:80px;width:200px;}
#footer-menu ul#vmenu {border-top: none;}
#footer-menu ul#vmenu li {border-bottom: 1px dotted #AAA;}
#footer-menu ul#vmenu li a:link, #footer-menu ul#vmenu li a:visited {color:#ddd;}
#footer-menu ul#vmenu li a:hover {color:#FFF;}
#social{}
#twitter {float:left;margin:10px 0 0 0 ;}
#fb {float:left;margin:10px 0 0 10px;}
#gplus {float:left;margin:10px 0 0 10px;}
#linkedin {float:left;margin:10px 0 0 10px;}
#pinterest {float:left;margin:10px 0 0 10px;}
#tumblr {float:left;margin:10px 0 0 10px;}
#reddit {float:left;margin:10px 0 0 10px}
Salin kode berikut dibawah kode <div id='footer'> dengan hasil pemasangan seperti berikut ini :
<div id='footer-content'>
<div style='float:left;width:450px;'>
<div style='border-bottom:1px dotted #aaa'>Support by:</div>
<div style='margin-top:10px'>
<a href='http://google.co.id' style='margin-right:5px' target='_blank'><img border='1px solid #eee' height='20' src='https://www.google.co.id/images/srpr/logo4w.png' title='Google Indonesia' width='65'/></a>
<a href='http://blogger.com' style='margin-right:5px;' target='_blank'><img border='1px solid #eee' height='20' src='http://www.blogger.com/img/blogger-logo-small.png' title='Blogger' width='65'/></a>
</div>
<div style='margin-top:15px;border-bottom:1px dotted #aaa'>SocialNetwork:</div>
<div id='social'>
<div id='twitter'><a href='#' rel='nofollow'><img alt='twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJkUWv4KcIuVr7KsBvY77AGJneN3mp-CZ1QZg7IedeqzyisjtyyMvEqaifBSp-1TjBh93Pis8cRRBoXU4KV8btnqaGMOkX6RN2M-EvMxO4KqhS8qKmHHBwbL7pU_UkXKWzOS1hOVFGnVM7/s1600/twitter.png' width='32'/></a>
</div>
<div id='fb'>
<a href='#' rel='nofollow'><img alt='facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8H16aJ-6-kI8lFoYAB4Hp4RN9-jIWgD1O5ex1G1oT0ZFasn82DgrgIPVcZeMlL5UVQHV1DVhaNTvMtOJz7fchYTxvrlc-eeD62msbxV1YcCzGO3maVhp_51J-iCLCWblARgIWqw77qX9D/s1600/facebook.png' width='32'/></a>
</div>
<div id='gplus'><a href='#' rel='nofollow'><img alt='google plus' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5vG-adQXDnsrwxaqhyE0yBdSSF5LUJH_S4My7RlZ3ly0kvp6KLVGCUvftfxyvvdT658B8KE_8soq70iH9NrVOslL0aaLbZtbImZxewVNbdKKg8oXqScdI9PNWTZhjQ6nSI8cJvzvRDyY8/s1600/google+.png' width='32'/></a>
</div>
<div id='linkedin'><a href='#' rel='nofollow'><img alt='linkedin' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikif0FWph7h-J7nKZqNjL36sHZJIEHbj2WAMnBmZcaKpJLUWRCTJGHqhiCTM5wulueO35hyViFQwcpAoVfnnuoQB0S_xtn6v5JaHfGH2erKMGpzF4oJvnQBaWznwKmvO-3byGL-PH5Agcj/s1600/linkedin.png' width='32'/></a>
</div>
<div id='pinterest'><a href='#' rel='nofollow'><img alt='pinterest' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqghB3qFNBkQf4qRt4ElNE-J73PnKLaGrErIU9rl9A-AY7mAT0v3ZRuIXXs7X3N1l1Yw71MWUoYdhHZiCLsBQ6NMmiax17UJWwAnUd0i5_AwQEY4GCpVxbWkzJqC_2X63w0ufUaiN2-xHu/s1600/pinterest.png' width='32'/></a>
</div>
<div id='tumblr'><a href='#' rel='nofollow'><img alt='tumblr' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtR4FjwO7YPVak4e-C8CCquh8hmB7IU2Rfiw2QG9fBxztmXS1lvZMIR77LHt4pGOKjV76LqraUWj4o8lvUj1IC42DutXbkazLiesbKTTtJSSDDI_IRpDoGKI53pfPJbM6qCd8PgIxf_KmQ/s1600/tumblr.png' width='32'/></a>
</div>
<div id='reddit'><a href='#' rel='nofollow'><img alt='reddit' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5H7p20Ph1misfV0pINBt-dMhrZ8FhoXFl4r1T_kFW5QR0QcOTwj67IMleu9JuF2-TSOqKs1QIdH7HG4n_Un8jWcuXqDX6CiOZ_h94U1Qr4lYFzldyZEUGfTARzfkl6psKw4ZlLsYSC5k4/s1600/reddit.png' width='32'/></a>
</div>
</div>
</div>
<div style='margin-left:30px;float:left;width:200px;'><h5><div style='border-bottom:1px dotted #aaa'>ElegantGreen Template Design by:</div></h5><div style='margin-top:10px'>
<a href='http://panduantemplateblog.blogspot.com'>Panduan Template Blog</a></div>
<!-- Begin Mail -->
<div style='margin-top:15px;border-bottom:1px dotted #aaa'>Subscribe to our newsletter</div>
<div>
<div id='mc_embed_signup'>
<div id='joinfeed'>
<a href='http://resepmasakansehatindonesia.blogspot.com/feeds/posts/default' rel='alternate' title='Subscribe to avail resepmasakansehatindonesia.blogspot.com' type='application/rss+xml'>RSS</a>
<style>.ptb {padding-left:2px;padding-right:2px;color:white;font-weight:500;background-color:#FF8000;-moz-box-shadow: 1px 1px 1px #888;-webkit-box-shadow: 1px 1px 1px #888; box-shadow: 1px 1px 1px #888;}.ptb:hover {-moz-box-shadow: 0 0 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0;}</style>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=FeedBlog Anda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input name='email' placeholder='email address' style=' color:#5C6AA4; background: #fff; border:1px solid #5C6AA4; padding:10px 0;width:210px' type='text'/><input name='uri' type='hidden' value='Resep Masakan Sehat Indonesia'/><input name='loc' type='hidden' value='en_US'/> <input class='ptb' onmouseout='this.className='ptb'' onmouseover='this.className='ptb ptbhov'' style='-moz-border-radius: 3px; border-radius: 3px;' type='submit' value='Submit'/></form>
</div>
</div>
<!--End Mail-->
</div>
</div>
<div id='footer-menu'>
<ul id='vmenu'>
<li><a href='#'>Home</a></li>
<li><a href='#'>Masakan Daerah</a></li>
<li><a href='#'>Cara Memasak</a></li>
<li><a href='#'>Tentang</a></li>
<li><a href='#'>Hubungi Kami</a></li>
<li><a href='#'>Credits</a></li>
<li><a href='#'>Uncategorized</a></li>
</ul>
</div>
<div style='margin:40px 0 20px 0;clear:both'><p>© 2013 <a expr:href='data:blog.homepageUrl' style='margin-right:10px;'><data:blog.title/></a> All rights reserved.</p></div>
<div style='clear:both;height:20px'/>
</div>
</div>
Selesai. Silahkan klik Preview terlebih dahulu sebelum anda
menyimpan pembaharuan kode template anda untuk melihat apakah ada error
atau tidak. Jika ada yang error, cari kodenya dan perbaiki. Jika tidak
ada yang error, simpan template.PENTING Karena kode CSS dari membuat
footer blog ini menggunakan kode yang sama dengan kode footer aslinya
yaitu #footer sehingga akan membuat ID html yang sama juga yaitu <div
id='footer'> maka anda harus menghapus kode yang ada yang sama
dengan kode pada artikel ini agar tidak menimbulkan bentrok.
Sekian postingan saya mengenai Cara Membuat Footer Blog Elegant SEO Friendly. Jika ada pertanyaan, mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Terimakasih banyak yaa.
Sekian postingan saya mengenai Cara Membuat Footer Blog Elegant SEO Friendly. Jika ada pertanyaan, mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini, Terimakasih banyak yaa.
Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot Ebook Dan Game Dll
Sobat sedang membaca artikel tentang Tutorial | Cara Membuat Footer Blog Elegant SEO Friendly. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
No comments:
Post a Comment