Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Monday, January 13, 2014

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.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 12:47 AM

0 komentar :

Post a Comment

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog