D2 GRID Pink Color Vol 2 Template ~ corong ilmu

Assalamu Alaikum Wr.Wb.
Kali ini saya akan share template terbaru, yang saya namakan D2 GRID Pink Color Vol.2, dimana template ini hanya lanjutan dari template saya D2 Blue Color. untuk perbedaanya hanya penghapusan footer sja dan menambah lebar layout template,selain itu sya juga menambahkan beberpa code css snippet sperti (Blockquote, dan code snippet) selebihnya tetap sama dengan fitur template D2 Blue Color, dan yang paling penting Template ini terinspirasi dari tmn saya Dewi ato bisa kunjungi blog dia disini... jka bkn dia pst gk share template lagi deh.wkwkwkk,.. baiklah untuk contoh sobat bisa lihat gambar berikut.

Feature :

Sweet Menu.
Sosial Icon.
2 Sidebar (Left and Right).
1 Column Footer
Cool Color Pink.
Custum Populart Post
Threaded Comments Keren
Gallery Image Slider.
Smoot Scroll Back to Top
Tweet Update.
dll..

Nah Jika sobat menyukainya, silahkan follow my blog terlebih dahulu yah..!! dan dukung utta untuk trus berkreasi.!

Dan yang paling penting silahkan beri komentar anda mengenai template ini.trims

Setting Layer D2 GRID Pink Color Vol.2 Blogger Template:::

1. Setting Sosial Icon

Go to Layout > Edit HTML and find this code :

<div id=total-wrapper>
<div id=interwebz-wrapper>

<ul class=interwebz>
   <li class=icon-feed>
     <a expr:href=data:blog.homepageUrl + "feeds/posts/default">Feed</a>
   </li>
   <li class=icon-facebook>
     <a href=http://facebook.com target=_blank>Facebook</a>
   </li>
   <li class=icon-twitter>
     <a href=http://twitter.com target=_blank>Twitter</a>
   </li>
   <li class=icon-gplus>
     <a href=https://plus.google.com target=_blank>GPlus</a>
   </li>
   <li class=icon-youtube>
     <a href=http://youtube.com target=_blank>Youtube</a>
   </li>
   <li class=icon-flickr>
     <a href=http://flickr.com target=_blank>flickr</a>
   </li>
   <li class=icon-lastfm>
     <a href=http://last.fm target=_blank>Last.fm</a>
   </li>
   <li class=icon-instagram>
     <a href=http://instagr.am target=_blank>Instagram</a>
   </li>
   <li class=icon-skype>
     <a href=http://www.skype.com target=_blank>Skype</a>
   </li>
</ul>

2. Setting Menu

Go to Layout > Edit HTML and find this code :

<div id=navbarmenuleftx>
<ul id=navx>
<li><a href=/>Home</a></li>
<li><a href=#YOURLINK>Menu 1</a>
<ul>
<li><a href=#YOURLINK>Menu 1.1</a>
<ul>
<li><a href=#YOURLINK>Menu 1.1.1</a></li>
<li><a href=#YOURLINK>Menu 1.1.2</a></li>
<li><a href=#YOURLINK>Menu 1.1.3</a></li>
<li><a href=#YOURLINK>Menu 1.1.4</a></li>
</ul>
</li>

<li><a href=#YOURLINK>Menu 1.2</a>
<ul>
<li><a href=#YOURLINK>Menu 1.2.1</a></li>
<li><a href=#YOURLINK>Menu 1.2.2</a></li>
<li><a href=#YOURLINK>Menu 1.2.3</a></li>
<li><a href=#YOURLINK>Menu 1.2.4</a></li>
</ul>
</li>

<li><a href=#YOURLINK>Menu 1.3</a>
<ul>
<li><a href=#YOURLINK>Menu 1.3.1</a></li>
<li><a href=#YOURLINK>Menu 1.3.2</a></li>
<li><a href=#YOURLINK>Menu 1.3.3</a></li>
<li><a href=#YOURLINK>Menu 1.3.4</a></li>
</ul>
</li>
</ul>
</li>

<li><a href=#YOURLINK>Menu 2</a>
<ul>
<li><a href=#YOURLINK>Menu 2.1</a>
<ul>
<li><a href=#YOURLINK>Menu 2.1.1</a></li>
<li><a href=#YOURLINK>Menu 2.1.2</a></li>
<li><a href=#YOURLINK>Menu 2.1.3</a></li>
<li><a href=#YOURLINK>Menu 2.1.4</a></li>
</ul>
</li>

<li><a href=#YOURLINK>Menu 2.2</a>
<ul>
<li><a href=#YOURLINK>Menu 2.2.1</a></li>
<li><a href=#YOURLINK>Menu 2.2.2</a></li>
<li><a href=#YOURLINK>Menu 2.2.3</a></li>
<li><a href=#YOURLINK>Menu 2.2.4</a></li>
</ul>
</li>

<li><a href=#YOURLINK>Menu 2.3</a>
<ul>
<li><a href=#YOURLINK>Menu 2.3.1</a></li>
<li><a href=#YOURLINK>Menu 2.3.2</a></li>
<li><a href=#YOURLINK>Menu 2.3.3</a></li>
<li><a href=#YOURLINK>Menu 2.3.4</a></li>
</ul>
</li>
</ul>
</li>

<li><a href=#YOURLINK>Menu 3</a>
<ul>
<li><a href=#YOURLINK>Menu 3.1</a>
<ul>
<li><a href=#YOURLINK>Menu 3.1.1</a></li>
<li><a href=#YOURLINK>Menu 3.1.2</a></li>
<li><a href=#YOURLINK>Menu 3.1.3</a></li>
</ul>
</li>

<li><a href=#YOURLINK>Menu 3.2</a>
<ul>
<li><a href=#YOURLINK>Menu 3.2.1</a></li>
<li><a href=#YOURLINK>Menu 3.2.2</a></li>
</ul>
</li>

<li><a href=#YOURLINK>Menu 3.3</a>
<ul>
<li><a href=#YOURLINK>Menu 3.3.1</a></li>
</ul>
</li>
</ul>
</li>

<li><a href=#YOURLINK>Menu 4</a></li>
<li><a href=#YOURLINK>Menu 5</a></li>
<li><a href=#YOURLINK>Menu 6</a></li>
<li><a href=#YOURLINK>Menu 7</a></li>
<li><a href=#YOURLINK>Menu 8</a></li>
<li><a href=#YOURLINK>Menu 9</a></li>
</ul>

3. Setting Slider Image (1180x350) :

Go to Layout > Edit HTML and find this code :

<div class=jd-slideshow-wrap id=jd-slideshow-1>
<div class=jd-slideshow style=width:940px; height:300px;>

<div class=ss-item style=background-image: url(URL-IMAGE1);>
</div>

<div class=ss-item style=background-image: url(URL-IMAGE2);>
</div>

<div class=ss-item style=background-image: url(URL-IMAGE3);>
</div>

<div class=ss-item style=background-image: url(URL-IMAGE4);>
</div>

<div class=ss-item style=background-image: url(URL-IMAGE5); >
</div>

<div class=ss-item style=background-image: url(URL-IMAGE6);>
</div>

<div class=ss-item style=background-image: url(URL-IMAGE7);>
</div>

<div class=ss-item style=background-image: url(URL-IMAGE8);>
</div>

<div class=ss-item style=background-image: url(URL-IMAGE9);>
</div>

<div class=ss-item style=background-image: url(URL-IMAGE10);>
</div>

4. Setting Tweet Update :

Go to Layout > Edit HTML and find this code :

<div class=tweet>
<div id=tweets-bg/>
<ul id=twitter_update_list>
<li style=display:none;/>
</ul>
<script src=http://twitter.com/javascripts/blogger.js type=text/javascript/>
<script src=http://twitter.com/statuses/user_timeline/uttakracker15.json?callback=twitterCallback2&count=2 type=text/javascript/>

Jika ada yang ingin ditanyakan silahkan berkomentar diforum.!

corong ilmu

Kamis, 07 November 2013

D2 GRID Pink Color Vol 2 Template

0 komentar:

Posting Komentar

Popular Posts

Mengenai Saya

Arsip Blog