Showing posts with label CSS. 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;
}
.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 == "") {this.value = "Search";}" onfocus="if (this.value == "Search") {this.value = "";}" 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.
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.
What In The World of HTML, CSS, Widgets and JavaScript???
So I decided to finally take the big plunge and start a blog. As most bloggers I decided to start working on some content and I swear I did at first but then I realized my Blogger didn't do the things I wanted it to do. I thought the only thing I needed to know to have a blog is well type! Was I ever wrong.
Welcome to the world of HTML??? What language is this? I love that Blogger gives you access to HTML. It looks cool but what does it do? How does it work? I'm still scared about touching it. The slightest mistake can make my blogger go boom!!! Luckily we have the world of Widgets.
widg·et
- a small gadget or mechanical device, especially one whose name is unknown or unspecified.
- an application, or a component of an interface, that enables a user to perform a function or access a service.
Widgets in other words are great and can be found under Layout and then click Add A Gadget. You get a pop up window and the widget that you'll end up using the most is the HTML/JavaScript one. You can add it anywhere on your layout since you can easily move it around after. These widgets are a great way to try out some code without doing any permanent damage to your blog. Enter the code, save, preview blog and delete. Do that enough times and you'll eventually find the code that works for you.
Cascading Style Sheets (CSS)
is a style sheet language used for describing the presentation of a document written in a markup language.
Luckily I learned about CSS too, I absolutely love CSS and do my best to use it over touching the HTML code. It's really easy to enter a code in CSS, You can try a code and well if things go boom it's so easy to delete the new code you entered. It kind of gives us newbies and little idea how code works. CSS can be found under Template followed by Customize and Advance. Under advance you scroll down to find the CSS option. Am amazing way to add simple little code to your blog without having to go inside the scary world of HTML code. I've added several pieces of code into my CSS already. I enter the code, hit save and well look at the result. If it goes boom I can easily find and delete the code I entered. It will always be at the bottom since it was the last one you entered.
HTML
Hypertext Markup Language. a standardized, system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
Yikes HTML!!! It's really cool that a whole bunch of code has created the world of internet that we all can't live without. I love everything I can do online and am amazed that behind every little thing is some crazy ass code. I'm starting to understand a tiny bit of it but I'm still scared each time I enter EDIT HTML. This can also be found under layout but instead of Customize you click EDIT HTML. That's all the stuff that makes your Blogger blog. Great thing to learn is the search option. You can do that by clicking inside the code and
PC
Hold down ctrl, select F
Mac
Hold down command, select F
Many codes require you to enter it within a certain another certain code like </head> and the search tool will help you find that code versus scrolling through all the letters and numbers. I've entered a bit of code so far via edit HTML but am still scared about using it since I'm horrible at backing up and am worried one day it will go boom and well I'll have no idea how to fix it. I can search for the code I entered and deleted but am worried the damage won't be reversible . Hope fully after time I'll feel a bit more comfortable about it but for now I try not to use it too often. I did enter a code that was meant for a widget but I couldn't get it to work out exactly the way I wanted it too without entering it into the scary world of HTML but luckily I did take the chance because the code meant for the widget is working much better inside the HTML code.
Ja·va·Script
- an object-oriented computer programming language commonly used to create interactive effects within web browsers.
JavaScript is nothing but cool. I don't understand it but it's amazing at the things it can do. I hope one day I'm able to understand it a bit more but for now the only thing I can do is tweak the code I find. Luckily these codes are easily entered inside the Widget most times.
If you want to tweak or understand how all those letters, numbers and punctuation works I suggest you find a website that allows you to test and tweak all the code you find. There are several websites you can use for free like
CSS Deck This websites allows you to test with CSS, HTML and JavaScript.
These websites are free and honestly a great place to adjust any code you want to use. You enter the code, see the result and via that you can easily see and adjust your code without doing any damage.
Subscribe to:
Posts
(
Atom
)
Powered by Blogger.
![]() |
| Hi I'm Delia Melo, mother of two incredible girls that measure their happiness by how messy the home gets. I love life and will take on any challenge that comes my way. Recently dipped my toes into the world of HTML and will share any hidden treasures I find. Contact Awkward Bloggest. Essence Of Hypnosis |
Popular Posts
-
Hi I'm Delia Melo mother of two incredible girls that measure their happiness by how messy the home gets. Easy going mom who...
-
We've all done this and I know I do it often. You see them on the street, coffee shop, grocery store, laundry mat, maybe ev...
-
VB.NET System.Text.Encoding Conversion Example I ran into an issue on one of the ASP.net applications where the encoding was being passed ...
-
Okay.. so I wasted a day trying to figure out why all my asp websites would return PAGE NOT FOUND error pages on a Windows 2003 and IIS 6.0 ...
-
Yesterday, I had a report of our Rockwell Lanagent Clients getting a C Runtime error after they had closed the program and tried to restart ...




