Show Your HTML/Javascript and Css Codes In Bulb Lights

Showing HTML/Javascript codes is a most important part. Every blogger try something new to show their HTML/Javascript codes diffrently. Today I am going to show you this amazing tool which shows your HTML.Javascript code in light of glowing bulb. Actually it is a magic of css no need to install any widget,just by adding a simple code.

View Demo

How To Add It To Blogger ?

Let's see how to add this tool to blogger.

1. First go to Blogger > Design > Edit HTML
2. Now Search for the tag ]]></b:skin>
3. Copy and paste below code just above/before ]]></b:skin> tag.

.code1 {
overflow:auto;width:503px;height:200px;
font-family: "Consolas", "Courier New", Courier, mono, serif;
color:#848176;
margin : 15px 35px 15px 15px;
padding : 10px 10px 10px 35px;
clear : both;
list-style-type : none;
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgweX-n90hAeRLb1PAXIGwAAyJDJ3ObBvl5UYK4_7p5paW6EnCmuHn1fVlE8zO6grGYXzXAz5Z96C5CJcxbyRJLK7IE5DiCE_twz2Hc_8C2al2hSIrc7dITY_sNTzJrhXh2xiubNAIf5PRs/s320/btsnts-show-codes1.jpg) repeat-y top left;
border : 1px solid #000000;
border-left:20px solid #ccc;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition-duration:all .3s ease-in-out;transition:all .3s ease-in-out;-webkit-border-radius:3px;-moz-border--moz-border-radius: 23px 20px 20px 20px;border-radius: 23px 20px 20px
}
.code1:hover{
background : #000000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0kPSiGRfF2tKRCEz15wtXDVZLsHUs19-9ZOPwoLHk4nwCZdqe016EX0t_k3pnsiZL4SnZRK27pO4M-D-Nk7pu4_vgYsRz0h6a1hN5HT1gzEcDK57xxzDY1sdIsZvu-0fzFLUDCEaJmW1g/s1600/btsnts-show-codes2.jpg) repeat-y top left;
color:#FEF9BF;
border : 1px solid #000;
border-left:20px solid #ccc;
-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);
box-shadow: 10px 10px 5px #888888;
}

How To Show It In Blogger Posts ?

1. Go to your post editor and choose Edit HTML.

2. Add <div class="code1"> Your Code Here </div>

Note - If you want to show your HTML/Javascript in your posts then firstencode them

If still you are getting any problem then throw it into comment box.

Cara Membuat Widget Komentar Terbaru Dengan Efek Marquee / Berjalan

Cara Membuat Widget Komentar Terbaru Dengan Efek Marquee / Berjalan - Kali ini saya akan membahas mengenai Tutorial Blog yaitu Cara Membuat Widget Komnetar Terbaru Dengan Efek Marquee / Berjalanfungsi widget ini menampilkan Komentar terbaru di Blog sobat dengan Efek berjalan dari atas ke bawah silahkan lihat demo nya dibawah ini




On Apr 21 mery commented on cara setting emulator ps1 epsxe 170 di
gan,,kok aku mo config video nya koq gag ad pilihan Pete's DX6 D3D Driver 1.77?? gimana sih?

On Apr 21 www.michaellandresteven96.blogspot.com commented on cara membuat related post dengan
makasih gan ijin nyobain ya

On Apr 20 cimotivator commented on cara membuat 3 tab menu dengan jquery
mas,bikin tutor mengenai cara membuat logo seperti blazerracing donk....pliss........klo udah...(more)

On Apr 20 Fajar Lesmana commented on stop geng motor stop kekerasan
Ya bener gan, sebaiknya untuk apa ikut-ikutan kaya gitu ga ada gunanya

On Apr 20 Smooth-x commented on tombol share jquery dengan efek slide
cakep om... dah ane coba.. sip.. dah...matur nuhun...

On Apr 20 Fajar Lesmana commented on cara membuat menu horizontal dekat
Sama-sama gan

On Apr 20 Anonymous commented on sony xperia s resmi masuk indonesia
mantab artikelnya, kunjungan balik ya sob diwww.starchau.blogspot.com

On Apr 20 cara menyembuhkan diabetes commented on stop geng motor stop kekerasan
bener tuch....klo loe emg pria sejati buatlah sesuatu yang lebih bermanfaat bwt masyarakat supaya...(more)

On Apr 20 cara menyembuhkan diabetes commented on khasiat jus alpukat bagi kesehatan
waahhhhhbaru tahu nich klo buah alpukat itu bagus juga yach ntuk kesehatan....

On Apr 20 SHARE AJA commented on cara membuat menu horizontal dekat
Terima kasih tips nya sob, udah aku praktekkan di blog aku, salam kenal.

On Apr 19 Fajar Lesmana commented on cara memodifikasi widget subscribe via
Maaf mas saya ga bisa kasih tahu karena di kotak komentar ini ga bisa menulis script

On Apr 19 Fajar Lesmana commented on cara membuat related post dengan
Nah kan itu bisa, dan terimakasih atas nasihat nya.

On Apr 19 Fajar Lesmana commented on cara menambahkan caption pada gambar
Sama-sama gan, salam persahabatan juga

On Apr 19 Fajar Lesmana commented on cara setting emulator ps1 epsxe 170 di
ya yang penting kaset tersebut berlabel PS1, apapu jenis kaset nya jika kaset berlabel PS1 bisa...(more)

On Apr 19 Fajar Lesmana commented on widget share egg yang bisa buka tutup
Oh trimakasih atas anugrah dan AWARD nya ya Sob.

Mau tahu cara membuatnya silahkan copy kode dibawah ini dan paste ke HTML Java Script.

<marquee align="center" direction="down" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2">
<script src="http://buternaker.googlecode.com/files/comment-slide.js">
</script>
<script>
var numcomments = 15;
var showcommentdate = true;
var showposttitle = true;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://blazerracing.blogspot.com/feeds/comments/default?alt=json-in-script&amp;callback=showrecentcomments">
</script>
</marquee>

Sumber Java Script www.kucoba.com


Ganti kode yang berwarna merah denagn URL Blog sobat.
Sekian Penjelasan dari saya semog artikel bermanfaat bagi sobat