D2 Black Orange Animation Vol 3 Template

Diposting oleh Unknown di 06.08 . Kamis, 14 November 2013
Label: , , , , , ,
Assalamu Alaikum Wr.Wb.
Setelah kemarin saya posting 2 template serupa yaitu D2 Blue Color dan D2 GRID Pink Color Vol.2 dan kali ini saya akan share lagi template terbaru, yang saya namakan D2 Black Orange Animation Vol.3, dimana template ini hanya lanjutan dari template saya D2 Blue Color dan D2 Grid Pink Color Vol.2. baiklah untuk contoh sobat bisa lihat gambar berikut.


Feature :
  • Sweet Menu Bounce.
  • Animation Text.
  • Sosial Icon.
  • 2 Sidebar (Left and Right).
  • 1 Column Footer.
  • Cool Color Black Orange.
  • 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 Black Orange Animation Vol.3 Blogger Template:::

1. Setting Sosial Icon

Go to Layout > Edit HTML and find this code :

<div id=total-wrapper>
 <div id=interwebz-wrapper>
<!-- Start - Social Links  -->
  <ul class=interwebz>
   <li class=icon-feed>
     <a expr:href=data:blog.homepageUrl + &quot;feeds/posts/default&quot;>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>
<!-- End - Social Links  -->

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;>
<!-- ============= Slider Edit Start =============== -->
<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>
<!-- ============= Slider Edit End =============== -->
  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&amp;count=2 type=text/javascript/>

Jika ada yang ingin ditanyakan silahkan berkomentar diforum.!

0 komentar:

Langganan: Posting Komentar (Atom)

Posting Komentar