Tampilkan postingan dengan label Widget. Tampilkan semua postingan
Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Jumat, 22 Februari 2013

Memasang User Online Text


ikuti cara berikut:
1. log in di blogger.com
2. tata letak> tambah gadget
3. pilih html/ java script
4. pastekan kode berikut
<script type="text/javascript" src="http://gusdegleng.blogspot.com/on3.php?d=http://www.kita-aceh.blogspot.com/"></script>User Online&nbsp;</script>
5.klik simpan
tulisan yang di tandai dengan wana merah tersebut ganti dengan alamat blogmu.

semoga bermanfaat :)

Kamis, 07 Februari 2013

Membuat Daftar Artikel baru dengan CSS

Artikel terbaru atau bisa juga nantinya di beri judul "Recent Post" seperti contoh di bawah, sangat bermanfaat bagi pembaca blog untuk menelusuri dan mendapatkan posting dengan lebih cepat dan mudah. Apa yang terlihat di bawah ini hanyalah sekedar contoh untuk mendemonstasikan bentuk akhir dari recent post yang akan kita buat. Recent posts ini juga bermanfaat untuk meringankan kerja karena daftar isi secara otomatis tertambahkan dengan judul posting terbaru ketika posting diterbitkan. Untuk memudahkan kita melakukan improvisasi, baik box ataupun teksnya, desain recent posts ini juga menyertakan KODE CSS yang mudah dimengerti oleh blogger pemula sekalipun.
dalam blog ini
 
Langkah Cara Membuat Daftar Artikel Terbaru di Blog
  1. Login ke Blogger (Login to Blogger).
  2. Dasbor (Dasboard).
  3. Tata Letak .
  4. KLIK Add Gadget
  5. HTML/Javascript.
  6. Copy paste KODE HTML (KODE CSS, Javascript dan HTML).
  7. KLIK SIMPAN (SAVE).
  8. Buka blog untuk melihat hasilnya.
KODE CSS, Javascript dan HTML :
<style type="text/css">
.daftar_posting{list-style:none;margin-left:-20px;font-family:Droid Serif;font-size:11px;color:lime;text-align:left;}
.daftar_posting a{color:yellow;border-top:1px dotted blue;border-bottom:1px dotted blue;background:transparent url(http://i964.photobucket.com/albums/ae124/gubhugreyot/Arrow/DoubleRedArrow.gif) no-repeat 0 50%;padding-left:15px;}
.daftar_posting a:hover{color:red;}
</style>
<div style="margin:2px; padding:4px;border:2px solid #888;background:#333;">
<div style="border:2px solid #444;overflow:auto;padding:4px;background:#111;height:250px;">
<div style="width:500px;">
<script style="text/javascript">
var numposts = 1000;
var showpostsummary = false;
var standardstyling = true;
function showrecentposts(json) {document.write('<ol class="daftar_posting">');
for (var i = 0; i < numposts; i++) { document.write('<li>');
var entry = json.feed.entry[i]; var posttitle = entry.title.$t;
var posturl; if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href; break;}}
posttitle = posttitle.link(posturl);
if ("content" in entry) { var postcontent = entry.content.$t;}
else
if ("summary" in entry) { var postcontent = entry.summary.$t;}
else var postcontent = ""; var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
if (!standardstyling) document.write('<div class="bbrecpost">');
if (standardstyling) document.write(posttitle);
if (!standardstyling) document.write('</div><div class="bbrecpostsum"">');
if (showpostsummary == true) { if (standardstyling) document.write('<br/>');
if (postcontent.length < numchars) { if (standardstyling) document.write('<i>');
document.write(postcontent); if (standardstyling) document.write('</i>');}
else { if (standardstyling) document.write('<i>');
postcontent = postcontent.substring(0, numchars); var quoteEnd = postcontent.lastIndexOf(" ");
if (standardstyling) document.write('</i>');}}
if (!standardstyling) document.write('</div>'); if (standardstyling) document.write('<br/>');
document.write('</li>');}
document.write('</ol>');
if (!standardstyling) document.write('<div class="bbwidgetfooter">');
if (standardstyling) document.write('<br/>');}
</script>
<script src="http://gusdegleng.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</div>
</div>
</div>
Keterangan / Catatan :
  1. margin-left:-20px; digunakan untuk mengatur jarak setiap judul posting dari batas kiri box. Apabila kurang ke kiri perbesar dalam nilai minus (misal jadi -30px).
  2. Ganti Alamat Blog http://gusdegleng.blogspot.com/ dengan Alamat blog kamu
  3. Box Daftar Posting ini akan lebih bagus seandainya ditempatkan pada ruangan widget dengan lebar mencukupi (di atas 350px) supaya setiap judul posting tidak terputus (pindah spasi).
  4. Penggunaan warna background dan warna font dapat di atur pada KODE CSS.

Membuat Widget Artikel Thumbnail

Tutorial kali ini membuat widget label tertentu dengan thumbnail satu, mengenai membuat recent Post atau artikel terbaru dengan fungsi Previous dan next seperti yang Anda lihat di single post blog Gambar Animasi Gift Langsung saja karena hari sudah malam dan besok pagi mesti sahur, bisa-bisa nggak bisa bangun. Dibawah ini screenshotnya dan silahkan klik demo untuk melihat lebih jelas.


1.    Login ke blogger dengan akun Anda
2.    Setelah itu pilih blog yang ingin anda tambahkan widget ini.
3.    Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4.    Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5.    Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin>
#mas-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDvpeqWpBhwnCfTQZbN7QgydWEP2MBZ5fA7KzVnpmSNThrkYpXsp36j9XpiT6qUnM2Ve8AbZ9f8WEAbdKdfc-ncfNTQSfPJ8KzPazV5-YyUtQMfbMn8G9cLY8bvl_ytOYG7_HSayq-Qyc/s1600/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}

•  Perhatikan tulisan warna kuning diatas, itu adalah lebar dan tinggi thumbnail image.
•  Selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 10;
var startfeed = 0;
var urlblog = "http://coretan-tinta-hitam.blogspot.com/";
var charac = 100;
var urlprevious, urlnext;

function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed =  showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjzF-8ruvrvh9goy8ugNDyiPeJZa7Becx1kZOqAMwMto8LBscWiH9oXURBCLO0M3hLPYck7OCGdcOHrWpShBOC4cdiDeP8_TgFTJQiG19Oq7P9TvJ_z44JhDHgRVi8zFtDE5SD53iQ4LI/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>&#9668; Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>&#9668; Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next &#9658;</a>";
} else {
showblogfeed += "<span class='noactived next'>Next &#9658;</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
•  Keterangan :
var numfeed = 10; >> Jumlah Artikel terbaru yang ditampilkan pada widget
var urlblog = "http://coretan-tinta-hitam.blogspot.com/"; >> ganti dengan URL blog Anda
var charac = 100; >> Jumlah karakter atau huruf pada setiap post.
•  Setelah itu save templates, kemudian menuju ke layout pilih kotak yang akan ditambahkan widget ini.
  • Klik add gadget >> HTML/Javascript masukkan kode berikut ini kedalamnya :
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>
Terakhir save dan lihat hasilnya.

Minggu, 13 Januari 2013

Pasang Animasi Hiu Berkeliling Blog


Hehehe... begitulah senyum teman kita satu ini yang hidup di laut, wah apa hubungannya dengan judul postingan kali ini ya ???, sori agak mendramatisir biar seru postingannya. Widget kali ini mengenai ikan hiu yang berkeliaran di halaman blog, seperti contoh yang ada di postingan artikel ini, gimana keren-kan ??? (kalo belum kelihatan ikan hiunya silakan di refresh halaman ini). Sebelum kita ke TKP ada baiknya kita simak info tentang ikan hiu dulu, biar makin lengkap wawasannya.

Info Singkat :
Hiu adalah sekelompok (superordo Selachimorpha) ikan dengan kerangka tulang rawan yang lengkap dan tubuh yang ramping. Mereka bernapas dengan menggunakan lima liang insang (kadang-kadang enam atau tujuh, tergantung pada spesiesnya) di samping, atau dimulai sedikit di belakang, kepalanya. Hiu mempunyai tubuh yang dilapisi kulit dermal denticles untuk melindungi kulit mereka dari kerusakan, dari parasit, dan untuk menambah dinamika air. Mereka mempunyai beberapa deret gigi yang dapat digantikan.

Hiu mencakup spesies yang berukuran sebesar telapak tangan hiu pigmi, Euprotomicrus bispinatus, sebuah spesies dari laut dalam yang panjangnya hanya 22 cm, hingga hiu paus, Rhincodon typus, ikan terbesar, yang bertumbuh hingga sekitar 12 meter dan yang, seperti ikan paus, hanya memakan plankton melalui alat penyaring di mulutnya. Hiu banteng, Carcharhinus leucas, adalah yang paling terkenal dari beberapa spesies yang berenang di air laut maupun air tawar (jenis ini ditemukan di Danau Nikaragua, di Amerika Tengah) dan di delta-delta.
(Sumber : Wikipedia)

Cara Pemasangan :
  • Login ke  blog sobat...
  • Klik "Design" kemudian klik "Edit HTML" setelah itu klik centang pada "Expand Widget Templates", seperti gambar dibawah ini.
  • Cari kode </Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Body> tersebut.
<script language="javascript" src="https://sites.google.com/site/goezdegleng/javascript/shark.js "></script>
  • Klik "Save" dan lihat hasilnya...
Wuiiihhh.... makin tambah dech wawasannya, jangan lupa cendolnya yaa... biar kreasi berikutnya semakin unik, menarik, atraktif, dinamis dan yang pastinya keeerreeen... terima kasih, akhir kata...

Widget Lowongan Kerja

Blog merupakan gudangnya informasi dan sharing oleh karena itu banyak dicari blog surfer. Blog yang baik hendaknya bisa memberikan informasi yang atraktif dan bermanfaat seperti blog MonozCore ini hehehe :):) (sedikit promosi,..bolehkan). Info unik kali ini merupakan elemen blog yang memberikan informasi mengenai lowongan pekerjaan yang datanya saya ambil dari salah satu rss feed yang ada di jobsdb.com. Selain atraktif widget ini juga membantu pengunjung blog yang sedang mencari lowongan pekerjaan, sambil blogwalking bisa mendapatkan info lowongan pekerjaan,.. gimana kerenkan... widget ini juga bisa menjadi daya tarik tersendiri untuk meningkatkan pengunjung blog... oke dech buat yang tertarik monggo disimak cara pemasangannya...

Cara Pasang Widget
Seperti biasa...Login dahulu ke blog sobat.
Klik "Design" kemudian klik "Add New Gadget" setelah itu pilih "HTML/JavaScript".
Copy-Paste kode HTML dibawah ini ke kotak postingan gadget.
<div style='color:#ffffff;height:auto;margin:5px 0 5px 0;padding:5px 10px 5px 10px; text-align:left; overflow:hidden; -moz-border-radius: 8px; box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; background-color:#619bb9; background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));'><table width=100%><tr><td width=18px><img src="https://lh5.googleusercontent.com/-76KpHyd_P1Q/T367vGXaRaI/AAAAAAAABiY/3Ld_W1bv-go/s800/JobsDB_icon.jpg" /></td><td width="10" style="vertical-align: top;" ><a id="TickerPrevBC56895290" href="javascript: ;" onclick="PrevTickerBC56895290();" class="bc_tickerarrow" style="text-decoration: none; ">&laquo;</a></td><td id="TickerContentBC56895290" class="bc_tickercontent" style="vertical-align: top;"><a id="TickerLinkBC56895290" href="javascript: ;" class="bc_tickerlink" style="text-decoration: none;" target="_blank"><b><span id="TickerTitleBC56895290" class="bc_tickertitle" ></span></b></a><span id="TickerSummaryBC56895290" class="bc_tickersummary" ></span></td><td width="10" style="vertical-align: top;" ><a id="TickerNextBC56895290" href="javascript: ;" onclick="NextTickerBC56895290();" class="bc_tickerarrow" style="text-decoration: none; ">&raquo;</a></td><!-- DO NOT CHANGE OR REMOVE THE FOLLOWING NOSCRIPT SECTION OR THE BLASTCASTA NEWS TICKER WILL NOT FUNCTION PROPERLY. --><noscript><a href="http://www.blastcasta.com/" title="News Ticker by BlastCasta"><img src="http://www.poweringnews.com/images/tp.gif" border="0" /></a></noscript><script id="scr56895290" type="text/javascript"></script><script type="text/javascript"> /* <![CDATA[ */ setTimeout('document.getElementById(\'scr56895290\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.poweringnews.com/ticker-js.aspx?feedurl=http%3A//id.jobsdb.com/ID/en/Rss/JobListing%3FjobFunctionId%3D282&changedelay=5&maxitems=-1&showsummary=0&objectid=56895290\'', 500); /* ]]> */ </script></tr></table><span style="font-size: 80%; float:right;"><a href="http://gusdegleng.blogspot.com/2013/01/widget-lowongan-kerja.html" target="_blank">Get this widget</a></span></div>
Tempatkan widget ini di atas / di bawah postingan artikel agar terlihat rapih.
Klik "Save" dan lihat hasilnya.

Pasang Widget Tangga Lagu

Mau tau sesuatu yang unik, menarik dan fantastic seputar dunia blogging kunjungi terus yaa Brankas Script... hehehe... sekalian promosi mazBro...
Widget ini akan memberikan informasi terbaru seputar belantika musik indonesia, mulai dari penyanyi, judul lagu, lirik lagu hingga mendownload mp3-nya... wooww.. kerenkan... ya donk...

Widget tangga lagu indonesia terbaru memiliki tampilan dasar berciri khas Brankas Script yaitu rounded block yang berwarna biru transparan. Untuk style menggunakan inherit style yang artinya mengikuti tampilan dasar dari template blog. Oke... bro buat yang tertarik langsung aja ke TKP...


Musik Terbaru
Get this widget


Langkah-langkah seperti biasa sobat...
Dasboard - Tata Letak - Tambah widget - HTML/JavaScript
letakkan code dibawah ini kemudian Save

<!-- Music Widget -->
<div style="-moz-border-radius: 8px; -moz-box-shadow: inset 0 0 1px #fff; -webkit-border-radius: 8px; -webkit-box-shadow: inset 0 0 1px #fff; background-image: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: -ms-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: -o-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #327AA4), color-stop(0.5, #2E4B5A), color-stop(1, #5CB0DC)); background-image: -webkit-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background-image: linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); border-radius: 8px; box-shadow: inset 0 0 1px #fff; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#619bb9,endColorstr=#2E4B5A,GradientType=0); height: auto; margin: 0 0 0px 0; overflow: auto; padding: 5px 10px 10px 10px;">
<div style="color: white; font-family: Arial,Helvetica; font-size: 16px; padding-bottom: 0px;">
<img src="https://sites.google.com/site/goezdegleng/images/Music-Terbaru.png" style="height: 32px; vertical-align: middle; width: 32px;" /><b> Musik Terbaru</b></div>
<!-- goezdegleng - Tangga Lagu Start -->
<script src=" https://sites.google.com/site/goezdegleng/widget/tangga_lagu.js" type="text/javascript">
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_callback=getYpipe&_id=e4aa23fbf898ed1d8ebd8b4850c5199c&_render=json" type="text/javascript">
</script>
<!-- goezdegleng - Tangga Lagu End -->
<span style="padding-left:40px;font-size: 80%; float:left;"><a href=" http://gusdegleng.blogspot.com/2013/01/pasang-widget-tangga-lagu.html">Get this widget</a></span>
</div>
<!-- End Music Widget -->
Semoga bermanfaat

Rabu, 09 Januari 2013

Cara Membuat Multi Search Box

Bismillah - Pernahkah sobat menemui sebuah kotak pencarian di blog namun bukan saja dihias dengan background agar lebih cantik tetapi juga kotak pencarian (search box) ini memiliki multi fungsi.
Kira-kira widget search box multi ini akan tampak seperti gambar dibawah ini:


Atau bentuk fisiknya sobat bisa lihat di blog ini
Langkah Membuat Kotak Pencarian Multiple Manual, cukup mudah, anda tinggal copy dan paste pada widget anda
Dashboard-Tata Letak-Rancangan-Widget/Gadget-Html/Javascript-Pastekan codenya-save
Berikut code JavaScriptnya
<script type="text/javascript">
<!--
function qsearch_onSubmit()
{
qs_enginename = document.getElementById('qsearch_select').value;
qs_keywords = document.getElementById('searchfield').value;
switch( qs_enginename )
{
case 'goezdegleng':
window.open('http://gusdegleng.blogspot.com/search?q=' + qs_keywords, '_self', '');
return false;
case 'wikipedia':
window.open('http://en.wikipedia.org/wiki/Spezial:Search?search=' + qs_keywords, '_wikipedia', '');
return false;
case 'google':
window.open('http://www.google.com/search?q=' + qs_keywords, '_google', '');
return false;
case 'yahoo':
window.open('http://search.yahoo.com/search?p=' + qs_keywords, '_yahoo', '');
return false;
case 'msnlive':
window.open('http://search.live.com/results.aspx?q=' + qs_keywords, '_msnlive', '');
return false;
case 'altavista':
window.open('http://www.altavista.com/web/results?itag=ody&q=' + qs_keywords + '&kgs=0&kls=0', '_altavista', '');
return false;
case 'lycos':
window.open('http://search.lycos.com/?query=' + qs_keywords, '_lycos', '');
return false;
case 'odp':
window.open('http://search.dmoz.org/cgi-bin/search?search=' + qs_keywords, '_odp', '');
return false;
default:
if( (i = qsearch_findEngine(qs_enginename)) >= 0 )
{
window.open(qsearch_engines[i].url + qs_keywords, '_blank', '');
return false;
}
break;
}
return true;
}
//-->
</script>
<table border="1" cellspacing="1" width="300">
<tr>
<th><span style="float: left"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg18MDmQYJP5BnY2ApgJhZG05Z-mEUs6OsfMDXbVy7TZYO0sKdSt-yPRJMakKBJPs8JJU22ncZnAMzwQPUxp9noVNKxw5vLg5__o2xyKdJidepS325iu752Sxcxk2OEwsH2WOTsGdHpmBQ/s1600/Loggo-GD.png" width="16px" height="16px" alt="" />&nbsp;Search</span></th>
</tr>
<tr class="row1">
<td>
<form id="qsearch_form" method="post" action="/search" onsubmit="return qsearch_onSubmit();">
<input type="text" tabindex="6" name="keywords" id="searchfield" size="22" maxlength="40" title="Search for keywords" value="Search" onclick="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" />
<select id="qsearch_select" tabindex="8">
<optgroup label="Blog">
<option value="goezdegleng" style="background-color: #EEEEEE;">Brankas Script</option>
</optgroup>
<optgroup label="Search engines">
<option value="wikipedia" style="background-color: #FEF2D6;">Wikipedia</option>
<option value="google" style="background-color: #FEF2D6;">Google</option>
<option value="yahoo" style="background-color: #FEF2D6;">Yahoo</option>
<option value="msnlive" style="background-color: #FEF2D6;">MSNlive</option>
<option value="altavista" style="background-color: #FEF2D6;">Altavista</option>
<option value="lycos" style="background-color: #FEF2D6;">Lycos</option>
<option value="odp" style="background-color: #FEF2D6;">Open directory</option>
</optgroup>
</select>
<!-- &nbsp; -->
<input type="hidden" name="search_fields" value="all" />
<input type="submit" value="Cari" tabindex="8" />
</form>
</td>
</tr>
</table>
Ganti teks warna merah dengan ukuran widget anda
Setelah anda simpan,,, lihat hasilnya,sekarang sobat sudah memiliki kotak pencarian dengan menu dropdown sebagai multi pilihan,oh iya gan, kode yang berwarna kuning ubah aja sesuai dengan link dan nama blog sobat ya.
Moga bermanfaat :D

Minggu, 30 Desember 2012

Pasang Floating Fan Page Facebook Pada Blog

Floating Fan Page Facebook merupakan widget yang kita tambahkan pada blog untuk mempercantik tampilan blog sekaligus menata dengan rapi widget-widget yang sudah terpasang pada blog,pada kesempatan kali ini, saya akan memberikan tips blog lagi yaitu Cara Memasang Floating Fan Page Facebook Pada Blog. Sebagai gambaran awal dari Floating Fan Page Facebook pada blog, teman-teman bisa melihat contohnya pada widget fan page yang saya sudah pasang pada blog ini. Pemasangan widget fan page ini tidak akan berjalan dengan lancar bilamana teman-teman blogger belum membuat halaman fan page pada facebook sebelumnya. Untuk itu, silakan buat dulu halamannya. Dan untuk membuat halaman fan page pada facebook, silakan tanyakan saja pada Om Google.

Untuk teman-teman blogger yang sudah punya halaman fan page pada facebook dan ingin memasang widget floating fan page facebook pada blog, silakan ikuti langkah-langkahnya di bawah ini :
  • Silakan login ke akun blog Anda.
  • Pada halaman dasbor akun blog, silakan klik nama blog Anda.
  • Kemudian pada halaman overview blog Anda, silakan pilih template-edit HTML-Prossed-expand widget template.
  • Selanjutnya silakan cari kode ]]></b:skin>
  • Kalau sudah ketemu kodenya, silakan copy dan paste kode di bawah ini pas di bawah kode ]]></b:skin>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
  • Selanjutnya silakan simpan template blog Anda dan tutup juga halaman edit HTML-nya.
  • Kemudian silakan pilih lagi layout, lalu pilih dan klik Add Gadget pada posisi mana saja.
  • Setelah muncul windows Add Gadget Blogger, silakan pilih HTML/JavaScript dengan cara klik tombol plus [+] yang ada disebelah kanannya.
  • Langkah selanjutnya, silakan copy kode di bawah ini dan paste pada bagian content.
<script type="text/javascript"> /*<![CDATA[*/ jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);}); /*]]>*/ </script> <style type="text/css"> .likebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQrX1HCMEL3TAXe4KjBdqpc2vbg1GnJmRUM-dcStN5XEEpFBMgxYLllrgpWMh30crTojOSMQBn7GS0XbDVqE82xufCDG2418gTJWuNe8uVWTu5mbWFX5oGs0fjoCWdG-tdMF_SmJMkbdtI/s1600/fb.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed; right:-250px;top:44%;} .likebox div{border:none;position:relative;display:block;} .likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;} .likebox span a{color: gray;text-decoration:none;} .likebox span a:hover{text-decoration:underline;} </style> <div class="likebox" style=""> <div> <iframe src="http://www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/BrankasBlogspot&amp;width=240&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 258px; width: 245px;background:#fff;"></iframe> </div> </div>
  • Setelah dipaste kodenya pada bagian content, jangan dulu disimpan kodenya tapi silakan ganti kode yang saya kasih warna merah dengan alamat atau URL halaman fan page facebook Anda. Setelah diganti kode yang berwarna merah, barulah disimpan kodenya.
Ok sob, selamat ya, sudah berhasil Memasang Floating Fan Page Facebook Pada Blog.
Semoga bermanfaat

Sabtu, 29 Desember 2012

Animasi Gambar Pada Blog

Memasang gambar animasi pada blog akan semakin mempercantik blog anda. Gambar yang sesuai denga tema blog itu sendiri, disini saya tidak memberikan banyak contoh gambar, silahkan anda cari sendiri contoh2 gambar yang sesuai , anda upload di hostingan gambar anda, dan copy image location.


Sebagai contoh gambar bendera Merah Putih dibawah ini :

Location imagenya gambar diatas  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYZhM3IMSss_7mYXv2NJHGMhZlLgG9tt7Rwc-buicJctMO8mOyqqTglVKfIOc2Xr18gBAFRYkRV9SmoGFtXrxm5oI3lizYt18XXLHWuAf7mfhFNRbqd6c69ztN1KDIyuevKpy11oaJm7K5/s1600/bendera.gif

Pemasangan :  Copy dan pastekan scrip nya pada widget - HTML/JavaScript
Inilah scripnya
<div style="position: fixed; top: 0px; right: 20px;width:120px;height:160px;"><a href="http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYZhM3IMSss_7mYXv2NJHGMhZlLgG9tt7Rwc-buicJctMO8mOyqqTglVKfIOc2Xr18gBAFRYkRV9SmoGFtXrxm5oI3lizYt18XXLHWuAf7mfhFNRbqd6c69ztN1KDIyuevKpy11oaJm7K5/s1600/bendera.gif" title="Click to get more." /></a><small><center><a href="http://gusdegleng.blogspot.com/" target="_blank">Widget-Animasi</a></center></small></div>
Kett : Silahkan sesuaikan dengan tema blog anda pada Teks warna
  • Biru   :  adalah posisi gambar anda, silahkan sesuaikan top / botton dan right/left
  • Coklat : adalah ukuran gambar anda
  • Merah : lokasi gambar yang anda simpan
Selamat mencoba dan cari gambar yang lain sesuai dengan keinginan anda.

Jumat, 21 Desember 2012

Lintas Berita di Blog

Biar ga ketinggalan informasi era digital, pasang widget berita di blog sobat khan lumayan sambil blogging bisa dapat berita terbaru lewat rss feed-nya detik.com, kaskus.us dan okezone.com... Selain itu widget ini juga membuat blog sobat semakin dinamis dengan update berita terkini seputar tekno-blogging. Wah... pengunjung blog sobat makin betah deh berkunjungnya. Gimana makin keren khan infonya.
Widget ini saya buat menggunakan rsspump.com dengan mengambil data dari rss feed detik.com, kaskus.us dan okezone.com, walaupun sederhana tapi lumayanlah buat memanjakan pengunjung blog sobat.
Buat sobat blogger yang pengen ngutak-ngatik sendiri widget berita silakan kunjungi rsspump.com atau jika ingin menggunakan widget berita seperti punya saya silakan disimak tutorialnya...
Oke...langsung aja ke  TKP
  • Seperti biasa...Login dahulu ke blog sobat.
  • Klik "Design" kemudian klik "Add Gadget".
  • Pilih "HTML/JavaScript".
  • Copy-Paste kode berikut ini di kotak postingan gadget
<div style='color:#ffffff; width:614;height:auto;margin:5px 0 5px 0;padding:5px 10px 5px 10px; text-align:left; overflow:hidden; -moz-border-radius: 8px; box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; background-color:#619bb9; background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));'><table width=100%><tr><td width=18px><img src="http://detik.net.id/detik/image/favicon.ico" width="16px" height="16px"/></td> <td width="10" style="vertical-align: top;" ><a id="TickerPrevBC5226488" href="javascript: ;" onclick="PrevTickerBC5226488();" class="bc_tickerarrow" style="text-decoration: none; color:#FFFFFF;">«</a></td> <td id="TickerContentBC5226488" class="bc_tickercontent" style="vertical-align: top;"> <a id="TickerLinkBC5226488" href="javascript: ;" class="bc_tickerlink" style="text-decoration: none; color:#FFFFFF;" target="_blank"><b><span id="TickerTitleBC5226488" class="bc_tickertitle" ></span></b></a> <span id="TickerSummaryBC5226488" class="bc_tickersummary" ></span> </td> <td width="10" style="vertical-align: top;" ><a id="TickerNextBC5226488" href="javascript: ;" onclick="NextTickerBC5226488();" class="bc_tickerarrow" style="text-decoration: none; color:#FFFFFF;">»</a></td> <!-- DO NOT CHANGE OR REMOVE THE FOLLOWING NOSCRIPT SECTION OR THE BLASTCASTA NEWS TICKER WILL NOT FUNCTION PROPERLY. --> <noscript><a href="http://www.blastcasta.com/" title="News Ticker by BlastCasta"><img src="http://www.poweringnews.com/images/tp.gif" border="0" /></a></noscript> <script id="scr5226488" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ setTimeout('document.getElementById(\'scr5226488\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.poweringnews.com/ticker-js.aspx?feedurl=http%3A//detik.feedsportal.com/c/33613/f/589693/index.rss&changedelay=8&maxitems=-1&showsummary=0&objectid=5226488\'', 500); /* ]]> */ </script> </tr> <tr><td width=18px><img src="https://lh3.googleusercontent.com/-bU9YAaVigLg/TqusCS26cGI/AAAAAAAAAZI/fICD1G7WkLE/s800/kaskus.png"/></td><td width="10" style="vertical-align: middle;" ><a id="TickerPrevBC17331976" href="javascript: ;" onclick="PrevTickerBC17331976();" class="bc_tickerarrow" style="text-decoration: none; color:#FFFFFF;">«</a></td> <td id="TickerContentBC17331976" class="bc_tickercontent" style="vertical-align: middle;"> <a id="TickerLinkBC17331976" href="javascript: ;" class="bc_tickerlink" style="text-decoration: none; color:#FFFFFF;" target="_blank"><b><span id="TickerTitleBC17331976" class="bc_tickertitle" ></span></b></a> <span id="TickerSummaryBC17331976" class="bc_tickersummary" ></span> </td> <td width="10" style="vertical-align: middle;" ><a id="TickerNextBC17331976" href="javascript: ;" onclick="NextTickerBC17331976();" class="bc_tickerarrow" style="text-decoration: none; color:#FFFFFF;">»</a></td> <!-- DO NOT CHANGE OR REMOVE THE FOLLOWING NOSCRIPT SECTION OR THE BLASTCASTA NEWS TICKER WILL NOT FUNCTION PROPERLY. --> <noscript><a href="http://www.blastcasta.com/" title="News Ticker by BlastCasta"><img src="http://www.poweringnews.com/images/tp.gif" border="0" /></a></noscript> <script id="scr17331976" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ setTimeout('document.getElementById(\'scr17331976\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.poweringnews.com/ticker-js.aspx?feedurl=http%3A//www.kaskus.us/external.php%3Ftype%3DRSS2%26forumid%3D31&changedelay=8&maxitems=-1&showsummary=0&objectid=17331976\'', 500); /* ]]> */ </script> </tr> <tr><td width=18px><img src="http://sindikasi.okezone.com/image/template/zone.ico"/></td> <td width="10" style="vertical-align: top;" ><a id="TickerPrevBC29075508" href="javascript: ;" onclick="PrevTickerBC29075508();" class="bc_tickerarrow" style="text-decoration: none; color:#FFFFFF;">«</a></td> <td id="TickerContentBC29075508" class="bc_tickercontent" style="vertical-align: top;"> <a id="TickerLinkBC29075508" href="javascript: ;" class="bc_tickerlink" style="text-decoration: none; color:#FFFFFF;" target="_blank"><b><span id="TickerTitleBC29075508" class="bc_tickertitle" ></span></b></a> <span id="TickerSummaryBC29075508" class="bc_tickersummary" ></span> </td> <td width="10" style="vertical-align: top;" ><a id="TickerNextBC29075508" href="javascript: ;" onclick="NextTickerBC29075508();" class="bc_tickerarrow" style="text-decoration: none; color:#FFFFFF;">»</a></td> <!-- DO NOT CHANGE OR REMOVE THE FOLLOWING NOSCRIPT SECTION OR THE BLASTCASTA NEWS TICKER WILL NOT FUNCTION PROPERLY. --> <noscript><a href="http://www.blastcasta.com/" title="News Ticker by BlastCasta"><img src="http://www.poweringnews.com/images/tp.gif" border="0" /></a></noscript> <script id="scr29075508" type="text/javascript"></script> <script type="text/javascript"> /* <![CDATA[ */ setTimeout('document.getElementById(\'scr29075508\').src = (document.location.protocol == \'https:\' ? \'https\' : \'http\') + \'://www.poweringnews.com/ticker-js.aspx?feedurl=http%3A//sindikasi.okezone.com/index.php/techno/RSS2.0&changedelay=8&maxitems=-1&showsummary=0&objectid=29075508\'', 500); /* ]]> */ </script> </tr> </table><span style="font-size: 80%; float:right;"><a href="http://gusdegleng.blogspot.com/2012/12/lintas-berita-di-blog.html" target="_blank">Get this widget</a></span> </div>
  • Klik "Save" dan lihat hasilnya...
Silakan widget ini ditaruh di atas atau di bawah postingan artikel biar gampang dilihat pengunjung blog.
.:Semoga Bermanfaat:.

Script Radio di Blog

Pasang scrip radio di blog anda.
  • Masuk Tambah Widget --> Pilih HTML/JavaScript
  • Copy dan Paste code berikut
<center><embed allowfullscreen="false" flashvars="type=mp3&amp;autostart=true&amp;file=http://ur.nyit-nyit.net:8110/;stream.nsv" height="20" id="streambaby" name="streambaby" quality="high" src="http://www.nyit-nyit.net/player.swf" type="application/x-shockwave-flash" width="210" wmode="transparent"></embed></center>
<center>
<small>Powered By: <a href="http://www.indonesia-coder.co.cc/">Indonesia Coder Comunity</a></small></center>
  • Save
Selamat mencoba dan dengarkan alunan musik radio online di blog anda.

Daftar Menu Horisontal

Membuat daftar menu horisontal di blog.Seperti kita ketahui daftar menu sangat penting pada sebuah web side, ibarat orang melangkah daftar menu atau istilah lain daftar isi adalah sebagai petunjuk arah dalam sebuah perjalanan.

Okey dech... langsung saja Kang Degleng kasih tip cara paling mudah membuat daftar menu horisontal :
  • Tambah widget dibawah header (judul blog) pilih HTML/JavaScript
  •  Copy dan paste code dibawah
<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#0958a9;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='/'> Home</a></li>
<li><a href='#'> Menu 1</a></li>
<li><a href='#'> Menu 2</a></li>
<li><a href='#'> Menu 3</a></li>
<li><a href='#'> Menu 4</a></li>
<li><a href='#'> Menu 5</a></li>
<li><a href='#'> Menu 6</a></li>
</ul>                     
</div>
  •  Ganti # dengan URL tujuan dan warna kuning dengan nama menu dari blog,sobat
  • Save

Kamis, 20 Desember 2012

Pengunjung Blog Keren

Dalam blogspot sudah disediakan widget untuk mengetahui pengunjung web kita,
Nah disini Kang Degeng mempunyai sedikit trik untuk sahabt semua, yaitu menampilkan jumlah pengunjung dengan sedikit animasi peta pengunjung.

Cekidot lihat penampang peta dibawah :

Jumat, 27 April 2012

Translate Language

Scrip Google Translate

English French German Spain Italian Dutch
Russian Portuguese Japanese Korean Arabic Chinese Simplified



Silahkan Copy Paste pada Widget/Gadget ( add HTML/Java Script)

Pasang Google Search

Script Google Search :
Hasilnya akan seperti ini


Google Search :
Silahkan Copy dan Paste pada Widget/Gadget (add HTML/Java Script) code dibawah :

Pasang TV OnLine

Kali ini adalah scrip TV OnLine
Seperti biasa tinggal Copy Paste pada postingan Anda
Berikut scripnya :

Nanti hasilnya akan menjadi seperti ini. Clik Disini