Pr 10 Coy

Banyak blogger yang tidak merasa nyaman dengan font yang formal dan ingin menggantinya dengan font yang lebih menarik. Sebenarnya ini sangat mudah jika template blog anda dilengkapi fungsi variabel untuk mengganti font. Lalu bagaimana jika template blog anda tidak dilengkapi dengan variabel itu?

Kebanyakan template hasil download tidak bisa diedit di perancang template. Jadi untuk mengganti fontnya, anda perlu melakukan hal-hal sederhana berikut :

Memilih Jenis Font

• Buka halaman http://www.google.com/webfonts/
• Jika anda sudah menemukan huruf-huruf yang anda sukai tinggal klik Add to Collection pada bagian kanan bawah sampel huruf. Silahkan pilih lebih dari satu huruf jika diperlukan

• Jika anda sudah selesai memilih huruf silahkan klik Use

• Anda akan dialihkan ke halaman baru. Pada halaman baru ada 2 hal yang harus anda lakukan

• Pertama, pilih jenis ketebalan huruf yang diinginkan. Semakin banyak variasinya, maka akan semakin berat loading halaman anda nantinya

• Kedua, copy kode yang diberikan untuk dipasang di blog

 

Menambahkan Font Pada Blog

• Jika sudah menyelesaikan tahapan di atas sekarang masuk ke akun blogger anda.
• Pilih menu Template > Edit HTML
• Cari kode  </b:skin> dan paste kode yang tadi anda copy dibawahnya
• Jangan lupa untuk menambahkan kode / sebelum penutup > pada kode tersebut. Hasilnya akan terlihat seperti contoh di bawah

<link href='http://fonts.googleapis.com/css?family=Cinzel+Decorative:400,700,900|Julius+Sans+One|Cherry+Swash:400,700' rel='stylesheet' type='text/css' />

• Simpan Template

Menggunakan Font

Sekarang setelah selesai melakukan langkah langkah sebelumnya anda tinggal memakai font itu. Contohnya seperti di bawah ini :

#outer-wrapper {
  margin:0 auto;
  padding:0px;
  text-align:$startSide;
 font-family:"Cinzel Decorative";
 font-size:13px;
margin:10px auto;
  }

#header { max-width: 450px; text-align: left; color:#fff;float: left; font-weight: 700; font-family: Cinzel Decorative; }

Sekian tutorial saya kali ini mohon maaf bila ada kekurangan, 

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan teks atau kode script (Gambar atau Video) disini

 <br>
</div>
</div>
</div></div>

Spoiler:

Sekian kurang lebihnya mohon maaf, jika anda berkenan tolong follow blog ini, anda juga bisa request Software dan Tutorial ke saya dengan cara like dan comment di FP blog ini.

 

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
Dan
<b:include name='quickedit'/>

<div style='overflow:auto; width:ancho; height:250px;'>

</div>

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<div style='overflow:auto; width:ancho; height:250px;'>
    <ul>
    <b:loop values='data:labels' var='label'>
      <li>
        <b:if cond='data:blog.url == data:label.url'>
          <span expr:dir='data:blog.languageDirection'>
            <data:label.name/>
          </span>
        <b:else/>
          <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
            <data:label.name/>
          </a>
        </b:if>
        <span dir='ltr'>  <a class='labelfeed-link' expr:href='&quot;http://clwolvi.blogspot.com/feeds/posts/default/-/&quot; + data:label.name' style='margin-left:10px;' title='Subscribe'/></span>
      </li>
    </b:loop>
    </ul>
    <b:include name='quickedit'/>
  </div></div>
</b:includable>
</b:widget>

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog Ini' type='BlogArchive'>

<div style='overflow:auto; width:ancho; height:250px;'>

</div>

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog Ini' type='BlogArchive'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

 <div style='overflow:auto; width:ancho; height:250px;'>
<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>

<b:if cond='data:style == &quot;HIERARCHY&quot;'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == &quot;FLAT&quot;'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == &quot;MENU&quot;'>

<b:include data='data' name='menu'/>

</b:if>

</div>

</div></div>

<b:include name='quickedit'/>

1. Klik rancangan --> Edit html
2. Letakkan script efek di atas kode </body>
3. Klik Save

1. Klik rancangan --> Elemen laman --> Tambah Gadget --> HTML/Javascript
2. Masukkan script efek di dalam kotak yang di sediakan
3. Klik save dan lihat hasilnya.

1. Ke Template
2. HTML
3. Edit HTML
4. Lalu Code ]]></b:skin>  , untuk mempermudahnya kalian bisa menekan CTRL+F pada Keyboard
5. Jika Sudah ketemu pastekan code di bawah ini tepat di atas nya

html {
  height: 100%;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbABsylg6YQ9lzjho71JljWCke-oPFFeI3fmTMBVRFerwBnXCUHVR7X0vp6WjD39g1oFja0DAV0-CTSxVBuLzpkPu-TtkTlaHLhLoMWFTQplBEhkR3RpB_wVTR9aPc2-avpCuNfuA6KQ/s1600/under-maintenance.gif) no-repeat center 50%;
  margin: 0;
}
body {
  display: none;
}

 

<script type="text/javascript" src="http://ahmad-rifai-tools.googlecode.com/files/salju-blog.ahmadrifai.net.js" /></script>

<script type="text/javascript" src="http://ahmad-rifai-tools.googlecode.com/files/salju-blog.ahmadrifai.net.js" /></script>
<script type="text/javascript">

snowStorm.snowColor = '#99ccff';

snowStorm.flakesMaxActive = 96;
snowStorm.useTwinkleEffect = true;
</script>

a:hover {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNIjEs0Bce7KLWPPIi5BG9WJNbw0y0BIEhL4F1NKq3vZOJ8GoRsU47HNHqJ80DZ3_i9-LI5FJf1_96WQ6avvIJlgm9uFDCKJQDZ8Ev6Al-uqlZBVuWeJl7yv7hotYp2L6cQCQrY-FAew/s1600/stars.gif);}