14 comments on “Cara Unik Memperunik Tampilan Blog WordPress

    • “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>
      • 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. pak.aku ingin tanya di forum sumatera masalah fengshui tapi ga bisa.gimana cara daftar jadi anggotanya

  2. Ping-balik: Cara Unik Memperunik Tampilan Blog WordPress | Hamdan JSM #124

  3. 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.

    • 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.

      • 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.

  4. 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 )

Gambar Twitter

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

Foto Facebook

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

Foto Google+

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

Connecting to %s