Sabtu, 16 November 2013
Akhirnya selesai juga template kedua bulan ini dari hasil voting di fan page saya Djogzs. tema Anime kali ini adalah To Aru Kagaku no Railgun dari anime yang saat ini masih airing. Singkatnya Toaru Kagaku no Railgun adalah cerita sampingan berdasarkan cerita asli Kamachi. Bertempat di Kota Akademi, sebuah kota di mana sekitar 80% dari 230.000 penduduknya adalah pelajar. Cerita ini mengenai petualangan Misaka Mikoto sebagai pemeran utamanya, salah satu dari psikis Level 5 yang dapat mengeluarkan listrik.
Template ini menggunakan dasar warna biru agak tua, hampir sama
tampilanya dengan template yang sebelum"nya,tetapi hanya saja tampilan
posting pada template ini paling berbeda dari semua template yang pernah
saya buat. yaitu karena penggunaan CSS3 :nth-child() Selector yang baru
saja coba-coba.CSS3 :nth-child() biasanya cuma digunakan pada
widget-widget tertentu,tapi saya coba terapkan pada posting maka
hasilnya adalah ukuran posting,warna,atau stylenya dapat dibedakan
sesuai urutan posting tersebut.Posting pertama pada template ini
menggunakan ukuran full 100% dan tinggi gambar auto, posting ke 2-5
ukuran setengahnya yaitu 47,7% sehingga jadi 2 kolom posting, dan
posting urutan ke 6 dan seterusnya tidak memiliki gambar alias sticky
seperti tampilan posting Shiroi agar dapat sedikit hemat gambar dan
lebih simple~xD
Template ini tidak menggunakan slider ataupun accordion ,tetapi ditambahkan menu kedua dibawah header dan footer dengan 3 kolom.
Screenshot
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 url/alamat link yang ingin dituju,dan ganti juga nama linknya.
Menu1
<div id='menujohanes'>
<ul>
<li class='selected'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a class='menu' href='#'>Download</a>
<ul>
<li><a href='#'>Naruto</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
<li><a href='#'>Date A Live</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
<li><a href='#'>Devil Survivor2</a>
<ul>
<li><a href='#'>Episode 1</a></li>
<li><a href='#'>Episode 2</a></li>
<li><a href='#'>Episode 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a class='menu' href='#'>Contact</a>
<ul>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Google plus</a></li>
</ul>
</li>
<li><a class='menu' href='#'>Multi sub</a>
<ul>
<li><a href='#'>Episode 1</a>
<ul>
<li><a href='#'>Episode 2</a>
<ul>
<li><a href='#'>Episode 3</a></li>
<li><a href='#'>Episode 4</a></li>
</ul>
</li>
<li><a href='#'>Episode 5</a></li>
</ul>
</li>
<li><a href='#'>Episode 6</a></li>
<li><a href='#'>Episode 7</a></li>
</ul>
</li>
<li><a class='menu' href='#'>Clients</a></li>
<li><a class='menu' href='#'>Email</a></li>
</ul>
Menu2
<div id='menujohanes'>
<ul>
<li><a class='menu' href='#'>Menu1</a></li>
<li><a class='menu' href='#'>Menu2</a></li>
<li><a class='menu' href='#'>Menu3</a></li>
<li><a class='menu' href='#'>Menu4</a></li>
<li><a class='menu' href='#'>Menu5</a></li>
<li><a class='menu' href='#'>Menu6</a></li>
</ul>
</div>
pengaturan lebih lanjut mengenai menu ini,silakan baca di postingan ini :
http://djogzs.blogspot.com/2013/06/css-dropdown-menu.html
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, google,Pinterest.
*ganti url linknya
<div class='jorib'>
<a href='#' target='_blank'><div class='googlejo'/></a>
<a href='#' target='_blank'><div class='twitterjo'/></a>
<a href='#' target='_blank'><div class='facebookjo'/></a>
<a href='#' target='_blank'><div class='pinterestjo'/></a>
</div>
4. Bagaimana cara mengatasi undefined?
Buka setting=> language and formating pada blog kamu seperti gambar dibawah ini.
Lalu ikuti format tanggal posting seperti contoh gambar dibawah ini :
Date header format:
Timestamp Format
Comment Timestamp Format
Tertarik dengan To Aru Kagaku no Railgun Blogger Template? silakan unduh template ini dan diterapkan pada blog anda,tapi ada baiknya untuk selalu membackup template anda sebelum menggunakan template ini.terima kasih.
Bonus PSD File Header To Aru Kagaku no Railgun~xDD
Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyuu minna-san~ :)
Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.
Sumber : Blog Johanes
Posting Komentar