Home → Semua Post Berkategori Template
Tampilkan postingan dengan label Template. Tampilkan semua postingan
Tampilkan postingan dengan label Template. Tampilkan semua postingan
Sabtu, Januari 11, 2014
0 komentar

Template Devil Survivor S2

Sekarang Saya Mau Ngeshare Template Anime Devil Suvivor ,  Kalian Udh Pada Tahu Dong dengan Anime ini ....!

                                                                                                                                         ScreenShot:



                                                                                                          DEMO / DOWNLOAD


1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.


Contoh:

<li><a href='http://www.facebook.com'>Facebook</a></li>



<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li data-role='dropdown'><a href='#'>About</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Contact</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Download</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>
<li><a href='#'>Report</a></li>
<li><a href='#'>Anime</a></li>
</ul>


Jika kamu ingin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam kode html
<ul class='dark_menu'> ....</ul>

Single menu
<li class='jolor'><a href='#'>namalink</a></li>


Dropdown menu
<li class='jolor' data-role='dropdown'><a href='#'>link kamu</a><ul>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
<li><a href='#'>Lorem Ipsum</a></li>
</ul></li>


2. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah
<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>


Untuk pengertian setting seo/meta tag,anda bisa cari tahu di google atau disini dan disini




3. Setting Social media : facebook, Twitter, Rss,Pinterest.
*ganti url linknya
<a href='http://feeds.feedburner.com/alamat_feed_rss'><div class='rssjo'/></a>
<a href='http://twitter.com/username'><div class='twitterjo'/></a>
<a href='http://www.facebook.com/halaman_fan_page_facebook'><div class='facebookjo'/></a>
<a href='http://www.pinterest.com/id%20kamu'><div class='pinterestjo'/></a>


Tertarik dengan Template Devil Survivor 2 Blogger Template?
Silakan dicoba dan selalu ingat anda menggunakan template ini,selalu backup template lama anda agar tidak terjadi sesuatu yang tidak diinginkan.Terima kasih


Bonus PSD Semoga aja bermamfaat untuk anda :





Sabtu, Januari 11, 2014
0 komentar

Template Fairy Tail


Apa kabar sobat?akhirnya saya posting juga yang gambar'a cowo,masa gadis trus?wkwkwk
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-




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/AVvXsEi9RjRZpgOlnOJ-zMCDYEV6vaoJT1Vzu7EmcebM6oJlk1V2mD7MisB-Foqu3zT2mcnZKti71-ZdD6s2pbOce_v8Hn-Bnwqb6RNTvofzZ9ZM8yraTYNkgh9y4PZv9PzvqKrtYs2qdeMcBxk/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/AVvXsEjv3dLZU0qTQrrvUWKT3Vn5nxzvVim484jxqyS8KMSJmuyK1UJztUsbWqJ9qsQmz8zoDdzsXny_bHH80G6ZT195Whbtl3xxiKtOinztKdPSmAZEfWNejEDoIrQha0_L_VaSEdpNkXfEk-Q/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/AVvXsEiIkMtcTGVRz1GFX7vo_AJcjSppSeuYB06s7yXzo6VpP9RoRziHqqWIb7fRaeyhdZ55alBvn8M8Llqy1Cc5ApEIEUBszPbloNM_P2NDKOU2XjTENRNXVbZogmbFzWgpo_SjLIu2OZIBJSQ/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/AVvXsEh3pgCP1eRv8f9JqusV_lIEtHyrFnfYP8OaQ4vrrirs1Umk601mUzcJzwCYYX06aUC0o5N_YyLsA3SDeiW3dmPyd6yWbrTILgnUlQx9R0oiKQcEd7B6Wnaf8BrVzAhXzycsZ34Hv9DsFIc/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/AVvXsEiHEY7_AZsnBEIvWrUNqGTOLkbFKtC4CfBqtfW52SM3sr-y_P1-apZHon13HBDE5NtmlAR1sX8Ghhyphenhyphen0FhgvQfzhGZFiEjBNIDLQKX5drnlmEjDw4FkfP1JoMZDsFRg_eh9dQul9BvlPCMU/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










Simple bukan?bila tertarik silakan dicoba~
Arigatou gozaimasu minna-san~
Selamat mencoba,semoga bermanfaat :)
Back to Top