Genarel And Advance Blogger Help: zblog

Showing posts with label zblog. Show all posts

Go to Template > Edit HTML.
Back up your template.
Tick the Expand Widget Templates checkbox on top right of the code window.

Next, locate the first instance of <data:post.body/> tag and paste the following code immediately above it:




















Tweet

Note: 




Pin It button will only appear on post  pages. We place this limit  because the button only pins the page on  which it appears. As such  on homepage (if we were to allow it there), every  instance of the button will pin the homepage, not the post (as it’s “supposed”  to). 
The Pinterest script in line 45 must occur only once in your blog. Omit this  line if you’ve already had the script in your blog. 

Buttons positioning 
To position the buttons at the bottom of post, place  the code below (instead of above) <data:post.body/>. 
Preview before saving. 
Enjoy!

Nihal

Blogger provide an awesome tool for customizing a template called a Blogger Template Designer. Using Blogger Template Designer you can change the font style, color,width of template, background of template. Blogger Template Designer provide an easy way customizing template if you added interface into template for Blogger Template Designer. In this post I'm telling how to add interface for Blogger Template Designer in your custom template.
Let us start,
Interface with Blogger Template Designer is created with the help of the variables. Variables are used to store some values like color, font family, font size, background image URL. Those values are used into CSS for applying look and feel for template.

This variable are defined between
<b:skin><![CDATA[ and
]]></b:skin> How to Define Variables
Syntax of defining variable is
<Variable name="post.title.font" description="Font" type="font" default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 24px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/> Lets look in details

name is variable name, which is unique name, used to access variable into CSS.
description used to identify variable into Blogger Template Designer.
Using type, Blogger Template Designer decide which type of interface is provide for customizing variable. You can use font, color or any custom string.

Template designer provide the following type of box for changing font value.
For color,

default is default value which is unchangeable, this is used to reset the value of that variable.
value is current value.

Values for color is display HEX_Color_Code format and font in Font_Shorthand format.
Syntax for Font_Shorthand format,

<font-style> <font-variant> <font-weight> <font-size> / <line-height> <fontfamily>

Where font-size and font-family is required, for other used their default value if missing.

Grouping Variables
Grouping variables is make also user friendly interface with template designer. By grouping you can access multiple properties for that element at one place. For example for post title you can group post title color and post title font together. Another example grouping together link color, visited link color and hover link color under the link.
Syntax for Group,

<Group description="Group Title" selector="h1">
....
<!--Variable here-->
....
</Group> 
Where,

description is name of group title, used to categories variable in blogger template designer.
selector mention that which part is selecting from blogger template while this group is selected for editing. It is useful, when someone editing template via designer, it shows to user which part of template being edited.

Example,

<Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Font" type="font" default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 48px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="#3399bb"  value="#ffffff"/>
</Group>

Above code is the group of font and color for blog title, having description "Blog Title" and selector is h1 tag inside class header. So when you select Blog Title for editing in template designer then where h1 tag under header class is highlighted. Type of variable provide a particular interface for editing values, here variable header.font having type font with description Font and variable header.text.color having type color with description Title Color. When you see this in template designer look like as,

How to use in CSS
In general, we are using css like this.

.header h1{
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    font-style:italic;
    font-weight:bold;
    
    color:#00C;    
}
If you want to use an variable in CSS, use variable instead of value closed inside $( ). See following code.

.header h1{
    font:$(header.font);    
    color:$(header.text.color);
}

In this type value for font and color is taken from variable.

Example,

<?xml ... ?>
<html ....>
<head>
<b:skin>
<![CDATA[
/* Variable Defination       
<Group description="Links" selector=".main-outer">
    <Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#c4005b"/>
    <Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#909090"/>
    <Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#ff13b8"/>
</Group>
*/
a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}
]]>
</b:skin>
</head>
<body>
....
</body>
</html> 
You can also use one variable value to define another variable so that  changing the one variable value will reflect effect on all template.



Width of Blog and Sidebar

In template <b:skin></b:skin> used for enclosing an CSS, same as <b:template-skin> and </b:template-skin> is used to enclosed length factor of template means width of template, sidebar.

In this, variable syntax is same but type of variable is length.

<b:variable default='960px'  name='content.width' type='length' value='990px'/>     
<b:variable default='310px' name='main.column.right.width' type='length' value='340px'/> 








Example,

<b:template-skin>
  <b:variable default='960px'  name='content.width' type='length' value='990px'/>
  <b:variable default='310px' name='main.column.right.width' type='length' value='340px'/>
  <![CDATA[ body {
    min-width: $(content.width);
    }
    .main-inner .columns {       
    padding-right: $(main.column.right.width);
    }
    .main-inner .fauxcolumn-right-outer {
    width: $(main.column.right.width);
    } ]]>
</b:template-skin>
I hope this post will help you. If any problem or suggestion leave commen.

Nihal

Today I am sharing an amazing slide out social sharing widget,when any user hovers on this widget it slide out with some social networking button such as twitter,facebook,print,email and add this button which contains share option for almost all social sharing sites.This widget floats to below right corner of the page and scrolls along with page which allow a real time sharing option for your visitors,this widget is created by addthis and bloggerized by us.Now lets go to the tutorial and see how to add this widget to blogger blog.

How To Add This Widget To Blogger?

The installation of this widget is damn easy,you can add this widget in two steps.

Go to Blogger Dashboard > Template
Click On Edit HTML
Hit Proceed button
Find For Below Code,

</head>

add below code just above it,

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

Now find for below code

</body>

add below code just before/above it,

<!-- fastbloggerhack.blogspot.com slideout widget : BEGIN -->
<div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style">
    <a class="addthis_button_more">Share</a>
    <ul>
        <li><a class="addthis_button_preferred_1"></a></li>
        <li><a class="addthis_button_preferred_2"></a></li>
        <li><a class="addthis_button_preferred_3"></a></li>
        <li><a class="addthis_button_preferred_4"></a></li>
    </ul>
</div>
<!-- fastbloggerhack.blogspot.com slideout widget : END -->

Finally save your widget and you are done :)

Nihal

This is also nice hack for comment system in blogger.
When we allow anonymous comment, everyone can
comment your post without using any Google account.
As a result of it. there are no way to provide diffrent
avatar for commentators.So , bloggers use a default
avatar for every anonymous commentator.So, in this
Tutorial helps you to change that default avatar,
Follow these steps to add it to your blogger.
I will show you how to change or customize default avatar of anonymous commenters or Blogger users with no picture added on their profiles. After Blogger announced new feature of threaded comment, we can still customize it by adding a jQuery plugin to our template and replacing the default anonymous avatar found at this

URL http://img1.blogblog.com/img/anon36.png
and the one for blogger users http://img2.blogblog.com/img/b36-rounded.png

...with our own.

Step 1.

Go to Dashboard - Template - click on the Edit HTML button and then Proceed

...then select Expand Widget Template (don't forget to make a backup)

Step 2. Find (CTRL + F) this code in your template:

</body>

Step 3. Add the following code just above it:

<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img1.blogblog.com/img/anon36.png']")
.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNDDBU7QS58pmHtBd1tLSTXsVXXRUqL6jKpDdBtQsGlktckhsdXAILd_364t5Mj-yXK6OV_lVTzBqoK8ARLWLOZeMmkz5i_NxOqn3Si0tUuaqdUhJ3Gxucsh3aD8U6p-c1TpUAtAe8gI/s1600/default_avatar.gif')
.ssyby('blank')
</script>
<script src='http://code.jquery.com/jquery-latest.js'/>
<script>
$("img[src='http://img2.blogblog.com/img/b36-rounded.png']")
.attr('src', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd4dZBf_AUI9N7lMpOMFa_BEi9eE1GGcfiNM7hn3_LgY0NxZMmJcwOPn_c91pVRMpWzOjc7boS2mVunOwN43iM4nBRex4EwPfcdnd6w9VG6n-_SCB2vFMYFMo1TQ9hg1Fik_kOgRho-p4/s1600/blogger-user.png')
.ssyby('blank')
</script>

Step 4. Save the Template

How to change avatar:

For Anonymous users: Replace the code in red with the url address of your image
For Blogger users: Replace the URL in blue with your own.

You can choose one from these below (copy the url address):

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNDDBU7QS58pmHtBd1tLSTXsVXXRUqL6jKpDdBtQsGlktckhsdXAILd_364t5Mj-yXK6OV_lVTzBqoK8ARLWLOZeMmkz5i_NxOqn3Si0tUuaqdUhJ3Gxucsh3aD8U6p-c1TpUAtAe8gI/s200/default_avatar.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLRwbKl3Ld6eF37GPmC8_LGhVorspgVztRlcE3clQu8Y3Z0NZf2FAmTqMcyNs8aBlXBjMCOAtelsR4S2YVEWe5kDi21XjS_JLgQRO60eRqgWV7X01EvkrHpi_r8-hHocpFIcJxIsSIToc/s1600/facebook.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCbynBe1-279IYVPgVKjJjZaDcG2uIX6lpkVxsl3Ej78MMCxzgSwkasDlHx1FCAk21RpTTC_2Uoa7fT8DTx-ZwO7HWNQMEjjh2lAqX7j7NmHuN4FtAztzsCTj1PsqCjfdnxzm-sdLe3no/s1600/anonymous3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4qclMZmE3lLaL6SVzxtHSW46fgHXKJkoLsqAF2L0EcaJWNK35mtSSNQv-UYZ1m-3Lu-JOXxPkLqXqsQM4JwuWpLeCc1tf6G9Aq7fak-ZKsuj9JPSVLGT4tCfaIp7to17cxH35Hx6uU03W/s1600/blogger-user.png

Nihal

To add a redirect system to your blogger site follow the method

Step 1. Log in to your dashboard--> layout- -> Edit HTML

Step 2.Scroll down to where you see <head> tag.
Step 3.Add below code into your template just after the <head> tag.

<meta content='5;url=http://www.YOUR-URL.com/' http-equiv='refresh'/>

Step 4. replace www.YOUR-URL.COM to your url which will be redirected.

It should Look Like This.

<head>

<meta content='5;url=http://www.YOUR-URL.com/' http-equiv='refresh'/>

Step 5.Click on Save Templates and you are done.

Now your blog traffic will be redirected to your new address.

Nihal

`Hi friends today i am going to share how to add` jQuery and CSS3 menu bar for blogger, I’m shared more different menu bars, drop down, vertical drop down, with CSS3 and its more effective to your blog. I told that I’m using jQuery and CSS3 this is first time with using JQuery in menu bar and it is so nice. There are six effective colors to match your blog color

How To Add This Menu TO Blogger?

For easy understanding I am dividing the tutorial in three parts & they are as below,

Adding Scripts
Adding Styles
Adding The Menu

1. Adding Scripts

Go to Blogger Dashboard > Template
Click on Edit HTML
Hit Proceed
Find below code in your template

</head>

add below code just above it,(If you have already added a jQuery library to your blog then delete the highlighted code)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogmasterpoint.blogspot.com/lavalamp-menu.js" type="text/javascript"></script>

2. Adding Styles

Now find below code,

]]></b:skin>

add below CSS code immediately before it,

/*LAVALAMP MENU BY http://blogmasterpoint.blogspot.com/ START*/

.lavalamp {
    position: relative;
    border: 1px solid #d6d6d6;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
 -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
    border-radius : 10px;
    -moz-border-radius : 10px;
    -webkit-border-radius : 10px;
    background : -webkit-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
    background : -moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)), to(rgb(204,204,204)));
 height: 18px;
        font-family: calibri;
}

.magenta {
 background : rgb(190,64,120);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(190,64,120)), to(rgb(177,24,91)));
 border: 1px solid #841144;
 
}

.cyan {
 background : rgb(64,181,197);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(64,181,197)), to(rgb(7,165,187)));
 border: 1px solid #2f8893;
 
}

.yellow {
 background : rgb(255,199,79);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,199,79)), to(rgb(255,188,43)));
 border: 1px solid #c08c1f;
 
}

.orange {
 background : rgb(255,133,64);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(255,133,64)), to(rgb(255,107,24)));
 border: 1px solid #c04f11;
 
}

.dark {
 background : rgb(89,89,89);
 background : -webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 background : -moz-gradient(linear, left top, left bottom, from(rgb(89,89,89)), to(rgb(54,54,54)));
 border: 1px solid #272727;
 
}

.magenta li a , .cyan li a, .yellow li a , .orange li a, .dark li a{
 color: #fff;
 text-shadow: 0 -1px 0 rgba(0,0,0,.40);
 
}

.lavalamp a {
    text-decoration: none;
    color: #262626;
    line-height: 20px;
}

.lavalamp ul {
    margin: 0;
    padding: 0;
    z-index: 300;
    position: absolute;
}

.lavalamp ul li {
    list-style: none;
    float:left;

    text-align: center;
    }

.lavalamp ul li a {
    padding: 0 20px;
    text-align: center;
    }

.floatr {
    position: absolute;
    top: 10px;
    z-index: 50;
    width: 70px;
    height: 30px;
    border-radius : 8px;
    -moz-border-radius : 8px;
    -webkit-border-radius : 8px;
    background : rgba(0,0,0,.20);
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
}

/*LAVALAMP MENU BY http://blogmasterpoint.blogspot.com/ END*/

Now save your template.

3. Adding The Menu

Now come to Page Layout

Now come to Page Layout
Click on Add a Gadget (Below Header)
Choose HTML/JavaScript
Copy and paste below code inside it,

<div class="lavalamp dark">
 <ul>
  <li class="active"><a href="">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Portfolio</a></li>
  <li><a href="#">Contacts</a></li>
  <li><a href="#">Back to Article</a></li>
  <li><<a href="#">How it Works?</a></li>
 </ul>
 <div class="floatr"></div>
</div>

Replace # with the links
Replace Home,About,Blog. etc. with your link text which you want to appear on the menu.
If you want to change background color of the menu then replace <div class="lavalamp dark"> with one of the code below.

<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">

Finally save your widget and you are done.

Nihal

Q:-How to Enable Threaded Comments in Customized Blogger-Blogspot Templates ?

If you want to know How to Enable Threaded Comments in Customized Blogger-Blogspot Templates, just flow the method

Steps to Enable Threaded Comments in Blogger-Blogspot

First of all make sure that your blog feed is set to Full. You can confirm that by going to Settings > Other and then selecting Full from the Allow Blog Feed dropdown.

You must also have embedded comment form enabled. Check that by going to Settings > Posts and Comments and check the Comment Location dropdown.

After that, open the Template section.

Warning: Backup your current template before moving on.
Click the Edit HTML button.

A new window will open. You'd have to click the Proceed button to start editing.

Check Expand Widget Templates option.

Find the following line of code:
<b:includable id='postQuickEdit' var='post'>

</div>
    </div>
  </div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>

BEFORE

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
      </div>
    </div>
  </div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>

Now, we need to find the following piece of code:

<div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comments'/>
        </b:if>
        </div>

and REPLACE the above code with the following one:

<div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
        </div>

Click Save template and then Close button.

Blogger-Blogspot Save Template Close Buttons

Check your blog. If you can see the option of Reply under each comment then threaded commenting is enabled. Otherwise, upload your backup template.

Nihal

Q:-How to Check my Blogger Template Name?

if you want to know what is your blogger template name follow the method

Ever wondered which template you are using? Well, it is pretty simple to know. In this tutorial, I'll tell you how to check the Blogger template of your blog. By default, Blogger offers 6 awesome templates including Simple, Awesome Inc., Picture Window, Ethereal, Watermark & Travel. Follow the steps to check your template.

Open the Template section.

Click the Edit HTML button.

A new window will open. Click the Proceed button.
Now, you'll see a lot of code. Just scroll down a bit and you'll see some code like this:

-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Josh Peterson
URL:      www.com
-----------------------------------------------

From this code, you can easily see the name of the template. In the example, the template is "Simple". After that you can easily do editing or follow some tutorial. Click the following image for details:

Nihal

Q:- how to setup my own custom .com domain for blogger?

Hi, today i am going to share a post where you can get a answer for how to setup my own custom .com domain for blogger?

Fist you should buy a new .com domain which you wanted to pointed to your blogger blog.

Second Go to blogger.com. login into blogger and, create a new blogger website

Blogmasterpoint

Third Go to setting

Fourth Select a custom domain which will redirect to your blogger site

Fifth Swith to advanced mood setting

Sixth input your domain name. then click the save

Seventh On your domain registrar's website, locate your Domain Name System (DNS) settings and enter the following two CNAMEs:

Name, Label, or Host field	Destination, Target, or Points To field
www	ghs.google.com
zcozxtc66tw6	gv-3whv6cgk7ixiyi4tbjjqsbcjonqes3hvbflvevndwzvlwjaqe34q.domainverify.googlehosted.com

5.Now again add another DNS record with the following values A, (leave next field blank),216.239.32.21 and 1800 and click submit
Create 3 More A records with following set of values
A , (leave the second field blank), 216.239.34.21 ,1800
A , (leave the second field blank), 216.239.36.21 ,1800
A, (leave the second field blank) , 216.239.38.21 ,1800
Now you are done................

Need help? pleas comment........

Genarel And Advance Blogger Help

Nihal

Nihal

How To Add This Widget To Blogger?

Nihal

Nihal

Nihal

How To Add This Menu TO Blogger?

1. Adding Scripts

2. Adding Styles

3. Adding The Menu

Nihal

Steps to Enable Threaded Comments in Blogger-Blogspot

Nihal

Nihal

Nihal

Online Chat

Followers

Social Share Icons

Newsletter

Subscribe Our Newsletter

Popular Posts

Label Cloud

Send Your Message

Pages

Blog Archive

Popular Posts

ADDS