Tuesday 14 August 2012
Bagi anda yang senang meng-edit blog, kali ini saya ada Tips menarik yang harus dicoba, trik ini dapat blog anda semakin indah dan menarik begitu pula dengan pengunjungnya akan menjadi betah di blog anda. berikut ini adalah caranya:
Silahkan Ikuti Langkah-langkah berikut :
1. Silahkan login akun Blog Anda
2. Pilih menu Rancangan dan Pilih Elemen Laman
3. Setelah itu pilih Tambah Gadget
4. Kemudian Tambahkan HTML/JavaScript
5. Dan Copy dan kode di bawah ini :
<!-- Widget - http://error-99.blogspot.com - Start -->
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width: 993px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#000000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
ul#navigation li a:hover{
background-color:#BDBDBD;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#FFFFFF;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(http://i1261.photobucket.com/albums/ii591/Arul_BLog/RSS.png);
}
ul#navigation .facebook a {
background-image: urlhttp://i1261.photobucket.com/albums/ii591/Arul_BLog/Facebook.png);
}
ul#navigation .twitter a {
background-image: url(http://i1261.photobucket.com/albums/ii591/Arul_BLog/Twitter.png);
}
ul#navigation .g-mail a{
background-image: url(http://i1261.photobucket.com/albums/ii591/Arul_BLog/Google.png);
}
ul#navigation .y-mail a{
background-image: url(http://i1261.photobucket.com/albums/ii591/Arul_BLog/Yahoo-1.png);
}
ul#navigation .youtube a{
background-image: url(http://i1261.photobucket.com/albums/ii591/Arul_BLog/YouTube.png);
}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<ul id="navigation">
<li class="rss"><a target="_blank" href="http://error-99.blogspot.com/atom.xml" rel="http://http://feeds.feedburner.com/asfarul">RSS Feed</a></li>
<li class="facebook"><a target="_blank"href="http://www.facebook.com/365212506868007">Facebook</a></li>
<li class="twitter"><a target="_blank"href="https://twitter.com/Arul_BLog">Twitter</a></li>
<li class="g-mail a"><a target="_blank"href="https://www.google.com/bookmarks/">Google</a>
<li class="y-mail a"><a target="_blank"href="https://www.Yahoo.com/bookmarks/">Yahoo</a>
<li class="youtube a"><a target="_blank" href="https://www.Youtube.com/">YouTube</a></li>
</li>
</li></ul>
<!-- Widget - http://error-99.blogspot.com - End-->
<style>
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 0px;
list-style: none;
z-index:999999;
width: 993px;
}
ul#navigation li {
width: 103px;
display:inline;
float:left;
border:0;
}
ul#navigation li a {
display: block;
float:left;
margin-top: -2px;
width: 100px;
height: 25px;
background-color:#000000;
background-repeat:no-repeat;
background-position:50% 10px;
border:1px solid #BDDCEF;
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-khtml-border-bottom-right-radius: 10px;
-khtml-border-bottom-left-radius: 10px;
text-decoration:none;
text-align:center;
padding-top:80px;
opacity: 0.96;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
}
ul#navigation li a:hover{
background-color:#BDBDBD;
}
ul#navigation li a span{
letter-spacing:2px;
font-size:11px;
color:#FFFFFF;
font-family:trebuchet-ms, arial, tahoma, Sans-Serif;
font-weight:bold;
text-shadow: 0 -1px 1px #fff;
}
ul#navigation .rss a{
background-image: url(http://i1261.photobucket.com/albums/ii591/Arul_BLog/RSS.png);
}
ul#navigation .facebook a {
background-image: urlhttp://i1261.photobucket.com/albums/ii591/Arul_BLog/Facebook.png);
}
ul#navigation .twitter a {
background-image: url(http://i1261.photobucket.com/albums/ii591/Arul_BLog/Twitter.png);
}
ul#navigation .g-mail a{
background-image: url(http://i1261.photobucket.com/albums/ii591/Arul_BLog/Google.png);
}
ul#navigation .y-mail a{
background-image: url(http://i1261.photobucket.com/albums/ii591/Arul_BLog/Yahoo-1.png);
}
ul#navigation .youtube a{
background-image: url(http://i1261.photobucket.com/albums/ii591/Arul_BLog/YouTube.png);
}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">
</script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
$(this).stop().animate({
'marginTop':'-80px'
},d+=150);
});
$('#navigation > li').hover(
function () {
$('a',$(this)).stop().animate({
'marginTop':'-2px'
},200);
},
function () {
$('a',$(this)).stop().animate({
'marginTop':'-80px'
},200);
}
);
});
</script>
<ul id="navigation">
<li class="rss"><a target="_blank" href="http://error-99.blogspot.com/atom.xml" rel="http://http://feeds.feedburner.com/asfarul">RSS Feed</a></li>
<li class="facebook"><a target="_blank"href="http://www.facebook.com/365212506868007">Facebook</a></li>
<li class="twitter"><a target="_blank"href="https://twitter.com/Arul_BLog">Twitter</a></li>
<li class="g-mail a"><a target="_blank"href="https://www.google.com/bookmarks/">Google</a>
<li class="y-mail a"><a target="_blank"href="https://www.Yahoo.com/bookmarks/">Yahoo</a>
<li class="youtube a"><a target="_blank" href="https://www.Youtube.com/">YouTube</a></li>
</li>
</li></ul>
<!-- Widget - http://error-99.blogspot.com - End-->
6. Setelah di Copy silahkan sahabat bisa mengganti Angka berwarna Hijau diatas untuk mengatur posisi widget pada blog sahabat.
7. Ganti URL/Alamat Blog di atas yang berwarna Kuning dengan URL/Alamat Blog sahabat8. Ganti Tulisan berwarna Biru diatas dengan ID Facebook sahabat.
9. Ganti Tulisan berwarna Biru Muda diatas dengan ID Twitter sahabat.
10. Setelah Selesai Silahkan Simpan/SAVE widget
kemudian lihat hasilnya.
Sumber Script:http://www.wizyuloverz.com/2012/05/cara-membuat-widget-kaleng-tersembunyi.html
4 comments
Join back kawan...
http://for-jkt48.blogspot.com/
tessting
Thanks Info Nya bro :))
sorry sob :( ini lupa dikasih sumber soalnya udh 1 thun yang lalu pada saat itu saya masih awam di dunia blogger :) mksih sob udh ngingetin salam damai :D
Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert KodeMember AktifJoin This Blog