Showing posts with label html. Show all posts

Sunday, December 2, 2012

How to split div in blogspot Make new Div Blogger: web designing tools tip and tricks

9:02 AM Jatin Baliyan No comments

Hello All Bloggers Today I will Share with you how to split div in blogspot / Blogger templates. Many blogger webmasters or owner want split single div into many div for many adsense ad formats or buysellads You set your ads here ...

Here I Give you process step by step just follow to me to split your single div into many or two or three

→ First go your blogger dashboard → Now click in design tab and edit HTML → Expand your blogger template.

Also Read →

How To Adding Paypal Donation Button to Blogger
Buy all top domain name at cheap price : With Free Domain name

Google Chrome Offline Installer And Portable Version Browser

* Find out the below code

#header {
margin: 5px;
border: 1px solid $bordercolor;
* Now replace above code with below code
#header {
float:left;
width:30%;
height:200px;
margin: 0px;
border: 0px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
#header2{float:left; width:30%; height:200px}
#header3{float:left; width:39%; height:200px}

Note- You can change #header2 and #header3 height and you can change width if you want.

* Now again scroll down to where you see like this code:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
</b:section>
</div>

Note- Remember that YOUR-BLOG-TITLE is your real blog title.

* Now replace above code with below code

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR-BLOG-TITLE (Header)' type='Header'/>
</b:section>

<b:section class='header' id='header2' maxwidgets='4' showaddelement='yes'/>
<b:section class='header' id='header3' maxwidgets='4' showaddelement='yes'/>
<div style='clear:both;'/>
</div>

Change your blog title with your own.

Now save your blogger template now you are done.

Author:Jatin Baliyan is founder and webmaster of Arenamazza.org. You can follow me on Twitter, Facebook and on Google Plus..

Javascript and html code site search code for web and internal site html code

2:12 AM Jatin Baliyan No comments

Hello Friends I share tool this for anyone that wants to add search functionality to their website, but does not have the technical background to do so. It utilizes Google to do the "heavy lifting", so you do not need a database on your server or run processes to keep your site indexed. So basically, if your site is in Google's index, it will work for you.

i will give you some searching codes in these you can also get web and site search submit button google logo only site seach just use these code on your html sites

<iframe style="width:220px; height:70px; margin:5px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php?site=www.arenamazza.org"></iframe>

LOok LIKe THIS

This Code Search engine like this ====>>

Just Change The site Name And you Can also change width:220px and height:70px

2.

<iframe style="width:300px; height:70px; margin:5px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php?site=www.arenamazza.org&b=1"></iframe>

LOok LIKe THIS

This Code Search engine like this ====>>

Just Change The site Name And you Can also change width:220px and height:70px

&b=1 this is the submit button you can add or remove this

3.

<iframe style="width:375px; height:70px; margin:5px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php?site=www.arenamazza.org&b=1&l=1"></iframe>

LOok LIKe THIS

This Code Search engine like this ====>>

Just Change The site Name And you Can also change width:220px and height:70px

&l=1 this is the logo of google If You Remove this just remove that code

4.

<iframe style="width:375px; height:35px; margin:5px;" frameborder=0 allowtransparency=yes scrolling=no src="http://search.digitalpoint.com/iframe.php?site=www.arenamazza.org&b=1&l=1&y=1"></iframe>

LOok LIKe THIS

This Code Search engine like this ====>>

Just Change The site Name And you Can also change width:220px and height:70px

&y=1 Its a only site search and you can also remove google logo by removing this code &l=1

Source

How To Embed URL,HTML,Forum Links Code below Blogger Posts : web designing tips and javascript code

9:32 AM Jatin Baliyan 2 comments

This tutorial will explain how to create a widget, for your visitors to link back to your article/blogger post.This was created by me (http://www.arenamazza.org/) and previously I had installed this widget to this site.Many visitors ask from me how to add this widget to their blogger blogs and so I decided to explain it.This widget will show 3 codes (Blog Post URL,HTML code to embed your post to a website,Forum Link to embed your post to a forum) below your blogger post.If you like to add this widget to your blogger blog,then follow the steps given below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>

4.Now find below code:

<data:post.body/>

5.Copy below code and paste it just after the <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>If you find this article useful, please feel free to link to this page from your website or blog.</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;HTML Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Forum Link:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='http://www.arenamazza.org/' style='display:none;' target='_blank'>Widget by BloggerTipAndTrick</a></p>
&lt;/div&gt;<br/>
</b:if>

NOTE : Don't change anything in above code.

6.Save your template and you are done.

How to Add Table to Blogger Blog Post

2:06 PM Jatin Baliyan No comments

Currently it is not possible to add table in Blogger post through compose tab because blogger doesn't provide that option. If any one want to add table in blogger blog then it can be added by adding HTML code in HTML body of Blog post.

How To Add Table To Blogger Post:-

How To Create A HTML Table

First of all we will create a HTML table and later used it with blogger.

         <table border=1>
         <tr>
                   <th>Table heading 1</th>
                   <th>Table heading 2</th>
                    <th>Table heading 3</th>     
         </tr> 

         <tr>
                   <td>Row 1 Data 1</td>
                   <td>Row 1 Data 2</td>
                   <td>Row 1 Data 3</td>
        </tr> 
         <tr>
                   <td>Row 2 Data 1</td>
                   <td>Row 2 Data 2</td>
                   <td>Row 2 Data 3</td>
        </tr>
        </table>

As you can see through the HTML programming there are three <tr> tag which defines three rows of the table and <th> tag defines table heading wheres <td> defines table data of the table and border=1 defines the border width. Forth row may be easily inserted in it by adding the following code.

<table border=1>
         <tr>
                   <th>Table heading 1</th>
                   <th>Table heading 2</th>
                    <th>Table heading 3</th>     
         </tr> 
         <tr>
                   <td>Row 1 Data 1</td>
                   <td>Row 1 Data 2</td>
                   <td>Row 1 Data 3</td>
        </tr> 
         <tr>
                   <td>Row 2 Data 1</td>
                   <td>Row 2 Data 2</td>
                   <td>Row 2 Data 3</td>
        </tr>
        <tr>         
                   <td>Row 3 Data 1</td>
                   <td>Row 3 Data 2</td>
                   <td>Row 3 Data 3</td>
        </tr> 
       </table>

How to Add HTMl code to blogger Post:

In blogger dashboard.
Create a New post.
And Paste the HTML code in Edit HTML page.

So you seen that how easily one can easily add a table to post without any knowledge of HTML. If anyone find difficulty in placing the HTML code then comments are always open for that.

Make a Pop-up Subscribe Form Like Aweber

10:40 PM Jatin Baliyan 3 comments

This is my first Guest Article For The Blog And My Blogging Carrier Too..
First Of All Let Me Thank Mohammad Mustafa Sir to allow me to Post this article for you all. Have you ever heard about the Aweber Email Marketing Solutions ? If Not then i bet you must have seen EMail Signup Forms in Popular websites... They use Aweber. Though it is not free but it is efficient so they use that. But here In My Article I'll Let you to integrate Aweber Features and FeedBurner Features and install it on your Blog. So keep Reading And Keep Enjoying !!

What Will we Get From This ?

The main Reason why to use is because it will not only make your Blog Look Professional But Also will increase the EMail Subscriptions to your Blog. Its a modified version of the model subscribe box created by franklin. Lets first see a demo

Add it To Blogger

You can Install This Widget Easily in your Blog By Following These Simple Steps....
Before you edit any template it's better to keep a Backup..
So First Backup your Template. Now Go To Design>Edit Html>Select Expand Widgets...

Step 1 : The CSS You Need To Search The Following Piece Of Code By Pressing [Ctrl+F]
]]></b:skin>
Now Paste The Bellow Code Just Before it.

/*
   ColorBox Core Style:
   The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
/*

    User Style:
       Change the following styles to modify the appearance of ColorBox. They are
       ordered & tabbed in a way that represents the nesting of the generated HTML.
    */
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
            box-shadow:0 0 15px rgba(0,0,0,0.4);
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
           }
          #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DMGla8SLj6qSVPYE3nFcXQRJmWP7WPo63jQwJfHKE9RulMO3bRFZ89YYnC6g1WEOYZEDt8nKTbieTdIJPjwk6x9KHi_7Ys95-AIdLeSZKYpHXQcldmdDuFsvHM_2byB2sdnBPBBblxw/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpF7dor4Fu48NrxcIhTHDC9gAmHAYPErSmTeEHMvddnG-GDF_RaGcfIfL4V1oF0K-h0hV9rYuTVIBhohRQBmcYEnHNfMGwcYXVCDRUkmhNcPhYRdkQ5RPGgCB9F0RMNs-4r-VnVTbgN0Y/s400/border.png) repeat-x top left;}
    #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DMGla8SLj6qSVPYE3nFcXQRJmWP7WPo63jQwJfHKE9RulMO3bRFZ89YYnC6g1WEOYZEDt8nKTbieTdIJPjwk6x9KHi_7Ys95-AIdLeSZKYpHXQcldmdDuFsvHM_2byB2sdnBPBBblxw/s1600/controls.png) no-repeat -36px 0;}
    #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DMGla8SLj6qSVPYE3nFcXQRJmWP7WPo63jQwJfHKE9RulMO3bRFZ89YYnC6g1WEOYZEDt8nKTbieTdIJPjwk6x9KHi_7Ys95-AIdLeSZKYpHXQcldmdDuFsvHM_2byB2sdnBPBBblxw/s1600/controls.png) no-repeat 0 -32px;}
    #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpF7dor4Fu48NrxcIhTHDC9gAmHAYPErSmTeEHMvddnG-GDF_RaGcfIfL4V1oF0K-h0hV9rYuTVIBhohRQBmcYEnHNfMGwcYXVCDRUkmhNcPhYRdkQ5RPGgCB9F0RMNs-4r-VnVTbgN0Y/s400/border.png) repeat-x bottom left;}
    #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DMGla8SLj6qSVPYE3nFcXQRJmWP7WPo63jQwJfHKE9RulMO3bRFZ89YYnC6g1WEOYZEDt8nKTbieTdIJPjwk6x9KHi_7Ys95-AIdLeSZKYpHXQcldmdDuFsvHM_2byB2sdnBPBBblxw/s1600/controls.png) no-repeat -36px -32px;}
    #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DMGla8SLj6qSVPYE3nFcXQRJmWP7WPo63jQwJfHKE9RulMO3bRFZ89YYnC6g1WEOYZEDt8nKTbieTdIJPjwk6x9KHi_7Ys95-AIdLeSZKYpHXQcldmdDuFsvHM_2byB2sdnBPBBblxw/s1600/controls.png) repeat-y -175px 0;}
    #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DMGla8SLj6qSVPYE3nFcXQRJmWP7WPo63jQwJfHKE9RulMO3bRFZ89YYnC6g1WEOYZEDt8nKTbieTdIJPjwk6x9KHi_7Ys95-AIdLeSZKYpHXQcldmdDuFsvHM_2byB2sdnBPBBblxw/s1600/controls.png) repeat-y -211px 0;}
    #cboxContent{background:#fff; overflow:visible;}
        #cboxLoadedContent{margin-bottom:5px;}
        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2a8Rk-qkq9cd01KxqOuUX9tzM-btwY4cBIXUhtPPJ-UVeM0I1P5tMZtqHrRregJA-lv4V2Yxta7THD1OmqFbAV3UzODg9y7ONKKUOMe4zLizMj1T7VK6-M8S3XDf3waH5rxV8HwgcVaY/s400/loadingbackground.png) no-repeat center center;}
        #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDqCsiBLCgS9mwtnmrCG3xipSayuAYBUIWq6MI-MzMEi0VWr4BDKWgX1SzCPP7BZlLKRIFhzyxjQU0CNBGb-Nq_tyL7xZnNd-34fpGAgo58spFA8A6gcxDaDIcrkhpvyb2D8bLRQjOZyU/s400/loading.gif) no-repeat center center;}
        #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
        #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
        #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DMGla8SLj6qSVPYE3nFcXQRJmWP7WPo63jQwJfHKE9RulMO3bRFZ89YYnC6g1WEOYZEDt8nKTbieTdIJPjwk6x9KHi_7Ys95-AIdLeSZKYpHXQcldmdDuFsvHM_2byB2sdnBPBBblxw/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
        #cboxPrevious{left:0px; background-position: -51px -25px;}
        #cboxPrevious.hover{background-position:-51px 0px;}
        #cboxNext{left:27px; background-position:-75px -25px;}
        #cboxNext.hover{background-position:-75px 0px;}
        #cboxClose{right:0; background-position:-100px -25px;}
        #cboxClose.hover{background-position:-100px 0px;}
        .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
        .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
        .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
        .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}
/*-----------------------------------------------------------------------------------*/
/*    box popup
/*-----------------------------------------------------------------------------------*/
#subscribe {
    font: 12px/1.2 Arial,Helvetica,san-serif;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
    text-decoration:none;
}
.box-title {
   color: #2C2D31;
   font-size: 20px;
   font-weight: bold;
   margin: 10px 0;
   text-align: center;
}
.box-tagline {
   color: #999;
   font-size: 14px;
   margin: 0;
   text-align: center;
}
#subs-container {
    padding: 35px 0 30px 0;
    position: relative;
}
.box-side {
    width: 170px;
    text-align: center;
}
.box-side.left {
   padding: 0 30px 0 15px;
    border-right: 1px solid #ecedf3;
}
.box-side.right {
    float: right;
   margin-top: -223px;
    margin-right: 10px;
}
.box-icon {
    width: 72px;
    height: 54px;
    padding: 6px 0 0 0;
    margin: 0 auto;
}
.box-icon a.rss{
    display: block;
    width: 70px;
    height: 56px;
    margin: 0 auto;
}
.box-icon a{
    display: block;
    width: 72px;
    height: 54px;
}
.box-icon a.email img,
.box-icon a.rss img {
   margin: -5px 0 0;
    border: 0 none;
}
.box-side h4,
.box-side h4 a {
    font-size: 14px;
    line-height: 14px;
    color: #f26535;
    font-weight: bold;
}
.box-side h4 { margin: 20px 0 10px 0; }
.box-side h5 {
    font-size: 11px;
    color: #5e6066;
    line-height: 18px;
    margin: 0 0 20px 0;
}
a.sub {
   background: url("http://imgboot.com/images/cybersidh/subscribebutton.png") no-repeat scroll 0 0 transparent;
   color: #996633;
   display: block;
   height: 44px;
   line-height: 29px;
   margin: 0 auto;
   text-indent: -999em;
   width: 130px;
}
.box-side h4 a:hover {
    color: #f26535;
}
#box-or {
   background: #fff;
   font-size: 12px;
   font-weight: bold;
   height: 25px;
   line-height: 25px;
   margin: -115px 0 0 208px;
   position: absolute;
   width: 20px;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}

Now Hit Prievew, If Every Thing Works Fine then Save The Template..

Step 2 : The Html In This Part you'll add the widget to your Blog !!
Goto :: Design>Page Elements>Add Gadget>Html/Javascript
Now Paste The Following Code In It.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'></script>
<script src="http://sidharth12.googlecode.com/files/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*15;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
   $.colorbox({width:"480px", inline:true, href:"#subscribe"});
       }
});
</script>
    
    <div style='display:none'>
        <div id='subscribe' style='padding:10px; background:#fff;'>
        <h2 class="box-title">Never Miss Any Update From Us!</h2>
               <h2 class="box-tagline">Enrich Your Inbox.[402+ Readers]</h2><br/>
               <form style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ILibrary', 'popupwindow', 'scrollbars=no,width=560,height=540');return true"><p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p><input type="hidden" value="ILibrary" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" value="Subscribe" /><p>Delivered by <a href="http://feedburner.google.com" target="_blank">FeedBurner</a> | Powered By <a href="http://adf.ly/CU0f1">Get This widgets</a></p></form>
        <br/><h2 class="box-tagline">Subscribe us today and get Quality Articles for free.</h2>
</div>
</div>

Important :
Remove The Red Colored ILibrary With You FeedBurner ID.
Ignore The Line In Pink If Your Blog Already has JQuery.

Do you download Free Softwares from UN-OFFICIAL websites?

4:26 AM Jatin Baliyan No comments

Do you download Free Softwares from UN-OFFICIAL websites?
I know you are pro in searching and downloading pirated software’s and am sure you are aware of the risk behind it. But what about Open source and Free software’s? Do you download them from any 3rd party websites or file sharing networks? ..well its time to be aware of the Risk.

Popular open-source software’s that are being downloaded by thousands of internet users everyday includes VLC media player, Google Chrome browser and others. Most people prefer downloading these from unofficial websites, because they feel its more complicated when downloading from Official Websites, Like in the case of downloading ‘Google chrome browser’ from official webpage, you are first required to download small downloader which will then download and install the chrome browser on your PC. But many other websites provide download link for the full “Google chrome” exe file and people prefer this way..

We all know that the main objective of open-source software developers, is to share the source code with everyone. Because they expect other developers to fix any bugs or add new features to it and make it more beautiful. But some time it gets abused.

Scammers are taking advantage of the availability of the source code to trick users and make money. The Scammers are adding malware and adware to these software’s and releasing them as the original product. Some deceptive sites are even re-branding the original open-source project and selling them as a new product.

Trusted Websites: brother-soft | cnet | sourceforge | filehippo

The Scammers are Binding “open-source sofwares” with various crapware to monetize the software with loads of advertisements and earn money. The result of this is a poor product that doesn’t work as intended, that can’t be uninstalled and that clearly abuses its users and their privacy. Recently there were reports that some websites are selling “Mozilla Firefox browser”, using the Mozilla trademarks to promote other products and services, or using modified versions of the Mozilla trademarks.
How these Scammers work?

They Download the source code from open source projects and add adware or malware to it.
They release their version of product and disguise as the original.
They advertise their product on adverting networks like Google AdWords.
They earn more money through the malware and adware bundled with their version of Free Software.
They buy more advertisements to spread their copy of free software and earn even more.

These activities are indeed deceptive, harm users and cause consumer confusion. Open source Softwares are affected and will keep on affected by this scourge and there’s not much we can do about it. So the next time you download any free open-source software, make sure you are on the right place

New Text Version Of Related Posts Widget For Blogger-2012

1:13 PM Jatin Baliyan 1 comment

For adding this widget, just follow these steps :

Go to the template tab on blogger and click on Edit HTML.

Click on Proceed button.
Put the tick-mark on expand widget templates box.
Find this code [ press ctrl+f] </head>
Just below </head>, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
background: #ffffff;
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
background: #ffffff;
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
background: #ffffff;
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#383838;
}
#related-posts a:hover{
color:green;
}
#related-posts ul{
list-style-type:none;
background: #ffffff;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:#ffffff url(http://littletikeschildcare.files.wordpress.com/2008/03/apple20x20.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 3px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related_posts.js' type='text/javascript'/>
</b:if>

After that find this code : <div class='post-footer-line post-footer-line-1'>
Just below the code given above, paste this code given below :

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> </b:if>

You can change the maximum number of results by changing the value of maxresults=5 to maxresults=10

Regular sliding recent post html/javascript/jquery code New version code

12:06 AM Jatin Baliyan No comments

A Regular sliding your blog/website/forum recent post for your user To know what new update for us..

CODE :

<!-----code start----->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:240px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:9px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

 <script language='javascript'> 

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://www.mediafiresite.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
 <script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div><div><a href="http://adf.ly/9Y2Yb" target="blank"><font color="black">[Get This]<font></font></font>
</a></div>
<!-----code end----->

http://www.mediafiresite.blogspot.com/

HERE IS YOUR BLOG OR WEBSITE HOME PAGE URL

Working Vpn Tricks For Free Gprs 2013

Labels

Sunday, December 2, 2012

How to split div in blogspot Make new Div Blogger: web designing tools tip and tricks

Also Read →

Note- You can change #header2 and #header3 height and you can change width if you want.

Note- Remember that YOUR-BLOG-TITLE is your real blog title.

* Now replace above code with below code

Change your blog title with your own.

Now save your blogger template now you are done.

Wednesday, November 14, 2012

Javascript and html code site search code for web and internal site html code

2.

3.

4.

Thursday, October 25, 2012

How To Embed URL,HTML,Forum Links Code below Blogger Posts : web designing tips and javascript code

Sunday, September 16, 2012

How to Add Table to Blogger Blog Post

How To Add Table To Blogger Post:-

How To Create A HTML Table

How to Add HTMl code to blogger Post:

Saturday, September 1, 2012

Make a Pop-up Subscribe Form Like Aweber

What Will we Get From This ?

Add it To Blogger

Tuesday, July 3, 2012

Do you download Free Softwares from UN-OFFICIAL websites?

Saturday, June 23, 2012

New Text Version Of Related Posts Widget For Blogger-2012

Sunday, June 10, 2012

Regular sliding recent post html/javascript/jquery code New version code