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.

Cara Buat Link Siluman

Informasi untuk para blogger kali ini, sangat spektakuler. Karena tutorial yang satu ini pastinya baru bagi Tiara sendiri. Yaitu link siluman. Mengapa kok ambil namanya ink siluman, karena link tersebut tidak kelihatan. Biasanya setiap blogger sebelum klik selalu melihat link tersebut diarahkan kemana, kalau memang sesuai dengan tujuan baru di klik.

Link siluman ini, membuat apa saja yang kita beri link menjadi tidak kelihatan, link tersebut mau diarahkan kemana. Makanya saya namakan link siluman. Misalnya lihat kata belajar seo di bawah ini, maka anda tidak akan bisa mebebak. Sebenarnya apabila di klik link tersebut saya arahkan kemana. Coba saja

Dari berbagai cara untuk menaikkan traffik, maka seorang blogger menjadi sukses. Konon untuk menaikkan trafick blog, maka seorang blogger harus menguasai SEO. Caranya silahkan anda klik Belajar Seo

Nah untuk mendapatkan caranya, langkah utamanya adalah dengan meng-copy kode di bawah ini.
 

<a target="_blank" onclick="window.open('http://tsalma-blogtutorial.blogspot.com'); return false;" style="cursor:pointer;">tutorial blog</a>

Gantilah. Yang berwarna sesuai dengan arah link yang anda maksud, sedangkan ‘tutorial blog” adalah anchor text yang terlihat.

Selamat mencoba kawan

Tutorial Kreatif membuat Manu Horizontal

Template blogger tidak menyediakan menu horizontal karena itu banyak sekali para blogger share tentang menu horizontal ini, termasuk tsalma tutorial blog juga kali ini akan share tentang menu horizontal. Tujuan utama menu ini adalah agar para pembaca langsung tertuju kepada menu blog yang tersedia. Biasanya menu ini sangat berguna bagi blog untuk mengelompokkan kategori postingan yang sejenis.

Caranya dalah sebagai berikut, tapi jangan kaget karena agak panjang kodenya, langkah yang harus di tempuh adalah sebagai berikut

1. Login dengan akun blogger anda
2. Cari setting kemudian klik Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode di bawah ini, diatas kode ]]></b:skin>


/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;

untuk huruf yang di blocked itu, silahkan diganti sesuai dengan selera anda. OK
sekarang lanjutkan dengan mencari kode berikut ini dalam template kamu, di edit HTML.

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1" showaddelement="no">
<b:widget id="Header1" locked="true" title="test
    (Header)" type="Header">
sampai
</b:widget>
</b:section></div>

Kalau sudah ketemu jangan hapus, biarin aja sampai tua he he he, lanjutakan langkahmu dengan, yaitu Copy kode berikut dan letakkan dibawah kode yang saya tandai merah atau seprti di atas.

<div id="bg_nav">

<div id="navleft">
<div id="nav">
<ul>
<li><a href="http://alamat_blog_kamu.blogspot.com/">home</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
<li><a href="http://link_yang_dituju/">Add Link</a></li>
</ul>
</div>
</div>

<div id="navright">

<form action="http://Alamat_Blog_Kamu.blogspot.com/search" id="searchform" method="get" name="searchform">
<input id="s" name="q" type="text" value="" /> <input id="searchsubmit" type="submit" value="Cari" /></form>

</div>

</div>

Jangan lupa simpan

Tutorial Pasang Adsense di Bawah Header

Setelah kita daftar blog di bawah naungan domain blogspot, maka sudah waktunya kita pasang Adsense (iklan), Adsense adalah salah satu mesin penghasil dollar, apalagi kalau adsense google, ingin tahu lihat sejenak di blog review atau disamping blog ini. Bagi blogger memasang adsense adalah sebuah keharusan biar kita mendapat sedikit pemasukan. Meski tidak semudah membalikkan telapak tangan, untuk daftar silahkan klik adsense, tapi untuk adsense by google tidak support untuk blog yang berbahasa Indonesia, bedoa. Semoga bahasa Indonesia support di hari hari yang akan datang. Cara memasangya sebaiknya letakkan dit empat yang strategis, tempat yang diakui paling strategis adalah di bawah header, meski bukan aturan pakem. 

Cara memasang adsense di bawah header adalah dengan cara menambahkan elemen, kalau memang template kita gak ada, tapi kalau template kita sudah ada ya tinggal add gadget/tambahkan gadget aja. Ok. Anggap aja gak ada elemen di bawah header, maka caranya adalah sebagai berikut:

1. klik tab "rancangan" atau design pada halaman dashbor
2. Klik Edit HTML/pengaturan HTML
3. Backup dulu untuk nyari aman, barangkali ada error
4. Carilah kode berikut, supaya cepat pakai ctrl+f  kalau udah ketemu kode seperti ini:
<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="1"showaddelement="no">

Gantilah angka 1 menjadi 2 dan "no" diganti menjadi "yes" kemudian simpan template anda, setelah itu lihat hasilnya. Untuk melihatnya apakah sudah sukses atau belum, caranya

Pada halaman Dashbor klik pengaturan/Design, terus elemen maka anda akan menemukan tambahan halaman widget. Gampang kan?, silahkan coba sendiri. Ok