Cara Memasang Box Rekomendasi di Bawah Judul artikel di Blogger

Tutorial Blogger

Pada kesempatan kali ini saya akan membuatkan anda artikel Cara Memasang Box Rekomendasi di Bawah Judul artikel di Blogger, Box Rekomendasi itu apa? ini halnya seperti membuat artikel terkait di blog tetapi Box rekomendasi ini tidak menggunakan RSS tetapi post yang ada di Box Rekomendasi ini kita yang menentukan sendiri artikel yang akan menurut kita wajib dibaca oleh pengunjung blog kita.

Cara Memasang Box Rekomendasi

1. Masuk ke akun blogger.com anda.
2. Pergi ke Template -> Edit HTML.
3. Cari kode ]]></b:skin> gunakan CTRL+F agar mempercepat pencarian.
4. Copy dan Paste kode dibawah lalu masukkan diatas kode ]]></b:skin> tadi,

/* Box rekomendasi by alwinto */
.recomendedboxalwinto{margin: 15px;margin-bottom: 30px;padding:15px;border: 1px solid lightgray;background-color: #f8f8ce;}
.alwinrecomended-top-box{width:30%;float:left;}
.alwinrecomended-top-box ul{margin:0;padding:0;list-style:none;padding:0;margin:0;}
.alwinrecomended-top-box ul li a{padding:5px 3px;display:block;}
.alwinrecomended-top-box .box-title{padding:3px; border-bottom:3px solid #4588f3;}

5. Cari lagi kode <div class='post-header'>.
6. Lalu masukkan kode dibawah tepat diatas kode  <div class='post-header'> tadi.

<div class='recomendedboxalwinto'>
<div class='alwinrecomended-top-box' style='margin-right:28px;'>
<ul>
<li class='box-title'><b>Tutorial 1</b></li>
<li><a href='/'>Tutorial 2</a></li>
<li><a href='/'>Tutorial 3</a></li>
<li><a href='/'>Tutorial 4</a></li>
<li><a href='/'>Tutorial 5</a></li>
<li><a href='/'>Tutorial 6</a></li>
</ul>
</div>
<div class='alwinrecomended-top-box' style='margin-right:28px;'>
<ul>
<li class='box-title'><b>Tutorial 7</b></li>
<li><a href='/'>Tutorial 8</a></li>
<li><a href='/'>Tutorial 9</a></li>
<li><a href='/'>Tutorial 10</a></li>
<li><a href='/'>Tutorial 11</a></li>
<li><a href='/'>Tutorial 12</a></li>
</ul>
</div>
<div class='alwinrecomended-top-box' style='float:right;'>
<ul>
<li class='box-title'><b>Tutorial 13</b></li>
<li><a href='/'>Tutorial 14</a></li>
<li><a href='/'>Tutorial 15</a></li>
<li><a href='/'>Tutorial 16</a></li>
<li><a href='/'>Tutorial 17</a></li>
<li><a href='/'>Tutorial 18</a></li>
</ul>
</div>
<div style='clear: both;'></div>
</div>

Catatan :

Text Tutorial 1 - Tutorial 18 silahkan ganti dengan judul artikel yang anda akan buat, <a href='/'> yang garis miring itu ( / ) ganti dengan URL LINK artikel anda.

7. Simpan dan lihat hasilnya.
8. Selesai.

Demikianlah artikel ini.