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.
# | FITUR | Cek |
|---|---|---|
© www.rivai.org - Minggu 12 Jan 2014 | show up code blogspot style | ||
1 | Valid HTML 5 | yes |
2 | Valid CSS 3 | yes |
3 | Struktur SEO | yes |
4 | Loading Fast | Standart |
5 | Fungsi JavaScript | Yes |
6 | wordpress | optional |
7 | Size | 7kb |
| show up code blogspot style | Judul | |
| http://www.rivai.org/2014/01/show-up-code-blogspot-style.html | Link Sumber | |
| https://googledrive.com/host/0Bw9mMVirmSW0YkpZM3VoMzNhekk | Link Demo | |
show up code blogspot style
# Install code CSS
- Login ke dashboard blog anda
- Masuk ke "TEMPLATE" lalu klik " Edit HTML "
- Cari code ]]></b:skin> setelah ketemu..
- Copy Code script CSS show up code blogspot style dibawah ini, pastekan tepat diatas code ]]></b:skin> yang telah anda temukan tadi atau bila template blog anda memakai <style> silahkan pastekan kode CSSshow up code blogspot style tepat diatas </style> template anda.
Setelah anda selesai memasang CSSshow up code blogspot styleini seperti yang telah diutarakan diatas , saatnya anda untuk memasang scriptnya sebagai motorik dari tampilanshow up code blogspot style pada postingan kali ini.
- Cari code </head>
- Copy code dibawah ini dan pastekan di atas code </head>
- Bila template anda sudah memiliki code jquery sebelumnya, code jquery yang berwarna MERAH dibawah tidak usah diikutkan, copy hanya code warna BIRU saja,
<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>
- Untuk memasang code html show up code blogspot style pada postingan kali ini anda dapat memasangnya di mana saja tetapi masih di ruang lingkup blogspot anda.
- Pada tutorial kali ini saya memasang show up code blogspot style ini di dalam postingan.
- Pada halaman postingan, silahkan anda klik tulisan atau tombol " HTML " yang berada disebelah kiri anda, disamping tombol compose. Setelah anda klik tombol "HTML " tersebut kemudian copy code yang berada di dalam spoiler dibawah ini pakemudian pastekan , edit codenya dan lihat " Pratinjau "setelah anda sudah merasa sempurna silahkan anda publish, silahkan klik tombol "Publikasikan"
- Code warna HIJAU merupakan code class pemberi warna pada code, code class yang tersedia ada warna BIRU ( class="birustyle" ) dan MERAH ( class="merahstyle" )
- Code tulisan warna PINK merupakan letak code yang ingin anda masukkan, untuk tag HTML atau script anda harus mengkonversikannya terlebih dahulu.
- Silahkan anda edit sesuai dengan kebutuhan template anda, semoga bermanfaat.
Posting Komentar