Blog Archives Manual

Memasang Blog Archives Manual
Blog arsip adalah satu tempat untuk menyimpan file yang berada dihalaman statis, sehingga dapat  mempermudah pembaca menjelajahi keseluruhan isi dari blog.

berikut cara penerapannya
Login ke akun blog klik tata letak dan klik tambah gadged,
copy kode dibawah ini : pastekan kedalam gadged tersebut dan klik simpan selesai

<p align="left">
<div class='widget BlogArchive' id='BlogArchive1'>
<div class='widget-content'>
<div id='ArchiveList'>
<div id='BlogArchive1_ArchiveList'>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open' style='color:orange'>&#9660; </span>
</a>
<a class='post-count-link' href='#'>Blog Arsip</a>
<span class='post-count' dir='ltr'></span>
<ul class='hierarchy'>
<li class='archivedate expanded'>
<a class='zippy toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial"> &#9660; </font>
</a>
<span class='post-count' dir='ltr'>Tahun</span>
<span class='zippy toggle-open' style='color:green'>(Posting) </span>
</li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Januari</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total</a>
<span class='post-count' dir='ltr'>(0) Posting</span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Februari </a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting</span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Maret </a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>April</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel </a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

 </li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Mei </a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Juni </a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Juli</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Agustus </a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>September</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Oktober</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>November</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<ul><!..limiting archives mys2010 barrier..//></!..limiting></ul>

</a></a></li></ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="red"face="arial">
 &#9658;
  </font></a>
<a class='post-count-link' href=' # ' title='Myscript2010'>Desember</a>
<span class='post-count' dir='ltr'>(2016)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">  &#9660; 
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Jumlah</a>
<span class='post-count' dir='ltr'>(0)</span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>

<font size="2" color="red"face="arial">
&#9658;
</font></a>
<a class='post-count-link' href='#' title='Myscript2010'>Judul Artikel</a>
<span class='post-count' dir='ltr'>(Tampil)</span>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<font size="2" color="blue"face="arial">&#9660; 
</font></a>
<a class='post-count-link' href=' http://Your Link' title='Myscript2010'>Judul 1</a>
<span class='post-count' dir='ltr'> (0) Posting  </span>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660;   
</a>
<a class='post-count-link' href='http://Your Link' title='Myscript2010'>Judul 2</a>
<span class='post-count' dir='ltr'>(0) Posting </span>

</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
&#9660; 
</a>
<a class='post-count-link'#' title='myscript2010'>Total  </a>
<span class='post-count' dir='ltr'>(0) </span>
</li>
</ul>
</li>
</ul>
<ul class='hierarchy'>
<li class='archivedate collapsed'>
<a class='toggle' href='javascript:void(0)'>
<a class='toggle' href='javascript:void(TOTAL)'>

<!..limiting end..//>

</!..limiting></a></a></li>
</ul>

</li></ul></div>
</div>
</div>
</div>

<div id='sidebar-nu Luhur'>
<div class='sidebar section' id='sidebar-nu Handap'></div>
</div>

<div class='clear'> </div>
</p>

Penjelasan :
Edit  Link dan Teks yang diberi warna
Tambahkan Judul postingan sesuai bulan posting

All Sources
Edited by. Myscript2010

DEMOSHOW

Slider Accordian Style

Memasang Slider Accordian Style
Seperti biasa Login ke akun blog Klik Entri halaman baru HTML
Copy kode dibawah ini,
pastekan kedalam halaman baru tersebut
kemudian klik simpan selesai

<style>
* {
 margin: 0;
 padding: 0;
}
body {
 background: #000;
 font-family: arial, verdana, tahoma;
}
/*Time to apply widths for accordian to work
Width of image =  40px
total images = 5
so width of hovered image = 640px
width of un-hovered image = 40px - you can set this to anything
so total container width = 640 + 40*4 = 800px;
default width = 800/5 = 160px;
*/
.accordian {
 width: 805px; height: 320px;
 overflow: hidden;
 /*Time for some styling*/
 margin: 100px auto;
 box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
 -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
/*A small hack to prevent flickering on some browsers*/
.accordian ul {
 width: 2000px;
 /*This will give ample space to the last item to move
 instead of falling down/flickering during hovers.*/
}
.accordian li {
 position: relative;
 display: block;
 width:  30px;
 float: left;
 border-left: 1px solid #888;
 box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
 /*Transitions to give animation effect*/
 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
 /*If you hover on the images now you should be able to
 see the basic accordian*/
}
/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}
/*Lets apply hover effects now*/
/*The LI hover style should override the UL hover style*/
.accordian ul li:hover {width: 640px;}
.accordian li img {
 display: block;
}
/*Image title styles*/
.image_title {
 background: rgba(0, 0, 0, 0.5);
 position: absolute;
 left: 0; bottom: 0;
width: 640px;
}
.image_title a {
 display: block;
 color: #fff;
 text-decoration: none;
 padding: 20px;
 font-size: 16px;
}
</style>
<div class="accordian">
 <ul>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 1</a>
   </div>
   <a href="http://Your Link.blogspot.co.id">
    <img src="http://Link Gambar.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 2</a>
   </div>
   <a href="http://Your Link.blogspot.co.id">
    <img src="http://Link Gambar.jpeg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 3</a>
   </div>
   <a href="http://Your Link.blogspot.co.id/">
    <img src="http://Link Gambar.jpeg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 4</a>
   </div>
   <a href="http://Your Link.blogspot.co.id/">
    <img src="http://Link Gambar.jpg"/>
   </a>
  </li>
  <li>
   <div class="image_title">
    <a href="http://Your Link.blogspot.co.id/">Judul 5</a>
   </div>
   <a href="http://Your Link.blogspot.co.id">
    <img src="http://Link Gambar.jpeg"/>
   </a>
  </li>
 </ul>
</div>

Sources by. Kode Play
Edited    by. Myscript2010 on Codepen

Penjelasan :
Terapkan Link Web dan Link Gambar yang berwarna orange sesuai  keinginan

DEMO SHOW

If you want to directly copy and paste you canDownload Here Slider Accordian

Sitemap Diagram CSS3

Memasang Sitemap Diagram
kode sitemap ini bisa digunakan untuk
halaman statis
langkah penerapannya sebagai berikut
Klik entri halaman baru HTML copy kode berikut letakan kedalam halaman baru tersebut, klik pratinjau untuk melihat hasil jika sudah sesuai klik publis selesai

<style>
/*Now the CSS*/
* {margin: 0; padding: 0;}

.tree ul {
 padding-top: 20px; position: relative;

 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
}

.tree li {
 float: left; text-align: center;
 list-style-type: none;
 position: relative;
 padding: 20px 5px 0 5px;

 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
}

/*We will use ::before and ::after to draw the connectors*/

.tree li::before, .tree li::after{
 content: '';
 position: absolute; top: 0; right: 50%;
 border-top: 1px solid #ccc;
 width: 50%; height: 20px;
}
.tree li::after{
 right: auto; left: 50%;
 border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
 display: none;
}

/*Remove space from the top of single children*/
.tree li:only-child{ padding-top: 0;}

/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
 border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
 border-right: 1px solid #ccc;
 border-radius: 0 5px 0 0;
 -webkit-border-radius: 0 5px 0 0;
 -moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
 border-radius: 5px 0 0 0;
 -webkit-border-radius: 5px 0 0 0;
 -moz-border-radius: 5px 0 0 0;
}

/*Time to add downward connectors from parents*/
.tree ul ul::before{
 content: '';
 position: absolute; top: 0; left: 50%;
 border-left: 1px solid #ccc;
 width: 0; height: 20px;
}

.tree li a{
 border: 1px solid #ccc;
 padding: 5px 10px;
 text-decoration: none;
 color: #666;
 font-family: arial, verdana, tahoma;
 font-size: 11px;
 display: inline-block;

 border-radius: 5px;
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;

 transition: all 0.5s;
 -webkit-transition: all 0.5s;
 -moz-transition: all 0.5s;
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
 background: #c8e4f8; color: #000; border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before{
 border-color:  #94a0b4;
}
</style>
<div class="tree">
 <ul>
  <li>
   <a href="Your Link">MYSCRIPT2010s</a>
   <ul>
    <li>
     <a href="Your Link">HOME</a>
     <ul>
      <li>
       <a href="Your Link">SUB MENU</a>
      </li>
     </ul>
    </li>
    <li>
     <a href="Your Link">CATEGORIES</a>
     <ul>
      <li><a href="Your Link">ALL TITLE</a></li>
      <li>
       <a href="Your Link">CONTACT</a>
       <ul>
        <li>
         <a href="Your Link">DISPLAY MENU</a>
        </li>
        <li>
         <a href="Your Link">BLOG ARCHIVE</a>
        </li>
        <li>
         <a href="Your Link">SOCIAL</a>
        </li>
       </ul>
      </li>
      <li><a href="Your Link">COPYRIGHT</a></li>
     </ul>
    </li>
   </ul>
  </li>
 </ul>
</div>

Penjelasan :
Terapkan Link dan Teks yang berwarna orange Sesuai Fungsinya

Sumber by. Kode Play
Edited   by. Myscript2010

DEMO SHOW

Mengganti Logo Twitter

Cara menggati logo twitter
menggunakan Link Hosting serta logo twitter yang diinginkan
Langkah awal siapkan logo serta link Hosting copy kode berikut
pastekan kedalam Notepad kemudian edit sesuai keinginan

/* TripleFlap - http://floern.com/software/tripleflap 
 * @Copyright   Copyright (C) 2010 floern
 * @licencse  GNU/GPL http://www.gnu.org/copyleft/gpl.html
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.

 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.

 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 * @author  floern
 * @author mail info@floern.com
 * @website  http://www.floern.com
*/
/************************************************************************/
/* Script edited by www.imemovaz.com                                    */
/* Script edited by www.imemovaz.com                                    */
/************************************************************************/


if(typeof(twitterAccount)!="string"||twitterAccount=="")var twitterAccount="http://twitter.com/";
if(typeof(tweetThisText)!="string"||tweetThisText=="")var tweetThisText=document.title+" "+document.URL;
var tweetthislink=null;

var birdSpeed=12;
var birdSpaceVertical=16;
var birdSetUp=2;
var spriteWidth=64;
var spriteHeight=64;
var spriteAniSpeed=72;
var spriteAniSpeedSlow=Math.round(spriteAniSpeed*1.75);

var neededElems4random=10;
var minElemWidth=Math.round(spriteWidth/3);
var scareTheBirdMouseOverTimes=4;
var scareTheBirdTime=1000;
var birdIsFlying=false;
var scrollPos=0;
var windowHeight=450;
if(typeof(window.innerHeight)=="number")windowHeight=window.innerHeight;
else if(document.documentElement&&document.documentElement.clientHeight)windowHeight=document.documentElement.clientHeight;
else if(document.body&&document.body.clientHeight)windowHeight=document.body.clientHeight;
if(windowHeight<=spriteHeight+2*birdSpaceVertical)windowHeight=spriteHeight+2*birdSpaceVertical+1;
var windowWidth=800;
if(typeof(window.innerWidth)=="number")windowWidth=window.innerWidth;
else if(document.documentElement&&document.documentElement.clientWidth)windowWidth=document.documentElement.clientWidth;
else if(document.body&&document.body.clientWidth)windowWidth=document.body.clientWidth;
if(windowWidth<=spriteWidth)windowWidth=spriteWidth+1;
var birdPosX=Math.round(Math.random()*(windowWidth-spriteWidth+200)-200);
var birdPosY=-2*spriteHeight;
var timeoutAnimation=false;
var timeoutFlight=false;
var showButtonsTimeout=null;
var hideButtonsTimeout=null;
var scareTheBirdLastTime=0;
var scareTheBirdCount=0;
function tripleflapInit(reallystart){
if(typeof(reallystart)=="undefined"){
window.setTimeout("tripleflapInit(1)",250);
return;
}
if(!is_utf8(tweetThisText))tweetThisText=utf8_encode(tweetThisText);
var tweetthislink="http://twitter.com/home?status="+escape(tweetThisText);
var theBird=document.createElement("a");
theBird.setAttribute("id","theBird");
theBird.setAttribute("href",twitterAccount);
theBird.setAttribute("target","_blank");
theBird.style.display="block";
theBird.style.position="absolute";
theBird.style.left=birdPosX+"px";
theBird.style.top=birdPosY+"px";
theBird.style.width=spriteWidth+"px";
theBird.style.height=spriteHeight+"px";
theBird.style.background="url('"+birdSprite+"') no-repeat transparent";
theBird.style.backgroundPosition="-0px -0px";
theBird.style.zIndex="947";
theBird.onmouseover=function(){scareTheBird();showButtonsTimeout=window.setTimeout("showButtons(0,"+windowWidth+")",400);window.clearTimeout(hideButtonsTimeout);};
theBird.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50);};
document.body.appendChild(theBird);
var theBirdLtweet=document.createElement("a");
theBirdLtweet.setAttribute("id","theBirdLtweet");
theBirdLtweet.setAttribute("href",tweetthislink);
theBirdLtweet.setAttribute("target","_blank");
theBirdLtweet.setAttribute("title","tweet this");
theBirdLtweet.style.display="none";
theBirdLtweet.style.position="absolute";
theBirdLtweet.style.left="0px";
theBirdLtweet.style.top="-100px";
theBirdLtweet.style.background="url('"+birdSprite+"') no-repeat transparent";
theBirdLtweet.style.opacity="0";
theBirdLtweet.style.filter="alpha(opacity=0)";
theBirdLtweet.style.backgroundPosition="-64px -0px";
theBirdLtweet.style.width="58px";
theBirdLtweet.style.height="30px";
theBirdLtweet.style.zIndex="951";
theBirdLtweet.onmouseover=function(){window.clearTimeout(hideButtonsTimeout);};
theBirdLtweet.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50);};
document.body.appendChild(theBirdLtweet);
var theBirdLfollow=theBirdLtweet.cloneNode(false);
theBirdLfollow.setAttribute("id","theBirdLfollow");
theBirdLfollow.setAttribute("href",twitterAccount);
theBirdLfollow.setAttribute("title","follow me");
theBirdLfollow.style.backgroundPosition="-64px -30px";
theBirdLfollow.style.width="58px";
theBirdLfollow.style.height="20px";
theBirdLfollow.style.zIndex="952";
theBirdLfollow.onmouseover=function(){window.clearTimeout(hideButtonsTimeout);};
theBirdLfollow.onmouseout=function(){hideButtonsTimeout=window.setTimeout("hideButtons()",50);};
document.body.appendChild(theBirdLfollow);
var timeoutAnimation=window.setTimeout("animateSprite(0,0,0,0,null,true)",spriteAniSpeed);
window.onscroll=recheckposition;
recheckposition();
}
function animateSprite(row,posStart,posEnd,count,speed,onlySet){
if(typeof(count)!="number"||count>posEnd-posStart)count=0;
document.getElementById("theBird").style.backgroundPosition="-"+Math.round((posStart+count)*spriteWidth)+"px -"+(spriteHeight*row)+"px";
if(onlySet==true)return;
if(typeof(speed)!="number")speed=spriteAniSpeed;
timeoutAnimation=window.setTimeout("animateSprite("+row+","+posStart+","+posEnd+","+(count+1)+","+speed+")",speed);
}
function animateSpriteAbort(){
window.clearTimeout(timeoutAnimation);
}
function recheckposition(force){
if(force!=true)force=false;
if(birdIsFlying)
return false;
if(typeof(window.innerHeight)=="number")windowHeight=window.innerHeight;
else if(document.documentElement&&document.documentElement.clientHeight)windowHeight=document.documentElement.clientHeight;
else if(document.body&&document.body.clientHeight)windowHeight=document.body.clientHeight;
if(windowHeight<=spriteHeight+2*birdSpaceVertical)windowHeight=spriteHeight+2*birdSpaceVertical+1;
if(typeof(window.innerWidth)=="number")windowWidth=window.innerWidth;
else if(document.documentElement&&document.documentElement.clientWidth)windowWidth=document.documentElement.clientWidth;
else if(document.body&&document.body.clientWidth)windowWidth=document.body.clientWidth;
if(windowWidth<=spriteWidth)windowWidth=spriteWidth+1;
if(typeof(window.pageYOffset)=="number")scrollPos=window.pageYOffset;
else if(document.body&&document.body.scrollTop)scrollPos=document.body.scrollTop;
else if(document.documentElement&&document.documentElement.scrollTop)scrollPos=document.documentElement.scrollTop;
birdPosY=parseInt(document.getElementById("theBird").style.top);
birdPosX=parseInt(document.getElementById("theBird").style.left);
if(scrollPos+birdSpaceVertical>=birdPosY||scrollPos+windowHeight-spriteHeight<birdPosY||force){
hideButtons();
elemPosis=chooseNewTarget();
if(elemPosis.length<1){
elemType=null;
elemNr=null;
elemTop=scrollPos+Math.round(Math.random()*(windowHeight-spriteHeight));
elemLeft=Math.round(Math.random()*(windowWidth-spriteWidth));
elemWidth=0;
}
else{
newTarget=elemPosis[Math.round(Math.random()*(elemPosis.length-1))];
elemType=newTarget[0];
elemNr=newTarget[1];
elemTop=newTarget[2];
elemLeft=newTarget[3];
elemWidth=newTarget[4];
}
targetTop=elemTop-spriteHeight;
targetLeft=Math.round(elemLeft-spriteWidth/2+Math.random()*elemWidth);
if(targetLeft>windowWidth-spriteWidth-24)
targetLeft=windowWidth-spriteWidth-24;
else if(targetLeft<0)
targetLeft=0;
birdIsFlying=true;
flyFromTo(birdPosX,birdPosY,targetLeft,targetTop,0);
}
}
function chooseNewTarget(){
var elemPosis=new Array();
var obergrenze=scrollPos+spriteHeight+birdSpaceVertical;
var untergrenze=scrollPos+windowHeight-birdSpaceVertical;
for(var ce=0;ce<targetElems.length;ce++){
var elemType=targetElems[ce];
var sumElem=document.getElementsByTagName(elemType).length;
for(var cu=0;cu<sumElem;cu++){
var top=document.getElementsByTagName(elemType)[cu].offsetTop;
var left=document.getElementsByTagName(elemType)[cu].offsetLeft;
var width=document.getElementsByTagName(elemType)[cu].offsetWidth;
if(top<=obergrenze||top>=untergrenze||width<minElemWidth||left<0){
continue;
}
elemPosis[elemPosis.length]=new Array(elemType,cu,top,left,width);
if(elemPosis.length>=neededElems4random)
return elemPosis;
}
}
return elemPosis;
}
function flyFromTo(startX,startY,targetX,targetY,solved,direction){
justStarted=(solved==0);
solved+=(solved>birdSpeed/2)?birdSpeed:Math.round((solved==0)?birdSpeed/4:birdSpeed/2);
solvedFuture=solved+((solved>birdSpeed/2)?birdSpeed:Math.round(birdSpeed/2));
distanceX=targetX-startX;
distanceY=targetY-startY;
distance=Math.sqrt(distanceX*distanceX+distanceY*distanceY);
solvPerc=Math.abs(1/distance*solved);
solvDistX=Math.round(distanceX*solvPerc);
solvDistY=Math.round(distanceY*solvPerc);
solvPercFuture=Math.abs(1/distance*solvedFuture);
solvDistXFuture=Math.round(distanceX*solvPercFuture);
solvDistYFuture=Math.round(distanceY*solvPercFuture);
if(typeof(direction)!="string"){
direction=null;
angle=((distanceX!=0)?Math.atan((-distanceY)/distanceX)/Math.PI*180:90)+((distanceX<0)?180:0);
if(angle<0)angle+=360;
if(angle<45)direction='o';
else if(angle<135)direction='n';
else if(angle<202.5)direction='w';
else if(angle<247.5)direction='sw';
else if(angle<292.5)direction='s';
else if(angle<337.5)direction='so';
else direction='o';
}
if(Math.abs(solvDistXFuture)>=Math.abs(distanceX)&&Math.abs(solvDistYFuture)>=Math.abs(distanceY)){
animateSpriteAbort();
switch(direction){
case 'so':animateSprite(1,0,0,0,null,true);break;
case 'sw':animateSprite(1,2,2,0,null,true);break;
case 's':animateSprite(0,2,2,0,null,true);break;
case 'n':animateSprite(4,0,0,0,null,true);break;
case 'o':animateSprite(1,0,0,0,null,true);break;
case 'w':animateSprite(1,2,2,0,null,true);break;
default:animateSprite(0,0,0,0,null,true);
}
timeoutAnimation=window.setTimeout("animateSprite(0,0,0,0,null,true)",spriteAniSpeed);
}
if(Math.abs(solvDistX)>=Math.abs(distanceX)&&Math.abs(solvDistY)>=Math.abs(distanceY)){
solvDistX=distanceX;
solvDistY=distanceY;
birdIsFlying=false;
window.setTimeout("recheckposition()",500);
}
else{
if(justStarted){
animateSpriteAbort();
switch(direction){
case 'so':animateSprite(1,0,0,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(1,1,1,0,null,true)",spriteAniSpeed);break;
case 'sw':animateSprite(1,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(1,3,3,0,null,true)",spriteAniSpeed);break;
case 's':animateSprite(0,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(0,3,3,0,null,true)",spriteAniSpeed);break;
case 'n':timeoutAnimation=window.setTimeout("animateSprite(4,0,3,0,"+spriteAniSpeedSlow+")",1);break;
case 'o':animateSprite(1,0,0,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(2,0,3,0,"+spriteAniSpeedSlow+")",spriteAniSpeed);break;
case 'w':animateSprite(1,2,2,0,null,true);timeoutAnimation=window.setTimeout("animateSprite(3,0,3,0,"+spriteAniSpeedSlow+")",spriteAniSpeed);break;
default:animateSprite(0,0,0,0,null,true);
}
}
timeoutFlight=window.setTimeout("flyFromTo("+startX+","+startY+","+targetX+","+targetY+","+solved+",'"+direction+"')",50);
}
hideButtons();
document.getElementById("theBird").style.left=(startX+solvDistX)+"px";
document.getElementById("theBird").style.top=(startY+solvDistY+birdSetUp)+"px";
}
function scareTheBird(nul){
newTS=new Date().getTime();
if(scareTheBirdLastTime<newTS-scareTheBirdTime){
scareTheBirdCount=1;
scareTheBirdLastTime=newTS;
}
else{
scareTheBirdCount++;
if(scareTheBirdCount>=scareTheBirdMouseOverTimes){
scareTheBirdCount=0;
scareTheBirdLastTime=0;
recheckposition(true);
}
}
}
function showButtons(step,minWidth){
birdPosY=parseInt(document.getElementById("theBird").style.top);
birdPosX=parseInt(document.getElementById("theBird").style.left);
if(step==0&&document.getElementById("theBirdLtweet").style.display=="block")step=100;
if(birdIsFlying)step=0;
opacity=Math.round(step*15);
if(opacity<0)opacity=0;
if(opacity>100)opacity=100;
if(birdPosX<minWidth-300||birdPosX<minWidth/2){
buttonPosX1=birdPosX+spriteWidth-15;
buttonPosX2=birdPosX+spriteWidth-10;
}
else{
buttonPosX1=birdPosX+16-parseInt(document.getElementById("theBirdLtweet").style.width);
buttonPosX2=birdPosX+11-parseInt(document.getElementById("theBirdLfollow").style.width);
}
buttonPosY1=birdPosY-4;
buttonPosY2=birdPosY-4+parseInt(document.getElementById("theBirdLtweet").style.height);
document.getElementById("theBirdLtweet").style.left=buttonPosX1+"px";
document.getElementById("theBirdLtweet").style.top=buttonPosY1+"px";
document.getElementById("theBirdLtweet").style.display="block";
document.getElementById("theBirdLtweet").style.opacity=opacity/100;
document.getElementById("theBirdLtweet").style.filter="alpha(opacity="+opacity+")";
document.getElementById("theBirdLfollow").style.left=buttonPosX2+"px";
document.getElementById("theBirdLfollow").style.top=buttonPosY2+"px";
document.getElementById("theBirdLfollow").style.display="block";
document.getElementById("theBirdLfollow").style.opacity=opacity/100;
document.getElementById("theBirdLfollow").style.filter="alpha(opacity="+opacity+")";
if(opacity>=100)return;
step++;
showButtonsTimeout=window.setTimeout("showButtons("+step+","+minWidth+")",60);
}
function hideButtons(){
window.clearTimeout(showButtonsTimeout);
document.getElementById("theBirdLtweet").style.display="none";
document.getElementById("theBirdLtweet").style.opacity="0";
document.getElementById("theBirdLtweet").style.filter="alpha(opacity=0)";
document.getElementById("theBirdLfollow").style.display="none";
document.getElementById("theBirdLfollow").style.opacity="0";
document.getElementById("theBirdLfollow").style.filter="alpha(opacity=0)";
}
function utf8_encode(str){
str=str.replace(/\r\n/g,"\n");
utf8str="";
for(n=0;n<str.length;n++){
c=str.charCodeAt(n);
if(c<128){
utf8str+=String.fromCharCode(c);
}
else if(c>127&&c<2048){
utf8str+=String.fromCharCode((c>>6)|192);
utf8str+=String.fromCharCode((c&63)|128);
}
else{
utf8str+=String.fromCharCode((c>>12)|224);
utf8str+=String.fromCharCode(((c>>6)&63)|128);
utf8str+=String.fromCharCode((c&63)|128);
}
}
return utf8str;
}
function is_utf8(str){
strlen=str.length;
for(i=0;i<strlen;i++){
ord=str.charCodeAt(i);
if(ord<0x80)continue;
else if((ord&0xE0)===0xC0&&ord>0xC1)n=1;
else if((ord&0xF0)===0xE0)n=2;
else if((ord&0xF8)===0xF0&&ord<0xF5)n=3;
else return false;
for(c=0;c<n;c++)
if(++i===strlen||(str.charCodeAt(i)&0xC0)!==0x80)
return false;
}
return true;
}

Lihat Contoh Kode yang sudah diedit

Memasang Jam Pada Postingan

Memasang jam digital pada postingan
Login ke akun blog klik tataletak dan klik tambah gadged
copy kode berikut
pastekan kedalam gadged tersebut dan klik simpan selesai

<script src="https://googledrive.com/host/0B5KoQe8kWWqgeC1iUFN6d2R5bEU"rel='stylesheet'/></script> <script src="https://googledrive.com/host/0B5KoQe8kWWqgUzVMWnJuay1Gd28"rel='stylesheet'/></script> <script src="https://googledrive.com/host/0B5KoQe8kWWqgSVZyQ0ZfS2NJYVk"rel='stylesheet'/></script> <script src="https://googledrive.com/host/0B5KoQe8kWWqgNEJNSDJZOVA0aU0"rel='stylesheet'/></script> <script language="JavaScript" type="text/javascript" charset="utf-8" src="http://yourjavascript.com/22215169142/mys2010-digital-clock.js">

All Sources
Edited by. Myscript2010

Test Script Get Kode

Gambar Efek Hover

Memasang Gambar dengan Efek Hover
dan menjadi tombol link ke arah postingan langkah penerapannya sebagai berikut
Login ke akun blog klik tataletak dan klik tambah gadged
copy kode dibawah ini pastekan kedalam gadged tersebut dan klik simpan selesai

Kode 1. Gambar ( oval ) dengan efek hover

<style>#image {
margin: 0px;
padding: 5px;
text-align: center; }

#image img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:90px;
-moz-border-radius:90px;
-o-border-radius:90px;
border-radius:90px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}

#image img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
} </style>

<div id="image">
<a target="_blank" href="Your Link"><img src="http://Link Gambar.JPG" border="0"/></a>

Kode 2. Gambar ( bulat ) dengan efek hover

<style>#image {
margin: 0px;
padding: 5px;
text-align: center; }

#image img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:70px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}

#image img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
} </style>

<div id="image">
<a target="_blank" href="http://Your Link">
<img src="http://Link Gambar" style="border-radius: 70px; height:  80px;"" alt="Hover" border="0" />

Kode 3. Gambar ( berputar ) dengan efek hover

<style> #Mys2010 a:hover { background-color: transparent;opacity:0.7; } #Mys2010 img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #Mys2010 img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style>
<div id="Mys2010"> <a title="Berputar" href="http://Your Link">
<img src="http://Link Gambar" style="border-radius: 3px; height:  75px;"" alt="Berputar" border="0" />

All Sources
Edited by. Myscript2010

DEMO SHOW

CSS3 Slideshow Full Screen B.3

Memasang Slide Show auto CSS 3
menggunakan kode CSS dan HTML
yang menampilkan gambar di webblog secara otomatis
tampil bergantian. Berikut cara penerapannya :
.

Login ke akun blog klik edit HTML  temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin>  
dan klik simpan selesai

.my-slideshow,
.my-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.my-slideshow:after {
content: '';
background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left;
}
.my-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.my-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.my-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.my-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiF29MlKr0eRmEjRtcdg01wiXFGtbNkoxgdGfdnTK9Qf2-YQbGJQs_1E8wEPi6erRPPqmkdTBlC127hsP38_rdF-kNKoqJncn7XFV6Im8UrXoL5aEoSY6xaWNlBD3ZFixtVBsLOEgrW5Xym/s1600-r/spMys2010a1.jpg)
}
.my-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaF_7LjhoYljKgiTZ1riOtS9V1-kS-3FqPtvF9hJHpRbTLfTsgewEkLCtomABjaeeKeqFIfKplUCo3mNxsNFBpgKqVJmjkeNvF5xHO5dDRI-bG7KhItgUzRLaaXNNczirROk4Z0Rfi6sZI/s1600-r/spMys2010s3.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4Z52-Y4uvzuPFLQoDDiEROQT_PHdEWEEE5A4PkAdf9-YDWNJNQlypCX_co-Z_dxwgWfsc8jmYEVxWSXNhV35Pyc6B-H-XFseRi3FkHdJDYaEYhePMQqdCM8U_kMC__ZUtssj5CnHXWrpf/s1600-r/spMys2010s2.jpg );
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjipKmG4jIbFtRBOxfdBh0pw4P_u8x2a77-7R0ZROl7npUayzmk-exFEYzHxZmNJD85uExlXaMDo00Mh424qTncC_zZ494ScBHLhlMpnWscD6CdUqWKl7lGDFOaXjfMt56D1rGS-xRELBpI/s1600-r/01mys2010.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFQHAikwzIsbOGnvAl1tACFqFj6s80f7UcRh9-86X6ZFt32foJvANmZHc6mNMDnoipqoHPikeljAo1pFvoEvNL3RPuF3TnXcjO_wJPufzFXX_22UfWt4_tyOzj1t6-UOzYrvRlwKb1uaTY/s1600-r/03mys2010.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHVceJPIvW_Xm9ywbtt6cE7v_fBJaFUEpKLNs2pQNiKL6I1T3GMfageWvEIAApEM98LYHxBPaz5WvBKpxieBD_JNXSv40ckRHbbO2XKKN0LWW96UsXOY3xz5U2WCU_Lx7f_WgKTZNyImtV/s1600-r/sp.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.my-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .my-slideshow li span{
opacity: 1;
}

@media screen and (max-width: 1140px) {
.my-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.my-slideshow li div h3 { font-size: 80px }
}

Kemudian klik entri halaman baru HTML
copy kode berikut pastekan kedalam halaman baru tersebut

<ul class="my-slideshow">
<li><span>Gambar 01</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 02</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 03</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 04</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 05</span><div>
<h4> Your Text  </h4>
</div>
</li>
<li><span>Gambar 06</span><div>
<h4>  </h4>
</div>
</li>
</ul>

Penjelasan :
Ganti Link gambar dan teks yang berwarna orange sesuai keinginan
untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template

Sumber by. Tympanus

Edited   by. Myscript2010

DEMO SHOW

CSS3 Slideshow Full Screen B.2

Memasang Slide Show Auto CSS 3
dengan efek zoom teks yang menampilkan gambar di webblog
secara otomatis tampil bergantian. Berikut cara penerapannya :

Login ke akun blog klik edit HTML temukan kode ]]></b:skin>
gunakan CTRL F untuk pencarian, copy kode berikut letakan diatas kode   ]]></b:skin> 
dan klik simpan selesai

.my-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.my-slideshow:after {
content: '';
background: transparent url(http://www.banffparklodge.com/themes/site_themes/lodge/images/transparent.png) repeat top left;
}
.my-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.my-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.my-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
color: rgba(169,3,41, 0.8);
}
.my-slideshow li:nth-child(1) span { background-image: url(https://wallpaperscraft.com/image/randis_albion_art_girl_sword_feathers_bird_94348_1920x1080.jpg) }
.my-slideshow li:nth-child(2) span {
background-image: url(https://wallpaperscraft.com/image/dragon_fantasy_art_feathers_98978_1920x1080.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) span {
background-image: url(https://wallpaperscraft.com/image/dragon_cave_light_art_94937_1920x1080.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) span {
background-image: url(https://wallpaperscraft.com/image/art_nick_deligaris_dragon_rider_mountain_castle_tower_94138_1920x1080.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) span {
background-image: url(https://wallpaperscraft.com/image/unicorn_wood_stars_autumn_bird_4771_1920x1200.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) span {
background-image: url(https://wallpaperscraft.com/image/unicorn_fight_battle_dragon_3312_1920x1200.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.my-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.my-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.my-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.my-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.my-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1);
}
25% {
opacity: 0;
-moz-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1);
}
25% {
opacity: 0;
-o-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1);
}
25% {
opacity: 0;
-ms-transform: scale(1.1);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1);
}
25% {
opacity: 0;
transform: scale(1.1);
}
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
8% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
8% {
opacity: 1;
-moz-transform: translateY(0px);
}
17% {
opacity: 1;
-moz-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-moz-transform: scale(10);
}
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
8% {
opacity: 1;
-o-transform: translateY(0px);
}
17% {
opacity: 1;
-o-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-o-transform: scale(10);
}
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}
8% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}
8% {
opacity: 1;
transform: translateY(0px);
}
17% {
opacity: 1;
transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
transform: scale(10);
}
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .my-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.my-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.my-slideshow li div h3 { font-size: 50px }
}

Kemudian klik entri halaman baru HTML
copy kode berikut pastekan kedalam halaman baru tersebut

<ul class="my-slideshow">
<li><span>Gambar 01</span><div>
<h3>Myscript2010 </h3>
</div>
</li>
<li><span>Gambar 02</span><div>
<h3>Belajar Webblog </h3>
</div>
</li>
<li><span>Gambar 03</span><div>
<h3>Full Screen </h3>
</div>
</li>
<li><span>Gambar 04</span><div>
<h3>Desainer </h3>
</div>
</li>
<li><span>Gambar 05</span><div>
<h3>Copyright:2015 </h3>
</div>
</li>
<li><span>Gambar 06</span><div>
<h3>Cibeber Cimahi </h3>
</div>
</li>
</ul>

Penjelasan :
Ganti Link gambar dan teks yang berwarna orange sesuai keinginan
untuk templatenya jika tidak mendukung bisa download pada link penyedia layanan Template

Sumber by. Tympanus

Edited   by. Myscript2010

DEMO SHOW