IC-507 s2.0 Blogger Template

IC-507 s2.0 Blogger Template - Haii para blogger semuanyaaa >.< ... salam hangat selalu meskipun sekarang bukan hangat lagi , tapi pannaasss :3 ...
Di posting kali ini saya akan bagi bagi template lagi #yeeeee \ ^A^ / ...
Yap , kali ini template IC-507 s2.0 Blogger Template Gratisss !!! woooww #so wow banget -_- .

Ehhmmm ... setelah sebelumnya saya share untuk versi s1 nya yang bisa anda download disini , sekarang saya share untuk update nya yakni bersi s2.0 nya ... mungkin nanti bakal sampe s4 :v ... she is my girl touch touch :3 ...

Yap ... Ini dia tampilanyaa ...

Apa bedanya dengan versi sebelumnya ???
Disini saya menambah beberapa element agar terlihat lebih sangar dan garang dengan warna hitam gothic nya .

Homepage

Untuk Homepage sendiri saya menambah element LOGO yang mungkin cocok buat para blogger yang narsis dan ingin menampangkan logo blognya gede2 . Dan Homepage ini anda juga tidak akan lagi melihat ada Header yang mengganggu .

Include

Untuk versi ini saya tidak menambahkan banyak hal yang bisa digunakan dengan optimal dan saya pikir itu tugas pemilik blog yang melakukannya . Bukan si tukang bikin template . Dan lagi saya juga bukan tukang bikin template :v ... Cuma hobi ngoprek , dan itu melelahkan .

Di versi ini saya sudah menyempurnakan yang mungkin belum sempurna untuk bagian widget . Jika di versi sebelumnya widgetnya berwarna aneh dan banyak yang ukurannya tidak sesuai , mungkin versi ini bisa digunakan untuk mengganti versi lama yang sudah anda download .

Button

Selain itu saya juga menambahkan Framework GitHub button yang bisa anda pelajari cara menggunakannya disini .

Custom

Di artikel ini saya akan menjelaskan juga mengenai cara mengganti dan menambah bagian bagian yang mungkin ingin anda ganti seperti Logo dan semacamnya .

Logo

Untuk mengganti logo , besar di homepage itu , silahkan cari kode dibawah ini

.home-content {

    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcvv3VDtkPi7vo-dIGAVvQjBxG2hVTSL85IqWZEtl1zeM26N3W6KX7sDMLN6D3NoFlnenudIZXkx_5bZvKBJESYCtUpWjuTtvpdsoM1j2LK5DMumnowNgFN2lhAuyCuMMed1GArpUOtqc/s1600/homepage+custom.PNG)center no-repeat;

Sesuaikan saja ukurannya dengan kebutuhan . Dan secara defaultnya Logo besar ini bukan berupa link , jadi hanya sebuah plank merk saja . Dan silahkan di Custom sesuai kebutuhan .

Recent Post

Untuk membuat Recent Post dengan tampilan thumbnail seperti yang ada di Demo site nya , silahkan ikuti panduannya dibawah ini
1. Buka menu layout di dasbor Blogger
2. Tambah / Add Gadget
3. Pilih HTML/JavaScript
4. Dan letakkan Script ini di dalamnya .

<style type='text/css'>

.bp_item_thumb {

background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVrjs8vSAxScpRuQb9LJrDp6XzO9SF-FYARGfxbgvxYto41jbAz7b3KOnHBVqoe2ABtJ29Ln5fJKOWwGc0sk3uqk2Xp3VDbDTC3Kv-IsH6z7rBEEsUeT2L9hsXcYy405wJGHachFjY42k/s1600/zoom.png) no-repeat center;

position: relative;

display: block;

margin:9px;

}

.bp_item_thumb img {

border: 1px solid #222;

text-decoration: none;

background-color: rgba(30,30,30, 0.4);

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAADd0lEQ&#8230;fQUi1sjtuz5fP+fB7pC6TvkF5Bmnyrz1Cctn7/fiIiU/gG9i5uLQnuYhUAAAAASUVORK5CYII=);

box-shadow: 0 1px 3px rgba(0,0,0, 0.75);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.75);

padding:5px;

}

.bp_item_thumb img:hover{

opacity: 0.3;

background-color: rgb(255, 255, 255,);

-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

-webkit-transition: all 0.6s ease-in-out;

}

</style>

<div id='bp_recent'></div>

<script style='text/javascript' src='https://lioneldandy.googlecode.com/files/xc-recentpost.js'></script>

<script style='text/javascript'>

var numberOfPosts = 9;

var showPostDate = false;

var showSummary = false;

var titleLength = 0;

var showCommentCount = false;

var showThumbs = true;

var showNoImage = true;

var imgDim = 70;

var imgFloat = 'left';

var myMargin = 5;

var mediaThumbsOnly = true;

var showReadMore = false;

</script>

<script src='http://ic-507s2.blogspot.com/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>

5. Ganti tulisan yang saya buat besar dengan URL blog anda . Ganti juga angka yang saya perbesar , itu untuk mengatur berapa post thumbnail yang akan ditampilkan .

6. Sekarang Simpan .

Untuk Setting lain lainnya , saya pikir itu sama saja seperti yang sudah sudah , misalnya pada bagian menu ,anda hanya perlu mencari kode

<div id='top-nav'>

<ul>

  <li><a href='/'>Home</a></li>

<li><a href='#'>About</a></li>

<li><a href='#'>Sitemap</a></li>

<li><a href='#'>Privacy Policy</a></li>

<li><a href='#'>Disclaimer</a></li>

<li><a href='#'>Contact</a></li>

<form action='/search' class='form-wrapper' method='get'>

 <input id='a' name='q' placeholder='Search...' type='text'/>

 <button type='submit'>GO</button>

</form>

</ul>

</div>

Dan kemudian mengganti linknya dengan URL yang anda kehendaki .

Hanya itu saja . Over all , memang template ini masih sama dimana saya hanya menambah sedikit sekali element dan menyesuaikan warna di bagian widget yang sebelumnya terlupakan .

Info Template

Template ini masih sama dengan yang sebelumnya hanya saja telah diperbarui .
Jika masih ada bugs yang anda temukan , silahkan laporkan masalah itu melalui komentar atau kontak secara pribadi .

Dan semoga template ini bermanfaat untuk anda ...

Demo Download

Author : Ichi Hikaru

Share this Article

Related Posts