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://lh4.googleusercontent.com/-pVUC_2t4N3Q/VHUyuRgha5I/AAAAAAAAC6g/Wm6jR3X_21U/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.
How you have set the drop down menu list in your blog? i try many time but not done . can you help me plz??
ReplyDeleteizazroghani.blogspot.com
Hi Izaz,
DeleteI feel your frustration. I spent at least 80 hours or more trying to get a drop down menu. I tried so many different codes and even managed to get a few looking like they worked but could only get one drop from them. I tried every code and method. On the test websites I use I would have the code working perfect but once entered into Blogger it wouldn't work.
Sadly it's your template that's preventing a drop down menu. I am meeting with someone this week to see if there is a way to still get a Blogger template adjusted for one and will let you know what I find. In the end a few days ago I went on the hunt for a new template for Blogger. I suggest you google templates for blogger. There are many out there and I'm currently testing this one. Sora Templates makes many for Blogger. I've looked at many of there templates and the features are amazing like drop down menus. The down side is customer service is lacking. You can get them for free but they all need a little tweaking. I've tested 3 templates of there's already. I'd like to test many more of them before suggesting them and well also trying to find the easiest ways to show Bloggers how to work with the templates.
My best suggestion when using a third party template is to make a new blog address. This way you can upload the template and play around with it to make sure you like it and get it all set up without disturbing your current blog. You'll need to get into the HTML area for them but it will give you an opportunity to see how things work.
I love questions so if you do happen to try them out let me know if you need any help.
Thank you very much. i m trying to upload a new template and solve this problem, Anyway your twitter bird is outstanding in flying .
ReplyDeleteHi, I was just wondering if you could post or link me to where you got your social media icons from?? I've had a long haul struggle with mine and I gave up but I just dont like how big and bulky mine are but yours are perfect! or to similar ones if you're not comfortable with sharing the ones you have, thank you!
ReplyDeleteMeg x megsbeautycorner.blogspot.co.uk