show up code blogspot style

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.

Demo

Pasang code script dibawah ini didalam code CSS template anda.

Code CSS here..

/*****************************************
Name : show up code blogspot style
By : Rivai Silaban | Blog Design
Update :Minggu 12 January 2014 
site : www.rivai.org
******************************************/
.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/AVvXsEjdYYhly1zSgCTMA5kKNl0eWJ8RwBGRcv5fdx5SeRM4H-PswXxAzSBNG7cdkx9bKGLkkDrMjIjNFSO78gBk_R_ZC2HSwT80YgKPlkJ63CNHL6vxttOI2g_gdxU4_z5D1eQgt09_aPg-2cP8/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;}
/*** www.rivai.org CSS show up code blogspot style and ***/ 

Pasang code script dibawah ini tepat dibawah code <body>

Code HTML here..

 <!-- www.rivai.org code show up code blogspot style start-->
 <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/AVvXsEgG3EL-meD5ca2wnKX-syu3TTajdmsP5VH4HqtvKVxQQ-a8xq3kax_VjhxcQdcecOSJODGpKdff2CBcZ7-J6Me-ObNmHDAO_TXbnHHiGjP5chPrByauU8XF8KN-K5jMZZg8B-HEJ9lNw8A/s1600/bg.png);"><p>
<span class="merahstyle">&lt;script type=&quot;text/javascript&quot; src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js&quot;&gt;&lt;/script&gt;</span><br>
<span class="birustyle">&lt;script type=&quot;text/javascript&quot;&gt;</span><br>
$(function(){<br>
var slideHeight = 0; <br>
var defHeight = $('.boxshare').height();<br>
if(defHeight &gt;= slideHeight){<br>
$('.boxshare').css('height' , slideHeight + 'px');<br>
$('.open-code').append('&lt;a href=&quot;#&quot;&gt;Click to Read More&lt;/a&gt;');<br>
$('.open-code a').click(function(){<br>
var curHeight = $('.boxshare').height();<br>
if(curHeight == slideHeight){<br>
$('.boxshare').animate({<br>
height: defHeight<br>
}, &quot;normal&quot;);<br>
$('.open-code a').html('Close');<br>
$('.hidden-code').fadeOut();<br>
}else{<br>
$('.boxshare').animate({<br>
height: slideHeight<br>
}, &quot;normal&quot;);<br>
$('.open-code a').html('Click to Read More');<br>
$('.hidden-code').fadeIn();<br>
}<br>
return false;<br>
}); <br>
}<br>
});<br>
<span class="birustyle">&lt;/script&gt; </span>
</p></div><div class="hidden-code"></div></div>
 <div class="open-code"></div></div><br/>
<!-- www.rivai.org code show up code blogspot style end-->

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>

Bila anda masih belum memahami tata cara pemasangan cara membuat show up code blogspot style ini silahkan kunjungi halaman sumbernya, semoga bermanfaat..
Sumber : http://www.rivai.org/2014/01/show-up-code-blogspot-style.html

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 : 12:47 AM

show up code blogspot style

Rivai Silaban - Blog Design

System

Script Code

Support

Widget

Monday, January 13, 2014