Trik Merubah Posisi Readmore di Kanan, Kiri & Tengah

Readmore tidak harus selalu di kiri halaman blog, di kanan atau ditengah-tengah. Anda bisa merubahnya sesuka hati disesuaikan dengan kenyamanan hati saat melihatnya atau agar lebih terlihat pas di blog. Trik merubah posisi readmore blogger ini didasarkan pada kode html yang digunakan di New Blogger Template. Selain merubah posisi, dengan sedikit menambahkan kode yang lain, bahkan anda bisa merubah ukuran teks link readmore atau jika dikehendaki dapat pula dirubah warna tampilannya. Semua perubahan hanya dilakukan melalui kode css, sehingga tak perlu merubah xHTML yang terdapat diantara tag pembuka body & tag penutupnya. Sebuah trik yang sangat praktis dan dipastikan dapat dilakukan dengan mudah oleh siapapun juga.

Cara merubah posisi readmore blogger

1. Login ke Blogger
2. Dasbor (Dasboard)
3. Template
4. Backup/Restore Template.
5. Edit HTML
6. Template › Edit HTML
   • Procced (Lanjutkan)
   • Cari Kode : ]]></b:skin>
   • Gunakan Ctrl + F untuk mempermudah & mempercepat pencarian.
   • Copy & paste-kan kode css tepat di atas kode tersebut.
   • Silahkan pilih kode css yang sudah disediakan di bagian bawah dan pilih kode css yang sesuai dengan posisi penempatan readmore yang diinginkan (kiri, kanan atau tengah). Jika anda hanya ingin merubah ukuran teks link atau merubah warnanya, anda dapat juag menggunakan kode yang telah disertakan juga.
   • Setelah yang dipilih sudah ditempatkan secara benar, lanjutkan klik Simpan Template/Save Template
7. Selesai...
8. Buka blog dan lihat hasil perubahan yang terjadi pada readmore.

Kode CSS perubah Posisi Readmore

Setiap kode perubah posisi readmore akan disertakan juga kode css untuk perubah ukuran teks link readmore dan perubah warna teks link readmore. Jika anda hanya kan merubah posisi, kode yang berkaitan dengan ukuran teks link dan warna teks link bisa dibuang/dihilangkan.

Posisi Readmore di sebelah kiri (left)

.post .jump-link{
    margin:15px 0 0; /* 15px untuk mengatur jarak antara teks link readmore & teks posting */
    text-align:left; /* text-align:left; untuk posisi readmore di sebelah kiri */
}
.post .jump-link a{ /* kode css untuk perubah ukuran, ketebalan & warna teks link */
    font-size:16px; /* ukuran teks link readmore  */
    font-weight:bold; /* ketebalan font teks link readmore  */
    color:red; /* warna teks link readmore */
}

Posisi Readmore di tengah (center)

.post .jump-link{
    margin:15px 0 0; /* 15px untuk mengatur jarak antara teks link readmore & teks posting */
    text-align:center; /* text-align:center; untuk posisi readmore di tengah */
}
.post .jump-link a{ /* kode css untuk perubah ukuran, ketebalan & warna teks link */
    font-size:16px; /* ukuran teks link readmore  */
    font-weight:bold; /* ketebalan font teks link readmore  */
    color:red; /* warna teks link readmore */
}

Posisi Readmore di kanan (right)

.post .jump-link{
    margin:15px 0 0; /* 15px untuk mengatur jarak antara teks link readmore & teks posting */
    text-align:right; /* text-align:right; untuk posisi readmore di kanan */
}
.post .jump-link a{ /* kode css untuk perubah ukuran, ketebalan & warna teks link */
    font-size:16px; /* ukuran teks link readmore  */
    font-weight:bold; /* ketebalan font teks link readmore  */
    color:red; /* warna teks link readmore */
}

Perubah ukuran, ketebalan dan warna teks link readmore

Jika hanya ingin merubah ukuran teks readmore, ketebalan dan warna teks link readmore, cukup gunakan kode di bawah ini. Bagi yang hanya ingin merubah posisi readmore tanpa perubahan teks, silahkan buang kode di atas yang sama dengan kode berikut.

.post .jump-link a{ /* kode css untuk perubah ukuran, ketebalan & warna teks link */
    font-size:16px; /* ukuran teks link readmore  */
    font-weight:bold; /* ketebalan font teks link readmore  */
    color:red; /* warna teks link readmore */
}

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit