accordion horizontal blogspot

Accordion horizontal blogspot - widget accordion horizontal blogspot ini sangat ringan, accordion horizontal blogspot tidak memiliki jquery sebagai motorik sistemnya. Widget accordion horizontal blogspot cocok untuk blog yang berbasis news atau memiliki aplikasi blog yang banyak. Untuk melihat demo dari widget accordion horizontal blogspot ini silahkan anda klik DEMO dibawah dan lihat hasilnya. Bila anda tertarik dalam pemasangan wiget accordion horizontal blogspot pada template blog anda silahkan simak penjelasan di bawah ini, langsung saja menuju TKP.

Demo

Install Program CSS

1. Login ke dashboard anda
2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
3. Cari code </head>
4. Copy Code script CSS widget accordion horizontal blogspot dibawah ini, pastekan tepat diatas code </head> yang tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : accordion horizontal blogspot
By : Rivai Silaban | Blog Design
Update :Kamis 12, Desember 2013
******************************************/
.accordion_blogdesign{
width:980px;
overflow:hidden;
list-style:none;
font-family:Calibri, Arial, sans-serif;
color:#666;
margin:0 auto;
}
.accordion_blogdesign a {
color: #FF3300;
text-decoration: none;
}
.accordion_blogdesign a:hover {
color: #0099FF;
}
.accordion_blogdesign li{
float:left;
width:20%;
overflow:hidden;
height:250px;
-moz-transition:width 0.2s ease-out;
-webkit-transition:width 0.2s ease-out;
-o-transition:width 0.2s ease-out;
transition:width 0.2s ease-out;
}
.accordion_blogdesign div{
padding:10px;margin:0;
}
.accordion_blogdesign:hover li{
width:10%;
}
.accordion_blogdesign li:hover{
width:60%;
color: #CCCCCC;
background-color: #000000;
box-shadow: 0 0 5px #fff inset;
}
.accordion_blogdesign li h2 {margin:0;}
.sada {color:#000000;background-color: #EDFAFE;}
.dua {color:#000000;background-color: #C5EDFA;}
.tolu { background-color: #EDFAFE; color: #000000;}
.opat { background-color: #C5EDFA; color: #000000;}
.lima {background-color: #EDFAFE;color: #000000;}
}/* accordion horizontal blogspot CSS code end */

Install Program Tag HTML

• Setelah anda sudah memasang CSS accordion horizontal blogspot saatnya anda memasang kode htmlnya.
• Untuk memasang kode htm accordion horizontal blogspot ini anda dapat memasangnya dimana saja. Anda boleh memasangnya langsung ke tag HTML template atau ke widget template blogspot anda.
• Edit kode dan save .

<!-- Rivai Silaban | BLOG DESIGN CODE accordion horizontal blogspot start -->
<ul class="accordion_blogdesign">
<li class="sada"><div><h2>Blogspot</h2> <p>
Rivai Silaban | BLOG DESIGN Blog ini membahas tentang berbagai tips dan tutorial blogspot untuk mengoptimalkan halaman blog di search engine ( SEO ), Validasi HTML 5 , CSS 3, Script dan tehnik .... <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">&rarr; Read more</a><br/><br/>
<span style="float:left;margin: -10px 15px 0 0;"><img alt="tutorial blogspot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE31rl1zo8W9RcGBJsuQIp8nCuhR56JIFz70Yi0o7l6oJe4_3ZIgAk9UsOBIC6_Dak-_pNa2k5UMKnX-Pn0efnERi_NGX1U1_lUNO1O9HN2AzU6C2N3fl2pcD_4Kokf4tjDsofmsCDR9E/s1600/BBL.gif" title="tutorial blogspot"/></span>Rivai Silaban - Blog Design
Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya...<a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">&clubs; Read more...</a><br/>
</p> </div> </li>
<li class="dua"> <div> <h2>Wordpress</h2><p>
Rivai Silaban | BLOG DESIGN Blog ini membahas tentang berbagai tips dan tutorial blogspot untuk mengoptimalkan halaman blog di search engine ( SEO ), Validasi HTML 5 , CSS 3, Script dan tehnik .... <a class="mor3" href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">&rarr; Read more</a><br/><br/>
<span style="float:left;margin: -10px 15px 0 0;"><img alt="tutorial wordpress" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPkIAeiBU-zLLYIsGTtadI4t_Wr-VHpmFaCijysTIhugerQgPigXCHHyIY3dZopUiuZra7o0sBipeT_eq5j9TdzC70Ux1_SkgqsBrPXqblviBy2twh2UjsCeGntFFrwbNuglA_UBiBFsA/s1600/WPTUT.gif" title="tutorial wordpress" /></span>Rivai Silaban - Blog Design
Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya...<a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">&clubs; Read more...</a><br/>
</p> </div> </li>
<li class="tolu"> <div> <h2>Google Plus</h2> <p>
Rivai Silaban | BLOG DESIGN Blog ini membahas tentang berbagai tips dan tutorial blogspot untuk mengoptimalkan halaman blog di search engine ( SEO ), Validasi HTML 5 , CSS 3, Script dan tehnik .... <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">&rarr; Read more</a><br/><br/>
<span style="float:left;margin: -10px 15px 0 0;"><img alt="rivai silaban" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_u_M2EwFFnYrbNd2PqRtZHvm8VsOhyk1xKdcD1gQID32WNWfT_kYiYdXIPvU8WZcM_xp7iJ6c2qTH1q3kDzQJ-EmuRuiImLgcp_9pMhyphenhyphenCMS0KJlmLJrP6XkyE6gv2fD3yYWD1wgd6W2s/s1600/GAMBAR.gif" title="rivai silaban" /></span>Rivai Silaban - Blog Design
Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya...<a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">&clubs; Read more...</a><br/>
</p> </div> </li>
<li class="opat"> <div> <h2>Twitter</h2><p>
Rivai Silaban | BLOG DESIGN Blog ini membahas tentang berbagai tips dan tutorial blogspot untuk mengoptimalkan halaman blog di search engine ( SEO ), Validasi HTML 5 , CSS 3, Script dan tehnik .... <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">&rarr; Read more</a><br/><br/>
<span style="float:left;margin: -10px 15px 0 0;"><img alt="rivai silaban" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_u_M2EwFFnYrbNd2PqRtZHvm8VsOhyk1xKdcD1gQID32WNWfT_kYiYdXIPvU8WZcM_xp7iJ6c2qTH1q3kDzQJ-EmuRuiImLgcp_9pMhyphenhyphenCMS0KJlmLJrP6XkyE6gv2fD3yYWD1wgd6W2s/s1600/GAMBAR.gif" title="rivai silaban" /></span>Rivai Silaban - Blog Design
Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya...<a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">&clubs; Read more...</a><br/>
</p> </div> </li>
<li class="lima"><div><h2>Facebook</h2><p>
Rivai Silaban | BLOG DESIGN Blog ini membahas tentang berbagai tips dan tutorial blogspot untuk mengoptimalkan halaman blog di search engine ( SEO ), Validasi HTML 5 , CSS 3, Script dan tehnik .... <a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">&rarr; Read more</a><br/><br/>
<span style="float:left;margin: -10px 15px 0 0;"><img alt="rivai silaban" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_u_M2EwFFnYrbNd2PqRtZHvm8VsOhyk1xKdcD1gQID32WNWfT_kYiYdXIPvU8WZcM_xp7iJ6c2qTH1q3kDzQJ-EmuRuiImLgcp_9pMhyphenhyphenCMS0KJlmLJrP6XkyE6gv2fD3yYWD1wgd6W2s/s1600/GAMBAR.gif" title="rivai silaban" /></span>Rivai Silaban - Blog Design
Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya.Tunduk Bukan berarti saya takut, tapi saya sadar atas apa yang saya miliki adalah kuasa Tuhan, hingga tiba saatnya nanti Tuhan akan mengambilnya dari saya...<a href="http://www.rivai.org" target="_blank" rel="bookmark" title="Rivai Silaban">&clubs; Read more...</a><br/>
</p> </div> </li> </ul>
<!-- Rivai Silaban | BLOG DESIGN CODE accordion horizontal blogspot end -->

Keterangan Code

• Tulisan warna MERAH pada code CSS merupakan lebar widget accordion horizontal blogspot ini
• Untuk tulisan warna HIJAU merupakan judul
• Kode tulisan warna BIRU merupakan link
• Kode tulisan ORANGE ganti dengan llink gambar anda.
• Silahkan anda edit CSS widget accordion horizontal blogspot ini sesuai dengan tampilan yang anda inginkan
• Untuk pemasangan pada wordpress.com silahkan kunjungi laman ini :
  http://www.rivai.org/2013/12/accordion-horizontal-wordpress
  

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 3:15 PM