Showing posts with label Post. Show all posts

Must have Codes For A Blogger



I have found some codes that are super easy to use and will help the look and feel of your Blogger.


Boarders and Shadows Around Images

First off I hated having boarders on all my pictures.  I'd have to find ways to make them transparent which always involved too much work and effort until I found this great simple code that eliminates boarders and shadows on all images on your blog.  I wish I had found this sooner.  


.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;
}

 You'll need to enter this code in the CSS section of your blogger.

1. Template
2. Customize
3. Advance
4. Scroll to bottom for CSS

Copy, paste and save! If the code doesn't take just delete the curly bracket and enter it back in. I find CSS seems to be picky when it comes to copy and paste so it doesn't always properly take the code. 

Now all your shadows and backgrounds should be gone!


*********************

Boarders Around Post

Want to adjust the boarder around your post? Maybe give it a bit more space between the side bar? Lower  the header or raise the header?

Very simple code and very easy to play around with. This code will also have to be entered into the CSS area. 

.blog-posts {margin-top:80px}

.blog-posts {margin-right:140px}

Follow the exact same instructions I gave you above which is in bold.  Once entered and working in CSS it's now time to play around with the margin.  Mine were set to 80px and 140px but you can play with those numbers until you find what works for you. 


************************


Center Post Title

It actually drove me crazy that my post title was off to the side. A title in what entices a reader to continue reading. I don't want that off to the side! I want it dead center. Another simple code which will also have to be entered in CSS.

 .post-title {
text-align: center;
}

Follow the exact same instructions I gave you above  1 -4 which is in bold. Also under advance you can make that Title bold and large.  Make sure it stands out!


**************************


Search Box 

Do you use a search box on your blog?  If you happen to use the widget that comes with Blogger I suggest you try it.  It's a Google search box and I find the results don't end up being that great or looking that great.  I want a reader who is looking for a specific post to find it easily.  Plus I like how simple the search box looks on my blog.  Go to it and try it out.  My Failed Attempt At Life  If you like it you can easily create a new widget.


<center>
   <style>   
   #search {  
    border-bottom: 1px solid #BDBDBD; 
       border-top: 1px solid #BDBDBD;  
   background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNjyUWMYWT3GTBjNFYqPP56QzeurTE3sAzTS4aGiBT-jzYoexucZMbvx0mqMmAxIAh_aZn2FsM60530aLUHY8XFu2lC5P-lITOhSeaIlMdFJhUni1GhKh3B7FcnZD4ZFYotRjUDQ/h120/search3.png) 98% 50% no-repeat;  
   text-align: left;  
   padding: 8px 24px 6px 6px;  
   width: 75%;  
   height: 18px; mouse:pointer:  
   }  
   #search #s {  
   background: none;  
   color: #BDBDBD;  
   font-family: verdana; 

   font-size: 11px;  
   border: 0;  
   width: 100%;  
   padding: 0;  
   margin: 0;  
   outline: none;  
   }  
   
   </style>  
   <div id="search" title="Type and hit enter"> <form action="/search" id="searchform" method="get"> <input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" type="text" value="Search" /> </form> </div>  
   <br/><br/>
   </center>


This code needs to be added to a widget or what I did I added it to my About Me HTML Widget I already had.

So this time it's 

1. Layout
2. Add Gadget
3. Select HTML/JavaScript one
4. Paste and Save!


As I keep searching I keeping finding great widgets and codes that have helped me with my Blogger. Have you found widgets or codes you can't live without? What great codes have you found?  I always love to hear back from you.

Easy 404 Page for Blogger

Give Readers A Reason To Stay


No one wants to admit it but we all get it. Yes the evil 404 page. Something broke or went missing and no one knows why! You can get irritated, try again, or just give up. 

How many people put thought into their 404 error page? Lot's of websites with lot's of bloggers but how many of you have thought about your readers and 404 errors?

On Blogger it truly takes only takes a few minutes to create a custom 404 error page. Why not give your readers a reason to stay? A little giggle is all they need to keep on reading. 

First off start looking for an image.  That will probably be the most time consuming part of this little job. You can search for  picture that already says 404 error or you can find just a picture you like or even use a picture of your adorable cat. :)  We all have paint so once you find that picture you can add any text you want to it via paint or any other program. 

Once you get that perfect picture done you need to create a new post on Blogger. Once you're on your new post give it a title like 404 Do Not Delete!  After that select insert picture. Once you insert that picture, save and following that select the HTML of your post.  Copy all that code and close your post.


Now off to Settings, Search Preference and there you will find Custom Page Not Found.  Select Edit and insert the code from your image. Now enter this code after the code from your image.

<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 9500);
</script>

This little code will redirect anyone who lands on your 404 error page after a set amount of time to your home page.  Mine is set to 9500 but you can change that number to anything you like.  You can test your 404 error page by going to your home page and adding /404 to the end of your url. It will look like this. http://numinousgirl.blogspot.com/404  You can try mine out to see how it works and how something so simple can add a big change.

If you end up making up your own 404 image please come back and share them.  Would love to see all the creative and cute ideas everyone comes up with.  If you don't mind sharing them I'll add it with a link to your Blog.

About Me Round Blogger Picture

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.
Subscribe to: Posts ( Atom )
Powered by Blogger.