Thursday, November 28, 2013

[Blog Design] How To Edit Twitters Design On My Blog?



 For a few months ago, there were many pro bloggers that have a twitter feed like this on top of their blog and I think it was really nice that I wanted to make one too. 

But then twitter suddenly changed the codes and most pro bloggers removed it, because their designer created it for them and once the codes changed, they did not know how to fix it.


Personally I don't like the original box from twitter
Removing the frame give you a chance to re-design it



You can find this under settings

Click Widget!




If you don't already have one, you can create a new widget




1. Exclude Replies
That mean it won't show up your twitter feed if when you reply to other twitters. I would tick that option, because I only want to show what I want to share, not when I am like chatting with other twitters.

Auto-expand photos
I would tick this one off, because it will show the whole photo on your twitter feed once you post a photo on your twitter. I don't want something that will take so much space.

2. Advanced Editing
The options from above is only the most basics, if you want to edit it more advanced like removing the frame and other things. Then you will need to learn some simple code, they will show it to you if you click that link.





The code and twitter feed I get from basic options




The Code and twitter feed after advanced editing




Don't you like this one more?



How To Make It?

I added these code to remove everything around it!

data-chrome="nofooter transparent

noscrollbar

noborders 

noheader"



after the first sentence:

<a class="twitter-timeline" 


Add width and limit tweets:


"width 350"  data-tweet-limit="1" 


Just put it after these codes I mentioned from above.

You can change the width and how many tweets you want to be shown.




I hope that I did not make it too complicated 
and it's useful for you!

Let me know if you have any questions.

Follow Me  : Facebook / Twitter / Bloglovin / GFC

10 comments:

  1. wow this is really helpful. Thank you very much!

    ReplyDelete
  2. Very helpful post , I was looking for this info
    Keep in touch,
    www.beingbeautifulandpretty.com

    ReplyDelete
  3. You're so talented! I'm so clueless with html... hehe~

    ReplyDelete
  4. Wow thanks for this!
    http://c0yoteugly.blogspot.com

    ReplyDelete
  5. wow! thankyou, this has really helped me.. I'm gonna add mine to my page xx



    ReplyDelete
  6. I love your blog name and awesome tutorial! I might try this out for myself :)

    - Tori
    milkblackteablog.blogspot.com

    ReplyDelete
  7. this post is finally the answer to my wondering-how-you-design-your-twitter-on-banner.

    ReplyDelete
  8. Thanks for sharing this helpful post ^^

    ReplyDelete

I always read all comments, I will reply all comments that have questions!

Tweet me if you want a quick reply
@yomistyle

Related Posts Plugin for WordPress, Blogger...

ShareThis