Cara Unik Memperunik Tampilan Blog WordPress

Untuk mengubah style pada blog yang di-host oleh WordPress biasanya kita harus meng-upgrade keanggotaan. Setelah menjadi anggota premium maka kita dapat menyempurnakan tampilan blog sesuai dengan apa yang kita inginkan.

Dengan segala keterbatasan, tanpa meng-upgrade menjadi anggota premium, kita juga bisa menghias tampilan blog kita menjadi lebih unik dibanding blog lain yang mengunakan tema sama.

Widget

Widget jenis Text adalah daerah yang paling mudah diberi style. Kita beri tambahan awal sebelum mulai menulisakan sesuatu seperti ini:

<span style=”display: block /* ini menandakan seluruh daerah yang bernaung dalam span adalah tergabung dalam satu blok */ ; background: lightgreen /* warna latar belakang blok pada widget ini adalah hijau muda */ ; font-family: lucida fax /* jenis huruf adalah Lucida Fax */ ; font-size: 24px /* membuat tulisan lebih besar */ ; border: 2px solid green /* kolom tulisan pada widget ini diberi garis luar atau garis batas berwarna hijau */ ; padding: 3px /* membuat semua tulisan maupun gambar dalam widget ini sedikit menjauhi garis batas */ ;”>

Setelah itu kita mulai menulis sesuatu yang ingin kita tampilkan pada widget itu.

Karena WordPress mengunakan ‘wpautop’ (dibaca: wp auto p) yang dapat mengacaukan style kita maka dalam menulis, bila ingin memulai paragraf baru, jangan menggunakan ‘enter’ sebab itu akan memunculkan <p>. Jadi kita gunakan saja tanda <br> atau <br/> bila tema yang kita gunakan telah support HTML5.

Di akhir penulisan kita tutup style dengan </span>.

Salah satu cara termudah menggunakan style adalah melihat elemen yang ada pada stylesheet tema yang sedang kita gunakan.

Karena span merupakan elemen tambahan maka kita cari elemen ‘class’, misalnya salah satu widget blog ini menggunakan elemen entry-header dan entry-title. Jadi penulisan kodenya tidak lagi seperti contoh pertama di atas, namun hanya cukup seperti ini:

<span class="entry-title"> dan diakhiri dengan </span> atau bisa dengan <p class="entry-title"> dengan akhirannya </p>.

Bagian Artikel

Hampir semua tema WordPress mengunakan Google Font dan Font sejenisnya, atau biasanya menggunakan isilah @font-face. Bila kita berminat menggunakannya dalam tulisan artikel kita maka saat mulai menulis kita tambahkan style. Tentunya pertama-tama yang harus dilakukan adalah mengetahui jenis Font apa yang digunakan, dan itu bisa dilihat lewat source-code.

Setelah mengetahui jenis Font yang digunakan maka saat mulai menulis dengan HTML Editor kita tambahkan style seperti ini pada setiap paragraf baru:

<p style="font-family:open-sans;"> dan diakhir paragraf tutup dengan </p>.

Selain cara ini, kita juga dapat menggunakan cara yang pertama kali dibahas di atas, yaitu dengan ‘span style’. Bila menggunakan span maka harus ingat untuk tidak memulai paragraf baru dengan menekan ‘enter’.

Gravatar

Widget gravatar juga kita tampilkan tulisan dengan sedikit menambahkan style. Caranya sama dengan widget text. Kita mengisinya pada kolom ‘tentang kita’.

Nah, bagaimana. Walau sangat terbatas namun setidaknya tampilan blog kita menjadi lebih lain daripada tampilan blog lainnya. Selamat menulis.

Note: Cara melihat source-code atau sumber kode adalah klik kanan lalu pilih ‘Lihat Kode Sumber Laman’. Untuk stylesheet dan Google Font dapat kita cari pada <link rel=’stylesheet’.

Iklan

14 Replies to “Cara Unik Memperunik Tampilan Blog WordPress”

    1. “WordPress” itu gambar bukan tulisan dan saya pakai css ini :
      <div style="display:block;padding:5px;border:10px double #444;background:url('//hdsusanto.files.wordpress.com/2013/11/graphic1.png') no-repeat fixed 35% 50% rgba(225,225,125,0.15);"> Isi artikel </div>
      Bisa juga dengan css lengkap ini:

      <div style="display:block;padding:5px;border:10px double #444;background-image:url('//hdsusanto.files.wordpress.com/2013/11/graphic1.png');background-repeat:no-repeat;background-attachment:fixed;background-position:35% 50%;background-color:rgba(225,225,125,0.15);"> Isi tulisan </div>
      1. Tulisan WordPress itu adalah gambar, tepatnya gambar yang dijadikan sebagai background. Kita bisa simpan gambar itu dimana saja dan memunculkannya dengan CSS. CSS tersebut ditulis sebelum paragraf atau kalimat dimulai. Misalnya foto avatar saya ini dijadikan background maka CSSnya adalah background-image: url('http://2.gravatar.com/avatar/ecdf6996f1ba92422988ad009b06e13a'); dan tampilannya jadi seperti ini:

        Isi tulisannya ada disini.
  1. Ass…Mas Hadi, saya pengen buat header, yang tulisan judulnya berada (terpisah) di atas blok gambar headernya. Tema saya Expound. Jadi walaupun gambar headernya berganti-ganti warna, tidak berpengaruh pada warna tulusan judulnya…mohon bantuannya jika tidak keberatan…salam persahabatan.

    1. Halooo, Pak. Kalau anda pake wp premium pasti lebih gampang mengutak-katik css-nya. Kalau untuk non-premium kita tidak bisa pakai cara yang memuaskan, salah satu cara meng-heck header Expound agar teks headernya tak terganggu gambar latar adalah dengan menambahkan text-shadow. Dan caranya adalah lewat widget. Pada widget text anda masukkan html ini:

      <div style="top:10px;position:absolute;left:10%;text-shadow:2px 2px #00f;letter-spacing:1.25px;">
      <div class="site-title-group" style="display:block !important;">
      <h1 class="site-title" style="clip:auto;position:relative !important;"><a style="color:#fff;" href="https://arsyam58.wordpress.com/" title="Butir-Butir Mutiara" rel="home">Butir-Butir Mutiara</a></h1>
      <h2 class="site-description" style="clip:auto;position:relative !important;color:#fff;">Berbagi Ilmu beroleh hikmah</h2>
      </div><!-- .site-title-group -->
      </div>

      Pada praktiknya gambar header harus selalu ada agar tampilan tema tidak berantakan. Dan tampilannya dengan cara ini belum saya uji pada layar ponsel.

      Expound Header
      Contoh tampilan header Expound yang diheck. Teks Header berbayangan jadi tetap terbaca pada latar berwarna campur-aduk.

      Tambahan: 15.40
      Catatan:
      Hilangkan centang pada Tampilkan Teks Header pada menu Penyesuaian.

      text-shadow: 2px 2px #00f;

      #00f adalah warna biru, anda bisa mengantinya.

      color:#fff;

      pada h1 dan h2 adalah warna putih, anda dapat mengubahnya.

      1. Mas Hadi, terima kasih banyak. Meski ini belum tentu saya bisa menerapkannya nanti. Tapi sebelum saya mencoba ini dan jika tidak keberatan, saya mau tanya lagi mas, Setelah dibuat di widget text nanti bagaimana caranya meletakkannya di header. Terima kasih.

  2. Ok, Terima kasih banyak mas, atas pencerahan ini semoga saya bisa menerapkanya di blog saya… salam dari saya di Dompu-NTB

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

w

Connecting to %s