Masih Banyak Yang Harus Kamu Pelajari: Blog

Tampilkan postingan dengan label Blog. Tampilkan semua postingan

Rabu, 25 Januari 2012

Cara mengganti Font postingan di blog anda

Mungkin anda bosan dengan tampilan font di blog anda atau font anda terlalu menghimpit sehingga sulit dibaca, Kami punya solusinya, Oke langsung saja kali ini sharing tentang bagaimana mengganti jenis font pada postingan anda (deskripsi)

Berikut ini Cara mengganti/mengubah jenis huruf postingan di blog Anda:

1.Login ke Blogger Anda.

2.Klik Bagian Rancangan dan klik "Edit HTML".

3.Kemudian cari kode seperti di bawah ini:
.post-body {

margin:0 0 .75em;
line-height:1.6em;

Setelah ketemu kemudian sisipkan kode font-family:verdana; tepat di bawah kode .post-body {, sehingga nanti hasilnya menjadi seperti ini:

.post-body {
font-family:verdana;
margin:0 0 .75em;
line-height:1.6em;

Anda juga bisa mengubah jenis huruf yang ada di sidebar blog dengan menambahkan kode jenis huruf seperti di atas.

4.Setelah itu klik SIMPAN.

Hasilnya dapat dilihat di postingan kami... disini kami menggunakan font verdana jika anda suka lakukan cara diatas !

Sumber : http://www.masrahmat.com/2011/10/cara-mengganti-jenis-font-postingan-di.html

Kamis, 10 November 2011

Link Warna Warni

Nama judulnya lucu ya "link Warna Warni" maksdunya adalah teks link anda akan berubah warna jika Teks link tersebut di lewati oleh mouse (mouse over), nah menarik bukan, cara nya sangat mudah, maksudnya mudah karena sobat hanya tinggal meng-copy code di bawah ini dan tampatkan tepat di bawah tag <body> atau tepat diatas tag </body>

<script src="http://marewainfo.googlecode.com/files/link_pelangi.js">

Preview nya anda bisa lihat pada pada halaman ini, coba arah kan mouse anda ke TULISAN INI.
Nah Save Template anda dan lihat hasilnya.

Jumat, 04 November 2011

cara menampilkan widget di halaman tertentu

Untuk memasangnya ikuti langkah dibawah ini.

Masuk ke blogger acount anda, dan pilih Dashboard >> layout >> Edit html dan sebelumnya anda centang Expand Widget Templates.

Lalu cari kode dibawah ini:

<b:widget id='HTML1' locked='false' title='Shoutbox' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

NB:
Kata shoutbox yang bercetak tebal diatas menandakan title sidebar anda jadi harus disesuaikan

Jika Anda ingin menampilkan Shoutbox pada halaman depan saja maka tambahkan kode berwarnahijau diatas,

Berikut ini Tag lain yang bisa digunakan:

Untuk menampilkan widget pada homepage / halaman depan saja.

<b:if cond='data:blog.pageType == "index"'>

Untuk menampilkan widget pada halaman archive saja.

<b:if cond='data:blog.pageType == "archive"'>

Untuk menampilkan widget pada halaman artikel saja.

<b:if cond='data:blog.pageType == "item"'>

hanya menampilkan widget pada halaman tertentu saja. Ubah [masukkan URL] dengan halaman pada blog kamu yg widget yg kamu inginkan muncul.

<b:if cond="[masukkan URL]" == data:blog.url'>

Selain Tag diatas, kita juga dapat menampilan kebalikannya.
Caranya, ubah tanda = (samadengan) tang pertama dengan tanda ! (seru)

Misalnya, saya ingin menampilkan widget pada halaman selain homepage, maka kode yg digunakan :

<b:if cond='data:blog.pageType != "index"'>

Minggu, 16 Oktober 2011

Cara membuat link berkedip ketika kursor mouse di arahkan

Maksud judul diatas adalah jika sobat menyorot link maka link tersebut akan berkedi-kedip.
Jika sobat ingin mencoba
Silahkan ikuti langkah-langkah berikut ini :

Login ke Blogger klik Rancangan klik Edit HTML
Silahkan cari kode </head> di dalam template sobat.
Jika sudah ketemu tambahkan kode berikut ini sebelum kode </head>

<style>a:hover { color:#0000ff; text-decoration:blink; border-bottom:1px dotted #0000ff; }</style>

NB : kode color:#0000ff; adalah menyatakan warna link tersebut dan kode text-decoration:blink; menyatakan link akan berkedip ketika disorot cursor, kode border-bottom:1px dotted #0000ff; adalah warna garis bawahnya
Silahkan sobat variasikan sesuai keinginan.
Jika sudah selesai klik SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

Cara membuat Link terbuka Otomatis ketika kursor mouse melintas

Link yang saya bahas disini tidak jauh berbeda dengan link-link yang lain, yang membedakan link ini adalah link ini tidak perlu di klik untuk membukanya, kita hanya perlu mengarahkan mouse ke link tersebut maka secara otomatis linknya akan terbuka sendiri.
Kelemahan dari link ini adalah link ini tidak bisa membuka pada windows baru meskipun diberikan perintah target="_blank" maupun target="_new" sehingga menyebabkan halaman blog akan tertimpa halaman yang ada dalam link tersebut.

Jika sudah tahu sekarang untuk membuat link terbuka secara otomatis sobat cukup membuat kode seperti di bawah ini:

<a href="http://share-plus.blogspot.com/" onmouseover="window.location=this.href">Share Plus</a>

Ganti kode yang berwarna biru.

Senin, 12 September 2011

Cara Membuat Read More / Baca Selengkapnya

Biasanya postingan terbaru akan ditampilkan dihalaman utama blog. Namun jika postingan terlalu panjang maka hal tersebut akan membuat penuh halaman utama. Jika ingin supaya postingan yang ditampilkan dihalaman utamacuma abstraksinya saja kemudian ada sebuah link Read More / Baca Selengkapnya untuk melihat selengkapnya maka ikutilah langkah-langkah berikut:
1. Buka menu Layout kemudian pilih Edit HTML.

2. Kasih tanda cek (centang) pada cekbox "expand widget template"

3. Cari kode berikut di Template blog kamu (tempatnya kira-kira pada 1/4 bagian bawah kode hmtl) :

kotak "expand widget templateny" dicentang dulu.

kalo ketemu maka dibawahnya ada kode ini :

4. Kalau sudah ketemu, Ganti kode yang ini <p><data:post.body/></p> menjadi seperti 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>
</b:if>

Tulisan "Read More....." itu bisa diubah, misalnya jadi "Baca Selengkapnya".

5. Simpan hasil pengeditan.
6. Kemudian pilih menu Setting lalu pilih Formatting
7. Pada kotak Post Template isikan kode berikut:

8. Kemudian Simpan.

9. Ketika memposting, disana ada 2 tab pilihan, yang "Compose" dan "Edit Html", pilih Yang "Edit HTML", Maka secara otomatis akan tampak kode seperti berikut :

10. Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> dan </span>

11. Selesai