dasdas hihi
work from home paling santuy

Cara Mengubah Ukuran Huruf Header

Cara Mengubah ukuran huruf atau font size pada header bin heading tujuannya untuk menyamarkan seolah-olah antara text posting dengan heading tags yang sahabat selipkan di dalam artikel posting maupun pada xml blogger mempunyai ukuran huruf yang sama.
Cara mengubah ukuran huruf ini kelanjutan dari pembahasan tentang SEO On Page Related Post Blogger  beberapa minggu sebelumnya. Bagi sahabat yang sudah expert  tentang Edit CSS, sudahlah ndang baliooo cerita ini akan membosankan untuk dirimu simak dan harap maklum penulis baru taraf belajar menggambar dan mulai mengenal HTML :lol:

Setelah berita SOPA Latjuba dan PIPA PDAM kemarin, sebagai aliran cap ratu-ku; ada rasa malas juga untuk ngeblog; inginnya tidur sama makan, terus menyeduh teh poci dan main petak umpet dengan kelinci di kandang :jiah malah curhat:

Ada dua alternatif pilihan untuk mengubah ukuran huruf pada CSS Header Blog, antara lain:

1. Mengubah Ukuran Huruf via CSS Template
Mengubah Ukuran Huruf  pada CSS template Blogger  boleh juga diaplikasikan pada file CSS Wordpress  maupun file CSS template Joomla.

Misalnya saya mengambil  contoh SEO On Page pada XML Blogger dengan format
<h3>  Related post  for  <data:post.title/> </h3>
atau
<h2>  Related post  for  <data:post.title/> </h2>

O iya, untuk wordpress hosting sendiri  biasanya penampakan terjadi pada pengguna plugin SEO Auto Link Related Post.

Apabila huruf css template headingnya masih default, efeknya akan membuat tampilan terlihat seperti raksasa di tengah kebun singkong kurang rapi bagi sebagian orang terutama yang mencari receh dari bisnis online seperti amazon.
Definisi ukuran huruf pada CSS template, entah itu XML Blogger, Joomla template atau template wordpress dituliskan dengan syntax   font-size:
Pada template wordpress hosting sendiri atau template joomla keberadaan cssnya berupa file terpisah yang biasanya bernama style.css

Untuk Blogger, login to Blogger.com,
Klik Design //Rancangan : Edit HTML , checkmark Expand HTML

Untuk Wodpress hosting sendiri,
Goto : yourblogaddress/wp-admin/theme-editor.php ,  silahkan login

Carilah tag heading h1,h2 atau h3 yang ingin dikecilkan ukuran hurufnya, kemudian tekan Enter. Search (tekan F3) misalnya tuliskan : h2
Example for penampakan :

h2 {font-size: 16px; 

atau bisa juga seperti ini

h2 {font-size:3em;

silahkan replace // ganti ukuran huruf dengan angka yang lebih kecil di belakang text  font-size: , misalnya menjadi

h2 {font-size: 12px;

Apabila pada CSS h1, h2 atau h3 belum ada text font-size silahkan ditambahkan seperti pada format yang saya tandai dengan warna merah setelah kode pembuka {
Kalau sudah Save Template.

2. Menambahkan Kode CSS Manual Pada template // Add Manual Style
Alternatif keduanya, dirimu dan diriku boleh dengan menambahkan CSS baru pada template (saya memilih cara manual style saja). Apabila cara pertama yang digunakan untuk mengubah tag h1, itu artinya semua header tag termasuk header pada template biasanya akan berubah juga.
Untuk blog yang headernya menggunakan image mungkin tidak bermasalah; namun kalau headernya menggunakan text , mungkin penampakannya pada header blog dikau akan kurang sesuai seperti semut yang melamun di kandang sapi
Format penulisan pada SEO Related post, masalah ingin menggunakan tag  h1, h2 ,atau h3 terserah dirimu, contoh:

<h2>  Related post  for  <data:post.title/> </h2>

Agar hurufnya menjadi standar teks artikel, tanpa mengganggu style CSS pada tag header default di header blog, maka penulisannya  :

<h2 style="font-size: 12px;">  Related post  for  <data:post.title/> </h2>

Apabila ingin menyelipkan header tag di dalam artikel juga boleh, tinggal klik tab Edit HTML mode dan tuliskan:

<h2 style="font-size: 12px;"> SOPA-yam Yes,  SOPA NO!!, ayam sorry =)) </h2>

Cara Mengubah Ukuran Huruf Header saya akhiri dengan memajang AWARD yang keren banget dari sahabat blogger dari Papua (aslinya Jawa barat yak Akang Raihan - Cinta Deras hatur nuhun banget atuh :D


Cara Mengubah Ukuran Huruf Header angin berhembus lembut menghempas sisa nestapa
lembaran tipis kisah lama yang terselip di ujung sanubari
kembalikan butiran cinta seindah gerimis
alirkan jernihnya gemercik air kehampaan di malam sunyi
tentramkan jiwa hingga ujung cakrawala
remukan sejuta mimpi sia-sia...
ombak di pantai hati perlahan berbisik, disinilah cinta itu bertahta
Cara Mengubah Ukuran Huruf Header Reviewed by alkatro on 15:46 Rating: 5

50 comments:

  1. huruf oh huruf , dibolak balik tetaplah sebuah huruf.. kabur

    ReplyDelete
  2. pake html lagi,,ribet dan gak ngerti,tapi saya coba gan,mudah-mudahan berhasil :D

    ReplyDelete
  3. keren share CSSnya mbah.

    terutama itu lho pada taksasa berada di tengah kebun singkong. hehe thank

    ReplyDelete
  4. loh. neng ngisor ono awardnya to. hahahahha
    ok selamat mbah. awaardnya keren banget deh. sukses ya mbah, tong tong tog. kabur

    ReplyDelete
  5. makasih sob berbagi infonya tp ane sering bingung kalau ukuran huruf pake yang 3em,

    ReplyDelete
  6. mantapp infonya, tapi kenapa dibagian akhir mesti ada puisi ANEH wwkwkwkwk

    ReplyDelete
  7. Thanks Mas... Kereeeennnn dah Header-nya... heheheheh

    ReplyDelete
  8. masih belum berani kang.otak atik...css..he.he.. sekalian nih kang.. mau nanya.. template saya kok belum bisa komen bertingkat ya.. padahal script sudah ganti.. untuk komen bertingkat.. tapi belum bisa muncul.. selain itu saya kan baru saja ganti templat di halaman depan ada tulisan baca selengkapnya..padahal diatasnya sudah ada tulisan readmore.. nah bagaiman menghilangkan tulisan baca selengkapnya nggih.. nuwun...

    ReplyDelete
  9. Gaya khas yang mmembuat cinta takluk pada si Mbah satu ini,makasih mbah tipsnya,diam termenung sambil menyimak,hehe.
    Selamat pagi selamat beraktifitas and tentunya happy blogging.

    ReplyDelete
  10. ribet juga ya,,
    tapi makasih buat infonya

    ReplyDelete
  11. gak mudah yah,,ribet..

    tapi makasih yah atas infonya..

    ReplyDelete
  12. @boponya dik fajar:
    comeng bertingkat, info lengkapnya klik link ane :D

    tentang readmore dobel, karena efek setting feed di setting jump to :
    cari di xml, njenengan cari kata clear for photos floats
    scroll ke dua baris di bawahnya ada kode seperti ini
    <b:if cond='data:post.hasJumpLink'>
    <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
    </div>
    </b:if>

    kalo dah ketemu hapus semuanya.. ngapunten listrik lagi disco tralala .. kabuuur

    ReplyDelete
  13. thx infonya..
    saya mau ubah ukuran header di blog saya dlu..

    ReplyDelete
  14. memang pinter sampeyan mas
    html diotak atik dadi jos
    selamat beraktifitas cak

    ReplyDelete
  15. ehm..yang mana yang mau di komen nich..tps merubah header atau makana filosof di balik alkatro?...daripada bingung mending gak jadi komen aja ah..kabuuuur!

    ReplyDelete
  16. wah ini pelajaran berharga semua blog aku headernya tak tentu arah makasih mas

    ReplyDelete
  17. @wahid: 3em artinya ukuran font-sizenya 3x ukuran font standar di template ybs, kalo pake em bisa diganti 1em
    @wisata: tang gentung gentang serr =))
    @obat tradisional dkk : ribet? ah yang bener kayaknya koleksi footprint forumnya banyak gan hehe

    @kang djangan pakies: jiah mbah kaji kriminal wkwkwk. bener guanteng kang, saya juga agak guanteng (gang guan-teng gorokan) :D

    @kang tejo: emang ada pusinya to, aku kok gak liat wwkwkwkwk

    ReplyDelete
  18. @anak es-em-pe, smp3lembang,herman, obat 2011: definisi header cssnya kadang ada yang beda mas :D
    fokus yang dicari adalah kata font-size:

    @Fajar:
    jawabannya =anak smpku komentar bertingkat
    kulo dah oprekin yang tinggal dipasang, klik http://www.smp1.tk/fajarmufti.txt

    barangkali ingin balikan ke dirinya lagi :D
    demonya :http://cerita2102.blogspot.com/2011/08/tuit-tuiiit.html

    (mungkin minggu depan blog demonya kulo hapus)

    @raihan: cinta oh cinta hehe
    @mas iskaruji: wis ngono ndang balioo, tak tunggu matengane wkwkwk

    ReplyDelete
  19. @mampir di pagi yang cerah sambil nyruput seloki teh.he.he.he.. iya mas.. kemarin sudah tak ampiri.. dan tak coba.. untuk.. otak atik..namun.. masih dereng saged.. soal jan gang script..rdb kulo alias ra dong blas.. dados.. ndadak nunak nunuk.. kadose..kedah ndamel blog malih kagem trial and error.. ingkang baken ampun bosen nggih.. mbok bilih kula tansah nyuwun wewarah kalih panjenengan..he.he.he. *nglunjak* ngabuuuur...

    ReplyDelete
  20. haloo gan Alkatro.
    bagaimana kabar?
    CSS oh CSS, saya tidak begitu mengerti CSS. hehe
    tapi, selamat buat award cintanya gan.
    sukses selalu, happy blogging gan.

    ReplyDelete
  21. Tok.. tok... tok... eni badi humz??? *Glunthang hahaha... haduhh... berasa gimana gitu lama gak ngeblog tau2 dikasih tutorial hahaha... :)

    Jadi Menu navigasi headermupun nganggo cara iki tah pak? baru kusadari klo Menu navigasiku masuk jadi SiteLink sama kaya punya blog ini yg Freelance jobnya hahha jadi mungkin ada pengaruhnya juga klo cara ini kuikutin... :) sik, tak liat punyaku dulu... Kabuuurrrr....

    OOT: Mau tanya pak, itu domain co.cc udah bener2 bebas dari penjara ato belum sih? soalnya tak ketik nama domain co cc ku yg ada 3 biji, 33'y kok gak ada yg nongol ya, tapi giliran ku liat dari statistik blogger sama WP lha kok ya masih ada yg pada mampir dari google, malah yg WP kan dulu kubikin semi AGC di single ama kategori buat download lagu, kok ya malah masih ada visitor yg referalnya dari Google tapi klo tak ketik domainnya ya tetep gak ada yg nongol, apa perlu verifikasi ulang tah di Websmaster? ditunggu jawabannya, klo kepanjangan boleh lah dijadiin postingan hahahaha...

    ReplyDelete
  22. tutorial ukuran huruf yang menarik, dan selamat ya sobat atas perolehan award-nya :-)

    ReplyDelete
  23. @fajar: njih sami-sami kangmas, nek puyeng edit; tinggal bilang link templatenya apa, insya Allah entar kulo editke kalo pas senggang :D

    @outbound, mas haryanto: aku dattaang :D

    @pak sejarah: jane kalo dijadiin posting bisa ngurusin alexa iki wkwkwk
    tapi lagi males posting, listrik masih ndlap ndlup

    sitelink apalagi itu pak, wkwkwk
    http://www.google.co.id/search?q=alkatro

    faktor utamanya mungkin a.l ini
    1. url blog kata unik,cukup umur dan beberapa kali nongol di gugel.

    kalo pake url 'berkeyword premium' mungkin blog ane gak dapet hadiah itu -hehe-


    2. mengenai daftar link yang nongol di site link,

    'We only show sitelinks for results when we think they'll be useful to the user.. ' kurang lebih pakemnya seperti itu

    akibat link tsb ditaruh di area nav dan atau mendapatkan link in terbanyak daripada artikel lain;

    sehingga google -tertipu- 'menganggapnya' penting (bukan masalah kualitas artikel kayaknya, karena cheap android itu kan cuman judul yang isinya iframe src :lol:)
    dan mengasih sitelink -sayang gugel gak sekalian ngasih duit-

    OOTnya:
    kalo hosting di blogger kan sekarang tanpa verifid udah terindex otomatis di gugel

    sedangkan CO.CC bukan anak gugel
    ,coba veripid ulang wae pak,

    kalo yang di wp
    jangan2 sampean dibanned cicilan pak :gubrak:
    ceknya pake apa .com/ co.id?
    ane berkhayalnya misal:
    di google com ditendang, tapi di google.ca dan lainnya enggak , jadi bisa tetep dapet visitor dari gugel 'from another country'
    karena ane curiga dirimu add url semua blogmu ke puluhan anak cabang google di berbagai country wkwkwk

    masalahnya adalah
    aku gak ngerti AGC itu apa to? setahuku AGC itu amazon gift card... kabuur

    January 26, 2012

    ReplyDelete
  24. iya nih
    kalo defaultnya negh segede gajah bengkak

    ReplyDelete
  25. agak membingungkan kalau soal urusan oprek theme tanpa memahami bahasa tubuh platform sebuah blog

    lebih sering di jumpai lain desaign lain struktur juga

    ReplyDelete
  26. bingung banget..
    tapi nyoba dulu lah..

    thanks ya sob :)

    ReplyDelete
  27. kekeke, aye dah gan..
    mampir lagi ahh disini, siang2, panas2..
    kali aja dikasi jus jeruk seger. haha..
    #wush :D

    ReplyDelete
  28. oh begitu toch sobat cara mengubah header blog yang benar sobat???

    makasih ilmunya sobat...

    ReplyDelete
  29. nice tips gan,, dicoba dulu.. XD

    ReplyDelete
  30. Mang Katro,, Pasang Link Iki Yo.:D
    mau niat jualan balance paypal saja lah.,
    Rate Bersahabat Pokokke,

    ReplyDelete
  31. tentu besarnya font harus disesuaikan dgn templatenya, jgn pakai font kebesaran :p

    ReplyDelete
  32. mampir ke blog sobat lagi sembari mengucapkan selamat untuk awardnya sobat...

    ReplyDelete
  33. owh langsung ke XML ya ,
    makasih buat ilmyu barunya ,,

    ReplyDelete
  34. terimakasih buat cara terbaiknya!!!salam kenal sob...

    ReplyDelete
  35. coba ah :) bosan juga dari dulu ukurannya segitu terus hehe

    ReplyDelete
  36. lah mbuh ngomong apa sampeyan xixi
    #ora mudeng detected

    ReplyDelete
  37. mbalik maneh :D
    ppc yg bisa dipasang barengan sama adhitz apaya mas?

    ReplyDelete
  38. kalau begitu nanti di h2 akan saya tabahi, agar gemuk sedikit agar beda antara header dan isinya.
    matur suwun

    ReplyDelete
  39. makasih mas atas tutorialnya...jadi SEO On Page ane dah beres dan memenuhi syarat.
    Update: How I Met Your Mother S07E18

    ReplyDelete
  40. thanks sob tippsnya..
    conguratulation..

    ReplyDelete
  41. bos saya suka dengan bahasa kamu " seperti raksasa ditengah kebun singkong " dari mana dapat bahasa seperti itu, wkwkwkwkwkwkkwkwkwkwk

    ReplyDelete
  42. asli itu ide spontan dari lubuk hati terdalam #hayah
    penginnya selalu serius, entahlah udah terlanjur stylenya ngelantur :D

    ReplyDelete
  43. good share mas, ditunggu tulisan selanjutnya :)good share mas, ditunggu tulisan selanjutnya :)

    ReplyDelete
  44. makasih banget share infonya :D

    ReplyDelete
  45. ok juga, cuy,, Mantep banget nih, cara mengubah ukuran hurufnya, Sangat bermanfaat bagi saya yang sedang bingung cari-cari cara buat edit ukuran huruf he.. Thanks.. langsung ke TKP.

    ReplyDelete
  46. mantep gan ,mudah dipahami. terima kasih..

    http://pemo062.blogspot.com/

    ReplyDelete

Cek update info tambahan ada di box komentar.
Damai di hati - Damai di bumi. Thanks sudah mampir. :)

All Rights Reserved by Bisnis Online | Blog SEO | Script © 2009 -
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.