Selamat siang semua? tanpa rasa ngantuk sedikitpun dari kemaren sore dan kali ini saya mau share templatnya Johanes, seperti biasa tema selalu Anime tetapi 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 di buat Johanes
sebelumnya, tetapi hanya saja tampilan posting pada template ini paling
berbeda dari semua template yang pernah saya lihat. yaitu karena
penggunaan CSS3 :nth-child() Selector yang baru saja coba-coba.CSS3
:nth-child() biasanya cuma digunakan pada widget-widget tertentu, tapi Johanes 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, saya kagak ngerti maka itu saya siapkan link bagi yang ingin bertanya pada pembuat langsungnya, atau membaca postingan berikut?
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='Ghost New-RIAU' name='DESCRIPTION'/>
<meta content='ghost-new.blogspot.com' 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.