Mengubah Link Posting Lama, Posting Baru, Dan Beranda Dengan Gambar

Salah satu yang bisa membuat pengunjung betah berkunjung ke blog kita adalah menarik dan rapinya template blog yang kita buat. Salah satunya adalah mengubah link posting lama, posting baru, dan beranda dengan gambar. Pada kali ini saya akan membagikan tips  bagaimana menguabah link posting lama, posting baru, dan beranda dengan gambar.

Langkah-langkahnya adalah sebagai berikut :

· Buka Blogger.com lalu login

· Pilihlah menu rancangan lalu Edit HTML

· Centang kotak "Expand Widget Template"

· Jika anda ingin mengganti Link “Posting lama”, carilah kode berikut : 

<data:olderPageTitle/>

·   Kalau sudah ketemu ganti kode tersebut dengan kode icon/gambar yang sudah anda siapkan. Atau jika anda berkenan bisa menggunakan ini :

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijuYXQQwsQxm1dYkPU7UTiolzuToN5L_osYalOFUqkF2E2lOB3rzoTy-sxY8CwzhqbqDWbaiV51JigEL0uBU-VC1Eg81WJPbYqluBdsSgr3T8ggEVGMkdUrTXPnUbFnmqp_X2Hhw-qDrs/s1600/next.png" />

·   Jika anda ingin mengganti link “Posting baru”, cari kode berikut :

<data:newerPageTitle/> 

·   Kalau sudah ketemu ganti kode tersebut dengan kode icon/gambar yang sudah anda siapkan. Atau jika anda berkenan bisa menggunakan ini :

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrsrw5Ov6iAimBr0J78H7i010RvovIv5jDjnQP7fB-UYE6qUV7ZNOTfF-0Hlc1P_Jy1e3VNttvhQcSS3D4-IQ1kaRpD8hVFeKwH4ROeliGS09QgAOwJBsNmKLIR9RhB8SxAcNUvT4dtl0/s1600/pre.png" />

·       Sedangkan untuk mennganti link :Beranda”, carilah kode berikut :

 <data:homeMsg/>

·       Biasanya terdapat dua kode yang sama lalu ganti kode yang pertama dengan kode icon/gambar yang sudah anda siapkan. Atau jika anda berkenan bisa menggunakan ini :

 <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjipDtYBd15Inj4ZYSH7OCKIFeYhPYWqeohMEM7qMlwvWJHpNKGmG8moJRuPHHJAsa80w-3sROc1dwDjDaB5N7uRqms_Rw-XOs6iCsLiY5fBVI0AKUGUaQXAcOSK2-sD_B6IZdV4nXv63g/s1600/home.png" />

·       Terakhir simpanlah template anda.

Read More

Membuat Status Loading Ketika Memuat Halaman Blog

Pada kali ini saya akan membagikan tips bagaimana cara membuat status loading ketika memuat halaman blog. Jadi, bila sobat belum tahu dan masih bingung maksudnya silahkan lihat gambar di bawah ini :

Status ini berguna bila sobat memiliki blog yang berat atau sekedar membuat blog menjadi lebih dinamis. Langsung saja ke langkah – langkahnya :

1.   Buka blogger.com lalu login.

2.   Pilih menu rancangan > Edit HTML.

3.   Cari kode <body> kemudian ganti dengan script dibawah ini :

<body onLoad='init()'><div id='loading''> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqslYrTngy6rJA7T25-Z2dMMwiPD-IeQU2Oo8mwJSklZjG_4R_86yJLFoF2ZVSHD0ge2pZKs3zN505dUimksa0WXx6GRR-FUQw2OBf3uMQg6-FJJWfUY_3492c094PRv0GkRaPqr6s3WG/s1600/f2.gif'/></div> <script src='http://farkryzer-script.googlecode.com/files/loading.js' type='text/javascript' type='text/javascript'/>

   Catatan: huruf yang saya warnai biru adalah gambar loading dari statusnya, silahkan ganti sesuai dengan keinginan sobat, dibawah ini beberapa macam gambar yang bisa sobat pilih (gambar ringan tidak lebih dari 10kb dan rata-rata 5kb)  :

 

4.   Langkah terakhir simpan kode css ini di template sobat, jika bingung silahkan tempatkan di atas kode ]]></b:skin> :

#loading{padding: 15px;border: 1px solid #000;border-radius:3px;background-color:#f5f5f5;opacity:.8;filter:alpha;margin:auto;width:435px;text-align:center}

Catatan: yang saya warnai biru bisa sobat ganti sesuai dengan keinginan

Catatan: script css diatas berguna untuk mengatur tampilan dari status loading yang dipasang di blog sobat.

5.   Simpan dan kemudian lihat hasilnya.

Catatan : ini hanya tambahan saja, tujuannya untuk memasukan tulisan maupun link pada status loading jadi tida hanya kosong dengan gambar loading saja.

   Oke lihat dulu script di bawah ini :

<body onLoad='init()'><div id='loading'> <p>Halaman sedang dimuat</p><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimqslYrTngy6rJA7T25-Z2dMMwiPD-IeQU2Oo8mwJSklZjG_4R_86yJLFoF2ZVSHD0ge2pZKs3zN505dUimksa0WXx6GRR-FUQw2OBf3uMQg6-FJJWfUY_3492c094PRv0GkRaPqr6s3WG/s1600/f2.gif'/> <p>Bersabarlah, karena orang yang sabar disayang tuhan</p> <div style='text-align:right'><p>Mahadzikunuha Admin</p></div></div> <script src='http://farkryzer-script.googlecode.com/files/loading.js' type='text/javascript'/>

   Bila sobat sudah pintar css tentu saja cara ini lebih mudah diterapkan sendiri. Oke saya jelaskan satu persatu.

   Catatan: yang saya warnai kuning tebal dengan <p> sampai </p> itu menandakan kita akan menambahkan tulisan, masukan tulisan yang sobat inginkan antara kode <p> dan </p> sehingga seperti contoh ini :<p>Mahadzikunuha</p> untuk letaknya tempatkan setelah <div id='loading'> dan </div>

   Catatan: untuk menambah link gunakan kode HTML dengan aturan <a href='alamat link'>nama link</a> letakkan setelah <p>. Contohnya : <p>Bersabarlah, karena orang yang sabar disayang tuhan<a href='http://mahadzikunuha.blogspot.com '>Mahadzikunuha</a></p>

Lalu simpan dan lihat hasilnya.

Read More

Membuat Scroll Pada komentar Posting Blog

Untuk menghemat ruang pada tampilan komentar posting blog, maka pilihan yang tepat adalah membuatkannya scroll. Ini dia langkah – langkahnya :

1.Buka Blogger.com

2.Login dahulu, lalu plih rancangan > Edit HTML

3.Kemudian centang “Expand Widget Templates”

4.Lalu cari kode seperti ini :

#comments h4{margin:1em 0;font-weight:bold;line-height:1.4em;text-transform:uppercase;letter-spacing:.2em;color:$sidebarcolor}

5.Kalau sudah ketemu, taruh kode dibawah ini diatas kode yang di cari tadi:

#comments-block3{max-height:330px;border:0px solid

#eee;overflow:auto;padding:0;margin:0;float:left;position:relative;}

Catatan :Heigh ( tingginya ) dan border dapat diatur sesuai keinginan.

6.Terakhir simpanlah perubahan yang anda lakukan dan lihatlah hasilnya.

Read More

Cara Membuat Label Tag Cloud

untuk memperindah tampilan label pada blog anda, anda bisa menggunakan Label Tag Cloud. Tampilan label animasi yang berputar bila mouse menyentuh label yang sudah anda buat. Anda beerminat ?? Berikut adalah langkah-langkahnya.

1.    Login Blogger.com

2.    Di dasbor sobat pilih Rancangan >> Edit HTML

3.    Expand template widget

4.    Gunakan Ctrl+F untuk menemukan yang persis seperti kode berikut :

<b:section class='sidebar' id='sidebar' preferred='yes'>

Setelah ketemu letakkan kode berikut persis dibawah kode yang tertera diatas tadi

<b:widget id='Label99' locked='false' title='LABELS' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'><a href='http://www.roytanck.com/'/><a href='http://www.bloggerbuster.com'/></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;200&quot;, &quot;200&quot;, &quot;7&quot;, &quot;#e3e0e0&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Terakhir…simpan template anda.

Keterangan :

Huruf "Labels" adalah nama label anda
Angka "200" adalah lebar kolom yang bisa anda ubah sesuai keinginan anda
Angka "200" adalah tinggi kolom yang bisa anda tentukan sendiri
Sedangkan # e3e0e0 adalah kode warna background

Read More

Cara Membuat Recent Pos Berjalan

Recent pos ada banyak jenisnya salah satunya ialah recent pos yang berjalan ke kiri ke kanan. disini saya akan membagikan cara - carany kepada kalian. ini cara - caranya

1. Buka Blogger.com
2. Masuk ke dasbor
3. Klik rancangan - elemen laman
4. Tambah Widget - HTML/Java Script
5. Masukkan Kode di bawah ini :

<fieldset><script style="text/javascript" src="http://dreamydonkey.googlepages.com/scrolling_blogger_posts.js"> </script><script style="text/javascript"> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="•"; </script> <script style="text/javascript" src="URL Blog anda/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script> </fieldset>
6. Simpan

Semoga sukses

Read More

Cara Membuat Tabel di Blog

Cara membuat tabel pada blog sebenarnya sangat sederhana, kita bisa memanfaatkan account google kita yaitu google document. Berikut cara membuat tabel pada blog:

1. Masuk ke google document https://docs.google.com/

2. Seperti biasa masukan email dan sandi

3. Klik buat dan klik spreadsheet

4. Buat tabel sesuai yang diinginkan
5. Setelah selesai klik berkas > publikasikan ke web

6. Pilih spreadsheet yang akan ditampilkan, semua sheet atau pilih salah satu
7. Pilih "dapatkan tautan ke data yang akan diterbitkan", untuk blog pilih yang HTML yang
    akan disematkan pada satu laman
8. Copy code scrip
9. Paste code scrip yang tadi didapat pada blog (catatan pastenya pada edit HTML,
    jangan pada compose)
Semoga postingan cara membuat tabel pada blog ini bermanfaat.

SELAMAT MENCOBA , SUKSES SELALU

Read More

Cara Membuat Scroll Recent Pos

Recent post bisa diartikan sebagai artikel atau postingan terbaru .contoh nya ada di samping ini .Langsung saja ke TKP :
1.Login blogger
2.Ke rancangan
3.Pilih Elemen laman
4.Tambah Widget
5.Pilih HTML/Javascript
6.Copy dan Pastekan code berikut:
<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee">

<script src="http://anas.ku93.googlepages.com/post-terakhir.js"></script>
<script>var numposts = 15; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://Blog Anda/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

</div>

Ganti tulisan  15 dengan angka recent post yang ingin anda tampilkan dan ganti Blog andadengan Alamat blog anda

Read More