Web Development Blog Shannenpio

Pembaharuan: 24 Februari 2012 Kali ini Saya akan memperkenalkan widget daftar isi untuk Blogger dengan konsep akordion JQuery . Script widget ini sendiri sebenarnya merupakan hasil modifikasi dari widget Tabel Konten Blogger buatan Abu Farhan : Lihat Demo Pertama-tama, masuklah ke tab Posting/Entri , kemudian pilih Edit Laman Tambahkan sebuah halaman baru: Tambahkan sebuah halaman statis Klik mode HTML pada formulir posting: Pilih mode HTML Salin script di bawah ini, kemudian letakkan di dalam formulirnya: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/acc-toc-datesort-default.css" type="text/css" /> <script type="text/javascript"> var accArchive = true, modeID = true, sDownSpeed = 600, sUpSpeed = 600; </script> ...

Pembaharuan: 25 Februari 2012 Galleria adalah widget daftar isi dengan tema fotografi. Setiap artikel akan ditampilkan sebagai foto-foto dengan judul yang akan tampil saat disentuh. Masonry adalah salah satu kelengkapan utama untuk membangun widget ini. Menjaga agar setiap elemen tampak berjajar dengan rapi dan responsif: Lihat Demo Pembaharuan: Lihat Galleria V2 Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut: Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong : Menambahkan halaman statis baru Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML : Pilih mode HTML Salin kode di bawah ini kemudian letakkan di dalam formulirnya: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> <link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blo...

Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan. Pertama-tama masuklah ke halaman tata letak widget kemudian tambahkan sebuah elemen halaman HTML/JavaScript . Salin kode di bawah ini, kemudian letakkan di dalam formulirnya: <style type="text/css"> /* Juli 2011 :: Taufik Nurrohman Visit: http://hompimpaalaihumgambreng.blogspot.com */ #paneltovik {display:block} #panel { background-color:#96BC43; border:2px solid #a7cc54; border-width:2px 2px 0 2px; height:250px; overflow:auto; margin:0; padding:10px; color:#111; font:normal 12px Times,Serif; -webkit-box-shadow:inset 0 0 7px #222; -moz-box-shadow:inset 0 0 7px #222; box-shadow:inset 0 0 7px #222; display:none; } .tombolpanel { position:relative; curso...

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=...