Cara Buat Widget Pratinjau/ DEMO Ala Kangsigit

Hai sahabat blogger, senang sekali masih diberi kesempatan untuk berbagi ilmu buat kalian semua. Pada kesempatan kali ini saya hendak share widget demo gratis yang lain daripada yang lain.

Widget ini dibuat khusus untuk menampilkan hasil atau efek dari javascript, css maupun kode-kode HTML lainya. Mungkin bagia Anda yang baru menemukan blog saya belum tahu dengan widget yang saya maksud. Sebab widget ini saya buat sendiri dan baru saya terapkan di beberapa artikel saja.

Beberapa postingan saya yang telah saya tempelin widget Pratinjau ini diantaranya

  1. Cara Menambahkan Link HTML Ke Gambar Ukuran Manual
  2. CSS Button Generated - Cara Mudah Buat Button Keren
  3. Cara Buat Tulisan Melayang
  4. Cara Memasang Widget StopWatch pada Blog
  5. Dan masih banyak lagi yang lainya.

Bagi sobat yang pengen juga pasang tools Pratinjau ini, silahkan ikuti langkah-langkah dibawah.
Copy Code
<script type="text/javascript">
function Open(form){if((!form.pratinjau.value)){alert("Masukkan kode CSS")}else{pratinjau_KS=window.open("");pratinjau_KS.document.open();pratinjau_KS.document.write("<HTML><HEAD><title>"+form.JudulPratinjau.value+"</title><style> body {color : #787878;font-size : 11px;background-color : #000;font-family : cursive;margin : 0;padding : 0;margin: auto; max-width: 70%;} h3 {margin : 0;margin-top:6px;margin-bottom:6px;padding-bottom : 2px;text-align:center;color:rgb(74, 226, 14);}p {margin-top : 3px;margin-bottom : 3px;} i {font-size:15px;color:yellow;}.bmenu{font-size:15px;color : #0084b5;text-shadow : #000000 1px 1px 2px;background-color : #000406;background-repeat : repeat-x;background-position : 50% top;margin-top : 1px;margin-bottom : 1px;padding : 2px;border : 1px solid #005064;}.bmenu a {color : #0084b5;border-bottom : 1px dotted #004354;}.bmenu a:hover {color : #25c5ff;border-bottom : 1px dotted #006882;}.gmenu {font-size:15px;color : #75bf00;background-color : #030500;background-image : url(http://3.bp.blogspot.com/-l33ec0SJNXg/U_Ya7uSp_kI/AAAAAAAAAoI/NAkqhgNaMJQ/s1600/kangsigit-biru.gif);background-repeat : repeat-x;background-position : 50% top;margin-bottom : 1px;padding : 2px;border : 1px solid #415f00;}.gmenu a {color : #75bf00;background-repeat : repeat-x;background-position : 50% top;margin-bottom : 2px;padding : 3px;text-decoration:none}} </style></HEAD><BODY>");pratinjau_KS.document.write("<FONT color=#c0c0c0 face=verdana size=2><div class='gmenu'><h3>Informasi Aktual And Tips-Trik | Kangsigit.com</h3></div>");pratinjau_KS.window.document.write("<div class='bmenu'><b style='text-transform:capitalize'>&#9474;&#9608;&#9553;&#9733;PRATINJAU&#9733;&#9553;&#9608;&#9474; :: "+form.JudulPratinjau.value+" ::</b></div><div class='gmenu'/><div class='gmenu'/><div class='bmenu'/><div style='padding:5px' class='gmenu'>"+form.pratinjau.value+"</div><div style='padding:5px;text-decoration:none;' class='bmenu'>Selamat datang di blog <a href='http://www.kangsigit.com'>Kangsigit.</a> Blog ini menyajikan kumpulan tips dan trik seputar SEO Blogger.<br />Adapula beberapa tools yang telah kami publikasikan untuk kalangan daerah tertentu terutama daerah jawa meliputi <a href='http://www.kangsigit.com/2013/09/cara-mengetahui-hari-kelahiran-weton.html'>Alat Cek Weton</a>, "+form.button.value+", <a href='http://www.kangsigit.com/2014/08/cara-menentukan-hari-baik-pernikahan.html'>Hari Pernikahan yang Baik</a>, <a href='http://www.kangsigit.com/2014/08/watak-dan-sifat-menurut-neptu-kelahiran.html'>Ramalan Watak Menurut Weton</a>, dan lain-lain.</div></div></div><div class='gmenu'/><div class='gmenu'/><div class='bmenu'></div><div class='bmenu'></div><div class='bmenu'></div><div class='bmenu'></div><div class='bmenu'></div><div class='bmenu'></div><div class='bmenu'></div><div class='bmenu'></div><div style='background-color:#093F09;color:rgb(46, 144, 85);' class='bmenu'><h5 style='text-align:center'>Copyright &#169; 2013-2014. <a href='http://www.kangsigit.com'>Informasi Aktual And Tips-Trik</a> | Widget Demo by: <a href='http://www.facebook.com/she.get.handsomeness'>Sigit Purnomo</a> | Powered by: <a href='https://www.blogger.com'>Blogger</a></h5></div></FONT></BODY></HTML>");pratinjau_KS.document.close()}}
</script>
<form><input name="button" type="hidden" value="<a href='http://www.kangsigit.com/2014/07/ramalan-jodoh-dan-pasangan-hidup.html'>Ramalan Jodoh</a>"/>
<input type="button" name="JudulPratinjau" style="font-size:19px;border: 0;border-bottom:inset 1px #fff;background-color:#409b68;color:#fff; height: 30px; padding: 5px; width: 98%;text-align:left;" value="Your title here"/>
<textarea onclick="this.focus();this.select();" name="pratinjau" style="cursor:copy;background-color:#409b68;color:#fff;border: 0; height: 200px; padding: 5px; width: 98%;">TEKS ANDA DISINI</textarea>
<input onclick="Open(this.form)" style="background-color: transparent; color: #0053f9; cursor: pointer; float: right; font-size: 20px; font-weight: bold;" type="button" value="&#9600;&#9604;&#9600;&#9604; Pratinjau &#9600;&#9604;&#9600;&#9604;" />
</form>

Haslinya seperti dibawah ini :


Click Pratinjau =>>
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini