Simple Toggle with CSS & jQuery

Berbagai trik penghias blog banyak dicari oleh para blogger maniak, karena merek memerlukan itu untuk menghiasi blognya agar blog mereka lebih bagus dan keren tentunya. Namun kalau terlalu banyak widget penghias blog atau aksesoris penghias blog maka blog akan menjadi berat loadingnya dan kemungkinan akan jarang sekali orang yang akan berkunjung di blog sobat. Sekarang saya memberikan trik widget penghias blog, "lah kok malah memberikan widget penghias blog?" soalnya widget ini tidak terlalu memberatkan blog karena menggunakan javascript yang tidak terlalu banyak. Mau tau kaya apa widget itu? lihat ke bawah yuk!

Demo

Web Design & Development

Need a Website?

Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Logo / Corporate Identity

Need a Logo?

Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Seach Engine Optimization

Need to be Heard?

Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.


Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

eCommerce

Have Product to Sell?

Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.

Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor.

Nah demonya seperti itu, sekarang tinggal pasang di blog sobat, bagaimana cara memasangnya? lihat ke bawah yuk!

1. Login ke blogger
2. masuk ke Rancangan >> lemen Halaman
3. Tambah kan sebuah gadget
4. lalu pilih yang HTML/javascript dan masukan kode di bawah ini
   
   
   .container {
   width: 500px; /*dapat sobat rubah sesuai keinganan*/
   margin: 0 auto;
   }
   h1 {
   font: 4em normal Georgia, 'Times New Roman', Times, serif;
   text-align:center;
   padding: 20px 0;
   color: #aaa; /*dapat sobat rubah sesuai keinganan*/
   }
   h1 span { color: #666;  /*dapat sobat rubah sesuai keinganan*/}
   h1 small{
   font: 0.3em normal Verdana, Arial, Helvetica, sans-serif;
   text-transform:uppercase;
   letter-spacing: 1.5em;
   display: block;
   color: #666; /*dapat sobat rubah sesuai keinganan*/}
   h2.trigger {
   padding: 0 0 0 50px;
   margin: 0 0 5px 0;
   background: url(http://www.sohtanaka.com/web-design/examples/toggle/h2_trigger_a.gif) no-repeat; /*Sobat dapat mengganti alamat gambarnya*/height: 46px; /*dapat sobat rubah sesuai keinganan*/
   line-height: 46px;
   width: 450px; /*dapat sobat rubah sesuai keinganan*/font-size: 2em;
   font-weight: normal;
   float: left;
   }
   h2.trigger a {
   color: #fff;
   text-decoration: none;
   display: block;
   }
   h2.trigger a:hover {
   color: #ccc;
   }
   h2.active {background-position: left bottom;}
   .toggle_container {
   margin: 0 0 5px;
   padding: 0;
   border-top: 1px solid #d6d6d6;
   background: #f0f0f0 url(http://www.sohtanaka.com/web-design/examples/toggle/toggle_block_stretch.gif) repeat-y left top;/*Sobat dapat mengganti alamat gambarnya*/overflow: hidden;
   font-size: 1.2em;
   width: 500px; /*dapat sobat rubah sesuai keinganan*/clear: both;
   }
   .toggle_container .block {
   padding: 20px;
   background: url(http://www.sohtanaka.com/web-design/examples/toggle/toggle_block_btm.gif) no-repeat left bottom;/*Sobat dapat mengganti alamat gambarnya*/}
   .toggle_container .block p {
   padding: 5px 0;
   margin: 5px 0;
   }
   .toggle_container h3 {
   font: 2.5em normal Georgia, "Times New Roman", Times, serif;
   margin: 0 0 10px;
   padding: 0 0 5px 0;
   border-bottom: 1px dashed #ccc;
   }
   .toggle_container img {
   float: left;
   margin: 10px 15px 15px 0;
   padding: 5px;
   background: #ddd;
   border: 1px solid #ccc;
   }
   </style>
   <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">
   </script>
   <script type="text/javascript">
   $(document).ready(function(){
   
   $(".toggle_container").hide();
   
   $("h2.trigger").click(function(){
   $(this).toggleClass("active").next().slideToggle("slow");
   });
   
   });
   </script>
   
   <div class="container">
   
   <h2 class="trigger">
   <a href="http://www.blogger.com/post-create.g?blogID=3923073571535799241#">Web Design &amp; Development</a></h2>
   <div class="toggle_container">
   <div class="block">
   
   <h3>
   Need a Website?</h3>
   <img alt="" src="thumbnail.gif" />
   Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.
   
   Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </div>
   </div>
   
   <h2 class="trigger">
   <a href="http://www.blogger.com/post-create.g?blogID=3923073571535799241#">Logo / Corporate Identity</a></h2>
   
   <div class="toggle_container">
   <div class="block">
   <h3>
   Need a Logo?</h3>
   <img alt="" src="thumbnail.gif" />
   Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.
   
   Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </div>
   
   </div>
   
   <h2 class="trigger">
   <a href="http://www.blogger.com/post-create.g?blogID=3923073571535799241#">Seach Engine Optimization</a></h2>
   <div class="toggle_container">
   <div class="block">
   <h3>
   Need to be Heard?</h3>
   <img alt="" src="thumbnail.gif" />
   Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.
   
   
   Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </div>
   </div>
   
   <h2 class="trigger">
   <a href="http://www.blogger.com/post-create.g?blogID=3923073571535799241#">eCommerce</a></h2>
   <div class="toggle_container">
   <div class="block">
   <h3>
   Have Product to Sell?</h3>
   
   <img alt="" src="thumbnail.gif" />
   Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus. Feugiat immitto ullamcorper hos luptatum gilvus eum. Delenit patria nunc os pneum acsi nulla magna singularis proprius autem exerci accumsan.
   
   Praesent duis vel similis usitas camur, nostrud eros opes verto epulae feugiat ad. Suscipit modo magna letalis amet et tego accumsan facilisi, meus. Vindico luptatum blandit ulciscor mos caecus praesent sed meus velit si quis lobortis praemitto, uxor. </div>
   </div>
   </div>
   
   
5. setelah itu klik tombol simpan dan lihat hasilnya

Bagaimana mudah bukan? trik ini harus disesuaikan dengan kebutuhan template, dari ukuran dan warna sehingga saat di pasang di blog kamu, widget ini terlihat bagus dan mennarik. Oiya template ini saya dapatkan dari sohtanaka.com. oke mungkin hanya itu saja yang bisa saya sampaikan. Terima kasih dan Happy Blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg