Thursday, August 9, 2012

Fairy Tail Blogger Template


siang semua kali ini saya akan sahare template keren dan unik nih,

Di template ini sudah saya buat background full dan text ada diatas gambar,sehingga mempunyai style yang sama dengan posting.kenapa saya menggunakan fitur ini?karena menurut saya effect transisi'a menarik dan pergerakan'a halus.sebenar'a saya jg sudah menemukan yang versi 100% css,tapi karena masih kaku dan agak berat,jd saya pikir pakai jquery saja~

lalu untuk menubar'a sendiri saya buat 2 bagian yang ada diatas slide dan dibawah slide.kenapa saya buat begitu?supaya design'a beda dari pada yang lain.aneh bukan?itulah saya~xD



INI SS DARI TEMPLATE FAIRY TAIL:

Untuk pengaturan menu: Buka blogger=>templates=>Edit HTML lalu cari HTML seperti dibawah ini,lalu ganti tanda pagar '#' dengan URL link yang kamu inginkan.
PENGATURAN MENU 1 


<div id='nav'>
<ul><!--menu1 -->
<li><a href='#'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Guestbook</a></li>
</ul>
</div>

PENGATURAN MENU 2

<div id='nav'>
<ul><!--menu2 -->
<li><a href='#'>Exchange link</a></li>
<li><a href='#'>Sitemap</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Email</a></li>
</ul>
</div>

PENGATURAN SLIDE:

Untuk pengaturan slide,kamu bisa mengganti judul deskripsi dan gambar background

perhatikan kode HTML dibawah ini


<section class='jms-slideshow' id='jms-slideshow'>

<div class='step' data-color='color-2'>
<div class='jms-content'>
<h3>Fairy tail.</h3><!--judul -->
<p>From fairest creatures we desire increase, that thereby beauty&#39;s rose might never die</p><!--deskripsi -->
</div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixBgv4de5iwMnodQslH42eK1m6ff_I_97RaHgpMUeN4xLNdyPBC5ypWJQcAqmLw-9KN96GxHlhnffnWZddOfkR9yiBc1bWMSdF_J21kGFzGiiPpy8KqQq8Y0CD3xremegjbfF9uRVSTdk/s1600/Konachan.jpg'/><!--background -->
</div>

<div class='step' data-color='color-3' data-rotate-x='80' data-y='900'>
<div class='jms-content'>
<h3>Lucy</h3><!--judul -->
<p>But as the riper should by time decease, his tender heir might bear his memory</p><!--deskripsi -->
</div>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJFcZ_9sS44nvhrsLdp_z-Bl1YxiSSDBv4E0Tr4mRH4R-18kKg14e4z1t8auCJjbVK7VPLBtWbjxKVN48HiziQ78tM9e4MoFQDGK314sScvhTw7wqnpGTTlD4RbQqK8IHRUJ0IjkREjGM/s1600/Untitled-1.jpg'/>
</div><!--background -->

<div class='step' data-color='color-4' data-rotate='170' data-x='-100' data-z='1500'>
<div class='jms-content'>
<h3>Natsu</h3><!--judul -->
<p>Within thine own bud buriest thy content and, tender churl, makest waste in niggarding</p><!--deskripsi -->
</div>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRF99jqpWB67IvdqWpyj7pc2HMPW-egmm4ZWhjgJMCZccBl9oSiI-GrnZ3J-eC21iOvKE87hmRPcXlNgdPFGl3vetH0Kfqon21FXaHDA1oWn3Wdq2quC9V9l5oN77hWSy4Etw1cNz9KhI/s1600/Untitled-1.jpg'/>
</div><!--background -->

<div class='step' data-color='color-5' data-x='3000'>
<div class='jms-content'>
<h3>Erza Scarlet</h3><!--judul -->
<p>Making a famine where abundance lies, thyself thy foe, to thy sweet self too cruel</p><!--deskripsi -->
</div>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1ztBMx_Y_gpaY-9dpH-aZT1hi7FvY0XumjnMPPWxO-MfX40n2fQEF8qjV-Go0hyCWxwcwpozqJVeJr5hL2JMnnKI0f0_oRlTz0BP-ZkiVV-t4auPpl0kYqhhXLgRIhxbnWO9_y1a07OQ/s1600/Untitled-1.jpg'/>
</div><!--background -->

<div class='step' data-color='color-1' data-rotate-y='45' data-x='4500' data-z='1000'>
<div class='jms-content'>
<h3>Happy</h3><!--judul -->
<p>Thou that art now the world&#39;s fresh ornament and only herald to the gaudy spring</p><!--deskripsi -->
</div>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGdyu8c4nMjNR7yr9GLJUe9okdNeAPdbhTPYKBw1Fcne50ChIYaD8DzyjqDDRBjBCygMaY-OQ045HPtTUchQ0NrpeXMvVRS8MG19vLoRrw2yMaCO1z4p-vh4aRxMgIwZJHxqfYexgI7lk/s1600/Untitled-1.jpg'/>
</div><!--background -->

</section>

saya sudah menandai tiap html'a sperti
<!--judul -->  warna merah
<!--Deskripsi --> warna orange
<!--background --> warna biru
nah kalian tinggal ganti saja gambar slide dengan gambar sendiri dengan ukuran : 602x262


Artikel Terkait


EmoticonEmoticon