Discussion Portal | Tips and Tricks For Bloggers

This blog content is to help bloggers specially blogspot.com bloggers to have tips and tricks few hacks to make their blog look good to people and even to google bots



Make Your non-compatible blogger codes to compatible

, No comments

Parse your blogger code here 👇

Use this online converter to parse your chitika, adsense,adsterra, adbrite and any HTML code into XML code which is not compatible with all the Blogger templates to make code compatible with all blogger templates or other blogs systems.

Parse Code


Now Copy pate this code and it will be compatible in blogger template

Parse Code
Share:
Read More

How do I fix m1 problem on Blogger? Solve ?m=1 Issue

No comments
How to Fix ?m=1 error issue in blogger m=1 Fix: Many blogger face this problem. This is a normal thing for smartphone url. It jusr suffix for mobile to direct user to mobile version of blog. But some time search consol give error related to m=1. If you think search consol giving error related to this or you dont want this suffix for your blog. you have to add small code in your blog. For this edit your blog theme for this follow these points one by one as it is 


Solve m=1 Issue







1. First login in your blog. 

2. Go to your theme by clicking theme on right side control panel in blogger. 

3. If you wann see this by images go this post How to Edit Theme in this post i show how to create blog and edit theme, layout to add widget. 

4. Note: Before editing anything take backup of your theme, so anything go wrong you can revert to previous form. If you do not know how to take backup of your theme Click here "How to take backup of theme or restore it. 

5. In your theme html editor find
"<body>", if you can not find then press "ctrl+F" or see Find in your browser gear (:) three dots. 

6. Copy pase this code just below "<body>" tag
<script type='text/javascript'>
//<![CDATA[
var uri = window.location.toString();
if (uri.indexOf("%3D","%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("%3D%3D","%3D%3D") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("%3D%3D"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("&m=1","&m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("&m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
var uri = window.location.toString();
if (uri.indexOf("?m=1","?m=1") > 0) {
var clean_uri = uri.substring(0, uri.indexOf("?m=1"));
window.history.replaceState({}, document.title, clean_uri);
}
//]]>
</script>
7. Save your template and see result in your smartphone browser. the problem will be solve.

8. If this not worked for you then go to bottom in html editor and search "</body>" and pase above it. and again check in mobile browser.

Please like and Share this post on social networks.
Share:
Read More

How to change google search snippet for your blog

, No comments

How to Change Title Meta Tag? 

Do You have problem with your google snippet for your blog? You want this type of link to show in google?, For this you have to change title tag of blog
How to change Google Snippet


So follow these step to make changes in your HTML,  header title meta tag 

1. How to go in html editor see this post but first take backup of your theme so you can revert to your orignal before edit, if anything go wrong  How to edit theme in blogger 

2. Go to top of your html editor if you are not already there. 

3. Find this title tag
 
<title><data:blog.pageTitle/></title> 

 4. And replace title tag with this one by copy paste
<b:if cond='data:blog.pageType == &quot;index&quot;'><title><data:blog.title/></title><b:else/><title><data:blog.pageName/> <data:blog.title/></title></b:if>

 5. Save your template

Share:
Read More

How To Create Your site or Blog Images Responsive

, No comments
Do you have problem with your site or blog images width and height? And you want to make these images responsive? Ok let make images responsive, for this we have to edit our site or blog template to add few codes. 

1. First we have to put first part of code in head section to edit CSS of theme. I will here show you how to add in blogger theme. How to edit theme in blogger, click here

2. In that section you learn how to edit blogger template or theme, Now i will show you how to add code in template or theme

3. Press ctrl+F key from your keyboard a popup window will appear it depend on browser in chrome it will appaer in top right, in firefox it will appear in bottom left side. find this code " ]]</b:skin>" in theme editor as shown in image
4. Add any one of these code just above " ]]</b:skin>" 

(a). Add CSS code : If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto:

.responsive {
  width: 100%;
  height: auto;
}

 

(b). Add this code If you want an image to scale down if it has to, but never scale up to be larger than its original size, use max-width: 100%:

.responsive {
  max-width: 100%;
  height: auto;
}

 

(c). Add this code If you want to restrict a responsive image to a maximum size, use the max-width property, with a pixel value of your choice.

.responsive {
  width: 100%;
  max-width: 400px;
  height: auto;
}

 

5. Now finaly add this code in html or edit your image class as responstive

<img src="nature.jpg" alt="Nature" class="responsive">

 

Share:
Read More

How to edit theme in blogger

, , No comments

How to Create Blog in Blogger and Edit Blogger Template (Theme) 


1. First go to blogger.com and signin with your email, if still not create blog first signup. 

2. Second step to click on create blog or New blog. Fill your name of blog which you want to create in popup window or new window


click next, in next window fill your blogger name, if that name not available choose another name, if it available then save your blog.



3. To edit your blog theme click theme in your left hand-side panel
4. Now customize button will appear click on arrow as shown in image below
5. Now your theme html section will appear to edit theme. But before making any changes in  template, First take backup of your template to prevent if anything go wrong, with this backup you can revert  blog to its orignal position before edit. Now you are ready to edit your theme, add or remove any code which you want. In this section i show you how to create blog in blogger and edit theme of blogger.



Share:
Read More

How To Add Code Box In Blogger Post

No comments

Most new bloggers starts blogging from blogspot.com. If you create new blog and want to share your blog link with other bloggers for link exchange but don't know how to do this, here i am sharing this method with you. I am also using this. Its very easy just follow these steps one by one. 


1.  First step is to login to your blogger account.

2. Second step to edit your theme to copy paste this code, for this click on theme button in your left hand side control panel as shown given below image,


Edit blogger theme

Now click this cursor button as shown in below image, do not click Customize button

Edit Theme in blogger


3. Now you will enter in html section of your blogger them here you can edit your them codes, you can delete code which you not required or add new code just like we going to add in your theme's "CSS" section. 

4. First you have to find " ]]</b:skin>  " this code in template you can find it by scrolling down slowly of press ctrl+F a search box will popup in your browser copy paste this code in search box and find or enter. Once you find it copy paste any of these two codes just above it like in picture

Find Code in blogger theme





Code 1. For Style 1 Copy This Code [With Scroll]


.code1 { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }


Code 2. For Style 2 Copy This Code [Without Scroll]


.code2 { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; }
.code:hover { background-repeat:no-repeat; }

 



5.   Copy paste this given code below to your above code in your html to show scrolling box BLUE.

/* blockquote */ .post blockquote {background-color:transparent;border-left:8px solid #ff7400;padding:10px;margin:10px;overflow-y: scroll; max-height: 250px; margin: 1.5em 10px; padding: 3px 2em;} .post blockquote{color:#000000;font-family:"PT Serif",Georgia,Times,serif;border-left:5px solid #ff7400;margin-left:0;margin-right:0;margin-bottom:27px;padding-left:27px} blockquote blockquote{font-size:inherit}


Now save template by click on floppy icon and you are done

6. In this step i will show you how to use this. 

(a). Create new post in your blog. Click on html or pencil icon you will see html view or compose view, now click html view.

(b).  Now write or paste the code given below in your blogger post editor.

For Green Box

                       <div class="code1">
                        Your Code Here. Which ever you want
                        </div>


For Blue Box
<blockquote> Your Code Here. Which ever you want </blockquote>

c). Replace " Your Code Here. Which ever you want " with your desired code.

(d). Now click on " Publish Button " and see it live. But remember all code write in html view.

Note:- You can also also use another without scrollbar  style here Add Links in coloured box
Share:
Read More

Which is the best video format or ratio for Youtube?

No comments

Which are the best video ratio or formats for Youtube?

There are many formats of video that YouTube accept.





Well you can use many formats to make your videos like 

 Horizontal:        720x1280 (720p)  
                             1920×1080 (1080p) (HD) 
                             2560×1440 (1440p) (2k) 
                             3840×2160 ( 2160) (4k) 

 Vertical:             600×1200 (1:2)
                             600×900 (2:3) 
                             1080 ×1350 (4:5)
                             1080×1920 (9:16) 

All depends on your requirements means the type of video you want to make but among them most popular is For vertical : 9:16 (1080w×1920h) for shorts video. For horizontal : 4K (3840w×2160) for horizontal screen. But these formats make video size bigger consume audience's data, so to make lower MB files use lower formats
Share:
Read More

Add Blogger Avatar in Comment Section

, , 3 comments
How to add Avatar in Blogger Comments?

This trick will add Avatar in Comment Section in blogger posts. This trick is only for those templates in which avatar is not showing.

Actually blogger add this feature very recently in blogger or blogspot templates. It is inbuilt or in default for blogger templates now. But for those templates which are older and made before this feature you have to add few lines of code which i will tell you step by step.

Note: First backup your current template by download it. For download go to Layout, Click "Edit Template" and Download Full Template, Save it to your PC hard drive at appropriate location for easily find.

Now For Adding Code in Template

Step;1 - First Mark Box of  "Expand Widget Templates" this will expand the template to full.

Step; 2 - In template find this line in color box below, You can find it easily by pressing Ctrl F by your key board, a popup box will appear copy and paste this line in box and click search, if line is there it will highligt, if not pressent box will show message not found.
<dl id='comments-block'>

Step; 3 - Now replace the above line with line given in color box below.
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

Step; 4 - In this step find this line given in box below just like find in step-1
<a expr:name='data:comment.anchorName'/>

Step; 5 - In step five replace the line of step-4 with this whole code given in color box below.
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>


Step; 6 - Now Save the template and proceed further.

Step; 7 - This is the step for adding default image. For adding this find this line ]]></b:skin>you can find it by scrolling down, for easy find unmark Expand Widget Templates.

Step; 8 - Place given code in color box below just one step above line find out in step-7.
.avatar-image-container {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkkFzSpE97KcYZGK7v-kEjCkVIwa_6sA-oF7Yc9SF9eFP9_S1_i8OqxXSscHpvqhaOjWt9ypT6zN22MyqbzPwog71rcwDMDimLOSitYH40QmJx8f5A2af0hfS9gwoE3V64ugxebqRQzjI/s1600-h/AvatarBlogger.png); width:35px;height:35px; }
.avatar-image-container img { border:none;}

Save template and you have done. See you post having any comment to check if this hack working.

Important : I have noticed that many template have not line ( ) for this type of template you have to done little more work. So i have add more steps for this type of templates.


Step; 9 - If above hack didn't worked. Find line given in color box below like as in step-1.
<b:loop values='data:post.comments' var='comment'>

Step; 10 - Place this code in color box below just after the above line in step-9. In this case step-5 Ignored.
<dt><b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if></dt>


Save the template and Check if its worked
Share:
Read More

Code for Related Post Widget for Bloggers

, , 2 comments
Code for Related Post Widget for Bloggers




With Implementing this Code in your Template you will able to show your visitor Related Post Articles in every post at the end. This widget show all related post which have same labels so include as many labels as possible in every post below right hand side box in your  editor. But remember these label should really related with post otherwise you will make this widget source of spam. So do not add labels which are not in any way related to that specific post.


Now here is Code and Implementation guide how to add this widget. But before making any changes you have to download your current Template by Click Download Full Template at top in Edit HTML section with this backup you will be able to revert template to its original state if any problem occurred during adding this widget.

Step. 1- Login your blogger account.

Step. 2- Click Dashboard then Layout then Edit HTML, Take backup of your template as said above.

Step. 3- Click  box  above at template editor.

Step. 4- Search </head> tag it will be somewhere in middle your template, if you are not able to find it then press ctrl f ( control f) in your keyboard a popup box appear, search this tag by copy pate in this search box.

Step. 5- Copy and Paste given code below just one line above it as shown below.

Share:
Read More

Inbuilt Label Cloud or Tag Cloud in Blogger

, 1 comment
Inbuilt Label Cloud or Tag Cloud in Blogger

Blogger recently add this in widget section you can add this from widget section. To add Label Cloud or Tag Cloud, go to admin section by login blogger by your google or gmail account. Click layout  add widget, when you click this link a popup window will appear, scroll down to see Labels, Click this you will setting page, here you can set values of label cloud like if you want to change Labels into Tag Cloud or Label Cloud. You can show all labels or only selected ones. Sorting the labels by alphabetically or by frequency, now at the fourth point Display you have to mark cloud. At last step  mark if you want to show no. of post per label or unmark if not want to show post no. This widget has main problem you can not change color of labels, it sticks with sidebar text color, if you want to change the color of tags then you have to add it through template for code and method see this post.
Share:
Read More

Add Friends Blog with recent post

, , No comments
Add Friends Blog with recent post with thumbnail 

( Blogroll or Recent Post widget)

This is also known as blogroll in blogger.Show off what you read with a blogroll of your favorite blogs. Now blogger add this widget in there gadget section.You can add this widget from there in your blog. Follow these steps to add this widget.

1. Login your blogger account.
2. Click Layout.
3. Click Add a Gadget, where you want to place this widget.
4. In the popup window Scroll down below in Basic section.
5. You will see Widget having title Blog List Click this widget.
6. Add blogs you want to list in blogroll by clicking ADD TO LIST.
7. Choose values like Title of most recent item,Thumbnail of most recent item,Snippet of most recent item,Date of last update.
 8. Finally save widget, see you blog.
Share:
Read More

Earn Money by Uploading Photo

, , No comments


Its true you can make money by uploading photo's and wallpapers. Shareapic is this kind of site which provide space to members for upload pictures and wallpapers. When any visitor see your pic it generate few bucks which can see in stat section in members area. It has no limits of uploading pics, only few conditions you have to follow, means you can not upload porn photograph's which shows nudity of any type, copyrighted pics,photo's etc. Except earn from this site you can also earn from bidvertiser ads serving site which is affiliate of shareapic.You have to put given code from bidvertiser to shareapic in code box. This will show your bidvertiser ads just below you pics and you will earn double earning from one pic at a time. Why are you waiting just signup at both site.To Signup Photo to Upload Click Here and For Advertisement Site Click here

Warnings: 1. Do not Upload Porn, Adult or Nude Pictures of Any Kind like in Underwears,Nude,Upskirt,Nipple slip etc.If you upload these type of material your account will be deleted.
2.  Do not click your own wallpapers if your IP address is static or Fixed.
3. Do not click your own wallpapers when logged in or logged out from same IP.


Tips : 1. You can spread your wallpapers links by  making your own photo blogs or through many popular forums, sites, Social Networks like Orkut etc.
2. Do not click your own wallpapers or photo's if yourIP Address is Fixed.
3. Do not click Your wallpapers when you are logged in.
4. Never click your own wallpapers from same Ip Address from which you login and logout , Change IP address first.
5. Never try to click wallpapers from Proxy sites. As you know these type of sites use few fixed Ip address for free users and these address are known by max all sites and webmasters.
Share:
Read More

Automatic Ping Sites

, , No comments


 What is Pinging?


Pinging is the information to send those sites which index feed of blogs. When you make post on your blog these sites index information of that post but this is not automatic, actually you have to inform them about your post. This is done by sending ping to sites. But it will be very tedious to send ping one by one. Now if you find some site which send ping to many sites at once, hows that. These are sites which send ping at once,http://pingblog.co.tv/ . You have to put your blog name and blog url check sites where you want to send ping and click Send Pings or Ping now respectively.
Share:
Read More

Ad Space

Responsive Advertisement

Blog Archive