Free Hosting Gratis Untuk Menyimpan Javascript

Javascript dalam sebuah blog mutlak diperlukan karena sifatnya yang unik sehingga dapat  membuat penampilan sebuah blog menjadi lebih atraktif. Permasalahannya sekarang adalah penggunaan javascript dalam sebuah blog membutuhkan hosting atau tempat penyimpanan. Google sendiripun sebenarnya sudah menyediakan tempat untuk menyimpan javascript yaitu di Google Code, hosting javascript secara gratis.

Disini saya tidak akan membahas Google Code, karena saya belum pernah berhasil upload file javascript di Google Code. Entah kenapa ..., anehnya menu tab download tidak pernah muncul, sehingga bagaimana mau upload? Yaahh...mungkin belum rekeji....eh rejeki..LOL.

Kali ini saya akan memberikan alternatif lain bagi Anda untuk menyimpan file javascript, tentu saja gratis juga. Tempat hosting javascript gratis itu adalah yourjavascript.com dengan motto : "If you've got problem with your javascript files on your hosting, just host it on yourjavascript.com. We will host your javascript for free"  Yang artinya mirip-mirip gini.... "Jika Anda punya masalah dengan file javascript Anda pada hosting Anda, hanya host di yourjavascript.com. Kami akan menjadi tuan rumah javascript Anda secara gratis"

Step-stepnya mudah, tidak perlu daftar ata regristrasi lebih dulu.

Sebaiknya langsung ke TKP ......, klik yourjavascript.com :

Klik telusuri untuk upload file ...

Kalau Anda menginginkan file javascript yang akan di upload hanya untuk pribadi, silahkan centang kotak "Make private"

Akan muncul kotak "Only for domain (separate each domain with new line)"
Isikan nama domain Anda..

Selanjutnya isi email Anda ...
Lanjutkan kode verification ...
Klik Upload
Selesai ....

Buka email Anda .., disana akan mendapatkan URL script dari javascript yang Anda upload seperti gambar di bawah ini, persis dibawah tulisan "Here is the link"

Okey,... selamat mencoba, semoga bermanfaat...
Happy blogging ...!

Related Posts With Thumbnail For Blogger

Menampilkan link ke posting terkait dengan yang sesuai thumbnail posting akan membantu Anda meningkatkan tampilan halaman / pengguna. Pengguna akan tergoda untuk membaca posting yang bersangkutan ketika mereka disajikan dengan thumbnail yang menarik.
Lengkapnya, widget Ini ada di Blooger Widget, silahkan kinjungi situsnya disini.

Berikut adalah langkah-langkah instalasi secara rinci :

1. Login ke dashboard blogger Anda dan arahkan ke Layout > Edit HTML dan centang kotak "Expand Template Widget"
2. Cari kode </head> dan ganti dengan kode dibawah ini :
<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End--> </head>
3. Selanjutnya cari kode :
<div class='post-footer-line post-footer-line-1'>
4. Jika Anda tidak dapat menemukannya, coba cari kode yang satu ini :
<p class='post-footer-line post-footer-line-1'>
5. Jika sudah ketemu, copy kode berikut dibawahnya ;
<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle="Related Posts"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->
6. Anda dapat menyesuaikan jumlah maksimum posting terkait yang akan ditampilkan dengan mengedit baris ini di kode :
var maxresults=5;
7. Untuk mengedit judul widget, Anda dapat mengubah baris kode ini :
   
   var relatedpoststitle="Related Posts";
8. Untuk mengubah warna dan semua Anda harus memodifikasi CSS
9. Simpan dan lihat hasilnya

Selamat mencoba n happy blogging ..!

Memasang Tombol Back To Top

Posting kali ini saya khususkan bagi sobat yang belum ada fasilitas back to top pada halaman web atau blog yang kita gunakan.

Agar pembaca lebih mudah dan cepat kembali ke halaman paling atas pada web atau blog kita, mungkin lebih baik kalau kita sediakan sebuah tombol (button) "Back To Top"

Tombol ini bisa berupa tulisan "Kembali ke Atas" (Back to Top) atau image berbentuk panah (arrow) tetapi jika tombol panah ini disentuh atau di klik dengan mouse, tulisan "Back To Top" secara otomatis akan muncul dibawah tombol tersebut.

Penempatan tombol ini tentunya pada halaman paling bawah di web atau blog kita, bisa diletakkan bawah-kanan atau bawah-tengah.

Untuk gambar panah, anda dapat kunjungi situs yang menyediakan clipart yang ada di internet dengan mesin pencari, tinggal pilih mana yang anda suka.

Salah satunya anda bisa kunjungi situs penyedia ratusan clipart dan free alias gratis yang alamatnya ada di : http://www.freeclipartnow.com

Contoh-contoh image untuk tombol back to top :

Nah setelah anda pilih gambar panah yang anda suka, download dan simpan ditempat image hosting, dimana biasanya anda menyimpan semua file image milik anda, misalnya saja di photobucket.com, ziddu.com, picasaweb.google.com dan banyak lagi lainnya yang free alias gratis !

Jika image sudah dipilih dan disimpan, kali ini saya akan sharing bagaimana cara memasang tombol back to top yang berupa tombol image dan jika di klik, tulisan "Back To Top" akan muncul dibawah tombol panah tersebut (penempatannya ada di bawah-kanan).

Caranya cukup mudah, ikuti langkah-langkahnya...

Seperti biasa, login di blogspot (blogger.com), pilih Tata Letak, pilih Edit HTML , cari kode ini : </body>

Kemudian sroll mouse anda kebawah lagi sampai menemukan kode : <div id='credit'>

Copy dan paste kode dibawah ini dan letakkan tepat diatas kode </div> </body> </html>

<a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top'><img src='http://Your_Image_Hosting/arrowup.jpg'/></a>

Ganti :

Your_Image_Hosting , dengan alamat Url image hosting anda.

right (bawah-kanan) ; left (bawah-kiri) ; center (bawah-tengah)

Klik Simpan.

Sekarang coba lihat halaman web/blog anda.

Happy blogging ....!

Berikan komentarmu, setelah mencobanya ......

.

.

Pasang Penterjemah Bahasa di Blogmu

Ingin pasang penterjemah otomatis di blogmu?

Sebenarnya Gadget Translator, di Google sudah tersedia, saat saya menulis ini jumlahnya ada 7 gadget translator. Akan tetapi ada beberapa yang belum dapat digunakan dan ada pula yang masih beta.

Nah, saya sudah lama pasang gadget translator dengan simbol bendera masing-masing negara atau bahasa, yaitu dari hasil modifikasi dan percobaan beberapa kali yang hasilnya tampak di side bar sebelah kanan atas blog ini.
Dengan hanya klik salah satu bendera yang tersedia, maka halaman web atau blog langsung diterjemahkan kedalam bahasa yang di inginkan.

Apa yang harus disiapkan?
Yang pertama, tentunya gambar bendera-bendera yang mewakili bahasa yang akan diterjemahkan.
Gambar-gambar bendera ini, berukuran 20x15 pixels. Tetapi jika ukurannya mau disesuaikan atau dibesarkan, silahkan gunakan software Irfan View yang sudah pernah saya posting di "Cara Mudah Mengecilkan Size Foto", termasuk software Irfan View, tinggal klik untuk mengunduhnya (download), termasuk juga plugins Irfan View, agar bekerja lebih optimal. Software ini cukup mudah (friendly) untuk mengecilkan atau memperbesar ukuran gambar dengan hasil yang cukup bagus pula.
Yang kedua adalah script html.
Anda tinggal melakukan sedikit editing pada script yang sudah saya siapkan, disesuaikan dengan kode bahasanya.

Dapatkan gambar-gambar bendera
Anda dapat di download disini.
Setelah download selesai, silahkan upload atau simpan di file hosting yang banyak tersedia di internet, seperti di photo bucket atau picasaweb atau yang file hosting lainnya.
Kalau anda pengguna blogspot, sepertinya lebih baik simpan di picasaweb, karena picasaweb ini masih miliknya Google. Jadi, aksesnya juga lebih cepat dan sinkron dengan blogspot, pada saat web/blog pertama kali dibuka, gambar cepat tampil/muncul. Namun terserah anda, mau disimpan dimanapun tidak masalah, saya sudah coba di beberapa file hosting, hasilnya juga lumayan cepat.

Kode bahasa:

Lang_name	Code		Lang_name	Code		Lang_name	Code
Albanian	sq		German	de		Polish	pl
Arabic	ar		Greek	el		Portuguese	pt
Bulgarian	bg		Hebrew	iw		Romanian	ro
Chinese (Simplified)	zh-CN		Hindi	hi		Russian	ru
Croatian	hr		Hungarian	hu		Serbian	sr
Czech	cs		Indonesian	id		Slovak	sk
Danish	da		Italian	it		Slovenian	sl
Dutch	nl		Japanese	ja		Spanish	es
English	en		Korean	ko		Swedish	sv
Estonian	et		Latvian	lv		Thai	th
Filipino	tl		Lithuanian	lt		Turkish	tr
Finnish	fi		Maltese	mt		Ukrainian	uk
French	fr		Norwegian	no		Vietnamese	vi
Galician	gl		Persian	fa

Script:
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Lang_name" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7CCode&hl=en'); return false;"><img alt="Lang_name " border="0" align="absbottom/" title="Lang_name" height="15" src="URL dimana gambar bendera disimpan" style="cursor: pointer;" width="20" /></a>

Contoh, translate ke Janpanese:
<a style="cursor: pointer;" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese " border="0" align="absbottom/" title="Japanese" height="15" src="http://picasaweb.google.com/Japanese.jpg" style="cursor: pointer;" width="20" /></a>

Langkah-langkah:
1. Login di blogspot
2. Klik Rancangan, pilh Elemen laman
3. Klik Tambah Gadget, dimana translator akan ditampilkan.
4. Pilih +HTML/Javascript
5. Copy script diatas (setelah di edit) dan paste pada kotak gadget HTML
6. Simpan.
7. Lihat tampilan Blog.

Oke,..... happy nice blogging!

Read More With Image Thumbnail

Bagi sobat yang ingin pasang Read More yang dapat menampilkan gambar atau image pertama disetiap posting dengan image thumbnail, ... mungkin ini salah satu solusinya.
Tutorial ini saya dapat dari blog yang saya ikuti, o-om.com dan sudah dicoba, ternyata sukses !

Hebatnya lagi, kita dapat juga pengatur jumlah karakter yang ditampilkan.
Pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua, tampilkan jumlah karakter tanpa image.

Bagaimana bagi yang sudah memasang Read More versi lama ?
Kodenya kembalikan dulu seperti semula, caranya hapus kode yang berwarna merah dibawah ini, sesuaikan dengan masing-masing template yang digunakan !
Hapus kode yang berwarna merah ini :

<div class="post-header-line-1">
<div class="post-body">
<b:if cond="data:blog.pageType == &quot;item&quot;">
<style>.fullpost{display:inline;}</style>
<p><data:post.body></data:post.body></p>
<b:else>
<style>.fullpost{display:none;}</style>
<p><data:post.body></data:post.body></p>
<a href="data:post.url">Readmore</a>
</b:else>
<div style="clear: both;">

Selesai ?
Ikuti langkah-langkah berikut ini :

Pertama :
Seperti biasa, setelah login, langsung ke halaman EDIT HTML.
Cari kode </head> , setelah ketemu copy script dibawah ini, paste di atas kode dan simpan.

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


Kedua,
Masih pada halaman EDIT HTML, beri tanda centang pada "Expand widget template" lalu temukan kode <data:post.body/>

Ganti kode <data:post.body/> dengan semua kode dibawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Nah selesai sudah ...
Silahkan disimpan dan lihat hasilnya !

Keterangan :

• var thumbnail_mode = "float"; letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
• summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
• summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
• img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
• img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)
  

Selamat mencoba..
Happy tutorial with Ekspresi !

Social Bookmark (SB)- Bagaimana Menambahkan Icon SB di Setiap Posting ?

Ada sebuah pertanyaan dari seorang sahabat, bagaimana cara pasang icon sharing yang ada di setiap posting kita ?
Seperti kita ketahui, Social Bookmark atau Bookmark Sosial menjadi media umum untuk berbagi informasi atau sharing, terutama dalam kegiatan blogging.
Dengan menambahkan fitur ini pada setiap posting, memudahkan kita untuk berbagi hanya dengan melakukan klik pada icon yang kita sediakan pada setiap posting kita dan biasanya icon ini diletakkan dibawah posting atau diatas kotak komentar.
Kali ini akan saya tunjukkan bagaimana cara menambahkan icon sosial bookmark dengan menggunakan icon statis. Akan tetapi bila mouse diarahkan pada icon tersebut, link akan muncul secara otomatis.
Nah, lain kali akan kita bahas dengan menggunakan icon yang bergerak seperti animasi... kalau ngga lupa ya ...
Kode-kode berikut, sudah berhasil saya tambahkan pada blog Ekspresi dan Jaga-Sehat, sebanyak 10 icon yang saya anggap cukup populer, yaitu :

• technorati (http://www.technorati.com)
• delicious (http://del.icio.us)
• google (http://www.google.com)
• reddit (http://www.reddit.com)
• blinklists (http://www.blinklist.com)
• blogmarks (http://blogmarks.net)
• facebook (http://www.facebook.com)
• twitter (http://twitter.com)
• digg (http://digg.com)
• yahoo (https://yahoo.com)
  

Jadi, bagaimana cara memasangnya ?
Ikuti langkah-langkahnya di bawah ini

1. Masuk ke Blogger dashboard, klik Layout (Tata Letak), Edit HTML, centang tanda Expand Template Widget.
2. Untuk keamanan, lakukan backup lebih dahulu jika terjadi kegagalan dalam melakukan editing. Klik Download Template Lengkap dan simpan.
   
3. Copy kode dibawah ini :
   
   
   
   /*-----------Social Bookmarks------------------*/
   
   .rsociales ul {
   display:inline;
   margin:0pt !important;
   padding:0pt !important; }
   .rsociales li {
   background:transparent none repeat scroll 0%;
   display:inline;
   list-style-type:none;
   margin:0pt;
   padding:2px; }
   .rsociales img {
   border:0pt none;
   float:none;
   margin:0pt;
   padding:0pt; }
   .rsociales-sobre { opacity:0.4; }
   .rsociales-sobre:hover { opacity:1; }
   
   
4. Paste sebelum kode : ]]></b:skin>
5. Cari kode : <data:post.body/>
   Jika sudah ada fitur "Read more" atau "Continue reading" , cari kode : <data:post.body/> yang kedua
6. Jika template Anda menggunakan readmore otomatis, sisipkan kode tersebut setelah <b:if cond='data:blog.pageType == "item"'> <data:post.body/>
7. Copy dan paste, kode dibawah ini, setelah kode : <data:post.body/>
   
   
   
   

   <h3> Share This </h3>
   <div class='rsociales'>
   
   <ul>
   <li><a expr:href='&quot;http://www.technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Technorati'><img alt='Agregar a Technorati' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4XzfcD1YQdXrRBCkxB_khek0D0Hkpk7k6LyfDNt1mzSKN-mvutzkr8-utlD_s5BgCcKLeZrGjA84U_NQWR87lWzPVF276gTKSOc8hLhLIGAzNvW_3fUQJ3HFt-o3lflziGAXzn1ujYow/s1600/technorati.gif'/></a></li>
   <li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='del.icio.us'><img alt='Agregar a Del.icio.us' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcTy_RyWFA3Jn7z4CKu-_2J97OMu6dyPwHzxyiTsV7wWHYYom5Io1yR-H8XmzOcMM_Z7zwEe3ZZfYvKi31MDBxPGiS3gQ0ZmbU6hp8_JNHmt9riNzvBHyM85xyx2J0_b_EsWKLQxwhras/s1600/delicious.gif'/></a></li>
   <li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='digg.com'><img alt='Agregar a DiggIt!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgstmFUgl1UdvfF_ci1RI_-pp9pzU42EQRZ2lt9wQbeWCJSQgFIL4r4sVBLZpWVk3tz1gKAPIOe6u1SQMjHdA0CZviJeFswki-pP4sWkFdpdpUMU_N-xdfg6JGHYwi1wUgM7pUSX2s1M4w/s1600/digg.png'/></a></li>
   <li><a expr:href='&quot;http://myweb2.search.yahoo.com/myresults/bookmarklet?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Yahoo'><img alt='Agregar a Yahoo!' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifKdkzlzC7oN_2wdHZ4B62-eK5jE3hJqG1WUjXPNOAKQ_RI4sI7yyJhCV0bPWxv0MPS0D4WwJEjQ21byDusWj6AC2pqLf6gkWSTBheyEPaFxD86BK5WnrjM8q1X-uyk_fm-vOirGlnXO0/s1600/yahoo.png'/></a></li>
   <li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;output=popup&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Google'><img alt='Agregar a Google' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKVVtyI21ABFOSu1l8wcOnkWrcdOf_xyXvHVn19pWmVEzHegI2LUs1P3O0qqxHqfMQ4xAsSg8SRSQiAlBl4pGh2hBHNq27t7ONG1u2GziKMvb9qpUF1D5fDkEQ3jDnHJimYgXz20-B5OU/s1600/google.gif'/></a></li>
   <li><a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='reddit.com'><img alt='Agregar a Reddit' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-DxEdQofNIey3knfGsY5n3lbvwK-4yMkMtvrGuobUm-lIalNeNGtuuHJ1ZYjK6PcIZdI_-MEn4aTk4NxSoQxJFuo2p_s8Qi6nGE_sZc5eS461J_41kuzSGrbDUmkAnB-lJF9OL0z_ss/s1600/reddit.gif '/></a></li>
   <li><a expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Description=&amp;Url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='blinklist.com'><img alt='Agregar a Blinklist' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXJ-i2PSdmqWn1PPDgf5kttwcOfPDa9NOMXzvPlTnsfYvWCRWuXLL2v7JhbYJyvSNrSwBTD30c_ZPBZiSvq_4BXZ1R_ucLf9UZ2-FiJRJLp3d4asyRdkQ6ThiejzgoKQJ36zqLnLOlmTQ/s1600/blinklists.gif'/></a></li>
   <li><a expr:href='&quot;http://blogmarks.net/my/new.php?mini=1&amp;simple=1&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='blogmarks.net'><img alt='Agregar a Blogmarks' class='rsociales-sobre' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_LryTx_PaoHv6i8jE5zeITYzCxoRAb67S3igYoflboDX8wJ1yxA6jMgoZISHOAxMQe2xeakVJ3dkM6SdUi8b8HG0sGRW4uEHler3s1LBpQKiSkFucAuZe44ykFR3Bss5dTrmDm_iWNs/s1600/blogmarks.gif'/></a></li>
   <li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'><img alt='Agregar a facebook' class='rsociales-sobre' src='http://lh5.ggpht.com/jaloee/SJNIyWWQmEI/AAAAAAAACRY/4GVE3Qxqg34/facebook.gif'/></a></li>
   <li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Twitter'><img alt='Agregar a twitter' class='rsociales-sobre' src='http://lh6.ggpht.com/jaloee/SJNIyl7oKlI/AAAAAAAACRc/8cc7q_upZI4/twitter.gif'/> </a></li>
   </ul>
   
   </div>

   
   
8. Simpan
9. Catatan:
   
• Anda dapat menempatkannya di mana saja selama masih di bagian posting.
• Anda juga dapat menyisipkan di bawah kode :
  <div class='post-footer-line post-footer-line-1'>
  atau dibawah kode :
  <div class='post-footer-line post-footer-line-2'>
  atau dibawah kode :
  <div class='post-footer-line post-footer-line-3'>
• Anda juga dapat mengganti icon dengan menggunakan gambar Anda sendiri dengan mengganti URL milik Anda sendiri dimana icon tersebut Anda simpan (Misalnya : src='http://Your URL Images Saved/images.gif' )
  

Selamat mencoba, semoga berhasil ...!!!

Widget Gratis Tukar Link Otomatis

Beberapa minggu yang lalu saya diundang mengunjungi link salah satu sahabat dan setelah bertamu disana, ada sebuah widget yang menarik perhatian saya, yaitu sebuah widget yang mempunyai chat box untuk memasukkan link kita disana. Jadi sobat tak perlu bersusah payah membuat menu berupa copy script untuk bertukar link lagi, kecuali kalau sobat menyertakan script logo dari blog kita.
Contoh widget sudah saya pasang di lowerbar blog ini, silahkan coba untuk entrikan link sobat. Setelah klik submit, link sobat sudah terpasang ! Cukup mudah ...
Yuk ..langsung saja kita mulai memasang "free widget automatic link exchange" , walaupun harus melakukan registrasi terlebih dahulu, tapi free alias gratis.

1. Kunjungi situs LinkBox
2. Klik Register
3. Isikan data anda : Username, Email, Password, Repeat Password, Security code
4. Contreng (check mark) : I agree with Terms of Service
5. Klik Submit
6. Klik Login, masukkan username dan Password
7. Create a new LinkBox, beri nama box (Box Name), inputkan Url anda (Site URL)
8. Sebelum klik Get code, anda dapat mengatur tampilan LinkBox, khususnya penataan warnanya.
   
9. Copy kode HTML yang disediakan dan paste pada Gadget yang ada di blog anda.
10. Selesai.

Tampilan LinkBox silahkan lihat di lowbar blog ini dan sebagai percobaan silahkan masukkan nama Blog Anda (Title) kemudian masukkan URL Anda

Label, Tampilkan Jumlah Entri per Label atau Sembunyikan ?

Label atau kategori dalam suatu posting adalah untuk mempermudah pengelompokan suatu topik yang dibahas dalam satu artikel dengan artikel lainnya yang berguna baik dari sisi penulis maupun si pembaca.
Bagi para pembaca, untuk mempermudah memilih jenis artikel yang diinginkan, biasanya selalu menggunakan menu Label yang disediakan di halaman blog tersebut, disamping ada juga menu lainnya seperti Recent Post, Searching, Daftar Isi, dsb.

Untuk menampilkan menu Label ini, secara default akan ditampilkan jumlah entri per label, seperti contoh gambar sebelah kiri atau ingin sembunyikan jumlah entri per label, seperti gambar sebelah kanan :











Bila anda ingin angka dibelakang judul label dihilangkan, ada 2 cara yang cukup mudah dilakukan.

Cara pertama adalah dengan menambahkan Gadget yang ada pada Elemen Halaman :

1. Masuk ke Blogger dengan ID anda.
2. Pilih Tata Letak.
3. Pilih Elemen Halaman,
   
4. Klik Tambah Gadget
5. Klik tanda + pada Label.
6. Hapus tanda contreng pada pilihan "Tampilkan jumlah entri per label"













7. Klik tombol Simpan.
8. Lihat Blog anda.

Cara kedua (dilakukan bila pada cara pertama, pilihan menu "Tampilkan jumlah entri per label" tidak muncul) :

1. Masuk ke Blogger dengan ID anda.
2. Pilih Tata Letak.
3. Edit HTML
4. Sebaiknya backup dulu, kilk Download Template Lengkap
5. Setelah selesai, contreng Expand Template Widget
6. Cari kode yang seperti ini :
   
   (<data:label.count/>)
   
   
7. Hapus kode tersebut.
   
8. Kemudian Simpan Template.
9. Lihat blog anda.
   

Selamat mencoba ...

Membuat Favicon Pada Address Bar

Sebenarnya tentang favicon ini sudah sering dan juga dibahas di forum-forum atau situs penyedia favicon. Namun dari pada lupa, lebih baik saya posting saja disamping sebagai catatan pribadi yang sewaktu-waktu dapat digunakan.

Apakah favicon ?
Coba lihat gambar dibawah ini ...

Favicon adalah icon kecil yang muncul di samping alamat web di bagian atas browser Anda. FavIcon (singkatan dari "favorites icon"), berformat ICO (ikon format) yang muncul dalam browser sebagai 'Tab' atau 'Penanda'. Jika alamat suatu url disimpan (bookmark), icon ini ikut tersimpan dan muncul dalam daftar bookmark (Firefox) atau favorites (IE).

Bagaimana cara membuat favicon ?
Anda dapat membuat sendiri sebuah icon yang unik untuk blog atau website Anda, sehingga dapat menarik pengunjung di situs Anda. Dengan favicon yang unik atau beda, blog atau website anda dapat mudah diingat oleh pengunjung.
Untuk membuatnya, Anda dapat menggunakan foto pribadi, binatang, mobil, bunga, dll yang Anda suka. Untuk ukuran favicon, umunya adalah 16 x 16 pixel.
Ada banyak situs yang menyediakan aplikasi online untuk membuat favicon ini, bahkan banyak juga situs-situs yang menyediakan bermacam-macam favicon yang siap pakai dan bisa di download, baik dalam format ico, png, jpg maupun gif.
Salah satu situs penyedia aplikasi online yang populer misalnya http://www.htmlkit.com/services/favicon/
Setelah berada di situs tersebut, langkah-langkahnya cukup mudah (user friendly).

• Upload image dari komputer anda, klik Generate Favicon.ico
• Beberapa detik kemudian, muncul favicon yang anda buat tadi
• Dibawah image favicon, ada menu edit termasuk edit animasnya jika diinginkan
• Klik Download only favicon.ico (jika hanya menginginkan format ico)
  
• Klik Download only animated_favicon1.gif (jika hanya menginginkan format gif)
• Atau dua-duanya, klik Download dibawah tulisan "To add this favicon to your site:"
  
• Extract file zip tersebut, ada 3 file ( favicon.ico , animated_favicon1.gif, ReadME.txt )
• Petunjuk instalasinya ada pada file ReadMe.txt (cukup lengkap dan jelas)
  

Bagaimana cara memasang di Blog anda ?
Pertama anda harus mengupload file favicon.ico dan animated_favicon1.gif pada web hosting yang anda miliki. Biasanya diletakkan/disimpan pada root directory atau jika tidak dapat dipanggil, simpan pada folder public_html server hosting anda.
Contohnya : http://YOUR_WEB/public_html/favicon.ico dan http://YOUR_WEB/public_html/animated_favicon1.gif

Pertanyaannya, bagaimana bila belum punya web hosting sendiri ?
Kalau dapat numpang di web server kawan kita, lumayan ....
Tetapi kalau tidak ada, simpan saja ditempat image hosting yang free, misalnya di http://photobucket.com/ , http://www.ziddu.com/ , http://picasaweb.google.com/home dan masih banyak lagi ... tetapi sayangnya untuk format ico rata-rata tidak support. Artinya kita hanya bisa menyimpan file dengan format selain ico (gif, png, jpg).

Jika sudah di upload, untuk blogspot.com seperti biasa login, tata letak, edit HTML
Kemudian tambahkan kode HTML diantara kode <head> dan </head>
Yang paling mudah, letakkan persis diatas kode </head>

<link rel="shortcut icon" href="http://YOUR_WEB/public_html/favicon.ico">

<link rel="icon" type="image/gif" href="http://YOUR_WEB/public_html/animated_favicon1.gif">

Sedangkan non blogspot.com , cukup :
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" type="image/gif" href="animated_favicon1.gif">

Untuk yang disimpan di image hosting gratisan, misalnya di photobucket.com, copy link url dimana image dengan format gif/png,/jpg dan pastekan pada ode dibawah ini :

<link rel="icon" type="image/gif" href="http://YOUR_WEB_IMAGE_HOSTING/public_html/animated_favicon1.gif">

Sekarang lihat perubahan icon address bar anda ...
Selamat bereksperimen !
Jangan lupa berikan komentarmu ........
::.::.::.::.::

Membuat Menu Scroll

Lihat menu Blogger Tips & Trik yang ada di sidebar kiri halaman Blog ini.
Bila anda ingin membuat menu scroll seperti ini, caranya sangat mudah.
Ikuti langkah-langkahnya !

1. Login di https://www.blogger.com/start
2. Klik Tata Letak
   
3. Klik Elemen Halaman
4. Klik Tambah Gadget (Pilih side bar yang akan dipasang YM)
5. Setelah muncul box Tambahkan Gadget, pilih HTML/JavaScript
6. Dalam box Mengkonfigurasi HTML/JavaScript, isi Judul
7. Kemudian di kotak Konten, isikan script berikut :

<div class="widget-content">
<div style="border: 1px solid #363636; background-color: #202020; font-weight: bold; padding: 5px; overflow: auto; width: 178px; height: 128px;">

<ul>
<li><a href="http://Url_Posting.html"> Judul Posting</a></li>

<li><a href="http://Url_Posting.html"> Judul Posting</a></li>

<li><a href="http://Url_Posting.html"> Judul Posting</a></li>

</ul>
</div></div>

8. Klik Simpan

Catatan :

• width: 178px (Lebar Widget, sesuaikan dengan sidebar anda)
• height: 128px (Tinggi Widget, sesuaikan dengan sidebar anda)
• Url_Posting (Ganti dengan Url_Posting Anda ), misalnya : "http://didiek-hadi.blogspot.com/2009/07/membuat-menu-scroll.html"
• Judul Posting (Ganti dengan Judul Posting Anda), misalnya : Membuat Menu Scroll
• border dan background : dapat anda sesuaikan warnanya, pilih warna disini.
  

Happy Blogging ...!
Berikan komentarmu setelah mencobanya ....