Install Program CSS
- Login ke dashboard anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari code </head>
- 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 */
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 -->
- 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
