How To Make Rotating Image Holder For Blogger Images

Life See live demo here: Hover effects create variation on what is so called common look. We simply like new things. We love to deal with it.Today, I am going to share with you another trick in blogging through a rotating hover image holder for a specific image on your blog.This blog was made possible right after I visited the blog of Md. Atiqur Rahman (Atik) .This tutorial is divided into to parts. Putting HTML in your blogger post editor's page and adding CSS in your blogger template source code. Add Rotating Image Holder for Blogger Images Part A. Adding HTML CODE to Blogger Editor's Page Step 1. Go to Blogger Dashboard >> Post or New Post Step 2. Switch it to HTML Code and Paste the code below <div align="center"><div class="imgholder"><div class="outer1 circle"></div><div class="outer2 circle"></div><br /><br /><br /><figure> ...

Add your Profile Pic or Avatar next to Post Titles in Blogger

Adding a Profile image next to your blog post titles gives a more personal look to your site. It indicates that a real human is working behind the site and the site doesn’t generate auto content with no attention to readers. You have seen web entrepreneurs using their profiles pictures on their blog next to each one of their posts. An example includes shoemoney. So lets add this beautiful add-on to your blogger blogs and make things even more neater. Kindly see a demo first: *Add a Profile Image Next To Post Titles 1.Go To Blogger > Design > Edit HTML 2.Backup your template 3.Search for .post h3 or .post h2 4.You will see a similar code like this one, .post h3 { color: #7CA2C4; font-size: 20px; font-family: Arial, sans-serif;; font-weight: normal; margin: 0px; padding: 0px 10px 0 47px; } Replace the above code with this one, .post h3 { background:url(IMAGE LINK OF YOUR PROFILE PIC) no-repeat top left; color:...

How To Integrate Properly Font Awesome Icons In Blogger Blog

Since then, Blogging is rapidly changing daily. Previously, we used heavy images intended for decorating our blogger template. But due to the use of mass graphics template loading time dramatically increase on account of slow loading visitors are certainly not interested to stay on blog a certain site. In the mean time, many new features have revealed and after this we would able to use different widget and plugin within our Blogger template. At least, for now we can easily use vector icon instead of images without any java script html coding through Font Brilliant. Font Awesome bundled 369 Icons under one font that's best for using in a website. And it also helps designer intended for optimizing their web-site's icons. Now almost all of the professional Blogger template designers are using Font Awesome. *WHAT IS FONT AWESOME Font Awesome is a pictographic language of web-related actions. It is also known as iconic font. For...

How To Make Text Slider In Blogger

After observing the about page of OLX.com, I decided to make a slider not for the image but a slider intended for the texts. You can put this technique in your about page, in your sidebar or anywhere you like. Furthermore, this innovation also adds professionalism to your works. Without much words to say, let's make a texts slider for your Blogger blog! *Text Slider In Blogger Blog Step 1. Go to Blogger Dashboard >> Edit HTML (back-up your Template) Step 2. Find the code below, </head> Step 3. Just above that code in step 2, paste the code below, <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'/> <script> $(document).ready(function(){ $(&#39;.timeline-item&#39;).first().addClass(&#39;active&#39;); $(&#39;article.2006&#39;).slideToggle(); $(&#39;.timeline-item&#39;).click(function(e) { e.preventDefault(); var clickid = $(this).attr(&#39;id&#39;);...

How To Customize Blogger Blog Using Template Designer

Adding css to our template makes our blog more pretty to look but sometimes we face encounter especially if we are new in using the new Blogger template design. We find difficulty in searching this code ]]></b:skin>. But don't worry because there is still another and more easy way of putting the css code in your template and that this through Template Designer. (Supposing that you are going to add borders to your sidebar and below is the set of code). .sidebar h2 { border-top:1px solid #000000; border-right :1px solid #000000; border-bottom :1px solid #000000; border-left :5px solid #000000; margin- top;0 margin- right;0 margin- bottom;0 margin- left;0 padding:0 0.2em; line-height:1.5em; } Simply follow the steps below; Step 1. Go to your Blogger Dashboard >> Customize Step 2. Click Advanced then scroll down and select Add CSS Step 3. At the right side is a blank field, this is intended...

How To Add Widget Beside Post Body

In this post, I will teach you how to add any widget, it would be an ad or any code (recent comment widget, facebook like box, popular posts widget and the like) that you want to place just beside your written article or post body section of your blog/site. Have a look at the image below. *Adding Widget Beside Post Body Individually Step 1. Go to Blogger >>New Post or (select another post) Step 2. Copy the code below and paste it above your written post/article (it should be in the top most corner) . <div class="widget-beside-post" style="clear: left; display: inline-block; float: left;height: 400px; margin: 12px 20px -50px 0px; width: 234px;">Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....Your widget/ad code here....</div> Example below: <div class="widget-beside-post" style="clear: left; display: inline-block; float: left; height: 400px; margin:...

How To Create Professional Image Slideshows With Jquery In Blogger

Having a stunning image slideshow is not only for the one who runs an image blog. It can be also used to improve your user's experience and in return will increase blog traffic. Furthermore, it will boast your readers to discuss or comment since people will be more interactive if they will not only read texts but also see images. Search engine robot will appreciate more to your post which lead to a better position in search engine results page. I've learned this trick from MBT and do some changes on the script,css and the HTML to have a difference. See first the live DEMO. Step 1. Go to your Blogger Dashboard >> Post or any post you want Step 2. Copy the the code below and paste it in your Blogger Post editor page ( be sure to switch it to HTML mode). <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://s3slider-original.googlecode.com/svn/trunk/s3Slider.js"...