Menu


Menu Tab

Pages

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
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

Myscript2010

Home Page
 
 

M2010

Copyright © Cibeber Cimahi