Showing posts with label Web Development. Show all posts

How to Add Slideshow in Blogger Blog

Posted by Unknown in , , on Saturday, April 13, 2013


How to Add Slideshow in Blogger
Today it is very common to have an own blog for oneself. But many of us have little knowledge of HTML, CSS and JavaScript.  So what, can’t you create a professional Blog? Of course you can do it yourself. If you are new, I suggest you try free blogger of Google. With the help of Google search you can get many more tutorials you need. In this post I am going to show how to add slideshow in blogger above blog post. Using a slideshow you can attract your visitors to your hot and topmost posts. Besides, it makes your blog look professional and beautiful.

Please carefully follow the steps to add a slideshow in blogger blog.

Step 1: Go to your Blogger’s Dashboard > Click on Arrow button > and click Layout from dropdown menu.

Step 2: Click on Add a Gadget above you Blog post > than add HTML/JavaScript Gadget from pop up window. If cannot see “Add a Gadget” above Blog post, you have to add widget container above blog post.

Add slideshow in blogger

Step 3: Now put the following code in HTML box


<style type="text/css">
 /* JavaScript Image Slider/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 100%;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSuISWz8unbe75QiOp5wyyCxifWR7IUjWWewj3nyDUOVh0JNX1xGnXRfIe_IUt-8KT4cW4dMh_ydIY8zf63JO4SmvdX5VOuYTXOBmva1-XxgKcp-_Gl02N4Q5-754LX2V7SYMsKmapXV8/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 100%;
 height: 250px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsF12FFtWW8Xd0I9U2OkvtuJCojeALgB0dVk8b7Q_g2W1sTGzeSfyQcwikouuLs5vDhxLE5ngyudYg20UjxDIzzzaSyk3elruh6KnX1bxLun8lNo3ObRLm0KVn5xStxlXbUwJID2eg5g0/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: relavive;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibihKGng7FN650WgZi7dW6fv2qiOgAnn7Cp8U4htKvh71jBDgpWUSqJSeUS8izjuG8D4oHiKNCUyTyIMmHpC-41vnyB7lHiXlr6WNLBtcOGsZ0RBpi4PTwPV-e_SLG9etSIqy_IiD-sv0/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style>

<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>
<br />
<div id="sliderFrame">
<div id="ribbon">
</div>

<div id="slider">
<a href="http://traffic-payout.blogspot.com/2013/01/ways-to-earn-online.html"><img alt="Put your Post Title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1iKjFtf_pZB7nql29MMnkyNldz8Q8E-MbW3XMj2vXiuQWOXGn7xbe8ECA5q78ErO_Qlw_XzKbCUi0mnmcG2_mCmfzfXebFNHgrc3KeNYRjFM_MgBpQWLoueVBx4XVuXo9cQaqO-XSqYw/s1600/1.jpg"/></a>

<a href="http://traffic-payout.blogspot.com/2013/04/how-to-seo-blogger-blog.html"><img alt="Put your Post Title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlC52vR_ri-8eWBwxyGz4-f4FUVGNN5BqtiHKq_3jqLhUaoWoZ3PKciDotj0i8d9OfL0rUqIBCZOG3AcUCzgMmnLFAFZY0UGeMLR7cDLLg4ex-Bw4wIsempa8m-2itJNcn5uCyadDis2k/s1600/2.jpg" /></a>

<a href="http://traffic-payout.blogspot.com/2013/02/direct-speech-to-indirect-speech.html"><img alt="Put your Post Title" src="image link" /></a>

<a href="http://traffic-payout.blogspot.com/2013/03/add-html-alt-and-title-tags-to-images-of-blogger.html"><img alt="Put your Post Title" src="image link"/></a>
<a href="#"><img alt="Get SSC 2013 Results" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWsQm7tos1vkqDPazfJykZC72p6z6DS-B5hjFQ4z0z580cPJUolyKWHWa4uf1VLgs4fb92fYgIJXiZox8veoZGvsVIwY6YmVETTay8nq48_xfpBITcYAv7-h-C5gsFTnqGb-5X_OYGw4s/s1600/3.jpg" /></a>
     </div>
   </div>
</div>

Customization:
To customize the height of the Slider, change the following code. Width does not need changing.

#slider {
 width: 100%;
 height: 250px

To change image of Slideshow
Change the Post link,  image link and Alt tag with your post title.

<a href="Post _link"><img alt="Post title" src="Image_link"/></a>

Hope you can easily do it yourself. If you need any help don’t hesitate to comment and ask your question. 

No Comments

How to Add Widget above Blog Post in Blogger

Posted by Unknown in , , on Friday, April 12, 2013


Blogging has become one of the topmost ways of making money online. Many are making a handsome money from Blogging. Now it is very common for everyone who uses internet to have a Blog site. If you don’t have a blog you may learn how to create a professional blog.
As you know that we use many widgets in blog. If some widgets like Slide show and Ads are shown above your blog post, it will be better. But in blogger template you cannot add a widget avove Blog post. In this tutorial I will be showing how to add a widget above the Blog post. For this follow the easy steps:

Step 1: Go to Blogger > and click on template from dropdown menu.

Step 2: Now backup your template and Click on Edit HTML

Step 3: Template editor opens. Press (Ctrl + F) and search. Now search for the code. 
<div id='main-wrapper'>

Now find the following code after <div id='main-wrapper'>

        <b:section class='main' id='main' showaddelement='no'>

Step 4: You have to change the “no” into “yes”. Then the code will look like
        <b:section class='main' id='main' showaddelement='yes'>

Now click Save Template. Now you will be able to add widgets above blog post.

No Comments

How to SEO Blogger Blog - SEO Tips and Tutorials

Posted by Unknown in , , , , on Wednesday, April 3, 2013


how to seo blogger blog
The article is for the very new beginners. They might want to know how to seo your blog. The great article contains some of the most important steps that are very needed to do seo your blogger blog on search engine. If you follow the basic steps of optimizing your site, your blog will be more seo friendly and will be indexed in search engines more efficiently. SEO is one of the competitive and interesting task today. Day by day, the seo techniques are being changed.
However, I will be writing some of the most effective techniques to do seo for blogger blog though there are some other important techniques too. I will be writing all important seo tips such as meta tag and meta description, changing title tag of Blog, post header tag, internal and external linking, use of nofollow link attributes, anchor tags etc. Lets read them attentively.
Comming.........


No Comments

Add HTML Alt Tags and Title Tags to Images of Blogger (Blogspot) Blog

Posted by Unknown in , , on Friday, March 29, 2013

add alt tags and title tags
In Search Engine Optimization (SEO), we have to maintain some seo criteria. I think, now a days on page seo is more important and effective than off page seo. Adding meta and title tag, heading tag, image optimization etc. Image optimization is very important for optimizing your site. As a result, you can get more visitors from image search and web search. To optimize an image we have to add alt tag (alternative text) and title tag of image. Many don’t use alt and title attribute for image. It is now wise for better seo. 


Why is alt tag and title tag of Image important for SEO?

Search Engine bots specially Google Bot can’t read your image. They can’t detect what your photo is about. They only can read texts. Suppose you have added a picture of computer in a post, Google can’t won’t be able to know what about your picture is. If you use title and alt tag to your picture, your post and image will be more seo friendly and internet browser will show the image title even If the browser’s image load option is stopped. Hope you have understood why you should put alt and title tag to an image.

So, How can we add alt tag and title tag to an image?

In wordpress, we can put title and alt tag while uploading. New blogspot bloggers don’t know how to do it.  I am showing the steps for that.


Step 1:   Add an Image as usual method in your new post or if you have already added any image start from Step 2
Step 2:   Now click on the uploaded Image > click on Properties>


Step 3:   Now put your suitable “title tag” in title text box and “alt tag” in alt text box. They should not be more than 4/5 words. Alt tag should be your main key word of your post. Then click on OK.

add alt and title tag to image

Now have already done it.

How to link your post with image?


But your Image will not link to your post. If you click on the Image, it will not show your post but show only the picture. You have add link with the image to your post. For this follow the step.



Step 1: After uploading image and putting the title and alt tag to image, click on the Edit HTML tab from the Post Editor Box Toolbar


Step 2:  Search for your image html source code. That looks something like that

<div style="text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGFJHRe7WQlIJcolJkfnw1Y8JY9mrXpwFy3Jci2JYoI5kqHEIlAdkni0jbysuLt3vblcLScwh6uB7G__361x1NsXIbAEMfiXIR2erezNu_ssYDEWuNl4jkalHPX5PqpG4Z2Rev0FaoeL8f/s1600/images.jpg" imageanchor="1" style="clear: left; display: inline !important; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGFJHRe7WQlIJcolJkfnw1Y8JY9mrXpwFy3Jci2JYoI5kqHEIlAdkni0jbysuLt3vblcLScwh6uB7G__361x1NsXIbAEMfiXIR2erezNu_ssYDEWuNl4jkalHPX5PqpG4Z2Rev0FaoeL8f/s200/images.jpg" width="200" /></a>
</div>

Step 3:   Now delete the red colored link and replace your post link.


Now your post image is fully ready for better optimization. Always try to use your post keyword (Just one keyword) on your Image Alt Tag. It will help you get visitors from Image Search of the search engines too. You may also read Changing title tag of blog post.

No Comments

How To Create Online Form For Website or Blog without HTML Knowledge.

Posted by Unknown in , , on Wednesday, March 20, 2013

Create Online Form With Online Form Builder

How are you all? Hope you are OK. In this post I am going to give you a very useful tip for those who have a website or blog but have little knowledge of HTML and CSS. Many of us have blogs or websites. In a blog or website, we need various forms such as Contact Form, Login Form, Registration Form, Sending Mail Form etc. Creating an online form is not possible If you don’t have HTML or CSS coding knowledge. But you can do it with the help of free Online Form Builder. I have found the easiest online form creator sites.

Top 5 Online Form Builders:

JotForm: Here you don’t need to sign up. Just pick up the desired template and edit the template as your own. JotForm has a ton of pre-made templates for you. It is a drag-and-drop form builder; just select a tool you require, and drag it onto the building area where you can preview what your form looks like.

After designing you have to click Embed option and choose the option you need. I think you should embed the form in your website page with source code. It loads fast on your site.

There are some other Online Form Maker that are  also very helpful. You might also try these sites.

 PForm

PForm-OnlineTutorialBD

HTML Form

HTML Form-OnlineTutorialBD

Reformed

Reformed-OnlineTutorialBD

Accessify

Accessify-OnlineTutorialBD
Hope these online form builders will help a lot. Please don't forget to put a comment. You can ask me regarding your problem. Good bye. Take care.

Incoming Search Terms:

how to create online form
Creating an online form
creating online forms
online form builder
online form maker
Contact form
website development



No Comments