Apa kabar sobat?template kali ini tema'a anime fairy tail,tapi design'a saya buat simple dan bersih tidak menggunakan shadow.pada template ini saya menambahkan fitur Slideshow jmpress dengan Jquery yang saya temukan dari codrops.tapi sudah saya edit dan modifikasi jquery,css dan HTML'a.kalau aslinya ukuran slide besar,dan text dengan gambar terpisah.
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
-Preview-
 |
Pengaturan Menu 1
Untuk pengaturan menu: Buka blogger=>templates=>Edit HTML lalu cari HTML seperti dibawah ini,lalu ganti tanda pagar '#' dengan URL link yang kamu inginkan.
<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's rose might never die</p><!--deskripsi -->
</div><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Gb_rJU8i9Y5r3fz3sOyw8utR9ticoNPYsz6PCmIlqwyrrHvzc_2EnNQTCWkB0iYMbjjs2BAiOJJLTGBV1pDkJdBdUlYCbX86ckRXYMbQs0P17lY-Onqqegfs6MqS2avjg3eqxowT-9A/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/AVvXsEjeqz9lAjGwUCXusrDl8yXcjCmNgMy6Yup7WykDrFduQNPuV_XT-43tcfjv9HPu-MfaZuGrWepnDOL7hVtpsh2dp0w_RIqf45dJ7Q-Plnl-5CDAd14fwVKDYCALADODQrNlxbYM5lG4_5s/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/AVvXsEgvG6i50yzCs1NWC_k1JIbLRQh5YpCMxe1PKHUPbIB13m-_bZGv2kTq-Yl2U-5pEPc3BcvTnibQzGejmXpJ_NGXuHSWOV2uVrIdScla7U70j9aDG2_HpfezkikNJ1GeCN3TwlGd9TdCB5M/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/AVvXsEjXkDmMtAoLsCiJAsupGatVmwnDdGMhq0H2VdMjsUeG0GORN3sWsuNzVx3A7wEGm5FO2SIQgSQvHP4smjmKGCQYlFFRVXV3iFUyGFeSBbG9oX4HfY6rRW-pHe3HI5GCak78T_Fev3Ld38A/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's fresh ornament and only herald to the gaudy spring</p><!--deskripsi -->
</div>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY6dERPN2V9WkZYy4DxKmlxbXq6Zl9U1Shsqj54znPRoGAQg4TXiLSUDK9nEjZPS_dgQs6q_Bsn6k3udasJzoyoRxMxY5oUifFTLIjxktAnCKEVocc4vUlvZMHWz1ZDV-6lDaHW5c5FhQ/s1600/Untitled-1.jpg'/>
</div><!--background -->
</section>
saya sudah menandai tiap html'a sperti
<!--judul --> warna merah
<!--Deskripsi --> warna orange
<!--background --> warna biru
kamu tinggal mengganti judul dan deskripsi slide'a.
Untuk background'a sendiri,kamu tinggal mengganti url gambar seperti yang ada diatas dengan gambar yang kamu inginkan.
Ukuran gambar tepat'a 602 × 262
Sumber: http://djogzs.blogspot.com/
0 komentar ~ Back To Top