Tags

, , , , , , , , , , , ,

Waaah, ternyata ini postingan pertama gue di tahun 2012. Gak nyangka udah masuk ke pertengahan bulan aja. :D

Tadinya sih gue bingung mulai dari mana, sampe akhirnya gue ngetweet asal-asalan di twitter, “pengen post tutorial mempercantik blog nih, tapi bingung mulai dari mana :p”. eh malah dimensen ama temen.

gue langsung ngakak abis baca mention dari dia. :lol: bener juga yah. hahaha. yang namanya orang mau ngelakuin sesuatu ya emang kudu dari awal, masa iya dari akhir dulu? kan gak lucu. :mrgreen: :lol:

nah sekarang gue mulai deh dari awalnya :mrgreen:.
Cara ini sebenarnya mudah yah, tinggal cari referensi di blog-blog lain juga udah pasti bisa. cuman mungkin kadang orang males nyari atau memang pemula banget untuk hal-hal semacam ini, terutama untuk bahasa CSS atau HTML. :P
Gue ngedit design blog ini atas ide kreatif gue sendiri.  dulu, karena sering berkutat dengan bahasa HTML, gue jadi tertantang untuk bikin blog gue jadi cantik kayak sekarang. pasti pada ngiri kan? (halah! segitu doank lo bangga, Da??!!) #gubrak :mrgreen:

Karena gue masih numpang ama om WP (alias GRATISAN!! CATET!!), otomatis hal-hal yang kudu di kreasiin juga terbatas. maklumlah, kita harus pinter muter otak biar tampilan themes di blog WordPress kita jadi enak buat dipandang. gue sih yakin, buat cowokers (maksudnya para cowok gitu :lol:) tampilan blog gue bikin rusak mata mereka. hihihi. gak pa-pa kan yah, pandangin aja poto gue, pasti matanya tambah jereng. :lol:

betewe, langsung aja deh ya gue kasih tips nya. cekidooot… ;)

  1. Pilih Theme
    Yap! yang pertama harus kita pilih adalah theme. sekarang WP malah banyak nelurin themes yang bagus-bagus, pilih aja yang sesuai selera. buat yang punya dollar mah bisa pake premium nya, lebih bagus loh :D. tapi kalo gak mau ribet dan pengen sama kayak gue juga gak masalah kok, biar gampang mahaminnya.
    (Theme yang gue pilih adalah Chateau)
  2. Header
    di tiap-tiap theme gak semua loh yang bisa pasang header. ada yang cuma welcome note aja yang bisa dipasang di header nya, dan bukan bentuk picture seperti punya gue ini. dan bikin header itu gampang kok, kalo bisa ngegunain photoshop pasti bisa deh bikin header kayak gue.
    kalo mau masukin header, bisa klik Appearance > Header
    usahain kalo mau bikin header, harus di sesuaikan ama size yang diharuskan  oleh theme tersebut. misalnya kalo header blog gue size image nya adalah 960 x 260 pixels (kalo gak keliatan, klik aja pict nya yah). ;)
  3. Sidebar (WIDGET)
    nah bagian ini agak sedikit panjang. tapi kalian pasti tau donk sidebar itu hasil darimana? yap, dari WIDGETs. gue seneng banget ngutak-atik bagian ini nih, soalnya disinilah letak kreasi kita. :D
    untuk yang pertama dibahas adalah text area. (FYI, widget yang dipilih dibagian widget tersebut adalah TEXT)tau kan widget text area yang gue pajang di gambar samping kiri ini, yang warna nya unyu2 itu loh? :P nah untuk bikin border box nya bisa melengkung kayak gitu, cukup tambahin kode dibawah ini:

    <div style=”overflow:auto; width:180px;height:127px;background-color:transparent;text-align:center;border:1px solid #e9cee8;border-radius:30px;-moz-border-radius:30px;padding:5px;”>ISI TEXT AREA</div>
yang warna merah angkanya bisa diganti sesuai selera. misalnya pengen panjang ama pendek kayak about me gue itu, cukup ganti dari 10px sampai 100px. :D
dan untuk ISI nya, ya terserah kalian aja, sekreatif kalian lah. mau di isi kayak punya gue juga gak masalah, atau mau di isi pake kata-kata juga bisa kok. intinya ya itu tadi, KREATIF!! :P

untuk text area pada gambar disamping kanan gak perlu pake border-borderan kayak tadi. hanya ditambahin pake kode sederhana juga udah cukup. untuk gambar gif ‘BEST FRIEND’ yang gerak-gerak itu, gugling aja, cari sesuai selera, kalo gak pengen pake gambar-gambaran juga gak masalah. malah lebih bagus, blog jadi lebih ringan tanpa ada yang bakal protes blog kita jadi berat gara-gara gambar tersebut. :mrgreen:
kodenya seperti ini:

<div style="overflow:auto;height:200px;text-align:left;background-repeat:no-repeat;background-position:right-down;background-image:url(‘http://daroachphobia.files.wordpress.com/2010/10/199.gif‘);”>
<div align=”center”><font size=”3″>
<a href=’http://daroachphobia.wordpress.com‘</a>
<a href=’http://daroachphobia.wordpress.com‘</a>
</font></div></div>

INGET!! untuk warna pink, ganti angkanya sesuai selera. bisa diedit-edit sedemikian rupa. yang warna biru diganti ama image URL yang bakal kalian jadiin gambar diatas link-link temen. dan kalo warna merah, diganti ama link temen-temen blogger kalian. ;)

untuk widget tentang whatsapp, modding nokia, dan gue disini loh, itu bisa di aplikasikan kayak model-model text area diatas. sedangkan untuk widget-widget seperti langganan blog gue, yang nyinggah, like this yo, dll itu gak perlu pake kode-kode rahasia kayak diatas :mrgreen: cukup pake widget yang udah disediain oleh wordpress itu sendiri. Pilih lah dengan bijak dan sesuai selera :mrgreen:

udah deh! selesai. sampe segitu aja. ternyata gak panjang yah, gue pikir bakal panjang. hahaha. *ngakak dalam hati* :lol:

Oya, kemaren ada blogger yang nanya tentang gimana cara bikin featured post. hehehe, awalnya gue gak ngeh apa itu featured, setelah gue liat, ternyata itu adalah sticky post :D.
okey, gue bakal kasih tutor sedikit tentang bagian sticky post welcome page ini.
sticky post itu terlahir dari post biasa. yah seperti biasanya kita bikin postingan aja.  cuman di new post dibagian visibility nya harus dicentang, kayak gini:
nah, setelah itu kreasiin aja welcome page yang mau di publish. mau tulisannya jadi warna-warni kayak sticky post gue juga boleh. mau ada tulisan kedip-kedip juga bisa. tinggal pakein aja kode dibawah ini:

<span style="color: #008000;"><em><strong><a style="color: #ff0000; font-size: 14px; text-decoration: blink;"><span style="color: #008000;">Postingan terbaru ada dibawah postingan ini yaa!!!</span></a></strong></em></span>

bagian yang warna biru bisa diganti pake kata-kata apa aja yang kalian suka. suka-suka aja lah. :D mudah kan?

oya, ‘welcome’ yang gerak-gerak itu bukan tulisan, tapi gambar. bisa di comot di mana aja, gugling-gugling deh pasti nemu. :P

gimana? simpel kan? gak ribet kok kalo mau belajar. intinya itu adalah NIAT dan USAHA!! So, satu kata: BERKREASILAH, anak muda!! :mrgreen:

oya, buat yang pengen tau tutor lainnya, bisa klik link Cara Membuat Floating Image Di Blog Menjadi Transparant.

[PS]: akhirnya di edit juga. horeee!! :mrgreen: maap yah kalo banyak poto srinsut nya. habis kalo gak ada ntar protes sana sini lagi. hehehe. :D ayoo, berkreasiiii!!

Recent Posts :

About these ads