Jumat, 22 Juni 2012

9:06:00 PM

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

Moch. Aghisna H.    No comments



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
8:42:00 PM

Membuat Status Loading Ketika Memuat Halaman Blog

Moch. Aghisna H.    No comments
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
8:07:00 PM

Membuat Scroll Pada komentar Posting Blog

Moch. Aghisna H.    No comments



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
Langganan: Postingan (Atom)

 

Copyright @ 2013 Mahadzikunuha.

Designed by Templateism | MyBloggerLab