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 SOPALatjuba 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 terlihatseperti 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 sesuaiseperti 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 :
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
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 ini kelanjutan dari pembahasan tentang SEO On Page Related Post Blogger beberapa minggu sebelumnya. Bagi sahabat yang sudah expert tentang Edit CSS,
Setelah berita SOPA
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
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
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
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:
huruf oh huruf , dibolak balik tetaplah sebuah huruf.. kabur
ReplyDeletepake html lagi,,ribet dan gak ngerti,tapi saya coba gan,mudah-mudahan berhasil :D
ReplyDeletekeren share CSSnya mbah.
ReplyDeleteterutama itu lho pada taksasa berada di tengah kebun singkong. hehe thank
loh. neng ngisor ono awardnya to. hahahahha
ReplyDeleteok selamat mbah. awaardnya keren banget deh. sukses ya mbah, tong tong tog. kabur
makasih sob berbagi infonya tp ane sering bingung kalau ukuran huruf pake yang 3em,
ReplyDeletemantapp infonya, tapi kenapa dibagian akhir mesti ada puisi ANEH wwkwkwkwk
ReplyDeleteThanks Mas... Kereeeennnn dah Header-nya... heheheheh
ReplyDeletemasih 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...
ReplyDeleteGaya khas yang mmembuat cinta takluk pada si Mbah satu ini,makasih mbah tipsnya,diam termenung sambil menyimak,hehe.
ReplyDeleteSelamat pagi selamat beraktifitas and tentunya happy blogging.
ribet juga ya,,
ReplyDeletetapi makasih buat infonya
gak mudah yah,,ribet..
ReplyDeletetapi makasih yah atas infonya..
@boponya dik fajar:
ReplyDeletecomeng 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 + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
kalo dah ketemu hapus semuanya.. ngapunten listrik lagi disco tralala .. kabuuur
thx infonya..
ReplyDeletesaya mau ubah ukuran header di blog saya dlu..
memang pinter sampeyan mas
ReplyDeletehtml diotak atik dadi jos
selamat beraktifitas cak
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!
ReplyDeletewah ini pelajaran berharga semua blog aku headernya tak tentu arah makasih mas
ReplyDelete@wahid: 3em artinya ukuran font-sizenya 3x ukuran font standar di template ybs, kalo pake em bisa diganti 1em
ReplyDelete@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
@anak es-em-pe, smp3lembang,herman, obat 2011: definisi header cssnya kadang ada yang beda mas :D
ReplyDeletefokus 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
@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...
ReplyDeletehaloo gan Alkatro.
ReplyDeletebagaimana kabar?
CSS oh CSS, saya tidak begitu mengerti CSS. hehe
tapi, selamat buat award cintanya gan.
sukses selalu, happy blogging gan.
Tok.. tok... tok... eni badi humz??? *Glunthang hahaha... haduhh... berasa gimana gitu lama gak ngeblog tau2 dikasih tutorial hahaha... :)
ReplyDeleteJadi 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...
tutorial ukuran huruf yang menarik, dan selamat ya sobat atas perolehan award-nya :-)
ReplyDelete@fajar: njih sami-sami kangmas, nek puyeng edit; tinggal bilang link templatenya apa, insya Allah entar kulo editke kalo pas senggang :D
ReplyDelete@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
iya nih
ReplyDeletekalo defaultnya negh segede gajah bengkak
wah tks infonya. lansng praktek
ReplyDeleteagak membingungkan kalau soal urusan oprek theme tanpa memahami bahasa tubuh platform sebuah blog
ReplyDeletelebih sering di jumpai lain desaign lain struktur juga
bingung banget..
ReplyDeletetapi nyoba dulu lah..
thanks ya sob :)
kekeke, aye dah gan..
ReplyDeletemampir lagi ahh disini, siang2, panas2..
kali aja dikasi jus jeruk seger. haha..
#wush :D
oh begitu toch sobat cara mengubah header blog yang benar sobat???
ReplyDeletemakasih ilmunya sobat...
nice tips gan,, dicoba dulu.. XD
ReplyDeleteMang Katro,, Pasang Link Iki Yo.:D
ReplyDeletemau niat jualan balance paypal saja lah.,
Rate Bersahabat Pokokke,
tentu besarnya font harus disesuaikan dgn templatenya, jgn pakai font kebesaran :p
ReplyDeletemampir ke blog sobat lagi sembari mengucapkan selamat untuk awardnya sobat...
ReplyDeleteowh langsung ke XML ya ,
ReplyDeletemakasih buat ilmyu barunya ,,
langsung ke pertamaxxx
ReplyDeleteterimakasih buat cara terbaiknya!!!salam kenal sob...
ReplyDeletecoba ah :) bosan juga dari dulu ukurannya segitu terus hehe
ReplyDeletelah mbuh ngomong apa sampeyan xixi
ReplyDelete#ora mudeng detected
mbalik maneh :D
ReplyDeleteppc yg bisa dipasang barengan sama adhitz apaya mas?
kalau begitu nanti di h2 akan saya tabahi, agar gemuk sedikit agar beda antara header dan isinya.
ReplyDeletematur suwun
terima kasih infonya gan
ReplyDeletelayak dipelajari...
ReplyDeletemakasih mas atas tutorialnya...jadi SEO On Page ane dah beres dan memenuhi syarat.
ReplyDeleteUpdate: How I Met Your Mother S07E18
thanks sob tippsnya..
ReplyDeleteconguratulation..
bos saya suka dengan bahasa kamu " seperti raksasa ditengah kebun singkong " dari mana dapat bahasa seperti itu, wkwkwkwkwkwkkwkwkwkwk
ReplyDeleteasli itu ide spontan dari lubuk hati terdalam #hayah
ReplyDeletepenginnya selalu serius, entahlah udah terlanjur stylenya ngelantur :D
good share mas, ditunggu tulisan selanjutnya :)good share mas, ditunggu tulisan selanjutnya :)
ReplyDeletemakasih banget share infonya :D
ReplyDeleteok 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.
ReplyDeletemantep gan ,mudah dipahami. terima kasih..
ReplyDeletehttp://pemo062.blogspot.com/