Kali ini awan akan memberikan sedikit tips dan trik dalam membuat fariasi menarik dari blog, khusunya buat sobat awan yang biasa suka ngutak-atik tampilan agar kelihatan lebih menarik.
Jawabanya karena tampilan link ini memiliki efek slide dan akan bergerak menggeser seperti disenggol disaat kita mengarahkan mouse pointer ke arah link ini.
Ini buat antisipasi kegagalan dalam pengeditan sob.
Nah sampai disini dulu untuk sedikit info yang awan berikan kali ini.
Seperti judul artikel yang awan buat kali ini yaitu membuat link senggol. Kenapa disebut link senggol ?
Jawabanya karena tampilan link ini memiliki efek slide dan akan bergerak menggeser seperti disenggol disaat kita mengarahkan mouse pointer ke arah link ini.
Sebenarnya triks ini awan temukan saat berkunjung keblog sahabat (Tutorial Blog) saat melihat tampilan yang dihasilkan kayanya boleh juga untuk awan pelajari, dan berbagi pengetahuan buat sobat Awanzo Blogs semua. Selain dari segi cara yang cukup simpel juga keunikan yang dihasilkan dari link senggol ini bisa menambah keren blog sobat.
Untuk sobat awan yang pengen mencoba tampilan link senggol ini di blog sobat bisa ikuti langkah-langkahnya di bawah ini :
1. Sobat Login dulu ke dalam dasbor blog.
2. Klik Rancangan => klik Edit HTML.
3. Nah sampai disini kita jangan terburu-buru dulu sob..., seperti biasa Back Up dulu template sobat dengan cara klik link Download template lengkap.
Ini buat antisipasi kegagalan dalam pengeditan sob.
4. Cari kode ini :
</head>
5. Copy code dibawah ini dan letakkan diatas/sebelum kode:
</head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function()
{
slide("#sliding-navigation", 25, 15, 150, .8);
});
function slide(navigation_id, pad_out, pad_in, time, multiplier)
{
// creates the target paths
var list_elements = navigation_id + " li.sliding-element";
var link_elements = list_elements + " a";
// initiates the timer used for the sliding animation
var timer = 0;
// creates the slide animation for all list elements
$(list_elements).each(function(i)
{
// margin left = - ([width of element] + [total vertical padding of element])
$(this).css("margin-left","-180px");
// updates timer
timer = (timer*multiplier + time);
$(this).animate({ marginLeft: "0" }, timer);
$(this).animate({ marginLeft: "15px" }, timer);
$(this).animate({ marginLeft: "0" }, timer);
});
// creates the hover-slide effect for all link elements
$(link_elements).each(function(i)
{
$(this).hover(
function()
{
$(this).animate({ paddingLeft: pad_out }, 150);
},
function()
{
$(this).animate({ paddingLeft: pad_in }, 150);
});
});
}
//]]>
</script>
<style type="text/css">
ul.listpanah {list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtX1mRwtiZ_ZMcYJ1SRJmi0z86CNwn1yjw3Uisd5dFWtJWVxgx5PYeLQY_dfAvDalebN_v2WTx2cLr-9s71VCJKAKQVopShV5hKEucuiom8NBLdzOAzD_mvYvxam0jw2Wm-m_-6CpKAtWD/s12/List+6.jpg');}
a:link {color:#000;text-decoration:none;}
a:visited {color:#000;text-decoration:none;}
a:hover {color:#669CFF;text-decoration:none;}
</style>
Kemudian simpan template.
Langkah berikutnya tinggal penambahan widget/gadget pada blog sobat, seperti biasa kita klik Rancangan => tambah Gadget => Klik Html/JavaScript.
Kemudian sobat masukan code dibawah ini dan letakkan pada kolom JavaScript.
<div class id="sliding-navigation">
<ul class="listpanah">
<li class="sliding-element"><a href=" GANTI URL "target="_blank"> JUDUL 1 </a></li>
<li class="sliding-element"><a href=" GANTI URL "target="_blank"> JUDUL 2 </a></li>
<li class="sliding-element"><a href=" GANTI URL "target="_blank"> JUDUL 3 </a></li>
<li class="sliding-element"><a href=" GANTI URL "target="_blank"> JUDUL 4 </a></li>
<li class="sliding-element"><a href=" GANTI URL "target="_blank"> JUDUL 5 </a></li>
<li class="sliding-element"><a href=" GANTI URL "target="_blank"> JUDUL 6 </a></li>
<li class="sliding-element"><a href=" GANTI URL "target="_blank"> JUDUL 7 </a></li>
<li class="sliding-element"><a href=" GANTI URL "target="_blank"> JUDUL 8 </a></li>
<li class="sliding-element"><a href=" GANTI URL "target="_blank"> JUDUL 9 </a></li>
<li class="sliding-element"><a href=" GANTI URL "target="_blank"> JUDUL 10 </a></li>
</ul></div>
Setelah langkah diatas telah sobat lakukan semua berikutnya untuk langkah yang terakhir adalah pengecekan tampilan pada pekerjaan sobat.
Nah sampai disini dulu untuk sedikit info yang awan berikan kali ini.
Semoga ini dapat bermanfaat buat sobat Awanzo Blogs semua. Salam dari awan selamat bekerja dan semoga sukses.