cara membuat widget link di atas postingan blog

Fitur link diatas postingan blog berguna sebagai fasilitas mempermudah pengunjung, cara membuat widget link di atas postingan blog selain menambah design blog menjadi elegan dapat juga digunakan sebagai fasilitas widget pendukung untuk melengkapi fasilitas wiget blog lainnya agar pengunjung halaman blog lebih memahami apa isi dari blog tersebut. Fitur widget link diatas postingan blog ini tergolong jarang dipasang di halaman blog, tapi buat suatu website hal ini sudah biasa kita lihat. Postingan kali ini terinspirasi oleh seorang teman lama yang membutuhkan suatu widget link, setelah beliau melihat postingan artikel saya kemarin. Oke untuk melihat tampilannya silahkan klik DEMO dibawah ini dan lihat bagian link yang berada tepat dibawah menu halaman demo tersebut. Untuk mengetahui cara pemasangannya di halaman blog kesayangan anda silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.

Demo

Widget link yang akan kita buat ini memerlukan suatu tempat di layout halaman blog, jadi ada baiknya kita membuat kolom layoutnya dulu untuk tempat widget yang akan kita sematkan kode nantinya.

Untuk membuat atau menambah kolom layout diatas postingan halaman blog silahkan kunjungi dan pasang kolom layoutnya klik : Cara membuat 4 kolom layout di atas postingan blog, setelah anda pasang kita akan melanjutkannya ketahap selanjutnya dan silahkan simak tutorial dibawah ini.

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 : Rivai Silaban | Blog Design
Update : Senin, 23 September 2013
******************************************/
.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/AVvXsEhBIvxVMSAyyuIvNxe8y_SAZntQKfUE3iYf0T1zgU6n4oLo3_HUuuIWSKavR7naPS2-S0xETIl2D0DvDSJq1CgSK0soJg1oe-LBd3H9U9lyWguw8WDiulGkqJ2_yT8GJbUzucMNdcrXHyQ/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 anda.
  

Kesimpulan

Widget link di atas postingan halaman blog ini sangat bermanfaat untuk berbagai fitur link suatu halaman, agar para pengunjung halaman blog anda semakin memahami isi dari postingan blog anda, oleh karena adanya suatu link ke halaman tertentu.

Bila anda mengalami kesulitan dalam memasang kodenya di halaman blog anda atau ada kode yang error silahkan hubungi saya atau share bersama saya melalui form Comment dibawah.

Wiget Link di atas postingan blog
Senin, 23 September 2013
Rivai Silaban | Blog Design

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 11:21 AM