Cara Membuat Slide Featured

Seribu Satu Cara untuk mempercantik tampilan blog. Salah satunya adalah Cara Membuat Slide Featured atau Cara Membuat Slide Menu Sederhana. Sebelumnya tutorial ini kemarin saya sempat membuat suatu postingan yang membahas Cara Membuat Menu  JQuery Accordion, dengan ini kami akan memberikan suatu yang berbeda dari sebelumnya yang itu Slide Featured.

Pembuatan Slide Featured atau bisa juga disebut dengan Slide Menu ini sangat mudah, namun untuk menjaga keamanan agar template sebelumnya alangkah baiknya sebelum melakukan pengeditan template di backup terlebih dahulu.

D E M O

Mari kita simak bersama-sama :

Langkah 1
Login ke blogger, kemudian tuju ke Rancangan dan Edit HTML.
Langkah 2
klik Download Template Lengkap untuk membackup template.
Langkah 3
Setelah itu, copy kode css berikut dan letakkan sebelum kode ]]></b:skin>

#feature{
background:#EFEFEF;
border:1px solid #fff;
width:508px;
height:204px;
padding:10px;
margin-top:15px;
}

.slider{
margin:0;
padding:0
}

.sliderwrapper{
background:#F9F9F9;
position:relative;
overflow:hidden;
width:100%;
height:178px
}

.thumb {
float:left;
margin:0;
padding:15px 10px 10px 10px
}

.thumb img {
width:200px !important;
height:150px !important;
border:2px solid #F9F9F9;
outline:1px solid #ddd;
}

.contentdiv{
overflow:hidden;
height:210px !important
}

.pagination{
width:498px;
text-align:right;
padding:0 0 0 10px;
font-size:12px;
height:20px;
margin-top:11px;
}

.pagination a{
background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJZDrpSuvfCAQh8AN3WA0lZIGwggdShe2fOTP8Mv0uCH7i5UlE2G-_t8-oC4ncZAHknGdV-pUTb0Uu3tqdSK4fLvb-K3ybQoJsV50SOGNFUlR5IVnDpiMcOoO1jjDFNtn0Ip-D_JY0btc/s1600/nav_black.jpg) repeat-x;
padding:2px 7px;
text-decoration: none;
color: #fff;
border:1px solid #BEBEBE;
}

.pagination a:hover, .pagination a.selected{
background:#F9F9F9;
color:#222;
text-decoration:none;
border:1px solid #BEBEBE;
}

.desc{
overflow:hidden;
font-size:12px;
padding:0 10px 10px 0;
margin:0;
}

.desc p {
margin:10px 0 0 0;
padding:0
}

.desc h3 a{
color:#084B8A;
font-size:18px;
}

Langkah 4
Kemudian copy kode HTML berikut setelah kode <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
       <div id='feature'>
         <div class='sliderwrapper' id='slider1'>

             <div class='contentdiv'>
          <div class='thumb'>
       <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxdXFXigkH28wN62R8zn_x6kXkuI76dCjqHr62xHIVvl3Xa_FCifwi0XodqEjj8vcGmDp79bvdyQXZeRbJA1t9jg9HmjGChOVAWOFv33br3s4qI7PCD2Vw-taymRzN3Jak3YY8Zjcy2Xo/s1600/samsung_galaxy_tab.jpg'/>
                 </div>   
                 <div class='desc'>
       <h3><a href='#'>Judul 1</a></h3>
       <p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
             </div>


             <div class='contentdiv'>
          <div class='thumb'>
       <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijSFDPi_PgRvww-_kZ_wzG8ZEXcptZDSu4CP7DIDPpp0Oyyoo4UJfHW-aZEtBZH_B73YX5ql49rLoVFS7nGUpKjzddJEfPYd3BK_O331t-OUH6mBrUQ1nFIveZqx-p3FLaM0WHhm5gows/s1600/motorola.jpg'/>
          </div>
   <div class='desc'>
       <h3><a href='#'>Featured 2</a></h3>
                     <p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
   </div>
      </div>
           

             <div class='contentdiv'>
          <div class='thumb'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNPC7SMJHrb8Gbg2DXM1zSpw2Q1O9FPFH2dcvG4qJGbMad6SJGNRcVX09eUW0V4S_GmUONEwt1lZ9BJ2mA88gysC-GMHscgKduXu-KLcomlgHPx4J3D3AMhUBpC5sEyCS7En78gn74ZGQ/s1600/galaxy_note.jpeg'/>
          </div>
                 <div class='desc'>
       <h3><a href='#'>Featured 3</a></h3>
       <p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
   </div>
      </div>
            

             <div class='contentdiv'>
          <div class='thumb'>
      <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1rREES4rWkDhvr_PNh1T3N2J2-XO3ZCCxlaM9NV09MQCGK5beJghJEgJ7TMnb1LHB9BzJkhTWlgc-3y84mT99BIV6mHq4axzBlyDbngolo0TmtVQeR4nOmKY3D9UEn16LoqQqu08DIw/s1600/blackberry_dakota.jpg'/>
          </div>
   <div class='desc'>
       <h3><a href='#'>Featured 4</a></h3>
       <p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
             </div>
           

             <div class='contentdiv'>
          <div class='thumb'>
       <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVz-KU0NGvnN7YJ6n63tPNy_zyCAr52W5E9Duyd86Nqd6IVMeUGr6TraM8HPk1SpDN3GMunyiCtXrqN_jnFcBXjf6iiTMHd7g9daPgyrWxf8eSYfACxvzpFOYaX4ar9qa7TgByjyBk7gg/s1600/apple-iphone.jpg'/>
          </div>
   <div class='desc'>
       <h3><a href='#'>Featured 5</a></h3>
                     <p>Curabitur et lectus vitae purus tincidunt laoreet sit amet ac ipsum. Proin tincidunt mattis nisi a scelerisque. Aliquam placerat dapibus eros non ullamcorper. Integer interdum ullamcorper venenatis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
      </div>
             
        </div>
          <div class='pagination' id='paginate-slider1'/>
     </div>
   </b:if>
</b:if>

Langkah 5
Untuk bagian terakhir, copy kode script berikut sebelum kode </body>
Tapi sebelumnya Download dulu Code JavaScriptnya Klik Disini



Langkah 6
Simpan Templates

Terima Kasih Semoga bermanfaat buat kita semua