Open top menu
Showing posts with label Blog Designing. Show all posts
Showing posts with label Blog Designing. Show all posts
Tutorial # 31 - Social Media Sharing Widget using AddThis

Without any doubt "Sharing is Caring", those who care and like you posts intent to share them to their social media profiles. This widget helps them to share your content and to make it available to other people. This in turn will promote your blog.


There are many ways to add the social media sharing widget in your blog. However we are using "AddThis" to add different types of social sharing widgets in your blog.

Step 1: Visit the https://www.addthis.com/get/sharing page & Click on "SIGN UP FOR ADDTHIS"

Step 2: Create an account in AddThis. You may also log in through Google, Facebook or Twitter accounts

Step 3: Click on "TOOLS"

Step 4: This will provide you with a number of different types of social sharing buttons. We're going to have Floating Sharing Sidebar

Step 5: You will have some settings regarding your social sharing buttons
Changing the settings doesn't affect the code given below. Before pressing the button "Activate" you need to copy the code and paste it just above <div class='post-footer'> in Template > Edit HTML.

If you want to edit or change the settings of the widget, you just need to your account and amend the setting without making any changes in your blog.

Related Tutoriols
Tutorial # :
Tutorial # :
Tutorial # :
Read more
Tutorial # 30 - Custom Numbered Page Navigation Widgets for Blogger

You may have a customized Numbered Page Navigation Widgets. In this tutorial we are providing you various types of page navigation. These can be inserted in your blog by following the steps given below.

Step 1: Go to Blogger Dashboard > Template > click on the Edit HTML button

Step 2: Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box. Then search for the following tag


Step 3: Now choose one of the numbered page navigation styles given below and copy the code and paste it just above the code.

These are the following codes for page navigation widgets along with their designs:





 Step 4: Now find (CTRL + F) this tag:


Step 5: Add the following script just above it:


After installing, you might want to change these default settings:


 1) perPage: how many posts will be shown in each page (7). This value has to be the same as the number of posts on the main page. Otherwise, add the same number by going to "Settings" > "Formatting" and type it in the "Show at most" field, then click on the "Save Settings" button.
2) numPages: how many pages will be shown in the page navigation (6)

3) to replace the 'First', 'Last', "« Previous" and "Next »" texts, just type your own within the quotes.


Step 6: Click on the Save Template button and you're done.
Read more
Tutorial # 29 - Custom Search Boxes for Blogger

Step 1. Go to Layout > click on the 'Add a gadget' link on the left side

Step 2. Choose HTML/JavaScript from the pop-up window > paste any of the codes of the search box given below inside the empty box

Step 3. Press Save
These are the following Codes for Search Boxes along with their designs:
Formal 1

 Formal 2


 Fancy 1

Fancy 2


 Fancy 3


 Fancy 4


Read more
Tutorial # 28 - Omega: jQuery Image Slider Plugin For Blogger

In Tutorial # 25 we have learnt how to make simple image slider as shown in our home page. Now we are moving forward to next level as in this tutorial we will be having a beautiful image slider for Blogger / BlogSpot made with jQuery and, of course, with HTML and CSS. This slider is known as Omega Image Slider.

It is a lightweight jQuery plugin that will display multiple images in a limited space using navigation arrows (previous-next buttons). On the upper left of the slideshow, we have some small bullet icons indicating the current image that we are viewing and, on the upper right side, is the pause option and a timer letting us know when the next image will be displayed.

Step 1: Go to Layout Template, click on Edit HTML


Step 2: Click anywhere in the code area and press Ctrl-F to open blogger's search box

Step 3: Then search for: 

and just above it add the following code:


Step 4: Then search for:

and just above it add the following code:
Step 5: Click on the "Save template" button to save the changes



Step 6: Use the HTML/JavaScript Gadget to include the slideshow wherever you want

Now we have the option to add the slider either inside one of our posts/pages, or display it as a gadget on the blog' sidebar or below the header. If you choose to add it inside one of your posts, switch to the HTML tab and paste the code below inside HTML box of your post. If you want to add it in the blog sidebar/below the header, go to "Layout", click on the "Add a gadget link" > choose "HTML/JavaScript" from the pop-up window and paste the following html code inside the box:


Step 7
This code contains the images, links and descriptions for each image. The URLs of the links and images that you need to replace with your own. Inside the HTML code of each image, you have the size of each picture that can be changed by modifying the width (590) and height (348) values. To add the description for your pictures, replace the text in red.

If you want to add more pictures, add this HTML before the tag:

Notice that each image and description has an unique identifier (id) and shouldn't be repeated. For instance, in the description text of the first image, we have the id="photo1" and within the image code is the "rel" attribute with the name of the id, that is rel="photo1".


Step 8: After you added your images, click the "Save" or "Publish" button and that's it Now you can enjoy this cool Omega Image Slider for Blogger
Read more
Tutorial # 27 - How to Center the Blogger Header Image

Without any doubt, header is the most important part of your blog as it describes your blog. The header is also the identity of your blog. By adjusting the positioning of your header, you have greater flexibility over the overall design, and it allows you to really shine light on this content. It's hard to miss a header that is placed smack dab in the middle of the screen on every page that someone navigates to.

Step 1. Go to "Template" and click the "Customize" button on the right side



Step 2. Navigate to "Advanced" > "Add CSS" tab and paste the code in the empty box
Paste the following code over there:
#header-inner {
background-position: center !important; 
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;
}

Step 3. Then click the "Apply to Blog" button and you'll see the effect as shown below


Here are some other aligning options for your headers; you copy any of the following codes according to your needs:

 1. Image on the right and title on the left
#header-inner {
background-position: right !important; 
width: 100% !important;
} 
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;
}
2. Image on the left and title on the right
#header-inner {
background-position: left !important; 
width: 100% !important;
} 
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;
}
Read more
Tutorial # 25 - Slideshow Widget

There is the code of the slideshow as displayed on our home/landing page.
This is a slideshow widget which needs to be amended a bit according to your requirements. This can be included in either the HTML/JavaScript widget or a post. You need to upload those images which you want to appear them in the slideshow provided the size of the images should be 640px  x  350px (See line # 8). You also need to copy the image links by inserting them and then press right click on them one by one and click on "Copy image address" and paste the links in the lines # 133 - 138. You may add/remove images by adding/removing the links. After doing all this remove the images.



You may make multiple changes in the slideshow like size(ln 8), pause time(ln 104), transition time(ln 105), etc. Try to understand and interpret the HTML code! See Tutorial # 12 - How to write Privacy Policy, Disclaimer, and Terms & Conditions for your site

Read more
Subscribe to: Posts (Atom)