Template Kurumi Tokisaki

Wow, Johanes Mengeluarkan Template Baru XD
Keren Sob, Yg mau Re-Design Coba aj Hasilnya Pasti Bagus^^


Mengenai template ini,Template sederhana dengan 2 kolom posting,2 sidebar dan dilengkapi Popular post widget dengan thumbnail.
Pada template ini,seperti biasa saya selalu mencoba membuat style yang baru,keunikan itu terletak pada style posting yang jarang ditemui oleh blogger template lain.jika kita arahkan kursor pada posting,gambar pada posting akan membesar dengan efek transisi css3,dan deskripsi posting akan hilang lalu menampilkan tanggal posting,penulis blog,jumlah komentar dan kategori posting.awalnya pada template ini,backgroundnya menggunakan gambar/pattern,tetapi karena saya rasa tidak cocok,jadi saya menggunakan css3 gradient untuk diterapkan sebagai background pada template ini,bagi teman teman yang masih tidak tahu cara mengganti warna/jenis background(gambar,warna solid,gradient) bisa dibaca dibawah postingan ini.

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='#'>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 Kurumi Tokisaki 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


4. Cara mengganti background gradient.


cari css dibawah ini

body {
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: rgb(226,220,222); /* Old browsers */
background: -moz-linear-gradient(top, rgba(226,220,222,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,220,222,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(226,220,222,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(226,220,222,1) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(226,220,222,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
font-family: 'Open Sans', sans-serif;
color: #222;
overflow-x: hidden;
font-size: 13px;
}


Jika kalian perhatikan 6 css background diatas,masing" mempunyai fungsi untuk browser tertentu,mengapa?karena tidak semua css dapat bekerja baik pada seluruh browser,oleh karena itu,jika klian ingin mengganti background,kalian bisa menggunakan cara dibawah ini,Contoh:


1. background warna solid:
dengan hexa:
background:#000;

dengan rgba:
background:rgba(255,255,255,1);

2. background dengan gambar:
background:url(http://alamatgambar.jpg);

3.Background dengan Gradient.
kalian bisa menggunakan css gradient generator.
http://www.colorzilla.com/gradient-editor/

-Lebih lanjut mengenai background,kalian bisa baca artikel Di Blog Johanes:
http://djogzs.blogspot.com/2010/11/tips-memilih-warna-design-blog.html

-Mengenai rgba color
http://djogzs.blogspot.com/2012/01/tips-design-menggunakan-css3.html


Intinya,untuk mengganti warna,kalian hanya harus mengganti kode hexa warnanya,begitu juga paga rgba color :)

Download via MediaFire

Demo

*Bonus PSD File Header Kurumi~xD

Download

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~

Sumber : Djohanes

Tweet