Tips dan Trik: Posting

Tampilkan postingan dengan label Posting. Tampilkan semua postingan

Cara Membuat Judul Postingan Berjalan

Pada postingan kali ini, Saya akan membahas bagaimana cara membuat judul posting berjalan. mungkn anda pernah liat..
Oke langsung aja kita mulai penjelasannya :

Login ke Dashboard Blogger Anda
Klik Layout - Edit HTML. Untuk berjaga-jaga sebaiknya backup dulu template Anda, lalu klik pada Expand widget templates dan carilah kode dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Kemudian pasang kode marquee sehingga kode lengkap hasil perubahan akan seperti dibawah ini:

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<marquee direction='left'><h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3> </marquee>
</b:if>

Teks yang berwarna merah adalah kode yang harus Anda tambahkan. Anda dapat merubah arah dengan mengganti kode left menjadi right. Klik tombol Preview untuk melihat hasilnya, jika Anda sudah cukup puas silahkan di simpan pekerjaan Anda.
Selamat Mencoba...

»» READMORE...

Cara membuat background pada judul postingan blog

membuat background pada judul postingan bisa memudahkan pengunjung melihat judulnya, dan katanya lebih memudahkan search engine mendeteksi keyword yang ada di judul tersebut.

Contoh judul postingan yang di-ubah background-nya bisa dilihat seperti gambar di bawah ini.

Untuk mengubah /membuat background judul postingan lakukan prosedur berikut:

1. Di dashboard pilih Tata letak , Edit HTML
Cari kode : post-title {

Di bagian bawah post-title { , masukkan kode

line-height: 2.1em;
border: 4px solid #000099;
background-color: #000099;

atau
line-height: 2.1em;
border: 4px solid yellow;
background-color: yellow;

catatan: #000099 adalah kode hexadesimal untuk warna biru (bisa gunakan warna lain)
Selain menggunakan kode warna hexadesimal anda juga bisa menggunakan warna seperti: yellow , red, pink, blue,green, black, dll.

Tampilan scriptnya seperti di bawah ini

post-title {
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 2.1em;
border: 4px solid yellow;
background-color: yellow;

atau:

post-title {
margin: 0;
padding: 0;
font-size: 125%;
font-weight: bold;
line-height: 2.1em;
border: 4px solid #000099;
background-color: #000099;

»» READMORE...

Cara membuat recent post (postingan terbaru) di blogspot

Berkadang saya bingung jika mengunjungi web biasa ada yang menamakan widget recent post, terkadang gadget recent post bahkan ada juga yang menamakan badge recent post. mengenai gadget,widget,atau badge terserah teman-teman mau gunakan yang mana, tidak ada yang melarang memakai istilah tersebut. Yang penting sekarang kita mau membuat recent post, Jika di blog saya ini bisa dilihat di sidebar bagian atas atau di gambar di bawah:

Ada beberapa cara membuat recent post, bisa dengan menggunakan feedburner atau dengan memanfaatkan feed default blogger.

Keduanya pernah saya coba di blog saya, tetapi yang lebih praktis adalah dengan menggunakan feed default blogger.

Prosedurnya:
1. Masuk ke Dashboard -> Tata Letak -> Elemen halaman
Pilih Tambah Gadget
2. Pilih Html/Java script
3. Masukkan kode berikut pada html/javascript

catatan:
var numposts = 17 angka 17 bisa anda ganti dengan banyaknya judul postingan yang akan anda tampilkan, misalnya 7
var showpostdate=false , bisa diubah menjadi : var showpostdate=true
var showpostsummary=false , bisa diubah menjadi : var showpostsummary=true
http://artikelkomputer.com anda ubah dengan nama blog anda.

»» READMORE...

Cara Membagi Postingan Menjadi 2 (dua) Kolom

erbagai cara digunakan untuk menarik pengunjung agar datang dan kembali mengujungi website/blog yang kita buat, misalnya dengan membuat postingan yang unik dan berkualitas juga dengan mempercantik tampilan website/blog.

Tips yang ingin Saya share kepada Anda kali ini adalah cara membuat postingan yang unik dan yang dimaksud unik disini bukan terkait isi dari postingan, melainkan berkenaan dengan penampilan dari postingan tersebut.

Yang menurut Saya unik tadi adalah menampilkan postingan menjadi 2 (dua) kolom seperti contoh di bawah ini:

Berbagai cara digunakan untuk menarik pengunjung agar datang dan kembali mengujungi website/blog yang kita buat, misalnya dengan membuat postingan yang unik dan berkualitas juga dengan mempercantik tampilan website/blog.

Tips yang ingin Saya share kepada Anda kali ini adalah cara membuat postingan yang unik dan yang dimaksud unik disini bukan terkait isi dari postingan, melainkan berkenaan dengan penampilan dari postingan tersebut.

Apakah Anda tertarik? Jika iya, berikut ini Cara Membagi Postingan Menjadi 2 (dua) Kolom, maka pada saat membuat posting Anda harus menulis lewat Edit HTML bukan dari Compose/Tulis dan dalam postingan tersebut masukan kode di bawah ini:
<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="250"> artikel di bagian kiri</td><td align="justify" valign="top" width="250"> artikel di bagian kanan </td> </tr>
</tbody></table>

Baiklah supaya lebih jelas, berikut ini contohnya :

<table cellpadding="10" cellspacing="10"><tbody>
<tr> <td align="justify" valign="top" width="300">Berbagai cara digunakan untuk menarik pengunjung agar datang dan kembali mengujungi website/blog yang kita buat, misalnya dengan membuat postingan yang unik dan berkualitas juga dengan mempercantik tampilan website/blog. </td><td align="justify" valign="top" width="300"> Tips yang ingin Saya share kepada Anda kali ini adalah cara membuat postingan yang unik dan yang dimaksud unik disini bukan terkait isi dari postingan, melainkan berkenaan dengan penampilan dari postingan tersebut.</td> </tr>
</tbody></table>

Keterangan :
Cellpadding adalah jarak antara tepi kolom dengan tulisan;
Cellspacing adalah jarak antara dua kolom;
Width adalah lebar masing-masing kolom;
Align adalah perataan teks (justify untuk rata kanan kiri, left untuk rata kiri, right untuk rata kanan dan center untuk rata tengah);
Valign adalah perataan verikal (top untuk rata atas, bottom untuk rata bawah dan middle untuk rata tengah);
Anda bisa merubah dan mengaturnya sesuai selera Anda.

»» READMORE...

Cara Memasana Kode HTLM Pada Postingan

Bagi yang sudah tahu Cara Menampilkan Kode HTML di dalam posting blog bukanlah hal yang sulit, tetapi sebaliknya bagi yang belum tahu triknya akan berkata sulit dan pusing tujuh keliling, bahkan bisa membatalkan niatnya untuk menulis postingan, hal ini pun pernah Saya alami sendiri.

Oleh karena itu Saya ingin berbagi pengetahuan tentang cara mudah dan simple untuk menampilkan kode HTML pada posting blog yaitu dengan cara melakukan Parse terlebih dahulu pada kode HTML yang akan dimasukan dalam postingan.

Untuk melakukan Parse bisa dilakukan melalui situs penyedia layanan Parse/Convert Kode HTML yang gratis dan cara-caranya hampir sama.

Berikut adalah situs-situs yang saya maksud di bawah ini :

1. www.eblogtemplates.com
Caranya kunjungi situs ini www.eblogtemplates.com lalu copy paste kode HTML Anda dan masukan pada form yang tersedia, lalu klik “Convert Code” dan tunggu sampai proses selesai. Setelah selesai copy paste kode HTML yang telah diparse tersebut ke dalam postingan Anda.

2. http://www.blogcrowds.com
Setelah Anda masuk ke situs ini http://www.blogcrowds.com, langkah-langkahnya hampir sama dengan di atas, copy paste kode HTML Anda dan masukan pada form yang tersedia, lalu klik “PARSE” dan tunggu sampai proses selesai. Setelah selesai copy paste kode HTML yang telah diparse tersebut ke dalam postingan Anda.

3. http://www.centricle.com
Masuk ke situs ini http://www.centricle.com, copy paste kode HTML Anda dan masukan pada form yang tersedia, lalu klik “ENCODE”, selanjutnya copy paste kode HTML yang telah diparse ke dalam postingan Anda.

4. http://www.accessify.com
Masuk ke situs ini http://www.accessify.com, copy paste kode HTML Anda dan masukan pada form yang tersedia, lalu klik “Convert to Escape Characters” dan copy paste kode HTML yang telah diparse ke dalam postingan Anda.

4. http://javascriptcompressor.com/
Masuk ke situs ini http://javascriptcompressor.com/ copy paste kode HTML Anda dan masukan pada form yang tersedia, lalu klik “Compress” dan copy paste kode HTML yang telah diparse ke dalam postingan Anda.

Selamat Mencoba Semoga Bermanfaat......

»» READMORE...

Cara menampilkan semua judul posting

Blogger sebenarnya mempunyai URL default untuk menampilkan semua posting maupun hanya posting dalam jumlah tertentu, Contoh URL default yang digunakan biasanya ditandai dengan code seperti ini http://{namablog.blogspot.com}/search?max-results={jumlah posting} Namun penggunaan code ini sangat jarang saya temui d gunakan para sahabat blogger, mungkin alasan kurang efektif membuat blogger enggan untuk memasangnya. Pada tutorial sebelumnya saya juga pernah menyampaikan Cara buat daftar tabel seluruh posting (Show Table of Contents) namun cara ini juga saya akui kurang efektif karena load scriptnya cukup memakan waktu.

Sebagai contoh klik Link ini : Lihat semua daftar posting »»

Untuk mengoptimalkan penggunaan code http://{namablog.blogspot.com}/search?max-results={jumlah posting} saya tetap menyarankan kita tetap harus merubah Script/Html standar blogger, lihat disini Cara menampilkan judul posting tanpa isi (halaman) posting hal ini bertujuan agar halaman posting yang ditampilkan nantinya bisa lebih singkat dan loading page akan semakin cepat ketika membuka semua judul posting.

Untuk memasang kode ke blogger ada dua cara yang bisa kita gunakan (pilih salah satu ya):

Cara Pertama:
Masuk ke Template -> Elemen Halaman -> Tambahkan sebuah Elemen Halaman -> kemudian pilih "Daftar Link"

Masukan url dibawah ini pada alamat situs.

http://{namablog.blogspot.com}/search?max-results={jumlah posting}

Masukan teks dibawah ini pada nama situs.

Lihat semua daftar posting »»

Cara Kedua:

Masuk ke Template -> Elemen Halaman -> Tambahkan sebuah Elemen Halaman -> pilih "HTML/JavaScript" -> Kemudian Copy-Paste code dibawah ini.

<a href="{namablog.blogspot.com}/search?max-results={jumlah posting}">Lihat semua daftar posting Â»Â»</a>

Catatan:

{namablog.blogspot.com} => Ganti dengan nama alamat blog kamu.

{jumlah posting} => Jumlah dari posting yang akan ditampilkan, jika ingin menampilkan seluruh posting tinggal tentukan saja sesuai dengan banyaknya jumlah posting di blog kamu.

Lihat semua daftar posting »» => Terserah mau ditulis kalimat sendiri :)

»» READMORE...

Cara Membuat Judul PostinganBergerak

Apa yang kamu liat dipostingan ini ??? Apa yang berbeda postingan ini dengan postingan-postingan lainnya diblog ini ??? Jika kamu teliti, judul postingan ini bergerak dari kanan ke kiri. Sesuai dengan judul postingan ini, yaitu Cara Membuat Judul Postingan Bergerak, saya juga sesuaikan dengan postingan yang saya buat. Cara membuat bergerak sangatlah mudah dan praktis kok.

Berikut langkah-langkahnya:

1. Login ke www.blogger.com

2. Klik Entri Baru

3. Nah, saat memberi judul, beri kode <marquee>....</marquee> .

4. Format judulnya seperti ini , Disini Judul Blog

5. Isi postinganmu

6. Lalu klik Tebitkan Entri

SEMOGA BERMANFAAT !!!

»» READMORE...

Cara menampilkan kode html pada postingan

Kalau anda mau membuat kode html atau kode lainnya dalam postingan anda. Cukup pergi ke website disini. Setelah anda pergi ke website itu, langsung copy paste semua code html yang mau dijadikan seperti tulisan biasa. Jangan lupa menghapus dulu tulisan Ampersands & angle brackets need to be encoded. karena tidak berguna dan membuat kode html menjadi kacau..., nah sesudah itu anda klik tombol encode yang ada di bawah form tempat kode. Bila sudah akan muncul kode kodenya. Copas kode kode itu di posting anda (Letaknya terserah anda) dan dan tekan encode,simsalabim...tulisan kode html akan muncul seperti layaknya tulisan biasa. Saya mau memberikantahukan anda karena saya juga pernah mengalami pahitnya tidak bisa menulis kdoe html di dalam postingan sendiri. Layanan ini juga gratis, tidak perlu registrasi. Ini contoh kode html hasil encodenya....

</a>

Anda tinggal mengcopas kode hasil encodenya saja, tidak akan pernah ada tulisan this tag is not allowed dan sebagainya dari blogger.

Bisa juga dengan cara seperti ini :

Oke, kita lanjutkan langkah pemasangan tombol Encode HTML.
Langkah pertama install dulu GreaseMonkey. Setelah install restart firefox anda.
Langkah kedua adalah install javascript berikut, klik disini. Setelah itu tekan tombol install. Keluar dari firefox dan buka kembali browser firefox anda, dan masuk ke dasbor blogger anda dan lihat pada halaman poting secara otomatis akan ada tombol HTML Encode. Seperti gambar dibawah ini..

Langkah ketiga adalah blok kode HTML yang akan di Encode, setelah itu klik tombol HTML ENCODE, kode HTML akan otomatis berubah. Gimana…gampang toh??. Ataukan ada yang lebih mudah, silahkan menambahkan. Terima kasih

»» READMORE...

Labels