Pages

Showing posts with label Postingan. Show all posts
Showing posts with label Postingan. Show all posts

Kotak Postingan Terpisah

type='html'>Perhatikan blog ini, terlihat kolom postingan blog saya terpisah antara satu postingan dengan postingan yang lain.

Kolom postingan terpisah seperti ini juga terlihat lebih enak dipandang dan lebih memudahkan pengunjung blog dalam membedakan isi artikel yang kita tulis, daripada kolom postingan yang menyatu atau dalam 1 kotak saja.

Jika sobat ingin blog sobat tampilannya seperti ini, berarti sobat benar telah membaca artikel ini..

Untuk pemasangan kolom yang seperti ini, sobat hanya memerlukan sedikit tambahan kode HTML saja yang nantinya akan disisipkan ke blog sobat.

Berikut langkah - langkahnya :
  1. Silahkan login dahulu ke Blogger dengan ID sobat tentunya.

  2. Klik Tata Letak.

  3. Klik tab Edit HTML.

  4. Setelah itu cari kode yang seperti ini

    .post {


  5. Kemudian tambahkan kode berikut ini tepat setelah kode tersebut


    Padding:15px; /* Jarak text post dengan garis pinggir */

    Border-top: 2px solid #000000; /* warna garis pinggir atas */

    Border-bottom: 2px solid #000000; /* warna garis pinggir bawah */

    Border-left: 2px solid #000000; /* warna garis pinggir kiri */

    Border-right: 2px solid #000000; /* warna garis pinggir kanan */

    Margin-bottom: 30px; /* jarak antara post yang satu dengan yang lainnya */



  6. Save Template.

Sekarang coba sobat lihat hasilnya, jika sobat benar meletakkan kode HTML nya Insya Allah pasti akan berhasil dan sama seperti punya saya. Tapi masih dalam bentuk kotak kaku alias lancip pada ujung - ujungnya. Nanti jika sempat akan saya tulis postingan tentang membuat garis melengkung pada sudut kolom.

Selamat mencoba !!

Membuat Background Pada Postingan

type='html'>Untuk mempercantik postingan kita, kadang - kadang kita memerlukan tambahan background di belakang tulisan kita. Pada pembahasan terdahulu tentang cara membuat tabel sebenarnya agak mirip dengan postingan ini, tapi bedanya kalau tabel hanya menampilkan warna saja sedangkan pembahasan kali ini background akan berupa warna dan gambar.

I. Mengganti warna background.
  • Cukup menambahkan kode berikut ke dalam postingan sobat :


    kode_warna_disini;">

    Tulisan sobat letaknya disini



    Untuk kode warna bisa sobat lihat disini

II. Mengganti Background dengan gambar
  • Kodenya seperti berikut ini :


    alamat url tempat sobat mengupload gambar) no-repeat right top; text-align:justify; font-size:100%; padding:10px">

    Tulisan yang akan sobat tulis didalam postingan sobat letaknya disini



Ganti tulisan yang saya tandai warna merah dengan alamat url tempat sobat mengupload gambar, bisa di Photobucket atau Yahoo Geocities. Untuk contoh punya saya yang telah saya upload ke Photobucket, kodenya seperti ini : http://i643.photobucket.com/albums/uu155/miskahiper/Kolom-1.png

kemudian akan menjadi seperti ini :


http://i643.photobucket.com/albums/uu155/miskahiper/Kolom-1.png) no-repeat right top; text-align:justify; font-size:100%; padding:10px">

Tulisan yang akan sobat tulis didalam postingan sobat letaknya disini




Sangat mudah ya..selamat mencoba !

Kode HTML Tampil di Postingan

type='html'>Para Blogger yang ingin menerangkan kepada pengunjung blog yang mengharuskan adanya kode HTML di dalam postingan pasti membutuhkan tips ini. Ada 2 cara membuat kode HTML muncul di dalam postingan blog kita.
Yang pertama dengan mengganti kode - kode HTML yang akan ditampilkan dengan notasi tertentu atau bisa dengan menggunakan cara text area.

Tapi saya tidak akan menggunakan 2 cara diatas, kita akan menggunakan cara yang paling mudah, yaitu dengan menggunakan fasilitas "Parse HTML" online.

  1. Siapkan kode HTML yang ingin sobat tampilkan, kemudian klik disini
  2. Masukkan kode HTML yang tadi sobat copy ke dalam kotak yang tersedia dan klik Parse

Sobat akan melihat kode yang telah di parse dan siap ditampilkan ke dalam postingan, seperti ini hasilnya :

 

<a href="http://miscah.blogspot.com/2009/04/tutorial-membuat-text-area.html">Tutorial Membuat Text Area</a> 

 

Untuk menampilkan di dalam postingan, sobat klik Edit HTML pada kotak post, kemudian masukkan kode yang sudah sobat parse, contoh gambarnya seperti ini :

 

image

Maka kode HTML tersebut akan tampil seperti dibawah ini :

 

Tutorial Membuat Text Area

Untuk memperhalus hasil kode tersebut caranya sangat mudah, sobat tinggal memasukkan kode tersebut diantara kode HTML ini : kode yang telah di parse

 

image

Seperti ini hasil yang sudah diperhalus :

Tutorial Membuat Text Area

Selamat Mencoba !

Cara membagi kolom postingan menjadi 2

type='html'>Selamat subuh sobat, hehe, bentar lagi dah mau adzan jangan lupa sholat, OK postingan kali ini kita akan membahas bagai mana Cara membagi kolom postingan menjadi 2, ha gimana tu ? oke dari pada nanti saya ngomongnya muter muter lebih baik kita liat screenshotnya di bawah.. BEKICOT


ha gimana menarik bukan ? kalo nggak ya udah hehe
untuk pembuatan langsung saja ikuti kata kata newbie ini

  • Loggin blogger.com > Rancangan > Edithtml
  • cari kode ]]> dan letakkan kode berikut dibawah nya





  • Selanjutnya cari kode .post { dan tambahkan kode berikut


margin:0.5em auto 0.5em;

  • sehingga menjadi seperti ini


.post {
font-family:Comic Sans MS;
color: #000000;
margin:0.5em auto 0.5em;
background:transparent;
}




  • oke simpan
Sumber : SYSTEM OF BLOG

Membuat Artikel terkait di bawah postingan dengan scroll

type='html'>hai,..ketemu lagi... malam ini ane masih posting tentang tutorial ni...membuat artikel terkait di bawah postingan ane kasi lihat screenshoot nya ya. kalo mau langsung tu di bawah artikel ini juga ada...oke. langsung aja gak usah  panjang lebar...



itu yang ane... kalo mau ikutin ni caranya

Loggin blogger
Rancangan, edit html
cari kode yang mirip lalu letakkin kode berikut di bawahnya






Artikel Terkait:











oke kalo udah cari lagi kode ]]>


letakkin kode berikut diatasnya


.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}


nah di situ tempat ente ngedit... ubah tu backgroundnya jadi gambar...kalo mau sih!!

ya udah selesai ya



Cara menambah Author Box di Bawah Postingan Pada Blogspot

type='html'>seberapa pentingkah author box itu pada sebuah postingan di blog, menurut saya lumayan penting, karena dengan adanya author box pada setiap postingan, pembaca akan dengan mudah mengetahu tentang diri kita sebagai pemilik blog,di samping itu juga akan menambah cantiknya tampilan sebuah postingan di blog kita.

Ok langsung saja, berikut ini cara membuatnya:

1. Login dulu ke dasbhord blog.
2. Setelah di halaman dasbhor, pilih rancangan.
3. Selanjutnya pilih Edit HTML
4. di halaman Edit HTML, jangan lupa beri tanda centang pada Expand Template Widget
5. Kemudian cari kode berikut ]]>
6. lalu sisipkan kode berikut di bawah ini persis di atasnya;


.author-box {
background: #f0f0f0;
margin: 20px 0 40px 0;
padding: 10px;
overflow: auto;
color:#888;
font-family:verdana, sans-serif;
}
.author-box p {
margin: 0;
padding: 0;
}
.author-box a{
color:#666;
}
.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}

7. Selanjutnya Anda cari Kode seperti ini :

Cara Pasang Iklan Adsense Di Bawah Judul Postingan Blog Di Blogspot

type='html'>
Kali ini blogging dan internet akan mencoba berbagi tentang Cara Pasang Iklan Adsense Di Bawah Judul Postingan Blog Di Blogspot Bagi pengguna blogger/blogspot, adalah sudah merupakan suatu tujuan untuk dapat meningkatkan earning dari adsense.


Oleh karena itu optimasi penempatan iklan adsense yang tepat yang dapat mempermudah pengunjung blog agar dapat dengan mudah untuk melihat iklan dari adsense yang ada di dalam postingan adalah sesuatu yang sangat menarik. Di samping tampilannya bagus, juga kesannya postingan blog akan di lihat lebih elegan.

Tips ini khusus bagi pengguna blogspot yang belum memasang readmore atau autoreadmore di blognya. 

Berikut Cara Pasang Iklan Adsense Di Bawah Judul Postingan Blog Di Blogspot:

1. Login ke account blogger anda

2. Kemudian masuk ke design,lalu edit html

3. Centang kode Expand widget Templeate

4. Cari Kode  Untuk mempermudah menemukan kode tersebut gunakan find ( Ctrl+f )

5. Tambahkan kode iklan adsense anda tepat di atasnya

6.  Sebelum anda pasang iklannya,Parse dulu kode iklan anda di parse html

7.  Save dan selesai sudah.


Ket:

Jika anda ingin menempatkan iklan nya di bawah postingan blog anda, tempatkan kode iklan anda tepat di bawah kode pada nomor 4 di atas.

Demikian ulasan singkat Cara Pasang Iklan Adsense Di Bawah Judul Postingan Blog Di Blogspot, semoga bermanfaat.



Happy blogging

Cara Pasang Iklan Adsense Di Bawah Judul Postingan Blog Di Blogspot

type="html">
Kali ini blogging dan internet akan mencoba berbagi tentang Cara Pasang Iklan Adsense Di Bawah Judul Postingan Blog Di Blogspot Bagi pengguna blogger/blogspot, adalah sudah merupakan suatu tujuan untuk dapat meningkatkan earning dari adsense, oleh karena itu optimasi penempatan iklan adsense yang tepat yang dapat mempermudah pengunjung blog agar dapat dengan mudah untuk melihat iklan dari adsense yang ada di dalam postingan adalah sesuatu yang sangat menarik. Di samping tampilannya bagus, juga kesannya postingan blog akan di lihat lebih elegan.

Tips ini khusus bagi pengguna blogspot yang belum memasang readmore atau autoreadmore di blognya. 

Berikut Cara Pasang Iklan Adsense Di Bawah Judul Postingan Blog Di Blogspot:

1. Login ke account blogger anda

2. Kemudian masuk ke design,lalu edit html

3. Centang kode Expand widget Templeate

4. Cari Kode  Untuk mempermudah menemukan kode tersebut gunakan find ( Ctrl+f )

5. Tambahkan kode iklan adsense anda tepat di atasnya

6.  Sebelum anda pasang iklannya,Parse dulu kode iklan anda di parse html

7.  Save dan selesai sudah.


Ket:

Jika anda ingin menempatkan iklan nya di bawah postingan blog anda, tempatkan kode iklan anda tepat di bawah kode pada nomor 4 di atas.

Demikian Cara Pasang Iklan Adsense Di Bawah Judul Postingan Blog Di Blogspot, semoga bermanfaat.