Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan
Tampilkan postingan dengan label JavaScript. Tampilkan semua postingan

Kamis, 04 November 2010

Memasang Total Comment pada Title Post

Penulis : oom.com

Pasti rekan sudah sering melihat ada beberapa blog yang menampilkan total comment setelah judul postingan, dengan demikian kita / pengunjung lain dapat mengetahui langsung seberapa jauh menariknya postingan tersebut dengan indikator jumlah komentar pada posting tersebut. Untuk bisa memiliki tampilan seperti itu caranya sangat mudah sekali. ikuti saja tutorialnya dibawah ini



Pertama buka halaman "EDIT HTML", kemudian beri tanda centang pada "Expand Template Widget". cari kode seperti dibawah :

<a expr:href='data:post.url'><data:post.title/></a>

kalau sudah ketemu, tinggal Copy-paste aja semua kode dibawah ini dan letakan setelah / dibawah kode diatas.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFu4Ht72BSyobxdDKzhu4FkrXGyDq8Mf7BojdIc_AZSvSOJ6jYQYklDTEesf6LfGb76P4jwVwRlu6BVfFmUBdXbL9239rRqRsF3OoEbmDZDQkORhymr1MpSyHZRoFXLrpBN4XcVXq0JGs9/s400/icon_comments.png'/>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <b:else/><data:post.numComments/></b:if></a>
</b:if>


Terakhir Simpan Template , so Refresh blog anda.
Bagaimana seharusnya kita memberikan komentar postingan dari sebuah blog silahkan anda baca disini

Jumat, 29 Oktober 2010

Favicon Instan Untuk Blog

Favicon adalah sebuah icon yang tampil sebelum url address dari sebuah website pada layar browser anda. Icon ini sangat efektif untuk memberikan ciri dari sebuah blog / website yang biasanya berkaitan dengan content sebuah blog / website tersebut, sehingga blog / website tersebut akan terlihat lebih profesional dan tentu memiliki keunikan tersendiri.


seperti pada ilustrasi berikut ini

Banyak sudah tutorial blog yang menjelaskan cara memasang favicon ini. Walau demikian saya tetap akan mencoba sharing cara tersebut TETAPI tips yang akan saya jelaskan ini adalah bagaimana memanfaatkan icon-icon yang sudah ada pada sebuah website yang khusus menyediakan icon-icon tersebut seperti di www.iconarchive.com
Langkah-langkahnya adalah sebagai berikut :
1. Buka browser anda menuju ke www.iconarchive.com

2. Silahkan anda cari icon berdasarkan kategori yang ada. Misalnya : “ Halloween icons ”

akan muncul tampilan berikut ini

3. Klik salah satu icon Halloween pada bagian gambar tersebut, akan kembali tampil dengan jumlah icon yang tersedia (19 icon)

4. Klik pada icon yang akan digunakan, misalnya : “ Tounge icon “
5. Akan muncul tampilan berikut ini pada browser anda, Klik pada ukuran icon yang akan digunakan misalnya : 32x32 pixel

6. Icon akan tampil pada satu halaman browser penuh, Silahkan anda copy URL nya

7. Login pada blogger anda pada Dashboard klik Rancangan – Edit HTML, klik option Expand template widget
Cari kode ini :
<link href='URL DARI ICON YANG ADA' rel='shortcut icon'/>
Biasanya Kode diatas diletakkan setelah ]]></b:skin>dan sebelum </head>

8. Silahkan anda ganti / Paste-kan dari langkah 6 diatas pada bagian kode yang berwarna MERAH diatas dari URL ICON standar blog anda.

9. Simpan Template – Lihat / Refresh blog anda.

Catattan :
Gunakan browser Mozilla Firefox untuk melihat hasilnya.

Jumat, 08 Oktober 2010

Memasang Widget Recent Post + (Thumbnails dan Comment Count)

Beberapa rekan mungkin sudah ada yang pernah memasang Widget Recent Post + Thumbnails + Comment Count ini ya, bagi yang belum pernah tidak ada salahnya mencoba memasang widget cantik ini yang saya ketahui pembuatnya bernama Kranti, yaitu owner dari Bloggertriks.com.


Kalo tidak salah dulu saya pernah juga menulis tentang Recent Posts menggunakan Javascript, tapi yang terbaru ini rada beda, dimana widget ini tidak hanya menampilkan recent post doank, tetapi juga dilengkapi dengan penambahan fasilitas gambar dan juga jumlah komentar, seperti pada gambar diatas.
Untuk memasang widget ini caranya sangat mudah, kita tinggal copy-paste aja semua kode dibawah ini, kemudian langsung paste aja dalam gadget HTML/javascript (Tuju tab Layout - Page Elements - Add a Gadget - pilih HTML/javascript)
Berikut kodenya :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://blogging-admin.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

Apa saja yang perlu diedit ?

boxwidth - Ukuran Lebar Widget
cellspacing - Spasi diantara cells
borderColor - Warna Border
thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
fntsize - Ukuran Font pada title
acolor - Warna title
aBold - Tebal huruf pada title? (true or false)
numposts - Jumlah recent post yang ditampilkan?
home_page : http://NAMABLOGKAMU.com/ (Ubah sesuai URL blog masing2)

Senin, 16 Agustus 2010

Pluralink: Menampilkan Banyak Pilihan Dalam Satu Link

Pluralink menyediakan plugin berbasis javascript yang sangat menarik, dengan plugin ini kita dapat menampilkan satu link tunggal yang didalamnya juga berisi daftar drop-down menu beberapa link sekaligus. Sebagai contoh dalam sebuah artikel kita sedang membahas tentang software dan software tersebut ternyata memiliki beberapa alternatif link download yang berbeda, tentu tidak ada cara lain khan selain kita berusaha mengurutkan link download tersebut satu persatu.


Tetapi dengan Pluralink kita cukup menampilkannya hanya dalam satu link saja misalkan "download disini", dan selanjutnya biarkan pengguna yang memilih salah satunya.

Pluralink kemungkinan besar dapat digunakan di halaman web/blog apa saja, termasuk blogger salah satunya selama flatform tersebut Support Javascript Enable. Silahkan pelajari instruksi cara memasangnya dan untuk pengguna Wordpress sudah tersedia juga pluginnya, silahkan download saja disini.
(cakepkan kan tampilan link-nya diatas ..)

Cara Pasang Di blogger:
Copy-Paste semua kode dibawah ini, kemudian letakan diatas kode </head> pada halaman Edit HTML

<script type="text/javascript" src="http://pluralink.com/files/pluralink.js"></script>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink.css" type="text/css" media="screen" />
<!--[if IE]>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink_ie.css" type="text/css" />
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="http://pluralink.com/files/pluralink_ie6.css" type="text/css" />
<![endif]-->

Contoh penerapan Link : Rekan bisa memasang link ini dimanapun rekan suka, bisa pada menu atau dalam artikel. Pastikan pemisah link dan link title mengunakan tanda ||

seperti pada contoh berikut ini :
<a href="http://firstlink.com/||http://secondlink.org/" title="First link description||Second link description">Some pluralink</a>

Hasilnya :
Some pluralink

Kamis, 15 Juli 2010

Fly Banner With Close Button

Penulis : trik-tipsblog.blogspot.com

Mungkin rekan blogger pernah melihat tutorial ini, memang setau saya ada yang lebih rumit menggunakan banyak kode, tapi disini saya coba memberikan tips yang lebih mudah dan sangat simple bahkan bagi anda blogger yang baru mengenal pengkodean pasti bisa melakukannya, ok saya akan segera memberikan tutornya, lanjutkan bacanya ya.



nih ikutin saja langkahnya :
1. Login Ke Blogger.com dengan Akun anda masing-masing Pastinya
2. Masuk ke Tab Tata Letak / Rancangan
3. Pilih Elemen Halaman
4. Tambah Gadget Pilih HTML / JAVASCRIPT
5. Dan Copy kode di bawah ini kedalamnya ok

<a onblur="try {parent.
deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLkOmdH-44qW_AZhLVyHHY-xi8KoRWTXlOq58MVwJn15fjuQq0r_nM2kLQH2w14MOaewoyeCiuVofGJPaonPUM_6Q8R13K7XJQC6U0oTv5Q1XvrVxFsYpErAJWzAUff7DzmiRswmNt8Jw/s1600-h/Widget.JPG"><img style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 300px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhg3nqGDAqJYbfH75-ImFDnw7dwcojVCZ4LNWf8NEy85xi_nXOenC7LSBh5FQOPCr0ixCawNavlid4LrOJw4BMXuMCQszU_WK7Z9z6HliPjotjF1dk9AmraDnZtOLAwijkrPaLEL2pCA/s1600/Widget.JPG" alt="" id="BLOGGER_PHOTO_ID_5493933113530648754" border="0" /></a>
<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</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 = !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>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Close][Klik 2x]:.
</a>
</div>
<center>

Masukan Kode iklan atau Gambar yang anda inginkan di sini

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

6. Simpan

Semoga BERHASIL :-)

Kamis, 24 Juni 2010

Cara buat Random “tips of the day”

Tips of the day merupakan tips singkat yang akan disampaikan kepada pengunjung seriap hari, Tips ini bisa berisi apa saja, bisa berupa Tips Bisnis, Tips memasak, Tips merawat mobil, Tips money online, Tips bercinta atau apalah terserah :), Asal jangan tips blogging karena dah punya om hehehe (emang siapa om ya :). Sebenarnya Tips of the day disini cuma istilah saja...tips yang akan kita buat nanti bukan disampaikan setiap hari melainkan tips ini akan berganti ketika pengunjung melakukan refresh atau reload pada halaman blog.



Memangnya Tips of the day ini berguna om? tentu saja, dari pengamatan saya selama ini banyak pengunjung menyukai tips singkat yang saya sampaikan di blog saya -> PD bgt ya he100x. Selain berguna menampilkan informasi singkat, coba bayangkan ketika kamu hanya ingin memposting artikel yang pendek misalkan hanya 250 karakter..masa mau dipaksa dipanjang-panjangin khan malah terlihat aneh, disinilah untungnya memasang Tips of the day. Pengen tau cara buatnya...

Untuk kodenya bisa kamu pelajari script dibawah ini:

<a href="http://www.o-om.com">
<img border="0" style="float:left; margin:0 5px 5px 0;cursor:pointer; cursor:hand;" alt="http://www.o-om.com" src="http://www.geocities.com/oom_directory/tipsOftheday.gif"/></a>
<font color="#333333"><b>Did You Know...</b>
<script language="JavaScript">
//store the quotations in arrays
tips = new Array(5);
tips[0] = "<i>tips bla bla bla 1</i>";
tips[1] = "<i>tips bla bla bla 2</i>";
tips[2] = "<i>tips bla bla bla 3</i>";
tips[3] = "<i>tips bla bla bla 4</i>";
tips[4] = "<i>tips bla bla bla 5</i>";
//calculate a random index
index = Math.floor(Math.random() * tips.length);
//display the quotation
document.write("\n");
document.write(tips[index]);
//done
</script>
</font>
<a href="javascript:location.reload(true)">»»</a> <a target="_blank" href="http://blogging-admin.blogspot.com/2010/06/cara-buat-random-tips-of-day.html">(?)</a>
<br/>

Sedikit penjelasan kode :
Kode warna hijau merupakan text tips yang akan ditampilkan nantinya.

Kode warna pink merupakan icon/logo dari tips, kamu bisa mengganti sesuai keinginan (caranya tinggal arahkan saja alamat url dimana logo/icon kamu disimpan).

Kode warna kuning merupakan kode singkat untuk melakukan refresh atau reload halaman, ketika kode ini di klik maka setiap halaman di refresh tips tersebut akan berganti secara otomatis (kode ini jangan di modifikasi).

Bagaimana Menambah Tips nya biar banyak ?
Lihat contoh kode dibawah, ini berarti kamu hanya menampilkan 5 tips.
tips = new Array(5);
tips[0] = "<i>tips bla bla bla 1</i>";
tips[1] = "<i>tips bla bla bla 2</i>";
tips[2] = "<i>tips bla bla bla 3</i>";
tips[3] = "<i>tips bla bla bla 4</i>";
tips[4] = "<i>tips bla bla bla 5</i>";

Kalau pengen nambah 10 tinggal tambahin aja script kodenya seperti ini.
tips = new Array(10);
tips[0] = "<i>tips bla bla bla 1</i>";
tips[1] = "<i>tips bla bla bla 2</i>";
tips[2] = "<i>tips bla bla bla 3</i>";
tips[3] = "<i>tips bla bla bla 4</i>";
tips[4] = "<i>tips bla bla bla 5</i>";
tips[5] = "<i>tips bla bla bla 6</i>";
tips[6] = "<i>tips bla bla bla 7</i>";
tips[7] = "<i>tips bla bla bla 8</i>";
tips[8] = "<i>tips bla bla bla 9</i>";
tips[9] = "<i>tips bla bla bla 10</i>";

Kalau sobat ingin lebih banyak lagi bisa kan ..? Yang harus diingat jumlah tips dihitung dari 0 (nol) bukan dari angka 1.

Cara memasang pada blogger :
Pilih Tempalate -> Elemen Halaman -> Tambahkan sebuah Elemen Halaman -> Copy-Paste kode script nya -> simpan dan lihat hasilnya.

Rabu, 23 Juni 2010

Search Engine With Flat Button and Flat Textbox Style

Search Engine pada blogger merupakan proses pencarian untuk memudahkan mengunjung mencari suatu artikel sesuai dengan kata kunci yang digunakan.

Thank's o-om Walaupun sudah banyak yang mengetahui cara pembuatannya namun kali ini saya memberikan sentuhan yang berbeda dari yang standar, yaitu menampilkan dengan gaya Flat Button Style dan Flat Texbox Style.


Untuk membuatnya ikuti langkah dibawah ini:
1. Pada Template -> Element Halaman -> Tambahkan sebuah Elemen Halaman -> HTML/JavaScript
Copy / Paste code dibawah ini


Jangan lupa ganti NAMABLOG dengan nama blog sobat, dan jangan lupa disimpan.

2. Langkah kedua pada Template -> Edit HTML
Copy / Paste code dibawah ini pada jajaran kode CSS pada blogger, kalo masih bingung cari kode body { lalu setelah tanda akhiran body ada tanda } letakan saja dibawah kode tersebut.


.buttonreset {
color: #333;
background-color: #f3f3f3;
border: 1px solid #999;
padding: 1px;
}
.buttonsubmit {
color: #333;
background-color: #f3f3f3;
border: 1px solid #999;
padding: 1px;
}
.textinput {
color : #333;
background-color: #ffffff;
border: 1px solid #999;
padding: 1px;
}


jangan lupa disimpan, dan lihat hasilnya seperti dibawah ini



Jumat, 18 Juni 2010

Widget Translator Language

Translator widget tentu sesuatu yang sangat familiar bagi para pengguna internet untuk menerjemahkan isi dari informasi yang lagi dibaca terutama pada content non Indonesian Language. Anda dapat langsung mengetikkan kata, kalimat, bahkan beberapa paragrap yang akan diterjemahkan oleh google dengan fasilitas translatenya rekan dapat mencobanya di google translate


Bagi pengguna blog tentu dapat juga menambahkan fasilitas ini pada bagian / widget blognya, sehingga pengunjung yang non Indonesian people dapat mengerti isi dari blog kita.
Caranya mudah sekali, silahkan Copy - Paste dari salah satu bentuk tampilan translator berikut ini dan letakkan pada salah satu widget blog anda.


1. Vertical dengan Background Putih

mau yang seperti diatas berikut kodenya

<div style="border:1px solid #ccc;padding:10px 3px 3px 10px;text-align:center;background-color:#FFFFFF;">
<!---GOOGLE TRANSLATE MINI FLAGS--->
<div align="left">
<!-- Add English to Chinese (Simplified) BETA -->
<strong> Google Translate</strong>�<br/>
<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Czh-CN&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/> Chinese</a>

<!-- END English to Chinese (Simplified) BETA-->

<br/>

<!-- Add English to French -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cfr&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/> French</a>

<!-- END English to French -->

<br/>

<!-- Add English to German -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cde&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/> German</a>

<!-- END English to German -->

<br/>

<!-- Add English to Italian -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cit&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/> Italian</a>

<!-- END English to Italian -->

<BR/>

<!-- Add English to Japanese BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cja&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/> Japanese</a>

<!-- END English to Japanese BETA -->

<br/>

<!-- Add English to Korean BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cko&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/> Korean</a>

<!-- END English to Korean BETA -->

<br/>

<!-- Add English to Russian BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cru&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/> Russian</a>

<!-- END English to Russian BETA -->

<br/>

<!-- Add English to Spanish -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Ces&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/> Spanish</a>

<!-- END English to Spanish -->

</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://blogging-admin.blogspot.com" target="_blank">+</a> <a href="http://blogging-admin.blogspot.com/2010/06/widget-translator-language.html" target="_blank">Grab this Widget</a></small><br/>

</div>



2. Vertical Background Transparent
sama dengan diatas tetapi dengan latar belakang transparan

<div style="border:1px solid #ccc;padding:10px 3px 3px 10px;text-align:center;background-color:none;margin:7px 0 7px 0;">

<!---GOOGLE TRANSLATE MINI FLAGS--->
<div align="left">

<!-- Add English to Chinese (Simplified) BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Czh-CN&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/> Chinese</a>

<!-- END English to Chinese (Simplified) BETA-->

<br/>

<!-- Add English to French -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cfr&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/> French</a>

<!-- END English to French -->

<br/>

<!-- Add English to German -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cde&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/> German</a>

<!-- END English to German -->

<br/>

<!-- Add English to Italian -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cit&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/> Italian</a>

<!-- END English to Italian -->

<BR/>

<!-- Add English to Japanese BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cja&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/> Japanese</a>

<!-- END English to Japanese BETA -->

<br/>

<!-- Add English to Korean BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cko&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/> Korean</a>

<!-- END English to Korean BETA -->

<br/>

<!-- Add English to Russian BETA -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cru&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/> Russian</a>

<!-- END English to Russian BETA -->

<br/>

<!-- Add English to Spanish -->

<a target="_blank" rel="nofollow" style="cursor:pointer; cursor:hand;" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Ces&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" align="absbottom" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/> Spanish</a>

<!-- END English to Spanish -->

</div>

<span style="font-size:70%;">Powered by</span> <br/>
<strong>Google</strong>� Translate<br/>
<span style="font-size:80%;"><a href="http://blogging-admin.blogspot.com" target="_blank">+</a> <a href=" http://blogging-admin.blogspot.com/2010/06/widget-translator-language.html " target="_blank">Grab this Widget</a></span>

</div>



3. Mendatar Background Putih

kodenya berikut ini

<div style="border:1px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:#FFFFFF;min-width:235px; margin: 5px 0 5px 0;">

<!--GOOGLE TRANSLATE MINI FLAGS-->
<div align="center" style="width:auto;">

<!-- Add English to Chinese (Simplified) BETA -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Czh-CN&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/></a>

<!-- END English to Chinese (Simplified) BETA-->

<!-- Add English to French -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cfr&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/></a>

<!-- END English to French -->

<!-- Add English to German -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cde&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/></a>

<!-- END English to German -->

<!-- Add English to Italian -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cit&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/></a>

<!-- END English to Italian -->

<!-- Add English to Japanese BETA -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cja&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/></a>

<!-- END English to Japanese BETA -->

<!-- Add English to Korean BETA -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cko&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/></a>

<!-- END English to Korean BETA -->

<!-- Add English to Russian BETA -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cru&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/></a>

<!-- END English to Russian BETA -->

<!-- Add English to Spanish -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Ces&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/></a>

<!-- END English to Spanish -->

</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://blogging-admin.blogspot.com" target="_blank">+</a> <a href="http://blogging-admin.blogspot.com/2010/06/widget-translator-language.html" target="_blank">Grab this Widget</a></small><br/>

</div>


4. Mendatar 2 baris Background putih

kodenya berikut ini

<div style="border:1px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:#FFFFFF;min-width:180px; margin: 5px 0 5px 0;">

<!--GOOGLE TRANSLATE MINI FLAGS-->
<div align="center" style="width:auto;">

<!-- Add English to Chinese (Simplified) BETA -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Czh-CN&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-Chinese (Simplified) BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-Chinese (Simplified) BETA" src="http://growpa.bay.livefilestore.com/y1p1uPoPqXa3UKUUAkAVFfexI7egVPHRwG3pImeqPG7Lje9X3Vaok2Ow5pXvBf-O44vyDmb9PRG78uzI9GNZUQM0Q/_chinese_s.png" height="24" title="Google-Translate-Chinese (Simplified) BETA"/></a>

<!-- END English to Chinese (Simplified) BETA-->

<!-- Add English to French -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cfr&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to French "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to French " src="http://growpa.bay.livefilestore.com/y1p2khoQY_AJfGOc4sr626ugjACTUnVs-mBTEUz-tb5f8jQ9_BM37-lp3ZxqFjmUvMRSH35UYbHHp0lN6QAXE3-aQ/_french_s.png" height="24" title="Google-Translate-English to French "/></a>

<!-- END English to French -->

<!-- Add English to German -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cde&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to German"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to German" src="http://growpa.bay.livefilestore.com/y1prWarW-yS9UWGkP9t6HIIQjW_Eltl__uJPVASmgDKql99zKOlv1jJilTrGVvRM7VSEIvjGsR4A6pbPo2KrQdrow/_german_s.png" height="24" title="Google-Translate-English to German"/></a>

<!-- END English to German -->

<!-- Add English to Italian -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cit&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Italian" src="http://growpa.bay.livefilestore.com/y1pihtUnS8uKwJQ8ep-_AtvEefYsSSpe7BuGCRmnoA5G2305nPqYP5ENQnX6i6YHBXveCLNXgitzGpQLCvw8YYBTA/_italian_s.png" height="24" title="Google-Translate-English to Italian"/></a><!--END English to Italian--><BR/><!--Add English to Japanese BETA--><a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cja&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Japanese BETA" src="http://growpa.bay.livefilestore.com/y1pwPr3iynDaRaulak1f2W4f3gWNEOqQ4K9nsIWB6N7aOYBI02QhhX-48OOeROACQAcHleqiCY2wTLKfnffTghs2A/_japanese_s.png" height="24" title="Google-Translate-English to Japanese BETA"/></a>

<!-- END English to Japanese BETA -->

<!-- Add English to Korean BETA -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cko&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Korean BETA" src="http://growpa.bay.livefilestore.com/y1pXidbN5Z6YZ5j0fb2AXCyjLBr9n_ddaYqz1qFEi3N7NBjegm2VkUQavp9d8hMz2UWBJHF2ajVRjWUnn5PCdj5Cg/_korean_s.png" height="24" title="Google-Translate-English to Korean BETA"/></a>

<!-- END English to Korean BETA -->

<!-- Add English to Russian BETA -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Cru&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Russian BETA " src="http://growpa.bay.livefilestore.com/y1phf9HxXBCzVD3KIGCm2oTlvoTGwR_rWkgTRQ0_w-Nw_Oi9OYdzIMfJjhl1kvbven1Fo61xxKLF_6KM7w_BlDhCg/_russian_s.png" height="24" title="Google-Translate-English to Russian BETA "/></a>

<!-- END English to Russian BETA -->

<!-- Add English to Spanish -->

<a target="_blank" rel="nofollow" onclick="window.open(&apos;http://www.google.com/translate?u=&apos;+encodeURIComponent(location.href)+&apos;&langpair=en%7Ces&hl=en&ie=UTF8&apos;); return false;" title="Google-Translate-English to Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="24" alt="Google-Translate-English to Spanish " src="http://growpa.bay.livefilestore.com/y1pS41oGyQtMRYc6yBTJoaovLHaCZOthp6qXfQxIau493uQ-BefJvBTkz5kliT5BfzKgxIZ8hYMuUXPjKEXio1Gow/_spanish_s.png" height="24" title="Google-Translate-English to Spanish "/></a>

<!-- END English to Spanish -->

</div>

<sup>Powered by</sup> <img align="absbottom" src="http://www.google.com/ig/modules/translatemypage_content/logo.gif"><br/>
<small><a href="http://blogging-admin.blogspot.com" target="_blank">+</a> <a href=" http://blogging-admin.blogspot.com/2010/06/widget-translator-language.html" target="_blank">Grab this widget</a></small><br/>

</div>


Bagaimana mudah bukan, semoga bermanfaat ..!!

Senin, 14 Juni 2010

Modifikasi Tampilan MyBlogLog Recent Readers

Penulis : www.o-om.com

Namun ada satu hal yang tidak saya sukai, bukan dari tulisan mas cosa, tapi dari tampilan standar widgets MBL yang kurang nyaman memberikan kemudahan dalam mengajak pembaca bergabung dalam komunitas. Anda bisa melihat tampilan widget MBL anda saat ini, terasa sangat kental dengan nuansa MBL-nya dan bandingkan dengan MBL milik saya.





Lihat sample gambar dibawah:

Gambar diatas tidak perlu saya jelaskan panjang lebar, anda pasti memahaminya. Nah demi meningkatkan jumlah komunitas pembaca tentu harus ada sedikit perubahan, terutama pada modifikasi tampilan, selain MBL hanya tampak seperti thumbnails, anda juga bisa menambahkan sendiri kalimat berupa ajakan atau menghasut pengunjung agar tergabung dalam komunitas.

Cara Modifikasi tampilan MyBlogLog:

Sebelum memodifikasi tampilan, pastikan widget MBL yang anda gunakan merupakan versi lama, karena versi terbaru sudah jauh berbeda. Jika perlu anda bisa mengembalikan script baru anda ke versi lama, baca caranya: Copy paste kode dibawah ini, jangan lupa mengganti ID_MBL dengan code ID anda sendiri.


<script src="http://pub.mybloglog.com/comm2.php?mblID=ID_MBL&amp;c_width=330&amp;c_sn_opt=n&amp;c_rows=2&amp;c_img_size=h&amp;c_heading_text=&amp;c_color_heading_bg=eeeddf&amp;c_color_heading=111&amp;c_color_link_bg=eeeddf&amp;c_color_link=c13a10&amp;c_color_bottom_bg=ffffff" type="text/javascript"></script>

Selanjutnya pada Element halaman Blogger pilih Edit-HTML, masukan kode CSS dibawah ini dibawah kode <b:skin><![CDATA[

td.mbl_fo_hidden{display:none;}td.mbl_join_img{}td.mbl_join{}tr#tr0{display: none}th.mbl_h{display:none;}

Untuk menambah link berupa kalimat ajakan, anda dapat menggunakan kode dibawah ini, ganti warna merah NamaUserMBL dan ID_MBL sesuaikan dengan nama user dan ID MBL anda dan pastikan kode diletakan dibawah javascript MBL sebelumnya.

<p align="center"><a target="_blank" href="http://www.mybloglog.com/buzz/community/NamaUserMBL/">
Lihat pembaca yang tergabung komunitas</a></p>
<p align="center"><a target="_blank" href="http://www.mybloglog.com/buzz/yjoin/?ref_id=ID_MBL&ref=w">
Gabung dalam komunitas ini</a></p>
<div align="right"><br /><br /><span style="font-size: 80%">Modif by <a href="http://blogging-admin.blogspot.com">Desta </a></span></div>

Untuk lebih maksimal, anda bisa mengatur sendiri kombinasi warna dalam Script, sebaiknya sesuaikan warna background MBL dengan background template anda. Selamat Mencoba.

Senin, 07 Juni 2010

Menambahkan Tombol Save Page As PDF Pada Blog

Agar blog anda semakin cantik dan bermaksud memanjakan pengunjung agar dapat dengan mudah menyimpan informasi yang dibaca dengan format file PDF, kemarin keliling-keliling, lihat sana, lihat sini, eh .. ketemu fasilitas ini lumayan dalam rangka sharing informasi akhirnya saya posting-kan caranya disini… gimana ni lanjutkan ..??
Ini adalah salah satu tool yang saya baca dari Web2 PDF Convert setelah saya terapkan pada blog saya weleh…3x …. Ternyata sangat bermanfaat tool ini, akhirnya saya coba lanjutkan informasinya lewat blog ini .. gimana ni kembali lanjutkan ..??


Ok sobat ikuti saja langkah-langkah berikut ini :

Cara / Bentuk yang pertama atau yang disebut Simple
Bentuk yang pertama ini hasilnya sederhana/simple yaitu berupa teks dengan link perintah seperti ini :

Save to PDF


1. Silahkan sobat Copy kode berikut ini :


2. Kemudian Paste-kan pada template blog sobat, yaitu setelah kode berikut : <data:post.body/>
Atau bagian tempat lainnya pada blog sobat, yang penting sobat sudah paham susunan template blognya.

3. Simpan template

Cara / Bentuk yang kedua atau yang disebut Advance
Bentuk yang kedua ini hasilnya yaitu berupa image dengan link perintah seperti cara pertama, hanya saja di visualkan dengan icon/image/gambar.
Jika sobat ingin hasilnya sama persis dengan gambar diatas silahkan Copy kode berikut ini :


Kemudian langkah berikutnya sama dengan cara yang pertama diatas.

Ternyata sobat termasuk orang yang kreativ … dan berpikir " gimana kalau image / gambarnya kita buat sendiri dan kita gunakan pada script diatas ", bisa gak ya ….. ???
Tentu saja bisa .. !!
Nih ….. untuk itu silahkan Copy kode berikut ini :


Nah bedanya dari kode sebelumnya adalah ada kode CSS "custimg" iya kan ..? dimana script ini berisi dengan URL image / gambar yang kita upload terlebih dahulu sebelumnya ke web hosting image, yaitu pada kode :
http://i647.photobucket.com/albums/uu191/admincoy/pdf-save1.gif

untuk itu silahkan sobat buat dahulu image / gambar yang sobat suka dengan ukuran yang sesuai, upload ke hosting image sobat dan terakhir ganti URL image dari kode diatas dengan URL image yang sudah di upload tadi … Simpan Template dan lihat hasilnya .. jangan dilihat saja coba sobat lakukan uji cobanya .. berhasil gak ..?, Bermanfaat kan ..?

Kamis, 03 Juni 2010

Sexy Bookmarking For Blog

Kalo denger yang seksi-seksi biasanya bikin kita penasaran sambil ngiler. Tapi kalo setelah kata ‘seksi’ ada kata ‘bookmarking’ bukannya ngiler malah melongo. Apa coba yang seksi dari bookmarking? Nah ini dia… Sexy-Bookmarks v2 : gadget bookmarking untuk blogger yang seksi punya. Tools ini ‘menyembunyikan’ bookmarking yang diletakkan di bawah posting dan hanya akan nongol setiap kali ada mouse hover. Memang kadang yang keliatan dikit-dikit lebih seksi daripada yang langsung bugil (apa coba?!). Lanjutkan dulu bacanya ..


nah ini yang saya sebut sexy bookmarking ituCaranya sebenarnya mudah, tapi agak panjang jalan yang harus dilalui, okelah kalo begitu, sudah siap?
Let’s get ready to rumble!!
1. Ada baiknya sebelum memulai anda mengunduh dulu file berikut Download Image

2. Unpack file gambar PNG yang ada di zip tersebut menggunakan unzip tools dan upload file yang ada ke image hosting kesayangan anda. (Misalnya imageshack.us, jangan gunakan picasa atau photobucket).

3. Masuk ke halaman layout kemudian Edit HTML anda. Centang tanda Expand Widget Template untuk menampilkan semua widget yang mungkin tersembunyi.

4. Masukkan kode di bawah ini sebelum tag </head>

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery('.sexy-bookmarks a.external').attr("target", "_blank");
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery('.sexy-bookmarks').height();
var sexyFullHeight=jQuery('.sexy-bookmarks ul.socials').height();
if (sexyFullHeight>sexyBaseHeight) {
jQuery('.sexy-bookmarks-expand').hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+'px'
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+'px'
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery('.sexy-bookmarks-center')) {
var sexyFullWidth=jQuery('.sexy-bookmarks').width();
var sexyBookmarkWidth=jQuery('.sexy-bookmarks:first ul.socials li').width();
var sexyBookmarkCount=jQuery('.sexy-bookmarks:first ul.socials li').length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery('.sexy-bookmarks-center').css('margin-left', sexyLeftMargin+'px');
}
});
</script>


5. Lalu letakkan kode di bawah ini setelah Script yang baru anda pasang di atas.

<style type="text/css">
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('http://img31.imageshack.us/img31/176/sexytrans.png') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('http://img717.imageshack.us/img717/3006/sexyspritenew.png') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}</style>


6. Nah kalau kode yang di bawah ini diletakkan setelah <data:post.body/>

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'>Digg this!</a></li>
<li class='sexy-stumbleupon'><a class='external' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'>Stumble upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' expr:href='&quot;http://reddit.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Reddit'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='sexy-link'> Widget by <a href='http://www.cssreflex.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'> TutZone</a>|<a href='http://blogging-admin.blogspot.com/' title='Blogging, Download, Tips, Tricks, Windows, Computer, JavaScript, Internet, News, And Many More'> Desta</a></div>


7. Tugas berikutnya bagi anda adalah mencari kode berekstensi PNG yang ada di script kedua dan mengubah alamat urlnya dengan alamat url gambar yang sudah anda upload di image hosting anda tadi.

8. Klik Simpan Template

Akhirnya usai sudah perjalanan panjang untuk posting ini, silahkan sobat lihat hasilnya seperti pada bagian akhir posting ini, arahkan mouse pada salah satu bookmarking ... bagaimana Sexy bukan ...?

Rabu, 19 Mei 2010

Related Post Widget

Related Post dalam dunia blogger berarti posting artikel yang memiliki hubungan atau saling terkait yang dipilih dari kesamaan label, kategori, ataupun tag yang telah ditentukan pada saat mempublikasikan/posting sebuah artikel dari blog yang dibuat. Dengan hack / kode ini pembaca akan dapat melihat judul-judul artikel lainnya yang tersimpan diblog yang saling berhubungan dari kesamaan label, kategori, tag, dari judul artikel tersebut, yang biasanya terletak pada akhir sebuah artikel.


Seperti pada gambar berikut

Manfaat dari fasilitas/widget ini pembaca akan semakin jauh dan berlama-lama membaca isi dari blog yang kita buat, dan tentu saja blog akan semakin baik dalam hal waktu yang diberikan pembaca selama membaca isi dari blog yang kita buat.
Untuk menambahkan widget ini pada blog anda silahkan ikuti langkah-langkah berikut ini :
1. Login pada blog anda
2. Masuk ke Tata Letak / Layout - Edit HTML
3. Klik Pada pilihan "Expand Template Widget"
4. Cari Tag </ head> pada template blog anda
5. Copy dan Paste-kan kode berikut ini persis sebelum </ head>


6. Sekarang cari kode <data:post.body/> Dalam beberapa template kode ini mungkin terlihat seperti ini <div class='post-body>
7. Copy dan Paste-kan kode berikut ini persis di bawah kode tadi (kode pada langkah 6)


8. Simpan Template dan silahkan anda lihat pada setiap akhir posting yang anda buat, lihat diakhir posting ini.

Keterangan :
Untuk mengubah jumlah posting yang terkait muncul pada label yang sama, anda dapat mengubah angka "5" pada kode max-results=5 (kode langkah 7 diatas) dengan angka yang anda inginkan.




SMS Online - Gratis ..!!

Silahkan anda isi pada form dibawah ini :

Others Post

Widget by Desta
adalah Web Hosting milik Negeri sendiri yang harganya sangat terjangkau.

Followers This Blog

Community | Join Community Recent Readers


Submit Sitemap Your Blog

Tags


Widget by Desta

SEO BLOG

seo

Link to me

If you like this blog,then link back to me, please copy the code below.
This is what you will see.

 

homeCopyright © 2010 by All About Blogging ++

Modif by deswan.co.nr | Template by Blog Templste 4 U | Blogspot Tutorial