About Me Round Blogger Picture

Wednesday, January 13, 2016 Unknown 0 Comments

Profile Picture 


This is probably one of the simplest things you can do to give your Blogger a not so Blogger look and it's actually very easy to do. You can do it by changing a bit of code in the HTML area which is actually not that hard to do but I find even with it round I'm limited on how much I can do with it. I like that I can now easily change it.



I went from this 


To this in minutes



  

First thing you need to do is find a picture and now crop it into a circle. Not to worry this is actually easy to do and you don't need Photoshop or anything like that.  I actually found a very easy to use website.  

Tuxpi  This is the easiest cropping website I have ever used.  Will take only a minute or two to crop your picture and you can even use many of their other shapes too.  


Once you get your picture perfect and saved now comes even more easy.  Get on your blogger and start a new post.  In the end you'll just save it but never publish it. Just make sure you name it something like NEVER DELETE ME!  First thing you'll need to do is center your margins in the post.  After that upload your new cropped picture.  If you happen to have a boarder on the picture or any other picture I'll show you an easy way to get rid of all of them too.

Now under your picture write what you want everyone to know about you. Anything! That's the great part about making your own. You can say nothing to say everything.  Once you have it perfect all you have to do is simple. Save it and go into the HTML part of your post. 



Copy all that code and head over to layout.  Select add a gadget and pick the HTML widget. Paste all that code in it and that's it! If you want to adjust the height of it a bit easiest thing to do it add spaces. You can do that by going back to your post or the new gadget and entering some  <br /> which are just spaces.

This method I love the most because it only takes a few minutes to make any changes to your new Blogger profile. 


Now if you have borders or shadows on your pictures or images just go to the CSS area. 
Template - Customized - Advance - scroll down and CSS

Copy and Paste this code in the CSS area.  

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 0 !important;
  border: none !important;
  background: none !important;
  -moz-box-shadow: 0px 0px 0px transparent !important;
  -webkit-box-shadow: 0px 0px 0px transparent !important;
  box-shadow: 0px 0px 0px transparent !important;}

If for any reason it doesn't work here is a little simple trick I learned.  Delete the curly bracket at the bottom and type it back it.  Anytime you have a code that doesn't seem to take properly and it should work best thing is to delete a punctuation from the code (which makes it go wonky) and put the punctuation back in.  It's the way to kick a code into gear and it seems to work.  Now if the code doesn't work it's something else but this is a great trick to try first.







0 comments :

Powered by Blogger.