Budigadget

Menambah Gadget Dibawah Header

2010-05-03T05:00:00.000-07:00

Kadang-kadang kita merasa jengkel karena tidak bisa menambah widget di atas ataupun di bawah header blog. Terutama bagi blogger pemula seperti aku ini. Tapi lagi-lagi aku tidak mau menyerah. Om Google begitu baik, sehingga "beliau" menunjukan aku tempat untuk mendapatkan ilmu ini. Adalah di Kiwolblog aku mendapatkan cara membuat supaya kita bisa menambahkan widget di atas maupun di bawah header. Bagaimana caranya? Yuk jalan-jalan dulu.

Seperti biasa, login ke account blogger kamu, kemudian pilih Layout/Tata Letak
Pilih edit HTML dan centang Expand Template Widget. Jangan lupa backup template kamu dulu
Kemudian cari kode ini:

<b:section class="header" id="header" maxwidgets="1" showaddelement="no">

Kalau sudah ketemu, ganti kode tersebut dengan kode ini:

<b:section class="header" id="header" preferred="yes">

Sudah? Jika sudah, klik simpan. Terus pilih Page Element/Elemen Laman
Lihat perubahannya. Kalau ingin menambah widget tinggal klik tambah gadget. Kalau ingin memindahkan ke atas/bawah tinggal geser. Beres

Selamat Mencoba

Sumber: Kiwolblog

Membuat Iklan Melayang

2010-05-02T11:28:00.000-07:00

Perjalanan mencari ilmu blog tidak akan pernah berhenti sampai disini. Terus akan berlanjut karena sumber ilmu di luar sana tidak akan pernah habis.hehehe...

Nah sekarang aku bagi lagi satu ilmu blog alias trik Membuat Iklan Melayang. Seperti apa sih iklan melayang itu? Itu lho..seperti kamu buka blog-ku ini pertama kali, muncul jendela iklan melayang ~~yang kata sebagian orang cukup mengganggu.~~

Oke langsung saja ke topik utama. Langkah-langkahnya adalah sebagai berikut, tapi ingat berdoa dulu ya.hehe.

Login ke blogger kamu, kemudian ke menu Layout/Tata Letak
Add widget, kemudian pilih HTML/Javascript
Copy Paste script di bawah ini

position:fixed;

top:10px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbcontent{

float:right;

border:2px solid #000000;

background:#ffffff;

padding:10px;

}

</style>

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 : -1;

var x = x0 + dx * dir;

gb.style.top = x.toString() + "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

}

</script>

.:[Close][Klik 2x]:.

</a>

</div>

Pasang script iklan anda disini

</center>

var gb = document.getElementById("gb");

gb.style.center = (30-gb.offsetWidth).toString() + "px";

</script></div></div>

Setelah itu, simpan widget dan lihat hasilnya. Keren kan??

Selamat Mencoba.
Sumber : Adipramana

Membuat Tag Cloud Di Blogger

2010-04-25T15:05:00.000-07:00

Satu lagi tips blog yang aku dapatkan dari blogwalking, yaitu membuat Tag Cloud. Apa sih tag cloud itu? Itu lho tag yang ditampilkan dengan tulisan BESAR dan kecil supaya tampilan blog kita lebih cantik. Jika kita memakai widget aslinya, cuma bisa ditampilkan seperti daftar saja. Nah supaya kelihatan lebih keren, kita perlu adakan perubahan di "urat nadi" blog kita yaitu edit HTML. caranya gimana?

OK..langsung saja kalau begitu...kita ke TKP....hehehe...

Pertama kali, kamu harus Log In ke Blogger kamu.
Sebelum lanjut, kamu sudah harus menambah widget Label ke blog kamu.
Caranya, masuk ke menu Dashboard, pilih bagian Tata Letak, kemudian Element Laman, lalu Tambah Gadget, dan pilih Label, ikuti perintahnya kemudian Simpan
Nah, sekarang kembali ke rencana awal membuat Tag Cloud
Dari menu Tata Letak, pilih Edit HTML, jangan lupa centang Expand Template Widget.
Lakukan langkah pencegahan kerusakan lebih dulu, klik Download Template Lengkap. Ini untuk jaga-jaga siapa tahu ada kerusakan saat edit html, kita bisa mengembalikan blog seperti semula.
Jika sudah..kita mulai sekarang...
Cari kode ini ]]></b:skin>
Kalu udah ketemu, Copy Paste kode ini di atasnya

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

Setelah itu, kembali ke kode ini ]]></b:skin> , tepat di bawahnya CoPas kode ini:

Masih pada posisi edit HTML, cari kode ini:

<b:widget id='Label1' locked='false' title='cloud' type='Label'>
&lt b:includable id='main'>
<b:if cond='data:title'>
<h2></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Kalau udah ketemu, ganti kode tersebut dengan kode dibawah ini:

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Sampai disini, lanjutkan dengan menyimpan template. Klik Simpan
Selesai..!!! & lihat hasilnya...

Selamat Mencoba..!
Sumber : Pelajaran Blog

Menampilkan Kode HTML Di Postingan

2010-04-25T13:17:00.000-07:00

Saat blogwalking, aku sering melihat ada banyak artikel yang membahas tentang tips-tips blog, terutama tips yang berhubungna dengan edit HTML. Semula aku kira bisa menampilkan kode HTML tersebut di postingan begitu saja. Tetapi saat aku mencoba membuat posting Membuat Related Post, di awal proses berjalan lancar, tapi saat aku paste kode HTMLnya.. gedubrakk....Lho? Kok kodenya ga muncul?? Yang muncul malah tulisan Related post-nya.Hhmm..aku berpikir keras, aku coba berkali-kali, tetap tidak bisa. Aku tidak kehilangan akal, nanya sama Om Google, ternyata ada banyak artikel tentang hal ini. Kode HTML jika di tuliskan begitu saja di postingan akan langsung dieksekusi oleh browser, jadi tidak akan muncul. Lalu bagaimana caranya?? Caranya adalah kode HTML itu harus di parse dulu.

Nah untuk memparse kode HTML ada banyak website yang menyediakannya. Salah satu tempat yang sudah membuatku berhasil adalah disini. Caranya:

Paste kode HTML yang akan kamu tampilkan di postingan di kotak yang disediakan
Kemudian klik tombol parse di bagian bawah kotak

Tunggu beberapa saat sampai kode HTML yang diparse muncul lalu Copy
Setelah itu, kembali ke tempat kamu membuat entri/post baru.

Pilih tab Edit HTML & paste.
Klik tab Compose, dan silahkan lanjutkan proses membuat postingan.
Sebelum dipublish, ada baiknya di preview dulu hasilnya.

Selamat Mencoba....:-)
Sumber: http://www.emefa.co.cc

Membuat Related Post

2010-04-14T04:35:00.000-07:00

Wah...hari ini cukup menggembirakan, setelah pulang kerja, ga langsung pulang..tapi menyempatkan diri untuk membuka blog. Rasanya ada yang kurang kalau aku tidak sempat melihat blogku yang tumbuh berkembang..hehehe....

Ada yang menyenangkan seperti yang aku bilang tadi, saat blogwalking aku membaca artikelnya sampai selesai, dan di bagian akhir artikelnya ada tulisan "Related Post". Wah keren nih..aku dapat di Blogtaintment. Jadi aku ingin membagi keberhasilanku kepada yang kebetulan mampir dan kebetulan ingin memasang fitur ini di blognya. Adapun langkah-langkahnya:

Silahkan Login dulu ke blog kamu
Kemudian masuk menu Dashboard ->Layout->Edit HTML.
Kalau udah, jangan lupa centang dulu kotak 'Expand Widgets Template'
Trus cari kode ini <data:post.body/>
Letakkan kode berwarna hijau berikut ini di bawah kode <data:post.body/> yang udah ketemu tadi.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

Langkah selanjutnya adalah klik Simpan Template & selesai sudah.

Catatan:

Kamu bisa menganti tulisan Related Post dengan kata-kata yang lain, misalnya Artikel terkait, dll..
Jika Dengan script di atas gagal, coba dengan script ini:

<br /> <b:if cond='data:blog.pageType == "item"'><br /> <div class='similiar'><br /> <div class='widget-content'><br /> <h3>Related Posts</h3><br /> <div id='data2007'/><br/><br/><br /> <script type='text/javascript'><br /> <br /> var homeUrl3 = "<data:blog.homepageUrl/>";<br /> var maxNumberOfPostsPerLabel = 4;<br /> var maxNumberOfLabels = 10;<br /> <br /> maxNumberOfPostsPerLabel = 100;<br /> maxNumberOfLabels = 3;<br /> <br /> <br /> function listEntries10(json) {<br /> var ul = document.createElement('ul');<br /> var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? <br /> json.feed.entry.length : maxNumberOfPostsPerLabel;<br /> for (var i = 0; i < maxPosts; i++) {<br /> var entry = json.feed.entry[i];<br /> var alturl;<br /> <br /> for (var k = 0; k < entry.link.length; k++) {<br /> if (entry.link[k].rel == 'alternate') {<br /> alturl = entry.link[k].href;<br /> break;<br /> }<br /> }<br /> var li = document.createElement('li');<br /> var a = document.createElement('a');<br /> a.href = alturl;<br /> <br /> if(a.href!=location.href) {<br /> var txt = document.createTextNode(entry.title.$t); <br /> a.appendChild(txt);<br /> li.appendChild(a);<br /> ul.appendChild(li); <br /> }<br /> }<br /> for (var l = 0; l < json.feed.link.length; l++) {<br /> if (json.feed.link[l].rel == 'alternate') {<br /> var raw = json.feed.link[l].href;<br /> var label = raw.substr(homeUrl3.length+13);<br /> var k;<br /> for (k=0; k<20; k++) label = label.replace("%20", " ");<br /> var txt = document.createTextNode(label);<br /> var h = document.createElement('b');<br /> h.appendChild(txt);<br /> var div1 = document.createElement('div');<br /> div1.appendChild(h);<br /> div1.appendChild(ul);<br /> document.getElementById('data2007').appendChild(div1);<br /> }<br /> }<br /> }<br /> function search10(query, label) {<br /> <br /> var script = document.createElement('script');<br /> script.setAttribute('src', query + 'feeds/posts/default/-/'<br /> + label +<br /> '?alt=json-in-script&callback=listEntries10');<br /> script.setAttribute('type', 'text/javascript');<br /> document.documentElement.firstChild.appendChild(script);<br /> }<br /> <br /> var labelArray = new Array();<br /> var numLabel = 0;<br /> <br /> <b:loop values='data:posts' var='post'><br /> <b:loop values='data:post.labels' var='label'><br /> textLabel = "<data:label.name/>";<br /> <br /> var test = 0;<br /> for (var i = 0; i < labelArray.length; i++)<br /> if (labelArray[i] == textLabel) test = 1;<br /> if (test == 0) { <br /> labelArray.push(textLabel);<br /> var maxLabels = (labelArray.length <= maxNumberOfLabels) ? <br /> labelArray.length : maxNumberOfLabels;<br /> if (numLabel < maxLabels) {<br /> search10(homeUrl3, textLabel);<br /> numLabel++;<br /> }<br /> }<br /> </b:loop><br /> </b:loop><br /> </script><br /> </div><br /> <br /> </div><br /> </b:if><br /><br />

Sekian tutorialnya, semoga bermanfaat....:-)
Sumber: wawanwae

Lahirnya Budigadget

2010-02-24T04:20:00.000-08:00

Hari ini adalah hari pertama budigadget terbentuk. Aku merintis blog ini untuk belajar tentang komputer & informasi gadget-gadget unik yang terus bermunculan. Harapanku kedepan adalah blog ini bisa menjadi media utuk belajar bersama tentang komputer, elektronika & perkembangan teknologi. Selain karena hobi, aku punya misi khusus yaitu mengajak teman-teman semua yang kebetulan mapir ke blogku entah sengaja ataupun tidak disengaja (nyasar) untuk ngeBlog. Ayo jadikan Blog sebagai media untuk menyalurkan ide positif.
Keep Blogging!