SeORuM: Widget

Browsing "Older Posts"

How to Get Live Chat on Your Blog

If you are running an eCommerce blog and selling some products on it, then it is truly important make to quickly communicate with your customers ask about your products. A live chat widget is capable to do this task. There are so many blogs and websites who already used this widget to make a quick communication with customers. Most bloggers specially newbie are wondering that how they can implement a live chatting widget in their blog. To add this widget in a blog is very easy task, we do can in a few steps. In this post I want to tell you how we can easily install this important plugin in a blogger blog.

There are so many websites who are providing this service free and some take some charges for it. Among this all I select Mylivechat.com because it has many incredible features. You can easily create a free of cost account for personal, if want use for business then you can upgrade. Fast & reliable dedicated server, unlimited bandwidth. You can customize your guestbook to the look of your website. With the help of this, you can answer your visitors’ queries instantly. There are many themes , where you can easily select colors, table size, alignment etc. You do not need any programming language knowledge.

How to Get Live Chat on Your Blog

First of all simply go to https://mylivechat.com/, create an account by providing username, email address and the get the embed HTML code.
Login to your blogger account. Select template and edit html after proceeding, find </body> (by using Ctrl+F), paste the embed code and save template. Live chat will be start working instantly.
I hope you will be successfully installed live chat widget in your blog. If you are facing any problem about this widget then ask in the below comment box.

среда, 24 июня 2015 г.

most commented posts widget

Most excited bloggers who want to add new things in their blog. For those bloggers, today I bring the most commented posts widget. This a widget which show highest number of commented post on your blog's sidebar with pretty CSS3 effects which make this widget more attractive for visitors. The principal of this widget is same as popular posts widget which rise the most viewed posts. If you are interested in this widget and want add immediately in your blog, then it is very easy to add in blogger, simply follow the below steps

How to Add Top Commented Posts Widget for Blogger

Click on below Get Codes and copy all codes from appearing pop up window
Login your blogger account
Go layout section and add new gadget
Select html/JavaScript
And paste the copied codes in it.

Get Codes

Customization

Now you need to do some little customization in these coding

Replace URL "thebloggerguide.com" with your blog's URL

Replace this "10" with how many post titles you wish to display in the list.

Save gadget. Done

Now view your blog, I hope the most commented posts widget will be worked on you blog.

How To Add jQuery Related Posts Widget for Blogger

How To Add jQuery Related Posts Widget for Blogger

Typical Usage #1

To display related links at the end of every post. copy this code into a new HTML/Javascript widget and place at the bottom of the post or at the footer in the page elements section. Widget uses jQuery v1.3.2, If you already included jQuery into your blog. no need to do it again.

In old layout: Go to Dashboard - Design - Edit HTML - Expand Widget Templates.

In new layout: Go to Dashboard - Template - Edit Template HTML - Expand Widget Templates.

Now find (CTRL+F) this code in the template:

And immediately after it, paste this code:

And now click Save Template

Typical Usage #2

To show related links at the side column. copy this code into a new HTML/Javascript widget and place at the side in the page elements section.Again, If you already included jQuery into your blog. no need to do it again.

How to Install Related Posts Widget related links at the side column

I have to write two set of instructions for each steps, as some of you are using the default layout, and some of you are using the new layout. So, let's see how to install this cool widget in your blog..

Step 1:

If you're using the old Blogger interface: Go to Dashboard - Design - Page Elements - Add a Gadget.

Add a Gadget of HTML/JavaScript type.

If you're using the new Blogger interface: Go to Dashboard - Layout - Add a Gadget

2.Click on 'Add a Gadget' on the sidebar.

3.Select 'HTML/Javascript' and add the one of code given below

4. Now Click On Save 'JavaScript' You are done.

And now click Save

понедельник, 22 июня 2015 г.

How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger.

STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-box Expand Widget Templates
Then, find (CTRL+F) this code in the template:

]]>

And immediately before it, paste this code:

/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCDhva60aOJVRZi56QHUuAVXcrc-0D1xggALYUT0XKejKIGMyl0IJwc_8jRnxtIMMpd2HesdsVA8w6YhyphenhyphenxsyDunuxB2rh0bTey-Z-l90hdWpOanDboKPlAhsatoNe0OhTF6RsSa55oP4_/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Now find this code in the template:

And immediately before it, paste this code:

Now click Save Template

Step 2. Adding The Gallery To your template.

Go to Layout >> page elements and on your template’s sidebar, header or footer Click on ‘Add a Gadget‘.

then Select HTML/Javascript

A new window will appear, in title box Type your gallery title, and in content area Copy and Paste the next code

Now click Save

Then instead Of picture 1 Link Type Your Image Url,

and if you want to make the image link to another page or url instead of # Add the target url.

Each time you want to add a new image to the gallery, just repeat this code.

URL 1 #">picture 1 Link" alt="" />

That’s it.

UPDATE: I updated some of my posts, this post I update Recent Posts with Thumbnails Widget for Blogger / Blogspot........

STEP #1

Log in to Blogger, go to Layout ->Add a Gadget of HTML/JavaScript type.

Then add this code in to it:

Blogspot Tutorial

Explanation:

(Edit the values to fit your blog)

tablewidth - Width of the widget

cellspacing - Space between cells (default one is good)

borderColor - Border color (add the background color of your template to perfectly blend it in the template)

thumbwidth & thumbheight - Width and Height of the thumbnail (default are good)

fntsize - Font size of the title

acolor - Color of the titleaBold - you want bold titles? (true or false)

numposts - How many posts you want to show?

home_page : http://24work.blogspot.com/ (change this to your blog url)

And now click Save

UPDATE: I updated some of my posts, this post I update Recent Posts Widget for Blogger / Blogspot with Summary And Read More........

STEP #1 Log in to Blogger, go to Layout

Add a Gadget of HTML/JavaScript type.

Then add this code in to it: