Tips dan Trik

Pasang Translator di Pojok Kanan Atas

Malam belum bisa tidur hanya ingin mempercantik blogger dengan menampilkan translator pada pojok kanan atas. Sebenarnya mata sudah mengantuk banget habis dari tadi susah banget ngedit nya code yang buat botak kepala.

Langsung aja deh ya soal nya gak tahan lagi udah ngantuk banget nih,.

Harus login dulu ke Blogger
Pilih Rancangan >> Edit HTML
CopPas code di bawah ini tepat di atas code ]]></b:skin>

    #trik_witto {
    position:fixed;
    _position:absolute;
    top:0px;
    right:180px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

Sobat bisa mengganti warna merah itu sesuai dengan posisi yang ingin sobat letakkan.
Kemudian CopPas lagi code dibawah ini tepat di bawah code <body>

<div id="trik_witto">
<a style="font-size: 12px; color: rgb(97, 100, 105); font-weight: bold;" href="http://www.t-w-t.co.cc/2010/07/cara-pasang-translet-versi-2.html" target="" title="Cara Pasang Translet">Languages :</a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="English" title="English" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG5H5oMUyzL8dQisFmCnnm5UXTQ9RC3eDA3RIrKVHiX0BlmUPMiDsxYF2nczjaJYQgB8zp4F-gga875Ub-kbmyKvEYNbf5z_gO0B_5ht1E7as5DP0ZH37db-_HL7CLPHhXJ7OMzowH8Qk5/s800/english.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" title="French" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaE_uWGGOpVE-1GP2sSXIbyXTKfTqM9CDksdsrS9vbtCWpfejVoh22_YGdGOAtNPGZd4j6lZHdEyH-W289eA1AraKGT9IhMh9dgsekJCYYhhZhTa8lxt05eSA5Uaq9bNxXEuX1ON2ZeGL8/s800/frances.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" title="German" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfoIhsoKZvcxWzztmUGxC4WTSB7o1wq-ss8Zv88FKNZzU-iHRibFtci7ys5cljxIXFKsE_05kCYfujppehigDMpAYk-Dk-6opydla2u27O1PFZ3TfqIWxM4VktjylaWrtE5qyFJft86UFV/s800/german.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" title="Spain" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_CL6p3ZS3Xkc3Am2c2WM-1f5W1l-TtaN62x_RsHCP0AlDilPPS-EigVfxyCpwrZV48FA3E3fzF-bVKcZ_yk-7G_q2Ov2i3NKk-WbK6uzIb3Fvmdu8lI5g7n_NejuYSKUT7W2HKR60PqzG/s800/spain.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" title="Italian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8vPcBSKoh8xHN9qvDUblVHoM2_B1UJxLdTkPwEVehComGvh1xyGZ7NANSr4OvXbSOmnTvj4CZdGbBaubwRJgVX7RgY6TuStnACXLMz9zWfVMMWM0nkpdd6NTY5dOg_6izXsVhzOxYvABu/s800/italian.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" title="Dutch" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWJlI4wEEwZizV_bulMr9SioJf-KURKCU19SZT4cUpN8X0d9EgM2x4UwqwYQS1fJuS5WMbvx5S2Gyc8dyGRV1HRF30_nhPEiIv8ryZT-iMMYgIYU7X3AFtWbxXVt1VEnx1CUMJ7zuuzEs/s800/dutch.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" title="Russian" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-I7tIOaHEl2QlQOFEIkmprQ-MBMEWd8QRDQyXxDzn51D-EyunaMf0zwfuDBpljoM3QmwCkgrCkm4P0dNzEKlDzi-UHyeEHTtoxfEX5rKT5q97ZVGKoHDKIl7t4b6x8qIK9x9rjnJY3VbP/s800/russian.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" title="Portuguese" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrhvYJxlzBekH0fr1kQr7wTS7PjitvaLnN2XShzK8fWcpAN-h_yvoZs0LSSCAC9Chk4cnvhGPqGtigYZZ0DTAXLWYGc1qTdaIHftiMtQR6B3bdbGOX_SJfN-h2hq8xdZzwbeBFKcLSNDTL/s800/prtugal.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" 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" title="Japanese" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2o4IEP47fSvYNSHHqQcCtvUnVS6j4pQR9DjXkeIxsL5nB1SOL7Pmn0_Xi5ai-qDCpTjVNXdDk4YKVJJC_7Rt5uoyHXdcrx_opfXXGi6XctqD3MHXVhAvFqVg0g80KabHEZMKzslPnM3cb/s800/jepang.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" title="Korean" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6MINEJo6P6XzelByAQTWDTWmcO-OGGTEA8Hu85E_R9T-LJxZoz_v2i89yq7KinTu-it-TV-K-rpbkfTZp_ds_f3hMKVAbk_QI2wVQihUh_RHkKy3PYBU2OrgfKiy-mpRN0y0TfqmUTo1g/s800/korean.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" title="Arabic" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi58IQoL9duZwhIsBiEffi4oGkzBVZjnNo97xsZhbZ7Aqj2__YyvGOXbWIeD1en83b9LpL0g0CdFVy0BryYwdUlYUrSIy3JoNGc-dT7FSEkPedIEoCjZphpg0I61M2lljamG7TNDPlEQvsS/s800/arabic.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
<a href="http://www.blogger.com/post-edit.g?blogID=5125888041114308520&postID=1026262847814128677#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" title="Chinese Simplified" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifljGKPx1RUi0cjqj2LNP4HWTXaO8_kCm4S1ndCBFfb69AlRMxRcZZ88Ngnqiyo3M6093JZIPUen_n3lb2fK04UVJUhf5F-UEtHWkMu_ukCE7HJcQIVHJ2tz7M6FGom0bhv_9jQhzYVz4i/s800/china.gif?imgmax=800" style="cursor: pointer; margin-right: 2px;" align="absbottom" border="0" width="20" height="15" /></a>
</div>

Simpan...selesai..

»» READMORE...

Cara membuat tombol Navigasi Ke Atas, Ke Bawah dan Refres

Fungsi tombol tersebut adalah untuk memudahkan bagi pengunjung untuk menuju Ke Atas ataupun Ke Bawah halaman Blog hanya dengan sekali klik dan tombol ini tidak akan berpindah tempat meskipun sobat scroll Ke Atas ataupun Ke Bawah tombol ini akan selalu tetap berada pada pojok bawah sebelah kanan monitor komputer sobat.

Caranya sbb:

1. Klik Rancangan
2. Edit Htlm
3. Carai kode ]]></b:skin>
Untuk mempermudah pencarian tekan Ctrl + F atau (F3) di keyboard sobat Jika sudah ketemu silahkan Copy kode dibawah ini dan letakkan diatasnya.

#Atas_Bawah {
position:fixed;
_position:absolute;
bottom:0px;
right:3px;
clip:inherit;
z-index:+1000;
}
Kemudian cari kode </body> dan letakkan kode berikut diatasnya.

<div id='Atas_Bawah'>
<a href='#' title='Ke Atas'><img border='0' src='
http://www.indonesiaindonesia.com/imagehosting/images/83751/2_ke_atas.gif'/></a><br/>
<a href='#bottom' title='Ke Bawah'><img border='0' src='
http://www.indonesiaindonesia.com/imagehosting/images/83751/2_ke_bawah.gif'/></a>
</div>

Simpan dan Lihat Hasilnya:
Anda bisa merubah kodenya yang di atas sesuai keinginan anda.
Contohnya:

http://www.indonesiaindonesia.com/imagehosting/images/83751/2_ke_bawah.gif
http://www.indonesiaindonesia.com/imagehosting/images/83751/2_ke_atas.gif

http://www.indonesiaindonesia.com/imagehosting/images/83751/1_bottom.png
http://www.indonesiaindonesia.com/imagehosting/images/83751/1_top.png

Fungsi Refresh di gunakan untuk membuat penyegaran kembali halaman blog ataupun website.

Fungsi Refresh ini sama dengan fungsi Refresh yang ada pada Browser Internet, perbedaannya yaitu fungsi ini di buat bekerja secara otomatis, yakni pengguna tidak perlu menekan tombol Refresh yang ada pada tool bar.

kodenya seperti berikut:

Sedikit uraian kode diatas, content="10" angka sepuluh menunjukan bahwa proses Refresh akan di lakukan dalam rentang waktu 10 detik.
Jadi sebaiknya angka ini di set jangan terlalu cepat karena bisa menimbulkan kejengkelan kepada para pembaca apabila terlalu cepat di Refresh.
Fungsi Redirect ini bisa di buat dengan kode :

<meta http-equiv="refresh" content="0;URL=tulis alamat URL tujuan di sini"/>

Selamat Mencoba....

»» READMORE...

Pasang Code Syntax Highlighter

Kadang kita ingin memperjelas sebuah tulisan dan membuat nya berbeda dengan text yang lainnya, sebenarnya cari ini bisa dilakukan dengan quote, tetapi saya ingin membuat lebih baik dan lebih rapi sehingga tulisan code lebih jelas pada postingan.

Hal yang pertama yang ada haru lakukan ada dengan menambahan code css pada html blogspot anda, jika anda menggunkan template model baru pada blogspot penambahan css tidak jauh berbeda dengan template model lama. yang jelas anda menyisipkan code css ini sebelum code : ]]> pada blogspot template baru anda.

Dan code css yang saya gunakan seperti dibawah ini;

.codeview {
display:block;
font-family:Courier New;
font-size:9pt;
width:500px;
overflow:auto;
background:url(http://bloggerhosting.appspot.com/serve/dedehendriono.googlepages.com/Code_BG.png) left top no-repeat;
border:1px solid #e6e6e6;
max-height:170px;
line-height:1.3em;
text-align:left;
margin:5px;
padding:5px 5px 5px 20px
}

Dan untuk menggunakannya, masuk pada menu postingan anda kemudian klik mode html
dan dan cara penulisannya seperti ini;

<div class code="codeview">
codenya pasang disini
<div>

Silahkan berekperiment sendiri bagiamana model Code Syntax Highlighter yang anda ingin gunakan.
info: http://gaptek-blog.blogspot.com/

»» READMORE...

Memasang Related Post Dengan Tampilan Scroll

Pasang Related Post Dengan Fungsi Scroll, menurutku sih tampilannya agak menarik dan yang lebih penting lagi fungsi scroll down menu nya. Ya, kita tahu sendiri kalau saya selalu rajin mengupdate blog ini. dan kategori postingannya pun sampai ratusan atau mungkin ribuan. Coba bayangkan kalau saya tidak memasang scroll. Pasti akan sangat panjang. oleh karena itu saya akan coba mengganti related post dengan cara yang ini, bagi yang ingin tahu, inilah cara Pasang Related Post Dengan Fungsi Scroll pada Template Blogspot.
caranya seperti ini :

(bagi yang sudah menggunakan related post cara lain, sangat disarankan dihapus dulu agar hasilnya maksimal)
1. Masuk ke Dashboard , pilih Layout , pilih Edit HTML
2. Sangat disarankan untuk mendownload Full Template sebagai backup
3. Centang Expand Widget Templates
4. Cari kode : <data:post.body/> , bagi yg sudah memasang "Read more", kode ini ada dua. Ambil saja kode yang pertama
5. Copy kode dibawah ini dan paste dibawah kode nomor 4 diatas

<b:if cond='data:blog.pageType == "item"'>
<br/>
<br/>
<H2>Related Post:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
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('albri').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>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

Simpan template dan lihat hasilnya.

6. Tulisan Related Post pada point 5. (warna merah) bisa diganti apa saja misalnya artikel yang berhubungan, artikel terkait dsb.

7. Selesai. Selamat mencoba untuk Pasang Related Post Dengan menggunaan Fungsi Scroll ini . Semoga sukses.

»» READMORE...