Home » » Cara Merubah Judul Blog (Header) Dengan Teks Keren

Cara Merubah Judul Blog (Header) Dengan Teks Keren

Written By amieng cirata on Senin, 29 April 2013 | 17.09

Merubah judul blog dengan gambar atau animasi  memang terlihat menarik tapi sedikit memperlambat loading blog apalagi kalau gambarnya berukuran besar.
Nah mungkin artikel  kali ini cocok buat anda yang ingin merubah judul blog biar terlihat menarik tanpa menambah beban loading blog.

Contohnya seperti di bawah ini

Cara Merubah Judul Blog (Header) Dengan Teks Keren

Kegunaannya
  • mempercantik tampilan header blog tanpa menambah beban loading blog

Cara membuatnya

  1. Loggin ke blogger
  2. Masuk ke dasbor
  3. Klik "template"
  4. Cari kode ini </b:skin>
  5. kalau sudah ketemu, copas kode di bawah ini lalu simpan di atas kode </b:skin>

  6. @font-face {
    font-family: "zerro";
    src: url(
    https://sites.google.com/site/amiengblog/kumpulan-fonts/zero.ttf) format("truetype");
    }

  7. Cari lagi kode yang seperti di bawah ini 

  8. #header.title { 

    Atau kode :

    .header h1 { font: $(header.font);

  9. Kalau sudah ketemu di antara 2 kode di atas, copas kode di bawah ini lalu simpan  setelah kode #header.title {  atau kode .header h1 { font: $(header.font);

  10. font: 40px/20px zerro;

    Tapi kalau tidak di temukan 2 kode di atas, bikin sendiri aja sob seperti contoh di bawah ini.
    biar enggak ribet, copas aja kode di bawah ini lalu simpan di atas kode </b:skin>

    #header .title { 
    width: 400px; 
    margin: 0 auto; 
    float: left; 
    color: #8c6c0c; 
    font: 40px/20px zerro; 
    text-align: left; 
    text-shadow: 0 10px 12px #1D2301; 
    border: 10px solid rgba(255, 255, 255, 0.01); 
    border-top-color: rgba(255, 255, 255, 0.01); 
    border-bottom-color: rgba(255, 255, 255, 0.01); 
    }

    Keterangan :;
    width: 400px; : untuk merubah lebar teks
    color: #8c6c0c; : umtuk merubah warna teks
    text-align: left : untuk merubah posisi teks
    text-shadow: 0 10px 12px #1D2301;  : untuk merubah warna shadow teks
    border: 10px solid rgba(255, 255, 255, 0.01); 
    border-top-color: rgba(255, 255, 255, 0.01); 
    border-bottom-color: rgba(255, 255, 255, 0.01);  : kode perintah untuk membuat teks shadow/bayangan

  11. Cukup sekian dulu, bila ada yang kurang di mengerti jangan sungkan-sungkan untuk bertanya

Bila sobat ingin merubah teksnya dengan teks kepunyaan sobat, sobat cukup mengganti kode yang berwarna merah di atas dengan kode teks kepunyaan sobat.
Lihat caranya DISINI untuk membuat kode teks sendiri dari komputer sobat.

Bila sobat enggak mau ribet, DCC udah menyediakan 8 kode teks di bawah ini :

https://sites.google.com/site/amiengblog/kumpulan-fonts/KASNAKE.TTF

https://sites.google.com/site/amiengblog/kumpulan-fonts/Tarzan__.ttf

https://sites.google.com/site/amiengblog/kumpulan-fonts/ALHAMBRA.TTF

https://sites.google.com/site/amiengblog/kumpulan-fonts/JFJunRoc.ttf

https://sites.google.com/site/amiengblog/kumpulan-fonts/tatu_font.ttf

https://sites.google.com/site/amiengblog/kumpulan-fonts/Blazed.ttf

https://sites.google.com/site/amiengblog/kumpulan-fonts/BRAD.TTF

https://sites.google.com/site/amiengblog/kumpulan-fonts/Patriot.ttf


Share this article :
Comments
8 Comments

8 komentar:

  1. makasih ka infonya bermanfaat...jangan lupa kunjung balik http://ilyas175.blogspot.com

    BalasHapus
    Balasan
    1. oke sip, mksih ya atas kunjungannya

      Hapus
  2. gan, kok, judul blognya kalau didekati kursor nggak ada link homepagenya

    BalasHapus
  3. gan,, mhon maaf sblmnya,, sy mau tanya, cara ganti gambar header bawaan blog gmn ya caranya,, (tapi di tata letak tidak ada widget headernya) nyari2 di mbah google blm ada,, kbnykn yg ada widget header di tata letaknya... bingung sayah... boleh kirim jwbnnya ksini: aulia.izzatunnisa03@gmail.com
    please help me... :(

    BalasHapus
  4. Artikelnya keren gan, visit balik hearier.blogspot.com,

    BalasHapus
  5. Terimakasih banyak gan, sangat bermanfaat sekali tutorialnya..

    BalasHapus
  6. makasih yah atas informasinya, jangan lupa kunjungi blog aku juga.
    QUEENXXX92

    BalasHapus

 

Support : Copyright © 2013. DUNIA CORAT-CORET - All Rights Reserved
powered by Blogger