Hello teman-teman,pada kesempatan ini,akhirnya ada waktu luang untuk
membuat template blogger lagi.Tema dari template ini adalah Kurumi
Tokisaki yang merupakan tokoh karakter dalam sebuah Anime "Date A Live"
dan juga kurumi merupakan tokoh favorite saya~xD
sedikit tentang kurumi;Kurumi sendiri mempunyai karakter yang bisa
dibilang susah ditebak,bisa kawaii,psycho,Gothic Lolita dan kurumi
adalah spirit yang paling berbahaya,karena diduga telah banyak
menjatuhkan korban lebih dari 10.000 orang. wow xD
Selanjutnya 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.
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/
Intinya,untuk mengganti warna,kalian hanya harus mengganti kode hexa warnanya,begitu juga paga rgba color :)
*Bonus PSD File Header Kurumi~xD
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~
.jpg)
