BUAT LINK DIATAS POSTINGAN WIGDET

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 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 : Widget link di atas postingan blog
By : mismanpbg
Update : jum at, 31 januari 2014
******************************************/
.bdlink-main {
width:80%;
height:auto;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
margin:5px;
text-align: left;
background-color: #CCCCCC;
}
.bdlink-main h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #990000;
font-style: italic;
font-weight: bold;
text-shadow:2px 2px 1px #fff;
}
.bdlink-main ul li{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
line-height: 1.7em;;
list-style-type: none;
margin-left:-35px;
padding-left:15px;
background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP2QReIdxL1M0GxMAw5kbc-i6ZWYeJfIyyplwZCAYntgCEhXoIBZk8GGy0g1c765BK5mH9OpOZfpPK8I-e9DWS4fcEdkqSWdn5nyV7INChG_7q_9AO6-dV8sgXe5Tghmwbvv9HRORqz7c/s1600/arrow-grey.gif') no-repeat -2px 7px;
}
.bdlink-main ul li a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000066;
line-height: normal;
text-decoration: none;
}
.bdlink-main ul li a:hover{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
line-height: normal;
text-decoration: none;
}
.bdlink-main .bdlabel-main{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
line-height: normal;
width: 100%;
float: left;
margin-left: 8px;
margin-right: 5px;
margin-top:-15px;
}/* BD CSS end */

Install Program Tag HTML

• Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
• Untuk memasang kode htmnya anda dapat memasangnya dimana saja. Untuk tutorial kali ini saya memasangnya di atas postingan halaman blog seperti 4 kolom layout yang telah anda pasang sebelumnya.
• Silahkan pilih " Tata Letak " pada dasbor blog anda.
• klik "Edit " ( Anda hanya mengklik edit pada gadget " HTML / Javascript " sebab pada tutorial membuat kolom layout tersebut saya sudah memasangkan gadget " HTML / Javascript " 4 kolom, silahkan buka satu persatu, dan masukkan kode di spoiler yang ada dibawah ini kedalam satu gadget, ulagi lagi hal tersebut sampai 4 gadget " HTML / Javascript " terisi semua seperti pada demo tutorial ini. )
• Setelah muncul halaman " HTML/JavaScript ".
• Copy kode didalam spoiler dibawah ini kemudian pastekan di gadget anda.
• Edit script dan save 
•  <!-- BDRS KODE LINK start -->
  <div class="bdlink-main">
  <div class="bdlabel-main" >
  <h2>JUDUL LINK </h2>
  <ul>
  <li><a href='LINK ANDA' target='_blank' title='LINK SATU'>
  LINK SATU
  </a></li>
  <li><a href='LINK ANDA' target='_blank' title='LINK DUA '>
  LINK DUA
  </a></li>
  <li><a href='LINK ANDA' target='_blank' title='LINK TIGA '>
  LINK TIGA
  </a></li>
  </ul>
  </div></div>
  <!-- BDRS KODE LINK End -->

Keterangan Code

• Setelah anda memasang kolom layoutnya, kemudian anda memasang kode linknya kedalam widget yang telah anda pasang sebelumnya.
• Tulisan kode warna MERAH ganti dengan Link anda.
• Kode tulisan warna BIRU ganti dengan nama link anda, dan untuk " title="..." " samakan saja tulisannya dengan nama link anda.
• Untuk tulisan kode warna HIJAU ganti dengan judul widget anda.
• Silahkan edit CSSnya untuk menyesuaikan tampilannya terhadap halaman blog