Belajar Posting Blog dan Trik Ngeblog dari Internet Untuk Internet

Tips dan Trik Ngeblog 2


Mengganti Logo Blogger.com

Menggunakan logo sendiri dalam tampilan atau pengganti logo Blogger yang berlambangkan hufur B,
Upload photo/gambar yang sudah diedit tadi ke situs penyimpan gambar. Agar tidak susah gunakan saja yang punya google, picasaweb.google.com tinggal masukkan ID Email dan sandi gmail.
Atau bisa juga disimpan di photobucket.com dan yang lainnya.
Copy / ambil kode link gambar yang sudah anda upload
(misal : http://1.bp.blogspot.com/-Q_TsC965ctg/TXpKEDHcHLI/AAAAAAAAAoA/27li9xi7m0Q/s400/bola%2Bdunia.gif )

Cari kode html berikut di template blog anda :

<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[

(untuk lebih cepat gunakan ctrl F saat mencari di Edit HTML blog anda)

Copykan kode berikut diantara kedua kode diatas :

<link href='http://1.bp.blogspot.com/-Q_TsC965ctg/TXpKEDHcHLI/AAAAAAAAAoA/27li9xi7m0Q/s400/bola%2Bdunia.gif' rel='shortcut icon'/>

tulisan yang tercetak tebal dan berwarna hijau diatas adalah alamat file gambar yang tadi sudah anda uploud, ganti dengan kode gambar anda.



Untuk jelasnya hasil copy paste seperti dibawah ini :

<title><data:blog.pageTitle/></title>

<link href='http://lh5.ggpht.com/_ug159Z2LmFI/SkxWBsFi9ZI/AAAAAAAAAEY/h-4Ldv8G_v4/s800/bendera%20indonesia.gif' rel='shortcut icon'/>

<b:skin><![CDATA[
 
simpan template anda (SAVE)
dan lihat hasilnya >>>> Logo Blog anda sudah ganti....

Selamat Mencoba.


Membuat "read more" Yang Praktis


Space atau ruang di blog kita sangat terbatas, jika kita menampilakan semua isi dari postingan atau entri maka akan memakan banyak space (tempat). Bayangkan saja orang melihat halaman yang luas, maka orang akan sulit untuk memfokuskan diri.

Sebenarnya ini sama dengan membuat read more, tapi lebih praktis, karena kita tidak perlu menambahkan sesuatu kode HTML saat memposting artikel kita. Read More yang akan kita buat akan membuat kita gampang atau mudah dalam memengal isi dari postingan kita. Beberapa kalimat akan muncul dan jika dalam postingan kita ada gambarnya juga akan disertai thumbnail (gambar diperkecil)

Ada yang memberi nama read more yang akan kita buat ini dengan nama read more liberal, oleh kang Jaloe. sekarang kita bersiap untuk mempraktekanya :z Perhatikan dan baca seksama langkah-langkahnya.

Cara Membuat "read more" Yang Praktis
1. Login ke Blogger
2. Pilih Tata Letak kemudian pilih Edit HTML
3. Beri tanda cek (centang) pada “ Expand Widget Templates “
4. Cari kode di bawah ini
</head>

5. Jika sudah ketemu taruh kode berikut ini di bawahnya
<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

6. Cari kode di bawah ini
<data:post.body/>

7. Ganti kode yang telah kita temukan di atas dengan kode berikut ini
<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

8. Simpan Template Kalau sudah beres

Silahkan kamu coba sekarang, tapi berikut ini catatan yang juga perlu kita ketahui:
summary noimg= 430 adalah tinggi artikel terpenggal tampa image
summary img=340 adalah tinggi artikel terpenggal dengan image
Jika kamu kesulitan mencari kode-kode tersebut baca tipsnya di sini

 

Membuat Cursor Selalu Diikuti Oleh Text

Ketika saya blogwalking ke beberapa site para sobat, saya banyak menemukan cursor yang selalu diikuti oleh text. Saya berfikir bagaimana cara membuatnya.
Tetapi setelah saya perhatikan ternyata kita hanya bisa memilih salah satu dari script yang telah diciptakan yang mempunyai text berbeda. Adapun text-text tersebut adalah "Selamat Menikmati Blog Ini", "Welcome", "Selamat Datang Di Blog Ini", "Selamat Datang" dan "Enjoy Stay Here".

Kemudian saya berfikir lagi, bagaimana misalnya saya tidak ingin menggunakan text yang telah diciptkan tersebut..? Dan bagaimana caranya agar saya bisa menciptakan text yang akan saya ciptakan sendiri..? Dan akhirnya terbuka juga rahasianya, dan sayapun sekarang bisa membuat cursor yang diikuti text yang saya inginkan.

Jika sobat tertarik untuk menciptakan cursor dengan text sendiri, silahkan ikuti langkah-langkah berikut ini :

1. Masuk ke Blog
2. Klik Tab Tata Letak
3. Klik Tab Elemen Halaman
4. Klik Tambah Gadget
5. Klik pilhan HTML/JavaScript
6. Pastekan script di bawah ini ke kolom Konten

<script>
//mouse
//Circling text trail- Tim Tilton
//Website: http://www.tempermedia.com/
//Visit http://www.dynamicdrive.com for this script and more
function cursor_text_circle(){
// your message here
var msg='menuju blog'.split('').reverse().join('');

var font='Verdana,Arial';
var size=3; // up to seven
var color='#ff0000';

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 for just plain rotation w/out drag
var speed=.3;

// This is the rotation speed, set it negative if you want
// it to spin clockwise
var rotation=-.2;

// Alter no variables past here!, unless you are good
//---------------------------------------------------


var ns=(document.layers);
var ie=(document.all);
var dom=document.getElementById;
msg=msg.split('');
var n=msg.length;
var a=size*13;
var currStep=0;
var ymouse=0;
var xmouse=0;
var props="<font face="+font+" size="+size+" color="+color+">";

if (ie)
window.pageYOffset=0

// writes the message
if (ns){
for (i=0; i < n; i++)
document.write('<layer name="nsmsg'+i+'" top=0 left=0 height='+a+' width='+a+'><center>'+props+msg[i]+'</font></center></layer>');
}
else if (ie||dom){
document.write('<div id="outer" style="position:absolute;top:0px;left:0px;z-index:30000;"><div style="position:relative">');
for (i=0; i < n; i++)
document.write('<div id="iemsg'+(dom&&!ie? i:'')+'" style="position:absolute;top:0px;left:0;height:'+a+'px;width:'+a+'px;text-align:center;font-weight:normal;cursor:default">'+props+msg[i]+'</font></div>');
document.write('</div></div>');
}
(ns)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt){
ymouse = (ns||(dom&&!ie))?evnt.pageY+20-(window.pageYOffset):event.y; // y-position
xmouse = (ns||(dom&&!ie))?evnt.pageX+20:event.x-20; // x-position
}
if (ns||ie||dom)
(ns)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
var y=new Array();
var x=new Array();
var Y=new Array();
var X=new Array();
for (i=0; i < n; i++){
y[i]=0;
x[i]=0;
Y[i]=0;
X[i]=0;
}
var iecompattest=function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}
var makecircle=function(){ // rotation properties
if (ie) outer.style.top=iecompattest().scrollTop+'px';
currStep-=rotation;
for (i=0; i < n; i++){ // makes the circle
var d=(ns)?document.layers['nsmsg'+i]:ie? iemsg[i].style:document.getElementById('iemsg'+i).style;
d.top=y[i]+a*Math.sin((currStep+i*1)/3.8)+window.pageYOffset-15+(ie||dom? 'px' : '');
d.left=x[i]+a*Math.cos((currStep+i*1)/3.8)*2+(ie||dom? 'px' : ''); // remove *2 for just a plain circle, not oval
}
}
var drag=function(){ // makes the resistance
y[0]=Math.round(Y[0]+=((ymouse)-Y[0])*speed);
x[0]=Math.round(X[0]+=((xmouse)-X[0])*speed);
for (var i=1; i < n; i++){
y[i]=Math.round(Y[i]+=(y[i-1]-Y[i])*speed);
x[i]=Math.round(X[i]+=(x[i-1]-X[i])*speed);
}
makecircle();
// not rotation speed, leave at zero
setTimeout(function(){drag();},10);
}
if (ns||ie||dom)
if ( typeof window.addEventListener != "undefined" )
window.addEventListener( "load", drag, false );
else if ( typeof window.attachEvent != "undefined" )
window.attachEvent( "onload", drag );
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
drag();
};
}
else
window.onload = drag;
}
}
cursor_text_circle();
</script>

7. Silahkan ganti tulisan berwarna merah dengan tulisan pilihan anda
8. Klik Simpan
9. Selesai



Membuat Tulisan Bergerak

Masukan kode dibawah ini kedalam gadget, dan ingat tulisan yang mau dibuat bergerak diketik pada kode HTML tersebut diganti :

Untuk Yang bergerak kekanan
<marquee direction="right"><span style="color: rgb(255, 0, 0); font-weight: bold;">Bergerak kekanan !</span></marquee>

Untuk Yang Ke Kanan dan Kekiri
<marquee direction="left" behavior="alternate"><span style="color: rgb(255, 0, 0); font-weight: bold;">Ke Kanan dan Kekiri ??</span></marquee>

Untuk Yang Bergerak kekanan Perlahan : Note : nilai scrolldelay menentukan cepat atau lambatnya tulisan bergerak.Direction = menentukan arah bergerak
<marquee direction="right" scrolldelay="500"><span style="color: rgb(255, 255, 0); font-weight: bold;">Bergerak kekanan Perlahan !</span></marquee>

Untuk Yang Ke Kanan dan Kekiri Dan Bisa Di stop
<marquee direction="left" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" width="95%"><span style="color: rgb(255, 0, 0); font-weight: bold;">Ke Kanan dan Kekiri Dan Bisa Di stop??</span></marquee>

Untuk Yang Bergerak Ke Atas
<marquee align="center" direction="up" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color: rgb(0, 255, 0); font-weight: bold;">Bergerak Ke Atas</span></marquee>

Untuk Yang Bergerak Ke Atas dan Ke bawah
<marquee align="center" direction="up" behavior="alternate" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" height="100" width="95%"><span style="color: rgb(255, 0, 255); font-weight: bold;">Bergerak Ke Atas dan Ke bawah</span></marquee>

Menambah Aksesoris Blog 

Konon, blog itu berjenis kelamin perempuan. Dan, karena itu, perlu dihiasi dg aksesoris supaya selalu tampak cantik dan dapat menarik hati kaum blogger (yg ini berjenis laki-laki).

Berikut sejumlah "perhiasan" blog yg dapat dipasang di blog Anda yg berfungsi tidak hanya sebagai perhiasan tapi juga untuk menarik hati kaum blogger (baca, pengunjung) dan search engine. Sekali lagi perlu diingat, aksesoris ini hanya dapat dipasang pada blog yg templatenya dapat diedit seperti blogspot.com, blogdrive.com plus blog yg domain/hostingnya beli sendiri, tentunya.

1. Bukutamu

Bukutamu blog disebut juga dg shoutbox atau tagboard. Sama dg bukutamu website, tapi bentuknya lebih sederhana. Banyak situs penyedia bukutamu blog gratis yg bisa Anda cari di google dg kata kunci shoutbox atau tagboard. http://shoutmix.com termasuk penyedia bukutamu blog yg disukai yg servernya cukup stabil.

Caranya:
(a) Daftar di alamat di atas, ikuti semua perintahnya; (b) Setelah selesai, log-in dg id dan password yg sudah terdaftar; (c) Klik menu "Code Generator"; (d) Pilih Full-frame shoutbox; (e) Klik "Generate the Code"; (f) Copy kode HTML yg ada, dan masukkan ke template blog Anda di bagian Sidebar; (g) Klik SAVE SETTING & REPUBLISH. Selesai.

Fungsi dari bukutamu blog ini seperti yg Anda tahu untuk membuat interaksi pemilik blog (blogger) dg pengunjung lebih aktif dan menunjukkan bahwa kita orangnya cukup accessible.

2. Statistic dan Tracker

Berfungsi untuk mengetahui berapa pengunjung yg datang setiap harinya, setiap minggu, dan bulan dan dari negara mana saja. Selain itu, ia memberi tahu kita lewat mana pengunjung itu datang: lewat pencarian di google atau via blog/situs lain yg memasang link blog kita. Statistic/tracker gratis yg paling terkenal ada dua Sitemeter dan Extreme Tracking. Klik link berikut untuk mendaftar: (a) http://www.sitemeter.com/?a=newaccount (b) http://www.extreme-dm.com/tracking/?reg Setelah daftar, login dan masukkan kode HTML-nya di blog Anda.

3. Kamus Online

Kalau blog Anda berbahasa Inggris, Anda bisa memasang Kamus Indonesia-Inggris dan Inggris-Indonesia di blog Anda supaya pengunjung Indonesia yg lagi belajar bahasa Inggris bisa betah nongkrong. Kode HTML-nya bisa diambil di http://kamus.net

4. Jadual Shalat

Bagi blogger Muslim, www.islamicfinder.org menyediakan jadual shalat lima waktu yg bisa ditempel di blog. Anda bisa pilih berdasarkan kota dan negara. Silahkan ambil kodenya di link berikut: http://www.islamicfinder.org/index.php?inl_language= Lihat contohnya di sini

6. Jam Dinding

Tidak cukup dg jam tangan dan jam di HP atau Anda merasa dinding blog Anda perlu dipasang jam? Silahkan pilih di http://clicklink.com dan ambil kodenya. Lihat contohnya di sini.

7. Peta Kampung Kita

Bagi yg ingin melihat nama dan peta kampung kelahiran nempel di blog, silahkan daftar di http://feedmap.net

Caranya,
(a) masuk ke http://feedmap.net; (b) Klik "Explore Blog", akan muncul peta dunia; (c) Pilih negara Indonesia dg cara klik kanan secara terus menerus mouse komputer Anda dan geser/putar peta dunia tsb. ke kanan/kiri sampai ketemu peta Indonesia. (d) Setelah peta Indonesia ditemukan, perbesar fokus peta dg cara mengklik 2x secara berulang-ulang; (e) Pilih kawasan atau propinsi yg paling dekat dg kampung kelahiran Anda, dan perbesar fokus peta dg mengklik berkali-kali sampai tidak dapat diperbesar lagi; (f) Setelah nama kampung kelahiran atau kota terdekat dari kampung kita tampak, arahkan panah mouse ke kota tsb dan klik kanan mouse; (g) Akan tampil menu "Add Blog", klik menu ini; (h) Akan muncul kotak, isi alamat blog Anda. Contoh, http://kolom-mario.blogspot.com (jangan lupa pake awalan http://; (i) Klik submit; (j) Apabila berhasil, maka akan muncul tulisan: Thank You! Di bawahnya ada tiga kotak yg berisi kode html untuk BLOGMAP, NEIGHBLOGMAP BUTTON, dan LOCAL BLOGROLL. Copy ketiga kode HTML tsb. dan paste di sidebar blog Anda; (k) Selesai. Lihat contoh petanya di sini. (Mario Gagho http://kolom-mario.blogspot.com)

Membuat Gambar Melayang di Pojok Halaman


Let's begin the tutorial how to make floating image on blogspot...
  • Login ke blogger, pilih menu tata letak/layout ==> Edit HTML
  • Copy-paste salah satu kode kode di bawah ini sebelum ]]></b:skin>
Jika ingin memasang gambar/banner di posisi kanan atas blog
#registrasi {
top:5px;
right:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

Jika ingin memasang gambar/banner di posisi kanan bawah blog
#registrasi {
bottom:5px;
right:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

Jika ingin memasang gambar/banner di posisi kiri atas blog
#registrasi {
top:5px;
left:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

Jika ingin memasang gambar/banner di posisi kiri bawah blog
#registrasi {
bottom:5px;
left:5px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#registrasi a img {border:0}

  • Selanjutnya Copy-paste kode di bawah ini setelah </body>

<divid='registrasi'>
<ahref='http://referensiregistrasi.blogspot.com/'>
<imgborder='0'src='http://gambar.gif'/></a>
</div>

  • Ubah yang http://referensiregistrasi.blogspot.com dengan alamat blog anda dan http://gambar.gif diganti dengan tempat gambar yang telah kita upload terlebih dahulu. Sebagai opsi tempat penyimpanan gambar, kita dapat menggunakan http://www.imagehosting.com/, http://photobucket.com, http://www.flickr.com/ serta masih banyak lagi tempat penyimpanan gambat yang tersedia di internet.
  • Langkah terakhir adalah save template anda dan lihatlah hasilnya.


 



<data:blog.pageTitle/>