• Admin
  • Receive an Update


    Convert Ur blog in to a Magazine blog ( Adding 'Read More' styles)




    Is there a big different between your and my template ? hmm ? oh , yes , in my home page I have a Magazine type template with a Read More buttons and you have a blog with a homepage of posts that show their whole body and take a long time to load. And also it makes your blog more longer. ( If you are posting more than 5 posts per a page ). So , do you want to know how to add 'Read More' buttons and make your blog more profeesional ? so here is the way !


    Fisrt of all , go to the Settings tab , then select Formatting tab and go to the option Show. Now add a number more than 5. ( Here in my blog , I keep about 15-20 posts in homepage )



    Now

    1. Edit your Template
    2. Now find out 

    <data:post.body/> 

    press 'Ctrl' + F to open your browser's search box)

    Now Replace 

    <data:post.body/>

    with
     these codes. Make sure that you REPLACE this line. In some templates , I have seen a line as 

    <p><data:post.body/></p> 

    instead of 

    <data:post.body/>

    If then replace the whole 


    <p><data:post.body/></p> 

    line with follwing lines.


    <script type='text/javascript'>
    summary_noimg = 400;
    summary_img = 300;
    img_thumb_height = 0;
    img_thumb_width = 0; 
    </script>
    <script src='http://kfile.110mb.com/summary-post.js' type='text/javascript'/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more</a></span>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

    Now follow the Safety Saving Steps.

    And 

    That's it , now your blog will too get converted to a Magazine type template as following photo.



    Do you like to add a Image too ? like in this photo ?


    Then change these two lines of codes


    img_thumb_height = 0;
    img_thumb_width = 0;

    to


    img_thumb_height = 80;
    img_thumb_width = 100; 

    or any hieght and width that you like to have.


    If you want to increase your post's height ,


    summary_noimg = 400;
    summary_img = 300;

    change these to any amount you need !

    summary_noimg = 400; stand for the post's hieght without a Image.
    summary_img = 300; stand for the post's hieght with the Image.


    Send me a message on Messenger if you need my help.



    More Articles

    ADSENSE BEFORE RELATED POST HERE

    Make use of Smilleys Codes

    Quick Help!

    Having issues? Need quick fix? simply email me or call me

    Learn more

    Write For Us

    Submit a guest post and see it get published real quick

    Learn more

    Advertise Here

    Place relevant banners, links, and sponsored posts at affordable rate.

    Learn more

    Get notified on FB