6 Feb 2011

How to Change Jump Break (Read More) Font, Color & Background Color in Blogger Template Designer

Change Jump Break (Read More) Font, Color & Background Color in Blogger Template Designer


Blogger officially supports 'after the jump' summaries. You can insert a jump break anywhere in a post to make it short on the blog homepage. The part after the jump break will be visible only when user will click on the Jump Break or Read More link. In this tutorial, we'll add some coding in the template HTML. After that, you'd be able to change the font, color or even the background color of the Jump Break or Read More from the Template Designer.


Please don't use this tutorial on your blog if you're not using 'Simple' Blogger template, otherwise you might get an error!

This tutorial is also available in video form at my YouTube channel:
http://www.youtube.com/user/BloggerEngineer

What is Jump Break or Read More Link?


If you don't know anything about Jump Break or Read More links, please read the following article in the official Blogger help.

Creating 'After the jump' summaries

Steps


Follow these simple steps to complete this Blogspot tutorial.


  1. Log in to your Blogger account.
  2. Open 'Design' tab then 'Edit HTML' tab.
  3. Scroll down a bit and you'll see this code:
    /* Variable definitions
    ====================
    Tip: Windows users can press 'Ctrl + f' to fing the code.
  4. Replace the above code with the following code:
    /* Variable definitions
    ====================
    
    <Group description="Read More" selector=".jump-link">
    <Variable name="rm.font" description="Font" type="font"
    default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px 'Trebuchet MS',Trebuchet,Verdana,sans-serif"/>
    <Variable name="rm.color" description="Color" type="color"
    default="#f9f9f9" value="#eeeeee"/>
    <Variable name="rm.h.color" description="Hover Color" type="color" default="#eeeeee" value="#eeeeee"/>
    </Group>
    
    <Group description="Read More Background" selector=".jump-link">
    <Variable name="rm.bg.color" description="Color [www.betatemplates.com]" type="color"
    default="#000000" value="#000000"/>
    </Group>
  5. After that, find ]]></b:skin> and replace it with the following code:
    .jump-link { float: right; font: $(rm.font); background: $(rm.bg.color); }
    .jump-link a, .jump-link a:visited { color: $(rm.color); }
    .jump-link a:hover { color: $(rm.h.color); }
    ]]></b:skin>
  6. Now, save your template.
  7. After saving template, open the 'Template Designer'.
  8. In 'Template Designer', expand the Advanced tab and you'll see 'Read More' and 'Read More Background' tabs at the top.

  9. You can change the font, color and background color and instantly see the preview. However, change in 'Hover Color' can't be previewed instantly. You'd have to open the blog and bring your mouse over the Jump Break or Read More link to see the 'Hover Color' effect.
  10. After customizing the Jump Break or Read More link, click 'APPLY TO BLOG' link to save your changes.
Description: How to Change Jump Break (Read More) Font, Color & Background Color in Blogger Template Designer Rating: 4.5 Reviewer: Unknown - ItemReviewed: How to Change Jump Break (Read More) Font, Color & Background Color in Blogger Template Designer Hot News!!! "Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda"
Share on :

0 komentar :

Posting Komentar

Mau tukeran link? silakan buka Link sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.

 
© Copyright Dunia GUE 2011 - Some rights reserved | Powered by Blogger.com .
Template Design by Herdiansyah Hamzah | Jejaringkan Kami di Jejaring Sosial (duniague.net)