Trick Membuat Berbagai style teks & font di title posting (Judul Posting)

Trik ini dipastikan belum banyak diketahui blogger. Cara membuat atau mencampurkan berbagai style teks dan font di title posting. Anda dapat mnggunakannya terutama untuk memberi tekanan sebuah atau beberapa buah kata di judul posting. Selain itu teknik atau trick ini juga dapat dimanfaatkan untuk membuat drop caps dengan cara penulisan yang cukup simple dan bahkan dapat diterapkan disemua bagian kata title posting. Dan ini yang penting: triks ini kompatible di semua browser!

Sekalipun sebenarnya juga dapat dibuat secara langsung pada box title posting di halaman posting, namun penggunaan kode css membuat penulisannya menjadi lebih praktis. Contoh demo atau penerapan trik ini dapat anda lihat pada judul posting di atas. Tentunya anda hanya perlu memberi bentuk perubahan secukupnya saja agar beberapa kata yang perlu diberi penekanan mempunyai style berbeda. Jika anda setiap kali menuliskan post title dengan tampilan warna-warni seperti terlihat di judul posting ini dipastikan membuat pengunjung pusing, trus ... bisa...bisa mual... dan kasihan klo akhirnya harus segera bongkar celana membuang sebagian anggota "geng-nya" di sungai belakang rumah yang mungkin saja saat ini baru banjir besar! He... he...

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Design (Rancangan).
4. Cari dan klik Edit HTMl.
5. Backup Template dengan cara :
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC. Berikan nama yang berisikan waktu modifikasi untuk lebih memudahkan mengingat dan menggunakan disaat diperlukan kembali.
6. Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode.
7. Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>.
8. Klik Simpan Template (Save Template).

Kode CSS

h3.post-title strong{
        font-weight:900;
        font-size:150%;
}
h3.post-title b{
        color:blue;
        font-size:125%;
}
h3.post-title em{
        color:green;
}
h3.post-title i{
        color:orange;
} 
h3.post-title span{
        color:lime;
        letter-spacing:-1px; 
}
h3.post-title span.redTimesNR{
        color:red;
        font-family:Times New Roman;
}
h3.post-title span.PTblue{
        color:blue;
} 
h3.post-title span.PTmagenta{
        color:magenta;
}
h3.post-title span.PT14italic{
        font-size:14px;
        font-style:italic;
}            

Cara menggunakan Kode di Posting

Gunakan tag sesuai kode css untuk membentuk karakter teks dan font berbeda. Anda bisa gunakan tag <strong>...</strong> , <b>...</b> , <em>...</em>, <i>...</i>, <span>...</span> atau <span class="redTimesNR">...</span> untuk setiap huruf (font) dan teks atau bagian dari teks agar terlihat berbeda baik warna, ukuran, style atau jenisnya sesuai apa yang ingin ditampilkan di title post.

Contoh bentuk penulisan pada post title

Membuat Judul Posting dengan Aneka Gaya dan Warna Font

<strong>M</strong><span>embuat</span> <strong>J</strong><i>udul</i> <strong>P</strong><span class="PTmagenta">osting</span> <span class="PT14italic">dengan Aneka Gaya dan Warna Font</span>

Catatan/Keterangan:

1. Jika tak mau menggunakan kode CSS anda dapat menggunakan berbagai tag di atas secara langsung di halaman posting pada post title.
2. Menggunakan kode CSS membuat penulisan title posting sekalipun dengan cara menambah kode (tag) namun menjadi lebih praktis.
3. Anda dapat menggunakannya untuk menciptakan drop caps dengan metode, tips dan trick blogger di atas.
4. Kembangkan kode CSS di atas agar mendapatkan karakter font yang sesuai dengan background blog anda.
5. Gunakan perubahan style secukupnya pada teks tertentu yang dianggap penting untuk ditampilkan berbeda agar tak membuat pusing pengunjung.

Tips & Trick Membuat Background Post Title (Judul Posting)

Title Post atau judul posting adalah sesuatu yang sangat penting bagi blog. Selain menjadi sember utama mesin pencari untuk meng-index, melalui judul posting pula blogger punya kewajiban untuk membuat pengunjung tertarik mengikuti seluruh isi posting. Pada template blogger box post title atau judul posting sama sekali tidak ditandai secara khusus agar judul posting punya sebuah ciri tertentu yang membedakannya dengan bagian posting yang lain. Jika pun ada, perbedaan yang terlihat hanyalah pada jenis font, color dan ukurannya.

Tips dan trik modifikasi yang akan kita lakukan ini adalah sebuah upaya untuk membuat background pada title post. Tidak hanya sekedar untuk membuatnya terlihat berbeda dengan bagian posting lainnya, namun sekaligus melalui ini setiap blogger punya kesempatan untuk mebuat blog tampil lebih menarik dan membuat ciri tertentu yang tak dimiliki blog lain. Yah..., kreativitas blogger adalah modal untuk terus mencintai blognya sekaligus memacu kemauan untuk secara kontinyu melahirkan posting-posting baru!

Cara menampilkan background di post tile Blogger Template Designer

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Design (Rancangan).
4. Cari dan klik Edit HTMl.
5. Backup Template dengan cara :
   • Klik Download Template Lengkap (Download Full Template).
   • Simpan file template di folder PC. Berikan nama yang berisikan waktu modifikasi untuk lebih memudahkan mengingat dan menggunakan disaat diperlukan kembali.
6. Cari kode ]]></b:skin>. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode.
7. Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>.
8. Klik Simpan Template (Save Template).

Ada dua macam background yang dapat digunakan pada title posting.

1. Background color:
   membuat background color lebih sederhana dibandingkan penggunaan background image. Penggunaan background color juga telah berkembang cukup baik karena gradasi warna melalui css3 background gradient bisa digunakan.
2. Background Image:
   Bagi banyak blogger background image lebih banyak menjadi pilihan karena berbagai kreatifitas bisa berkembang dengan tak terbatas. Anda bisa menggunakan background dengan ukuran paling kecil hingga terbesar. File yang digunakan juga bisa jpg, gif atau png, yang masing masing disesuaikan dengan kebutuhan. Background file berekstensi .jpg sendiri lebih banyak digunakan untuk file image berukuran besar karena cenderung mempunyai beban lebih ringan sekaligus punya kecepatan loading lebih baik.

Background Color:

Background Color Standar:

h3.post-title{
        padding:5px 6px;
        background:blue;
        border-left:3px double #333;
        border-bottom:10px double #333;
}

Background Gradient:

h3.post-title{
        padding:10px 5px;
        border-bottom:5px double #555;
        background:linear-gradient(top, rgba(103,206,224,0) 0%,rgba(7,130,252,1) 100%); /* standart */
        background:-o-linear-gradient(top, rgba(103,206,224,0) 0%,rgba(7,130,252,1) 100%); /* Opera  */
        background:-moz-linear-gradient(top, rgba(103,206,224,0) 0%, rgba(7,130,252,1) 100%); /* Mozilla */
        background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(103,206,224,0)), color-stop(100%,rgba(7,130,252,1))); /* google chrome */
        background:-webkit-linear-gradient(top, rgba(103,206,224,0) 0%,rgba(7,130,252,1) 100%); /* google chrome */
        background:-ms-linear-gradient(top, rgba(103,206,224,0) 0%,rgba(7,130,252,1) 100%); /* IE10 */
        filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#0067cee0', endColorstr='#0782fc',GradientType=0 ); /* IE */
}

Background Image:

Background berukuran kecil berulang:

h3.post-title{
        padding:8px 6px 5px;
        background:white url(background.jpg);
}

Background berukuran kecil berulang horizontal:

h3.post-title{
        padding:5px 6px;
        background:white url(background.jpg) left center repeat-x;
}

Background berukuran kecil berulang vertical:

h3.post-title{
        padding:5px 6px;
        background:white url(background.jpg) top center repeat-y;
}

Background berukuran besar tak berulang:

h3.post-title{
        padding:2px 6px;
        background:white url(background.jpg) center center no-repeat; /* center center bisa diganti top center, bottom center, top left, bottom left, top right atau bottom right */
}

Membuat background post title tentunya tak selesai begitu saja dengan kode-kode css di atas. Beberapa property css lain perlu ditambahkan agar penempatan background bisa terlihat lebih baik. Di bawah ini adalah salah satu pengembangan pada syntax h3.post-title {....}. Kode CSS ini juga mengikutsertakan kode css pada posting box agar tercipta kesesuaian jarak antara post title dan kalimat pertama (bagian pertama: bisa berupa teks atau image) yang dipostingkan.

Pengembangan kode CSS background Post Title:

h3.post-title{
        min-height:98px; /* membuat box post title selalu berketinggian minimal 98px (sesuaikan dengan background) */
        padding-bottom:15px;  /* agar ada ruang bawah post title cukup lebar */
        background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggP7IxhtBUjEha9lYKSZheSoKWeqLct6wpPfaoZJrduTN3D0b26ZzK4JKxfBv9f_XUpfYcRzJTv1F33wbsP4oe5_r_dvILEKrgi43DIRJPpDXpJCB4HuQcmshWdQVXscYYgR4tyi0cihyphenhyphenD/s1600/gubhugreyot-gun.png) top center no-repeat; /* top center no-repeat= posisi background di atas-tengah tak berulang */
        background-size:100% 98px; /* background auto width dengan tinggi 98px */
}
.post-body{
        margin-top:-20px;  /* mengatur jarak post title dan box posting (teks awal posting) */
}

Catatan/Keterangan:

1. Background color bisa menggunakan kode teks (black, white dll), menggunakan kode berbentuk #fff (white), #000 (black) dst atau rgba color (contoh: rgba(0,0,0,0.5))
2. Background berulang digunakan ketika background image yang dipergunakan kecil dan diharapkan dapat memenuhi seluruh box post title.
3. Background tak berulang membuat background image ditampilkan utuh sebagai 1 (satu) image saja dibelakang teks title posting. Background ini bisa berupa image berukuran besar,sedang ataupun kecil. Jika berukuran kecil atau sedang biasanya karena ingin ditampilkan pada salah satu sisi/ujung box post title.
4. Untuk background berukuran besar dengan warna kompleks sebaiknya menggunakan file berekstensi .jpg
5. Untuk membuat background gradient dilahkan datang di
   http://colorzilla.com/gradient-editor/

Trick Membuat Drop Caps di Post Title (Judul Posting)

Drop Caps Post Title Blogger Template Designer.
Silahkan klik untuk memperbesar gambar!

Drop Caps tak hanya bisa digunakan di alinea posting saja. Anda bisa menggunakannya juga pada post title (judul posting). Membuat drop caps bertujuan untuk membuat huruf awal(pertama) pada sebuah kalimat agar terlihat berbeda dan terlihat lebih menonjol. Ini bisa anda lakukan agar blog terlihat berbeda dengan blog pada umumnya. menampilkan drop caps pada title posts juga bisa dimanfaatkan untuk membuat blog lebih cantik. Aturlah ukuran dan warna font drop caps agar memberi manfaat secara maksimal.

Drop caps post title di Blogger Template Designer dibuat dengan cara menambah kode css baru (pseudo class) pada syntax h3.post-title. Tambahkan kode css drop caps di atas kode ]]></b:skin> atau melalui box penambahan kode CSS yang telah disediakan blogger yang dapat dakses melalui Dasbor | Rancangan | Perancang Template (Dasboard | Design | Template Designer).

Cara Membuat Drop Caps Post Title di Blogger

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard).
3. Klik Rancangan (Design).
4. Klik Edit HTML
5. Backup Template dengan cara:
   • Klik Download Template Lengkap (Download Full Template).
   • Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke konsisi sebelum modifikasi lakukan klik Browse kemudian Upload.
6. Cari kode:
   ]]></b:skin>
7. Copy dan paste-kan kode css drop caps di atas kode ]]></b:skin>
8. Klik Simpan Template *(Save Template).

Kode CSS Drop Caps Post Title:

h3.post-title:first-letter{
 font-size:125%;
 font-family:Times New Roman;
 font-weight:900;
 color:#FC0;
 text-shadow:1px 1px 1px #000;
}

Catatan/Keterangan:

1. Kode CSS yang berwarna merah adalah kode yang dapat dirubah agar mendapatkan drop caps terbaik.
   
   • 125% merupakan ukuran drop caps yang dapat diperkecil atau diperbesar.
   • Times New Roman adalah font-family. Silahkan pilih yang paling tepat bagi anda.
   • #FC0 adalah warna drop caps. Jika ingin menggunakan warna sama dengan teks post title bagian ini bisa dihilangkan.
   • 1px 1px 1px #000 hanya sebuah tambahan text shadow. Anda bisa merubah ukuran dan warna text shadow atau jika tak dikehendaki bisa dibuang.
2. Selain melalui Edit HTML kode CSS dapat disimpan lewat Dasbor | Rancangan | Perancang Template. Menggunakan cara ini akan menghasilkan penyimpanan pada tempat yang sama seperti halnya jika anda langsung meletakkan dan menyimpan kode css tersebut di atas kode ]]></b:skin>.
3. Untuk memperoleh hasil yang lebih maksimal silahkan kembangkan kode dan padukan dengan syntax h3.post-title a. Di bawah ini salah satu contoh pengembangan kode yang dimaksud.

Pengembangan kode CSS Post Title

h3.post-title a{
       color:blue;
}
h3.post-title a:hover{
       color:orange;
}
h3.post-title a:visited{
       color:gray;
}
h3.post-title:first-letter{
       font-size:125%;
       font-family:Times New Roman;
       position:absolute;
       font-weight: 900;
       color:green;
       text-shadow:1px 1px 1px #000;
}
h3.post-title:hover:first-letter{
       color:red;
}
h3.post-title a, h3.post-title:hover:first-letter{
       transition:0.8s;
       -o-transition:0.8s;
       -moz-transition:0.8s;
       -webkit-transition:0.8s;
       -ms-transition:0.8s;
}