android nexus 7: Template Customization

Home / Posts filed under Template Customization

Tampilkan postingan dengan label Template Customization. Tampilkan semua postingan

Create a Drop down Menu with Go button in Blogger

Posted by Unknown Selasa, 14 Januari 2014 0 komentar

Create a drop down menu with go Button in Blogger:You may have noticed some blogs having long sidebars, this is probably due to large number of widgets.However, we can resolve this problem upto some extent. We have a better alternative for Label widget which is make it drop down. And to put your Archive widget in Scroll box etc.But today I am going to teach you to make a drop down menu.

LIVE DEMO

How To create a Drop down Menu in Blogger

Visit Blogger Dashboard.
Now click on the layout button.
Click on add A new gadget link.
A list of gadgets will appear select HTML JavaScript gadget from the list of gadgets.
Now copy the below coding and paste it inside HTML javascript gadget.

<form name="jump">
<select name="menu">
<option value='#' > Name 1</option>
<option value='#' > Name 2</option>
<option value='# > Name 3</option>
<option value='#' > Name 4</option>
<option value='#' > Name 5</option>
<option value='#' > Name 6</option>
<option value='#' > Name 7</option>
<option value='#' > Name 8</option>
</select>
<input type="button" onClick="location=document.jump.menu.options
[document.jump.menu.selectedIndex].value;" value="GO">
</form>

Now replace the # with the URL you want peoples to redirect, and replace the Name 1, Name 2, .... with the Label or URL name.
Then Save the gadget you are almost done!
For any problems ask us through the comment box stay blessed!

Baca Selengkapnya ....

How to Customize your Bullets Style in Blogger

Posted by Unknown 0 komentar

Customize Bullets Style in Blogger:By default blogger have simple Bullets style that is Circle.Which does'nt look good as visitors likes creativity.So its the time to customize your bullets style easily.Follow the below easy steps to customize your bullets style.

How To customize your bullets style in blogger

Visit Blogger dashboard >> template >> Edit HTML (As shown in the image below).

Now search for below code (press ctrl+F to find).

.post-footer

Now copy the below code and paste it above the .post-footer code.

.post ul {list-style:none;
}
.post ul li {
    line-height: 1.4em;
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnxntsglUyZZbMk8LyZKZxdjwOeXqDTSK64NAseoWqWcbHRK02U2-RXMyVeRBlYd3gmoYkA-Ml10QnAqtGnH4nDv_sDbFpo8iz9o9_ZCWauNfbwLJAi-a0fv0n6_by6MuOmYQlCnPTrSA/s400/255.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
        background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAa1M1MlYLVC7y7RZgEfOj8wEbIlzwrU8-9kez6HoQ-gRQiA7Ayiqiqzld8D6dEPY-wVwHW2SSG-1lAbt9TlFAuZnp8YiOpk4YpyacX0c-a11l3shHl4s4UCNNM4e2QSnQsY_7Hkxz-wQ/s400/251.gif) no-repeat scroll 0px 4px;
}

Now save your template because you have customized your blogger bullets style!!

For any problems and feedback comment it!

Baca Selengkapnya ....

How to change your Blockquote style in Blogger

Posted by Unknown Sabtu, 21 Desember 2013 0 komentar

Change your blockquote style: You might have seen professional Blogs have some really good layouts. And one of those beauty is the Quote style of a Blog. Actually most of the Bloggers use to enclose their script and codes in Quote which is a command in Blogger. But then the style of a Quote depends upon the coding of the template for the Blockquote.Now after studying CSS a little bit I am able to customize that style of the Blockquote.

How To Customize BlockQuote Style In BLogger

Login to your Blogger Dashboard.
Now navigate to Template and then Edit HTML as shown below.

Now proceed a little in the coding.
Now Find the below tag.by pressing ctrl+f you can find it.

Blockquote

Note
Remember that CSS coding for specific tag starts from symbol { and end at }.
For example you will find
blockquote {
border: solid;
background:red;
.......................
.......................
}

Now when you find the above mention thing which is the tag of blockquote in CSS coding.
Then copy the below script and replace it with your Blog Blockquote CSS tag. you should have to replace the blockquote tag from this symbol { to this symbol } along with the blockquote word.

blockquote{
border-style:solid;
background-color:#F3E2A9;border-color:#DBA901;padding:20px;
}

Replacing it with the above code will customize your Blockquote to my Template style blockquote which is shown above.

Personal Customization:

Now if you want to change the background for the blockquote then replace the text in red with your own desire color.
If you want to change the border color then change the text in Green color with your desire color.
If you want to change the border style like dashed groove etc then change the text in Blue to your desired style.

Note

You may see the text in red and green is numbers and alphabets it is in hexa format, you can also replace that with names like red, Blue,Green.

Or you can also find the Hexa code of your desired color by from the below link.

HTML COLOR CODES

If you guys have any problem in doing this hack simply ask us we are not going to charge you!

Baca Selengkapnya ....

Expandable Recent Comments Widget for Blogger

Posted by Unknown 0 komentar

Our recent Widget Latest Recent Commets widget with avatars was also an Awesome widget you may like it. But this time we come with a different widget Expandable Recent comments Widget for Blogger the main difference between our recent widget and this widget is big.In this widget there is no Avatar But it have an Awesome Expanding and collapsing feature. There is a plus sign along side the comment which is for expanding the comment and then it become minus sign can be used for collapsing the expansion.

Live Demo

How To Add Expandable Recent Comments Widget to Blogger

Go to Blogger Dashboard.
Click on Layout and then add a gadget.

Now a menu will pop-up, select the HTML Javascript gadget from that menu.

Now copy the Below script and paste it inside the HTML Javascript gadget box.

<style type="text/css" media="screen">
.row-aa { background: #f2f2f3; }
.row-bb { background: #F8F5F1; }
.row-div {
margin:0px;
padding:5px;
}
.comment-header {
font-size:0.9em;
// border:1px solid #E0E0E0;
// background-color:#F3F3F3;
padding:4px;
margin-top:10px;
margin-bottom:5px;
}
.comment-box {
margin:0px;
padding:0px;
font-size:0.9em;
height:500px;
overflow:auto;
}
.comments1 {
// background: #F3F3F3;
padding:3px;
border-left:1px dashed #A6A6A6;
color: #888888;
font-style: italic;
padding-top:4px;
margin-bottom:5px;
}
.comment-footer {
text-align:center;
font-size:0.9em;
padding:4px;
margin-top:5px;
}
</style>

<div style="text-align: center" class="comment-header"><input class="comment-button" id="commshowall" type="button" onclick="if (this.value == 'Show all') { unfold_all(this); this.value='Hide all'; } else { fold_all(this); this.value='Show all'; }" style="width:8em;font-size:1em;font-family:Verdana,sans" value="Show all" /></div>

<div class="comment-box">
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/expandable-recent-comments.js"></script>
<script type="text/javascript" src="http://trickspunch.blogspot.com/feeds/posts/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentposts">
</script>
<script type="text/javascript" src="http://trickspunch.blogspot.com/feeds/comments/default?start-index=1&max-results=999999&alt=json-in-script&callback=showrecentcomments">
</script>

</div>

Customization

In the above script http://trickspunch.blogspot.com Replace with you own Blog URL and that's it you have done this.

Hit the Save Button you will see a gadget having recent comments.
If you have any problems ask us we are giving answers for free that's for sure.

Baca Selengkapnya ....

How To add adsense ads in Blogger posts

Posted by Unknown 0 komentar

Adding adsense ads in Blogger posts is a cool way to get more clicks then before.This Hack is especially for Blogger whose pageviews is More and clicks are very less on their ads. This will surely increase your clicks through ads.But you have to take care of the page CTR.So let me describe the Tutorial for all of you.

Parsing your AdSense Code

Before adding AdSense ads into work first of all you have to Parse your code from HTML to XML form Because Blogger Templates are in XML form.To parse your Code first of all create an ad Unit and then copy it, for parsing in the parser. Follow the Below Link to Parse your AdSense Code.

AdSense Code Parser Tool

After parsing the Code follow the Below Easy steps:

How to Add AdSense Ads Below Post title in center

First Go to Blogger Dashboard>> Template>> Edit HTML.
Now search for the Below code.(CTRL+F)

<data:post.body/>

Now copy the Below script and paste it above the <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
Paste the Parse Adsense Code here
</b:if>

In the above code Replace the Paste the Parse Adsense Code here with your Parse AdSense code.

Note

In some Blogger Templates you may found <data:post.body/> Tag three or two times so do the above steps for All.

Then just save your Template, you have done adding the ads below post title in center.

How to add AdSense ads below post title at the Right Corner

Go to Blogger Dashboard>>Template>>Edit HTML.
Proceed it and find the following code by pressing ctrl+f

<data:post.body/>

Now copy the Below script and paste it above the <data:post.body/> Tag(Must Replace your parse AdSense code).

<b:if cond='data:blog.pageType == "item"'> <div style="float:Right;">Paste the Parsed Adsense Code here </div></b:if>

In some Blogger Templates you would find the <data:post.body/> Tag two or three times so do the above steps for all.
Now just save your Template you have done adding adsense ads below post title at the right side.

How to add AdSense ads Below post title in Left corner

Again Goto Blogger Dashboard>>Template>> Edit HTML.
Proceed and find the below tag

<data:post.body/>

Now copy the below Tag and paste it above the <data:post.body/> Tag.For template having more of these tags do the steps for all.

<b:if cond='data:blog.pageType == "item"'>
<div style="float:left;">
Paste the Parsed Adsense Code here
</div>
</b:if>

Must Replace Paste the Parsed Adsense Code here with your Parse AdSense code.
Save your Template you have done the Tutorial of adding Adsense ads below post title at left corner.
Recommended: Add adsense ads to blogger header.

Baca Selengkapnya ....

How To Add 5 Star Rating Widget to Blogger

Posted by Unknown 0 komentar

5 Star Rating Widget gives a cool way to you to get Feedback from your visitors.Actually adding this Widget Below Post or Above the Post Add 5 Stars to your Blog post through which readers can vote your Post and Rate it as they wish.This cool Widget also add the number of stars to your Post in Google Search results. So let me Describe the Tutorial.

How To Add 5 Star Rating Widget To Blogger:-

The following Tutorial Will lead you to Add 5 Star Rating Widget To your Weblog.

Login To Blogger Dashboard.
Then Click the Template Tab<< Edit Html.
Now search for the </head> Tag.
When you find </head> tag, Copy the Below code and paste it above or before the </head> tag.

<link type="text/css" rel="stylesheet" href="http://static.graddit.com/css/graddit.css" />

If you have done the above Steps, Then search for <data:post.body/>
Now copy the Below code and paste it above/below the <data:post.body/> tag.

<b:if cond='data:blog.pageType != "static_page"'><div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[['<img src="http://static.graddit.com/img/star.png"/>']]}</div><div expr:id='"ffbs_stats_" + data:post.id' class='ffbs_stats'></div><script type='text/javascript' expr:src='"http://www.graddit.com/rate/eng/5/" + data:post.id + "?id=" + data:post.id + "&stats=ffbs_stats_" + data:post.id + "&labels=labels_" + data:post.id + "&info=info-" + data:post.id + "&info_delay=2&url=" + data:post.url + "&class_star=ffbs_star_img&class_star_set=ffbs_star_img_set&class_star_vote=ffbs_star_img_vote&views=yes&votes=yes&average=yes"'></script></b:if>

Now Save your Template Because you have done this Tutorial.

Groom Your Blog

This will simply Groom your Blog, add this widget and Enjoy cool widgets from Tricks Punch!. If you have any problem share that with us we are here to solve your Problems.

Baca Selengkapnya ....

How to Resize all Images In Blogger

Posted by Unknown 0 komentar

Resize All Images In Blogger: Now a days the most Boring Problem Blogger faces is the Size of Images on their Blogs.Actually Images of high width can Overflow through you sidebar and can destroy you Blog appearance or Layout.And the best Impressive thing in your blog is your Blog layout, How you navigate your visitors with your Post and pages Links.And this Image Issue is really a threat for your Blog Layout or Appearance.
However, Blogger provides the Facility of Resizing all the Images in your Blog in the Post editor But this Doesn,t work well.Because If you have 50 Posts and all of these posts have Images and you want to Re size it.Then you will go to each post by editor and Manually Resizing the Images, which will take your costly time.And also it is a very Boring for Gallery blogs Because Gallery Blogs contains A lot more Images Manually Resizing those Images is somewhat digging a well.Don,t worry we have a CSS Trick to Resize all the Images in your Blogger Posts.

How To Resize All Images In Blogger Using Css Coding

First of all Visit Blogger Dashboard.
Then Click on your site.
Now click on the Template Tab.
Then click on the EDIT HTML Tab.
Now In the HTML editor search for This tag ]]></b:skin>
After Finding The above Tag, Paste the Below CSS coding above the ]]></b:skin> Tag.

.post-body img {
width: 500px!important;
height: auto!important; }

Changes You Should Make In the CSS Coding Before Pasting

Now change 500 to your own desire Width.
And you can Reset the Height of the Images by changing auto to you desired Height. Such as Replace auto with a Number 600.
If you have made changes in the Coding and have pasted it in the Template Editor above the ]]></b:skin> Tag.
Then Save your Template.
You have Completed the Tutorial or Blogger Hack.

If you have any problem with doing the Tutorial Simply discuss it with us in the Comment Box, we are Here to solve your Problems.

Baca Selengkapnya ....

How to Add Adsense Ads to Blogger Header

Posted by Unknown 0 komentar

Add AdSense Ads To Blogger Header: All of us know that AdSense is the Best way to earn money through our websites and web pages by using targeted AdSense ads in your websites and webpages. However their are some factors with which you can earn more money that you expect from AdSense.AdSense needs creative publishers who have beautiful navigable websites and give them more revenue for their effort.One of the more effective factor in getting more revenue from AdSense is placing AdSense ads in the right place so it could attract more visitors towards itself. And also the best ad color which can suit your website pages.
Today our Tutorial is to teach you to place the AdSense ads to Blogger Header which off course is the best place for AdSense Ads

How To Add AdSense Ads To Blogger Header

First of all sign up to Blogger Dashboard.
Click on the Template Tab of your Website.
Then click on the Edit HTML Tab there.
Now search for the below code. Press (Ctrl+F) to find.

<div class='region-inner header-inner'>

If you have not find the above code search for the below code.

<div id='header-wrapper'>

If you found any of the above code, just below these you will see the following script.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Now just replace the no with Yes in the above script you see in your Template HTML.
Now just simply Save your Template you have done adding a place for AdSense Ads.
You can also add more widgets to Header by changing 1 to 3 or whatsoever according to your needs.