IC-507 s4 Beauty Blogger Template

Baru kemarin saya post template dengan nama IC-507 s4 dengan warna hitam namun cukup nyaman di lihat . Tapi , ternyata ada saja dan mungkin banyak orang yang kurang tertarik dengan warna hitam . Dan sempat ada beberapa orang yang bilang bahwa IC-507 Clone Series itu terlalu gelap :v .  Dan juga kemarin ada pengunjung yang nanya , "Bisa gak kalau bikin yang putihan ?" Dan kebetulan saya memang lagi menyiapkannya kemarin itu , biarpun badan saya memang lagi jurang fit sekali .

Dan sekarang saya sudah menyelesaikannya untuk seri putih dari IC-507 Clone Series ini .
Sebenarnya template ini saya ambil dari template sebelumnya yakni IC-507 s4 yang saya ganti jadi silver ( bukan putih ) . Dan itu saya lakukan karena lagi minim ide :v .

Dan this is it !

IC-507 s4 Beauty

Preview IC-507 s4 Beauty

Features

Untuk fitur fiturnya masih sama dengan seri gelapnya , hanya ada beberapa element yang saya kurangi dan sempurnakan .

Custom

Anda tentu masih bisa mengedit semua hal yang ada di dalam template ini untuk disesuaikan dengan selera anda , dengan catatan tidak menghilangkan Credit Link sebagai penanggung jawab Konten , karena ini sifatnya Clone !

Setting

Disini ada beberapa hal yang perlu dimengerti dalam setting dan ganti URL pada template ini .

Menu

Ini bagian yang paling menyebalkan menurut saya . Mungkin anda bisa menemukan jalan keluar dan ide yang lebih baik dari apa yang saya lakukan .
Untuk mengedit Link URL pada menu template ini tidak hanya pada HTML nya saja melainkan dengan Css nya juga . Dan untuk mengeditnya , silahkan cari Css dibawah ini

#navigation a[href='/'] {
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuMempXhSg6DsMWdv6S-ooCRnWPaxT2I3DNWMR6QW2XYu-SpvYYNOHWkyARFu_tYrkfNWaa5bynSjGvmAgOJeykUldHArq6rYsmuI8FihptfsMlMnsAR_QOesO2cdL6cnW9fGbYMKtzWAV/s1600/homeNavText-Over.png);
}
#navigation a[href='/p/who.html'] {
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAmAHe8YxtjM8Qx9qJRvpgrJyQM5Mbc3tnZGWMqe89KPpG8B5r81kz-lBUSVTZUMFO5Q1tH5QpXKnXFJKhWGWeL9v-BE-m5WIfHceKyNh-COhK7Ib6SbiLXtALKt-2BVtvgi29sk90shjT/s1600/whoNavText-Over.png);
}
#navigation a[href='/search/label/blog'] {
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPegDF-9ly1i2_6DSYn6NdA0O-Xrtbl2_RaAZvpFakLq_dFrwgHhz0Fj-M8P65_TEq5Otmqh0pXAisHSQOUNJGqbHCe89LsB230M9Dqv6rzZM0tGj6c2E9aay49FJzo7LCMzE490M5GaB/s1600/blogNavText-Over.png);
}
#navigation a[href='/p/portfolio.html'] {
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAd8XUAehiDpNNUrbkukAnFwphG2GevHG2TkmbAnISlWAKykaUyJSAZsffBUTiN8d6PRXaGL0bYN84ltqB0RIy3qTSzi-YJ5KQ27_OJAMsGLqsuuo56El05MUnohHhOQRf3pIGCPJ0uhqG/s1600/portfolioNavText-Over.png);
}
#navigation a[href='/p/photos.html'] {
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMvPzPjyOUmIEJkaNVvPn50AAXkjDJ2Za1AZC9rhagot5_JdsiwIHC8PeOhvprea4MwSDCOxVROAtxHs5rzrfXbElN_bnUC7rOHazjj4jfMSZHu1oYR14r64Z9Nf2DykuPnnYnqA09YbX/s1600/photosNavText-Over.png);
}
#navigation a[href='/p/projects.html'] {
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMgLGQX1fSBEMktu4j2u7E9EK6QOZ4tF2szpth1_MjOZSdczHeiWPtlbZrZE7QbfEx9BLDyXCf1-7RKD43GGp8sBq0gA3v5bKL6aa91Ppjpyxh7aN5_bHkubNd9RHUkZ3hSYwzqpGakz91/s1600/projectsNavText-Over.png);
}
#navigation a[href='/p/contact.html'] {
 background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2zgfz3Wslbr4SSygSUGFWUwh6E9ZBRv6o9mZeNBxvyHJ8Nsf7tZGugYBppA5-vS5pVf4jkAFtArkTxn2W2grRCCeHeHm6f96hqlQCP1iTUk6VtMellQMRR6zisREN8XyNIBCojbrayav/s1600/contactNavText-Over.png);
}

Ganti URL yang ada di [href='...'] .
Info : tanda "/" dimaksudkan Link Blog anda . Misal "/p/contact.html" itu sama dengan "http://url-blog-anda.blogspot.com/p/contact.html" .

Setelah selesai edit di Css , selanjutnya edit di htmlnya . Temukan kode dibawah ini

<div id='navigation'>
  <ul>
    <li class='first active'><div class='line'><a href='/' title='Home: Return'><span>Home</span></a></div></li>
    <li class='link '><div class='line'><a href='/p/who.html' title='Who is: Thisman?'><span>Who</span></a></div></li>
    <li class='link '><div class='line blognav'><a href='/search/label/blog'><span>Blog</span></a> </div></li>
    <li class='link '><div class='line'><a href='/p/portfolio.html' title='Portfolio: Design, Graphics, Illustration'><span>Portfolio</span></a></div></li>
    <li class='link '><div class='line'><a href='/p/photos.html' title='Photography: Portfolio'><span>Photos</span></a></div></li>
    <li class='link '><div class='fresh'><div class='line'><a href='/p/projects.html' title='Projects: Everything else'><span>Projects</span></a></div></div></li>
    <li class='link '><div class='line'><a href='/p/contact.html' title='Contact: Thisman'><span>Contact</span></a></div></li>
  </ul>
</div> 

Pastikan URL di Css dan HTML sama ! .

Social Menu

Temukan kode dibawah ini

<ul id='sociallinks'>
<li class='twitter-link'><a href='#' target='_blank' title='Follow me on Twitter'><span>Twitter</span></a></li>
<li class='flickr-link'><a href='#' target='_blank' title='View my Flickr photos'><span>Flickr</span></a></li>
<li class='googleplus-link'><a href='#' target='_blank' title='Circle me on Google+'><span>Google+</span></a></li>
<li class='vimeo-link'><a href='#' target='_blank' title='Watch my Vimeos'><span>Vimeo</span></a></li>
</ul>

Ganti tanda "#" dengan URL sosial media milik anda .

Info Template IC-507 s4 Beauty

Template ini masih sama dengan edisi sebelumnya yakni IC-507 s4 , dan anda dapat menemukan keterangan template di artikel tersebut .

Mungkin itu saja dari saya saat ini untuk bagi bagi templatenya , dan semoga apa yang saya kerjakan dan saya bagikan bermanfaat .

Demo Download

Author : Ichi Hikaru

Share this Article

Related Posts