Pada kali ini Billz Share akan bagikan template blogger, template blogger yang satu ini mungkin sudah banyak yang pakai. Apa boleh buat ini adalah salah satu request dari pengunjung di situs ini, karena sih pengunjung itu tidak tau cara download di 4Shared jadi disini saya repost lagi :D. Template blog X-Gen Blue CSS adalah salah satu template yang dishare di bloggger Andi Techno, untuk fitur dan petunjuknya silahkan sobat lihat dibawah ini.
Fitur :
- Meta tag SEO friendly
- Auto Read More Ready (with transition effect)
- Navigation Dropdown menu
- 2 Sidebar di kiri dan kanan
- Widget di header (bisa untuk meletakkan banner / iklan)
- Tombol Social Network (with transition effect)
- Breadcrumbs ready (seo friendly)
- Elegant Image Slider
- Tripple Tab View
- Struktur desain elegant dan Simpel
- Transition Effect on Hover
- Search Form
- 3 Elemen Widget diatas Footer
- Scrollbar sudah di modifikasi
- Minimalist keren
- CSS Template
Cara Install :
- Masuk ke dashboard blogger
- Klik Rancangan (Template)
- Edit HTML
- Buka X-Gen Blue CSS lewat notepad yang telah anda download tadi
- Copy semua code yang ada di X-Gen Blue CSS
- Kemudian sobat ctrl+a di kolom edit template dan silahkan paste semua code yang ada di X-GEN Blue CSS
Untuk langkah berikutnya silahkan sobat selesaikan penginstalan diatas
Mengubah Secondary Manu :
Cari kode ini: <ul class='menus menu-secondary'>
Lalu dibawahnya ada kode seperti ini:
<li><a href='#'>Template</a></li>
<li><a href='#'>Tips and Trick</a></li>
<li><a href='#'>Content</a></li>
<li><a href='#'>Dropdown1</a>
<ul class='children'>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
</ul>
</li>
<li><a href='#'>Dropdown2</a>
<ul class='children'>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>SubMenu</a>
<ul class='children'>
<li><a href='#'>Menu</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Contact</a>
<ul class='children'>
<li><a href='#'>Andi Techno</a>
<ul class='children'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Google Plus</a></li>
</ul>
</li>
<li><a href='#'>Email</a></li>
</ul>
</li>
<li><a href='#'>Artikel</a>
<ul class='children'>
<li><a href='#'>Techno</a></li>
<li><a href='#'>Social Media</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>
Ganti tanda # dengan link anda dan ganti Nama menunya
Lalu dibawahnya ada kode seperti ini:
<li><a href='#'>Template</a></li>
<li><a href='#'>Tips and Trick</a></li>
<li><a href='#'>Content</a></li>
<li><a href='#'>Dropdown1</a>
<ul class='children'>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
</ul>
</li>
<li><a href='#'>Dropdown2</a>
<ul class='children'>
<li><a href='#'>Menu</a></li>
<li><a href='#'>Menu</a></li>
<li><a href='#'>SubMenu</a>
<ul class='children'>
<li><a href='#'>Menu</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Contact</a>
<ul class='children'>
<li><a href='#'>Andi Techno</a>
<ul class='children'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Google Plus</a></li>
</ul>
</li>
<li><a href='#'>Email</a></li>
</ul>
</li>
<li><a href='#'>Artikel</a>
<ul class='children'>
<li><a href='#'>Techno</a></li>
<li><a href='#'>Social Media</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>
Ganti tanda # dengan link anda dan ganti Nama menunya
Mengganti Gambar Slide :
cari kode ini: <ul id='css3-slider'>
lalu dibawahnya ada kode seperti ini:
<li>
<input checked='true' id='s1' name='num' type='radio'/>
<label for='s1'>1</label>
<a href='/'>
<img src='http://i1153.photobucket.com/albums/p505/andixgen/xgengreen-1.jpg'/>
<span>Go green...</span>
</a>
</li>
<li>
<input id='s2' name='num' type='radio'/>
<label for='s2'>2</label>
<a href='/'>
<img src='http://i1153.photobucket.com/albums/p505/andixgen/yellowxgen.jpg'/>
<span>hmm, its golden colour...</span>
</a>
</li>
<li>
<input id='s3' name='num' type='radio'/>
<label for='s3'>3</label>
<a href='/'>
<img src='http://i1153.photobucket.com/albums/p505/andixgen/whitexgen.jpg'/>
<span>Holy colour, yes it white...</span>
</a>
</li>
<li>
<input id='s4' name='num' type='radio'/>
<label for='s4'>4</label>
<a href='/'>
<img src='http://i1153.photobucket.com/albums/p505/andixgen/xgenred-1.jpg'/>
<span>The Brave Colour is Red only, i think...</span>
</a>
</li>
<li>
<input id='s5' name='num' type='radio'/>
<label for='s5'>5</label>
<a href='/'>
<img src='http://i1153.photobucket.com/albums/p505/andixgen/xgen-1.jpg'/>
<span>I Think blue is calm colour...</span>
</a>
</li>
lalu dibawahnya ada kode seperti ini:
<li>
<input checked='true' id='s1' name='num' type='radio'/>
<label for='s1'>1</label>
<a href='/'>
<img src='http://i1153.photobucket.com/albums/p505/andixgen/xgengreen-1.jpg'/>
<span>Go green...</span>
</a>
</li>
<li>
<input id='s2' name='num' type='radio'/>
<label for='s2'>2</label>
<a href='/'>
<img src='http://i1153.photobucket.com/albums/p505/andixgen/yellowxgen.jpg'/>
<span>hmm, its golden colour...</span>
</a>
</li>
<li>
<input id='s3' name='num' type='radio'/>
<label for='s3'>3</label>
<a href='/'>
<img src='http://i1153.photobucket.com/albums/p505/andixgen/whitexgen.jpg'/>
<span>Holy colour, yes it white...</span>
</a>
</li>
<li>
<input id='s4' name='num' type='radio'/>
<label for='s4'>4</label>
<a href='/'>
<img src='http://i1153.photobucket.com/albums/p505/andixgen/xgenred-1.jpg'/>
<span>The Brave Colour is Red only, i think...</span>
</a>
</li>
<li>
<input id='s5' name='num' type='radio'/>
<label for='s5'>5</label>
<a href='/'>
<img src='http://i1153.photobucket.com/albums/p505/andixgen/xgen-1.jpg'/>
<span>I Think blue is calm colour...</span>
</a>
</li>
Petunjuk: <img src='URL GAMBAR ANDA'/> <span>DESKRIPSI GAMBAR ANDA</span>
MENGGANTI WIDGET SOSIAL MEDIA
Cari kode ini: <div class='social-connect-widget' style='margin-bottom:10px;'>
Dibawahnya ada kode seperti ini:
<a href='http://facebook.com/USERNAME'><img alt='Follow Us on Twitter!' src='http://3.bp.blogspot.com/_4HKUHirY_2U/TRPpU1_CEfI/AAAAAAAAJ7M/JP0RWRRMGCo/s1600/social-connect-facebook.png' title='Be Our Fan on Faacebook'/></a><a href='http://facebook.com/USERNAME'>Add Me</a>
</div>
<div class='social-connect-widget' style='margin-bottom:10px;'>
<a href='http://twitter.com/USERNAME'><img alt='Follow Us on Twitter!' src='http://1.bp.blogspot.com/_4HKUHirY_2U/TRPpVU7C4qI/AAAAAAAAJ7c/l56I53Gax0U/s1600/social-connect-twitter.png' title='Follow Me on Twitter'/></a><a href='http://twitter.com/USERNAME'>Follow Me</a>
</div>
<div class='social-connect-widget' style='margin-top:0px;margin-bottom:10px;'>
<a href='https://plus.google.com/u/0/YOUR ACCOUNT'><img alt='Google Plus' src='http://1.bp.blogspot.com/-x25E1aZXO58/UAbIpi4xAZI/AAAAAAAABvM/1pZ5v4P7Dns/s1600/Google-Plus-icon.png' style='width:32px;height:32px;' title='My G+ Account'/></a><a href='https://plus.google.com/u/0/YOUR ACCOUNT'>Circling Me</a>
</div>
Petunjuk:
http://facebook.com/USERNAME ganti dengan akun facebook anda
http://twitter.com/USERNAME ganti dengan akun twitter anda
https://plus.google.com/u/0/YOUR ACCOUNT ganti dengan akun google+ anda
META TAG
cari kode ini: <meta content='DESCRIPTION HERE' name='description'/>
ganti teks ''DESCRIPTION HERE'' dengan deskripsi blog anda
cari kode ini: <meta content='KEYWORDS HERE' name='keywords'/>
ganti teks 'KEYWORDS HERE' dengan keyword blog anda
cari kode ini: <link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
ganti teks 'YOUR FAVICON-URL' dengan link icon blog anda
cari kode ini: <meta content='YOUR NAME' name='Author'/>
ganti teks YOUR NAME dengan nama anda
ganti teks ''DESCRIPTION HERE'' dengan deskripsi blog anda
cari kode ini: <meta content='KEYWORDS HERE' name='keywords'/>
ganti teks 'KEYWORDS HERE' dengan keyword blog anda
cari kode ini: <link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
ganti teks 'YOUR FAVICON-URL' dengan link icon blog anda
cari kode ini: <meta content='YOUR NAME' name='Author'/>
ganti teks YOUR NAME dengan nama anda
Download Template X-Gen Blue CSS
Template X-Gen Blue CSS, Download, Template
8 comments
terlalu rame templatenya!
tapi nggak papa!
berat nggak sih nih template?
ngk juga kok, tergantung dari agan pasang widgetnya :D
ngk berat kok.. coba aja gan :)
iji downoad gan, temolatenya keren, ane pakek di blog ane yaa
silahkan.. makasih ;) ok gan :D
ijin coba n edit gan ?
silahkan gan, download dan bagikan juga :D
thanks gan
masama gan
Mohon komentarnya sesuai Artikel diatas yah bro!! Thanks..