Show up code blogspot style - cara membuat
show up code blogspot style sangat menarik, tampilan show up code
blogspot style ini juga termasuk unik. show up code blogspot style
memakai sistem jquery, buat anda yang menginginkan tampilan yang untuk
untuk halaman blog kesayangannya, anda dapat mencoba sistem ini untuk
menampilkan suatu code pada halaman anda. Untuk melihat tampilan show up
code blogspot style ini silahkan lihat demo melalui link demo dibawah
ini, Silahkan klik tulisan "Click to open code" pada halaman demo dan bila anda tertarik untuk memasangnya silahkan ikuti tutorial dibawah ini, langsung saja menuju TKP.
Code CSS here..
.show-up-code-blogspot-style {
margin:0 auto;
width:600px;
padding:0;
font-family: Arial;
font-size: 12px;
color: #333333;
}
.show-up-code-blogspot-style p {
margin:10px auto;
height: 300px;
overflow: auto;
}
.birustyle {color:#0000FF}
.merahstyle {color:#FF0000}
.boxshare {
position: relative;
padding: 10px;
overflow: hidden;
}
.hidden-code {
width:100%;
height:35px;
position:absolute;
bottom:0;
left:0;
}
.open-code {
padding:5px;
border-top:4px double #ddd;
background:#fff;
color:#333;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEZwKTmXoqtTclrpz_BP_AsKsIKNyXAUIb1nu-2Ks4A3Uxk5gCkCShZ2XstwVegiNNlcaWh6A_aIXWQNfhA1G6oQkfXkqm3CmcyCLiZs0YeI13-FkF4GQwGePrt4zrVfRU5NV_TM_tgXDC/s1600/BCD.gif" ) no-repeat 100% 50%;
}
.open-code a {
padding-right:22px;
font-weight:bold;
text-decoration:none;
color: #FF0000;
}
.open-code a:hover {color:#000;}
Pasang code script dibawah ini tepat dibawah code <body>
<div class="show-up-code-blogspot-style">
<div class="boxshare">
<div style="text-align: left;padding:0 10px;margin: 0;line-height: 20px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhveNgtNEX7k81MujQQ5hMEOh3h34V9gp3yuGRTMB62Ek4-Yat2fcyWo8H5YdLmMhheaM98T4xc-6gUE-oP83WJXJ5llH-jvRmH8fB4vmWvOexaOKA8fYPyL88HiU7YNIlem7kbCSu8sW0/s1600/bg.png);"><p>
<span class="merahstyle"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script></span><br></p></div><div class="hidden-code"></div></div>
<span class="birustyle"><script type="text/javascript"></span><br>
$(function(){<br>
var slideHeight = 0; <br>
var defHeight = $('.boxshare').height();<br>
if(defHeight >= slideHeight){<br>
$('.boxshare').css('height' , slideHeight + 'px');<br>
$('.open-code').append('<a href="#">Click to Read More</a>');<br>
$('.open-code a').click(function(){<br>
var curHeight = $('.boxshare').height();<br>
if(curHeight == slideHeight){<br>
$('.boxshare').animate({<br>
height: defHeight<br>
}, "normal");<br>
$('.open-code a').html('Close');<br>
$('.hidden-code').fadeOut();<br>
}else{<br>
$('.boxshare').animate({<br>
height: slideHeight<br>
}, "normal");<br>
$('.open-code a').html('Click to Read More');<br>
$('.hidden-code').fadeIn();<br>
}<br>
return false;<br>
}); <br>
}<br>
});<br>
<span class="birustyle"></script> </span>
<div class="open-code"></div></div><br/>
Pasang code script dibawah ini di atas code </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var slideHeight = 0;
var defHeight = $('.boxshare').height();
if(defHeight >= slideHeight){
$('.boxshare').css('height' , slideHeight + 'px');
$('.open-code').append('<a href="#">Click to open code</a>');
$('.open-code a').click(function(){
var curHeight = $('.boxshare').height();
if(curHeight == slideHeight){
$('.boxshare').animate({
height: defHeight
}, "normal");
$('.open-code a').html('Click to close code');
$('.hidden-code').fadeOut();
}else{
$('.boxshare').animate({
height: slideHeight
}, "normal");
$('.open-code a').html('Click to open code');
$('.hidden-code').fadeIn();
}
return false;
});
}
});
</script>
