Web Development Blog Shannenpio

Pertama-tama masuklah ke halaman tata letak elemen halaman , kemudian tambahkan sebuah elemen halaman HTML/JavaScript . Salin kode ini, kemudian letakkan di dalam formulirnya: <style type="text/css"> #highlight{font:bold 50px Impact,Arial,Sans-Serif;} </style> <script language="javascript" type="text/javascript"> var teks=" EFEK PELANGI " // teks Anda di sini var speed= 20 // atur kecepatan perubahan warna if (document.all||document.getElementById) { document.write('<span id="highlight">' + teks + '</span>') var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight } else document.write(text) var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0") var r=1 var g=...

Pertama-tama masuklah ke halaman Tata Letak , kemudian tambahkan sebuah elemen halaman HTML/JavaScript . Salin kode di bawah ini, kemudian letakkan di dalam formulirnya: <style type="text/css"> #gb { position:fixed; top:50px; z-index:1000; } * html #gb {position:relative;} .gbtab { height:100px; width:30px; float:left; cursor:pointer; background:url(' http://hompimpa.googlecode.com/files/tabs%23FF13E5.png ') no-repeat; } .gbcontent { float:left; border:2px solid #FF13E5 ; border-right-width:15px; background:#F5F5F5; box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8); -moz-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8); -webkit-box-shadow:2px 2px 7px rgba(0, 0, 0, 0.8); opacity:0.7; filter:alpha(opacity=70); } </style> <script type="text/javascript"> function showHideGB() { var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened...

Tambahkan sebuah elemen halaman HTML/JavaScript . Salin kode ini, kemudian letakkan di dalam formulirnya: <style type="text/css"> #pageshare { position:fixed; top:25%; left:0px; -webkit-border-radius:0 5px 5px 0; -moz-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0; background-color:#fff; padding:0 0 2px 0; z-index:1000; -webkit-box-shadow:0 0 2px rgba(0,0,0,0.7); -moz-box-shadow:0 0 2px rgba(0,0,0,0.7); box-shadow:0 0 2px rgba(0,0,0,0.7); } #pageshare .sbutton { float:left; clear:both; margin:5px 5px 0 5px; } .fb_share_count_top { width:48px !important; } .fb_share_count_top, .fb_share_count_inner { -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .FBConnectButton_Small, .FBConnectButton_RTL_Small { width:49px !important; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } .FBConnectButton_Small .FBConnectButton_Text { padding:2px 2px 3px !important; -webkit-border-radius:...

Widget ini adalah elemen-elemen terjemaham Google yang sudah sangat-sangat Saya sederhanakan. Dikhususkan untuk Anda yang tidak ingin memperlambat loading blog karena hadirnya script Google Translate yang terpasang. Cukup salin baris tautan ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript : <ul> <li><a href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;">English</a></li> <li><a href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;">French</a></li> <li><a href=...

Lihat Demo Untuk membuat efek transisi yang lembut pada pemunculan navbar seperti pada halaman demo, pertama-tama masuklah ke halaman editor HTML template mu, kemudian kamu cari kode dengan selektor yang tampak seperti ini: #navbar-iframe { ... ... ... } Tidak usah pedulikan deklarasi-deklarasi yang dituliskan di dalamnya, langsung hapus saja kode tersebut kemudian ganti dengan kode ini: #navbar-iframe { position:absolute; top:0; padding-bottom:7px; z-index:10000; opacity:0; visibility:hidden; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; } #navbar-iframe:hover { visibility:visible; opacity:1; } Klik Simpan Template .

Untuk membuat widget recent comment dengan tampilan yang luar biasa ganteng seperti gambar di atas, cukup salin kode ini kemudian letakkan di dalam sebuah elemen halaman HTML/JavaScript : <style type="text/css"> #komentar { font:normal 11px Tahoma,Verdana,Arial,Sans-Serif; background-color:#597624; margin:0px 0px; padding:10px 10px; color:#000; border:4px solid #597624; -webkit-box-shadow:inset 0px 0px 2px #000; -moz-box-shadow:inset 0px 0px 2px #000; box-shadow:inset 0px 0px 2px #000; } #komentar ul { margin:0px 0px; padding:0px 0px; border-top:1px solid #455F20; border-bottom:1px solid #799D1A; } #komentar ul li { border-top:1px solid #799D1A; border-bottom:1px solid #455F20; padding:3px 0px; list-style:none; } #komentar ul li b a, #komentar ul li b a:link, #komentar ul li b a:visited, #komentar ul li b { color:#D7E5FD; text-shadow:0 1px 1px rgba(0,0,0,0.4); } #komentar ul li b:before { content:url(http://3.bp.blogspot.com/-abT...

Mungkin kalian sudah pernah melihat kotak kecil berisi keterangan dan pesan penulis disertai judul posting dan tanggal terbit yang biasa ditampilkan di bawah posting, namun di sini Saya hanya ingin menawarkan tampilan yang sedikit berbeda seperti ini: Di sini Saya telah menerapkan beberapa kode perwakilan yang umum terdapat di dalam sebuah widget posting seperti kode perwakilan judul, perwakilan link judul, perwakilan tanggal terbit dan nama penulis, sehingga kamu tidak perlu lagi menuliskan nama dan URL secara manual, karena kode-kode tersebut nantinya akan menyesuaikan diri berdasarkan data-data yang telah tersimpan menurut jenisnya. Yang perlu kamu lakukan hanya mengganti gambar dan ulasannya saja. Pertama-tama, masuklah ke halaman editor HTML template mu kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil. Temukan kode ini: <div class='post-footer'> TIP: Tekan CTRL + F lalu ketik class='post-footer' untuk mempermudah pencaria...

Selain menggunakan tag kondisional , salah satu cara praktis untuk menghemat ruang sidebar adalah dengan menerapkan sistem tabulasi widget sidebar otomatis seperti ini: Hasil akhir proyek ini nantinya akan secara otomatis membuat sejumlah widget (bisa ditentukan jumlahnya) membentuk tabulasi-tabulasi dimana judul widget akan menjadi elemen tabulasinya, sedangkan konten widget akan menjadi tubuhnya. Pertama-tama masuklah ke halaman editor HTML template mu, kemudian cari script yang tampak seperti ini: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script> Jika template mu sudah dilengkapi dengan script tersebut, kita bisa langsung melanjutkan ke langkah berikutnya. Tapi jika belum ada, salin dulu script tersebut lalu letakkan di atas kode </head> Setelah itu salin kode ini kemudian letakkan di bawah script tadi: <script type='text/javascript'> //<![CDATA[ var starttab = 0 ; va...