cara membuat pop up coding style blogspot

Cara membuat pop up coding style blogspot - postingan cara membuat pop up coding style blogspot ini memiliki tampilan menarik, cara membuat pop up coding style blogspot memakai fungsi jquery. Buat para blogger yang menyediakan berbagai tutorial yang bersangkutan dengan code ada baiknya anda memakai sistem ini, agar halaman blog anda tertata rapi. Untuk melihat tampilan dari cara membuat pop up coding style blogspot ini, silahkan klik link demo dibawah dan tes hasilnya, bila anda tertarik untuk memasangnya di halaman blogspot anda silahkan simak penjelasan dibawah ini, langsung saja menuju TKP.

KODE SCRIPT

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<script type="text/javascript" src="http://yourjavascript.com/1041438119/popup-1-0-1.js"></script>

CSS

.up_style { display: none; }
.lightboxcodestyle{display:none;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9999;height:100%;text-align:center;cursor:pointer;}.lightboxcodestyle .lightboxcodestyle-close{
position:absolute;
z-index:9999;
right:0;
top:0;
line-height:25px;
width:25px;
cursor:pointer;
text-decoration:none;
text-align:center;
font:Arial,sans-serif;
color:#FFFFFF;
background-color: #000000;
}.lightboxcodestyle:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.25em;}.lightboxcodestyle .lightboxcodestyle-content{
text-align:left;
display:inline-block;
vertical-align:middle;
position:relative;
padding:2%;
width:50%;
max-height:95%;
overflow:auto;
cursor:auto;
background-color: #333333;
color: #FFFFFF;
}.lightboxcodestyle .lightboxcodestyle-inner{display:block;}.lightboxcodestyle .titles{
font-size: 14px;
font-family: Verdana;
padding-bottom: 20px;
}.lightboxcodestyle .coding{
font-size: 12px;
font-family: Courier;
padding-bottom: 20px;
color: #FFFFFF;
height: 200px;
overflow: auto;
width: 100%;
word-wrap: break-word;
padding-right:20px;
}
.kuning {color: #FFFF00}
.biru {color: #00FFFF}
.hijau {color: #66FF00}

HTML

 <div>
<a href="#" masarie-styleup="#masarie" title='keterangan gambar' >Lihat code - Click here..!!</a>
</div>
<div class="up_style" id="masarie">
<div class="titles">Judul pup up anda... </div>
<div class="coding"><span class="kuning">KODE ANDA DISINI DENGAN, WARNA CODE KUNING </span><br>
<span class="biru">KODE ANDA DISINI DENGAN, WARNA CODE BIRU </span><br>
ISIKAN DENGAN CODE ANDA, TAPI SEBAIKNYA KONVERSIKAN DULU KODE ANDA AGAR TAMPILAN COE ANDA LEBIH MENARIK DAN ENAK DIPANDANG MATA, BILA ANDA TIDAK MENGKONVERSIKAN CODE ANDA MAKA CODE YANG ANDA PASANG TIAK AKAN BERPUNGSI ALIAS TIDAK MUNCUL<br/>
<p class="hijau">ANDA JUGA DAPAT MEMASANG TEXT DI DALAM CODE INI, SILAHKAN PASANG SENIRI TEXT ANDA. TEXT INI MEMAKAI COE TAG HTML CLASS HIJAU </p>
</div>

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit