tag:blogger.com,1999:blog-8494793114379996562024-03-12T16:04:07.985-07:00All about Blogger TipsAnonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.comBlogger53125tag:blogger.com,1999:blog-849479311437999656.post-11388755483101788862012-06-16T06:01:00.005-07:002012-06-16T06:01:42.309-07:00How Add META TAGS to Blogger(blogspot) blogsAdding meta tags you can get get more traffic from search engines
like google,yahoo,msn,etc,especially the meta description is the most
important one.<span style="color: white;"> How Add META TAGS to Blogger(blogspot) blogs</span><br />
Meta tags are the tags which describes your site and tells the search
engines what your site is all about.Adding meta tags is an important
factor in SEO.(Search Engine Optimisation).Meta tags allows search
engines to index your web pages more accurately. In other words,Meta
tags communicate with the search engines and tells more information
about your site and make it index correctly and accurately.<span style="color: white;"> How Add META TAGS to Blogger(blogspot) blogs</span><br />
We must add two main meta tags to the head section of the
template.One is the Meta description which describes your site and
another one is Meta Keywords which tells about your site keywords(what
your site is all about)<br />
Here is how to add meta tags to your blogger(blogspot) blog:<span style="color: white;"> How Add META TAGS to Blogger(blogspot) blogs</span><br />
1.Sign in to your blogger dashboard-->click the 'Layout' button[see the screenshot below]<span style="color: white;"> How Add META TAGS to Blogger(blogspot) blogs</span><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmRVyilB05EBIDb-MUZy8HDsCUgdA9T-bW0D23LnsWMuYQKKKJWpCGpuzqcT5g2u9ABfQtVutcTa6tmQ0SWEsTQ4n2P4nnxwv306dY0aaT1T1a-N5td36BNBn6Ttr_7Rlo_FK4snUsmc4/s1600-h/layout2.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5318529829217743810" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmRVyilB05EBIDb-MUZy8HDsCUgdA9T-bW0D23LnsWMuYQKKKJWpCGpuzqcT5g2u9ABfQtVutcTa6tmQ0SWEsTQ4n2P4nnxwv306dY0aaT1T1a-N5td36BNBn6Ttr_7Rlo_FK4snUsmc4/s400/layout2.jpg" style="cursor: pointer; height: 77px; width: 400px;" /></a><br />
<br />
2.Click on the 'Edit html' tab<span style="color: white;"> How Add META TAGS to Blogger(blogspot) blogs</span><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGY-6x40ssWwnn2G3-YcgigZXHAUBE11gb0rMxsyek81oIRcpMU-CdmshdeC6Z1lwIEEhc4yZC3lMTKvfcMsai9ihPST5h_iKAiKlUCRqTHSHzElHHStQecemfvOFcPrzU5OdodvP8SM8/s1600-h/edit_htm.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5318529932766495058" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGY-6x40ssWwnn2G3-YcgigZXHAUBE11gb0rMxsyek81oIRcpMU-CdmshdeC6Z1lwIEEhc4yZC3lMTKvfcMsai9ihPST5h_iKAiKlUCRqTHSHzElHHStQecemfvOFcPrzU5OdodvP8SM8/s400/edit_htm.jpg" style="cursor: pointer; height: 103px; width: 278px;" /></a><br />
<br />
3.Find this code:<span style="color: white;"> How Add META TAGS to Blogger(blogspot) blogs</span><br />
<div style="color: #3333ff; text-align: center;">
<pre style="border: 1px solid black; font-weight: bold; height: 50px; overflow: auto; width: 90%;"><span style="font-size: 130%;"><b:include data='blog' name='all-head-content'/></span></pre>
</div>
<br />
4.Now add below code <span style="color: red;">just after</span> the above code.Look at below:<span style="color: white;"> How Add META TAGS to Blogger(blogspot) blogs</span><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAv336yBJuYSSd28OFQvEEiCVGL40KWD_cpC0Lq7brvPoJvcc-lwaULlFUk23RdSSdAp2OSUMFw0R_kjWfxYblBAOj5kXOAcxGURWNAfJ46QUjtRH2_XEHVaRGd8h-yrf0PUu4_A4ZijY/s1600-h/how-add_.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5318530060466187586" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAv336yBJuYSSd28OFQvEEiCVGL40KWD_cpC0Lq7brvPoJvcc-lwaULlFUk23RdSSdAp2OSUMFw0R_kjWfxYblBAOj5kXOAcxGURWNAfJ46QUjtRH2_XEHVaRGd8h-yrf0PUu4_A4ZijY/s400/how-add_.jpg" style="cursor: pointer; height: 189px; width: 400px;" /></a><br />
<pre style="border: 1px solid black; height: 100px; overflow: auto; width: 90%;"><span style="font-size: 130%;"><meta content='<span style="color: #cc33cc; font-weight: bold;">DESCRIPTION HERE</span>' name='description'/><meta content='<span style="color: #cc33cc; font-weight: bold;">KEYWORDS HERE</span>' name='keywords'/><meta content='<span style="color: #cc33cc; font-weight: bold;">AUTHOR NAME HERE</span>' name='author'/></span></pre>
<br />
<span style="color: red;">Replace</span>,<span style="color: white;"> How Add META TAGS to Blogger(blogspot) blogs</span><br />
<span style="font-weight: bold;">DESCRIPTION HERE</span>:Write your blog description<br /><span style="font-weight: bold;">KEYWORDS</span>:Write the keywords of your blog<br /><span style="font-weight: bold;">AUTHOR NAME</span>:Write the author's name(Your name)<span style="color: white;"> How Add META TAGS to Blogger(blogspot) blogs</span><br />
Now save your template.<span style="color: white;"> How Add META TAGS to Blogger(blogspot) blogs</span>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-76582371497023708172012-06-16T05:57:00.002-07:002012-06-16T05:57:13.666-07:00How To Add Different Meta Tags to Different Blogger PostsWhat's the use of adding different meta descriptions to different Blogger Posts?<span style="color: white;"> How To Add Different Meta Tags to Different Blogger Posts</span><br />
It is very good for SEO (Search Engine Optimisation) . Actually, why
we are adding meta tags is to tell search engines what that page is all
about... but, using same meta tags to all of your blog posts lessens the
search engine rankings and traffic little bit.<span style="color: white;"> How To Add Different Meta Tags to Different Blogger Posts</span><br />But, if you add
different unique meta tags to different Blog posts, it makes the search
engines to know more about your individual blog posts and make them
crawl and index your pages better and it also improves your Search
engine rankings for sure <img alt=";)" class="wp-smiley" src="http://www.bloggertipandtrick.net/wp-includes/images/smilies/icon_wink.gif" /> <br />
So, how to add this?<span style="color: white;"> How To Add Different Meta Tags to Different Blogger Posts</span><br />
For this to happen, you have to add some pieces of codes to the template.<br />First Sign in to Blogger dashboard » Layout » Edit html<br />
and find this line<span style="color: white;"> How To Add Different Meta Tags to Different Blogger Posts</span><br />
<br />
<span style="color: #cc33cc; font-size: 130%; font-weight: bold;"><b:include data='blog' name='all-head-content'/></span><br />
<br />
and add this code just below that line<span style="color: white;"> How To Add Different Meta Tags to Different Blogger Posts</span><br />
<pre style="border: 1px solid black; height: 130px; overflow: auto; width: 90%;"><b:if cond='data:blog.url == "http://www.bloggertipandtrick.net/"'>
<meta content='DESCRIPTION' name='description'/><meta content='KEYWORDS' name='keywords'/>
</b:if></pre>
<br />
Now we have added meta tags to the <span style="font-weight: bold;">homepage</span>.<br />
Next, you want to add meta description for your blogger post, for example let see how to add meta tags to below post :<br />
<br />
http://www.bloggertipandtrick.net/2009/03/how-to-add-paypal-donate-button-to-your.html<br />
<br />
This is the way to add meta tags to above post:<span style="color: white;"> How To Add Different Meta Tags to Different Blogger Posts</span><br />
<pre style="border: 1px solid black; height: 150px; overflow: auto; width: 90%;"><b:if cond='data:blog.url == "http://www.bloggertipandtrick.net/2009/03/how-to-add-paypal-donate-button-to-your.html"'>
<meta content='How to add Paypal Button to your Blogger Blog, Adding Donations to your blog' name='description'/>
<meta content='Adding,Paypal,Donate,Button' name='keywords'/>
</b:if></pre>
<br />
Now, what you have to do is pasting the above code below the home page meta tags and changing the link,description and keywords.<br />So, the final code now looks something like:<span style="color: white;"> How To Add Different Meta Tags to Different Blogger Posts</span><br />
<pre style="border: 1px solid black; height: 280px; overflow: auto; width: 90%;"><b:if cond='data:blog.url == "http://www.bloggertipandtrick.net/"'>
<meta content='DESCRIPTION' name='description'/><meta content='KEYWORDS' name='keywords'/>
</b:if>
<b:if cond='data:blog.url == "http://www.bloggertipandtrick.net/2009/03/how-to-add-paypal-donate-button-to-your.html"'>
<meta content='How to add Paypal Button to your Blogger Blog, Adding Donations to your blog' name='description'/>
<meta content='Adding,Paypal,Donate,Button' name='keywords'/>
</b:if></pre>
<br />
Just like the above procedure, you can add different meta tags to as many blog posts as you can.<span style="color: white;"> How To Add Different Meta Tags to Different Blogger Posts</span>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-28739136402537501762012-06-16T05:52:00.000-07:002012-06-16T05:53:58.687-07:00How To Add One Click Sitemaps Submitter to bloggerWith this tool your visitors can directly notify Google, Yahoo!,
Ask.com and Moreover.com about their new or updated sitemaps file.<span style="color: white;"> How To Add One Click Sitemaps Submitter to blogger</span><br />
1.Login to your dashboard--> layout- ->Page Elements<br />
2.Click on '<span style="color: #3333ff;">Add a Gadget</span>' on the sidebar.<br />
3.Select '<span style="color: red;">HTML/Javascript</span>' and add the code given below and click save.<span style="color: white;"> How To Add One Click Sitemaps Submitter to blogger</span><br />
<br />
<center>
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td><br />
<center><script src="http://www.mypagerank.net/services/sn/servicesn_js.php"></script</center></td>
</tr>
</tbody>
</table>
</center>
<br />
Now you are done.It will look like this. <span style="color: white;"> How To Add One Click Sitemaps Submitter to blogger</span><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSyKdpjWrcmyXm5GzyR28QLblCHU1vEwXaRqDDne6crhieoP2L1MqWqxLwXXuz8U5-MlcZuGe0dXLvdrWeI5p0WrZTUD0WJdRLSJeNgSFuETTElmG0fxJPqKzcyOKcM-eRLo1UH7ExZic/s1600-h/ss11.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5344854122831540898" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSyKdpjWrcmyXm5GzyR28QLblCHU1vEwXaRqDDne6crhieoP2L1MqWqxLwXXuz8U5-MlcZuGe0dXLvdrWeI5p0WrZTUD0WJdRLSJeNgSFuETTElmG0fxJPqKzcyOKcM-eRLo1UH7ExZic/s400/ss11.png" style="cursor: pointer; height: 106px; width: 400px;" /></a><br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQM8FXm8sI_hYK6V9c28yyqF2wzcPm8L8WjzhRVElL4QS9YhgJjdHht_j8nhUiEYjXrm3NOCYT87DscK1rAzxRjF4ZPfBLcC0mSkTU7Hqbcm5YpeLSU8U0vpGJsV0oac19JtuYFEcdxm0/s1600-h/ss22.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5344854221755750034" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQM8FXm8sI_hYK6V9c28yyqF2wzcPm8L8WjzhRVElL4QS9YhgJjdHht_j8nhUiEYjXrm3NOCYT87DscK1rAzxRjF4ZPfBLcC0mSkTU7Hqbcm5YpeLSU8U0vpGJsV0oac19JtuYFEcdxm0/s400/ss22.png" style="height: 171px; width: 400px;" /></a>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-15778506670445811362012-06-16T05:46:00.004-07:002012-06-16T05:46:42.612-07:00Complete SEO Guide For Blogger|BlogspotThis Article will provide you complete guide on search engine
optimization (SEO) for blogger templates.If you have any other ideas
please leave a comment.<span style="color: white;"> Complete SEO Guide For Blogger|Blogspot</span><br />
<br />
<h3 style="color: black; font-family: arial;">
Meta Keywords and Description<span style="color: white;"> Complete SEO Guide For Blogger|Blogspot</span></h3>
Meta tags are very important for SEO.So you must add meta tags to your blogger blog for improve your seo.<span style="color: white;"> Complete SEO Guide For Blogger|Blogspot</span><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwYP11oGtS8zRPoD2G1HUI8WAaiTt0Fi980p-2ZiM1CPw5Sse4NTLBIl7NCTl4ldyxXyHunuFvhGyomKWqD1LAP0kT0WySNggT4n0sjh03l6i4BJFiU6jxXruG45fwk-XH5Zp56VHlLzlc/s1600-h/meta+tags.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397467020902914482" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwYP11oGtS8zRPoD2G1HUI8WAaiTt0Fi980p-2ZiM1CPw5Sse4NTLBIl7NCTl4ldyxXyHunuFvhGyomKWqD1LAP0kT0WySNggT4n0sjh03l6i4BJFiU6jxXruG45fwk-XH5Zp56VHlLzlc/+tags.png" style="cursor: pointer; height: 254px; width: 441px;" /></a>
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/03/how-add-meta-tags-to-bloggerblogspot.html" style="text-decoration: none;" target="_blank">How Add META TAGS to Blogger(blogspot) blogs</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/03/how-to-add-different-meta-tags-to.html" style="text-decoration: none;" target="_blank">Add Different Meta tags to Different Blogger Posts</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/05/how-to-install-dynamic-meta-description.html" style="text-decoration: none;" target="_blank">How To Install Dynamic Meta Description Tags</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Submit Your Sitemap to Search Engines<span style="color: white;"> Complete SEO Guide For Blogger|Blogspot</span></h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLFA26oYIS6HyESGsGxFl9rwUNGlxzGhRwTrY4b6aEhNuRqBr1_ztUy0fsmf9M3PT1ceqAhAqvyNZ7LDcd9lzjy9J6g-7EbidYwOa09RxqXjIY0asRIOliZMzyNTVlqzrQI0NakIYpUu8/s1600-h/webmaster+tools.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397477360944114738" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrLFA26oYIS6HyESGsGxFl9rwUNGlxzGhRwTrY4b6aEhNuRqBr1_ztUy0fsmf9M3PT1ceqAhAqvyNZ7LDcd9lzjy9J6g-7EbidYwOa09RxqXjIY0asRIOliZMzyNTVlqzrQI0NakIYpUu8/+tools.png" style="cursor: pointer; height: 240px; width: 441px;" /></a>
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/03/how-to-submit-blogger-sitemap-to-google.html" style="text-decoration: none;" target="_blank">HOW TO SUBMIT BLOGGER SITEMAP TO GOOGLE</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/03/how-to-submit-blogger-sitemap-to-msn.html" style="text-decoration: none;" target="_blank">How To Submit Blogger Sitemap to MSN and Ask.com</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/03/how-to-submit-blogger-sitemap-to-yahoo.html" style="text-decoration: none;" target="_blank">How To Submit blogger sitemap to yahoo</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Change Blogger Default Title Tag</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDBuMNmW7i5Mp3VO5nYGkc60gGdL_xEZuOgWzq3kMrxttdG6TeJlg0qeMvJrZulXP9MkHSLpvilW6vxMInkfczUQlVpjXVIRMOkY8XorV_ynY7TQmpUkhA7osp07jHkfAi5CMoqrTK4tX/s1600-h/blogger+title+tag.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397485209690712386" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizDBuMNmW7i5Mp3VO5nYGkc60gGdL_xEZuOgWzq3kMrxttdG6TeJlg0qeMvJrZulXP9MkHSLpvilW6vxMInkfczUQlVpjXVIRMOkY8XorV_ynY7TQmpUkhA7osp07jHkfAi5CMoqrTK4tX/+title+tag.png" style="height: 195px; width: 441px;" /></a><br /><br />
Default
page title for a single Blogger post is BLOG TITLE: POST TITLE. You can
improve SEO by changing the title tags to POST TITLE ~ BLOG TITLE.
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/04/how-to-change-default-title-tag-on.html" style="text-decoration: none;" target="_blank">How To Change Default Title Tag on Blogger for SEO</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Change Blogger Default Heading Tag</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0m9nSLMyZFN07iBjMB4dcfkmOhqMSDXF1tvz5TT32F_NHKob88Gkzvf1Vh2rzqfy3N7-luULPu5ni7TcNQaWTl2MIp3PBu1EWn0_Q1kEkILNBtmLjQPEBlEB7PdMBzgqyRSsGq0ZXZoBy/s1600-h/blogger+heading+tag.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397486392585745394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0m9nSLMyZFN07iBjMB4dcfkmOhqMSDXF1tvz5TT32F_NHKob88Gkzvf1Vh2rzqfy3N7-luULPu5ni7TcNQaWTl2MIp3PBu1EWn0_Q1kEkILNBtmLjQPEBlEB7PdMBzgqyRSsGq0ZXZoBy/+heading+tag.png" style="cursor: pointer; height: 55px; width: 441px;" /></a><br /><br />
Heading
Tag (h1, h2, h3, h4, h5) is also important for SEO. All of Blogger
widgets (gadgets) title use h2 or h3 tags. If you want to improve SEO,
you need to use h1 tag for post title.
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/10/change-heading-tag-better-seo-blogger.html" style="text-decoration: none;" target="_blank">How To Change Heading Tag For Better SEO in Blogger</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Use Social Bookmarking Services</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTky2Ijoq5bkVub0zfuVsz6dJ7f2yyeJs8hEe9JHxTFWDROoA-CvwHJyKH8FYszlRvykSPVicOl75lmi7Vs91sMUdgSsw9GqGQCfCPAHfBtlac6LdsMYmk8ziHwecU_0bDOdyS7_QUE5tx/s1600-h/social+bookmarks.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397475221187896642" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTky2Ijoq5bkVub0zfuVsz6dJ7f2yyeJs8hEe9JHxTFWDROoA-CvwHJyKH8FYszlRvykSPVicOl75lmi7Vs91sMUdgSsw9GqGQCfCPAHfBtlac6LdsMYmk8ziHwecU_0bDOdyS7_QUE5tx/+bookmarks.png" style="cursor: pointer; height: 72px; width: 441px;" /></a><br />Adding social bookmarking links can help you build your traffic and improve SEO.
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/07/how-to-add-big-social-bookmarking.html" style="text-decoration: none;" target="_blank">How To Add Big Social Bookmarking buttons</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/08/jquery-social-bookmarks-icons-to.html" style="text-decoration: none;" target="_blank">How To Add jQuery Social Bookmarks icons</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/05/how-to-add-sexy-social-bookmark-to.html" style="text-decoration: none;" target="_blank">How To Add Sexy Social Bookmark to Blogger</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/06/how-to-add-addtoany-social-bookmarking.html" style="text-decoration: none;" target="_blank">How To Add Addtoany Social Bookmarking Widget</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/05/how-to-add-sociofluid-bookmarking.html" style="text-decoration: none;" target="_blank">How To Add SocioFluid Bookmarking Widget</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/05/how-to-add-retweet-button-in-below-each.html" style="text-decoration: none;" target="_blank">How To Add Retweet Button in Blogger</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/08/save-to-delicious-button-with-hit.html" style="text-decoration: none;" target="_blank">How To Add Save to del.icio.us button with Hit counts</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/08/add-digg-it-links-to-your-blogger-posts.html" style="text-decoration: none;" target="_blank">How To Add 'Digg it !!!' Link to blogger posts</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/08/add-stumbleupon-links-to-blogger-posts.html" style="text-decoration: none;" target="_blank">How To Add 'Stumble it' Link to blogger posts</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/08/add-reddit-links-to-your-blogger-posts.html" style="text-decoration: none;" target="_blank">How To Add 'Reddit' Link to your blogger posts</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/08/add-twit-this-links-to-blogger-posts.html" style="text-decoration: none;" target="_blank">How To Add 'Twit this' Links to blogger posts</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/08/add-delicious-links-to-blogger-posts.html" style="text-decoration: none;" target="_blank">How To Add 'del.icio.us' Links to blogger posts</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/08/add-share-on-technorati-links-to.html" style="text-decoration: none;" target="_blank">How To Add 'Share on Technorati' Links to blogger</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Use Related Posts Widget</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH8-BZU5X6aBJwHKTfGEAIfk-WJKBQpYmVTnzfCBGsFh2MJOXsyL9FqeZRMrvbWl090UD5r3rdod03xEVGSdDYuJn5aruPkF0tLqb44xH8zNRVIsbchKaueGoRdVM-611pH9frMopduIty/s1600-h/related+posts.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397470859501054978" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH8-BZU5X6aBJwHKTfGEAIfk-WJKBQpYmVTnzfCBGsFh2MJOXsyL9FqeZRMrvbWl090UD5r3rdod03xEVGSdDYuJn5aruPkF0tLqb44xH8zNRVIsbchKaueGoRdVM-611pH9frMopduIty/+posts.png" style="cursor: pointer; height: 225px; width: 441px;" /></a>
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/09/jquery-related-posts-widget-blogger.html" style="text-decoration: none;" target="_blank">How To Add jQuery Related Posts Widget for Blogger</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/05/nice-related-post-widget-for-bloggers.html" style="text-decoration: none;" target="_blank">Nice Related Post Widget For Bloggers</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/05/how-to-add-related-post-widget-to.html" style="text-decoration: none;" target="_blank">Add Related Post Widget to Blogger-Original Templates</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/05/add-related-post-widget-to-blogger-for.html" style="text-decoration: none;" target="_blank">Add Related Post Widget to Blogger-Modified Templates</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/08/instant-related-post-widget-blogger.html" style="text-decoration: none;" target="_blank">Instant Related Post Widget For Blogger</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Use Read More... Feature</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDp7blvjsA8tCGW2z-0maeiWKVIXfc7Wg5Ny2FPY7I7sn34-o1zHIHF7HQEFOxfykmyX8lPz8M7uSBhWGsO27EHLBkAW4SxVbwsnyGDHOt_LTINZjt4fzVud8sT4ogDSB24U1YkudLNxjE/s1600-h/blogger+read+more.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397489306296009666" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDp7blvjsA8tCGW2z-0maeiWKVIXfc7Wg5Ny2FPY7I7sn34-o1zHIHF7HQEFOxfykmyX8lPz8M7uSBhWGsO27EHLBkAW4SxVbwsnyGDHOt_LTINZjt4fzVud8sT4ogDSB24U1YkudLNxjE/+read+more.png" style="cursor: pointer; height: 177px; width: 441px;" /></a>
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/06/how-to-add-auto-read-more-feature-with.html" style="text-decoration: none;" target="_blank">Auto 'Read More' Feature with Thumbnails</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/10/expandable-post-jquery-read-more.html" style="text-decoration: none;" target="_blank">Jquery Read More-Expandable Post in Blogger</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/05/how-to-add-auto-read-more-feature-to.html" style="text-decoration: none;" target="_blank">Add Auto 'Read More' Feature to blogger</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/05/how-to-add-read-more-feature-to-blogger.html" style="text-decoration: none;" target="_blank">Add 'Read More' Feature to blogger</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/04/how-to-create-expandable-post-summaries.html" style="text-decoration: none;" target="_blank">How To Create Expandable Post Summaries</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Use Recent Posts,Recent Comments Widgets</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBf-vovZNcw3R3S3IFKlr71AqGFoMJg-yzor8QqgvZaWWhG_xsU7NFrQ-awiDqZSsubaNtiBVFhaqAi2sVybsgCct7bWpk-Vca6qPCSFvb5kVtd3Yf4lVzeWTIINWzIwIAe-TxbG4Rb-_I/s1600-h/recent+post.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397473204351112290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBf-vovZNcw3R3S3IFKlr71AqGFoMJg-yzor8QqgvZaWWhG_xsU7NFrQ-awiDqZSsubaNtiBVFhaqAi2sVybsgCct7bWpk-Vca6qPCSFvb5kVtd3Yf4lVzeWTIINWzIwIAe-TxbG4Rb-_I/+post.png" style="cursor: pointer; height: 200px; width: 441px;" /></a>
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/05/how-to-add-recent-posts-widget-with.html" style="text-decoration: none;" target="_blank">How To Add Recent Posts Widget with Thumbnails</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/05/how-to-add-recent-post-widget-for.html" style="text-decoration: none;" target="_blank">How To Add Recent Posts Widget to blogger</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/06/how-to-add-scrolling-recent-posts.html" style="text-decoration: none;" target="_blank">Add Scrolling Recent Posts Widget to blogger</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/04/how-to-add-recent-comments-widget-for.html" style="text-decoration: none;" target="_blank">Add Recent Comments Widget For Blogger Blog</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Use Popular Post Widget</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtTfnyZ0rba-Dp2smorzZ_PHXfL-bVNjTAuPM4EPGn4ITEMUYIobUJrGxCJ47Ty8MV3OVU-naPDpzq0focAOKZO-ieGZdezmt2pS5uSZeGSAL431U5iX7jWS4IxbyuefLDnBMPxc81nrbO/s1600-h/blogger+popular+post.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397490503645192882" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtTfnyZ0rba-Dp2smorzZ_PHXfL-bVNjTAuPM4EPGn4ITEMUYIobUJrGxCJ47Ty8MV3OVU-naPDpzq0focAOKZO-ieGZdezmt2pS5uSZeGSAL431U5iX7jWS4IxbyuefLDnBMPxc81nrbO/+popular+post.png" style="cursor: pointer; height: 195px; width: 441px;" /></a>
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/06/how-to-add-popular-post-widget-with.html" style="text-decoration: none;" target="_blank">Add Popular Post Widget - with comments count</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/06/how-to-add-popular-post-widget-without.html" style="text-decoration: none;" target="_blank">Add Popular Post Widget-without comments count</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Use Labels / Tag Clouds</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWnsABTHWjkkxlPb5zmJZ6sberN1ce5GhtJ7A1rq9xjkAWsQ1KPZLG_rtBqtaY6NlR_Dho3V6aEgKaXSqP3XXLZa02fUl9VoNXvrtLhm5HrGuU4ZfEehFWr5-cU0-i0mQeZj422DX93oKS/s1600-h/blogger+tag+cloud.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397474214280970210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWnsABTHWjkkxlPb5zmJZ6sberN1ce5GhtJ7A1rq9xjkAWsQ1KPZLG_rtBqtaY6NlR_Dho3V6aEgKaXSqP3XXLZa02fUl9VoNXvrtLhm5HrGuU4ZfEehFWr5-cU0-i0mQeZj422DX93oKS/+tag+cloud.jpg" style="cursor: pointer; height: 200px; width: 441px;" /></a>
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/05/how-to-add-new-blogger-tag-label-cloud.html" style="text-decoration: none;" target="_blank">How To Add New Blogger Tag /Label Cloud Widget</a></li>
<br />
<li><a href="http://www.bloggertipandtrick.net/2009/04/how-to-add-flash-animated-label-cloud.html" style="text-decoration: none;" target="_blank">Add Flash Animated Label Cloud Widget to Blogger</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Use Breadcrumb</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYmr6V69DlvmtH6vzRFWCDN7AjuZXynIfsVeibBOQ4-lhVAmOKcwCT01byzlaOsGMcRpv322e9RbxLtJkFtZfsFUFsZ0GRiQuZWncYsQGeCFty6kxIOplBqWrWMJavH8kcNDHKnVgs3Evq/s1600-h/breadcrumb.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397471953629130914" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYmr6V69DlvmtH6vzRFWCDN7AjuZXynIfsVeibBOQ4-lhVAmOKcwCT01byzlaOsGMcRpv322e9RbxLtJkFtZfsFUFsZ0GRiQuZWncYsQGeCFty6kxIOplBqWrWMJavH8kcNDHKnVgs3Evq/" style="cursor: pointer; height: 100px; width: 441px;" /></a><br />You can use breadcrumb to provide easy navigation for your visitor and increase page views.
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://purplemoggy.blogspot.com/2006/11/year-month-breadcrumbs.html" rel="nofollow" style="text-decoration: none;" target="_blank">How To Add Breadcrumb to Blogger</a></li>
</ul>
<br />
<h3 style="color: black; font-family: arial;">
Submit Blog to Blog Directories</h3>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI5fliGsOwEfugyp5UcqRbzvBlEoDYs8cpQLSoSF1VCK9b59tgDInh0d0NH2omOsM7kMyRaocxUZhhZ_Jk_BUEyD4IPRbeaqhrNMPsBR6JATPE0BLmQNPfNApfbuKhM9-B6LUGsYsVwyOK/s1600-h/blog+directories.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5397492119143322738" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI5fliGsOwEfugyp5UcqRbzvBlEoDYs8cpQLSoSF1VCK9b59tgDInh0d0NH2omOsM7kMyRaocxUZhhZ_Jk_BUEyD4IPRbeaqhrNMPsBR6JATPE0BLmQNPfNApfbuKhM9-B6LUGsYsVwyOK/+directories.png" style="cursor: pointer; height: 200px; width: 441px;" /></a>
<br />
<ul style="list-style: square inside url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidey_mClxNNpA6fpsB7OvVTDuykGkXVqBX9JVxm3gTNqTw4uie9JheJeSjHfogF3WhZ8MNYUPYcSp8vxlG3MrWUhVFJbcitvdatbPMielm3SGILVxJcj9JvW6sQ80CxNoIx10cV79XKhyphenhyphenj/");">
<li><a href="http://www.bloggertipandtrick.net/2009/04/submit-blog-to-blog-directories-to.html" style="text-decoration: none;" target="_blank">Submit Blog to Blog Directories to increase Traffic</a></li>
</ul>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com2tag:blogger.com,1999:blog-849479311437999656.post-17983526907652647552012-06-16T05:37:00.003-07:002012-06-16T05:37:40.316-07:00How to Add Adsense ads inside Blogger blog posts or between blog posts<span style="font-size: 130%; font-weight: bold;">How to place adsense ads inside Blogger blog Posts: </span><span style="color: white;"> How to Add Adsense ads inside Blogger blog posts or between blog posts</span><br />
1.Sign in to your blogger dashboard>layout>Edit html<br />
Check the box next to 'Expand Widget Templates'<br />
2.Scroll down the window till you see this code<span style="color: white;"> How to Add Adsense ads inside Blogger blog posts or between blog posts</span><br />
<span style="color: red;"><b:if cond='data:post.includeAd'> <data:adEnd/> <data:adCode/> <data:adStart/> </b:if></span><br />
<br />
3.Replace that code in the template with the below code<span style="color: white;"> How to Add Adsense ads inside Blogger blog posts or between blog posts</span><br />
<span style="color: red;"><b:if
cond='data:blog.pageType != "item"'> <b:if
cond='data:post.includeAd'> <data:adEnd/> <data:adCode/>
<data:adStart/> </b:if> </b:if></span><br />
<br />
4.Again,scroll down the template and find out data-post body tag and
paste the below code just above that code{this will show ads above the
post body.If you want ads to show below the post,paste the code below
that tag.<br />
Here is the code to paste:-<span style="color: white;"> How to Add Adsense ads inside Blogger blog posts or between blog posts</span><br />
<span style="color: red;"><b:if
cond='data:blog.pageType == "item"'> <b:if
cond='data:post.includeAd'> <data:adEnd/> <data:adCode/>
<data:adStart/> </b:if> </b:if></span><br />
<br />
That's it!<span style="color: white;"> How to Add Adsense ads inside Blogger blog posts or between blog posts</span><br />
<br />
<span style="font-size: 130%; font-weight: bold;">How to place adsense ads between Blog posts:</span><span style="color: white;"> How to Add Adsense ads inside Blogger blog posts or between blog posts</span><br />
1.Sign in to your blogger dashboard>click on the layout link<br />
2.Click on the Edit link in the "Blog Posts' column <span style="color: white;"> How to Add Adsense ads inside Blogger blog posts or between blog posts</span><br /> ..............a pop up window opens.......... <span style="color: white;"> How to Add Adsense ads inside Blogger blog posts or between blog posts</span><br />
3.Check the box next to 'Show ads between Posts'<br />
next,configure the ads,choose the format,colours,etc and SAVE THE CHANGES.<br />That's it! Now your adsense ads will show between blog posts.<span style="color: white;"> How to Add Adsense ads inside Blogger blog posts or between blog posts</span>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-30839461426658131542012-06-16T05:34:00.000-07:002012-06-16T05:34:06.623-07:00How To Make Money With Adsense Without Your WebsiteDirect Download Center <span style="color: #3366ff;">100% Adsense Revenue Sharing Program<span style="color: white;"> How To Make Money With Adsense Without Your Website</span></span><br />
<span style="color: red;">DirectDownloadCenter.com</span>
is free software download center. You can download any Freeware and
Shareware directly from publisher. They have setup a system to share
100% AdSense revenue to all contributing members from all traffic that
you sent to their site.<br />
It is easy to use DirectDownloadCenter.com to earn advertising revenue. <span style="color: red;">There are two ways to do it:</span><span style="color: #3366ff;"><span style="color: white;"> How To Make Money With Adsense Without Your Website</span></span><br />
1. Link to any pages of DirectDownloadCenter.com <span style="color: #3366ff;">using your referrer code</span>. Traffic sent from your link will display Google Ads using your Adsense ID 90%.<span style="color: #3366ff;"><span style="color: white;"> How To Make Money With Adsense Without Your Website</span></span><br />
2. Referring your friends to be our member and getting your ads
displayed on their traffic 10% of the time. It's easy, just link to any
pages using your referrer code and wait for his/her registering.<span style="color: #3366ff;"><span style="color: white;"> How To Make Money With Adsense Without Your Website</span></span><br />
All you have to do is to guide your friends to download software from
them or invite your friends to be their member and start getting
money!!.<span style="color: #3366ff;"><span style="color: white;"> How To Make Money With Adsense Without Your Website</span></span><br />
Publish or share software with your friends and start getting money too!!<span style="color: #3366ff;"><span style="color: white;"> How To Make Money With Adsense Without Your Website</span></span><br />
<span style="font-size: 85%;"><a href="http://directdownloadcenter.com/?p=revenue_share&u=keerthiset2" rel="nofollow" target="_blank">Join Now!! Make Money With Adsense Without Your Website. Apply now!</a></span>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-46888974700066776882012-06-16T05:27:00.001-07:002012-06-16T05:30:37.645-07:00How To Insert Adsense Ads In Blogger Post<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em;">
</div>
<br />
This will explain how to Embedd adsense ads in between posts body.<span style="color: white;"> How To Insert Adsense Ads In Blogger Post</span><br />
1.<span style="color: #3333ff;">Generate Parsed code</span> for adsense code because we cannot put adsense code directly in the xml.So parse it using <a href="http://blogcrowds.com/resources/parse_html.php" rel="nofollow" target="_blank">AdParser.</a><br />
2.After parsing,your ad code Should look like this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHAXoYJwswf6duMq-5B54fark7Tif47IkLd4ROyg_xarrv_gBcFOvuSevHGc1oqkcaomyZh7269lnynOkjXjrkFG_IwuUuHsCyxKFJCPVCnmLmXLqKzKHhnv2JBnfV9bD7Ycst3hVzmnU/s1600/ads11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5324895700642671810" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHAXoYJwswf6duMq-5B54fark7Tif47IkLd4ROyg_xarrv_gBcFOvuSevHGc1oqkcaomyZh7269lnynOkjXjrkFG_IwuUuHsCyxKFJCPVCnmLmXLqKzKHhnv2JBnfV9bD7Ycst3hVzmnU/s400/ads11.jpg" style="height: 198px; width: 400px;" /></a></div>
<span style="font-size: 130%;"><span style="color: #ff6600;"><b> How To Place ad above or below your post header</b></span></span><br />
<span style="font-size: 100%;"><span style="color: black;">log in to your dashboard--> layout- -> Edit HTML</span></span><br />
<span style="font-size: 100%;"><span style="color: black;">Click on "</span></span><span style="font-size: 100%;"><span style="color: #3366ff;">Expand Widget Template</span></span><span style="font-size: 100%;"><span style="color: black;">" and </span></span><span style="font-size: 100%;"><span style="color: black;"> scroll down to where you see this:-</span></span><span style="color: white;"> How To Insert Adsense Ads In Blogger Post</span><br />
<span style="font-size: 100%;"><span style="color: red;"><b><div class='post-header-line-1'/></b></span></span><br />
<br />
<span style="color: black;"><span style="font-size: 100%;">To place ad </span></span><span style="font-size: 100%;"><span style="color: #009900;">above</span></span><span style="color: black;"><span style="font-size: 100%;"> your post header.Paste the code above this line.</span></span><br />
<span style="color: black;"><span style="font-size: 100%;">To place ad </span></span><span style="font-size: 100%;"><span style="color: #009900;">below</span></span><span style="color: black;"><span style="font-size: 100%;"> your post header.Paste the code below this line.</span></span><span style="color: white;"> How To Insert Adsense Ads In Blogger Post</span><br />
<span style="font-size: 130%;"><span style="color: #ff6600;"><b>How To Place ad end of your post body</b></span></span><span style="font-size: 100%;"><span style="color: black;"><br /></span></span><br />
<span style="font-size: 100%;"><span style="color: black;">log in to your dashboard--> layout- -> Edit HTML</span></span>
<br />
<span style="font-size: 100%;"><span style="color: black;">Click on "Expand Widget Template" and </span></span><span style="font-size: 100%;"><span style="color: black;"> scroll down to where you see this:-</span></span><span style="color: white;"> How To Insert Adsense Ads In Blogger Post</span><br />
<span style="font-size: 100%;"><b><span style="color: red;"><p><data:post.body/></p></span></b></span><br />
<br />
Paste the code below this line, to show your ad at the end of your post.<span style="color: white;"> How To Insert Adsense Ads In Blogger Post</span><br />
<span style="font-size: 100%;"><span style="color: black;"><b>NOTE :</b> To Set the Align of your ad , Insert your code like this.</span></span><span style="color: white;"> How To Insert Adsense Ads In Blogger Post</span><br />
<span style="color: red;"><span style="font-size: 100%;"><p align="</span></span><span style="font-size: 100%;"><span style="color: #009900;">center</span></span><span style="color: red;"><span style="font-size: 100%;">"> </span></span><span style="font-size: 100%;"><span style="color: #3366ff;">Your Ad code</span></span><span style="color: red;"><span style="font-size: 100%;"><br /></p></span></span><br />
<br />
Replace "<span style="font-size: 100%;"><span style="color: #009900;">center</span></span><span style="font-size: 100%;"><span style="color: black;">" with "</span></span><span style="font-size: 100%;"><span style="color: #009900;">left</span></span><span style="font-size: 100%;"><span style="color: black;">" or "</span></span><span style="font-size: 100%;"><span style="color: #009900;">right</span></span><span style="font-size: 100%;"><span style="color: black;">" for desired alignment.</span></span><span style="color: white;"> How To Insert Adsense Ads In Blogger Post</span><br />
<iframe height="300" src="http://tools.bloggerplugins.org/parser.php" style="border: medium none;" width="100%"></iframe>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-3224931147211595462012-06-16T05:18:00.003-07:002012-06-16T05:23:17.311-07:00How to Embed Adsense add unit in Left or Right corner of post content<br />
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em;">
</div>
This will explain How to Embed Adsense add unit in <span style="color: red;">Left or Right corner</span> of <span style="color: #33cc00;">post content</span>.
<br />
Generate <span style="color: red;">Parsed code</span> for <span style="color: #009900;">adsense code</span> because we cannot put adsense code directly in the xml.So parse it using <a href="http://blogcrowds.com/resources/parse_html.php" rel="nofollow" target="_blank">AdParser.<span style="color: white;"> How to Embed Adsense add unit in Left or Right corner of post content</span></a><br />
<a href="http://blogcrowds.com/resources/parse_html.php" rel="nofollow" target="_blank">
</a>After parsing,your ad code Should look like this.<span style="color: white;"> How to Embed Adsense add unit in Left or Right corner of post content</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4oSFWaMB1xD2b7kXbsJerv3bkqZqOUbuhYgbU7_P69iXNLM-djWSOblY6sDQInhhY9sn57pLm2n9ycX8tix6ahOaEa4qsZBVbDl0U3nrY6z_VTZIdyI64qX2hXFTm5BrGnYO2a3rjtQU/s1600/ads1111.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5328128080851237698" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4oSFWaMB1xD2b7kXbsJerv3bkqZqOUbuhYgbU7_P69iXNLM-djWSOblY6sDQInhhY9sn57pLm2n9ycX8tix6ahOaEa4qsZBVbDl0U3nrY6z_VTZIdyI64qX2hXFTm5BrGnYO2a3rjtQU/s400/ads1111.jpg" style="height: 148px; width: 300px;" /></a></div>
<br />
1.Log in to your dashboard--> layout- -> Edit HTML<br />
2.Click on "Expand Widget Templates"
<br />
3.Scroll down to where you see this:- <span style="color: white;"> How to Embed Adsense add unit in Left or Right corner of post content</span><br />
<b><span style="color: red;"><div class='post-header-line-1'/></span></b><br />
<br />
4.To place ad Top <span style="color: #3366ff;">left</span> corner of your post ,Paste the below code, below of above line.<span style="color: white;"> How to Embed Adsense add unit in Left or Right corner of post content</span><br />
<b><span style="color: #33cc00;"><div style=”display:block;float:</span><span style="color: #3366ff;">left</span><span style="color: #33cc00;">;margin: 0px 10px 0px 0px;”></span><br /><span style="color: red;">Your Adsense Parsed code</span><br /><span style="color: #33cc00;"></div></span></b><br />
<span style="color: white;"> How to Embed Adsense add unit in Left or Right corner of post content</span><b><span style="color: #33cc00;"> </span></b><br />
<b><span style="color: red;"></span></b><br />
<b><span style="color: red;">Attention :</span> </b> We can't put "<span style="color: #009900;"><div style=”display:block;float:left;margin: 0px 10px 0px 0px;”></span>" and "<span style="color: #009900;"></div></span>" directly in the xml.So we must generate <span style="color: red;">Parsed code</span> for these code using <a href="http://blogcrowds.com/resources/parse_html.php" rel="nofollow" target="_blank">AdParser.</a><br />
<span style="color: white;"> How to Embed Adsense add unit in Left or Right corner of post content</span> <br />
So Final Code you have to copy below the line "<span style="color: red;"><div class='post-header-line-1'/></span><span style="color: black;">" ,look like this.</span><br />
<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibdOvdnZriDCh6Vr5zRZWGLZtXeq1sg_p5Bdm2-tbqSg-S3YEpOw1PV9XsyewQtxpESXenGpKkB_ClTfkNSaF1xFJxmGvsaFTJcAUnuCpqiuo9h3PpvrJr-WFQ2GK6RIcJ6wlFzeyccq4/s1600/adsense44.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5328124330131487794" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibdOvdnZriDCh6Vr5zRZWGLZtXeq1sg_p5Bdm2-tbqSg-S3YEpOw1PV9XsyewQtxpESXenGpKkB_ClTfkNSaF1xFJxmGvsaFTJcAUnuCpqiuo9h3PpvrJr-WFQ2GK6RIcJ6wlFzeyccq4/s400/adsense44.jpg" style="height: 122px; width: 400px;" /></a></div>
<br />
If you Want To place ad Top <span style="color: #3366ff;">Right </span>corner of your post,Replace "left" with "right".<span style="color: white;"> How to Embed Adsense add unit in Left or Right corner of post content</span><br />
<iframe height="300" src="http://tools.bloggerplugins.org/parser.php" style="border: medium none;" width="100%"></iframe><br />
<br />
5.Click on "Save Templates" and Refresh your site.<span style="color: white;"> How to Embed Adsense add unit in Left or Right corner of post content</span>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-10992618371664300182012-06-16T05:11:00.003-07:002012-06-16T05:11:29.748-07:00How to put AdSense in the Middle or Anywhere of Blogger postsIf you want to put Adsense ads in the middle of Blogger posts follow the steps below.
<br />
1.Generate <span style="color: red;">Parsed code</span> for your adsense code because we cannot put adsense code directly in the xml.So parse it using <a href="http://blogcrowds.com/resources/parse_html.php" rel="nofollow" target="_blank">AdParser</a>. <span style="color: white;"> How to put AdSense in the Middle or Anywhere of Blogger posts</span><br />
After parsing,your ad code Should look like this.<span style="color: white;"> How to put AdSense in the Middle or Anywhere of Blogger posts</span><br />
<br />
<img alt="" border="0" id="BLOGGER_PHOTO_ID_5336985053422820770" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIOcsHIm5Y9VTgK2m5p5lHDMqodj5s68yw9z88tC678N7BACpFVFBAKs1E0VaXypyAk5LP0U-0tl_6xVTsqyHHX96FOkkQHj1P0HdEqUN2YiGTK92CLU0Gv6MUjetQDnxIRb6BNFhIMdE/s400/ads11.jpg" style="cursor: pointer; height: 198px; width: 400px;" /><br />
<br />
2.Log in to your dashboard--> layout- -> Edit HTML<br />
3.Click on "Expand Widget Templates"
<br />
4.Scroll down to where you see this:<span style="color: white;"> How to put AdSense in the Middle or Anywhere of Blogger posts</span><br />
<center>
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td><center><data:post.body/></center></td>
</tr>
</tbody>
</table>
</center>
<br />
5.Now replace above code with below code.<span style="color: white;"> How to put AdSense in the Middle or Anywhere of Blogger posts</span><br />
<center><div style="text-align: left;">
</div>
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td style="text-align: left;"><div expr:id='"aim1" + data:post.id'></div>
<div style="clear:both; margin:10px 0"><br /><!-- Your AdSense code here --><br /></div><br />
<div expr:id='"aim2" + data:post.id'><br /><data:post.body/><br /></div><br />
<script type="text/javascript"><br />var obj0=document.getElementById("aim1<data:post.id/>");<br />var obj1=document.getElementById("aim2<data:post.id/>");<br />var s=obj1.innerHTML;<br />var r=s.search(/\x3C!-- adsense --\x3E/igm);<br />if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}<br /></script></td>
</tr>
</tbody>
</table>
</center>
<br />
<strong>Note :</strong> You must you must replace <span style="color: red;"><!-- Your AdSense code here --></span> with <span style="color: red;">Your Adsense Parsed code</span>. <span style="color: white;"> How to put AdSense in the Middle or Anywhere of Blogger posts</span><br />
6.Now save your template.<br />
7.In every blog post ,Put this special code :<span style="color: white;"> How to put AdSense in the Middle or Anywhere of Blogger posts</span><br />
<center>
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td><center><!-- adsense --></center></td>
</tr>
</tbody>
</table>
</center>
<br />
in the exact point you want to appear AdSense advertising.Now you are done.<span style="color: white;"> How to put AdSense in the Middle or Anywhere of Blogger posts</span>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-64452889177548022832012-06-16T05:07:00.000-07:002012-06-16T05:07:02.185-07:00How To Remove AdSense Ads from the Homepage<div class="separator" style="clear: both; text-align: left;">
</div>
This post explains how to hide Google Adsense Ads In Home Page And display them only Inside Post pages Alone.
<br />
<br />
If you want to hide Google Adsense Ads In Home Page ,follow the steps below.<br />
<br />
1.Generate Parsed code for your adsense code because we cannot put adsense code directly in the xml.So parse it using <a href="http://blogcrowds.com/resources/parse_html.php" rel="nofollow" target="_blank">AdParser</a>.<br />
After parsing,your ad code Should look like this.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinZCnBxM-xbRsF3R-YQWCN4VcrX7gI-wNeoXpsF3eyiKyWpF2gVo6hJD7Kci6-IF2ojgpmgviWtd3CdHcpr6Bt7IHbnbAoAsQ2Vn6-aeWjVIC7cFfE8a8PwR0TB_-v7_cVzo1_cESn5c/s1600/ads11.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5337033089375680610" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiinZCnBxM-xbRsF3R-YQWCN4VcrX7gI-wNeoXpsF3eyiKyWpF2gVo6hJD7Kci6-IF2ojgpmgviWtd3CdHcpr6Bt7IHbnbAoAsQ2Vn6-aeWjVIC7cFfE8a8PwR0TB_-v7_cVzo1_cESn5c/s400/ads11.jpg" style="height: 198px; width: 400px;" /></a></div>
2.Log in to your dashboard--> layout- -> Edit HTML<br />
3.Click on "Expand Widget Templates"<br />
4.Scroll down to where you see this:<br />
<center><br />
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td><center><data:post.body/></center></td>
</tr>
</tbody>
</table>
</center>
<br />
5.Now Copy below code and paste it before the above line.<br />
<center><div style="text-align: left;">
<br /></div>
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td style="text-align: left;"><b:if cond ='data:blog.pageType == "item"'>
<!-- Your AdSense code here --><br />
</b:if></td>
</tr>
</tbody>
</table>
</center>
<br />
<strong>Note :</strong> You must you must replace <span style="color: red;"><!-- Your AdSense code here --> </span>with <span style="color: red;">Your Adsense Parsed code</span>.<br />
6.Now save your template and you are done.Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-54673195413896880112012-06-16T04:58:00.000-07:002012-06-16T05:02:29.306-07:00How To Add Adsense Parser to bloggerYou must generate <span style="color: red;">Parsed code</span> for your <span style="color: #3333ff;">adsense code</span> because you <span style="color: red;">cannot put adsense code directly in the xml</span>.So parse it using Adsense Parser tools.This tool help your visitors to parse their adsense code.I found this tips from <a href="http://www.bloggerplugins.org/">here</a> .<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGK9WbWcJTwvahyphenhyphen6vrlGMN5K_PouyXKbWpGmAtXdP1q-BjkdowG4yv8HbM4aTD7_T9LDgNck2zzA5A6YSyFYNWwx9R1LF11e39aU9UTdEBvWhVSIPqmvbmyezSA7c0vAePsPCd8OQT7x8/s1600-h/adsp111.png" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5348142861157092162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGK9WbWcJTwvahyphenhyphen6vrlGMN5K_PouyXKbWpGmAtXdP1q-BjkdowG4yv8HbM4aTD7_T9LDgNck2zzA5A6YSyFYNWwx9R1LF11e39aU9UTdEBvWhVSIPqmvbmyezSA7c0vAePsPCd8OQT7x8/s400/adsp111.png" style="height: 279px; width: 384px;" /></a></div>
<br />
Parsed code will look like this :<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3May1mX6pMrweVXTvoyN4PMVMyGiRq3O17OzfnLBGbUwffKB_tpLGrDDNkOTfRQe2WmjBWUilCi8zAt2_XV05BAKpGYVlalsTFFUEb9i5IFl1V3eInoIAU2UYrqBwk_yqBRaEFuupY9Y/s1600-h/adsp222.png" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5348142924822671826" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3May1mX6pMrweVXTvoyN4PMVMyGiRq3O17OzfnLBGbUwffKB_tpLGrDDNkOTfRQe2WmjBWUilCi8zAt2_XV05BAKpGYVlalsTFFUEb9i5IFl1V3eInoIAU2UYrqBwk_yqBRaEFuupY9Y/s400/adsp222.png" style="height: 296px; width: 385px;" /></a></div>
<br />
1.Login to your dashboard--> layout- ->Page Elements<br />
2.Click on 'Add a Gadget'.<br />
3.Select 'HTML/Javascript' and add the code given below and click save.<br />
<br />
<br />
<center><br />
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td style="text-align: left;"><iframe src ="http://tools.bloggerplugins.org/parser.php"width="100%" style="border: none" height="300"</iframe></td>
</tr>
</tbody>
</table>
</center><br />
<br />
It will look like this.<br />
<br />
<iframe height="300" src="http://tools.bloggerplugins.org/parser.php" style="border: medium none;" width="100%"></iframe><br />
Now you are done.Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-42742287117254420472012-06-16T04:54:00.002-07:002012-06-16T04:54:29.103-07:00How To Add 728×90 leaderboard Adsense ads between Header and Post Section in blogger1.Log in to your dashboard--> layout- -> Edit HTML<br />
2.Click on "<span style="color: #3333ff;">Expand Widget Templates</span>"<br />
3.Scroll down to where you see this:<br />
<br />
<center><br />
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td style="text-align: left;"><b:section class='crosscol' id='crosscol' showaddelement='no'/></td>
</tr>
</tbody>
</table>
</center>
<br />
4.Now <span style="color: red;">replace</span> above code with below code.<br />
<br />
<center><br />
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td style="text-align: left;"><b:section class='crosscol' id='crosscol' showaddelement='yes'/></td>
</tr>
</tbody>
</table>
</center>
<br />
5.Now save your template.<br />
6.Go to Layout > Page Elements<br />
7.Now Click on <span style="color: #3333ff;">new</span> 'Add a Gadget' option that will now have appeared <span style="color: red;">between Blog Posts and the Header.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypnjqS1f1tn_XUq66zvh4LdHBpK2LEfkY8-NBcbcIjU0ht8T_R9E6turSRL1-iQh4ZcBt0YYSHNpPwHTahilWn9aOtc0teCWJeF1pCVrFM7m4s0LmQ7io2HzqXAXaZCoYRhBpp2sQzWA/s1600-h/gad111.PNG" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5352579453756979858" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgypnjqS1f1tn_XUq66zvh4LdHBpK2LEfkY8-NBcbcIjU0ht8T_R9E6turSRL1-iQh4ZcBt0YYSHNpPwHTahilWn9aOtc0teCWJeF1pCVrFM7m4s0LmQ7io2HzqXAXaZCoYRhBpp2sQzWA/s400/gad111.PNG" style="height: 240px; width: 400px;" /></a></div>
<br />
<br />
8.Select 'HTML/Javascript' and add your 728x90 leaderboard Adsesne code and click save.<br />
Now you are done.Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-52841919990231287192012-06-16T04:50:00.000-07:002012-06-16T04:50:09.309-07:00How To Use Adsense Section Targeting on BloggerWhat is Google Adsense Section targeting? Here is the official information on <a href="https://www.google.com/adsense/support/bin/answer.py?hl=en&answer=23168">Adsense Help Center</a>:<br />
<ul>
<li>Section targeting allows you to suggest sections of your text and
HTML content that you'd like us to emphasize or downplay when matching
ads to your site's content. By providing us with your suggestions, you
can assist us in improving your ad targeting. We recommend that only
those familiar with HTML attempt to implement section targeting.</li>
<li>To implement section targeting, you'll need to add a set of special
HTML comment tags to your code. These tags will mark the beginning and
end of whichever section(s) you'd like to emphasize or de-emphasize for
ad targeting.</li>
<li>The HTML tags to emphasize a page section take the following format:</li>
</ul>
<center><br />
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td style="text-align: left;"><!-- google_ad_section_start -->
YOUR PAGE CONTENT<br />
<!-- google_ad_section_end --></td>
</tr>
</tbody>
</table>
</center>
<br />
Now, how can you implement Adsense Section Targeting on New Blogger?
If you want to get relevant ads, applying Adsense Section Targeting to
your blog use above the code before and after post titles and post
content.<br />
Follow these steps to do it.<br />
1.Log in to your dashboard--> layout- -> Edit HTML<br />
2.Click on "<span style="color: #3333ff;">Expand Widget Templates</span>"<br />
3.Scroll down to where you see this:<br />
<center><br />
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td style="text-align: left;"><b:includable id='post' var='post'><br /><div class='post uncustomized-post-template'><br /><a expr:name='data:post.id'/><br /><b:if cond='data:post.title'><br /><h3 class='post-title'><br /><b:if cond='data:post.link'><br /><a expr:href='data:post.link'><data:post.title/></a><br /><b:else/><br /><b:if cond='data:post.url'><br /><a expr:href='data:post.url'><data:post.title/></a><br /><b:else/><br /><data:post.title/><br /></b:if><br /></b:if><br /></h3><br /></b:if></td>
</tr>
</tbody>
</table>
</center>
<br />
4.Now <span style="color: red;">replace</span> above code with below code.<br />
<center><br />
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td style="text-align: left;"><b:includable id='post' var='post'><br /><div class='post uncustomized-post-template'><br /><a expr:name='data:post.id'/><br /><b:if cond='data:post.title'><br /><h3 class='post-title'><br /><b:if cond='data:post.link'><br /><a
expr:href='data:post.link'><!-- google_ad_section_start
--><data:post.title/><!-- google_ad_section_end
--></a><br /><b:else/><br /><b:if cond='data:post.url'><br /><a
expr:href='data:post.url'><!-- google_ad_section_start
--><data:post.title/><!-- google_ad_section_end
--></a><br /><b:else/><br /><!-- google_ad_section_start --><data:post.title/><!-- google_ad_section_end --><br /></b:if><br /></b:if><br /></h3><br /></b:if></td>
</tr>
</tbody>
</table>
</center>
<br />
5.Now again scroll down to where you see this:<br />
<center><br />
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td style="text-align: left;"><data:post.body/></td>
</tr>
</tbody>
</table>
</center>
<br />
6.Now <span style="color: red;">replace</span> above code with below code.<br />
<center><br />
<table bgcolor="#cccd94" border="0" style="width: 400px;">
<tbody>
<tr>
<td style="text-align: left;"><!-- google_ad_section_start --><data:post.body/><!-- google_ad_section_end --></td>
</tr>
</tbody>
</table>
</center>
<br />
7.Now save your template and you are done.Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-19600564602428811952012-06-16T04:42:00.001-07:002012-06-16T04:42:07.226-07:00How To Remove Low paying Adsense AdsTo increase your Adsense Earnings by removing the lowpaying adsense ads from your account,follow the steps below.<br />
<br />
1.First go to <a href="http://www.adsblacklist.com/">www.adsblacklist.com</a> .<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe5n-gLRmoKMU6M8-6cjcg-O5-HMb-ijBTWBM3dQ6nwQNauNytVEGuPOMdi8YvUZCbhapLwd0HZQAIrPOmDDMY4i3KWdLSRatu9c-zz94Z2g6HG9GYU9ounR7wSX7bkB3nN548fPd4cgc/s1600-h/logo.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5344469039461272242" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe5n-gLRmoKMU6M8-6cjcg-O5-HMb-ijBTWBM3dQ6nwQNauNytVEGuPOMdi8YvUZCbhapLwd0HZQAIrPOmDDMY4i3KWdLSRatu9c-zz94Z2g6HG9GYU9ounR7wSX7bkB3nN548fPd4cgc/s400/logo.gif" style="cursor: pointer; height: 56px; width: 229px;" /></a><br />
<br />
2.Now <span style="color: #3333ff;">Signup</span> for a account.it's free and very simple.<br />
3.Now<span style="color: #3333ff;"> login</span> to your account.<br />
4.Now Click on <span style="color: #3333ff;">My Account</span>.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9J1JZjAvZBkALeKSaWBm3ppoBja2g6yKkyYRQ08-k0aUrTk92cBWTgQDq1wFXJ3DEkf036xdBKdspEAyhrlY_WaRiV3dKyY8RdKL6CvjksjGo0R6zJ1OGqPmbu0K06SFWABYW2azWH8I/s1600-h/ads11.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5353699437920997682" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9J1JZjAvZBkALeKSaWBm3ppoBja2g6yKkyYRQ08-k0aUrTk92cBWTgQDq1wFXJ3DEkf036xdBKdspEAyhrlY_WaRiV3dKyY8RdKL6CvjksjGo0R6zJ1OGqPmbu0K06SFWABYW2azWH8I/s400/ads11.png" style="height: 314px; width: 187px;" /></a><br />
<br />
5.Now click on '<span style="color: red;">Add New Domain</span>'<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSukfiebmWodJoqK4rE4BK9hbVJYUK0g0-TXIM1TGkv4fl2c8tKW3t0zu7Tlen1SjzjYmhg_DaBQhkL7XzV6J-DvQANYcmEDjHW8yGRhLSKY8fG_rf44SvGqy5M7vuIEr-_InqsT6WCfc/s1600-h/ads22.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5353700069995258562" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSukfiebmWodJoqK4rE4BK9hbVJYUK0g0-TXIM1TGkv4fl2c8tKW3t0zu7Tlen1SjzjYmhg_DaBQhkL7XzV6J-DvQANYcmEDjHW8yGRhLSKY8fG_rf44SvGqy5M7vuIEr-_InqsT6WCfc/s400/ads22.png" style="height: 136px; width: 310px;" /></a><br />
<br />
4.Submit your <span style="color: red;">URL</span>,<span style="color: red;">TITLE</span> and <span style="color: red;">Keywords</span>.Look at the example below.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYkhI4nE3ItuRrHaqWJudGpu_fGIwb64AG0GlYUtL8andLFvng8uTUxcL9ALtuZRu4f8Meqq20MIl5OZBGoEO4OqnI1m58OvVpGnh-jsT-P7JAydAx6d0X6xxBKGgZ-NJGOnOKw_vyw/s1600-h/ads44.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5353703427944754418" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSvYkhI4nE3ItuRrHaqWJudGpu_fGIwb64AG0GlYUtL8andLFvng8uTUxcL9ALtuZRu4f8Meqq20MIl5OZBGoEO4OqnI1m58OvVpGnh-jsT-P7JAydAx6d0X6xxBKGgZ-NJGOnOKw_vyw/s400/ads44.png" style="cursor: pointer; height: 260px; width: 400px;" /></a><br />
<br />
5.Now go to <span style="color: red;">Generate Filter List</span>.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDFWj8qzjiZHX0O3PUd6HRUju09yh0v_yAsluH3lgyEBTd0BhJNZn3cWexEAblwUCdNJXJe58kIECi5raJQhquca0gD_Xmw_JhwgTbKuRM0Dy426SKyu9kse6FBPmyRWf4M9kTHxIdpDI/s1600-h/ads22.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5344468589390047730" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDFWj8qzjiZHX0O3PUd6HRUju09yh0v_yAsluH3lgyEBTd0BhJNZn3cWexEAblwUCdNJXJe58kIECi5raJQhquca0gD_Xmw_JhwgTbKuRM0Dy426SKyu9kse6FBPmyRWf4M9kTHxIdpDI/s400/ads22.png" style="cursor: pointer; height: 261px; width: 231px;" /></a><br />
<br />
6.<span style="color: red;">Drag and drop</span> your <span style="color: #3333ff;">domain name</span> into 'Keywords from selected domains:' box.Then you can see keywords,you give in step 4.<br />
7.Now select '<span style="color: red;">MFA</span>' and '<span style="color: red;">LCPC</span>'.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHliO-NLT0oObildDQavy1aMylHv7CapopuG2uI50XNuJe-EHVd7NZm308RkMyUnegPq8o9yz0xpvoLiD5Ub85pMlHCJZJKQ8ud8u_SyWsn66vjPy7fEqWdtUhyphenhyphen7q02SGb-ApyIg0Z7Rc/s1600-h/ads33.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5353704685690745330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHliO-NLT0oObildDQavy1aMylHv7CapopuG2uI50XNuJe-EHVd7NZm308RkMyUnegPq8o9yz0xpvoLiD5Ub85pMlHCJZJKQ8ud8u_SyWsn66vjPy7fEqWdtUhyphenhyphen7q02SGb-ApyIg0Z7Rc/s400/ads33.png" style="cursor: pointer; height: 61px; width: 173px;" /></a><br />
<br />
8.Now click on Submit.<br />
9.They will give you<span style="color: #3333ff;"> lowpaying ads urls</span>.<span style="color: red;">copy</span> these urls.<br />
10.Now login to your Google Adsense Account.<br />
11.Click <span style="color: red;">AdSense Setup</span>.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin74kNUwluyA3UzKrIql6pMIsEnB3WzGJ5etSBoq43Lo1UHJGvLrR2VF9o-hpLG5wUPx2fbWFU6PXek1su0IG0a1FUqyhcWJghSHHrmGOvXuwNQmLX9NsKW1hsWvZY7A-_ucldSBEz-Xc/s1600-h/ads33.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5344468654887015986" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin74kNUwluyA3UzKrIql6pMIsEnB3WzGJ5etSBoq43Lo1UHJGvLrR2VF9o-hpLG5wUPx2fbWFU6PXek1su0IG0a1FUqyhcWJghSHHrmGOvXuwNQmLX9NsKW1hsWvZY7A-_ucldSBEz-Xc/s400/ads33.png" style="cursor: pointer; height: 60px; width: 400px;" /></a><br />
<br />
12.Go to <span style="color: red;">Competitive Ad Filter</span> category.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19GhQjjbtMIECRJzN-Oxu1pEhIsosw2bUL9WrAa6Nu4sjeER0VGgFpQKfjP3lIFIlb8WQ-yp4mxzIW5pERNIxzjQjdxM4UiWxPV6vrMIdejlh1ddIrH8FfZcaJhf-Ep0xLGrwQsqB_8g/s1600-h/ads44.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5344468735727591538" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi19GhQjjbtMIECRJzN-Oxu1pEhIsosw2bUL9WrAa6Nu4sjeER0VGgFpQKfjP3lIFIlb8WQ-yp4mxzIW5pERNIxzjQjdxM4UiWxPV6vrMIdejlh1ddIrH8FfZcaJhf-Ep0xLGrwQsqB_8g/s400/ads44.png" style="cursor: pointer; height: 61px; width: 400px;" /></a><br />
<br />
13.<span style="color: #3333ff;">Paste</span> lowpaying ads urls into the box and click <span style="color: red;">save changes</span>.<br />
<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr_ZTw8lbsmvGpUPce9vuK32QP_MtfIIfdZBiyK3t9_4JOR4m0gw-6WQuzjoP58I9WYb5xmizXnLuCcIgZ-Oi5cJzXMTJsfuxrQVJ5PABlWhN1yaVPgPs4KOkx0bvi53TR5Bh3WCrqzGQ/s1600-h/ads55.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5344468815479813810" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr_ZTw8lbsmvGpUPce9vuK32QP_MtfIIfdZBiyK3t9_4JOR4m0gw-6WQuzjoP58I9WYb5xmizXnLuCcIgZ-Oi5cJzXMTJsfuxrQVJ5PABlWhN1yaVPgPs4KOkx0bvi53TR5Bh3WCrqzGQ/s400/ads55.png" style="height: 315px; width: 400px;" /></a><br />
<br />
14.Now google will not display low paying ads in your site.Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-73763689424256115702012-06-16T04:36:00.000-07:002012-06-16T05:39:46.681-07:00Most Wanted Best Adsense Tips And Secrets<h2>
Most Wanted Best Adsense Tips And Secrets</h2>
<h4>
AdSense Tip 1: Find Best keywords for your content</h4>
Before serving ads on a web page, check its keyword density. You can
find many free keyword analyzer tools in internet searching the word
"free keyword analyzer".<br />
<h4>
AdSense Tip 2: Improve your keywords</h4>
Get keyword suggestions from <a href="https://adwords.google.com/select/KeywordSandbox" rel="nofollow" target="_blank">Google AdWords Sandbox</a>. Get new keywords that can help you improve your ad relevance.<br />
<h4>
AdSense Tip 3: Make content rich websites</h4>
This means that content-rich websites of a popular topic should attract a large amount of ads.<br />
<h4>
AdSense Tip 4: Write a new page/blog post every day</h4>
This is very important. The more content you have, the more visitors
you will get. Put an Adsense unit on each and every content page of your
site.<br />
<h4>
AdSense Tip 5: Choose the right AdSense format</h4>
The top three AdSense formats are for many webmasters:<br />
336x280 large rectangle<br />
300x250 medium rectangle<br />
160x600 wide skyscraper<br />
Another successful format is the 728x15 horizontal ad links, that can be placed under your navigation bar.<br />
Use "Allowed site" feature of adsense to protect yourselves.If anyone
put adsense codes in their websites you must not worried about it.<br />
<h4>
AdSense Tip 6: Adsense Color tips</h4>
When creating your Google AdSense ads it is recommended to use the
color scheme and style of your website so that the ads blend in
well.Google Ads with no background color and no borders will always
perform better. Make the border color and background color same as your
page background color.<br />
<h4>
AdSense Tip 7: Position tips</h4>
Place the AdSense ads in a prominent place around the top/left part of your page or under your headlines.<br />
For short articles, CTR is best when ads are placed just above the content.<br />
For long articles, CTR will improve if you place ads somewhere in middle of the content or just where the article ends.<br />
Use Text Ads instead of Image Ads as users get more options and the payout is often higher.<br />
Important:Don't places images next to Google ads as that will invite a permanent ban to your AdSense account.<br />
<h4>
AdSense Tip 8: Increase the number of ads, but not too much</h4>
If you have a lot of text on a page, use multiple AdSense units. You
can use up to three AdSense units on a page, two AdSense search boxes
and one unit of ad links.<br />
<h4>
AdSense Tip 9: Preview Google ads</h4>
You can find out what ads will be served by Google AdSense if you install <a href="https://www.google.com/support/adsense/bin/answer.py?answer=10005&topic=160" rel="nofollow" target="_blank">Google AdSense Preview Tool</a>,
a very simple tool available only for Internet Explorer 6.0. Click to
advertiser sites without generating invalid clicks, and easily add their
URLs to your URL filter list. Because AdSense uses geo-targeting,
Google serves different ads for other countries.<br />
<h4>
AdSense Tip 10: What not to do with adsense</h4>
Don't click on your own ads<br />
Don't ask others to click on your Google ads<br />
Don't manually change AdSense code<br />
Don't place Google ads on sites that include prohibited content (e.g.: adult sites)<br />
Don't employ cloaking, hidden text or farm links<br />
Don't use AdSense ads on the same page with similar ads (e.g.: Yahoo Publisher Network)<br />
And also don't refresh your site excessively.<br />
<h4>
AdSense Tip 11: Use section targeting</h4>
Use section targeting to emphasize some content in your page.To know more about section targeting <a href="http://aboutblogtips.blogspot.com/2012/06/how-to-use-adsense-section-targeting-on.html" target="_blank">read this article</a>.<br />
<h4>
AdSense Tip 12: Your Google ads should be visible</h4>
Make sure your text ads are visible well to the surfers in all screen formats.<br />
<h4>
AdSense Tip 13: Use AdSense channels</h4>
You can categorize the content of your website into channels and then
track your performance. This way you can experiment with different
types of ads and see which is performing the best.<br />
<h4>
AdSense Tip 14: Follow Adsense Programme Polices</h4>
Strictly follow the rules mentioned in Adsense policies. You will always earn more monet from Adsense if you do it.<br />
<h4>
AdSense Tip 15:Never modify the Google Adsense HTML code</h4>
If have trouble embedding AdSense code in your Blogger template, <a href="http://aboutblogtips.blogspot.com/2012/06/how-to-embed-adsense-add-unit-in-left.html" target="_blank">read these articles</a>.<br />
<h4>
AdSense Tip 16: Don't place ads in pop-up windows,error pages,empty pages</h4>
You must always remember to not to do it.<br />
<h4>
AdSense Tip 17: Don't start a "MFA"(made for adsense) web site</h4>
You will never make money out these Made for Adsense websites.
Instead, write on topics what you are passionate about. Don't waste your
money and time searching on high-paying adsense keywords lists.<br />
<h4>
AdSense Tip 18: Block Low Paying Adsense Ads</h4>
Block low paying advertisers with Filters.For more info <a href="http://aboutblogtips.blogspot.com/2012/06/how-to-remove-low-paying-adsense-ads.html" target="_blank">read this article</a>.<br />
<h4>
AdSense Tip 19: Adsense For Search</h4>
Always select the setting to open Google Adsense search box results in a new browser window, so you won't lose your visitors.Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-7471169325376756012012-06-16T03:43:00.000-07:002012-06-16T03:43:23.601-07:00How To Refresh Your Blog or Website Automatically<h2 class="singletitle">
<a href="http://www.bloggertipandtrick.net/2009/12/refresh-website-blogger-automatically.html" title="How To Refresh Your Blog or Website Automatically">How To Refresh Your Blog or Website Automatically</a> </h2>
1.Login to your blogger dashboard--> layout- -> Edit HTML<br />
2.Scroll down to where you see <span style="color: red;"><head></span> tag .<br />
3.Copy below code and paste it <span style="color: #3333ff;">just after</span> the <span style="color: red;"><head></span> tag.<br />
<br />
<pre style="border: 1px solid black; height: 50px; overflow: auto; width: 90%;"><span style="font-size: 180%;"><meta HTTP-EQUIV='refresh' content='<span style="color: #3333ff; font-weight: bold;">15</span>;URL=<span style="color: red; font-weight: bold;">http://yoursite.com</span>'/></span></pre>
<br />
<span style="color: #009900; font-size: 130%; font-weight: bold;">Note:</span> <span style="color: #cc33cc;">Replace</span> <span style="font-weight: bold;">http://yoursite.com</span> with your blog or website URL.<br />
<span style="color: #3333ff; font-weight: bold;">15</span> is the time period between 2 page refresh.Change it as your choice.<br />
4.Now save your template and you are done.Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-80588801636219829752012-06-16T03:36:00.001-07:002012-06-16T03:36:30.333-07:00Numbered Page Navigation Hack For Bloggers<h1>
Numbered Page Navigation Hack For Bloggers</h1>
<br />
1.Login to your blogger dashboard--> layout- -> Edit HTML<br />
2.Scroll down to where you see <span style="color: red; font-weight: bold;">]]></b:skin></span> tag .<br />
3.Copy below code and paste it <span style="color: #3333ff;">just before</span> the <span style="color: red;">]]></b:skin></span> tag.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlcbMBHZL5A7qf_KWWsPWhw5Vm6Ic4ThpLRP4UwoUvNbBjk7kI_5xzcTOfOAzaBxGQXXglJBjCqxfLIFMqj1f-YNfTnq4PsOftvZT6-7UtK9f8E1lDJUpB0PW8vP5Imbh39LMg7Pl8Uav/s1600-h/Numbered+Page+Navigation+Hack+For+Bloggers.png" title="Numbered Page Navigation Hack For Bloggers"><img alt="Numbered Page Navigation Hack For Bloggers" border="0" id="BLOGGER_PHOTO_ID_5416548981131767522" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAlcbMBHZL5A7qf_KWWsPWhw5Vm6Ic4ThpLRP4UwoUvNbBjk7kI_5xzcTOfOAzaBxGQXXglJBjCqxfLIFMqj1f-YNfTnq4PsOftvZT6-7UtK9f8E1lDJUpB0PW8vP5Imbh39LMg7Pl8Uav/+Page+Navigation+Hack+For+Bloggers.png" style="height: 78px; width: 521px;" /></a><br />
<pre style="border: 1px solid black; height: 250px; overflow: auto; width: 90%;">.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}</pre>
<br />
4.Now save your template.<br />
5.Go to Layout-->Page Elements and click on "Add a gadget".<br />
6.Select "html/java script" and add the code given below and click save.Now drag your new gadget under "Blog Posts" Section.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1asUQHQJVzxuAsYIOoB2XDW4vhb04qyX9rLz_nbVw8so-z3kSCU10bCpO3G0RC0qN8cw49AbBypEDjg407L0DAg1RLcv_aTDSFhbnXEj5izEGzV73YdJwWbhbrhJJHbRWEDX9-11G1K2/s1600-h/Gadget+under+Blog+Posts+Section..png" title="Gadget under Blog Posts Section."><img alt="Gadget under Blog Posts Section." border="0" id="BLOGGER_PHOTO_ID_5416548557479241330" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF1asUQHQJVzxuAsYIOoB2XDW4vhb04qyX9rLz_nbVw8so-z3kSCU10bCpO3G0RC0qN8cw49AbBypEDjg407L0DAg1RLcv_aTDSFhbnXEj5izEGzV73YdJwWbhbrhJJHbRWEDX9-11G1K2/+under+Blog+Posts+Section..png" style="cursor: pointer; height: 278px; width: 550px;" /></a><br />
<pre style="border: 1px solid black; height: 250px; overflow: auto; width: 90%;"><script type='text/javascript'>
var home_page_url = location.href;
var pageCount=<span style="font-size: 130%; font-weight: bold;"><span style="color: #cc33cc;">1</span></span>;
var displayPageNum=<span style="color: #3333ff; font-size: 130%;"><span style="font-weight: bold;">3</span></span>;
var upPageWord ='<span style="color: #ff6600; font-size: 130%; font-weight: bold;">Previous</span>';
var downPageWord ='<span style="color: #009900; font-size: 130%; font-weight: bold;">Next</span>';
function showpageCount(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html += '<span class="showpageNum"><a href="/">1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
html = ''+upPageHtml+' '+html +' ';
}
html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
function showpageCount2(json) {
var thisUrl = home_page_url;
var htmlMap = new Array();
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
var thisUrl = home_page_url;
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);
timestamp = encodeURIComponent(timestamp1);
var title = post.title.$t;
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;
}
}
itemCount++;
}
for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}
fFlag++;
}
if(p==(thisNum-1)){
html += '<span class="showpagePoint">'+thisNum+'</span>';
}else{
if(p==0){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';
}
}
if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}
}
if(thisNum>1){
if(!isLablePage){
html = ''+upPageHtml+' '+html +' ';
}else{
html = ''+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
}
if(postNum==1) postNum++;
html += '</div>';
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");
if(postNum <= 2){
html ='';
}
for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}
if(pageArea&&pageArea.length>0){
html ='';
}
if(blogPager){
blogPager.innerHTML = html;
}
}
</script>
<script type='text/javascript'>
var thisUrl = home_page_url;
if (thisUrl.indexOf("/search/label/")!=-1){
if (thisUrl.indexOf("?updated-max")!=-1){
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));
}else{
var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));
}
}
var home_page = "/";
if (thisUrl.indexOf("?q=")==-1){
if (thisUrl.indexOf("/search/label/")==-1){
document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')
}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')
}
}
</script></pre>
<br />
<span style="color: red; font-size: 130%; font-weight: bold;">Note:</span><br />
Change values of <span style="color: #cc33cc; font-weight: bold;">pageCount</span>,<span style="color: #3333ff; font-weight: bold;">displayPageNum</span>,<span style="color: #ff6600; font-weight: bold;">upPageWord</span>,<span style="color: #009900; font-weight: bold;">downPageWord</span> if you like.Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-81656102215474487272012-06-15T11:53:00.003-07:002012-06-15T11:53:24.151-07:00Customizing Embedded Comments Below PostsOk, if you don't know what are Embedded Comments, or want them on your Blog, read <a href="http://pocket-templates.blogspot.com/2008/11/embedded-comment-form-all-comment-below.html" target="_blank">this article</a>.<br />Here,
we are going to customize them a little bit. On the picture below, you
can see the default appearance of embedded comments.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh1dKMdQw0t0ihMTTkk4e6d88sCIihoX8-1hyphenhyphenUhIjyaPAw12uZH05qO6aq_9vm-LW0uzbrCkSZwoj1Jqbp2e2v3yBDkRdaLL6TuEytCsSRjH4XGLbj02Ygq555h0CldkRatdYyrxom5mOx/s1600-h/ispod+posta+defaultirani.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5264500681589137858" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh1dKMdQw0t0ihMTTkk4e6d88sCIihoX8-1hyphenhyphenUhIjyaPAw12uZH05qO6aq_9vm-LW0uzbrCkSZwoj1Jqbp2e2v3yBDkRdaLL6TuEytCsSRjH4XGLbj02Ygq555h0CldkRatdYyrxom5mOx/s400/ispod+posta+defaultirani.gif" style="cursor: pointer; display: block; height: 400px; margin: 0px auto 10px; text-align: center; width: 228px;" /></a><br />Looks all right, but we can do better...<br />First thing, <a href="http://pocket-templates.blogspot.com/2008/10/back-up-your-blogger-template.html" target="_blank">back-up</a> your template. Then go to: DASHBOARD -- LAYOUT -- EDIT HTML. Find the following part of code (use CTRL + F for searching):<br />
<br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="codeview" style="background-color: #fce5cd;">
#comments h4 {<br />margin:1em 0;<br />font-weight: bold;<br />line-height: 1.4em;<br />text-transform:uppercase;<br />letter-spacing:.2em;<br />color: $sidebarcolor;<br />}<br /><br />#comments-block {<br />margin:1em 0 1.5em;<br />line-height:1.6em;<br />}<br />#comments-block .comment-author {<br />margin:.5em 0;<br />}<br />#comments-block .comment-body {<br />margin:.25em 0 0;<br />}<br />#comments-block .comment-footer {<br />margin:-.25em 0 2em;<br />line-height: 1.4em;<br />text-transform:uppercase;<br />letter-spacing:.1em;<br />}<br />#comments-block .comment-body p {<br />margin:0 0 .75em;<br />}<br />.deleted-comment {<br />font-style:italic;<br />color:gray;<br />}</div>
<div class="codeview" style="background-color: #fce5cd;">
</div>
<br />
DELETE it, and REPLACE it with following code:<br />
<br />
<div class="codeview" style="background-color: #fce5cd;">
</div>
<div class="codeview" style="background-color: #fce5cd;">
#comments h4 {<br />margin: 1em 3em;<br />font-weight: bold;<br />line-height: 1.4em;<br />color: #ffffff;<br />}<br />#comments-block {<br />margin-left:1.5em;<br />line-height:1.6em;<br />background: #ffffff;<br />color: black;<br />padding: 1em;<br />border:0px solid #ffffff;<br />}<br />#comments-block .comment-author {margin:.5em 0;}<br />#comments-block .comment-body {margin:.25em 0 0; background: #ffffff;}<br />#comments-block .comment-footer {<br />margin:-.25em 0 2em;<br />line-height: 1.4em;<br />letter-spacing:.1em;<br />}<br />#comments-block .comment-body p {<br />margin:0 0 .75em;<br />padding: 20px 10px 10px 10px;<br />background: #f3a64c url(<span style="color: #ff6600;">http://i38.tinypic.com/27yu1xl.jpg</span>) no-repeat top left;<br />}<br />.deleted-comment {<br />font-style:italic;<br />color:gray;<br />}</div>
<div class="codeview" style="background-color: #fce5cd;">
</div>
<br />
The URL in <span style="color: #ff6600;">red color</span>
is the address of picture used in this tutorial. If you would like to
use that one, it's ok. But, also, you can make your own pic. Just size
it properly.<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbdm3QGTLfLHmHqKRCbFiXnfoau1IvBYFNpiq6GOGnX_HNLGJkTDOn4icOomrjBYAZvqUjVmhczk4TefRlC5oviUxBCucAMIIxi1FEWG-W8eamhOrukn_0cqrVWcBveRMCIhmDcT_MUsW_/s1600-h/jednostavni.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5264501268455145490" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbdm3QGTLfLHmHqKRCbFiXnfoau1IvBYFNpiq6GOGnX_HNLGJkTDOn4icOomrjBYAZvqUjVmhczk4TefRlC5oviUxBCucAMIIxi1FEWG-W8eamhOrukn_0cqrVWcBveRMCIhmDcT_MUsW_/s400/jednostavni.gif" style="cursor: pointer; display: block; height: 400px; margin: 0px auto 10px; text-align: center; width: 244px;" /></a>Ok.
This is how it how it looks like now. But, keep in mind that you can do
a lot more with just changing the code a bit. Here's another example,
done with the same template as before...I've changed the template
background, added some borders to comment box, and colored it blue...<br />Not much, but it's already happier.....<br /><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoJuLHZvwS80RleWVT_7TXpUU6AXiD6GZYh9eUTCWGhlF_2y4hVVKxVYvSY3a8JET76BcRCC4ejdC8g3OQCA3XGMzmKg9-TXR6IFzTP7IHA1_BBPZSAOfWUbMbKIYEBWAKXxsF92qXjEzD/s1600-h/u+boji.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5264501280180114818" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoJuLHZvwS80RleWVT_7TXpUU6AXiD6GZYh9eUTCWGhlF_2y4hVVKxVYvSY3a8JET76BcRCC4ejdC8g3OQCA3XGMzmKg9-TXR6IFzTP7IHA1_BBPZSAOfWUbMbKIYEBWAKXxsF92qXjEzD/s400/u+boji.gif" style="cursor: pointer; display: block; height: 400px; margin: 0px auto 10px; text-align: center; width: 244px;" /></a>One
more thing. If you want to change the "Post a comment", to something
else (like "say something"), find the following code (EXPAND WIDGET
TEMPLATES):<br />
<br />
<div style="background-color: #fce5cd;">
<br /></div>
<div style="background-color: #fce5cd;">
<h4 id='comment-post-message'><span style="color: #ff6600;"><data:postCommentMsg/></span></h4></div>
<div style="background-color: #fce5cd;">
<br /></div>
<br />
..and REPLACE the part in <span style="color: #ff6600;">red</span> with anything you want. So it will look like this:<br />
<br />
<div style="background-color: #fce5cd;">
<br /></div>
<div style="background-color: #fce5cd;">
<h4 id='comment-post-message'>Say something...</h4></div>
<div style="background-color: #fce5cd;">
<br /></div>
<br />
Well, this was a long one.....Smile!Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-61194660044949446712012-06-15T11:33:00.004-07:002012-06-15T11:33:52.888-07:00Quotes in Blogger - Customization<br />
<div style="text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25nzjeNDBGrDUG8ym9X2tmBzeIHZhQBjJMIZiNbTAgV0mYrLflgitPkX7qapXAj7xZ2m-FAWN0CO4sSEW8HNI3aol5gZz6VbgmO-7-VA1QL407gTahpUUzFqijDDSrJXh5xuLreOxNvpv/s1600-h/pocetna.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5284864045547468162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg25nzjeNDBGrDUG8ym9X2tmBzeIHZhQBjJMIZiNbTAgV0mYrLflgitPkX7qapXAj7xZ2m-FAWN0CO4sSEW8HNI3aol5gZz6VbgmO-7-VA1QL407gTahpUUzFqijDDSrJXh5xuLreOxNvpv/s400/pocetna.gif" style="cursor: pointer; float: right; height: 200px; margin: 0pt 0pt 10px 10px; width: 200px;" /></a>We're
going to learn how to customize the quotes in Blogger. By customize, I
mean changing the looks of it, giving it some color, borders,
background.....changing size of it, font, style...</div>
<br /><span style="color: #ffcc00;">WHAT ARE QUOTES?</span><br />Quotes are used for quoting. Heh. Quoting defines:<br /><br />► repeating or copying the words of another, usually with acknowledgment of the source<br />► citing or referring for illustration or proof<br />► repeating a brief passage or excerpt<br /><br /><span style="color: #ffcc00;">DEFAULT QUOTES IN BLOGGER AND HOW TO USE THEM</span><br />Default quotes ain't much of a fun. Really. They are rather dull. And blank.<br />When you're composing the Post, and want to make a quotation, you will:<br /><br />► highlight the part of the text that will be a quote<br />► and click on the <span style="font-style: italic;">quote</span> button in the Blogger toolbar<br />
<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi26AG0mOjBABJ8Ep9vXQuecl9sQxeJsSaE9b5-HNvi5lM7s_UYZr3Ywz8-VaTNN0aIC09bHS1G7wx6UTC_kOHL1_ORulVY4pTqbp7Bnpjj2degQhjTxEciYO88QyQ5xrosWemkyk2uZGkF/s1600-h/postpost.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5284865665423695394" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi26AG0mOjBABJ8Ep9vXQuecl9sQxeJsSaE9b5-HNvi5lM7s_UYZr3Ywz8-VaTNN0aIC09bHS1G7wx6UTC_kOHL1_ORulVY4pTqbp7Bnpjj2degQhjTxEciYO88QyQ5xrosWemkyk2uZGkF/s400/postpost.gif" style="cursor: pointer; display: block; height: 204px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>This will change highlighted part into a quote, with a default design, and that is:<br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpJkMwtWSb8hpya4jyzVsShzbjI-uc5Czr7vS1Rantds6jQZFAtkGzItnCKL2_vY9TUctSFIMNoe_P_9llILlxCyL-PlAkrxW4BFfO4UjvzJKXeXqkOsal3BuswTtr6RMRc8H9x7E8sH_O/s1600-h/primjerdef.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5284866254801592514" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpJkMwtWSb8hpya4jyzVsShzbjI-uc5Czr7vS1Rantds6jQZFAtkGzItnCKL2_vY9TUctSFIMNoe_P_9llILlxCyL-PlAkrxW4BFfO4UjvzJKXeXqkOsal3BuswTtr6RMRc8H9x7E8sH_O/s400/primjerdef.gif" style="cursor: pointer; display: block; height: 204px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>It just added some margins to it....not fun at all. I told you so.<br /><br /><span style="color: #ffcc00;">SO, WHAT CAN WE DO?</span><br />Well, a lot! First, let's see what part of the code (CSS style) we have to play with....<br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="codeview" style="background-color: #fce5cd;">
.post blockquote {<br />margin:1em 20px;<br />}<br />.post blockquote p {<br />margin:.75em 0;<br />}</div>
<div class="codeview" style="background-color: #fce5cd;">
</div>
<br />
...that's
the one! You can find it easily going to LAYOUT ► EDIT HTML ► and
scroll until you find it (use CTRL + F to make it easier)...<br />...yours may be a bit different (if you have customized template), but it will be something like that...<br /><br />I'll show you a few examples, and in each one, you will have to <span style="font-weight: bold;">DELETE</span> the code from above, and <span style="font-weight: bold;">REPLACE</span> it with the one from example.<br /><br />◄ <span style="color: #ffcc00; font-weight: bold;">Borders, font styles and colors</span> ►<br />
<div class="nobrtable">
<table border="0" color="white"><tbody>
<tr><th align="center">Example 1</th><th align="center">Example 2</th><th align="center">Example 3</th><th align="center">Example 4</th></tr>
<tr><td><a href="http://i39.tinypic.com/2nv9g1f.jpg" target="_blank" title="View"><img alt="background" height="100" src="http://i39.tinypic.com/2nv9g1f.jpg" width="100" /></a></td><td><a href="http://i42.tinypic.com/2hf70n5.jpg" target="_blank" title="View"><img alt="background" height="100" src="http://i42.tinypic.com/2hf70n5.jpg" width="100" /></a></td><td><a href="http://i40.tinypic.com/icviwn.jpg" target="_blank" title="View"><img alt="background" height="100" src="http://i40.tinypic.com/icviwn.jpg" width="100" /></a></td><td><a href="http://i44.tinypic.com/2lax4ya.jpg" target="_blank" title="View"><img alt="background" height="100" src="http://i44.tinypic.com/2lax4ya.jpg" width="100" /></a></td></tr>
</tbody></table>
</div>
<div style="text-align: center;">
Example <span style="color: #ff99ff; font-size: 180%;">1. </span></div>
<div class="codeview" style="background-color: #f4cccc;">
</div>
<div class="codeview" style="background-color: #f4cccc;">
.post blockquote {<br />border-top: 1px solid #FF82AB;<br />border-left: 1px solid #FF82AB;<br />border-right: 2px solid #FF82AB;<br />border-bottom: 2px solid #FF82AB;<br />background: #ffffff;<br />margin: 6px 20px 6px 20px;<br />padding: 8px 8px 8px 8px;<br />font-size: 1em;<br />font-style:italic;<br />line-height:1.4em;<br />}</div>
<div class="codeview" style="background-color: #f4cccc;">
</div>
<div style="text-align: center;">
Example <span style="color: #33ccff; font-size: 180%;">2.</span></div>
<div class="codeview" style="background-color: #cfe2f3;">
</div>
<div class="codeview" style="background-color: #cfe2f3;">
.post blockquote {<br />border:1px dashed #DC143C;<br />background: #EEE0E5;<br />margin: 6px 10px 6px 10px;<br />padding: 8px 8px 8px 8px;<br />font-size: 1em;<br />font-style:italic;<br />line-height:1.4em;<br />}</div>
<div class="codeview" style="background-color: #cfe2f3;">
</div>
<div style="text-align: center;">
Example <span style="color: #ffcc00; font-size: 180%;">3.</span></div>
<div class="codeview" style="background-color: #fff2cc;">
</div>
<div class="codeview" style="background-color: #fff2cc;">
.post blockquote {<br />color:#EE9A00;<br />border:5px dotted #000000;<br />background: #ffffff;<br />margin: 6px 6px 6px 6px;<br />padding: 8px 8px 8px 8px;<br />font-size: 1em;<br />line-height:1.4em;<br />}</div>
<div class="codeview" style="background-color: #fff2cc;">
</div>
<div style="text-align: center;">
Example <span style="color: #33cc00; font-size: 180%;">4.</span></div>
<div class="codeview" style="background-color: #d9ead3;">
</div>
<div class="codeview" style="background-color: #d9ead3;">
.post blockquote {<br />color:#00CED1;<br />border-top: 2px solid #000000;<br />border-left: 2px solid #000000;<br />border-right: 1px solid #000000;<br />border-bottom: 1px solid #000000;<br />background: #ffffff;<br />margin: 6px 0px 6px 0px;<br />padding: 8px 8px 8px 8px;<br />font-size: 1em;<br />line-height:1.4em;<br />}</div>
<div class="codeview" style="background-color: #d9ead3;">
</div>
<br />
...these are just examples, so you can see what variables you can adjust....<br />...change the colors (hex values)...<a href="http://pocket-templates.blogspot.com/2008/11/borders-in-blogger-template.html" target="_blank">change border styles</a>...<br />...font size, font style (<span style="font-style: italic;">italic</span>), font color (<span style="font-style: italic;">color</span>)...<br />...margins (the space between box and the post content)...<br />...padding (space between quote text and the borders)...<br /><br />◄ <span style="color: #ffcc00; font-weight: bold;">Picture in the quotes</span> ►<br />
<div class="nobrtable">
<table border="0"><tbody>
<tr><th align="center">Example 1</th><th align="center">Example 2</th><th align="center">Example 3</th><th align="center">Example 4</th></tr>
<tr><td><a href="http://i40.tinypic.com/34rzpy1.jpg" target="_blank" title="View"><img alt="background" height="100" src="http://i40.tinypic.com/34rzpy1.jpg" width="100" /></a></td><td><a href="http://i39.tinypic.com/2jcc32g.jpg" target="_blank" title="View"><img alt="background" height="100" src="http://i39.tinypic.com/2jcc32g.jpg" width="100" /></a></td><td><a href="http://i39.tinypic.com/2z9k0wi.jpg" target="_blank" title="View"><img alt="background" height="100" src="http://i39.tinypic.com/2z9k0wi.jpg" width="100" /></a></td><td><a href="http://i40.tinypic.com/2d92ovd.jpg" target="_blank" title="View"><img alt="background" height="100" src="http://i40.tinypic.com/2d92ovd.jpg" width="100" /></a></td></tr>
</tbody></table>
</div>
<div style="text-align: center;">
Example <span style="color: #ff99ff; font-size: 180%;">1.</span></div>
<div class="codeview" style="background-color: #f4cccc;">
</div>
<div class="codeview" style="background-color: #f4cccc;">
.post blockquote {<br />color:#666666;<br />background: #ffffff url(http://i39.tinypic.com/154iuq9.jpg);<br />background-position:top left;<br />background-repeat:no-repeat;<br />margin: 6px 6px 6px 6px;<br />padding: 8px 0px 8px 74px;<br />font-size: 14px;<br />font-style:italic;<br />line-height:1.4em;<br />}</div>
<div class="codeview" style="background-color: #f4cccc;">
</div>
<div style="text-align: center;">
Example <span style="color: #ffcc00; font-size: 180%;">2.</span></div>
<div class="codeview" style="background-color: #fce5cd;">
</div>
<div class="codeview" style="background-color: #fce5cd;">
.post blockquote {<br />border-top: 1px solid #FFF;<br />border-left: 1px solid #FFF;<br />border-right: 1px solid #666666;<br />border-bottom: 1px solid #666666;<br />background: #000000 url(http://i37.tinypic.com/23tgzfk.jpg);<br />background-position:top left;<br />background-repeat:repeat-y;<br />margin: 0 20px;<br />padding: 10px 20px 10px 45px;<br />font-size: 0.9em;<br />}</div>
<div class="codeview" style="background-color: #fce5cd;">
</div>
<div style="text-align: center;">
Example <span style="color: #33ccff; font-size: 180%;">3.</span></div>
<div class="codeview" style="background-color: #cfe2f3;">
</div>
<div class="codeview" style="background-color: #cfe2f3;">
.post blockquote {<br />background: #ffffff url(http://i44.tinypic.com/slh4yu.jpg);<br />background-repeat:no-repeat;<br />background-position:top center;<br />margin: 6px 6px 6px 6px;<br />padding: 8px 36px 8px 40px;<br />font-size: 14px;<br />line-height:1.4em;<br />}</div>
<div class="codeview" style="background-color: #cfe2f3;">
</div>
<div style="text-align: center;">
Example <span style="color: #ffcccc; font-size: 180%;">4.</span></div>
<div class="codeview" style="background-color: #f4cccc;">
</div>
<div class="codeview" style="background-color: #f4cccc;">
.post blockquote {<br />color:#000000;<br />background: #ffffff url(http://i41.tinypic.com/24fh84w.jpg);<br />margin: 6px 6px 6px 6px;<br />padding: 8px 6px 8px 6px;<br />font-size: 14px;<br />line-height:1.4em;<br />}</div>
<div class="codeview" style="background-color: #f4cccc;">
</div>
<br />
...remember to change the <span style="color: #cc66cc;">URL address of the pic</span> with your own...<br />...you have lots of options here....be creative...change....<br />...trial and error...<br />...read some more about <a href="http://pocket-templates.blogspot.com/2008/12/how-to-add-background-picture-in.html" target="_blank">background pictures is Blogger</a>...<br /><br />If you have some doubts/questions, just ask....Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-60330618640500810292012-06-15T11:22:00.000-07:002012-06-15T11:24:06.737-07:00Change the Width of Your Blog - Make the Blog Wider<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd9VxDNf7XPvu6Ba5Yy4CF17EOP2eqCF2QgrxxvBrfKdAei5LbwrTP5I4MO_uglxhAPmht8PzmgNKg5cSlThB2iBT4Kyxx7fHT6fxxi540IcmJivboMPFh2SFIdL-jPzP4qB8s7kiw147v/s1600-h/pocetna.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5287110274418521762" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd9VxDNf7XPvu6Ba5Yy4CF17EOP2eqCF2QgrxxvBrfKdAei5LbwrTP5I4MO_uglxhAPmht8PzmgNKg5cSlThB2iBT4Kyxx7fHT6fxxi540IcmJivboMPFh2SFIdL-jPzP4qB8s7kiw147v/s400/pocetna.gif" style="cursor: pointer; float: right; height: 200px; margin: 0pt 0pt 10px 10px; width: 200px;" /></a>This can be quite important feature, if you care about it....Changing the width of your Blogger Blog will gain you some <span style="font-weight: bold;">extra space</span> (to place more gadgets, pics, ads...), or it will make your <span style="font-weight: bold;">Post section wider</span> (meaning: larger pictures, wider paragraphs), you can also add a <span style="font-weight: bold;">third column</span>, if you want.....<br />
<br />
<span style="color: #ffcc00; font-weight: bold;"><br />CURRENT SITUATION (What's out there?)</span><br />
There's a thousands of templates out there...you have <span style="font-weight: bold;">Blogger default templates</span> + <span style="font-weight: bold;">Dozens of other sites</span> that provide a free Blogger Templates...<br />
All right, you knew that....but here's another thing you should consider:<br />
There are 2 kinds of templates (layouts) you can use:<br />
<br />
► <span style="font-weight: bold;">FLUID</span> width or <span style="font-weight: bold;">STRETCH</span> templates - template that resizes to fit any computer monitor. It stretches corresponding to the monitor resolution.<br />
Advantage
is obvious, and a big disadvantage is DESIGN. It's quite restraining
when it comes to this. Of course, it depends what you like. For a
professional looking template, it's great....But for a personal one, it
can be a bit dull.....<br />
<br />
► <span style="font-weight: bold;">FIXED WIDTH</span>
templates - they have a fixed width, regardless of monitor
resolution....They are ideal for designing and customizing, but, the <span style="font-style: italic;">width</span> part can sometimes be a real pain in the....:]<br />
...Why? Because:<br />
<span style="font-weight: bold;">-</span> people have different Monitor (screen) sizes,<br />
<span style="font-weight: bold;">-</span> and they use different resolutions on them...<br />
...the final result is: <span style="font-weight: bold;">Blog appears different in each combination</span>!<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib8_pzImAETnvRiAZRKsyCH-b_hIf5jeslCwQWvi8CpSl6XjbbeQAvEbEblnvL_lQsNsVaXT26BoSlNm3PG0RYd_IO4dI_BFZWfKhWC3CcFDc6ALnoK7aYcsJLHhAljjD6GfPxoMRr6dU2/s1600-h/screensize.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5287115442909712834" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib8_pzImAETnvRiAZRKsyCH-b_hIf5jeslCwQWvi8CpSl6XjbbeQAvEbEblnvL_lQsNsVaXT26BoSlNm3PG0RYd_IO4dI_BFZWfKhWC3CcFDc6ALnoK7aYcsJLHhAljjD6GfPxoMRr6dU2/s400/screensize.gif" style="cursor: pointer; display: block; height: 131px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>Read more about <a href="http://www.thescreamonline.com/technology/monitor/monitor_res.html" target="_blank">Monitor sizes and resolution, and how to change the resolution...</a><br />
<br />
<span style="font-family: Georgia,Times New Roman,Times,serif; font-style: italic;">◄<span style="font-size: 85%;">Imagine
lying down in the grass with your nose pressed deep into the
thatch. Your field of vision would not be very large, and all you
would see are a few big blades of grass, some grains of dirt, and
maybe an ant or two. This is a 14-inch 640 x 480 monitor. Now, get
up on your hands and knees, and your field of vision will improve
considerably: you'll see a lot more grass. This is a 15-inch 800 x
640 monitor. For a 1280 x 1024 perspective (on a 19-inch monitor), stand
up and look at the ground. Some monitors can handle higher
resolutions such as 1600 x 1200 or even 1920 x 1440—somewhat akin
to a view from up in a tree...►</span></span><span style="font-size: 180%;"><br /><br /> </span><span style="color: #ffcc00; font-weight: bold;">SHOULD I CHANGE THE WIDTH OF MY BLOG?</span><br />
Well, it depends. If you already have a wide template, or you're using Stretch (fluid) layout, there's no need of doing this...<br />
<b><span style="font-style: italic;"><br />Resolution friendly</span></b>
means that your Blog doesn't exceed the width of 750px. Why 750?
Because statistics tells us that lots of people are still using a
800x600 px resolution. And if you make your Blog wider than 750, these
group of people will have to scroll <span style="font-weight: bold;">left-right</span> on your page....which is quite irritating. And you can lose those visitors....<br />
<br />
But, there's also a saying, and it goes like this:<br />
Lie ► A Bigger Lie ► Statistics.<br />
<br />
If
you surf a bit, and pay attention to web pages width, you'll notice
that lots of web sites (even popular ones), are way over the 750 px!<br />
So, it's really up to you....<br />
<br />
<span style="color: #ffcc00; font-weight: bold;">LET'S CHANGE THAT WIDTH ALREADY.....</span><br />
The only problem here will be the <span style="font-weight: bold;">identification</span>
of the CSS style in your template (Layout). This is the part in the
code section that defines styling, including width of elements.<br />
There's so many different templates around, and it's a different story for each one...<br />
<br />
But
don't worry....there's a pattern. A backbone. A Layout constitution. A
certain way of organizing (naming) elements. It's basically the same
thing, under the different name.....<br />
For this example, we'll take a default Blogger template ► <span style="font-style: italic;">Minima</span>. Let's do it.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bri-bNNfAyiYrQ3MinILDOIklpIV2Bl-0eJwo_J-6M_Lt5VJEikq8AfgHX2RuRbRVu3wSRHf9Sb8LBkr_aoXsIdcVj0JcGRE2LidMUtH1cI81YPBis7Sk-O0lVgk1W-mfjfwZT-Urane/s1600-h/elementi+copy.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5287118526691868210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7bri-bNNfAyiYrQ3MinILDOIklpIV2Bl-0eJwo_J-6M_Lt5VJEikq8AfgHX2RuRbRVu3wSRHf9Sb8LBkr_aoXsIdcVj0JcGRE2LidMUtH1cI81YPBis7Sk-O0lVgk1W-mfjfwZT-Urane/s400/elementi+copy.gif" style="cursor: pointer; display: block; height: 400px; margin: 0px auto 10px; text-align: center; width: 392px;" /></a><span style="color: #ffcc00; font-size: 180%;">1.</span> First thing is identification. Go to: LAYOUT ► EDIT HTML, and find the parts that defines the width of the <span style="font-weight: bold;">Main section</span>, <span style="font-weight: bold;">Post sections</span>, <span style="font-weight: bold;">Sidebar</span>, <span style="font-weight: bold;">Header</span> <span style="font-weight: bold;">Section</span> and <span style="font-weight: bold;">Footer</span>.<br />
For <span style="font-style: italic;">Minima</span>, we have this situation:<br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="codeview" style="background-color: #fce5cd;">
<span style="color: #ffcc00;">#header-wrapper {</span><br />
<span style="color: #ffcc00;"> width:660px;</span><br />
<span style="color: #ffcc00;"> margin:0 auto 10px;</span><br />
<span style="color: #ffcc00;"> border:1px solid $bordercolor;</span><br />
<span style="color: #ffcc00;"> }</span><br />
..................................<br />
<br />
<span style="color: #ff99ff;">#outer-wrapper {</span><br />
<span style="color: #ff99ff;"> width: 660px;</span><br />
<span style="color: #ff99ff;"> margin:0 auto;</span><br />
<span style="color: #ff99ff;"> padding:10px;</span><br />
<span style="color: #ff99ff;"> text-align:$startSide;</span><br />
<span style="color: #ff99ff;"> font: $bodyfont;</span><br />
<span style="color: #ff99ff;"> }</span><br />
..................................<br />
<br />
<span style="color: #33cc00;">#main-wrapper {</span><br />
<span style="color: #33cc00;"> width: 410px;</span><br />
<span style="color: #33cc00;"> float: $startSide;</span><br />
..................................<br />
<br />
<span style="color: #33ccff;">#sidebar-wrapper</span> <span style="color: #33ccff;">{</span><br />
<span style="color: #33ccff;">width: 220px;</span> <span style="color: #33ccff;">float: $endSide;</span><br />
..................................<br />
<br />
#footer {<br />
width:660px;<br />
clear:both;</div>
<div class="codeview" style="background-color: #fce5cd;">
</div>
<div class="codeview">
</div>
...in <span style="font-style: italic;">Minima</span> (and lots of other templates) elements are categorized by these names:<br />
► <span style="color: #ffcc00;">header-wrapper</span> is Header<br />
► <span style="color: #ff99ff;">outer-wrapper</span> is our Main section, other elements are wrapped inside of it..<br />
► <span style="color: #33cc00;">main-wrapper</span> represents Post Section<br />
► <span style="color: #33ccff;">sidebar-wrapper</span> stands for Sidebar<br />
► footer is Footer :]<br />
<br />
...this means that our <span style="color: #ffcc00;">header-wrapper</span> is 660px wide, <span style="color: #ff99ff;">outer-wrapper</span> width (<span style="color: #33cc00;">Post section</span> + <span style="color: #33ccff;">Sidebar</span>+ margins) is also 660px, and footer 660 px.<br />
<br />
<span style="color: #ffcc00; font-size: 180%;">2.</span> Let's change the width:<br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="codeview" style="background-color: #fce5cd;">
#header-wrapper {<br />
width:750px;<br />
margin:0 auto 10px;<br />
border:1px solid $bordercolor;<br />
}<br />
......................................................................<br />
#outer-wrapper {<br />
width: <span style="font-weight: bold;">750px</span>;<br />
margin:0 auto;<br />
padding:10px;<br />
text-align:$startSide;<br />
font: $bodyfont;<br />
}<br />
.......................................................................<br />
<br />
#main-wrapper {<br />
width: <span style="font-weight: bold;">500px</span>;<br />
float: $startSide;<br />
........................................................................<br />
<br />
#sidebar-wrapper {<br />
width: <span style="font-weight: bold;">220px</span>;<br />
float: $endSide;<br />
........................................................................<br />
<br />
#footer {<br />
width:<span style="font-weight: bold;">750</span>px;<br />
clear:both;</div>
<div class="codeview" style="background-color: #fce5cd;">
</div>
...I've decided to make my Post section (<span style="color: #33cc00;">main-wrapper</span>) wider. In order to do this, I have to increase my <span style="color: #ff99ff;">outer-wrapper</span>. Now, here's the RULE:<br />
<span style="color: #ff6600;">◄</span> <span style="font-weight: bold;">If
you want to increase the width of your Posts section or Sidebar, you
HAVE to increase your Main section width (outer-wrapper) for the same
value!</span> <span style="color: #ff6600;">►</span><br />
<span style="color: #ff6600;">◄</span> <span style="font-weight: bold;">500px + 220px + margins = 750px</span> <span style="color: #ff6600;">►</span><br />
<br />
In this example, I've increased my Post section (<span style="color: #33cc00;">main-wrapper</span>) for 90px, so I've changed 410px into 500px. I did the same for the Main section (<span style="color: #ff99ff;">outer-wrapper</span>), changed 660px into 750px....I've left the Sidebar the same width, 220px.<br />
I've also changed the width for my <span style="color: #ffcc00;">header-wrapper</span> and footer....into 750px. Note that this is not necessary, but better do it...for the sake of symmetry in your Layout...<br />
<br />
That's
about it. Remember, when you're changing the width of your (custom)
Blogger template, certain elements will be (can be) under different
name....Do not let it confuse you! You know how the elements are
organized inside of it....and in the end, its a 5 minutes job...some
simple mathematics + patience.....<br />
<br />
If you need any help, ask.....Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-67971075665424373302012-06-15T11:09:00.002-07:002012-06-15T11:10:44.623-07:00Mootools Featured Posts Auto Slider to Blogger/WebsitesThis tutorial will show you how to add Mootools Featured Posts Slider into blogger or any other web site.You can look at the <span style="font-size: 130%; font-weight: bold;"><a href="http://www.demo.bloggertipandtrick.net/2010/08/mootools-featured-posts-auto-slider.html" rel="nofollow" target="_blank">DEMO</a></span> page of this Mootools Featured Posts Slider.Now if you like to add this slider to your site then follow the steps given below.<br />
<br />
1.Login to your blogger dashboard--> layout- -> Edit HTML<br />
2.Scroll down to where you see <span style="color: red; font-weight: bold;"></head></span> tag .<br />
3.Copy below code and paste it <span style="color: #3333ff;">just before</span> the <span style="color: red;"></head></span> tag .<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4AGc1JRkE3PgdOAkDjG4CePMco-copOYj5wc5pBjQXAT7h8VZ615mKyU5pZCQ3plR46XeKDoJZrLzpYdwXdPoP02lrqirHrN_7Y4YNkq7gVTBupnaEqjnCh_cKL_NCIzG3x-nV0Dz0_Ob/s1600/Mootools+Featured-Post+Auto+Slider.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5473629242840005794" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4AGc1JRkE3PgdOAkDjG4CePMco-copOYj5wc5pBjQXAT7h8VZ615mKyU5pZCQ3plR46XeKDoJZrLzpYdwXdPoP02lrqirHrN_7Y4YNkq7gVTBupnaEqjnCh_cKL_NCIzG3x-nV0Dz0_Ob/+Featured-Post+Auto+Slider.jpg" style="cursor: pointer; height: 260px; width: 528px;" /></a><br />
<br />
<pre style="border: 1px solid black; height: 350px; overflow: auto; width: 90%;"><script src='<span style="color: magenta;"><b>https://ajax.googleapis.com/ajax/libs/mootools/1.3.1/mootools-yui-compressed.js</b></span>' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
//MooTools More, <http://mootools.net/more>. Copyright (c) 2006-2008 Valerio Proietti, <http://mad4milk.net>, MIT Style License.
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('11.36=f 12({1M:11,a:{1m:"2s"},X:8(B,A){7.P("1v",8(){7.1w=(7.13["k"+7.1x.37()]!=0);b(7.1w&&2t.2u.38){7.e.39().2v(7.13)}},n);7.e=7.2w=$(B);7.Q(A);9 C=7.e.1n("13");7.13=C||f 1c("3Y",{3Z:$1Y(7.e.40("14","1N"),{41:"42"})}).43(7.e);7.e.1Z("13",7.13).1d("14",0);7.l=[];7.1w=n},2s:8(){7.14="14-15";7.1x="21";7.k=7.e.2x},22:8(){7.14="14-16";7.1x="23";7.k=7.e.2y},17:8(A){7.e.1d(7.14,A[0]);7.13.1d(7.1x,A[1]);c 7},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B[F]=11.1O(E[F],D[F],C)});c B},h:8(B,E){b(!7.z(Y.2z,B,E)){c 7}7[E||7.a.1m]();9 D=7.e.1e(7.14).1P();9 C=7.13.1e(7.1x).1P();9 A=[[D,C],[0,7.k]];9 G=[[D,C],[-7.k,0]];9 F;1Q(B){o"R":F=A;1f;o"3b":F=G;1f;o"1R":F=(7.13["k"+7.1x.37()]==0)?A:G}c 7.Q(F[0],F[1])},3c:8(A){c 7.h("R",A)},3d:8(A){c 7.h("3b",A)},2A:8(A){7[A||7.a.1m]();7.1w=j;c 7.17([-7.k,0])},2B:8(A){7[A||7.a.1m]();7.1w=n;c 7.17([0,7.k])},1R:8(A){c 7.h("1R",A)}});1c.44.r={17:8(B){9 A=7.1n("r");b(A){A.Z()}c 7.3e("r").1Z("r:a",$1Y({2C:"Z"},B))},2D:8(A){b(A||!7.1n("r")){b(A||!7.1n("r:a")){7.17("r",A)}7.1Z("r",f 11.36(7,7.1n("r:a")))}c 7.1n("r")}};1c.1o({r:8(D,E){D=D||"1R";9 B=7.2D("r"),A;1Q(D){o"2A":B.2A(E);1f;o"2B":B.2B(E);1f;o"1R":9 C=7.1n("r:2E",B.1w);B[(C)?"3d":"3c"](E);7.1Z("r:2E",!C);A=n;1f;45:B.h(D,E)}b(!A){7.3e("r:2E")}c 7}});11.46=f 12({1M:11,a:{k:{x:0,y:0},3f:n},X:8(B,A){7.e=7.2w=$(B);7.Q(A);9 D=7.Z.M(7,j);b($10(7.e)!="e"){7.e=$(7.e.24().25)}9 C=7.e;b(7.a.3f){7.P("h",8(){C.P("2F",D)},n);7.P("1v",8(){C.18("2F",D)},n)}},17:8(){9 A=1y.3g(Y);7.e.3h(A[0],A[1])},1O:8(E,D,C){9 B=[];9 A=2;A.3a(8(F){B.26(11.1O(E[F],D[F],C))});c B},h:8(C,H){b(!7.z(Y.2z,C,H)){c 7}9 E=7.e.3i(),F=7.e.47();9 B=7.e.3j(),D={x:C,y:H};S(9 G R D){9 A=F[G]-E[G];b($1z(D[G])){D[G]=($10(D[G])=="2G")?D[G].m(0,A):A}s{D[G]=B[G]}D[G]+=7.a.k[G]}c 7.Q([B.x,B.y],[D.x,D.y])},48:8(){c 7.h(j,0)},49:8(){c 7.h(0,j)},4a:8(){c 7.h("1A",j)},4b:8(){c 7.h(j,"1B")},4c:8(B){9 A=$(B).27(7.e);c 7.h(A.x,A.y)}});11.3k=f 12({1M:11.4d,X:8(B,A){7.2H=7.2w=$$(B);7.Q(A)},1O:8(G,H,I){9 C={};S(9 D R G){9 A=G[D],E=H[D],F=C[D]={};S(9 B R A){F[B]=7.Q(A[B],E[B],I)}}c C},17:8(B){S(9 C R B){9 A=B[C];S(9 D R A){7.4e(7.2H[C],D,A[D],7.a.2I)}}c 7},h:8(C){b(!7.z(Y.2z,C)){c 7}9 H={},I={};S(9 D R C){9 F=C[D],A=H[D]={},G=I[D]={};S(9 B R F){9 E=7.4f(7.2H[D],B,F[B]);A[B]=E.4g;G[B]=E.4h}}c 7.Q(H,I)}});9 1C=f 12({2J:[2K,2L],a:{1p:6,2I:"4i",1g:j,2M:n,m:j,28:j,29:j,1q:j,U:{x:"16",y:"15"}},X:8(){9 B=1y.2C(Y,{a:4j.10,e:$4k});7.e=$(B.e);7.t=7.e.24();7.2N(B.a||{});9 A=$10(7.a.28);7.2O=(A=="4l"||A=="4m")?$$(7.a.28):$(7.a.28)||7.e;7.19={l:{},2P:{}};7.p={h:{},l:{}};7.2a=(2t.2u.4n)?"4o":"2b";7.v={h:7.h.M(7),z:7.z.M(7),V:7.V.M(7),1h:7.1h.M(7),Z:7.Z.M(7),2c:$2Q(j)};7.3l()},3l:8(){7.2O.P("2b",7.v.h);c 7},4p:8(){7.2O.18("2b",7.v.h);c 7},h:8(C){b(7.a.1q){C.1q()}7.u("4q",7.e);7.19.h=C.N;9 A=7.a.m;7.m={x:[],y:[]};S(9 D R 7.a.U){b(!7.a.U[D]){3m}b(7.a.2M){7.p.l[D]=7.e.1e(7.a.U[D]).1P()}s{7.p.l[D]=7.e[7.a.U[D]]}b(7.a.29){7.p.l[D]*=-1}7.19.2P[D]=C.N[D]-7.p.l[D];b(A&&A[D]){S(9 B=2;B--;B){b($1z(A[D][B])){7.m[D][B]=$2Q(A[D][B])()}}}}b($10(7.a.1g)=="2G"){7.a.1g={x:7.a.1g,y:7.a.1g}}7.t.2R({1D:7.v.z,2d:7.v.Z});7.t.P(7.2a,7.v.2c)},z:8(A){b(7.a.1q){A.1q()}9 B=i.O(i.4r(i.3n(A.N.x-7.19.h.x,2)+i.3n(A.N.y-7.19.h.y,2)));b(B>7.a.1p){7.Z();7.t.2R({1D:7.v.V,2d:7.v.1h});7.u("h",7.e).u("1p",7.e)}},V:8(A){b(7.a.1q){A.1q()}7.19.l=A.N;S(9 B R 7.a.U){b(!7.a.U[B]){3m}7.p.l[B]=7.19.l[B]-7.19.2P[B];b(7.a.29){7.p.l[B]*=-1}b(7.a.m&&7.m[B]){b($1z(7.m[B][1])&&(7.p.l[B]>7.m[B][1])){7.p.l[B]=7.m[B][1]}s{b($1z(7.m[B][0])&&(7.p.l[B]<7.m[B][0])){7.p.l[B]=7.m[B][0]}}}b(7.a.1g[B]){7.p.l[B]-=(7.p.l[B]%7.a.1g[B])}b(7.a.2M){7.e.1d(7.a.U[B],7.p.l[B]+7.a.2I)}s{7.e[7.a.U[B]]=7.p.l[B]}}7.u("V",7.e)},Z:8(A){7.t.18("1D",7.v.z);7.t.18("2d",7.v.Z);b(A){7.t.18(7.2a,7.v.2c);7.u("Z",7.e)}},1h:8(A){7.t.18(7.2a,7.v.2c);7.t.18("1D",7.v.V);7.t.18("2d",7.v.1h);b(A){7.u("1v",7.e)}}});1c.1o({4s:8(A){c f 1C(7,$2e({U:{x:"23",y:"21"}},A))}});1C.3o=f 12({1M:1C,a:{1S:[],1a:j},X:8(C,B){7.Q(C,B);7.1S=$$(7.a.1S);7.1a=$(7.a.1a);b(7.1a&&$10(7.1a)!="e"){7.1a=$(7.1a.24().25)}C=7.e;9 D=C.1e("1N");9 A=(D!="4t")?D:"4u";b(C.1e("16")=="3p"||C.1e("15")=="3p"){C.1N(C.27(C.3q))}C.1d("1N",A);7.P("h",8(){7.2f()},n)},h:8(B){b(7.1a){9 D=7.e,J=7.1a,E=J.3r(D.3q),F={},A={};["15","1A","1B","16"].1r(8(K){F[K]=J.1e("4v-"+K).1P();A[K]=D.1e("14-"+K).1P()},7);9 C=D.2y+A.16+A.1A,I=D.2x+A.15+A.1B;9 H=[E.16+F.16,E.1A-F.1A-C];9 G=[E.15+F.15,E.1B-F.1B-I];7.a.m={x:H,y:G}}7.Q(B)},3s:8(B){B=B.3r();9 A=7.19.l;c(A.x>B.16&&A.x<B.1A&&A.y<B.1B&&A.y>B.15)},2f:8(){9 A=7.1S.4w(7.3s,7).3t();b(7.1s!=A){b(7.1s){7.u("4x",[7.e,7.1s])}b(A){7.1s=A;7.u("4y",[7.e,A])}s{7.1s=1E}}},V:8(A){7.Q(A);b(7.1S.2g){7.2f()}},1h:8(A){7.2f();7.u("4z",[7.e,7.1s]);7.1s=1E;c 7.Q(A)}});1c.1o({4A:8(A){c f 1C.3o(7,A)}});1F.2S=f 12({1M:2S,a:{3u:n},X:8(B,A){7.Q(B,A);7.2h()},3v:8(){9 A=3w.4B(7.2T);b(!A||A.2g>4C){c j}b(A=="{}"){7.39()}s{7.4D(A)}c n},2h:8(){7.2T=f 1F(3w.4E(7.4F(),n));c 7}});1F.2S.1o((8(){9 A={};1F.1r(1F.4G,8(C,B){A[B]=8(){9 D=C.4H(7.2T,Y);b(7.a.3u){7.3v()}c D}});c A})());9 W=f 4I({X:8(B,C){b(Y.2g>=3){C="1G";B=1y.2i(Y,0,3)}s{b(4J B=="4K"){b(B.2j(/1G/)){B=B.3x().2U(n)}s{b(B.2j(/q/)){B=B.1T()}s{B=B.2U(n)}}}}C=C||"1G";1Q(C){o"q":9 A=B;B=B.1T();B.q=A;1f;o"2V":B=B.2U(n);1f}B.1G=B.2i(0,3);B.q=B.q||B.2k();B.2V=B.3x();c $1Y(B,7)}});W.1o({4L:8(){9 A=1y.2i(Y);9 C=($10(A.3t())=="2G")?A.4M():50;9 B=7.2i();A.1r(8(D){D=f W(D);S(9 E=0;E<3;E++){B[E]=i.O((B[E]/1i*(1i-C))+(D[E]/1i*C))}});c f W(B,"1G")},29:8(){c f W(7.4N(8(A){c 1H-A}))},4O:8(A){c f W([A,7.q[1],7.q[2]],"q")},4P:8(A){c f W([7.q[0],A,7.q[2]],"q")},4Q:8(A){c f W([7.q[0],7.q[1],A],"q")}});8 $4R(C,B,A){c f W([C,B,A],"1G")}8 $4S(C,B,A){c f W([C,B,A],"q")}8 $4T(A){c f W(A,"2V")}1y.1o({2k:8(){9 B=7[0],C=7[1],J=7[2];9 G,F,H;9 I=i.1U(B,C,J),E=i.1j(B,C,J);9 K=I-E;H=I/1H;F=(I!=0)?K/I:0;b(F==0){G=0}s{9 D=(I-B)/K;9 A=(I-C)/K;9 L=(I-J)/K;b(B==I){G=L-A}s{b(C==I){G=2+D-L}s{G=4+A-D}}G/=6;b(G<0){G++}}c[i.O(G*3y),i.O(F*1i),i.O(H*1i)]},1T:8(){9 C=i.O(7[2]/1i*1H);b(7[1]==0){c[C,C,C]}s{9 A=7[0]%3y;9 E=A%2W;9 F=i.O((7[2]*(1i-7[1]))/4U*1H);9 D=i.O((7[2]*(3z-7[1]*E))/3A*1H);9 B=i.O((7[2]*(3z-7[1]*(2W-E)))/3A*1H);1Q(i.4V(A/2W)){o 0:c[C,B,F];o 1:c[D,C,F];o 2:c[F,C,B];o 3:c[F,D,C];o 4:c[B,F,C];o 5:c[C,F,D]}}c j}});4W.1o({2k:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?q.2k():1E},1T:8(){9 A=7.2j(/\\d{1,3}/g);c(A)?A.1T():1E}});9 4X=f 12({X:8(){7.2l=1y.3g(Y);7.1I={};7.1J={}},P:8(B,A){7.1J[B]=7.1J[B]||{};7.1I[B]=7.1I[B]||[];b(7.1I[B].3B(A)){c j}s{7.1I[B].26(A)}7.2l.1r(8(C,D){C.P(B,7.z.M(7,[B,C,D]))},7);c 7},z:8(C,A,B){7.1J[C][B]=n;9 D=7.2l.4Y(8(F,E){c 7.1J[C][E]||j},7);b(!D){c}7.1J[C]={};7.1I[C].1r(8(E){E.3C(7,7.2l,A)},7)}});9 3D=f 1F({3E:8(F,D){D=$1Y({1t:$1K,t:t,z:$2Q(n)},D);9 B=f 1c("4Z",{2X:F,10:"3F/3E"});9 E=D.1t.M(B),A=D.z,G=D.t;2m D.1t;2m D.z;2m D.t;B.2R({2h:E,51:8(){b(["52","1v"].3B(7.53)){E()}}}).3G(D);b(2t.2u.38){9 C=(8(){b(!$54(A)){c}$3H(C);E()}).3I(50)}c B.2v(G.3J)},3K:8(B,A){c f 1c("2C",$2e({55:"56",57:"58",10:"3F/3K",59:B},A)).2v(t.3J)},3L:8(C,B){B=$2e({1t:$1K,3M:$1K,3N:$1K},B);9 D=f 5a();9 A=$(D)||f 1c("5b");["2h","5c","5d"].1r(8(E){9 F="5e"+E;9 G=B[F];2m B[F];D[F]=8(){b(!D){c}b(!A.5f){A.23=D.23;A.21=D.21}D=D.1t=D.3M=D.3N=1E;G.3O(1,A,A);A.u(E,A,1)}});D.2X=A.2X=C;b(D&&D.1v){D.1t.3O(1)}c A.3G(B)},5g:8(D,C){C=$2e({2Y:$1K,3P:$1K},C);b(!D.26){D=[D]}9 A=[];9 B=0;D.1r(8(F){9 E=f 3D.3L(F,{1t:8(){C.3P.3C(7,B,D.5h(F));B++;b(B==D.2g){C.2Y()}}});A.26(E)});c f 3k(A)}});9 5i=f 12({2J:[2K,2L],a:{5j:8(A){b(7.a.1p){A=7.2Z(7.w)}7.1L.1d(7.1V,A)},1p:j,k:0,T:j,2n:j,1k:1i,1m:"22"},X:8(E,A,D){7.2N(D);7.e=$(E);7.1L=$(A);7.30=7.31=7.w=-1;7.e.P("2b",7.3Q.M(7));b(7.a.2n){7.e.P("2F",7.3R.5k(7))}9 F,B={},C={x:j,y:j};1Q(7.a.1m){o"2s":7.1l="y";7.1V="15";F="2x";1f;o"22":7.1l="x";7.1V="16";F="2y"}7.3S=7.1L[F]/2;7.1b=7.e[F]-7.1L[F]+(7.a.k*2);7.1j=$1z(7.a.T[0])?7.a.T[0]:0;7.1U=$1z(7.a.T[1])?7.a.T[1]:7.a.1k;7.T=7.1U-7.1j;7.1k=7.a.1k||7.1b;7.1u=i.32(7.T)/7.1k;7.3T=7.1u*7.1b/i.32(7.T);7.1L.1d("1N","5l").1d(7.1V,-7.a.k);C[7.1l]=7.1V;B[7.1l]=[-7.a.k,7.1b-7.a.k];7.V=f 1C(7.1L,{1p:0,m:B,U:C,5m:7.2o.M(7),5n:7.2o.M(7),2Y:8(){7.2o();7.2p()}.M(7)});b(7.a.1p){7.V.a.1g=i.5o(7.3T);7.V.a.m[7.1l][1]=7.1b}},17:8(A){b(!((7.T>0)^(A<7.1j))){A=7.1j}b(!((7.T>0)^(A>7.1U))){A=7.1U}7.w=i.O(A);7.2q();7.2p();7.u("3U",7.2Z(7.w));c 7},3Q:8(C){9 B=7.T<0?-1:1;9 A=C.N[7.1l]-7.e.27()[7.1l]-7.3S;A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q();7.2p();7.u("3U",A)},3R:8(A){9 B=(7.a.1m=="22")?(A.2n<0):(A.2n>0);7.17(B?7.w-7.1u:7.w+7.1u);A.1h()},2o:8(){9 B=7.T<0?-1:1;9 A=7.V.p.l[7.1l];A=A.m(-7.a.k,7.1b-7.a.k);7.w=i.O(7.1j+B*7.33(A));7.2q()},2q:8(){b(7.30!=7.w){7.30=7.w;7.u("3V",7.w)}},2p:8(){b(7.31!==7.w){7.31=7.w;7.u("1v",7.w+"")}},33:8(A){9 B=(A+7.a.k)*7.1u/7.1b*7.1k;c 7.a.1k?i.O(B-=B%7.1u):B},2Z:8(A){c(7.1b*i.32(7.1j-A))/(7.1k*7.1u)-7.a.k}});9 5p=f 12({2J:[2K,2L],a:{1W:20,34:1,5q:8(A,B){7.e.3h(A,B)}},X:8(B,A){7.2N(A);7.e=$(B);7.2r=($10(7.e)!="e")?$(7.e.24().25):7.e;7.1X=1E;7.35=7.3W.M(7)},h:8(){7.2r.P("1D",7.35)},1h:8(){7.2r.18("1D",7.35);7.1X=$3H(7.1X)},3W:8(A){7.N=(7.2r.2D("5r")=="25")?A.5s:A.N;b(!7.1X){7.1X=7.3X.3I(50,7)}},3X:8(){9 B=7.e.3i(),A=7.e.3j(),E=7.e.27(),D={x:0,y:0};S(9 C R 7.N){b(7.N[C]<(7.a.1W+E[C])&&A[C]!=0){D[C]=(7.N[C]-7.a.1W-E[C])*7.a.34}s{b(7.N[C]+7.a.1W>(B[C]+E[C])&&B[C]+B[C]!=A[C]){D[C]=(7.N[C]-B[C]+7.a.1W-E[C])*7.a.34}}}b(D.y||D.x){7.u("3V",[A.x+D.x,A.y+D.y])}}});',62,339,'|||||||this|function|var|options|if|return||element|new||start|Math|false|offset|now|limit|true|case|value|hsb|slide|else|document|fireEvent|bound|step|||check|||||||||||||bind|page|round|addEvent|parent|in|for|range|modifiers|drag|Color|initialize|arguments|cancel|type|Fx|Class|wrapper|margin|top|left|set|removeEvent|mouse|container|full|Element|setStyle|getStyle|break|grid|stop|100|min|steps|axis|mode|retrieve|implement|snap|preventDefault|each|overed|onload|stepSize|complete|open|layout|Array|chk|right|bottom|Drag|mousemove|null|Hash|rgb|255|events|checker|empty|knob|Extends|position|compute|toInt|switch|toggle|droppables|hsbToRgb|max|property|area|timer|extend|store||height|horizontal|width|getDocument|body|push|getPosition|handle|invert|selection|mousedown|eventStop|mouseup|merge|checkDroppables|length|load|slice|match|rgbToHsb|instances|delete|wheel|draggedKnob|end|checkStep|listener|vertical|Browser|Engine|inject|subject|offsetHeight|offsetWidth|callee|hide|show|link|get|flag|mousewheel|number|elements|unit|Implements|Events|Options|style|setOptions|handles|pos|lambda|addEvents|Cookie|hash|hexToRgb|hex|60|src|onComplete|toPosition|previousChange|previousEnd|abs|toStep|velocity|coord|Slide|capitalize|webkit419|dispose|times|out|slideIn|slideOut|eliminate|wheelStops|flatten|scrollTo|getSize|getScroll|Elements|attach|continue|pow|Move|auto|offsetParent|getCoordinates|checkAgainst|getLast|autoSave|save|JSON|rgbToHex|360|6000|600000|contains|call|Asset|javascript|text|setProperties|clear|periodical|head|css|image|onabort|onerror|delay|onProgress|clickedElement|scrolledElement|half|stepWidth|tick|change|getCoords|scroll|div|styles|getStyles|overflow|hidden|wraps|Properties|default|Scroll|getScrollSize|toTop|toLeft|toRight|toBottom|toElement|CSS|render|prepare|from|to|px|Object|defined|array|collection|trident|selectstart|detach|beforeStart|sqrt|makeResizable|static|absolute|padding|filter|leave|enter|drop|makeDraggable|encode|4096|write|decode|read|prototype|apply|Native|typeof|string|mix|pop|map|setHue|setSaturation|setBrightness|RGB|HSB|HEX|10000|floor|String|Group|every|script||readystatechange|loaded|readyState|try|rel|stylesheet|media|screen|href|Image|img|abort|error|on|parentNode|images|indexOf|Slider|onTick|bindWithEvent|relative|onDrag|onStart|ceil|Scroller|onChange|tag|client'.split('|'),0,{}))
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
/*
This file is part of JonDesign's SmoothGallery v2.1beta1.
JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 3 of the License, or
(at your option) any later version.
JonDesign's SmoothGallery is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with JonDesign's SmoothGallery; if not, write to the Free Software
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
Contributed code by:
- Christian Ehret (bugfix)
- Nitrix (bugfix)
- Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.
- Archie Cowan for helping me find a bugfix on carousel inner width problem.
- Tomocchino from #mootools for the preloader class
Many thanks to:
- The mootools team for the great mootools lib, and it's help and support throughout the project.
- Harald Kirschner (digitarald: http://digitarald.de/) for all his great libs. Some used here as plugins.
*/
/* some quirks to circumvent broken stuff in mt1.2 */
function isBody(element){
return (/^(?:body|html)$/i).test(element.tagName);
};
Element.implement({
getPosition: function(relative){
if (isBody(this)) return {x: 0, y: 0};
var el = this, position = {x: 0, y: 0};
while (el){
position.x += el.offsetLeft;
position.y += el.offsetTop;
el = el.offsetParent;
}
var rpos = (relative) ? $(relative).getPosition() : {x: 0, y: 0};
return {x: position.x - rpos.x, y: position.y - rpos.y};
}
});
// declaring the class
var gallery = {
Implements: [Events, Options],
options: {
showArrows: true,
showCarousel: true,
showInfopane: true,
embedLinks: true,
fadeDuration: 500,
timed: false,
delay: 9000,
preloader: true,
preloaderImage: true,
preloaderErrorImage: true,
/* Data retrieval */
manualData: [],
populateFrom: false,
populateData: true,
destroyAfterPopulate: true,
elementSelector: "div.imageElement",
titleSelector: "h3",
subtitleSelector: "p",
linkSelector: "a.open",
imageSelector: "img.full",
thumbnailSelector: "img.thumbnail",
defaultTransition: "fade",
/* InfoPane options */
slideInfoZoneOpacity: 0.7,
slideInfoZoneSlide: true,
/* Carousel options */
carouselMinimizedOpacity: 0.4,
carouselMinimizedHeight: 20,
carouselMaximizedOpacity: 0.9,
thumbHeight: 75,
thumbWidth: 100,
thumbSpacing: 10,
thumbIdleOpacity: 0.2,
textShowCarousel: 'Pictures',
showCarouselLabel: true,
thumbCloseCarousel: true,
useThumbGenerator: false,
thumbGenerator: 'resizer.php',
useExternalCarousel: false,
carouselElement: false,
carouselHorizontal: true,
activateCarouselScroller: true,
carouselPreloader: true,
textPreloadingCarousel: 'Loading...',
/* CSS Classes */
baseClass: 'jdGallery',
withArrowsClass: 'withArrows',
/* Plugins: HistoryManager */
useHistoryManager: false,
customHistoryKey: false,
/* Plugins: ReMooz */
useReMooz: false
},
initialize: function(element, options) {
this.setOptions(options);
this.fireEvent('onInit');
this.currentIter = 0;
this.lastIter = 0;
this.maxIter = 0;
this.galleryElement = element;
this.galleryData = this.options.manualData;
this.galleryInit = 1;
this.galleryElements = Array();
this.thumbnailElements = Array();
this.galleryElement.addClass(this.options.baseClass);
if (this.options.useReMooz&&(this.options.defaultTransition=="fade"))
this.options.defaultTransition="crossfade";
this.populateFrom = element;
if (this.options.populateFrom)
this.populateFrom = this.options.populateFrom;
if (this.options.populateData)
this.populateData();
element.style.display="block";
if (this.options.useHistoryManager)
this.initHistory();
if ((this.options.embedLinks)|(this.options.useReMooz))
{
this.currentLink = new Element('a').addClass('open').setProperties({
href: '#',
title: ''
}).injectInside(element);
if ((!this.options.showArrows) && (!this.options.showCarousel))
this.galleryElement = element = this.currentLink;
else
this.currentLink.setStyle('display', 'none');
}
this.constructElements();
if ((this.galleryData.length>1)&&(this.options.showArrows))
{
var leftArrow = new Element('a').addClass('left').addEvent(
'click',
this.prevItem.bind(this)
).injectInside(element);
var rightArrow = new Element('a').addClass('right').addEvent(
'click',
this.nextItem.bind(this)
).injectInside(element);
this.galleryElement.addClass(this.options.withArrowsClass);
}
this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
if (this.options.showInfopane) this.initInfoSlideshow();
if (this.options.showCarousel) this.initCarousel();
this.doSlideShow(1);
},
populateData: function() {
currentArrayPlace = this.galleryData.length;
options = this.options;
var data = $A(this.galleryData);
data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
this.galleryData = data;
this.fireEvent('onPopulated');
},
populateGallery: function(element, startNumber) {
var data = [];
options = this.options;
currentArrayPlace = startNumber;
element.getElements(options.elementSelector).each(function(el) {
elementDict = $H({
image: el.getElement(options.imageSelector).getProperty('src'),
number: currentArrayPlace,
transition: this.options.defaultTransition
});
if ((options.showInfopane) | (options.showCarousel))
elementDict.extend({
title: el.getElement(options.titleSelector).innerHTML,
description: el.getElement(options.subtitleSelector).innerHTML
});
if ((options.embedLinks) | (options.useReMooz))
elementDict.extend({
link: el.getElement(options.linkSelector).href||false,
linkTitle: el.getElement(options.linkSelector).title||false,
linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
});
if ((!options.useThumbGenerator) && (options.showCarousel))
elementDict.extend({
thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
});
else if (options.useThumbGenerator)
elementDict.extend({
thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
});
data.extend([elementDict]);
currentArrayPlace++;
if (this.options.destroyAfterPopulate)
el.dispose();
});
return data;
},
constructElements: function() {
el = this.galleryElement;
if (this.options.embedLinks && (!this.options.showArrows))
el = this.currentLink;
this.maxIter = this.galleryData.length;
var currentImg;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Morph(
new Element('div').addClass('slideElement').setStyles({
'position':'absolute',
'left':'0px',
'right':'0px',
'margin':'0px',
'padding':'0px',
'backgroundPosition':"center center",
'opacity':'0'
}).injectInside(el),
{duration: this.options.fadeDuration}
);
if (this.options.preloader)
{
currentImg.source = this.galleryData[i].image;
currentImg.loaded = false;
currentImg.load = function(imageStyle, i) {
if (!imageStyle.loaded) {
this.galleryData[i].imgloader = new Asset.image(imageStyle.source, {
'onload' : function(img, i){
img.element.setStyle(
'backgroundImage',
"url('" + img.source + "')")
img.loaded = true;
img.width = this.galleryData[i].imgloader.width;
img.height = this.galleryData[i].imgloader.height;
}.pass([imageStyle, i], this)
});
}
}.pass([currentImg, i], this);
} else {
currentImg.element.setStyle('backgroundImage',
"url('" + this.galleryData[i].image + "')");
}
this.galleryElements[parseInt(i)] = currentImg;
}
},
destroySlideShow: function(element) {
var myClassName = element.className;
var newElement = new Element('div').addClass('myClassName');
element.parentNode.replaceChild(newElement, element);
},
startSlideShow: function() {
this.fireEvent('onStart');
this.loadingElement.style.display = "none";
this.lastIter = this.maxIter - 1;
this.currentIter = 0;
this.galleryInit = 0;
this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
if (this.options.showInfopane)
this.showInfoSlideShow.delay(1000, this);
if (this.options.useReMooz)
this.makeReMooz.delay(1000, this);
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
if (this.options.showCarousel&&(!this.options.carouselPreloader)&&(!this.options.useExternalCarousel))
this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
this.prepareTimer();
if (this.options.embedLinks)
this.makeLink(this.currentIter);
},
nextItem: function() {
this.fireEvent('onNextCalled');
this.nextIter = this.currentIter+1;
if (this.nextIter >= this.maxIter)
this.nextIter = 0;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
prevItem: function() {
this.fireEvent('onPreviousCalled');
this.nextIter = this.currentIter-1;
if (this.nextIter <= -1)
this.nextIter = this.maxIter - 1;
this.galleryInit = 0;
this.goTo(this.nextIter);
},
goTo: function(num) {
this.clearTimer();
if(this.options.preloader)
{
this.galleryElements[num].load();
if (num==0)
this.galleryElements[this.maxIter - 1].load();
else
this.galleryElements[num - 1].load();
if (num==(this.maxIter - 1))
this.galleryElements[0].load();
else
this.galleryElements[num + 1].load();
}
if (this.options.embedLinks)
this.clearLink();
if (this.options.showInfopane)
{
this.slideInfoZone.clearChain();
this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
} else
this.currentChangeDelay = this.changeItem.delay(500, this, num);
if (this.options.embedLinks)
this.makeLink(num);
this.prepareTimer();
/*if (this.options.showCarousel)
this.clearThumbnailsHighlights();*/
},
changeItem: function(num) {
this.fireEvent('onStartChanging');
this.galleryInit = 0;
if (this.currentIter != num)
{
for(i=0;i<this.maxIter;i++)
{
if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});
}
gallery.Transitions[this.galleryData[num].transition].pass([
this.galleryElements[this.currentIter],
this.galleryElements[num],
this.currentIter,
num], this)();
this.currentIter = num;
if (this.options.useReMooz)
this.makeReMooz();
}
var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
if ((this.options.showCarousel)&&(!this.options.useExternalCarousel))
this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
this.doSlideShow.bind(this)();
this.fireEvent('onChanged');
},
clearTimer: function() {
if (this.options.timed)
$clear(this.timer);
},
prepareTimer: function() {
if (this.options.timed)
this.timer = this.nextItem.delay(this.options.delay, this);
},
doSlideShow: function(position) {
if (this.galleryInit == 1)
{
imgPreloader = new Image();
imgPreloader.onload=function(){
this.startSlideShow.delay(10, this);
}.bind(this);
imgPreloader.src = this.galleryData[0].image;
if(this.options.preloader)
this.galleryElements[0].load();
} else {
if (this.options.showInfopane)
{
if (this.options.showInfopane)
{
this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
} else
if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
this.centerCarouselOn(position);
}
}
},
createCarousel: function() {
var carouselElement;
if (!this.options.useExternalCarousel)
{
var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
this.carouselContainer = new Fx.Morph(carouselContainerElement, {transition: Fx.Transitions.Expo.easeOut});
this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
title: this.options.textShowCarousel
}).injectInside(carouselContainerElement);
if(this.options.carouselPreloader)
this.carouselBtn.set('html', this.options.textPreloadingCarousel);
else
this.carouselBtn.set('html', this.options.textShowCarousel);
this.carouselBtn.addEvent(
'click',
function () {
this.carouselContainer.cancel();
this.toggleCarousel();
}.bind(this)
);
this.carouselActive = false;
carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
this.carousel = new Fx.Morph(carouselElement);
} else {
carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
}
this.carouselElement = new Fx.Morph(carouselElement, {transition: Fx.Transitions.Expo.easeOut});
this.carouselElement.normalHeight = carouselElement.offsetHeight;
if (this.options.showCarouselLabel)
this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
this.carouselWrapper = new Fx.Morph(carouselWrapper, {transition: Fx.Transitions.Expo.easeOut});
this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
if (this.options.activateCarouselScroller)
{
this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
area: 100,
velocity: 0.2
})
this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
duration: 400,
onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
});
}
},
fillCarousel: function() {
this.constructThumbnails();
this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
if (this.options.carouselHorizontal)
this.carouselInner.style.width = this.carouselInner.normalWidth;
},
initCarousel: function () {
this.createCarousel();
this.fillCarousel();
if (this.options.carouselPreloader)
this.preloadThumbnails();
},
flushCarousel: function() {
this.thumbnailElements.each(function(myFx) {
myFx.element.dispose();
myFx = myFx.element = null;
});
this.thumbnailElements = [];
},
toggleCarousel: function() {
if (this.carouselActive)
this.hideCarousel();
else
this.showCarousel();
},
showCarousel: function () {
this.fireEvent('onShowCarousel');
this.carouselContainer.start({
'opacity': this.options.carouselMaximizedOpacity,
'top': 0
}).chain(function() {
this.carouselActive = true;
this.carouselWrapper.scroller.start();
this.fireEvent('onCarouselShown');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
hideCarousel: function () {
this.fireEvent('onHideCarousel');
var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
this.carouselContainer.start({
'opacity': this.options.carouselMinimizedOpacity,
'top': targetTop
}).chain(function() {
this.carouselActive = false;
this.carouselWrapper.scroller.stop();
this.fireEvent('onCarouselHidden');
this.carouselContainer.options.onComplete = null;
}.bind(this));
},
constructThumbnails: function () {
element = this.carouselInner;
for(i=0;i<this.galleryData.length;i++)
{
var currentImg = new Fx.Morph(new Element ('div').addClass("thumbnail").setStyles({
backgroundImage: "url('" + this.galleryData[i].thumbnail + "')",
backgroundPosition: "center center",
backgroundRepeat: 'no-repeat',
marginLeft: this.options.thumbSpacing + "px",
width: this.options.thumbWidth + "px",
height: this.options.thumbHeight + "px"
}).injectInside(element), {duration: 200}).start({
'opacity': this.options.thumbIdleOpacity
});
currentImg.element.addEvents({
'mouseover': function (myself) {
myself.cancel();
myself.start({'opacity': 0.99});
if (this.options.showCarouselLabel)
$(this.carouselLabel).set('html', '<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
}.pass(currentImg, this),
'mouseout': function (myself) {
myself.cancel();
myself.start({'opacity': this.options.thumbIdleOpacity});
}.pass(currentImg, this),
'click': function (myself) {
this.goTo(myself.relatedImage.number);
if (this.options.thumbCloseCarousel&&(!this.options.useExternalCarousel))
this.hideCarousel();
}.pass(currentImg, this)
});
currentImg.relatedImage = this.galleryData[i];
this.thumbnailElements[parseInt(i)] = currentImg;
}
},
log: function(value) {
if(console.log)
console.log(value);
},
preloadThumbnails: function() {
var thumbnails = [];
for(i=0;i<this.galleryData.length;i++)
{
thumbnails[parseInt(i)] = this.galleryData[i].thumbnail;
}
this.thumbnailPreloader = new Preloader();
if (!this.options.useExternalCarousel)
this.thumbnailPreloader.addEvent('onComplete', function() {
var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
}.bind(this));
this.thumbnailPreloader.load(thumbnails);
},
clearThumbnailsHighlights: function()
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements[i].cancel();
this.thumbnailElements[i].start(0.2);
}
},
changeThumbnailsSize: function(width, height)
{
for(i=0;i<this.galleryData.length;i++)
{
this.thumbnailElements[i].cancel();
this.thumbnailElements[i].element.setStyles({
'width': width + "px",
'height': height + "px"
});
}
},
centerCarouselOn: function(num) {
if (!this.carouselWallMode)
{
var carouselElement = this.thumbnailElements[num];
var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
var carouselWidth = this.carouselWrapper.element.offsetWidth;
var carouselInnerWidth = this.carouselInner.offsetWidth;
var diffWidth = carouselWidth / 2;
var scrollPos = position-diffWidth;
this.carouselWrapper.elementScroller.start(scrollPos,0);
}
},
initInfoSlideshow: function() {
/*if (this.slideInfoZone.element)
this.slideInfoZone.element.remove();*/
this.slideInfoZone = new Fx.Morph(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
this.slideInfoZone.element.setStyle('opacity',0);
},
changeInfoSlideShow: function()
{
this.hideInfoSlideShow.delay(10, this);
this.showInfoSlideShow.delay(500, this);
},
showInfoSlideShow: function() {
this.fireEvent('onShowInfopane');
this.slideInfoZone.cancel();
element = this.slideInfoZone.element;
element.getElement('h2').set('html', this.galleryData[this.currentIter].title);
element.getElement('p').set('html', this.galleryData[this.currentIter].description);
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
else
this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
if (this.options.showCarousel)
this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
return this.slideInfoZone;
},
hideInfoSlideShow: function() {
this.fireEvent('onHideInfopane');
this.slideInfoZone.cancel();
if(this.options.slideInfoZoneSlide)
this.slideInfoZone.start({'opacity': 0, 'height': 0});
else
this.slideInfoZone.start({'opacity': 0});
return this.slideInfoZone;
},
makeLink: function(num) {
this.currentLink.setProperties({
href: this.galleryData[num].link,
title: this.galleryData[num].linkTitle
})
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'block');
},
clearLink: function() {
this.currentLink.setProperties({href: '', title: ''});
if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
this.currentLink.setStyle('display', 'none');
},
makeReMooz: function() {
this.currentLink.setProperties({
href: '#'
});
this.currentLink.setStyles({
'display': 'block'
});
this.galleryElements[this.currentIter].element.set('title', this.galleryData[this.currentIter].title + ' :: ' + this.galleryData[this.currentIter].description);
this.ReMooz = new ReMooz(this.galleryElements[this.currentIter].element, {
link: this.galleryData[this.currentIter].link,
shadow: false,
dragging: false,
addClick: false,
resizeOpacity: 1
});
var img = this.galleryElements[this.currentIter];
var coords = img.element.getCoordinates();
delete coords.right;
delete coords.bottom;
widthDiff = coords.width - img.width;
heightDiff = coords.height - img.height;
coords.width = img.width;
coords.height = img.height;
coords.left += Math.ceil(widthDiff/2)+1;
coords.top += Math.ceil(heightDiff/2)+1;
this.ReMooz.getOriginCoordinates = function(coords) {
return coords;
}.bind(this, coords);
this.currentLink.onclick = function () {
this.ReMooz.open.bind(this.ReMooz)();
return false;
}.bind(this);
},
/* To change the gallery data, those two functions : */
flushGallery: function() {
this.galleryElements.each(function(myFx) {
myFx.element.dispose();
myFx = myFx.element = null;
});
this.galleryElements = [];
},
changeData: function(data) {
this.galleryData = data;
this.clearTimer();
this.flushGallery();
if (this.options.showCarousel) this.flushCarousel();
this.constructElements();
if (this.options.showCarousel) this.fillCarousel();
if (this.options.showInfopane) this.hideInfoSlideShow();
this.galleryInit=1;
this.lastIter=0;
this.currentIter=0;
this.doSlideShow(1);
},
/* Plugins: HistoryManager */
initHistory: function() {
this.fireEvent('onHistoryInit');
this.historyKey = this.galleryElement.id + '-picture';
if (this.options.customHistoryKey)
this.historyKey = this.options.customHistoryKey;
this.history = new History.Route({
defaults: [1],
pattern: this.historyKey + '\\((\\d+)\\)',
generate: function(values) {
return [this.historyKey, '(', values[0], ')'].join('')
}.bind(this),
onMatch: function(values, defaults) {
if (parseInt(values[0])-1 < this.maxIter)
this.goTo(parseInt(values[0])-1);
}.bind(this)
});
this.addEvent('onChanged', function(){
this.history.setValue(0, this.currentIter+1);
this.history.defaults=[this.currentIter+1];
}.bind(this));
this.fireEvent('onHistoryInited');
}
};
gallery = new Class(gallery);
gallery.Transitions = new Hash ({
fade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
if (newPos > oldPos) newFx.start({opacity: 1});
else
{
newFx.set({opacity: 1});
oldFx.start({opacity: 0});
}
},
crossfade: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
newFx.start({opacity: 1});
oldFx.start({opacity: 0});
},
fadebg: function(oldFx, newFx, oldPos, newPos){
oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
}
});
/* All code copyright 2007 Jonathan Schemoul */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: Preloader (class)
* Simple class for preloading images with support for progress reporting
* Copyright 2007 Tomocchino.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
var Preloader = new Class({
Implements: [Events, Options],
options: {
root : '',
period : 100
},
initialize: function(options){
this.setOptions(options);
},
load: function(sources) {
this.index = 0;
this.images = [];
this.sources = this.temps = sources;
this.total = this. sources.length;
this.fireEvent('onStart', [this.index, this.total]);
this.timer = this.progress.periodical(this.options.period, this);
this.sources.each(function(source, index){
this.images[index] = new Asset.image(this.options.root + source, {
'onload' : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
});
}, this);
},
progress: function() {
this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
if(this.index >= this.total) this.complete();
},
complete: function(){
$clear(this.timer);
this.fireEvent('onComplete', [this.images]);
},
cancel: function(){
$clear(this.timer);
}
});
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Follows: formatString (function)
* Original name: Yahoo.Tools.printf
* Copyright Yahoo.
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
function formatString() {
var num = arguments.length;
var oStr = arguments[0];
for (var i = 1; i < num; i++) {
var pattern = "\\{" + (i-1) + "\\}";
var re = new RegExp(pattern, "g");
oStr = oStr.replace(re, arguments[i]);
}
return oStr;
}
//]]>
</script>
<style type='text/css'>
#myGallery, #myGallerySet {width: 515px;height: 250px;z-index:0;}
.jdGallery a{outline:0;}
.jdGallery{overflow: hidden;position: relative;}
.jdGallery img{border: 0;margin: 0;}
.jdGallery .slideElement
{width: 100%;height: 100%;background-color: #000;background-repeat: no-repeat;background-position: center center;background-image:url('');}
.jdGallery .slideInfoZone
{position: absolute;z-index: 10;width: 100%;margin: 0px;left: 0;bottom: 0;height: 90px;background: #363636;color: #fff;text-indent: 0;overflow: hidden;}
* html .jdGallery .slideInfoZone{bottom: -1px;}
.jdGallery .slideInfoZone h2
{padding: 0;font-size: 14px;text-decoration:none;margin: 0;margin: 2px 5px;font-weight: bold;color: #ff9000 !important;}
.jdGallery .slideInfoZone h2 a
{padding: 0;font-size: 14px;text-decoration:none;margin: 0;font-weight: bold;color: #ff9000 !important;}
.jdGallery .slideInfoZone p
{padding: 0;font-size: 12px;margin: 2px 5px;color: #eee;}
</style></pre>
<br />
NOTE : You can <a href="http://www.box.net/shared/sbimqvfg7o" rel="nofollow" style="font-weight: bold;" target="_blank">DOWNLOAD</a> and HOST mootools-1.2.1-core-yc.js yourself.Andalso you can change width and height of this slider easily (Default <span style="color: #009900; font-weight: bold;">width:515px</span> and <span style="color: #ff6600; font-weight: bold;">height:250px;</span>).<br />
<br />
4.Now save your template.<br />
5.Go to Layout --> Page Elements.<br />
6.Click on 'Add a Gadget'.<br />
7.Select 'HTML/Javascript' and add the code given below and click save.<br />
<br />
<pre style="border: 1px solid black; height: 250px; overflow: auto; width: 90%;"><script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 5000,
slideInfoZoneOpacity: 0.8,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGallery">
<div class="imageElement"><h3><a href="<span style="color: #3333ff; font-size: 130%; font-weight: bold;">ENTER-YOUR-POST-1-LINK-HERE</span>"><span style="color: #cc33cc; font-size: 130%; font-weight: bold;">THIS-IS-FEATURED-POST-1-TITLE</span></a></h3><p><span style="color: #ff6600; font-size: 130%; font-weight: bold;">FEATURED-POST-1-DESCRIPTION</span></p><a href="#" class="open"></a><img src="<span style="color: #009900; font-size: 130%; font-weight: bold;">FEATURED-POST-1-IMAGE-ADDRESS</span>" class="full" alt="" /></div>
<div class="imageElement"><h3><a href="<span style="color: #3333ff; font-size: 130%; font-weight: bold;">ENTER-YOUR-POST-LINK-2-HERE</span>"><span style="color: #cc33cc; font-size: 130%; font-weight: bold;">THIS-IS-FEATURED-POST-2-TITLE</span></a></h3><p><span style="color: #ff6600; font-size: 130%; font-weight: bold;">FEATURED-POST-2-DESCRIPTION</span></p><a href="#" class="open"></a><img src="<span style="color: #009900; font-size: 130%; font-weight: bold;">FEATURED-POST-2-IMAGE-ADDRESS</span>" class="full" alt="" /></div>
<div class="imageElement"><h3><a href="<span style="color: #3333ff; font-size: 130%; font-weight: bold;">ENTER-YOUR-POST-3-LINK-HERE</span>"><span style="color: #cc33cc; font-size: 130%; font-weight: bold;">THIS-IS-FEATURED-POST-3-TITLE</span></a></h3><p><span style="color: #ff6600; font-size: 130%; font-weight: bold;">FEATURED-POST-3-DESCRIPTION</span></p><a href="#" class="open"></a><img src="<span style="color: #009900; font-size: 130%; font-weight: bold;">FEATURED-POST-3-IMAGE-ADDRESS</span>" class="full" alt="" /></div>
<div class="imageElement"><h3><a href="<span style="color: #3333ff; font-size: 130%; font-weight: bold;">ENTER-YOUR-POST-4-LINK-HERE</span>"><span style="color: #cc33cc; font-size: 130%; font-weight: bold;">THIS-IS-FEATURED-POST-4-TITLE</span></a></h3><p><span style="color: #ff6600; font-size: 130%; font-weight: bold;">FEATURED-POST-4-DESCRIPTION</span></p><a href="#" class="open"></a><img src="<span style="color: #009900; font-size: 130%; font-weight: bold;">FEATURED-POST-4-IMAGE-ADDRESS</span>" class="full" alt="" /></div>
<div class="imageElement"><h3><a href="<span style="color: #3333ff; font-size: 130%; font-weight: bold;">ENTER-YOUR-POST-5-LINK-HERE</span>"><span style="color: #cc33cc; font-size: 130%; font-weight: bold;">THIS-IS-FEATURED-POST-5-TITLE</span></a></h3><p><span style="color: #ff6600; font-size: 130%; font-weight: bold;">FEATURED-POST-5-DESCRIPTION</span></p><a href="#" class="open"></a><img src="<span style="color: #009900; font-size: 130%; font-weight: bold;">FEATURED-POST-5-IMAGE-ADDRESS</span>" class="full" alt="" /></div>
</div></pre>
<br />
Change <span style="color: #cc33cc; font-weight: bold;">5000</span> to change your <span style="color: #009900; font-weight: bold;">slider speed</span>.<br />
<span style="font-size: 130%; font-weight: bold;">NOTE :</span> Remember to <span style="color: red; font-weight: bold;">replace</span> ,<br />
<br />
<span style="color: #3333ff; font-size: 130%; font-weight: bold;">ENTER-YOUR-POST-X-LINK-HERE</span>s with your real post links.<br />
<span style="color: #cc33cc; font-size: 130%; font-weight: bold;">THIS-IS-FEATURED-POST-X-TITLE</span>s with your real post titles.<br />
<span style="color: #ff6600; font-size: 130%; font-weight: bold;">FEATURED-POST-X-DESCRIPTION</span>s with your post descriptions.<br />
<span style="color: #009900; font-size: 130%; font-weight: bold;">FEATURED-POST-X-IMAGE-ADDRESS</span>s with your real image addresses.<br />
<br />
Look at the example below.<br />
<br />
<pre style="border: 1px solid black; height: 250px; overflow: auto; width: 90%;"><script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 5000,
slideInfoZoneOpacity: 0.8,
showCarousel: false
});
}
window.addEvent('domready', startGallery);
</script>
<div id="myGallery">
<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 1 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 1" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdwp8dwa3Kp-dDtUS3gM6AxpvFz-jgkQM7Wf8HtkPQPX8Mjp-EiPDPm2Xxj9rFJghaq77UYL8MmDcg197GGIBfWKOmUhSJX9XUvOkyif3Xp5fLY_h_8sKPoXs8XFCvn0ciyTB-rSI2BI/" class="full" alt="" /></div>
<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 2 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 2" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioE4NZVFh090wP1LDlMnvzQ3nC06ADWYWogwZy8LOU1U66KTrpn8Wngnik595qvCo0dkE83iFZMGV3Qe3PkvDEr2v7myu6M5EvRXzNfi6-qnTW4rLEhIapzp7VZurJ4LZc2joitmwkIl4/" class="full" alt="" /></div>
<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 3 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 3" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw0IP3Y3D8yuYJrNkaZlU1OlwYviIj_O8oBNHm1Kn1MAXfB2bjMtD6hczJvGKFWgjqi5JKvDEA4KCLYz-RYI4mIE1BlaWnqc7xPtUztLQFKRFf-XvhpHkrHZm0pQq5TLWtRmJ4w2Tjy3s/" class="full" alt="" /></div>
<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 4 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 4" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo8oZR1aCxMbD_FWK21kNh_M452wprgHQ_LsgcDTFoQwUIxYyJ3-VLBo1arW2HX8rNwa8LwEp7fLbNcbiJAXAekquPe4ikeVfJq4MeFr-Mo14ancDInsH6ii9tLzCajVS7RZei1lUxKkE/" class="full" alt="" /></div>
<div class="imageElement"><h3><a href="ENTER-YOUR-POST-LINK-HERE">This is featured post 5 title</a></h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et...</p><a href="#" title="This is featured post 5" class="open"></a><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwadNhIEVm-30Fz-X8ychZfjo8wzIWrZTl3QEt9gZ-2NDGafN-g_52dXnhO36J3OtsgV4gkHNQWhcsula79z7s4_O0baanNtBqksuh9DW3zlExTjz0SCN2P6CfxY-Z61XBYjIpur41fC0/" class="full" alt="" /></div>
</div></pre>
<br />
You are done.Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-36416010663058078662012-06-15T10:28:00.001-07:002012-06-15T10:28:30.006-07:00วิธีทำเว็บให้น่าใช้งาน SEO<h1>
วิธีทำเว็บให้น่าใช้งาน</h1>
หากคุณเป็นเจ้าของเว็บไซต์ วันนี้เรามีข้อควรระวังสำหรับเว็บไซต์บางส่วนของ Jacob Nielsen มาฝาก เพื่อให้คุณนำไปปรับและพัฒนาเว็บไซต์ของคุณให้ถูกใจยูสเซอร์ให้ดียิ่งๆขึ้นไป...ไปดูกันเลย<br />
<ol>
<li>Legibility Problems ความยุ่งยากในการอ่าน เนื่องจากบางเว็บใช้ฟอนต์ขนาดเล็กและไม่สามารถปรับขนาดได้สร้างปัญหาให้กับยูสเซอร์เป็นอย่างมาก</li>
<li>Non-Standard Links ยูสเซอร์ส่วนมากแยกไม่ออกว่าเท็กซ์ตัวไหนบ้างที่เป็นลิงก์ ควรสร้างมาตรฐานให้ยูสเซอร์เข้าใจง่ายขึ้น เช่น ลิงก์ที่ดี ควรมีสีที่แตกต่างจากตัวคอนเทนต์ปกติ และอาจจะต้องมีเส้นใต้ขีดไว้เสมอ หรือการคลิกลิงก์เพื่อเปิดหน้าต่างใหม่ เหมาะใช้งานกับไฟล์ประเภท PDF และหน้าเว็บไซต์อื่นที่ไม่ใช่ในเว็บเดียวกัน</li>
<li>Flash นำเสนอแฟลช ไปพร้อมกับการใส่ใจเนื้อหาและข้อมูลภายในเว็บไซต์ เพื่อเอื้อประโยชน์ซึ่งกันและกัน</li>
<li>Bad Search หากเว็บของคุณมีปริมาณข้อมูลมากๆ และมีบริการค้นหาข้อมูล ก็ไม่ควารมองข้ามการปรับปรุงเสิร์ชเอนจินให้มีประสิทธิภาพเสมอ</li>
<li>Browser Incompatibility ควรทดลองหน้าเว็บไซต์กับหลายๆบราวเซอร์ว่าใช้งานได้ถูกต้องหรือเปล่า</li>
<li>Cumbersome Forms หากมีการใช้ฟอร์มในการกรอกแบบสอบถาม ไม่ควรยืดยาวจนเกินเหตุและควรจะมีตัวช่วยให้ยูสเซอร์กรอกได้สะดวก</li>
<li>No Contact Information or Other Company Info ห้ามลืมข้อมูลในการติดต่อไม่ว่าจะเป็นเบอร์โทรศัพท์ หรืออีเมล์</li>
<li>Frozen Layouts with Fixed Page Widths ควรออกแบบเว็บให้ปรับขนาดได้ตาม Resolution ของหน้าจอที่เปลี่ยนไป </li>
</ol>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-66700321876370000942012-06-15T10:11:00.001-07:002012-06-15T10:23:04.895-07:00Customizing "Newer + Older Posts" Link in FooterWe're going to customize our Blogger footer a bit. To be more precise, the links <span style="font-style: italic;">Newer Post</span>, <span style="font-style: italic;">Home</span> and <span style="font-style: italic;">Older Post</span> that we can find on the very bottom of the post.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFdItT2zz_BOU3mzR13WXhi3KFHcpbCApE1XmvFloOUPSlfU9QUU-KbDUVzcCEmJpNzQR7uTWkjjKCwu6il3dMYEwbyaf5Uw5hY1gAZrLpgvfVoVyrgYa4qpl2UmoUT_mjwb_Owsz4bud9/s1600-h/1.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5290572941937348306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFdItT2zz_BOU3mzR13WXhi3KFHcpbCApE1XmvFloOUPSlfU9QUU-KbDUVzcCEmJpNzQR7uTWkjjKCwu6il3dMYEwbyaf5Uw5hY1gAZrLpgvfVoVyrgYa4qpl2UmoUT_mjwb_Owsz4bud9/s400/1.gif" style="display: block; height: 246px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a><br />
<span style="color: #ffcc00; font-weight: bold;">WHAT ARE THOSE?</span><br />
For those who do not know, <span style="font-style: italic;">Newer Post</span>, <span style="font-style: italic;">Home</span> and <span style="font-style: italic;">Older Post</span> are links that appear on the bottom of the posts. When visitors click on, lets say, <span style="font-style: italic;">Older Posts</span>, it will take them to the Page with the <span style="font-weight: bold;">set</span> of your previous posts.<br />
The number (<span style="font-weight: bold;">set</span>) of the posts on this page will be the <span style="font-weight: bold;">same</span> as the number of the Posts on your main page (don't think that a click on the <span style="font-style: italic;">Older Posts</span> will open ALL of your Posts!)<br />
You can adjust the number of the posts on the main page going to LAYOUT ► PAGE ELEMENTS ► and clicking on <span style="font-style: italic;">Edit</span> in the BLOG POSTS box.....<br />
<br />
<span style="color: #ffcc00; font-weight: bold;">WHY IS THIS SO IMPORTANT? IS IT AT ALL?</span><br />
It is. This is a great navigation tool for your visitors. If you make these links more visible and eye catching, people will click on them, and will be dragged into the maze of your Blog posts...and stay there forever and ever...<br />
Ok, seriously, I suggest doing this.<br />
<br />
<span style="color: #ffcc00; font-weight: bold;">SO, WHAT CAN I DO?</span><br />
This is a fun part. You can customize these links in Blogger in a few ways:<br />
<br />
► changing the <span style="font-weight: bold;">text</span> of <span style="font-style: italic;">Newer, Older, Home</span> links<br />
► placing a <span style="font-weight: bold;">picture beside</span> them (a small icon, arrow, or whatever...)<br />
► placing a picture (image) <span style="font-weight: bold;">instead</span> of these links<br />
<br />
First, <a href="http://pocket-templates.blogspot.com/2008/10/back-up-your-blogger-template.html" target="_blank">back up your Blogger template</a>. Avoid the worst. Put safety first.<br />
When you've done this, let's identify the code we're going to mess around with....Go to:<br />
LAYOUT ► EDIT HTML ► click on <span style="font-style: italic;">Expand widget templates</span> in the upper right corner....Locate this part of the code:<br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="codeview" style="background-color: #fce5cd;">
<b:includable id='nextprev'><br />
<div class='blog-pager' id='blog-pager'><br />
<span style="color: #ff99ff;"><b:if cond='data:newerPageUrl'></span><br />
<span style="color: #ff99ff;"><span id='blog-pager-newer-link'></span><br />
<span style="color: #ff99ff;"><a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a></span><br />
<span style="color: #ff99ff;"></span></span><br />
<span style="color: #ff99ff;"></b:if></span><br />
<br />
<span style="color: #ffcc00;"><b:if cond='data:olderPageUrl'></span><br />
<span style="color: #ffcc00;"><span id='blog-pager-older-link'></span><br />
<span style="color: #ffcc00;"><a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a></span><br />
<span style="color: #ffcc00;"></span></span><br />
<span style="color: #ffcc00;"></b:if></span><br />
<br />
<span style="color: #33cc00;"><b:if cond='data:blog.homepageUrl != data:blog.url'></span><br />
<span style="color: #33cc00;"><a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></span><br />
<span style="color: #33cc00;"><b:else/></span><br />
<span style="color: #33cc00;"><b:if cond='data:newerPageUrl'></span><br />
<span style="color: #33cc00;"><a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a></span><br />
<span style="color: #33cc00;"></b:if></span><br />
<span style="color: #33cc00;"></b:if></span><br />
<br />
</div><br />
<div class='clear'/><br />
</b:includable><br />
</div>
...now, as you can see, there are three groups, one for each link:<br />
<span style="color: #ff99ff;">► pink</span> represent the code for <span style="font-style: italic;">Newer Post</span> link<br />
<span style="color: #ffcc00;">► orange</span> for the <span style="font-style: italic;">Older Post</span><br />
<span style="color: #33cc00;">► green</span> for <span style="font-style: italic;">Home</span><br />
► white wraps all of these up...<br />
<br />
<div style="text-align: center;">
<span style="color: #ffcc00;">◄</span><span style="font-weight: bold;">Changing the text of the links</span><span style="color: #ffcc00;">►</span></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO2IpsuTGbpblfTIWErcU9e3pB9vjzMcfT8N7KCMGqEUZas-0GY_x5UZAwxiJQRoKmViKM6_B7-EGcQL1NAk2Bpcn9BMl4ONI26psCscgD4K2-9JE35QYeZ-MBtXAsu5jfjehNB9Rsz5oa/s1600-h/2.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5290572940876990610" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO2IpsuTGbpblfTIWErcU9e3pB9vjzMcfT8N7KCMGqEUZas-0GY_x5UZAwxiJQRoKmViKM6_B7-EGcQL1NAk2Bpcn9BMl4ONI26psCscgD4K2-9JE35QYeZ-MBtXAsu5jfjehNB9Rsz5oa/s400/2.gif" style="cursor: pointer; display: block; height: 77px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>You need to <span style="font-weight: bold;">REPLACE</span> following parts in original code with <span style="font-weight: bold;">ANY TEXT</span> you like:<br />
► replace <span style="font-weight: bold;"><data:newerPageTitle/></span> with, for example NEXT POST<br />
► replace <span style="font-weight: bold;"><data:olderPageTitle/></span> with, for example PREVIOUS POST<br />
► replace <span style="font-weight: bold;"><data:homeMsg/></span> (only the first one) with, for example HOMEPAGE<br />
<a aiotitle="click to expand" href="javascript:togglecomments('kodzaneweroldersatekstom')">Click here to see the complete code</a><br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="commenthidden" id="kodzaneweroldersatekstom" style="background-color: #fce5cd;">
<div class="codeview">
<b:includable id='nextprev'><br />
<div class='blog-pager' id='blog-pager'><br />
<b:if cond='data:newerPageUrl'><br />
<span id='blog-pager-newer-link'><br />
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><span style="color: red;">NEXT POST</span></a><br />
</span><br />
</b:if><br />
<br />
<b:if cond='data:olderPageUrl'><br />
<span id='blog-pager-older-link'><br />
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><span style="color: red;">PREVIOUS POST</span></a><br />
</span><br />
</b:if><br />
<br />
<b:if cond='data:blog.homepageUrl != data:blog.url'><br />
<a class='home-link' expr:href='data:blog.homepageUrl'><span style="color: red;">HOMPAGE</span></a><br />
<b:else/><br />
<b:if cond='data:newerPageUrl'><br />
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a><br />
</b:if><br />
</b:if><br />
<br />
</div><br />
<div class='clear'/><br />
</b:includable><br />
</div>
</div>
<br />
<br />
<div style="text-align: center;">
<span style="color: #ffcc00;">◄</span><span style="font-weight: bold;">Placing icon/picture beside links</span><span style="color: #ffcc00;">►</span></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhP_FDqOUBB4G_-yTsrihPqHK5QAAStAKx3_jK-j-yRP2upOiXdTP-_iBDLd3RibGIVsm_4pqtDudnzjHwUpehPOCQejrrtR6YbsxuZDWhH9jKQ_I6MxaMvf2LE_lKVEBfW_zDDjfwnXU5/s1600-h/3.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5290572945785381730" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhP_FDqOUBB4G_-yTsrihPqHK5QAAStAKx3_jK-j-yRP2upOiXdTP-_iBDLd3RibGIVsm_4pqtDudnzjHwUpehPOCQejrrtR6YbsxuZDWhH9jKQ_I6MxaMvf2LE_lKVEBfW_zDDjfwnXU5/s400/3.gif" style="cursor: pointer; display: block; height: 77px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>You will have to INSERT the code for picture:<br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="codeview" style="background-color: #fce5cd;">
<div style="background-color: #fce5cd;">
<img src='<span style="color: #ffcc00;">http://i42.tinypic.com/zn4qic.jpg</span>'/><br />
</div>
</div>
...replace the part in <span style="color: #ffcc00;">orange</span> with URL of your hosted picture...<br />
...use small icons...<br />
<a aiotitle="click to expand" href="javascript:togglecomments('saslikicomsastrane')">Click here to see the complete code</a><br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="commenthidden" id="saslikicomsastrane" style="background-color: #fce5cd;">
<div class="codeview">
<b:includable id='nextprev'><br />
<div class='blog-pager' id='blog-pager'><br />
<b:if cond='data:newerPageUrl'><br />
<span id='blog-pager-newer-link'><br />
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><span style="color: red;"><img src='http://i42.tinypic.com/zn4qic.jpg'/></span><data:newerPageTitle/></a><br />
</span><br />
</b:if><br />
<br />
<b:if cond='data:olderPageUrl'><br />
<span id='blog-pager-older-link'><br />
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/><span style="color: red;"><img src='http://i40.tinypic.com/sfcox4.jpg'/></span></a><br />
</span><br />
</b:if><br />
<br />
<b:if cond='data:blog.homepageUrl != data:blog.url'><br />
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a><br />
<b:else/><br />
<b:if cond='data:newerPageUrl'><br />
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a><br />
</b:if><br />
</b:if><br />
<br />
</div><br />
<div class='clear'/><br />
</b:includable></div>
</div>
<div style="background-color: #fce5cd;">
<br /></div>
<br />
<br />
<div style="text-align: center;">
<span style="color: #ffcc00;">◄</span><span style="font-weight: bold;">Picture/image INSTEAD of links</span><span style="color: #ffcc00;">►</span></div>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYwt8QrSuIVkxZ9JTXp-t8cJMW6c-8v0j7eeyrFLl6A4iC3irVPVvaKbU7NzJKcHSJ7oEB2Z2QNA62fwZM-GFsNbxxDZKCIbVtonyOvp6d771CUnop2hDnlDd7LjlCv_34fr4NcqDHqI4/s1600-h/4.gif"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5290572950338221346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMYwt8QrSuIVkxZ9JTXp-t8cJMW6c-8v0j7eeyrFLl6A4iC3irVPVvaKbU7NzJKcHSJ7oEB2Z2QNA62fwZM-GFsNbxxDZKCIbVtonyOvp6d771CUnop2hDnlDd7LjlCv_34fr4NcqDHqI4/s400/4.gif" style="cursor: pointer; display: block; height: 77px; margin: 0px auto 10px; text-align: center; width: 400px;" /></a>This one is my favorite! You can place any kind of picture you want! All you have to do is use this code for the pic:<br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="codeview" style="background-color: #fce5cd;">
<img src='<span style="color: #ff99ff;">URL ADDRESS</span>'/></div>
<div style="background-color: #fce5cd;">
<br /></div>
...just replace the part in <span style="color: #ff99ff;">pink</span>, with the URL of your hosted picture...<br />
...and in code, REPLACE the original link code for text with picture code:<br />
► replace <span style="font-weight: bold;"><data:newerPageTitle/></span> with the pic for newer (next) posts<br />
► replace <span style="font-weight: bold;"><data:olderPageTitle/></span> with the pic for older (previous) posts<br />
► replace <span style="font-weight: bold;"><data:homeMsg/></span> (only the first one) with the pic for homepage...<br />
<a aiotitle="click to expand" href="javascript:togglecomments('savelikimslikama')">Click here to see the complete code</a><br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="commenthidden" id="savelikimslikama" style="background-color: #fce5cd;">
<div class="codeview">
<b:includable id='nextprev'><br />
<div class='blog-pager' id='blog-pager'><br />
<b:if cond='data:newerPageUrl'><br />
<span id='blog-pager-newer-link'><br />
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><span style="color: red;"><img src='URL ADDRESS'/></span></a><br />
</span><br />
</b:if><br />
<br />
<b:if cond='data:olderPageUrl'><br />
<span id='blog-pager-older-link'><br />
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><span style="color: red;"><img src='URL ADDRESS'/></span></a><br />
</span><br />
</b:if><br />
<br />
<b:if cond='data:blog.homepageUrl != data:blog.url'><br />
<a class='home-link' expr:href='data:blog.homepageUrl'><span style="color: red;"><img src='URL ADDRESS'/></span></a><br />
<b:else/><br />
<b:if cond='data:newerPageUrl'><br />
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a><br />
</b:if><br />
</b:if><br />
<br />
</div><br />
<div class='clear'/><br />
</b:includable><br />
</div>
</div>
<br />
<br />
That's about it....Oh yes, one more thing:<br />
<br />
<div style="text-align: center;">
<span style="color: #ffcc00;">◄</span><span style="font-weight: bold;">Switch places of the links</span><span style="color: #ffcc00;">►</span></div>
<br />
If you find the <span style="font-size: 130%; font-weight: bold;">position</span> of Newer/Older post awkward (I do), you can <span style="font-size: 130%;">switch their places</span> easily. Making <span style="font-style: italic;">Newer</span> posts appear on the RIGHT side, and <span style="font-style: italic;">Older</span> posts on the LEFT side (like a book). To do this, go to LAYOUT ► EDIT HTML, and find the following part in code (CSS style):<br />
<div style="background-color: #fce5cd;">
<br /></div>
<div class="codeview" style="background-color: #fce5cd;">
#blog-pager-newer-link {<br />
float: <span style="color: #ff99ff;">$startSide</span>;<br />
}<br />
<br />
#blog-pager-older-link {<br />
float: $endSide;<br />
}</div>
<div style="background-color: #fce5cd;">
...just switch the float style, so it will look like this:</div>
<div class="codeview" style="background-color: #fce5cd;">
#blog-pager-newer-link {<br />
float: $endSide;<br />
}<br />
<br />
#blog-pager-older-link {<br />
float: <span style="color: #ff99ff;">$startSide</span>;<br />
}<br />
</div>
<br />
...Ok, this is really it now....be creative, you can do whatever you imagine...<br />
<br />
If you need help, or have some ideas, ask, share...<br />
<br />
Smile!Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-32431581961433399252012-06-15T09:55:00.000-07:002012-06-15T09:55:58.627-07:007 ขั้นตอนง่ายๆ ที่จะทำให้ Search Engine Optimization หลงรักเว็บคุณ<h1>
7 ขั้นตอนง่ายๆ ที่จะทำให้ Search Engine Optimization หลงรักเว็บคุณ</h1>
คนถามเข้ามามากมายว่า "ทำอย่างไร ให้ Search Engine มองเห็นเว็บผมครับ?" หรือ บางคนก็ถามว่า "ทำอย่างไร ให้ Search Engine เข้าเว็บเราบ่อยๆคะ? ถึงขนาดมาทุกวันได้ยิ่งดี" บทความนี้จะไม่แค่ทำให้ Search Engine เข้าเว็บคุณบ่อยๆ แต่จะทำให้ Search Engine หลงรักเว็บคุณอย่างหัวปักหัวปำเลยทีเดียวผมจะเปรียบเทียบเหมือนกับเว็บคุณฝึกวิทยายุทธนะครับ ขั้นแรกก็ง่ายๆ ทานอาหารบำรุงร่างกายเว็บของคุณ ให้อิ่มหนำสำราญเสียก่อน โดยการ มี Link มาหาเว็บเราอย่างน้อย 1 Link (จากเว็บที่ google เห็นแล้ว) วิธีทำก็ง่ายๆ<br />
<ol>
<li>Submit Directory (Dmoz.org, sanook, pantip, thaiall ฯลฯ</li>
<li>ขอแลก Link (ทำหน้าแลก Link โดยเฉพาะ จะดีมากต่อไปต้องทำให้ลมปราณในเว็บแข็งแกร่ง ด้วยการทำ Link Structure ภายในเว็บเราให้ดี นั่นก็คือ ทำให้ Search Engine (SE) เดินไปไหนมาไหนภายในเว็บเราได้สะดวก มีวิธีการดังนี้</li>
<li>ทำให้ Link ภายในเว็บเชื่อมหากันได้ (ในสายตาของ SE) วิธีที่ชัวร์ที่สุด คือ Link ด้วย Text ธรรมดา ( Image Link, Flash Link, Image Map, Javascript SE ไม่ค่อยชอบถึงขั้นเกลียด เรียงจากน้อยไปมาก</li>
<li>ถ้าเชื่อมกันไม่ได้ เพราะติดที่ Design ให้ทำหน้า Sitemap ขึ้นมาแล้ว Link ด้วย Text Link ธรรมดาก็พอครับต่อไปเป็นการฝึกวิทยายุทธครับ</li>
<li>ใส่ Tag Title แต่ละหัวหลักของหน้านั้นๆ ถ้าหน้านั้นกล่าวถึงเรื่องอะไร ก็ใส่หัวข้อนั้นลง Title</li>
<li>ต่อเนื่องจาก Tag Title ก็คือ ใส่ Meta Tag Description ด้วยคำอธิบายหัวข้อหลักในหน้านั้น ถ้าจะให้ดีให้นำมาจากข้อความที่อยู่แล้วในหน้านั้นครับ ส่วน Meta Tag Keyword ไม่จำเป็นเท่าไหร่ครับถ้าเป็น Programming ให้ระวังเรื่อง อักขระพิเศษ หรือ การปัดบรรทัดด้วย แก้ง่ายๆ โดยใส่ function (PHP) trim(), strip_tags, htmlspecialchars หรือ preg_replace เป็นต้นต่อไปเป็นการทบทวนวิทยายุทธอยู่เสมอ นั่นคือการ</li>
<li>ทำเนื้อหา, เพิ่มหน้าให้เว็บคุณเรื่อยๆ ยิ่งเยอะยิ่งดี พยายามเพิ่มเนื้อหาบ่อยๆ พอเพิ่มทีก็กลับไปทำข้อ 3 ถึงข้อ 6 ทีหลักๆ ก็มีแค่นี้แหละครับ (เรียกง่ายๆ ว่านี่คือการ Thai SEO เบื้องต้น) ส่วนเรื่องการ Submit SE ถ้าทำให้ครบ 7 ข้อนี้ก็ไม่จำเป็นแล้วครับ แรกๆ Search Engine จะเริ่มเมียงๆเว็บคุณ จากนั้นก็จะมาถี่ขึ้นๆ ตอนหลัง เว็บคุณมีร่างกายแข็งแกร่ง บึกบึน มีวิทยายุทธสูงส่งแล้วละก็ สาวๆ Search Engine ทั้งหลายจะมารุมตอมเว็บคุณ จนหัวกระได (เว็บ) ไม่แห้ง สุดท้าย, ไม่นาน Search Engine จะหลงรักเว็บคุณเอง</li>
</ol>
ทั้งนี้ทั้งนั้น ต้องให้เวลาเป็นเครื่องพิสูจน์รักแท้ด้วยนะครับ ถ้าคุณทำบ่อยๆ สม่ำเสมอ ความรักของ Search Engine กับเว็บคุณก็จะยั่งยืน ตราบเท่าที่คุณยังทำตามวิธี 7 ข้อนี้ครับAnonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0tag:blogger.com,1999:blog-849479311437999656.post-39257454209426574822012-06-15T09:07:00.003-07:002012-06-15T09:08:49.309-07:00SEO (Search Engine Optimization)<h1>
SEO (Search Engine Optimization)</h1>
<b>ขั้นตอนการทำ SEO</b> ขั้นที่ 1 วิเคราะห์คู่แข่งและเลือกคีย์เวิร์ด ก่อนที่จะลงในเนื้อหา ขั้นตอนนี้ ผมจะพูดถึงเรื่อง SEO (Search Engine Optimization) กันก่อนนะครับ เผื่อมีบางคนหลงทางมาเจอ จะได้รู้ว่า SEO มันคืออะไร สำคัญยังไง ทำไมต้องทำ SEO ทำไมมีคนกล่าวถึงกันมากเหลือเกิน (ในกลุ่มเว็บมาสเตอร์และคนที่เป็นเจ้าของเว็บไซต์ต่างๆ) ก่อนอื่น ผมขอออกตัวก่อนนะครับว่า ผมไม่ได้เป็นเทพจุติจากที่ไหน แต่อาศัยว่ามีประสบการณ์ในการทำ SEO มาพอสมควร นอกจากนี้ ก็ยังได้ถ่ายทอดให้น้องๆ อีกหลายคนทำตาม และก็ประสบความสำเร็จมาแล้ว แต่ทั้งนี้ ก็ขึ้นอยู่กับความขยันของแต่ละคนอีกหล่ะครับ SEO มันไม่ได้เป็นกฏตายตัว (เราไม่ใช่กูเกิ้ล เอ็มเอสเอ็น หรือ ยาฮูนี่ครับ) มันมีการเปลี่ยนแปลงตลอดเวลา ใครขยันหาข้อมูล รู้จักสังเกต นำมาปรับแต่งก็ได้เปรียบหล่ะครับ<br />
<br />
<b>SEO คืออะไร SEO (เอสอีโอ)</b> มาจากคำเต็มๆ ว่า Search Engine Optimization ความหมายแบบบ้านๆ ลูกทุ่งๆ ก็คือ การปรับแต่งเว็บไซต์ และกระบวนการต่างๆ ของเว็บไซต์ตั้งแต่การออกแบบ เขียนโปรแกรม และการโปรโมทเว็บ เพื่อให้ติดอันดับต้นๆ ของ Search Engine (เครื่องมือค้นหาเว็บไซต์ต่างๆ เช่น Google, MSN, Yahoo, AOL เป็นต้น)<br />
<br />
<b>SEO สำคัญยังไง อินเตอร์เน็ตในยุคปัจจุบันนี้</b> คนส่วนใหญ่ใช้ Search Engine ในการค้นหาข้อมูล แทนที่จะต้องพิมพ์ URL (Uniform Resource Locator) ก็ใช้ Keyword (คำค้น) ป้อนลงไปใน Search Engine Box ต่างๆ ก็จะค้นหาสิ่งที่ตัวเองต้องการได้อย่างง่ายดาย และตรงประเด็น มีให้เลือกเปรียบเทียบอีกหลายๆ แห่ง สำหรับเรื่องๆ นั้น และเมื่อค้นพบแล้ว ก็จะมีการแสดงผลออกมาหลายๆ หน้า หลายๆ เว็บไซต์ เว็บที่ถูกแสดงเป็นอันดับที่ 1 2 3 หรือที่แสดงผลในหน้าแรก ก็จะถูกคลิกเข้าไปดูข้อมูลมากที่สุด ด้วยเหตุนี้เอง เว็บไซต์ต่างๆ ย่อมต้องการให้เว็บตัวเองขึ้นอันดับ 1 ของ Keyword นั้นๆ เผื่อผลประโยชน์หลายๆ ด้านเช่น ขายสินค้า โฆษณา หรือโปรโมทร้านค้า บริษัทของตัวเอง ทำให้ได้เปรียบคู่แข่ง<br />
<ol>
<li>ทำให้เว็บของเราติดอันดับต้นๆ ในการแสดงผลงการค้นหา</li>
<li>การเขียน Title ที่ดี Keyword Intrend ช่วยทำให้สะดุดตา แม้อันดับต่ำกว่า ก็มีสิทธิ์ถูกคลิกมากกว่า</li>
<li>ทำให้เว็บเราถูกหลักของ W3C ซึ่งเป็นมาตรฐานของภาษาที่ใช้เขียนเว็บ ทำให้ดูสละสลวยเมื่อ Search Engine มาเจอก็เก็บข้อมูลต่างๆ ได้ง่าย</li>
<li>เมื่อติดอันดับต้นๆ ทำให้ขายสินค้าได้ โฆษณาเข้ามา เพราะมีทราฟิก</li>
<li>ติด Adsense ก็มีโอกาสที่จะได้รับเงินค่าโฆษณาที่สูงด้วย เพราะมีทราฟิกก็มีโอกาส</li>
</ol>Anonymoushttp://www.blogger.com/profile/01038023160353134351noreply@blogger.com0