Cara Mengganti dan Menambah Style Font di Template Blogger ...

Hai sobat bloggers, kembali kita ketemu lagi di Blog Trik dan Tips "tak ada blog jika tak ada trik"....he3. Mungkin anda sudah tau apa itu font, font adalah jenis atau gaya tulisan. Pada blogspot (blogger), anda bisa mengganti font pada template anda, namun jumlah jenis font sangat terbatas. Beberapa jenis font yang dimiliki blogger yaitu arial, courier, georgia, lucinda grande, times, trebuchet, verdana dan webdings. Jenis font ini kadang tidak sesuai dengan keinginan anda. Ada pasti ini memiliki font dengan gaya blog anda sendiri yang lebih stylis atau elegan. Untuk itu saya akan memberikan trik dan tips bagaimana kita bisa memperoleh bermacam-macam font untuk digunakan ditemplate anda. Simaklah tutorial berikut ini:

Buka Situs/Klik link ini : Google web fonts
2. Silahkan cari jenis font yang anda inginkan, tambahkan beberapa font dengan mengklik tombol Add to Collection.
3. Klik tombol Use disebelah kanan bawah browser

4. Kemudian kopi kode dari Google Font
(kodenya seperti dibawah ini, kode ini hanya contoh saja tidak perlu anda copy)

<link href='http://fonts.googleapis.com/css?family=Risque|Just+Me+Again+Down+Here|Mouse+Memoirs' rel='stylesheet' type='text/css'>

5. Pada template anda carilah kode seperti ini dibawah ini:
<![CDATA[/*

6. Paste kode yang dikopi dari Google Web Font diatas kode <![CDATA[/*
7. Tambahkan kode slash "/" yang berwarna merah pada akhir kode yang dipaste tadi sehingga terlihat seperti dibawah ini:

<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'/>

8. Sekarang anda tinggal mengganti font pada template anda. Saya akan memberikan contoh bagi anda untuk mengganti font header di template anda, caranya seperti berikut ini:
9. Carilah kode #header h1 atau h2.postTitle {
10. Setelah itu ganti font family yang tadi anda pilih, contohnya seperti dibawah ini:
Kode awal pada template yang belum dirubah

#header h1{color:#00008B;font-size:26px;font-family: Arial ;font-weight:700;text-decoration:nnne;margin:0;padding:10px 0 0 10px}

Kode setelah dirubah saya

#header h1{font:normal 35px 'Just Me Again Down Here', cursive;;line-height:1.2em;color:#f1c822;text-transform:none;letter-spacing:.1em;text-shadow:3px 4px 3px #000;margin:0 auto;padding:2px 5px .15em} 

Begitulah caranya kita menambahkan font baru ke template, bagaimana tertarik untuk membuatnya. Silahkan dicoba aja, tapi jangan lupa ikuti langkah di atas dengan baik dan ingat untuk back up template anda. Sekian dan selamat mencoba!

Tutorial Blogger

Baca Selengkapnya

Cara Membuat Headline News Di bawah Header

Untuk membuatnya tidak terlalu sulih, dengan sedikit keberanin untuk mengotak atik script template blog anda kemudian menambahkan sedikit script di beberapa tag elemen Insya Allah langsung berhasil. Untuk lebih jelasnya berikut langkah langkahnya.
Pertama masuk ke akun blogger anda
lalu KLIK Template => Edit HTML => Lanjutkan Kemudian Centang pada Expand Template Widget lalu cari kode ]]></b:skin> untuk memper cepat atau memudahkan pencarian Ctrl+F kemudian copy paste kode ini dibawah code  ]]></b:skin>

.headline-wrapper{background:url(https://lh3.googleusercontent.com/-leV22rchdzc/UAP58mLNrFI/AAAAAAAADb4/sRUlcvkSIsA/s38/headline-bg.png) repeat-x;width:950px;height:30px;margin:0 auto;padding:0 auto}
.headline{width:950px;line-height:1.4em;text-align:left;font-family:Arial;font-size:12px;color:#4f4f4f;overflow:hidden;clear:both;margin:0 auto;padding:0 auto;text-shadow: 1px 1px 1px #000}
.headline a:hover{color:#eace12;text-decoration:none}

Ganti yang berwarna ungu dengan url gambar sesuai dengan background headlines news yang anda inginkan, kemudian yang berwarna kuning boleh diganti dengan angka sesuai dengan lebar yang di inginkan.

Kemudian cari kode </head> Setelah ketemu Copy kode di bawah ini lalu pastekan sebelum atau di atas kode </head>

<script src='https://www.google.com/jsapi?key=ABQIAAAAlQIoliUVPjZwD8UDgw_U3RTUhB4JyH-ajz-fA9t4yePPPdGAfRTC_mtuh6Iq1MLEipD0I2rCi30Png' type='text/javascript'/>
<script src='http://exlorer-amran91.googlecode.com/files/HDN.js' type='text/javascript'/>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#666;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#fff;font:normal 12px Arial;}
#example1{ /*Demo 1 main container*/
width: 900px;
height: 12px;
border: 0px solid #aaa;
padding: 0px;
font:bold 12px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#60BAFA;text-decoration:none;}
#example1 a:hover {color:#fff;text-decoration:none;}
</style>

Kemudian cari kode berikut ini <b:section class='header' id='header' hingga kurang lebih seperti berikut ini : 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Your Title (Header)' type='Header'>
<b:includable id='main'>
Setelah ketemu kode seperti di atas copy kode di bawah ini kemudian pastekan pas dibawahnya berikut kodenya

<div class='headline-wrapper'>
<div class='headline'>
<div style='float:left;padding:5px 5px 5px 10px;font:bold 12px Arial;color:#aeaeae;text-transform:none;'>
Headlines News :
</div>
<div style='float:left;width:800px;padding:5px 0; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 3000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Latest Movies&quot;, &quot;http://catatandayatdi.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
</div><div style='clear:both;'/>
</div>

Ganti tulisan yang berwarna kuning dengan url Blog anda misanya url seperti blog saya : http://catatandayatdi.blogspot.com/ 
Lalu klik Simpan Template dan lihat hasilnya.

Tutorial Blogger

Baca Selengkapnya

19 Oktober 2012

Hari ini mungkin saya begitu bingung..saya sering kali berpikir bahwa kapan saya bisa menjadi anak yang berguna buat keluarga saya
bahkan di pikiran saya pernah terlintas kapan saya dapat memberikan sebuah rumah untuk Bapak dan ibu saya..tapi rasanya, itu bagi saya sungguh berat..tapi tak apalah, selama ada kemauan pasti semua dapat tercapai.
Itulah kata kata hari ini yang dapat saya katakan

Catatan Ku

Baca Selengkapnya

Menghilangkan Tulisan Tampilkan Semua Posting

Menghilangkan Tulisan Tampilkan Semua Posting – Tulisan “Tampilkan posting dengan label Tampilkan Semua Posting” akan muncul apabila kita klik pilihan Labels. Mungkin beberapa dari sobat blogger tulisan ini dianggap menggangu dan kurang menarik untuk ditampilkan dalam posting blog. Berikut ada beberapa cara untuk menghapus atau menghilangkan tulisan tersebut.  

Login akun Blogger ---> Klik Template ---> Edit HTML ---> beri tanda centang pada kotak expand widget template. Setelah itu cari kode: 

]]></b:skin> 

Tambahkan kode dibawah ini tepat diatas ]]></b:skin> 

.status-msg-wrap{ 
display:none; 
} 

Kalau tidak bisa, coba gunakan script berikut: 

.status-msg-wrap{ 
display:none; 
} 
.status-msg-body{ 
display:none; 
} 
.status-msg-border{ 
display:none; 
} 

Kemudian yang terakhir Save Template, selamat mencoba dan semoga bermanfaat bagi sobat blogger.

Tutorial Blogger

Baca Selengkapnya

11 Oktober 2012

selamat malam sahabat..
malam ini saya mau bercerita tentang apa saaja yang saya lakukan hari ini…
tapi gag jadi dechhhh…
soalnya bunyak…
tapi yang penting saya tadi bunyak  kenangan saya bersama kakek dan nenek saya ..karena saya jarang berkumpul saat matahari terbenam bersama keduanya..
yang saya sering hanya berkumpul saat malam hari,saat kami sedang nonton televisi bersama-sama..
ok itu aja yang saya tuliskan malam ini ..yang penting malam ini saya menuliskan catatan saya disini .walaupun tidak bunyak .
selamat malam dan terima kasih
GOOD NIGHT..Mimpi indah…

Catatan Ku

Baca Selengkapnya

10 Oktober 2012

Selamat malam sahabat…
saya mau menulis cerita pada hari ini
mmmm…begini..nggak tau kenapa malam ini pikiran saya nggak nyaman..sahabat tau kenapa malam ini pikiran saya nggak nyaman ..tentu nggak tau kan?? mmmm….saya kepingin menjadi kebanggaan buat keluarga ku…ku pingin membantu menyekolahkan adik ku .dan al-hamdulillah sampai saat ini kedua orang tua saya mang dapat menyenangkan hati kedua orang tua saya..saya berpikir begini ,saya sudah disekolahkan susah payah oleh bapak/ibu,pinjam uang sana pinjam sini hanya bisa menyekolahkan adik saya .tapi dalam pikiran saya saya belum bisa menjadi sesuatu yya untuk menyekolahkan saya agar dapat menjadi anak yang berguna buat keluaraga nya saat ini.
tapi ,saya tau orang tua pasti sangat bangga terhadap anaknya.apabila anak nya mau berusaha dan semangat dalam mengejar apa yang dia inginkan.
yang penting berjalan terus  tanpa henti untuk menggapai sebuah impian !!!

Catatan Ku

Baca Selengkapnya

Cara membuat Tanda tangan animasi

Mau membuat ? mau mencoba ? Mau ....... ?!
Anda ikuti saja langkah yang berikut :

1.   Kunjungi situsnya di sini

2.   Isilah nama Anda pada kolom
      Choose the text of your signature
      (lihat gambar di bawah)

3.   PIlihlah 1 model huruf dari 45 model yang ada
      pada tabel Choose a font and a size for the text.
      (lihat gambar di bawah)

4.   Pilihlah 1 Kategori dari banyak pilihan yang ada,
      lalu kliklah gambar yang Anda inginkan.
      (lihat gambar di bawah)

5.   Bila ingin menggunakan gambar Anda sendiri,
      maka pilihlah Kategori Your own figurines.
      (lihat gambar di bawah)

6.   Pilih warna yang Anda inginkan,
      kemudian kliklah CREATE.
      (lihat gambar di bawah)

7.   Klik Download this signature
      Untuk men-save hasilnya.
      (lihat gambar di bawah)

8.   Terakhir, pilih Simpan Berkas
      kemudian klik OK.
      (lihat gambar di bawah)

9.   Sisipkan kode URL yang Anda buat
      tadi diantara kode yang berikut ini :
Dan langkah-langkah untuk meletakkan Tanda tangan disetiap akhir postingan adalah:
Langkah-langkah:

• Udah gitu, Upload gambar kamu, di Picasa, ImageShack, dan situs hosting lainnya.
• Kalo udah upload, copy Url Image kamu
• Masuk ke Akun Blogger kamu, lalu klik "Rancangan">>>"Edit HTML"
• Checklist "Expand Widget Templates"
• Cari kode <data:post.body/> dan tambahkan kode ini di bawahnya:

 <b:if cond='data:blog.pageType ==
"item"'><br /> <br/><br/><img
src='urlsignaturekamu.png'/><br /> </b:if>

Selesai

Tutorial Blogger

Baca Selengkapnya