Template X-Gen Blue CSS

8:23 AM / Billz Share / Template Blogger,

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

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>

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

Download Template X-Gen Blue CSS

Template X-Gen Blue CSS, Download, Template