Blogging tips and tricks

Customize Cloud Labels Into Bricks Using CSS

By goldenworks on 8/24/2013

Having a label(s) in our posts is a vital part in order to let our readers be easily directed to what tutorials they want to read in our blog. In order to make your labels be presentable we need to add CSS on it. In this tutorial, I will show you on how to style your label in a form of bricks like appearance. The code below can be customized in several manner to create exciting label designs. You can also add background images to them.
Live Demo

Customize Cloud Label Into Bricks Using CSS

Check Also:
How to Customize Labels in Blogger (Another Version Using CSS3!)
Follow the easy steps below:
Step 1. Go to Blogger > Settings> Layouts
Step 2. Click add a gadget and choose Labels
Inside the settings make sure to choose the cloud display. You may set other options as per your requirement. See the screenshot below as example

Note: Too much labels on homepage look awkward. Showcase your best categories only.

Step 3. Now save the widget and go back to Blogger Dashboard settings
Step 4. Click Template ( have a backup of your template for your reference)
Step 5. Click Edit HTML
Step 6. Search for the code below

]]></b:skin>

Step 7. Just above the code in Step 6, paste the following CSS code:

/*-----Bricks Style Labels Cloud Widget by Bloggingtipsandtrix.blogspot.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}

Optional Customization:

If in case you want the label boxes to be of random sizes depending on the post-count then simply delete font-size:10px; from the above code.

Step 8. Save your template and you are done!
Visit your blogs and look your new labels with a new professional looks.
Hope you find this tutorial a helpful one and if you have some questions regarding this post, feel free to leave it in our comment box. I will try my best to answer your queries.

How to Replace Newer, Older, and Home Links with an Image

By goldenworks on 8/23/2013

Another area that seems interesting to customize is the home, newer, and older links in our blog. Replacing a beautiful image on it is the best way to attract our readers to navigate our older posts and it that manner our daily pageviews will increase dramatically.

Replace Newer, Older, and Home Links with an Image

Step 1. Go To Blogger > Template (back -up your template for reference)
Step 2. Edit HTML
Step 3. Search for the tag below

<data:newerPageTitle/>

Replace it with this code,

<img src="URL-OF-PREVIOUS-BUTTON"/>

Step 4. Now search for second code,

<data:olderPageTitle/>

Replace it with this,

<img src="URL-OF-NEXT-BUTTON"/>

Step 5. Then search for this,

<data:homeMsg/>

Replace with this one

<img src="URL-OF-HOME-BUTTON"/>

Note: Make sure to replace the URLs with the Image Links of your uploaded Images.

You can also use my own images link below:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicngPU0thoN8Gj0jf7R4D8WsoM2tnJgmB8KtP7pZn2YnXWVTtVrXskmXSE2TCNUJ_4BeC4QCjAwunwHof3Mk4jGyBrJW0fGAHCmXYheDMTXXF3ARzijnWkZXaUVvn31L7A_SSnDvMg3Wo/s1600/photofun-251018398.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisSnmmWpGQMFPnR8itxamGBHshLlZMaFCwUM_lwGDrpDQr3f2VMXBI5-s0tFrreDZOnsP42C1cLUixlZjuKeRK7wYrzdHEPzfUGA1_bkEWPfnw6Ob1kyV7JmMKytl1DEPMqohnipXhkKk/s1600/photofun-1333223112.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAmQQ1EddUzstl9AQoARF6NbUZ4sNkdkgUTJ1rwvrHGnbHROSYz91rBfFhRiqbGW0hgFg4tXVPFEMhjz3YQouEP9afQO_MBsbqYcQmbGqI_KtFvOl8Ig6MFBJ1dawZlewpiFp3MfR2bUw/s1600/photofun-27343763.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkrXiim5YzAyH3jNrE7pYopWWUN4h2ZuKPtH6e7yroLHpa91gSm3Y2hYGWe-6rjUzxSOxKv5gwSrQAKbzpM4zZNwE3cJCx2VW0pXyT6_1UeNcO4SoVRC0OlrI_5EzW0udmcfMoUE3xqBs/s1600/photofun-1034621941.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBwGndX1DGJWx-OQXuDM8xS3AC9Nm6rCE-_6rIoxXZ4DWDHqoO1ZpwBaD8arEcAt-XBAHAMZUcrMbIyXcO6wNSlbZlgVWs38EuCwPbMwEHFeFipCCU9KI71lPbTjdBLYhGHzQFT_yy6WE/s1600/photofun-277312947.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvCb-zwByX9SbWOB9nY-MNDHchA9bBvmoqXmoVi8XxLonHwQABpwO_1aUro1dIhJegDz81vFayZe6jp1wivNYppGj02w_61Dax20DlyNCXJkWZveYHHfgSJiwO_MtAtJXhA-FD_3CykA/s1600/photofun-1194819151.jpg

Step 6. Finally save your template and enjoy the new look of your home,newer, and previous links!

Check Also:

Happy Blogging Friends!!!

How to Add Multi Hover Effects on Images Using CSS

By goldenworks on 8/21/2013

Recently, I was exploring the effects of CSS until I've made a different hover effects to images in Blogger post. Today I'm going to show you a different trick using CSS but with another version to make it more professional in looks. The trick is all about "how to add an amazing mouseover effect for Blogger images using only CSS", wherein if a mouse will hover an image from different directions (from above, below, left or right ) will result an overlay transitioned .Another feature of this trick is it also allows you to add a texts that would go through your mouse hover.

Live Demo

How to Add Multi Hover Effects on Images Using CSS

Check Also:
How to use the new Blogger Template HTML Editor
Step 1. Go to Blogger Dashboard >>Template ( have a back-up of your template)
Step 2. Edit HTML button
Step 3. Search for the tag below

</head>

Step 4. After you have found it, place the set of code below just above it:

<style>
/* The container and the image */
div.multi-hover {
overflow: hidden;
position: relative;
vertical-align: middle;
width: 100%;
height: 358px;
line-height: 358px;
}
div.multi-hover img {width: 100%;}

/* The texts that, by default, are hidden */
div.multi-hover span {
color: #FFF;
font-size: 32px;
font-weight: bold;
height: 100%;
opacity: 0;
position: absolute;
text-align: center;
transition: all 0.3s linear 0s;
width: 100%;
}

/* And this is what will generate the effect */
div.multi-hover span:nth-child(1) { /* right */
background: none repeat scroll 0 0 rgba(255, 189, 36, 0.6);
left: 90%;
top: 0;
}
div.multi-hover span:nth-child(2) { /* top */
background: none repeat scroll 0 0 rgba(106, 170, 255, 0.6);
left: 0;
top: -80%;
}
div.multi-hover span:nth-child(3) { /* left */
background: none repeat scroll 0 0 rgba(204, 87, 166, 0.6);
left: -90%;
top: 0;
}
div.multi-hover span:nth-child(4) { /* bottom */
background: none repeat scroll 0 0 rgba(97, 181, 115, 0.6);
left: 0;
top: 80%;
}

div.multi-hover span:hover {opacity: 1;}
div.multi-hover span:nth-child(2n+1):hover {left: 0;}
div.multi-hover span:nth-child(2n):hover {top: 0;}

</style>

Step 5. Save the Template

Whenever you want that this trick will work on your images just follow the steps below:
Step 1. Choose a Posts or create a New Post, switch it on the HTML mode and paste the code below inside the empty box:
Important! Do not click on the Compose mode, otherwise the span tag will be lost.

<div class=multi-hover>
<span>hover right</span>
<span>hover top</span>
<span>hover left</span>
<span>hover bottom</span>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnNbGyqOotTf4HpAievjVCJTMEMRV-2Z0D81Tj0u09pmMfsIeX_hQMazVIVfdTRnxgviniOS9Jwzo5ruFoVsH80XB7VCBB5SfMTLBxyppphLOjRu4FmpeBkO5OD02PijaQLHPLx1oss-mn/s1600/lights.jpg">
</div>

Add your own text/description to "hover right", "hover top", "hover left" and "hover bottom" and replace the url in red with the image URL (3) where you want to apply the effect.

Check also:
How To Upload Images In Blogger And Get The Image Link
Step 2. After you finished editing your post, you may now Publish or Update it.
Thanks for reading this post and I hope that in some other ways this could help your blog in driving more traffic.
I would like to share the credits to helplogger for providing the initial codes.

Have A Blissfull Blogging Day!

10 Best Seo Tips for Newbie Bloggers

By goldenworks on 8/20/2013

Having a beautiful and well customized blog is a vital part of every blogging task. It admires your visitors once they land to your blog pages. But this is not enough with your blogging career. You need to practice Search Engine Optimazation (SEO) in order to tell the world that you have this kind of blog and you’re happy to share it for free.

Below are some of the SEO tips that may help you to be on the right track of your blogging career.

1. Quality Content

- It is most often said that “content is king”. As a blogger we should provide our readers with fresh, quality and reliable content. Robots will be happy if you create something new to the world or if you publish something that is already known, present it in a unique and with more enhancements. Limits your words for at least 300- 500 characters.

2. Treat Post Title with H2-tag

-Next to your blog content that you are going to maximize is you post titles. By default, post titles are treated with an H-3 tag. You should change that H-3 tag to H-2 tag in order to increase your pagerank. To know more about treating post titles with H-2 tag, click here.

3. Adding alt tag to your Uploaded Images

-We should also maximize our contents through putting images on it and in that images you will add an alt tag to tell robots that they are related with your contents. Click here for assistance.

4. Practice Blog Commenting

-To a newbie blogger, it is quiet hard to let others to drop comments on your posts but I will tell you that if you just take time to comment (a good one) on other blogs, those professional bloggers will also comment back on your posts. But the essence of commenting doesn’t evolve only with the two of you, others also will follow because you already started the ball rolling.

In blog commenting, you establish linkages with other people and most importantly the back links which are also a great source of traffic.

5. Add Sharing Widget to your Blog

-Sharing widgets will help you spread your content throughout the web. Put this in every corner of your blog plus the email subscription box. I know the effect is slow but time will come that you will see its dramatic result.

6. Publish your Post at Regular Time Intervals

-As an experienced, I tend to publish my post at exactly 10:51 (Philippine Standard Time) with an intensity of one post per day. You can schedule your post publishing as long as it follows a certain pattern. You may publish one post per day at a specific time or two if you can but don’t publish too much, a maximum of three posts per day only. If ever you publish more than one post, say two post for example, wait for seven minutes to publish the second post.

7. Permalink Editing

-If posts titles are important, so with your permalink. Permalink is the link of your posts. Edit your permalink with at least six (6) most targeted keywords. Click here to know more on permalink editing.

8. Guest Posting

-In the first stage of our blogging career, guest posting is essential so that we will be exposed to the world of blogosphere an at the same time they will follow you. Try to win the heart and confidence in presenting your guest posts to them.

9. Putting Author's Image at the Search Engine Result Page

-In statistics people will tend to click those post in SERP if they see an image right before the topic that they are searching. You can click here for the tutorial.

10. Link your Blog with other Sites related to your Blog Niche!

-Connect your Blog for at least four professional sites related to your blog. I believe this could also help.

Note: All the above SEO tips were being practiced by the author itself. No the same SEO will work in all blogs.

How to Hide or Show CSS Effect in a Specific Page of your Blog

By goldenworks on 8/14/2013

In my previous tutorial, I shared to you on how to hide or show widgets in a specific page of your blog and it is quiet helpful especially if we try to focus our readers in our content only. But do you know that we can also show or hide CSS effect in particular page of our blog and some of our blog pages ? Sounds interesting! Please follow the steps below.

Hiding or Showing CSS Effect in a Specific Page of your Blog

Step 1. Select one of the CSS Effect that you made in your page. You can found this above the
]]></b:skin tag of your template.

For example in my case I want to show only the effect of the following CSS in specific page in my blog.

.sidebar .widget {
border:2px dashed #FF0000;
padding:0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
background-color:none;
}
.sidebar .widget:hover {
border:2px ridge #DF0101;
padding:0;
}

Step 2. Now in order to show the above CSS in my choosen page, I used the Blogger conditional tag below

<b:if cond='data:blog.url == "URL of the page"'>

Step 3. Then I put a <style> tag at the upper and lower part of the CSS like the one below:

<b:if cond='data:blog.url == "http://codes2tipsandtricks.blogspot.com/2013/08/how-to-animate-moz-normal-border-in.html"'>
<style>
.sidebar .widget {
border:2px dashed #FF0000;
padding:0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
background-color:none;
}
.sidebar .widget:hover {
border:2px ridge #DF0101;
padding:0;
}
</style>
</b:if>

Step 4. Now, after I made that set of codes above, I placed it below the ']]></b:skin' tag.

Just follow the steps which I illustrated above in order to show a CSS effect in your particular page.

Hiding CSS in Other Pages of your Blog

1. Show CSS only in home page,

<b:if cond='data:blog.url == data:blog.homepageUrl'>

2. Show CSS only in post pages

<b:if cond='data:blog.pageType == "item"'>

3. Show the CSS in a specific page as illustrated above

<b:if cond='data:blog.url == "URL of the page"'>

4. Hide CSS on a particular page

<b:if cond='data:blog.url != "URL of the page"'>

5. Show only CSS in a static pages

<b:if cond='data:blog.pageType == "static_page"'>

6. To hide CSS in a static page

<b:if cond='data:blog.pageType ! = "static_page "'>

7. Show CSS only in Archive pages

<b:if cond='data:blog.pageType == "archive"'>

8. Hide CSS only in Archive pages

<b:if cond='data:blog.pageType ! = "archive"'>

9. Hide CSS in post pages

<b:if cond='data:blog.pageType != "item"

Hope you find this tutorial a helpful one!
Check also

Peace out to all bloggers around the world!

How to Display Google Search Results in a Separate Page in Blogger

By goldenworks on 8/13/2013

How users' friendly is your blog who has a navigation tab, a search box and a sitemap. But if we add another page on it that would display the search results of the queries of your visitors is an outstanding one. You can also optimize your adsense revenue out of this technique but nonetheless it is not just making money. The main reason why you must do this is that you will help Google in indexing your posts more fast than before.
Note: This tweak will not take effect if you are using search box via Blogger's Lay-out.

Step 1. Create a Search Result Page

1.1 Go to Blogger Dashboard
1.2 Click Pages >> New Page >> Blank Page
1.3 Put a title 'Search Results'.

Note: Don't put any content on it, just leave it blank.

1.4 Publish it (without any content) and view the it.
1.5 Copy the URL of the page and keep it (we will use it at the proceeding steps below). You can find it at the browser address bar. See the screenshot below.

Step 2. Creating Your Google Customs Search Results Code

2.1 Go to Google Custom Search Engine
2.2 In the Set-up menu, click the Look and Feel

2.3 In the Look and Feel area choose Two Page

2.4 Click Save and Get Code
2.5 Now don't be confuse in this particular stage.
At first you will be instructed to get the code for search results. See the screenshot below

Next, click again the blue button and you will be instructed to get code for search box. See the screen shot below.

Please keep the two sets of code in a safe place (we will use this in the next steps).
2.6 Now click the button at the top right corner, this is the Search Results Details. In the first empty box (top), put the URL of your Search Result Page (in step 1.5 above) and in the second box (buttom), put your blog initial name like BTT in my case. See the screenshot below for guidance.

2.7 After you filled the necessary informations you may now click Save button.

Step 3. Creating the Search Box and Adding the Search Result Page

3.1 Go to Blogger Dashboard >> Lay-out >> Add Gadget

3.2 Scroll down and select HTML/Javascript
3.3 Paste inside the empty box the code for your search box ( do this as you usually did in putting html/javascript code). Then position it at the most prominent place ( at the top-right corner of your blog). Then Save Gadget.
3.4 Now paste the code of your search results to your page you have created in step 1. It must be in HTML mode.
3.5 Hit update and you're done! That's all!
Hope you like this little tutorial and I'm glad to hear your feedbacks friends!

Happy Blogging Day :=)

Subscribe to: Posts ( Atom )