Pages

Subscribe:

Rivhay Of Generations91

Tampilkan postingan dengan label blog. Tampilkan semua postingan
Tampilkan postingan dengan label blog. Tampilkan semua postingan

Senin, 31 Oktober 2011

Cara Menampilkan Kode html/javascript Didalam Posting

Diawali Dari Saya ingin sekali membuat tutorial membuat "Widget Nempel Dipinggir (Floting Widget)"  
 Dan Akhirnya Bisa Juga Menampilkan HTML/JavaScript Di Postingan Saya ...Ok Ga Perlu Basa basi Lagi Langsung Kita Tancep Mata Dan tancep otak untuk memahami Semua Yang ingin kita capai sebagai berikut :

  1. Masuk Ke Situs Encode HTML/JavaScript Disini Ya Gan 
  2. Masukan kode html/javascript yang akan anda tampilkan di postingan dalam kotak yang disediakan seperti Gambar Diatas
  3. Kemudian Klik tombol Encode
  4. Setelah itu copy hasil encode di dalam kotak Sehingga Berubah Scriptnya Tapi itu tidak merubah fungsi dari Script Yang Anda Posting
  5. Masukan dalam postingan anda hasil dari encode tadi dengan cara klik Edit HTML yang ada di kanan atas postingan Sebab jika anda Paste Hasil Encodenya ke Editan Posting Compose Maka Script Tersebut akan berubah kembali ke seperti aslinya.....
  6. Setelah itu TERBITKAN ENTRI Dan lihat hasilnya Script Kode Anda Utuh Kembali Didalam Postingan Sehingga TRETETET Jadilah Postingan Tutorial Dengan Menampilkan HTML/JavaScript
  7. Semoga Suksess Dan Bermanfaat dan jangan lupa komentarnya n tengs buat www.hilmifirdaus.com Untuk Totornya...Yang Saya Share Kembali Disini......

Widget Nempel Dipinggir (Floting Widget)

Puji Syukur For Allah SWT Yang telah mengizinkan saya untuk posting dan berbagi Pengalaman dalam hal Disain Blog..Pasti Pernah anda melihat Satu widget Nempel di pinggir Sebelah Kiri,Kanan, dan juga di atas di blog-blog sahabat yang lain ..... untuk wedget jenis ini banyak orang mengatakan untuk Buku Tamu tapi sebenarya bisa di gunakan untuk Widget manapun asal dia berbasis HTML/JavaScript Contoh di blog saya, saya menggunakan Konten ini untuk Profile Facebook Dan juga Visitor...Ok Langsung saja Pada Pokok Permasalahan Kita ....Yu ikuti langkah-langkanya..hem gampang ko...ok..sebelum itu siapkan Segelas Kopi dan sebatang roko untuk menemani Utak-Atik Blog  ...heheh Visss Lanjut :

  1. Silahkan Anda Masuk Ke Rancangan Pilih Widget yang anda inigin Tempelkan Dan Silahkan Copy Script Dibawah ini :

Copy Ini :


<!---------------------------------------Script Atas------------------------------------------------>
<style type="text/css">
#nempel{position:fixed;top:10px;z-index:+1000;}
* html #nempel{position:relative;}
.nempeltab{height:100px;width:30px;float:left;cursor:pointer;background: #A5BD51 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjiAK-Meq5feIUhyphenhyphen3Lh4hF6Hq10I2l3krKU1Qk3lBUN2nR_uCc5oXyQS8v7QmZ-h0RzEzekUFJq4im5PgGnvQUErr_k60eFoxz0592S2vpHWZyp2dtlGVuJEaBshov8kSi1fcyvVdj6gUt/s128/fb.jpg')no-repeat;}
.nempelisi{float:left;border:2px solid;background:none;padding:8px;}
</style>
<script type="text/javascript">function showHideNempel(){var nempel = document.getElementById("nempel");var w = nempel.offsetWidth;nempel.opened ? moveNempel(0, 30-w) : moveNempel(20-w, 0);nempel.opened = !nempel.opened;}function moveNempel(x0, xf){var nempel = document.getElementById("nempel");var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1;var x = x0 + dx * dir;nempel.style.right = x.toString() + "px";if(x0!=xf){setTimeout("moveNempel("+x+", "+xf+")", 10);}}</script>
<div id="nempel">
<div class="nempeltab" onclick="showHideNempel()"></div>
<div class="nempelisi">
<!-----------------------------------------------Script Atas--------------------------------------->

                                                       Script Yang Ada Di Widget

<!----------------------------------------------Script Bawah------------------------------------->
<div style="text-align:right;"><a style="text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size: 12px;" href="javascript:showHideNempel()">[Close]</a></div>
<span><a style="font-size: 10px; cursor:pointer; text-decoration:none; font-family:Arial, Helvetica, sans-serif; color: #999" href="http://rivhay.blogspot.com/search/label/blog/" target="_blank">Widget by Blogger Rivhay Of Generations91</a></span>
</div>
</div>
<script type="text/javascript">var nempel = document.getElementById("nempel");nempel.style.right = (30-nempel.offsetWidth).toString() + "px";</script>

<!------------------------------------Script Bawah------------------------------------------->





2. Setelah itu anda save dan TRETETET....Semoga Berhasil....

Komentar FB

Facebook Ku

Buku Tamu


Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)

Bintang Di Surga