Download Template Blogger Flat Green Shiba Miyuki Mahouka

Setelah lama saya tidak berbagi template, kali ini saya akan berbagi kepada kalian sebuah template blogger anime Mahouka Koukou no Rettousei dengan gaya flat secara free alias gratis. Dengan warna hijau laut dengan sedikit kolaborasi dengan warna flat lainnya, template ini menjadi sangat simple dan cocok untuk kalian para blogger pecinta anime. Dan dengan tambahan wajah imut Miyuki template ini semakin perfect untuk kalian. Template ini bukan 100% buatan saya. Namun, saya hanya me-redesign template dari Blog Zulfikar. Berikut ini adalah beberapa gambaran tentang template ini :

• Template 2 kolom.
• Desain flat style minimalist.
• Warna didominasi putih dan hijau laut.
• Visitor friendly.
• SEO friendly.
• Fast load.
• Auto read more.
• Menu navigasi keren.
• Social button keren.
• Share button keren.
• Related post keren.
• Anime bergeser di header.
• Slider keren.
• Dan masih banyak lagi.

Screenshot

Untuk tampilan tata letak, saya jamin rapi seperti tampilan luarnya

Demo Download
( Nama File : File Template 006 )

Cara Memodifikasi Navigasi :

Untuk mengganti link menu navigasi, kalian bisa mengedit kode di bawah ini :

• Menu Navigasi Atas :

<!-- primary navigation menu start -->
<ul class='nav-menu'>
<li><a href='http://www.yondarkness.com/' rel='dofollow'>About</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow'>Contact Us</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow'>Privacy Policy</a></li>
<li><a href='http://www.yondarkness.com/' rel='dofollow'>Disclaimer</a></li>
</ul>
<!-- primary navigation menu end -->

• Menu Navigasi Bawah : 

<ul>
      <li><a expr:href='data:blog.homepageUrl'><span class='icon-home'/></a></li>
 <li><a href='http://freenum.blogspot.com/' rel='dofollow' title='Software'>Software</a></li>
 <li><a href='http://www.yondarkness.com/' rel='dofollow' title='Tutorial'>Tutorial <span class='icon-angle-down'/></a>
        <ul class='dropdown'>
 <li><a href='http://www.yondarkness.com/' rel='dofollow' title='Blog'>Blog</a></li>
 <li><a href='http://www.yondarkness.com/' rel='dofollow' title='Photoshop'>Photoshop</a></li>
</ul>
 </li>
 <li><a href='http://www.yondarkness.com/' rel='dofollow' title='Anime Complete'>Anime Complete <span class='icon-angle-down'/></a>
        <ul class='dropdown'>
 <li><a href='http://www.yondarkness.com/' rel='dofollow' title='Captain Earth'>Captain Earth</a></li>
 <li><a href='http://www.yondarkness.com/' rel='dofollow' title='Mahouka Koukou no Rettousei'>Mahouka Koukou no Rettousei</a></li>
 <li><a href='http://www.yondarkness.com/' rel='dofollow' title='Nisekoi'>Nisekoi</a></li>
 <li><a href='http://www.yondarkness.com/' rel='dofollow' title='Seikoku no Dragonar'>Seikoku no Dragonar</a></li>
</ul>
 </li>
 <li><a href='http://www.yondarkness.com/' rel='dofollow' title='Staff'>Staff</a></li>
</ul>

Cara Memodifikasi Social Button :

Untuk mengganti link social button, kalian bisa mengedit kode di bawah ini :

<ul class='nav-social'>
<li><a class='fcb' href='https://facebook.com/pages/Yondarkness/372878842803751?ref=hl' rel='nofollow'><i class='fa fa-facebook-square fa-2x'/></a>
</li>
<li><a class='gpl' href='https://plus.google.com/118163047156925704991' rel='nofollow'><i class='fa fa-google-plus-square fa-2x'/></a>
</li>
<li><a class='twt' href='https://www.twitter.com/yondarkness/' rel='nofollow'><i class='fa fa-twitter-square fa-2x'/></a>
</li>
<li><a class='ytb' href='http://www.youtube.com/channel/UCHYYxQN554QPr1Ek_oklrVg' rel='nofollow'><i class='fa fa-youtube fa-2x'/></a>
</li>
</ul>

Cara Memodifikasi Slider Gambar :

Untuk mengganti gambar, title, dan deskripsi slider gambar, kalian bisa mengedit kode di bawah ini :

<ul>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='View my second image link'><img alt='description' src='http://www.presepe.jp/wp-content/uploads/2014/04/P0098653_2.jpg'/></a>
  <h3>Title Blog</h3>
<p>Description Blog</p>
</li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='View my second image link'><img alt='description' src='http://img2.blog.zdn.vn/52410700.jpg'/></a>
  <h3>Title Blog</h3>
<p>Description Blog</p>
</li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='View my second image link'><img alt='description' src='http://ftp.gameshot.net/article/2013_04/gsGA516acf1e683fcp1n5.jpg'/></a>
  <h3>Title Blog</h3>
<p>Description Blog</p>
</li>
<li><a href='http://www.yondarkness.com/' rel='dofollow' title='View my second image link'><img alt='description' src='http://3.bp.blogspot.com/-c2XNHHqwNkM/U0PrnP7WKEI/AAAAAAAACJY/TzpKtIuSreA/s1600/Image_004.jpghttp://img2.blog.zdn.vn/52269273.jpg'/></a>
  <h3>Title Blog</h3>
<p>Description Blog</p>
</li>
</ul>

Nah, itu dia templatenya. Jika ada error di template ini, tolong dilaporkan. Supaya saya bisa membetulkannya. Kalian boleh menggunakan template ini asalkan tidak menghapus link kreditnya. Hargai karya orang lain. Sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk meninggalkan komentar, join this site, dan klik tombol like di bawah ini.

Cara Membuat Anime Bergerak Dan Berubah Di Header Blog Dengan Css

Oke, kali ini saya akn berbagi kepada kalian sebuah tutorial blog tentang bagaimana caranya membuat anime bergerak atau bergeser dan juga berubah di header blog saat di hover atau di arahi mouse menggunakan css. Mungkin kalian sudah pernah melihatnya di template blog saya yang sebelumnya, Blue Madness. Nah sekarang saya akan membagikan cara membuatnya. Jika kalian masih belum tahu, kalian bisa melihat contohnya di link di bawah ini :

Demo

Bagaimana? Kalian tertarik? Jika kalian ingin membuatnya, kalian bisa ikuti langkah di bawah ini. Namun, saya sarankan untuk terlebih dahulu belajar mengenai dasar css dan html. Berikut ini adalah caranya :

• Pertama, buka dulu dasboard blog kalian.
• Masuk ke menu Template.
• Pilih Edit HTML.
• Cari kode ]]></b:skin>.
• Masukkan kode di bawah ini tepat di atas kode ]]></b:skin>.

div.Yondax {

background: url("http://i1273.photobucket.com/albums/y407/maskedx/smss_zps333f1dc9.png") no-repeat ;

-webkit-transition: all 560ms ease-out;

-moz-transition: all 560ms ease-out;

-ms-transition: all 560ms ease-out;

-o-transition: all 560ms ease-out;

transition: all 560ms ease-out;

margin:0px 0px 0px 300px;

position:absolute;

height: 200px;

width: 277px;

}

#header-wrapper:hover .Yondax {

margin:0px 0px 0px 490px;

opacity:0;

}

div.Yondax1 {

background: url("http://i1273.photobucket.com/albums/y407/maskedx/sms_zpsa1544df1.png") no-repeat;

-webkit-transition: all 560ms ease-out;

-moz-transition: all 560ms ease-out;

-ms-transition: all 560ms ease-out;

-o-transition: all 560ms ease-out;

transition: all 560ms ease-out;

margin:0px 0px 0px 405px;

position:absolute;

height: 200px;

width: 277px;

opacity:0;

}

#header-wrapper:hover .Yondax1 {

margin:0px 0px 0px 490px;

opacity:1;

} 

Keterangan :

Kode yang ITALIC adalah kode saat gambar di arahi mouse.

Kode yang berwarna KUNING adalah url gambar sebelum diarahi mouse. Kalian bisa menggantinya dengan url gambar yang kalian inginkan.

Kode yang berwarna ORANGE adalah kode lamanya transisi dalam micro second. Kalian bisa mengaturnya sesuai keinginan.

Kode yang berwarna UNGU adalah kode margin (Letak posisi) gambar. Kalian bisa mengaturnya sendiri.

Kode yang berwarna HIJAU adalah kode jenis posisi gambar. Kalian bisa menggantinya, namun saya sarankan untuk membuarkannya absolute.

Kode yang berwarna CYAN adalah kode ukuran tinggi gambar. Kalian sesuaikan dengan tinggi gambar yang kalian gunakan.

Kode yang berwarna BIRU adalah kode ukuran lebar gambar. Kalian sesuaikan dengan lebar gambar yang kalian gunakan.

Kode yang berwarna PINK adalah kode margin (Letak posisi) gambar saat di arahi mouse. Atur supaya berbeda dengan kode margin yang berwarna UNGU supaya ketika di arahi mouse gambar akan bergerak.

Kode yang BOLD adalah url gambar saat diarahi mouse. Jika kalian buat berbeda dengan url gambar yang berwarna KUNING maka gambar akan berubah saat di arahi mouse. Jika kalian samakan maka gambar hanya akan bergerak atau bergeser.

Saya sarankan untuk menyamakan kode yang mempunyai warna sama.

• Masih di Edit HTML, cari kode <header id="header-wrapper">. Jika tidak ada, carilah kode yang mirip.
• Masukkan kode di bawah ini tepat di bawah kode <header id="header-wrapper"> :

<div class='Yondax'/>

<div class='Yondax1'/>

•  Sebelum kalian simpan, kalian preview terlebih dahulu dan lihat apakah sudah pas atau belum. Jika belum, kalian bisa mengatur kodenya lagi.
• Jika sudah, sekarang tinggal kalian simpan.

Bagaimana? Sudah jadi bukan? Memang membingungkan, karena setiap template blog mempunyai ukuran dan kode yang berbeda beda. Oleh karena itu saya sarankan untuk terlebih dahulu mempelajari tentang dasar css dan html. sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk selalu mampir ke blog sederhana saya ini. Dan jangan lupa untuk selalu meninggalkan komentar dan klik tombol like di bawah ini.