Tutorial Recent Post Like Me

Misaki PureBlood | April 12, 2014 | | | | | |
Hye There.. welcome to Kuroshitsuji Academy~ Today I'll teach you how to wear proper attire as a butler, how to cook and so on...


I want you to become perfect like me... If you ignore my order~ I will eat you~


AHAHAHAHAHA XDDD what the fish I'm thinking, using Sebastian as my introduction... yamete kudasai.. Stop this immediately...  :D

O.k back to topic... my blogger friend Shiro Usagi asking me how do I make Recent Post like this:


Can you see it? Look at my left section.. you can see there..

So, I'm going to give you a piece of cake tutorial XDD (gomenasai if I use idiom wrongly)

Take Note: I'm using Simple Template (If you find that you can apply this on other template, why not give a try)

1. Go to Dashboard > Layout > Add A Gadget > HTML/Javascript

2. Copy this code and paste in HTML/Javascript
<style type="text/css"> #rp_plus_img{height:377px;} #rp_plus_img li {height:60px;padding:5px;list-style:none; background-color:#ffffff; border:dashed 1px #CAE2FB;} #rp_plus_img a{color:#00000;} #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px; text-align:center; -moz-border-radius: 5px;} #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #000000;width:55px;height:55px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript"> </script> <script type="text/javascript"> var speed = 1500; var pause = 3500; $(document).ready(function(){ rpnewsticker(); interval = setInterval(rpnewsticker, pause); }); </script> <ul id="rp_plus_img"><script> var numposts = 5; var numchars = 0; </script> <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt"> </script> </ul>

Red         |I prefer white background|
Orange    |as you can see, my border image in recent post is black, you can change into other colour if you  want|
Green      |You can change dashed into solid/dotted or anything you prefer and I'm using 1px size border|

Try edit according your taste... (If you want to change height, padding, margin or so on.. just do it) If it make your recent post looks weird try again edit XDD

I don't remember where I get this tutorial.. but thanks for him/her.. XDD

Comment if its your Recent Post working XDD

btw I like your recent post more :D can you make the tutorial :D
Mine does not center XDD ahaha

17 comments:

  1. thaaanks :3
    it works now :D
    we use the same codes btw XDD

    so u want me to share my recent post code? :o

    ReplyDelete
    Replies
    1. wow... you use it?
      btw how you make the recent post to be in center TT^TT

      I try so many time change this and that.. aiyaaa....
      yups... sure.. share it.. onegaishimasu~

      Delete
    2. u should add the justify code :o
      {display:block;font-weight:bold;margin-bottom:4px;font-size:11px;text-align:justify;-moz-border-radius:5px}

      u made it center XDD

      Delete
    3. I try it but its only justify the entry title XDD lol :3
      I want to make the moving recent post to become center.. but I don't know how :D
      ahahaha...
      funny :D

      Delete
    4. [img]http://img4.wikia.nocookie.net/__cb20140317201612/fairytailfanon/images/0/03/Girl-crying.gif[/img]

      Delete
    5. maybe u mess the other code in ur html blog :o

      oh ritw tell me how to make a comment like this :3

      it should work i think :o

      Delete
    6. uwaaaahhh.... I think so.. aiyaaa.... cannot do anything lol XD

      picture comment? :D

      Go to this link: How to Add Videos/Images in Blogger/Blogspot Comments

      Delete
  2. dah buat, hahaha..saya pun try nak centerkan bnda alah ni tpi tk boleh..

    ReplyDelete
    Replies
    1. Eh... tapi tengok center je? ahahaha XDDD uwaaaaa....

      Delete