Mohon Tunggu Proses Memuat Konten Halaman

ADVERTISEMENT

Terbaru

14
Tgl. 05 Agustus 2012

Cara Memberi Bingkai Dan Membuat Teks Pada Tanggal Posting Menjadi Rata Tengah

Menanggapi pertanyaan Sobat Blogger yang diajukan dalam artikel dengan judul " Menerapkan Breadcrumb Navigation Pada Judul Artikel ” ...

Border Pada Tanggal Posting Rata Tengah
Menanggapi pertanyaan Sobat Blogger yang diajukan dalam artikel dengan judul "Menerapkan Breadcrumb Navigation Pada Judul Artikel” tentang bagaimana cara menjadikan posisi tanggal posting berada di tengah seperti yang tampak pada gambar di atas, maka berikut ini adalah uraian langkah-langkah yang dapat digunakan untuk mengerjakan hal tersebut. Dimana dalam artikel ini saya akan menguraikan cara yang digunakan untuk membuat teks menjadi rata tengah sekaligus memberi bingkai atau border pada tanggal posting.

Langsung pada pokok pembahasan, apabila Anda ingin menjadikan teks pada tanggal posting serta memberi bingkai untuk bagian tersebut, maka kerjakan langkah-langkah berikut ini secara berurutan.

Pertama, buka editor template dengan cara mengeklik menu ‘Template>Edit HTML>Lanjutkan>Expand Template Widget’.

Kedua, cari kode ]]></b:skin> dan kemudian sisipkan rangkaian kode CSS berikut ini tepat di atasnya.
.date-header {
  margin-top: 0px;
  margin-bottom: 1px;
  padding: 3px 3px;
  border: 1px solid rgb(51, 153, 187);
  color: #000000;
  text-align: center;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background: url("https://lh3.googleusercontent.com/-2Q1Zy2BTD90/UB1yYAY5w5I/AAAAAAAAAZw/t-qDOFhAUig/s800/AbuAbuCerah.png") repeat-x scroll left bottom rgb(243, 244, 246);
  box-shadow: 1px 1px 6px 1px #3d85c6;
}

.mobile .date-header {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 0px;
  margin-bottom: 1px;
  padding: 2px 2px;
  border: none;
  text-align: left;
  text-decoration: none;
  background: inherit;
  border-radius: 0px;
  box-shadow: none;
  text-transform: capitalize;
}

Keterangan:
Rangkaian kode yang pertama (.date-header {) digunakan untuk membuat bingkai pada tanggal posting untuk tampilan blog versi web. Sedangkan rangkaian kode yang kedua (.mobile .date-header {) digunakan untuk mengatur tanggal posting pada tampilan blog versi seluler dalam tampilan normal apabila setelan template seluler yang digunakan adalah ‘Tersesuai’.
Anda dapat mengubah URL gambar yang digunakan sebagai background tanggal posting sesuai dengan desain tampilan blog yang Anda kelola, dalam hal ini adalah dengan cara mengganti URL gambar yang terdapat pada kode background:. Atau dapat pula Anda ganti dengan penggunaan warna solid sebagai background, misalnya background: #ffffff; untuk menjadikan warna putih sebagai warna latar.

Ketiga, simpan template.

Namun perlu diingat bahwa setelah Anda menerapkan teknik tersebut, maka bingkai yang dihasilkan untuk beberapa kategori template standar Blogger tidak dapat sejajar dengan bingkai yang digunakan pada area artikel seperti yang tampak pada gambar di bawah ini.
Tampilan Bingkai Pada Tanggal Posting

Sehingga agar bingkai yang digunakan pada tanggal posting sejajar dengan bingkai yang digunakan pada area artikel (bidang posting), maka kerjakan langkah-langkah berikut ini.

Pertama, buka editor template dengan menggunakan cara yang sama seperti cara yang sebelumnya.

Kedua, cari kode &lt;div class=&quot;date-outer&quot;&gt; dan kemudian cari kode <h2 class='date-header'><span><data:post.dateHeader/></span></h2> yang terletak beberapa baris di bawahnya. Nah, selanjutnya tambahkan style='margin-left: -20px; margin-right: -20px;' pada kode tersebut untuk mengubah margin kiri dan kanan tanggal posting, sehingga kode tersebut menjadi seperti berikut ini.
<h2 class='date-header' style='margin-left: -20px; margin-right: -20px;'><span><data:post.dateHeader/></span></h2>

Keterangan:
Apabila dengan menggunakan margin tersebut bingkai pada tanggal posting belum juga sejajar dengan bingkai pada bidang posting, maka ubah ukuran yang digunakan sehingga akhirnya kedua bingkai menjadi sejajar.

Ketiga, simpan template.

Dengan demikian maka antara bingkai pada tanggal posting dengan bingkai bidang posting akan menjadi sejajar seperti yang tampak pada gambar di bawah ini.
Tampilan Border Pada Tanggal Posting


Semoga berguna dan bermanfaat.
Salam.


Katagori: ,
Silakan klik di sini untuk mengeposkan komentar Anda. Jika Anda ingin membaca artikel lain yang terdapat pada blog ini, maka dapat Anda lakukan dengan cara membuka laman daftar isi. Catatan: Komentar balasan hanya diprioritaskan untuk pertanyaan dan atau pernyataan yang diposkan dengan memakai formulir komentar Blogger.
Admin
Terdapat 14 komentar pada artikel ini ▶
07/08/12 23.31 O

gambarnya ada yang warna hijau gak mas atau kuning ?...

karna gambar ini abu abu kurang cocok sama blog aku..... :)

Anonim
08/08/12 01.33 O

@Mencintai Dengan SederhanaSobat, seperti yang saya uraikan di atas apabila gambar yang digunakan sebagai background tanggal posting tidak sesuai dengan desain tampilan blog yang Sobat kelola, maka silakan lakukan kustomisasi pada gambar yang digunakan.

Sobat dapat meng-upload sebuah gambar (misalnya ke Picasa) dan kemudian gunakan (URL) gambar tersebut sebagai background. Kemudian dalam hal gambar yang digunakan, saya sangat menyarankan agar memakai gambar dengan ukuran kecil (misal: ukuran 1 x 25 piksel) agar tidak mempengaruhi kecepatan loading halaman blog.

Sekian dan semoga dapat membantu. :)

08/08/12 03.30 O

Mas eltelu, sudah Berhasil saya terapkan. silahkan mas lihat hasilnya di blog saya. Untuk gambar background blog saya minta sarannya mas yang cocok warna apa? Trima kasih banyak sudah membantu saya...Salam Damai Sejahtra Buat Anda.

Anonim
08/08/12 20.59 O

@Kraeng FranciscoKeren Sob, tampilannya terkesan bersih, jernih, dan adem sehingga enak dipandang.

Untuk sementara, saran saya coba Edit HTML lagi kemudian cari kode .tabs-inner .widget ul { dan kemudian hapus kode background: #2074a5 none repeat scroll bottom; yang ada di bawahnya.

Maksudnya menghapus kode tersebut adalah untuk menghilangkan warna dasar bilah menu. Atau kalaupun tidak dihapus, coba ganti dengan warna transparan seperti ini: background: #transparent none repeat scroll bottom;

09/08/12 02.47 O

Tq Master atas Tutorialnya.. sangat membantu para newbie.. silakan di cek hasilx jika ada kekurangan mohon di konfir

Anonim
09/08/12 21.19 O

@MharxOke... sama-sama Sobat. :)

03/09/12 20.33 O

keren sob.. Hermanbagus mau nyoba :)

04/09/12 02.00 O

@Herman sahTerimakasih Sob. Silakan apabila ingin mencoba mengimplementasikan teknik tersebut.

13/09/12 20.45 O

knapa ya sob dblog sy tgl.y g terlink.. cara.y agar tanggal.x terlink gmana ya.?

13/09/12 22.52 O

@AgusductankSobat, jujur saja saya agak kurang paham dengan yang dimaksud tanggal yang terlink.

Tapi apabila yang Sobat maksud adalah tanggal yang tidak terlihat, bisa jadi karena pengaturan pada post widget memang demikian, sehingga akhirnya tanggal tidak ditampilkan di atas artikel yang diterbitkan.

Sekian dan semoga dapat membantu.
CMIIW

Anonim
28/09/12 14.28 O

wah kayanya musti erguru disini nih soalnya banyak tutorial yang belum ane ketahui makasih ya mas, bookmark dulu deh biar gak ilang :D

29/09/12 02.57 O

@Limit PostSama-sama Sobat. Silakan bila berkenan melakukan bookmark. :)

Anonim
10/12/12 18.16 O

sebelumnya saya mohon maaf karena teknik kostumisasi dari eltelu sudah banyak yang saya terapkan di blog baru yang saya kelola tanpa izin terlebih dahulu,pertama kali saya sangat merasa kesulitan menerapakan teknik-teknik dari eltelu memandangkan sebelumnya saya sudah memakai custom template,saya sangat berterimakasih atas teknik-teknik yag diberikan telah banyak menambah pembelajaran saya dalam mengedit template,izinkan saya juga untuk belajar dan menerapkan teknik kostumisasi template tampilan mobile dari eltelu yang memang sangat mobile user friendly..sekali lagi terimakasih..salam dari saya TKI indonesia

14/12/12 16.04 O

@centraniaga.comSilakan Sob. Saya rasa tidak apa-apa bila Sobat menerapkan berbagai teknik kustomisasi template yang saya terbitkan. Dan saya pun turut senang bila dari berbagai artikel yang saya terbitkan akhirnya dapat diambil guna dan manfaatnya. :)

How To ▶
Education ▶
SEO ▶
Other Internet ▶
Programming ▶
Tutorial ▶
DP & Story ▶
Tips & Trick ▶

o

  • .Ragam Tumbuhan
  • .Unik & Langka
  • .Aneka Buah
  • .Produk Sederhana
  • .Karya Seni
  • .Tempat Wisata
  • .Ragam Kegiatan
  • .Aneka Bunga
  • .Hewan & Serangga
GALERI
KIRIM MASUKAN
E L T E L U
Semar Bingung's Weblog