Cara menggunakan Web Fonts

Cara membuat blog lebih kreatif adalah incaran semua blogger, agar pengunjung lebih bertahan lebih lama, disamping dengan memasang jam, silahkan baca panduan memasukkan jam dinding ke dalam blog. anda juga bisa menggunakan cara ini, yaitu mengganti model huruf, biar kelihatan paling beda degnan blog lain. tentu hal ini tidak menambah ranking blog naik atau lebih berseo hanya aksesori belaka. Tapi tentu kelihatannya akan lebih keren Lho.

Dalam template blogspot, google web fonts otomatis dapat di load melalui Rancangan (Design)→“Perancang Template” Untuk dapat menggunakan fitur ini, template blog Anda harus memiliki elemen variable definitions, contoh:

   <Variable name="bodyfont" description="Body Text Font"
type="font" default="normal normal 80% Georgia, Serif" 

value="normal normal 80% Georgia, Serif">
<Variable name="outerfont" description="Outer Text Font"
type="font" default="normal normal 100% Georgia, Serif" 

value="normal normal 100% Georgia, Serif">

Bagaimana jika tanpa variable definitions?
Silakan kunjungi WebFont Loader di Google Font API (Application Programming Interface) untuk mengetahui keterangan selengkapnya. Selanjutnya, masukkan script berikut di atas </head>.

<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Tangerine', 'Cantarell' ] }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
</script>

Ganti kode script yang berwarna merah dengan google web fonts yang Anda gunakan.

Kemudian tambahkan CSS (Cascading Style Sheet) seperti yang tampak di bawah ini, bermanfaat apabila koneksi sedang ‘lemot’. Letakkan di atas ]]></b:skin>.

      .wf-loading p {
font-family: serif;
}
.wf-inactive p {
font-family: serif;
}
.wf-active p {
font-family: 'Tangerine', serif;
}
.wf-loading p {
font-family: serif;
font-size: 16px;
}
.wf-inactive h1 {
font-family: serif;
font-size: 16px;
}
.wf-active h1 {
font-family: 'Cantarell', serif;
font-size: 16px;
}

1. Ganti kode yang berwarna merah dengan google web fonts yang Anda gunakan.
2. Jika script tidak aktif (koneksi ‘lemot’) maka akan ditampilkan font ‘serif’ dengan ukuran 16px.

Anda pun dapat mengganti nilai dari CSS tersebut, sesuai dengan keinginan Anda.

Tutorial Mengganti Pavicon Sesuai Selera

Seorang blogger biasanya ingin memberikan inisial atau tampil beda dengan blog lainnya, dan untuk memberikan panorama tersendiri hal ini dirasa sangat penting, seperti memasang jam atau tampil dengan tulisan kapital bergaya koran dan lain sebagainya. Termasuk juga mengganti pavicon (icon)sesuai selera kita sendiri, kali ini tsalma tutorial akan memberikan triknya. Tidak sulit dan sangan tsederhana. Caranya buatlah gambar atau icon sesuai dengan selera anda, kalau di blog ini memakai simbol “w” yang penting ukurannya kecil maksimal 32px x 32px supaya loading blog tidak lemot. Lalu ikuti langkah berikut: 

1. Buat gambar di photoshop atau office manager dll
2. Upload gambar tersebut di www.photobucket.com (kalau belum punya akun photobucket, silahkan daftar terlebih dahulu, gratis aja kok)
3. Kalau sudah ambil gambar link-nya. Kira kira seperti ini modelnya:

http://i658.photobucket.com/albums/uu305/mwiyono/dddd.jpg

4. Selanjutnya kita akan meletakkan kode tersebut dalam blog dengan cara sebagai berikut
5. Login dengan akun blogger anda
6. Klik Rancangan/Layout
7. Kemudian klik Edit HTML
8. Centang Expand Widget Template
9. Cari kode ]]></b:skin> anda masih ingat supaaya muda carilah pakai ctrl-F
10. Kalau sudah ketemu masukkan kode berikut, di bawah kode ]]></b:skin>

<link href='http://i658.photobucket.com/albums/uu305/mwiyono/dddd.jpg.' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Ganti URL yang berwarna Biru dengan URL gambar Anda.
11. Terakhir Save/Simpan Template. Selesai dan silahkan lihat hasilnya.
Atau bisa juga dengan cara yang lebih simpel dengan cara berikut:
1. Login dengan akun blogger anda
2. Klik rancangan
3. Cari kode </head>
4. Copy kode berikut ini, dan letakkan persis di atas kode </head>

<link href='http://i658.photobucket.com/albums/uu305/mwiyono/dddd.jpg' rel='shortcut icon'/>

ganti kode yang di blocked itu, dengan kode dari photobucket anda, kode tersebut adalah kode blog ini

Lalau save, saya yakin anda adalah orang yang suka tantangan, silahkan laksanakan (165)

Tampil Posting Seksi dengan Readmore

Bagi seorang blogger menunjukkan postingan kerennya tentu hal yang lumrah dan biasa, untuk meningkatkan minat baca para visitor. Tiara Blog tutorial akan memberikan informasi cara mudah membuat readmore di template blogger. Kalau di tempalte hasil download atau template gratisan mungkin aga berbeda. Fokus tiara tutorial adalah membahas pernak pernik blog dengan menggunakan template baru dari blogger. Kalau ada postingan yang terlanjur tidak memakai readmore, silahkan baca re-edit posting terlebih dahulu

Sebenarnya Tiara tutorial blog juga meyakini bahwa, asalkan kita pandai untuk men-setting tampilan template, dan memberikan pernak pernik yang telah tersedia, seperti recent post, recent comment, update twitter dan lain lainnya, saya kira sudah banyak tersedia.

Langkah cara membuat read more adalah sebagai berikut:
1. Masuk dengan akun blogger anda
2. Kemudian klik New Posting
3. pilih Edit HTML
Kemudian langkah selanjutnya, penggal kata yang ingin anda perlihatkan kepada pembaca dengan menuliskan kode berikut :
<!--more-->
Setelah itu penggalan kalimat selanjutnya bisa anda letakkan di bawahnya contoh

kemudian diantara penggalan kata dengan memasukkan kode di bawah ini:

tulisan sebelum kode

Bagi seorang blogger menunjukkan postingan kerennya tentu hal yang lumrah dan biasa, untuk meningkatkan minat baca para visitor. Tiara Blog tutorial akan memberikan informasi cara mudah membuat readmore di template blogger. Kalau di tempalte hasil download atau template gratisan mungkin aga berbeda. Fokus tiara tutorial adalah membahas pernak pernik blog dengan menggunakan template baru dari blogger.

<!--more-->

Tulisan setelah kode

Sebenarnya Tiara tutorial blog juga meyakini bahwa, asalkan kita pandai untuk men-setting tampilan template, dan memberikan pernak pernik yang telah tersedia, seperti recent post, recent comment, update twitter dan lain lainnya, saya kira sudah banyak tersedia.

hasilnya adalah seperti ini:

Bagi seorang blogger menunjukkan postingan kerennya tentu hal yang lumrah dan biasa, untuk meningkatkan minat baca para visitor. Tiara Blog tutorial akan memberikan informasi cara mudah membuat readmore di template blogger. Kalau di tempalte hasil download atau template gratisan mungkin aga berbeda. Fokus tiara tutorial adalah membahas pernak pernik blog dengan menggunakan template baru dari blogger.

Tutorial Promosi Posting dengan Relasi Posting

Blogger kreatif, biasanya suka sekali menggoda pembacanya untuk membaca postingannya satu persatu, dengan memberikan link, dan juga dengan cara promosi posting melalui relasi posting. Hal ini sah sah saja, karena degnan demikian lebih memudahkan untuk mencetak kader blogger yang handal he he he (kaya orang hebat aja). Okay, yang terpenting adalah anda bisa promosi dengan blog, dan ketik pengunjugn datang, rekayasalah sedemikian rupa agar pengunjung tersebut berlama lama dengan blog anda, mau tahu caranya, diantara cara yang paling efektif adalah dengan menggunakan relasi posting, apalagi kalau blog bisnis.

Langkah yang ditempuh adalah sebagai berikut, seperti biasa yaitu

1. Masuk dengan akun blogger anda
2. pada menu dashbor Klik desain Layout lalu Klik Edit HTML
3. Klik Expand widget Template adanya di atas samping kiri
4. Lalu anda cari Kode ini :
<data:post.body></data:post.body>

kalau pingin cepat tinggal ctrl+f dan masukkan kode <data:post.body></data:post.body> pasti langsung ketemu deh
5. Copy kode dibawah ini, dan paste tepat dibawah kode di atas

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<!-- ****Related Articles by Labels - Take Two*****-->


<div class='widget-content'>
<h3>Related Posts by Categories :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

6. Bila sudah, Klik Save Template
kalau takut error, sebelum di paste, back up terlebih dahulu template anda.

kemudian sebagai penyempurna selera anda silahkan anda merubah angka tersebut, sesuai dengan kebutuhan anda.

Cobalah, jangan takut untuk mencoba.

Tutorial Membuat Huruf Capital di Blogspot

B

logger membuat tulisan besar bergaya koran seperti ini, memang tidak berpengaruh terhadap traffick blog anda, tetapi yang namanya blogger itu suka yang aneh aneh dan unik unik kalau memang tulisan ini termasuk unik. untuk membuat gaya seperti ini tidak repot seperti membuat script warna  tapi cukup simple dan tidak bertele tele. silahkan ikuti langkah langkah dibawah ini:

1. Login dengan blogger eccount anda
2. Pilih setting, kemudian klik Edit HTML.demi keamanan template silahkan download, atau kalau sudah yakin ya langsung aja. Tapi saya tetap sarankan di download dulu, kali aja nanti ditengah edit terus lampu mati. yups selanjutnya

copas kode berikut ini
/* Huruf Capita ala Koran
-------------------------- */

.capital {

float:left;

color: #000000;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}

float: letaknya
color: warnanya, untuk mencari warna silahkan klik di sini
line-height: Jarak baris
padding-top: Jarak dengan judul
padding-right: Jarak dengan teks disekelilingnya
font-family: Jenis huruf yang akan di pakai
font-size: Ukuran besar kecilnya huruf
}

cari kode ]]></b:skin> 
untuk mencarinya biar mudah pakai ctrl+f kudian tulis ]]></b:skin>  di jendelanya langsung akan mengarah ke yang di maksud. Kemudian copy paste kode di atas di atas kode]]></b:skin> 
Jadi kira kira nanti akan terlihat seperti ini

.capital {

float:left;

color: #000000;

line-height:80px;

padding-top:1px;

padding-right:5px;

font-family:times;

font-size:100px;

}

]]></b:skin> 

kemudian SIMPAN

cara pemakaian kode tersebut adalah sebagai berikut:, anak anak perhatikan ya... he he he

<span class="capital"> T </span> iara blog tutorial ingin memberikan sedikit hasil yang pernah di baca dan dipraktekkan dan ternyata benar adanya maka hasilnya adalah sebagai berikut

T

iara blog tutorial ingin memberikan sedikit hasil yang pernah di baca dan dipraktekkan dan ternyata benar adanya maka hasilnya adalah sebagai berikut, tapi blog ini tidak menggunakan size-font: 100px

Tutorial Re - Edit isi Postingan di Blogspot

Blogger ingin meng-edit isi konten?? Tentu itu pasti, begitulah jawabannya, karena mana ada di dunia ini orang yang gak pernah salah, termasuk blogger juga pernah mengalami kesalahan dalam menampilkan postinganyan. Setelah kita membaca postingan yang lalu dengan judul ayo buat blog dengan subdomain blogspot, kalau sudah dan anda ingin meng-editnya maka giliran re-edit isi postingan di blogspot yang harus dibaca setiap blogger pemula seperti saya ini.

Oiya hanya sekedar mengingatkan, jangan mentang mentang bisa diedit kemudian membuat konten seenaknya dengan alasan semua konten bisa diedit dengan mudah, karena postingan yang di edit akan mengalami track edit juga oleh mbah google. Karena itu Tiara tutrial blogspot mengingatkan buatlah konten yang benar benar fixz sebelum di publikasikan, periksa kemabli ejaan setiap jengkal kata yang ada pakai di dalam postingan tersebut. Tapi kalau memang terpaksa ya apa boleh buat.