.

Membuat refresh

Written By Admin on Rabu, 30 November 2011 | 11:47 PM

Pasti yang sering main komputer sudah tau kan apa itu refresh?
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.

Untuk membuatnya cukup dengan hanya membubuhkan kode di bawah ini :


<meta http-equiv="refresh" content="10"/>


Simpan kode di atas antara <head> .... </head>

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 refresh selain untuk menyegarkan kembali halaman-halaman blog, ada fungsi lain yang juga cukup menarik, yakni berfungsi sebagai Redirect dari satu URL addres ke URL addres yang lain. Ini berfungsi jika anda ingin membawa pengunjung blog atau situs anda ke alamat situs yang anda inginkan. Agar lebih jelas, saya ambil salah satu contoh. Ada teman saya sudah lama nge blog, dan setelah sekian lama kemudian dia membuat situs baru. Jadi blog yang lama tidak ingin di aktifkan lagi (di non aktifkan). Nah selain memakai cara meninggalkan pesan bahwa alamat situs atau blog sudah pindah alamat, alangkah baiknya kita memakai fungsi Refresh yang di setting secepat mungkin yakni waktu refresh di set 0 (nol) detik. Jadi apabila ada pengunjung yang mengunjungi alamat blog tersebut akan secara otomatis di bawa langsung ke alamat baru yang di inginkan.

Fungsi Redirect ini bisa di buat dengan kode :


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


 Sekian pada posting kali ini.

Cara membuat related post/artikel terkait menjadi scroll

Artikel terkait berguna untuk memunculkan artikel-artikel terkait atau lebih singkatnya satu label jika memunculkan suatu postingan tertentu. Ini sangat berguna bagi pembaca pada saat posting dan melihat artikel-artikel lainnya yang terkait pada artikel yang pertama tadi ia baca.

Langsung Saja ini nih caranya:
1. Biasa, Login ke akun Blogger.
2. Pilih Rancangan,

    lalu pilih menu Edit HTML.
3. Download Template Lengkap (fungsinya jika gagal bisa di kembalikan lagi ke template sebelumnya)
4. Centang Expand Template Widget
5. Cari kode seperti ini: (gunakan Perintah Pencarian Keyboard Pencet Ctrl+F, )

<data:post.body/>

Keterangan:
Jika sudah menggunakan Fitur Read More, maka akan terdapat 2 kode <data:post.body/>. Maka kita pasang script Artikel Terkait atau Related Post di bawah <data:post.body/> yang ke 2 yang lebih tepat di bawah tag </b:if> . Tekan enter saja untuk mencari kode <data:post.body/> yang ke2
6. Jika sudah ketemu menggunakan Ctrl+F , maka copy paste-kan kode yang banyak ini letakkan dibawah kode <data:post.body/>:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);

script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

     Kemudian :
7. Cari kode ini : ]]></b:skin>
8. Copy kode ini dan paste diatas ]]></b:skin> :

.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}




Semoga berhasil ya teman.

Cara upload foto atau gambar keblog

Membuat blog sudah, mendesain template blog sudah, belajar membuat postingan sudah. Sekarang tinggal ngapain hayooo? Anda BetuuLLL, mengupload foto/gambar kedalam entri postingan. Postingan tanpa gambar serasa masak sayur asem tanpa asem. Gimana tuh rasanya? Yaa jadinya bukan sayur asem laaaah.
Pada tutorial ini, tidak hanya membahas cara-cara upload gambar kedalam blog, kita juga belajar mengetahui kode-kode HTML gambar yang kita unggah atau upload dalam bahasa inggrisnya. Serta kita akan tahu URL gambar yang kita upload. So, Anda tidak perlu mengupload gambar ke Hosting gratis seperti Photobucket, ziddu, imageshack, tinypic dan lain sebagainya.

Cara unggah gambar ke dalam blog

1. Masuk ke blogger
2. Buatlah sebuah posting Klik ENTRI BARU
3. Pada form editor entri klik Compose

4. Klik ikon kecil kotak (lihat gambar dibawah ini)


5. Dan akan muncul jendela baru Klik tombol Pilih Berkas

Keterangan :
  • Upload : Upload foto atau gambar dari drive komputer anda sendiri
  • From this blog : Upload gambar atau foto dari blog anda sendiri yang pernah anda upload sebelumnya, jadi tidak perlu mengupload dari awal.
  • From Picasa Web Albums : upload gambar atau foto dari situs Album Picasa
  • From a URL : Upload gambar dari situs lain, jadi kamu tinggal menyantumkan URL gambar yang dimaksud misalnya kamu mengupload gambar dari photobucket.com
  • Semua gambar atau foto yang kamu upload diblogger dapat kamu lihat di Album Web Picasa, karena Album picasa merupakan salah satu produk google, kamu tinggal login dengan akun google kamu, disitu kamu dapat mengedit gambar atau menghapus gambar yang pernah diupload.

*silahkan pilih gambar atau foto dari komputer yang akan diupload, gambar bisa diupload secara bersamaan sekaligus. tunggu sampai gambar atau foto muncul seperti dibawah ini.

6. Jika sudah pasti dengan gambar yang mau diupload klik Add Selected
 
7. Selesai.
Sekarang kita cari tahu Kode HTML dan URL gambar yang kita upload tadi.

Kode HTML dan URL gambar
Jika mengambil kode gambar atau URL gambar, cara ini juga berfungsi apabila ingin menampilkan gambar disidebar, header, wrapper, atau di blog lain.
Langkah-langkahnya:
Setelah kita mengunggah gambarnya, selanjutnya klik Edit HTML (yang berada disamping Compose) maka akan terlihat kode dan URL dari gambar tersebut. Saya beri contoh,  Seperti gambar berikut
*Keterangan gambar diatas:

Kode HTML gambar  yang diupload:
Semua kode yang berada didalam garis merah, contoh kode HTMLnya seperti ini:
 
<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbmtMORN8GrS6jBVBzi_qTn1vwbD322QZjnxunzi0rnadUXhlElODXVNjD4ZPCA8CDnwQT2FA975pzdQ5fmK3_fxqI07QNwKVI2gWpD5VcHp6fpjlJsty0zUVg6YF21ewh-SyCBFZwD_ZD/s1600/cooltext621356333.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbmtMORN8GrS6jBVBzi_qTn1vwbD322QZjnxunzi0rnadUXhlElODXVNjD4ZPCA8CDnwQT2FA975pzdQ5fmK3_fxqI07QNwKVI2gWpD5VcHp6fpjlJsty0zUVg6YF21ewh-SyCBFZwD_ZD/s1600/cooltext621356333.png" /></a></div>
</div>
URL gambar :
Kode yang berada didalam garis biru, contoh seperti ini:
 
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbmtMORN8GrS6jBVBzi_qTn1vwbD322QZjnxunzi0rnadUXhlElODXVNjD4ZPCA8CDnwQT2FA975pzdQ5fmK3_fxqI07QNwKVI2gWpD5VcHp6fpjlJsty0zUVg6YF21ewh-SyCBFZwD_ZD/s1600/cooltext621356333.png

*Catatan:
Kode HTML dan URL gambar pasti berbeda, sesuai posisi, ukuran dan gambar yang anda upload.
Baca selanjutnya cara mengganti icon adress bar atau yang sering disebut icon favicon pada blogspot.
Sekian dan terimakasih....

Komentar Blogger Sejati

Saya adalah

Foto saya
Bekasi, Jawa Barat, Indonesia
Rizky Gunawan, Seorang yang lagi belajar menulis dan berbisnis online (Inernet Marketing) lahir di Rawa Panjang, Bekasi.

Artikel Lain

 
Support : Rizkygunawan1@gmail.com | Facebook | Twitter
Copyright © 2011. Catatan Rizgun - All Rights Reserved
Template Modify by Rizgun Blog
Proudly powered by Blogger