Showing posts with label Template. Show all posts
Showing posts with label Template. Show all posts

Hello lagi minna~ hari ini saya mau share template anime tapi minimalist juga,terutama pada bagian posting dan sidebar.Tema template menggunakan warna terang dan soft ini dari anime Oreshura,atau lengkapnya Ore no Kanojo to Osananajimi ga Shuraba Sugiru yang saat ini masih ongoing,kalau sudah menonton anime ini pasti tau Natsukawa~xD ,baiklah,saya tak perlu menceritakan karekter anime tersebut,karena blog saya bukan fansub~xD.

Nah,apa aja sih yang menarik dan unik dari template ini? pertama yang fitur yang belum ada pada web/blog lain yaitu posting/Sticky post dengan sytem dropdown menu .kenapa saya sebut begitu? itu karena awalnya saya mencoba" experimen menggabungkan system menu dropdown,yaitu saat kita mengarahkan kursor ke menu,maka menu akan keluar secara vertikal,nah,fungsi tersebut saya terapkan pada posting,jika kita mengarahkan kursor ke judul posting,maka akan keluar menu juga,tetapi menu tersebut juga sudah saya modif lagi terutama pada autoreadmorenya,sehingga kalau kalian perhatikan,disana ada thumbnail dan deskripsi posting,serta sudah ada tanggal,jumlah komentar dan kategori posting yang sudah saya atur sedemikian rupa agar strukturnya tidak hanya 1 kolom,tapi bisa 2 kolom dalam dropdown tersebut.



Dan yang kedua,Fitur accordion atau buka tutup pada sidebar menggunakan Accordion jquery UI yang saya rasa bebanya ringan karena codingan jquerry'a sederhana,penerapanya sudah saya sesuaikan otomatis pada setiap widget di sidebar,sehingga kita hanya memasukan widget seperti biasa,tidak perlu menambahkan kode html dari edit HTML.


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 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='#'>Contact</a><ul>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Email</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Categories</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='#'>Download</a></li>
<li><a href='#'>Lorem ipsum</a></li></ul></li>
<li data-role='dropdown'><a href='#'>Anime</a><ul>
<li><a href='#'>Winter</a></li>
<li><a href='#'>Summer</a></li>
<li><a href='#'>Spring</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Staf</a><ul>
<li><a href='#'>Staf a</a></li>
<li><a href='#'>Staf b</a></li>
<li><a href='#'>Staf c</a></li>
</ul></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Guestbook</a></li>
</ul>



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'/>


3. Setting tanggal posting.



(CTRL+S)




Semoga bermanfaat untuk semuanya,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyu minna-san~

Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Oreshura Blogger Template


Hello lagi Minna-san,kali ini saya mau sharing template terakhir untuk bulan ini,kenapa?karena minggu depan saya UAS ,dan belum belajar sama sekali @___@.


Screenshot

Template kali ini Bertema Robotic notes,tentunya buat yang sudah nonton anime ini sudah tau siapa gunvarrel,robot mecha~xD.pada template ini,apa yang unik?kalau kalian sudah melihat demo/mencoba template ini langsung,saat pertama melihat template ini,mata akan tertuju pada header yang bertuliskan please wait,apakah itu? itu adalah css animasi loader yang saya modifikasi agar selalu ada di header hanya sekitar 10 detik,lebih lengkap'a bisa dilihat disini.

Screenshot

lalu apa lagi yang aneh dari template ini?yang pastinya Style postingnya,bentuknya tidak biasa,tetapi tetap rapih.dan lagi jika kalian perhatikan thumbnail pada posting ukuran gambar hanya sekitar 70px,tetapi ketika kita arahkan kursor ke thumbnail,maka gambar akan membersar,tetapi untuk lebar gambar max 600px dan min 200px,sedangkan untuk tingginya auto,sehingga tinggi gambar tidak akan selalu sama tergantung pada gambar yang kita pasang.

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 ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

#menu1

<div class='menujohanes'><ul class='dark_menu'>
<li><a class='selected' href='#' title='Rss'>Rss</a></li>
<li><a href='#'>Contact</a><ul>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Email</a></li>
</ul></li><li><a href='#'>Categories</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='#'>Download</a></li>
<li><a href='#'>Lorem ipsum</a></li></ul></li>
<li><a href='#'>Anime</a><ul>
<li><a href='#'>Winter</a></li>
<li><a href='#'>Summer</a></li>
<li><a href='#'>Spring</a></li>
</ul></li>
<li><a href='#'>Staf</a><ul>
<li><a href='#'>Staf a</a></li>
<li><a href='#'>Staf b</a></li>
<li><a href='#'>Staf c</a></li>
</ul></li>
</ul></div>

#menu2

<ul class='dark_menu1'>
<li><a class='selected1' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a class='selected2' href='#' title='Home'>Contact</a></li>
<li><a class='selected3' href='#' title='Home'>About</a></li>
<li><a class='selected4' href='#' title='Home'>Sitemap</a></li>
<li><a class='selected5' href='#' title='Home'>Download</a></li>
</ul>



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'/>


3. Setting Social media facebook,twitter,g+,Rss

<ul id='tbisose'>
<li><a class='icon facebook' href='http://www.facebook.com/halaman fan page facebook/'/></li>
<li><a class='icon twitter' href='http://twitter.com/username/'/></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'/></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/alamat feed rss'/></li>
</ul>

Selamat mencoba,semoga bermanfaat,arigatou gozaimasu minna-san~
sampai jumpa bulan depan~





Note:
-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Robotic Notes Blogger Template


Hello minna~ ^^
Template kali ini akan menambah daftar nama tema template blogger vocaloid,yaitu Gumi megpoid yang merupakan karakter suara synthesizer dari software vocaloid2 sama halnya seperti Hatsune Miku. karakter ini mempunyai suara yang khas dan unik, dan bisa saya katakan suaranya paling bagus dan stabil, oleh karena itu banyak sekali lagu" yang dicoba covering oleh Gumi,dan hasilnya sangat bagus sekali,misalkan lagu cover dari Kyary Pamyu Pamyu yang berjudul Candy-candy.

Next,mengenai template ini sendiri menggunakan warna dasar Hijau dan orange,karena Gumi Dikarakterkan seperti wortel,sama halnya seperti hatsune miku si daun bawang :v. lalu untuk mengenai Headernya, saya terapkan header dan slider(shiroi) menjadi satu. kenapa,karena awalnya jika saya pikir" kalau udah ada gambar header besar lalu ditambah slider takutnya bisa berat, oleh karena itu header saya buat posisinya diatas slide (melayang/position:absolute;). sehingga Slider itu sendiri dapat dianggap sebagai header, tetapi disini hanya digunakan 3 slide beserta deskripsinya juga,tombol navigasinya pun dibuat menjadi sederhana. bisa saja sih kalau mau nambah slide menjadi 4-100. tetapi saya sarankan untuk tidak menambahkan slide lagi karena bisa terlalu berat.
jadi saya rasa 3 slide saja sudah cukup~xD



Screenshot


Responsive mode


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.

<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>

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. Pengaturan Slide header
<div id='featured'>
<ul class='ui-tabs-nav'>
<li class='ui-tabs-nav-item ui-tabs-selected' id='nav-fragment-1'><a href='#fragment-1'/></li>
<li class='ui-tabs-nav-item' id='nav-fragment-2'><a href='#fragment-2'/></li>
<li class='ui-tabs-nav-item' id='nav-fragment-3'><a href='#fragment-3'/></li></ul>
<div class='ui-tabs-panel' id='fragment-1' style=''>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTRyO82s076xBpYDsHW7IfAf-aeAcknA1hHg-sDn9Wyt0gN3u7gVQnVO-mPjI1o9s1u7xm3-2cvgQy5-NY-TapB91O5ntJkbXGilhmjDVGnpxXgjnO8zG4pN2ZtNNQ2F3xHL0bouHYMQ/s1600/slide1.jpg'/>
<div class='info'><h2><a href='#'>Gumi</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales.</p>
</div>
</div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-2' style=''>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidTNseDV1ETwGUI98neOMbT5rrhkXyNkJ2UTDfbGk1HuQ4bPj4y7fMU5-PSZRZvBiuQbuZAW8oU3E7_xA8RgGOMPTom2AexgHMCwB3RoGinrEFS4U3-2aa_J953xkdD5FZHvkVCLZSdg/s1600/slide2.jpg'/>
<div class='info'><h2><a href='#'>Gumi</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales.</p>
</div>
</div>
<div class='ui-tabs-panel ui-tabs-hide' id='fragment-3' style=''>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ6t3Bb6i8IpBn3dg4XV2qp1_gOqOTttOUldsx_M2G58WMb_SPja92SG4qiyLPRbAFXo1opfz1ywdTy8m7QKidlOSMRb3oPD1kZmuYRdKslHUurRojdhw51S7iO6xUhUwN9Ma2ejI7iQ/s1600/slide3.jpg'/>
<div class='info'><h2><a href='#'>Gumi</a></h2>
<p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales.</p>
</div>
</div></div></div>
*Keterangan :
Merah: Judul Slider
Biru : Deskripsi(yang kecil )
Orange : Ganti tanda pagar # dengan alamat link yang ingin dituju
Hijau : Url gambar slider


Tertarik dengan Gumi 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 Gumi Vocaloid~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

Gumi Vocaloid Blogger Template


Template terakhir bulan ini yaitu L-On Blogger template,tema yang diambil dari Anime K-ON (けいおん! Keion) yang bercerita mengenai empat siswi Sekolah Menengah Atas Sakuragaoka di Jepang yang bergabung dengan kegiatan ekstrakurikuler klub music pop, diantaranya adalah Yui Hirasawa, Ritsu Tainaka, Mio Akiyama, Tsumugi Kotobuki dan Azusa Nakano .cerita lebih lengkapnya dapat dibaca disini

Sama seperti template sebelumnya To Aru Kagaku no Railgun Blogger Template menggunakan system posting CSS3 :nth-child() Selector yang memungkinkan ukuran posting dapat berbeda-beda ,posisinya saya sudah atur sedemikian rupa agar posting urutan ke 1,4 dan 7 mempunyai ukuran paling besar dan posisinya berada ditengah, dan untuk urutan posting ke 2,3,5,6,8 dan 9 berada di sebelah kiri dengan ukuran yang sama dengan sidebar. dan untuk urutan posting ke 10 dan seterusnya ukuran full 100% tanpa gambar (default).




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 K-ON 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 K-ON!!~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




K-ON!! Blogger Template


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

To Aru Kagaku no Railgun Blogger Template


Hyperdimension Neptunia the Animation blogger template,template kali ini tema'a diambil dari tema Anime Hyperdimension Neptunia yang awalnya merupakan seri game ps3 dan masih 1 perusahaan dengan anime Date a Live.Hyperdimension neptunia menceritakan tentang sebuah Gamindustri (Geemugyoukai). Dimana ada Makhluk yang disebut Dewi penguasa negara di dunia yang tak nyata. 4 Dewi penjaga negara: Planeptune, Lastation, Lowee dan Leanbox yang sudah membuat perjanjian untuk bekerja sama.



Karakter utama pada anime ini yaitu Neptune, vert, Noire dan Blanc. Anime ini sendiri saya rasa ceritanya sudah di skip jauh sekali sampai karakter-karakter dari Hyperdimension Neptunia mk2 ada di animenya yaitu Nepgear, Uni, Ram, dan Rom. lebih lengkap mengenai neptunia dapat dibaca Wikipedia

Mengenai template ini,karakter yang saya gunakan Adalah neptune dan sisternya nepgear dengan warna dasar ungu, putih dan pink .___.
tentu saja mungkin template tidak terlalu cocok untuk laki-laki karena terlalu kawaii & moe~xD ,tetapi karena inilah jarang ada template seperti ini~ lol
Dasar pada template ini masih sama dengan template sebelumnya K-ON ,tetapi tidak responsive. Tampilan postingnya saya buat lebih sederhana dengan kotak search, social media, 1 menubar, 1 sidebar dan 3 kolom footer, pada postingan teratas memiliki ukuran full 100% dan urutan posting ke dua dan seterusnya memiliki ukuran 50% sehingga menjadikan posting dengan 2 kolom. Feature pada template ini, masih sama pula, hanya saja pada bagian related post widget pada halaman posting saya ganti dengan link list sederhana. karena related post dengan thumbnail terkadang tidak muncul pada blog" tertentu dan masih belum tau apa masalahnya karena ada yang bisa dan ada yang tidak bisa, entah pengaruh dari setting blogger atau template itu sendiri yang saya rasa tidak pernah ada masalah .__.
feature lainnya yaitu tombol back to top.


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 Hyperdimension Neptunia 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.






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

Hyperdimension Neptunia Blogger Template