Membuat Postingan Seperti Koran atau Majalah

Kali ini saya akan berbagi gimana cara membuat tampilan posting seperti koran atau majalah, Lihat contohnya seperti dibawah ini :

Contoh 1

<table width=”500″ border=”0″ cellpadding=”0″ cellspacing=”10″>
<tr>
<td width=”166″ valign=”top“>Postingan anda</td>
<td width=”166″ valign=”top“>Postingan anda</td>
<td width=”166″ valign=”top“>Postingan anda</td>
</tr>
</table>

HASIL...

Postingan anda

Postingan anda

Postingan anda

Keterangan :

Anda bisa merubahnya sesuai keinginan anda.
table width=”500″ –> lebar table
td width=”250″ –> lebar kolom 1
td width=”250″ –> lebar kolom 2
cellpacing=”10″ –> jarak antar kolom

Sumber : http://sebarnewsdot.wordpress.com/2013/10/26/membuat-kolom-tulisan-seperti-koran-atau-majalah/

CONTOH 2

<table border="0" width="100%" cellspacing="5" style="background: #dcdcdc; color:808080"> <tr>
<th colspan="2">Teks judul</th>
</tr>
<tr>
<td>Teks kolom 1</td>
<td>Teks kolom 2</td>
</tr></table>

HASILNYA...

Teks judul
Teks kolom 1	Teks kolom 2

CONTOH 3

GOOGLE

SUBMIT
Linkmarket.com

Recent Post Dengan Animasi jQuery

Url : http://mdf-blog.blogspot.com/2012/12/recent-post-dengan-animasi-jquery.html

DEMO : http://mdf-demo.blogspot.com/2012/12/artikel-terbaru-animasi-jquery.html

2 Efek Accordion Pada Sidebar Dengan "jQuery"

Pasang Efek Accordion Pada Sidebar Blog dengan "jQuery"


Membuat Sidebar Accordion dengan jQuery

Download MP3 Alquran Online

Membuat Menu Accordion Tanpa Edit HTML

1. Login ke Blogger dengan akun Anda
2. Masuk ke Layout, pilih HTML/Javascript
3. Kemudian masukkan kode berikut ini ke dalamnya (kek bikin masakan aja) :

<style type="text/css">
#accordion{width:100%;margin:auto;border:0px solid white}
#accordion h2{padding:5px 10px;background-color:#ccc;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8HdRXNusuYjdv5-NBbC2TTfwzMWCVbBVRvN6Sn0Rp1URg7YmCit4GBjmvLuJE_pM7_eqWB6-oCvccOjyYIWxjb1gES7yPmMlcA7n4AbGcoCKXwmjnq574k5gs8wAGIF6rIJHmRZ9ucqw/s1600/arrow_right.gif);background-repeat: no-repeat;background-position: right center;color:#000;font:normal 11px Tahoma;border-bottom:1px solid #FFF;cursor:pointer;}
#accordion .content{font:normal 11px Arial;padding:5px 10px;background:#eee;}
#accordion .content ul {list-style:none;margin:0 0 0;padding:0 0 0;}
#accordion .content li {background-image: url(); background-repeat: no-repeat;background-position: left center;margin:0;padding:2px 0 3px 0;text-indent:0px;border-bottom:1px dotted #ccc;line-height:1.3em;}
#accordion .content li a:hover {text-decoration:none;color:#000;}
#accordion h2.active{background-color:#bbb;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoL3c73dVNT1r6-TElYaQB69Abc2zP1aFxZ2fy4AoSXTEIrDtHzRLr8JQPXdhGCwJrlgCW-eVmBrLw0tKuiv24I-meIIwm7McyM3iOD2Opmwo7y8SwnvJ97gP0Np83JkkjOYotitC0WQk/s1600/arrow_down.gif);background-repeat: no-repeat;background-position: right center;font-weight:bold;}
</style>
<script type="text/javascript" src="http://yourjavascript.com/121511228073/accordion-menu.js"></script>
<script type='text/javascript'>
$(function() {
$('#accordion .content').hide();
$('#accordion h2:first').addClass('active').next().slideDown('slow');
$('#accordion h2').click(function() {
if($(this).next().is(':hidden')) {
$('#accordion h2').removeClass('active').next().slideUp('slow');
$(this).toggleClass('active').next().slideDown('slow');
}
});
});
</script>
<div id="accordion">
<h2>Title 1</h2>
<div class="content">
Isi konten 1
</div>
<div id="accordion">
<h2>Title 2</h2>
<div class="content">
Isi konten 2
</div>
<div id="accordion">
<h2>Title 3</h2>
<div class="content">
Isi konten 3
</div>
<div id="accordion">
<h2>Title 4</h2>
<div class="content">
Isi konten 4
</div>
<div id="accordion">
<h2>Title 5</h2>
<div class="content">
Isi konten 5
</div>
</div></div></div></div></div>

4. Terakhir Save, lihat hasilnya

Souce