Cara upload file di geocities

Sebelumnya geocities itu mirip sama googlepages. Berhubung googlepages tidak menerima Sign up (pendaftaran baru lagi maka layanan googlepages dialihkan ke google sites)

So kita disini bahas Geocities saja. Banyak yang bertanya kepada saya tentang bagaimana cara upload file di geocities. Geocities itu sendiri merupakan suatu layanan gratis dari Yahoo. Disitu kita bisa bisa membuat web seperti halnya blog.Selain itu kita bisa upload file-file CSS (Cascading Style Sheets ), JS (Javascript) , Gambar (Jpeg, Bmp, Gif, Png dan lain-lain), Video (mpeg,avi,dat dan lain-lain) dan Flash (fla, swf). Pokoknya hampir semua file bisa di upload di geocities. Untuk itu ikuti langkah-langkah dibawah ini:

1. Buat email di Yahoo dulu kalau belum punya.

2. Buka http://geocities.yahoo.com

3. Masukan ID dan Password email Yahoo kamu.

4. Klik Sign Up dibawah tulisan Get a site for free atau Sign Up (tulisan biru paling bawah) dibawah tulisan Geocities Free .

5. Isi data base seperti dibawah ini atau sesukamu lalu klik Submit

6. Your Yahoo ID adalah ID Email Yahoomu, Your Homepage URL shortcuts adalah Link accountmu / Link Filemu nantinya di geocities. Klik Build Your Website Now

7.Halaman utama Geocities seperti ini :

8. Klik tombol Manage dibawah tulisan GeoCities Control Panel, lalu klik Easy Upload dibawah tulisan File Management Tools

9. Sekarang masuk tahapan upload file.Untuk upload tinggal klik Browse,lalu cari file yang akan kamu upload di dalam Komputer/ Laptopmu baik itu file CSS (Cascading Style Sheets ), JS (Javascript) , Gambar (Jpeg, Bmp, Gif, Png dan lain-lain), Video (mpeg,avi,dat dan lain-lain) dan Flash (fla, swf).. Klik Add more files jika ingin langsung upload beberapa file sekaligus. Setelah itu klik Upload.

10. Contoh upload file JS (javascript), lihat Tutorial ini dulu Cara Membuat Read More (Versi 2). Lihat pada bagian script ini

<script src='http://www.geocities.com/adeha_182/Readmore.js'
type='text/javascript'/>

Copy tulisan yang berwarna merah diatas. Buka New Tab atau New Browser lalu paste di Addres Browser mu. Seperti ini :

+ Copy semua kode yang didapat diatas (Pakai Control All) lalu Buka Notepad
+ Paste kodenya di Notepad lalu save dengan nama readmore.js (Ingat Extensi file harus ada agar dikenal sebagai file JS)

+ Tutup Notepad lalu Upload

Hasil Upload :

+ Klik Upload more files jika ingin Upload file lagi.Atau klik File Manager jika ingin melihat hasil / tempat penyimpanan file Geocities.

+ Klik Refresh File Manager

+ Setelah itu muncul daftar File Manager / File yang telah kamu upload. Cari file Readmore.js yang telah kamu upload diatas tadi. Klik kanan di tulisan View, trus klik Copy Link Location

Hasil Link Location yang didapat :

http://www.geocities.com/ID Email kamu/Readmore.js

Link Location yang didapat dimasukan dalam script :

+ <script src='http://www.geocities.com/ID Email kamu/Readmore.js'
type='text/javascript'/>

+ Contoh penerapan kode Readmore.js diatas di artikel Cara Membuat Read More (Versi 2).

11. Selesai

+ Untuk file CSS extensinya namafile.css

+ Untuk file Gambar, Flash, Video dan lain-lain caranya sama saja.

+ Tips dari saya : uploadlah file CSS, JS, Flash di geocities, sedangkan untuk file-file gambar dan video di blog kamu masing-masing. Baca ini kalau belum tahu caranya Cara mengambil link gambar dari blogger

Akhir kata "Trust me It's Work..." Tunggu artikel selanjutnya bagaimana cara membuat Iframe dari geocities tanpa iklan / Yahoo ads..

Menyembunyikan isi sidebar

"fajardesign pada March 10, 2009 2:55 PM mengatakan...wah bos...thenkyu yaa dah ngasih trik yang saya cari...tapi bos...bisa gak trik ini dipakai selain di postingan...misalkan untuk menyembunyikan tulisan/gambar di sidebar, atau header, atau footer...jadi biar ga makan tempat sidebar gituh..
kira-kira bisa gak?"

Itulah sepenggal Komentar dari sahabat saya yang bernama Mas Fajar yang dimana beliau seorang Blogger yang sangat mendalami dunia per-desainan. Nah untuk yang ingin melihat-lihat sekalian belajar desain silahkan kunjungi blog beliau disini.

Nah untuk membuat isi sidebar supaya ga keliatan ada berbagai macam cara yang bisa kita lakukan. Disini kita akan membuat

Demo 1:



Ikuti cara dibawah ini

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML"
3. Copy paste kode dibawah ini dan taruh diatas

<script type="text/javascript" src="http://www.geocities.com/adeha_182/jquery-1.2.6.pack.js"></script>

<script type="text/javascript" src="http://www.geocities.com/adeha_182/ddaccordion.js"></script>

Memodifikasi Newer Post, Home dan Older Post link

Tutorial ini spesial diminta oleh sahabat saya yaitu Romero. Disini kita akan memodifikasi Link Newer Post (Postingan Baru), Home dan Older Post (Postingan Lama) yang biasanya terletak dibawah postingan.

Untuk lebih jelasnya silahkan ikuti langkah-langkah dibawah ini.

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates" (Backup dulu Templatemu jika nanti terjadi kesalahan bisa dikembalikan seperti semula)
3. Cari kode ini

<b:includable id='nextprev'>

4. Dibawah kode tersebut ada kode ini

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

+ Kode yang warna Merah adalah kode Link Newer Post (Postingan Terbaru)
+ Kode yang warna Biru adalah kode Link Older Post (Postingan Lama)
+ Kode yang warna Ungu adalah kode Home

Ada 3 cara untuk memodifikasi Newer Post (Postingan Baru), Home dan Older Post (Postingan Lama) yaitu :

A. Untuk mengganti tulisan Link Newer Post (Postingan Baru), Home dan Older Post (Postingan Lama) seperti ini

+ <data:newerPageTitle/> ganti dengan nama sesuai keinginanmu, misal Next Post atau Artikel Terbaru
+ <data:olderPageTitle/> ganti dengan nama sesuai keinginanmu, misal Next Post atau Artikel Lama
+ <data:homeMsg/> pada baris pertama atau kode yang berkedip-kedip ganti dengan nama sesuai keinginanmu, misal My HOmmy atau Rumah

Hasil penerapan kode diatas:

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>Artikel Terbaru</a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>Artikel Lama;</a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'>Rumah</a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Hasilnya :

B. Menambahkan icon disamping Newer Post (Postingan Baru), Home dan Older Post (Postingan Lama)

+ Tambahkan kode ini

<img src='link gambarmu'/>

Contoh :

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRcTQg2fHTsQBgucYHu45c77RgLTOJM8UfacNMmXEEH96_ouvQ2wfUWdN_CMXxTFOmPzbq1ufoq7f82XV40XsH4ggAwpOI3Ca_Pog9pK-0IuRbqccHu6zaKvS8mency2G0Hy8xC293bbU/s400/zn4qic.jpg.png'/>(Cara upload gambar di Blog lihat di Cara mengambil link gambar dari blogger

Hasil penerapan kode diatas:

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRcTQg2fHTsQBgucYHu45c77RgLTOJM8UfacNMmXEEH96_ouvQ2wfUWdN_CMXxTFOmPzbq1ufoq7f82XV40XsH4ggAwpOI3Ca_Pog9pK-0IuRbqccHu6zaKvS8mency2G0Hy8xC293bbU/s400/zn4qic.jpg.png'/><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlRgDPmDHdIFaqMz1_YonXFgNu6YZlkTOk6UKFTCPL0VFI7P0T8Vunsg4-U6IHc101ENOF-ZnVW2DL-R78iIj-pL2zWzf92gcNB3rjmeUYDT_SAViErrEJYTfBg1x_Zr2VOUVF3gvJy0/s400/sfcox4.jpg.png'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOTQqfEdXsrEEBbAEQmuYEsM7kvHyiQGgBerCa3zIjhEnHgOrWf3hYbK4di5eYmqY0WCNTnwSe0dPraS0Mi9c-sjjRaCRmTfO1BXf1X94ptiiXPxSP1z-xRk3hidg2pg89SimMF4585I/s400/Home_32.png'/><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Hasilnya :

C. Mengganti tulisan Newer Post (Postingan Baru), Home dan Older Post (Postingan Lama) dengan Icon.

Hapus kode dibawah ini yang berwarna merah, biru dan ungu

<data:newerPageTitle/> ganti dengan <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRcTQg2fHTsQBgucYHu45c77RgLTOJM8UfacNMmXEEH96_ouvQ2wfUWdN_CMXxTFOmPzbq1ufoq7f82XV40XsH4ggAwpOI3Ca_Pog9pK-0IuRbqccHu6zaKvS8mency2G0Hy8xC293bbU/s400/zn4qic.jpg.png'/>

<data:olderPageTitle/> ganti dengan <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlRgDPmDHdIFaqMz1_YonXFgNu6YZlkTOk6UKFTCPL0VFI7P0T8Vunsg4-U6IHc101ENOF-ZnVW2DL-R78iIj-pL2zWzf92gcNB3rjmeUYDT_SAViErrEJYTfBg1x_Zr2VOUVF3gvJy0/s400/sfcox4.jpg.png'/>

<data:homeMsg/> pada baris pertama ganti dengan <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOTQqfEdXsrEEBbAEQmuYEsM7kvHyiQGgBerCa3zIjhEnHgOrWf3hYbK4di5eYmqY0WCNTnwSe0dPraS0Mi9c-sjjRaCRmTfO1BXf1X94ptiiXPxSP1z-xRk3hidg2pg89SimMF4585I/s400/Home_32.png'/>

Hasil penerapan kode diatas:

<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRcTQg2fHTsQBgucYHu45c77RgLTOJM8UfacNMmXEEH96_ouvQ2wfUWdN_CMXxTFOmPzbq1ufoq7f82XV40XsH4ggAwpOI3Ca_Pog9pK-0IuRbqccHu6zaKvS8mency2G0Hy8xC293bbU/s400/zn4qic.jpg.png'/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLlRgDPmDHdIFaqMz1_YonXFgNu6YZlkTOk6UKFTCPL0VFI7P0T8Vunsg4-U6IHc101ENOF-ZnVW2DL-R78iIj-pL2zWzf92gcNB3rjmeUYDT_SAViErrEJYTfBg1x_Zr2VOUVF3gvJy0/s400/sfcox4.jpg.png'/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVOTQqfEdXsrEEBbAEQmuYEsM7kvHyiQGgBerCa3zIjhEnHgOrWf3hYbK4di5eYmqY0WCNTnwSe0dPraS0Mi9c-sjjRaCRmTfO1BXf1X94ptiiXPxSP1z-xRk3hidg2pg89SimMF4585I/s400/Home_32.png'/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>

Hasilnya :

5. Save template dan selesai.

Cara mengambil link gambar dari blogger

Biasanya kita kalau upload gambar di Photobucket atau di Image shack. Nah disini kita akan mencoba mengambil link gambar baik format Jpeg, Gif ataupun Bmp dari blogger itu sendiri sehingga bisa kita manfaatkan untuk menaruh file gambar header,bakckground, sidebar, icon dan lain-lain. Ikuti langkah-langkah dibawah ini.

1. Buat blog baru khusus upload gambar dengan nama misal "tempat upload gambar"

2. Posisikan di buat postingan baru (di mode Edit HTML ataupun Compose sama saja) seperti gambar dibawah ini lalu klik Add Image.

3. Klik Browse dan pilih gambar yang akan kamu upload. Add another image jika ingin langsung upload beberapa gambar (max. 5 gambar sekali upload dari pihak Blogger. Choose Layout dan Image size yang kamu ingikan lalu klik upload image.

4. Setelah selesai diupload image semua kemudian kli Publish Post dan klik in a new window disebelah tulisan View Blog

5. Arahkan kursor mouse diatas gambar lalu klik kanan dan pilih Copy Image Location (Pakai Browser Mozzila Fire Fox karena lebih cepat dan stabil).

6. Buka Tab Mozzila (open new tab) atau buka Window yang baru (open new window) lalu paste Image Location tadi di gambar yang akan kamu tampilkan di blogmu.

+ Contoh Url Image Location yang tadi dicopy = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM_Ykbwa_ofaPq90pnGPsmITJ2LU0dD_szIMPZwBiUyY_Y8G4C2p7vnvmQWIrV2vLYxvLgY2dVvzWBFNlvX6FgQF8lSb6SwfJrElX0h5DGM9_RMn6fSU4aS3wt6ySMZwO5lq8Z7RdyWW7t/s400/04012009(023)_resize.jpg

Hasilnya:

+ Apabila kamu klik langsung gambarnya ( Bukan di Copy Image Location)maka hasil kodenya seperti ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM_Ykbwa_ofaPq90pnGPsmITJ2LU0dD_szIMPZwBiUyY_Y8G4C2p7vnvmQWIrV2vLYxvLgY2dVvzWBFNlvX6FgQF8lSb6SwfJrElX0h5DGM9_RMn6fSU4aS3wt6ySMZwO5lq8Z7RdyWW7t/ -h/04012009(023)_resize.jpg

Hasilnya :

+ Perhatikan kode yang warna hijau -h dan perhatikan Favicon (Icon yang ada di addres bar, kalau gambar yang pertama tadi akan langsung menunjuk gambar image itu sendiri sedangkan kalau gambar kedua akan menunjukan logo Picasa :



+ Hapus kode -h jika ingin diambil link gambarnya.

Membuat Icon Mininavbar

Lihat icon di pojok bawah kanan pada blog ini. Itulah yang akan kita buat. Ini caranya :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates"
3. Copy kode ini dibawah ini lalu paste diatas kode ]]></b:skin>

/************************************************
* Mininavbar *
************************************************/
#mininavbar
{
display:scroll;
position:fixed;
bottom:1px;
right:1px;
z-index:99;
}
#mininavbar a
{
filter:alpha(opacity=65);
-moz-opacity:0.65;
opacity:0.65;
border:0;
}
#mininavbar img
{
border:0;
}
#mininavbar a:hover
{
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

+ Kode yang berwarna merah bisa kamu ganti. Misal bottom menjadi top (gambar akan berada diposisi atas) dan right menjadi left (gambar akan menjadi di posisi kiri). Kombinasikan saja sesuai keinginanmu.

4. Masih di edit HTML, copy kode dibawah ini lalu paste dibawah <body>

<div id='mininavbar'><a href='#' onClick='window.location.reload()' title='Reload page'><img src='http://soulouko.googlepages.com/refresh.png'/></a><a expr:href='data:blog.homepageUrl'><img src='http://soulouko.googlepages.com/house.png'/></a><a href='#' title='Ke Atas Halaman'><img src='http://soulouko.googlepages.com/topopg.png'/></a><a href='#finalpg' title='Ke bawah halaman'><img src='http://soulouko.googlepages.com/down.png'/></a></div>

+ Kode yang berwarna biru adalah link gambar kamu. Bisa kamu ganti sesuai link gambar keinginanmu.

5. Save Template dan Selesai

Memodifikasi kotak komentar Pemilik Blog

Lihat Tulisan kotak Komentar pemilik blog (Andie)merah muda pada gambar diatas. Itulah yang akan kita buat. Ini caranya :

1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML" trus kasih centang tanda "Expand Widget Templates"

3. Copy CSS dibawah ini

/* Warna Kotak Komentar Pemilik Blog */
.commentpemilikblog {
background: #EEE0E5; /* Warna Background */
border:1px dashed #DC143C; /* Warna Garis Pinggir */
margin:0 0 10px 30px; /* Jarak Margin atas,kanan,bawah,kiri */
padding:0 0 0 20px; /* Jarak Padding atas,kanan,bawah,kiri */
}

+ Paste diatas kode ]]></b:skin>

4. Cari kode <dl id='comments-block'>

+ Dibawah kode tersebut ada kode ini :

<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='commentpemilikblog'>
<p><data:comment.body/></p>
</dd>
<b:else/>

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

+ Tambahkan kode yang berwarna merah seperti contoh diatas.

5. Save Template dan Selesai

+ Supaya Kotak Komentar bisa langsung muncul dibawah postingan klik Dashboard - Setting - Comment Form Placement - pilih Embedded below post

+ Save Setting

Seperti ini :

+ Thk to Ndyteen yg udah mau jadi contoh comment hehehehe...

Membuat Huruf Pertama Style koran

Sering melihat koran atau majalah? Di koran atau majalah kalau kamu amati Huruf pertamanya pasti huruf besar seperti ini contohnya :

Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...

Tertarik untuk membuatnya?

1. Copy Paste CSS Berikut:

/*- Huruf 1 Style Koran--------------------------- */
.stylekoran { float:left; color: #A91B33; font-size:100px; line-height:80px;
padding-top:1px; padding-right:5px; }

+ Login ke Blogger kemudian pilih "Layout"
+ Klik pada "Edit HTML" dan paste kode diatas ]]></b:skin>
+ Kemudian Save Template.
+ Kode warna yang Ungu bisa kamu ubah sesuai keinginanmu.

2. Masuk ke area Setting klik pada Formatting.

+Drag kebawah sampai pada bagian Post Template
+Copy Paste script berikut

<span class="stylekoran">


</span>

Contoh posisi script :

+ Kalau sudah Save seting.

3. Masuk ke area Posting dan klik Create/buat Posting Baru atau Edit Posting jika ingin mengedit postingan/artikel yang sudah ada. Cara menempatkan kode tadi pada posisi Edit HTML yaitu :

<span class="stylekoran">H</span>ere is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...

Hasilnya :

Here is a caption with an image that is aligned to the left. This is an example of a Blogger post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what exactly is on your mind. This is an example of a Blogger...