MEMBUAT GAMBAR / FOTO ANIMASI

---

---

Mungkin ada beberapa sobat yang ingin menambah gambar atau foto animasi ke blog mereka. Sebenarnya untuk menambahkan gambar atau foto bergerak ke blog tidak begitu sulit. Karena ada beberapa layanan yang menyediakan jasa seperti ini, misalnya :

www.slide.com
www.flickr.com
www.picasion.com

Disini saya akan mencoba menggunakan layanan www.picasion.com. Dimana pada layanan online ini sobat tidak perlu login. Tinggal memasukan beberapa gambar atau foto sobat yang nantinya akan bergerak sesuai urutan yang sobat inginkan.

Mari langsung saja kita mulai:

• Masukkan alamat www.picasion.com ke browser sobat.
  Masukkan gambar atau foto sobatdari mulai urutan 1(pertama).
  
  
• Kemudian sobat bisa menentukan ukuran juga kecepatannya (tenggang).
• Setelah itu klik create animation,gambar atau foto sobat sudah langsung terupload.
• Kemudian copy paste alamat url dan code html nya ke notepad.
• Setelah itu save this animation.

Sekarang sobat tinggal upload gambar tersebut ke blog sobat:

• Masuk ke blog sobat dan pilih layout(tata letak).
• Klik tambah gadget.
• Kemudian pilih gambar yang bertuliskan HTML/Java Script.
• Masukkan code HTML saja yang telah sobat copy paste tadi ke halaman conten.
• Sebelumnya sobat bisa merubah ukuran juga title nya.

• Jika sudah tinggal save.
• Letakkan gambar tersebut ke tempat yang sobat suka .
• Kemudian save.
• Lihat blog sobat.

Silahkan mencoba..!

CARA MEMBUAT READ MORE

---

W

aktu kita melakukan beberapa postingan di halaman muka,jika kita tampilkan semua maka postingan akan terlihat memenuhi halaman. Tentu kita ingin terlihat ringkas serta proses membuka halaman tidak terlalu lama. Bagaimana meringkas halaman rersebut? Salah satu caranya dengan menggunakan read more. Mungkin sobat sudah banyak yang tahu mengenai cara penggunaannya.
Untuk para sobat yang belum tahu bisa ikuti langkah-langkah berikut di bawah ini :

Masuk ke blog sobat
Pilih tata letak (layout) kemudian klik edit html
Untuk antisipasi download template lengkap terlebih dahulu atau copy dan paste code template ke notepad kemudian save.Ini jika terjadi kesalahan sobat bisa mengembalikan lagi code tersebut.
Beri tanda centang pada "expand template widged"

Cari code dibawah ini:

<p><data:post.body/></p>

Jika sudah ketemu hapus dan ganti dengan code seperti dibawah ini

<b:if cond='data:blog.pageType=="item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More......</a>


Kemudian klik menu simpan template

Selanjutnya
Klik pengaturan
Klik format
Lihat area text yang kosong,isi dengan text dibawah ini:


<span class="fullpost">

</span>


Klik Simpan pengaturan


Cara posting artikelnya: pastikan pada posisi menu edit HTML. Pada posisi ini akan nampak kode:

<span class="fullpost">

</span>


Masukkan artikel awal sebelum kode <span class="fullpost">
dan artikel sisanya sesudah <span class="fullpost">
dan sebelum kode </span>


misal:

Postingan yang diringkas <span class="fullpost">
postingan selengkapnya </span>


Selamat mencoba..!!!

CARA MEMPERLEBAR HALAMAN TEMPLATE

M

ungkin para sobat yang baru bikin blog merasa template yang di sediakan oleh blogger terlalu sempit atau kurang lebar. Sobat ingin merubah template sobat hingga menjadi lebih lebar? Bagaimana caranya..? Mungkin ada beberapa cara untuk merubah halaman template. Dan saya biasa menggunakan cara sebagai berikut,yang saya anggap paling sederhana.

Dan tidak perlu panjang lebar lagi kita mulai saja caranya.
Yang perlu kita ketahui beberapa bagian dari template yang nantinya kita
bisa ubah ukurannya:

Outer-wreper : Lebar template secara keseluruhan
Main-wrapper: Bagian dimana kita biasa posting artikel
Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wraper
Header- wrapper: Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah

Sekarang masuk ke blog sobat, klik tata letak kemudian edit html.Pada edit
html sobat tidak perlu kasih centang pada Expand template widget.
Kemudian cari code sebagai berikut:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Sobat bisa ganti ukuran pada teks yang berwarna merah. Sobat bisa ganti dengan ukuran berapa saja,biar keliatan rapi sesuaikan ukurannya. Misal :

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 500px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 400px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

Jika lebar outer-wrapper: 950px maka jarak main-wraper dan sedebar-wraper harus di sesuai:

Main-wrapper:500px
Sedebar-wrapper: 400px
Sedang sisanya yang 50px merupakan jarak agar sedebar dan postingan blog tidak berhimpitan.
Setelah itu jangan lupa sesuaikan juga lebar header-wraper dan footer-wraper sama dengan outer-wraper

#header-wraper{
width: 950px
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;

Yang perlu di rubah teks yang berwana merah. Jika sudah klik pratinjau atau preview,kalau dirasa sudah cocok baru di save.
Selamat mencoba...!!!