Get Weather Or System Info On Your Desktop With These 2 Conky Configurations

<div style="text-align: justify;">There are two Conky configurations I've been wanting to write about for a while, but I didn't have the time to do it, until today, so here it is: the first one has been created by <a href="http://satya164.deviantart.com/">Satya</a>, it's called Conky Google Now and is very easy to set up while the second one, created by Pressian, is more advanced and requires some experience with Conky to set it up.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;"><i><a href="http://conky.sourceforge.net/">Conky</a> is a lightweight, highly configurable system monitor tool which can display the information on your desktop, in different shapes and forms.</i></div><br /><a name='more'></a><div style="text-align: justify;">Before proceeding, make sure you've firstly installed Conky. In Ubuntu, <b>install it using the following command:</b></div><pre class="linux-code"><code>sudo apt-get install conky-all</code></pre><br /><br /><h2>Conky Google Now</h2><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP215QlF1W3fEEMs1z60sIushabM9Eib2XXqKLgNMLnr7fV183EX4CE0ZUZAv1i8feJpJ7kLeJUWEirA_iZ6oTsZIkeOSIMSRseTklhgnWz4Y9ooApeKTihoUyhWLndZWKcKou7Js7rUiQ/s1600/conky-google-now_2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP215QlF1W3fEEMs1z60sIushabM9Eib2XXqKLgNMLnr7fV183EX4CE0ZUZAv1i8feJpJ7kLeJUWEirA_iZ6oTsZIkeOSIMSRseTklhgnWz4Y9ooApeKTihoUyhWLndZWKcKou7Js7rUiQ/s400/conky-google-now_2.png" width="400" /></a></div><br /><br /><b><a href="http://satya164.deviantart.com/art/Conky-Google-Now-366545753">Download Conky Google Now</a></b><br /><br /><div style="text-align: justify;">Conky Google Now is a Conky configuration created by Satya which tries to imitate Google Now. This should be very easy to use as there isn't much to configure: you only need to get the Yahoo Weather ID for your city and enter it in the Conky configuration file.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">This Conky config displays the current weather, a forecast for the next two days, wind speed as well as the network up / down speed and total sent / received data.</div><br /><div style="text-align: justify;">To use Conky Google Now, download the configuration files from <a href="http://satya164.deviantart.com/art/Conky-Google-Now-366545753">Deviant Art</a> (link above) - there's a download link on the right.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Now, install the Open Sans (Light) font which is used by Conky Google Now. Download the font from <a href="http://www.fontsquirrel.com/fonts/open-sans">HERE</a>, extract the archive and place the font(s) under ~/.fonts (if the folder doesn't exist, create it), then update the font cache using the following command:</div><pre class="linux-code"><code>sudo fc-cache -fv</code></pre><div style="text-align: justify;"><br /></div><div style="text-align: justify;">The next step is to extract the downloaded archive, then press CTRL + H inside the extracted folder to be able to see all the files (all are hidden except the README) and copy the ".conky-google-now" and ".conkyrc" in your home folder. If you want to use the dark Conky Google Now, copy ".conkyrc-dark" in your home folder instead and rename it to ".conkyrc".</div><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="http://img.netupd8.com/conky-google-now-dark.png" style="margin-left: auto; margin-right: auto;"><img alt="Conky Google Now Dark" src="http://img.netupd8.com/conky-google-now-dark_thumb.png" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Conky Google Now dark</td></tr></tbody></table><br />Now go to <a href="http://weather.yahoo.com/">weather.yahoo.com</a>, search for your city (under "Enter city or zip code"), and once you reach your city weather page, note down the numbers (this is the WOEID) from the end of the URL, e.g., in my case, the URL is: <i>"http://weather.yahoo.com/romania/bucuresti/bucharest-868274/</i>" so the WOEID is "868274". Now open the <i>~/.conkyrc</i> file, search for "2294941" (without the quotes) and replace it with your WOEID, then save the file.<br /><br />Now, to run conky, simply open a terminal or type ALT + F2 and enter: "conky".<br /><br /><br /><br /><h2>Conky by Pressian</h2><br /><div style="text-align: center;"><a href="http://img.netupd8.com/conky-pressian.png"><img alt="Conky y Pressian" src="http://img.netupd8.com/conky-pressian_thumb.png" /></a></div><br /><br /><b><a href="http://webupd8.googlecode.com/files/conky%20by%20Pressian-0.1.tar.gz">Download Conky by Pressian</a></b><br /><br /><div style="text-align: justify;">The second Conky configuration has been created by WebUpd8 reader Pressian and take a bit more to set up than Conky Google Now, but it also displays more information. The configuration is especially created for laptops that come with Nvidia Optimus technology and 4 CPU cores so if you don't have this system configuration, you'll need to tweak this Conky setup which may need some experience with Conky. </div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Please note that this Conky configuration uses transparency, so it won't work properly in Unity (if you know a way to get it to display properly, without shadows, etc., let us know in the comments, but I've already tried basically everything and at least in Ubuntu 13.04, I can't get it to display properly in Unity, but it works great in GNOME Shell for instance).</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Information displayed by this Conky configuration includes: system info (uptime, system load, battery status, processor and video card), top 5 processes, CPU stats (frequency, usage, temperature), optimized for 4 cores so if you have less or more, you'll need to tweak the configuration file, memory stats (RAM used and free, HDD used as well as the HDD temperature, network stats (up/down speed, local and public IP and Wifi bitrate and signal strength if available, as well as the GPU stats for laptops using the Optimus technology (Nvidia driver, Nvidia GPU state as well as the temperature and frequency but only when the Nvidia GPU is in use).</div><br /><br /><div style="text-align: justify;">To use it, download the archive from <a href="http://webupd8.googlecode.com/files/conky%20by%20Pressian-0.1.tar.gz">HERE</a>, extract it and then press CTRL + H to see the Conky configuration files (they are hidden by default). Then, copy the ".conky" and ".fonts" folders as well as the ".conkyrc" file into your home folder.</div><br />Then, you need to update the font cache:<br /><pre class="linux-code"><code>sudo fc-cache -fv</code></pre><br /><div style="text-align: justify;">Since this Conky configuration displays a lot of information, there are also some dependencies you need to install:<i> lm-sensors, hddtemp, curl </i>and <i>bumblebee</i>. In Ubuntu, install the first three using the following command:</div><pre class="linux-code"><code>sudo apt-get install lm-sensors hddtemp curl</code></pre><br />Then, set up lm-sensors using the following command:<br /><pre class="linux-code"><code>sudo sensors-detect</code></pre><br /><div style="text-align: justify;">And answer "yes" to everything, then run the following command to load the sensors modules:</div><br />- Ubuntu 13.04 and newer:<br /><pre class="linux-code"><code>sudo service kmod start</code></pre>- Ubuntu versions older than 13.04:<br /><pre class="linux-code"><code>sudo service module-init-tools start</code></pre><br /><div style="text-align: justify;">For <i>hddtemp</i>, also run this command (might be required for some Linux distributions / Ubuntu versions):</div><pre class="linux-code"><code>sudo chmod u+s /usr/sbin/hddtemp</code></pre><br /><div style="text-align: justify;">For how to install Bumblebee (specific for those with Optimus laptops, see <a href="http://www.webupd8.org/2013/04/bumblebee-321-released-with-ubuntu-1304.html" title="Bumblebee 3.2.1 Released With Ubuntu 13.04 Fixes, New Options">THIS</a> article.</div><div style="text-align: justify;"><br /></div><div style="text-align: justify;">Now, to run Conky, simply press ALT + F2 and enter: "conky".</div><br /><br /><br /><h2>Adding Conky to startup</h2><br /><div style="text-align: justify;">If you want Conky to start automatically when you log in, you must add it to the startup applications and for this we'll need to use a script (we need to start it with a delay so it doesn't show up on top) so create a file somewhere, e.g.: in a folder called "scripts" in your home directory - let's call the file "start_conky". And in this file, paste this:</div><pre class="source-code"><code>#! /bin/bash<br />sleep 20<br />conky</code></pre><div style="text-align: justify;">Then save the file and make it executable. If you've followed our exact instructions and the file is called "start_conky" and is located in the "scripts" folder in your home directory, you can make it executable using the following command:</div><pre class="linux-code"><code>chmod +x ~/scripts/start_conky</code></pre><br /><div style="text-align: justify;">Now open the Startup Applications dialog, click "Add", under "Name" enter "Conky" and under "Command", select "Browse" and here, select the "start_conky" file, then click "Add" and you're done. </div><br /><b>For more Conky configurations, browse our <a href="http://www.webupd8.org/search/label/conky?max-results=10">Conky tag</a>.</b>

Get Weather Or System Info On Your Desktop With These 2 Conky Configurations

There are two Conky configurations I've been wanting to write about for a while, but I didn't have the time to do it, until today, s...

+ Read more »

How To Add Disqus Comment System in Blogger Blog & Website?

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWgH71usozEO54jS1iS1EMPTsZBBozxIHl4YeaTzQ7cKXLzFEQnyWj1fwhpp-rZ3LKVa8gBRpMCOJhJcTxrswjn_hLQsXUio9lRFPBeZwO_8bqC-Xjtoa7d2QfCOkhKzz7p390pvLCJ14/s1600/Discover+Your+community.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Disqus is a comments platform" border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWgH71usozEO54jS1iS1EMPTsZBBozxIHl4YeaTzQ7cKXLzFEQnyWj1fwhpp-rZ3LKVa8gBRpMCOJhJcTxrswjn_hLQsXUio9lRFPBeZwO_8bqC-Xjtoa7d2QfCOkhKzz7p390pvLCJ14/s320/Discover+Your+community.jpg" title="Disqus is a comments platform" width="320" /></a></div><b>Disqus</b> is the new comment management system, most of bloggers and website owners used mostly.it is currently serving over 750,000 websites, In this article i am going to tell you about how to add <a href="http://ichibikarin.blogspot.com/2013/04/how-to-add-disqus-comment-system-in.html" target="_blank">Disqus</a> comments system with a few fast steps, you'll upgrade your recent <a href="http://ichibikarin.blogspot.com/search/label/Comments" target="_blank">comment</a> system with a new way to interact your guests.<br /><a name='more'></a><br /><br />Normally you don’t need to add the other comments system, because each website platform has their own discussion platform.But they're recent system. And if you're very little uninterested in blogger’s built-in system then you'll add Disqus comment system. This comment system can create your blog more professional. most important factor is, If you add disqus then comments are indexable by search engine therefore it's <a href="http://ichibikarin.blogspot.com/search/label/SEO" target="_blank">SEO</a> Friendly. this system, not just the for blogger you can also add this system to <a href="http://ichibikarin.blogspot.com/search/label/Blogger" target="_blank">Wordpress</a>, Blogger, Tumblr, Universal Code,  Squarespace, TypePad, MovableType, Drupal and Joomla.<br /><br /><b>Why should we use.?</b><br />There are many good features with Disqus comment system after we comparison it with <a href="http://ichibikarin.blogspot.com/search/label/Blogger" target="_blank">Blogger</a> default comment system.<br /><div style="text-align: left;"></div><ul style="text-align: left;"><li>Realtime comment system</li><li>Notification and reply system</li><li>Inline media embedding</li><li>Mobile commenting</li><li>Social integration</li><li>The Community Box</li><li>Liking and sharing</li><li>Moderation tools</li><li>Spam-Be-Gone</li><li>Mobile apps</li><li>Blacklists and whitelists</li><li>Import and export</li><li>International languages</li><li>SEO-friendly and local sync</li><li>Theme customization</li><li>Tweets and reactions</li><li>Profile management</li><li>Activity streams</li><li>Connected communities</li></ul><b>Follow the steps.</b><br /><span style="font-family: inherit;"><b>1.</b> At first you need to <span style="background-color: white; color: #464646; line-height: 25.1875px; text-align: justify;">register a free account for your website</span> on Disqus</span> website. Go to <b><a href="http://disqus.com/" rel="nofollow" target="_blank">disqus.com</a></b> and click "<b>Get this on your site"</b> fill registration form, Give your Site URL, Site name, Site Short-name  Create your Disqus account by giving username, password and email address.<span style="background-color: #cccccc;">(Do not forget to verify your identity though email verification)</span> Then click Continue.<br /><div style="text-align: left;"><br /></div><div style="text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdE20kDKKJpdrOBJ3HBtCbCwHk_RbZC73nTDEN5eS7yQyAm0FIudHlCdyQUnu2b6yiJ9ald-EDEYHsg3cIFs4mDDYr1t_nesgOnyJtovd0Jt7Xd5OZ62iPWH3GkU2jmkI9qiY4qftnmMo/s1600/DISQUS+-+Register+site.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="DISQUS - Register site" border="0" height="419" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdE20kDKKJpdrOBJ3HBtCbCwHk_RbZC73nTDEN5eS7yQyAm0FIudHlCdyQUnu2b6yiJ9ald-EDEYHsg3cIFs4mDDYr1t_nesgOnyJtovd0Jt7Xd5OZ62iPWH3GkU2jmkI9qiY4qftnmMo/s640/DISQUS+-+Register+site.png" title="DISQUS - Register site" width="640" /></a></div>2. After pressing the Continue button, a new window will appear, which will ask you to select a Platform. Just Select "Your Platform(Blogger, WordPress)" from the list and proceed to the next step.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUybDECxhC84Q6SpOjzANK4fMBOTmTCyKHGSHT0dJpZ607a5DekQI7ypuyggbM4sqI2RzgHdQaP3DI6HEYeoW70ckzHcf2vQU9tsmrDImAN5b7A6UvWf0ggil7uAPTNHf4vNb44V1z1ik/s1600/Choose+a+platform+-+Settings+-+DISQUS.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Choose a platform - Settings - DISQUS" border="0" height="542" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUybDECxhC84Q6SpOjzANK4fMBOTmTCyKHGSHT0dJpZ607a5DekQI7ypuyggbM4sqI2RzgHdQaP3DI6HEYeoW70ckzHcf2vQU9tsmrDImAN5b7A6UvWf0ggil7uAPTNHf4vNb44V1z1ik/s640/Choose+a+platform+-+Settings+-+DISQUS.png" title="Choose a platform - Settings - DISQUS" width="640" /></a></div><br />3. Next click “Add disqusname to my Platform (WordPress,blogger, type-pad & other) site”<br />follow given instructions & continue all steps<br /><br />4. Your comments system is ready and look like below screen short..<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL-gLCD3uD7r7o_GnT737vPMQ7uyu6AsPsVmL7wO4Hzbl0-sDCKsBBceT-P4Q5fLL1qbnlLTuX4hYcRLLd-8K0_75yFWEWtFgmYimdxJ2K0npzg7E45RmqHHLpvqyYGnus4r1nD86rYAU/s1600/Blogger+Known+DISQUS+comments+system.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Blogger Known DISQUS comments system" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL-gLCD3uD7r7o_GnT737vPMQ7uyu6AsPsVmL7wO4Hzbl0-sDCKsBBceT-P4Q5fLL1qbnlLTuX4hYcRLLd-8K0_75yFWEWtFgmYimdxJ2K0npzg7E45RmqHHLpvqyYGnus4r1nD86rYAU/s640/Blogger+Known+DISQUS+comments+system.png" title="Blogger Known DISQUS comments system" width="640" /></a></div><br /></div></div>

How To Add Disqus Comment System in Blogger Blog & Website?

Disqus is the new comment management system, most of bloggers and website owners used mostly.it is currently serving over 750,000 websites,...

+ Read more »

How to Add Facebook Like Box to Your Website/Blog

<div dir="ltr" style="text-align: left;" trbidi="on"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf9cP05lZNSAGyBOqF5jpPhDgfe7KwkvYSNwem3MoonL2OGVo3pDf3oAcMEkcCTizSSGTh-RQP_p4CMm4pJREa4Nd1C0trwguM1U5Zs7XQUhRcyhwMGV9gzaw4-gIDA2_qif2u5EcG5dM/s1600/How-to-add-Facebook-Like-Box.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Add Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf9cP05lZNSAGyBOqF5jpPhDgfe7KwkvYSNwem3MoonL2OGVo3pDf3oAcMEkcCTizSSGTh-RQP_p4CMm4pJREa4Nd1C0trwguM1U5Zs7XQUhRcyhwMGV9gzaw4-gIDA2_qif2u5EcG5dM/s1600/How-to-add-Facebook-Like-Box.jpg" title="Add Facebook Like Box" /></a></div>The previous troutal we have learned <a href="http://ichibikarin.blogspot.com/2013/03/how-to-create-facebook-page-for.html" target="_blank">how to create facebook page for website/blog and business</a> and in this post we will learn how to add Facebook like box or Facebook button to website/blog.<br /><br />A <a href="http://ichibikarin.blogspot.com/search/label/Facebook" target="_blank">Facebook</a> “Like Box” on your web site is a good way to increase the number of people who “like” your Facebook Fan page. When we add a Facebook box into our site our fan follow easily our site through Facebook and easily get all update via Facebook. Let’s see how we can add the <a href="http://ichibikarin.blogspot.com/2013/04/how-to-add-facebook-like-box-to-your.html" target="_blank">Facebook Like Box</a> (the newer version of Fan Box) to a website or blog in a few minutes.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3wffQaLoNq6Dwh2AdCb3EGSmPGAN09qSa7G05BJa5BGqlQWbsN8glD3KR_erctn7BC7aKf1oatRFtjkKslcWQmRglSlLkQaehUc0Ju9jRDYWfCCEdykP8YalZK9yOY97S_JgIBU3OTjY/s1600/How-to-add-Facebook-Like-Box.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Facebook Like Box" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3wffQaLoNq6Dwh2AdCb3EGSmPGAN09qSa7G05BJa5BGqlQWbsN8glD3KR_erctn7BC7aKf1oatRFtjkKslcWQmRglSlLkQaehUc0Ju9jRDYWfCCEdykP8YalZK9yOY97S_JgIBU3OTjY/s1600/How-to-add-Facebook-Like-Box.jpg" title="Facebook Like Box" /></a></div><br /><br /><b>Note: If you probably did not create Facebook fan page for your website then please read our previous post <a href="http://ichibikarin.blogspot.com/2013/03/how-to-create-facebook-page-for.html" target="_blank">how to create Facebook page for website or blog</a>.</b><br /><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both; text-align: center;"></div><br />Follow steps to add Facebook like box to your website/blog.<br /><br /><ol style="text-align: left;"><li>Go the <a href="https://developers.facebook.com/docs/reference/plugins/like-box/" rel="nofollow" target="_blank">Like Box Social Plugin Facebook page</a></li><li>Enter the web page address or URL of your Fan page in in the first box; for example: http://www.facebook.com/bloggerknown</li><li>Customize the width, color and what things you would like to appear in the Like Box that will be shown on your page</li><li>Click the Get Code button and copy the text in the iframe text box (Do not copy the XFBML text box)</li><li>put this code is the place you want to show , </li><li>Blogger > Go to Blog Dashboard > Layout > <a href="http://ichibikarin.blogspot.com/2013/02/how-to-add-gadget-widgets-to-your-blog.html" target="_blank">Add Gadget</a> > Edit <a href="http://ichibikarin.blogspot.com/p/html.html" target="_blank">HTML</a> and past code in html box.</li></ol><div>If you want to change the design options simply repeat all the steps above. If you have any problem then please use comment box for feedback and other suggest.</div></div>

How to Add Facebook Like Box to Your Website/Blog

The previous troutal we have learned how to create facebook page for website/blog and business  and in this post we will learn how to add Fa...

+ Read more »

Changing Blog Page By the Page Number Navigation

<div dir="ltr" style="text-align: left;" trbidi="on">In general, the navigation to move pages in blogspot typically use a link with the text "Older Posts (old post)" and "Newer Posts (new post)". Differences with wordpress that can navigate shaped figures that can make it easier to skip a few pages to post that old and new. This tutorial I will explain how to change the link "Older Posts (long post)" and "Newer Posts (new post)" a figure as shown below:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw5mjXZnUMA-sRJeCEFIn4M7EJo00V_v5uMjeETtBLzIbaKnzXfGb-O8-NDOSRH3984EJ_GrM-gMzQDKdJgsyrNRmMqTH39oVrbGu3ZWDwCO7NMddblHwIcOAv2MJmrmgeWrKoH_-Zzh8/s1600/numbered-page-navigation-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Page Number Navigation" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw5mjXZnUMA-sRJeCEFIn4M7EJo00V_v5uMjeETtBLzIbaKnzXfGb-O8-NDOSRH3984EJ_GrM-gMzQDKdJgsyrNRmMqTH39oVrbGu3ZWDwCO7NMddblHwIcOAv2MJmrmgeWrKoH_-Zzh8/s1600/numbered-page-navigation-for-blogger.png" title="Page Number Navigation" /></a></div><br />To make the "blog page" like the above way is quite easy, here are the steps:<br /><br /><br /><ol style="text-align: left;"><li>Go To Blogger > Design > Edit HTML</li><li>Back up your template</li><li>Search (Ctrl+F) for  ]]></b:skin></li></ol><div>Past below code above ]]></b:skin></div><div><br /></div><div><blockquote class="tr_bq">.showpageArea a {<br />text-decoration:underline;<br />}<br />.showpageNum a {<br />text-decoration:none;<br />border: 1px solid #cccccc;<br />margin:0 3px;<br />padding:3px;<br />}<br />.showpageNum a:hover {<br />border: 1px solid #cccccc;<br />background-color:#cccccc;<br />}<br />.showpagePoint {<br />color:#333;<br />text-decoration:none;<br />border: 1px solid #cccccc;<br />background: #cccccc;<br />margin:0 3px;<br />padding:3px;<br />}<br />.showpageOf {<br />text-decoration:none;<br />padding:3px;<br />margin: 0 3px 0 0;<br />}<br />.showpage a {<br />text-decoration:none;<br />border: 1px solid #cccccc;<br />padding:3px;<br />}<br />.showpage a:hover {<br />text-decoration:none;<br />}<br />.showpageNum a:link,.showpage a:link {<br />text-decoration:none;<br />color:#333333;<br />}</blockquote><br /> 4. Then look up the code </ body> and add the following code on it:<br /><br /><blockquote class="tr_bq"><!--Page Navigation Starts--><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'><script type='text/javascript'><br />var pageCount=<span style="background-color: yellow;">5</span>;<br />var displayPageNum=<span style="background-color: yellow;">5</span>;<br />var upPageWord =&#39;Previous&#39;;<br />var downPageWord =&#39;Next&#39;;<br /></script><br /><script src='https://bloggerknown.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/><br /></b:if> </b:if><br /><!--Page Navigation Ends --> </blockquote> 5. Click the preview first, if there is no error click save.<br /><br />Change page count <span style="background-color: yellow;">5</span> and display page Num <span style="background-color: yellow;">5</span><br /></div><br /><br /></div>

Changing Blog Page By the Page Number Navigation

In general, the navigation to move pages in blogspot typically use a link with the text "Older Posts (old post)" and "Newer P...

+ Read more »

Creating Navigation Transition Effect In Blog

<div dir="ltr" style="text-align: left;" trbidi="on">Today I will explain how to make the "Menu Navigation" very cool with transition effects. Transition effect is an effect where we set the time changes in the css tersebut.Berikut demo of "Menu Navigation" is.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI-9OvNqi93ux9k7DgMzyeKC869E9YpVKkAhuKuELz4XqwUEUtIgh8wXqNTJQ0t_tnzHlyhNfms8IKBabCzB-mD78QJ-zVFEXRu2fbMBbc2uV0BkzKbYXVvH-thb7TpD-dkVqVgkIyMbk/s1600/Creating+Navigation+Transition+Effect+In+Blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Navigation Menubar for blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI-9OvNqi93ux9k7DgMzyeKC869E9YpVKkAhuKuELz4XqwUEUtIgh8wXqNTJQ0t_tnzHlyhNfms8IKBabCzB-mD78QJ-zVFEXRu2fbMBbc2uV0BkzKbYXVvH-thb7TpD-dkVqVgkIyMbk/s1600/Creating+Navigation+Transition+Effect+In+Blog.jpg" title="Navigation Menubar for blogger" /></a></div><br /><br /><br /><div style="text-align: center;"><b><span style="font-size: large;"><a href="http://demo-ichibikarin.blogspot.com/2013/02/creating-navigation-transition-effect.html" rel="nofollow" target="_blank">Navigation Menu Transition Effects Demo</a></span></b></div><div style="text-align: center;"><br /></div><div style="text-align: left;"><br /><br /><ol style="text-align: left;"><li>Go To Blogger > Design > Edit HTML</li><li>Back up your template</li><li>Search (Ctrl+F) for   ]]></b:skin></li></ol><div>You simply add the following code above the code]]> </ b: skin></div><div><br /></div><br /></div><div style="text-align: left;"><br /><b> CSS Code:</b><br /><blockquote class="tr_bq"> /*URL: http://www.ichibikarin.blogspot.com/ */<br />@import url(http://fonts.googleapis.com/css?family=Dosis:400,700);<br />.navbar {<br /> font-family: 'Dosis', sans-serif;<br /> position:relative;<br /> display:table;<br /> float:none;<br /> list-style-type:none;<br /> padding:0;<br /> margin:20px auto 250px auto;<br />}<br />.navbar:before {<br /> position:absolute;<br /> display:block;<br /> content: "";<br /> z-index:-1;<br /> width:100%;<br /> height:18px;<br /> bottom:-9px;<br /> left:2px;<br /> background: -moz-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 75%);<br /> background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(0,0,0,0.7)), color-stop(75%,rgba(0,0,0,0)));<br /> background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);<br /> background: -o-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);<br /> background: -ms-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);<br /> background: radial-gradient(center, ellipse cover,  rgba(0,0,0,0.7) 0%,rgba(0,0,0,0) 75%);<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#00000000',GradientType=1 );<br /> opacity:.4;<br />}<br />.navbar:after {<br /> position:absolute;<br /> display:block;<br /> content: "";<br /> z-index:-1;<br /> width:100%;<br /> height:100%;<br /> top:0;<br /> left:0;<br /> -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);<br /> box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);<br />}<br />.navbar > li {<br /> position:relative;<br /> float:left;<br /> display:inline-block;<br /> list-style-type:none;<br /> text-align:center;<br /> margin:0;<br /> border-left:0;<br /> border:1px solid rgba(0,0,0,0.5);<br /> line-height:35px;<br /> -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);<br />    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25);<br /> -webkit-transition: all 300ms ease-in-out;<br /> -moz-transition: all 300ms ease-in-out;<br /> -ms-transition: all 300ms ease-in-out;<br /> -o-transition: all 300ms ease-in-out;<br /> transition: all 300ms ease-in-out;<br />}<br />.navbar.color1 > li {<br /> background:#ea7900;<br />}<br />.navbar.color2 > li {<br /> background:#336277;<br />}<br />.navbar.color3 > li {<br /> background:#3e781b;<br />}<br />.navbar.color4 > li {<br /> background:#ad2259;<br />}<br />.navbar.color5 > li {<br /> background:#b20a22;<br />}<br />.navbar > li:before {<br /> position:absolute;<br /> display:block;<br /> content: "";<br /> z-index:1;<br /> width:100%;<br /> height:100%;<br /> left:0;<br /> top:0;<br /> background: -moz-linear-gradient(top,  rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.16) 100%);<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.15)), color-stop(100%,rgba(0,0,0,0.16)));<br /> background: -webkit-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);<br /> background: -o-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);<br /> background: -ms-linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);<br /> background: linear-gradient(top,  rgba(255,255,255,0.15) 0%,rgba(0,0,0,0.16) 100%);<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26ffffff', endColorstr='#29000000',GradientType=0 );<br />}<br />.navbar > li:after {<br /> position:absolute;<br /> display:block;<br /> content:"";<br /> width:100%;<br /> height:100%;<br /> top:0;<br /> left:0;<br /> background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OERFQkEzRUJDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OERFQkEzRUNDNUM5MTFFMUE3NzBCMTZBMEExNEQ5NUQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4REVCQTNFOUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4REVCQTNFQUM1QzkxMUUxQTc3MEIxNkEwQTE0RDk1RCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiSp0pIAAAAySURBVHjaYmBgYOAHYmYGCADR/CDiDxDzQAW5gPgLlM3ACsQKUBqhBYjZkY3CMBMgwACvHQKnyUp+6gAAAABJRU5ErkJggg==");<br />}<br />.navbar > li.drpdown a > span{<br /> margin-right:30px;<br />}<br />.navbar > li.drpdown > a:after {<br /> position:absolute;<br /> content: "\0025bc";<br /> z-index:1;<br /> font-size:8px;<br /> top:0;<br /> right:10px;<br /> color:#fff;<br /> text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.8);<br />    filter: dropshadow(color=#000, offx=0, offy=-1);<br /> -webkit-transition: all 300ms ease-in-out;<br /> -moz-transition: all 300ms ease-in-out;<br /> -ms-transition: all 300ms ease-in-out;<br /> -o-transition: all 300ms ease-in-out;<br /> transition: all 300ms ease-in-out;<br />}<br />.navbar > li.drpdown a:hover:after,.navbar > li a:hover {<br /> color:#ccc;<br />}<br />.navbar > li.drpdown:hover .drpcontent {<br /> display:block;<br />}<br />.navbar > li:first-child {<br /> border-left:1px solid #1a1a1a;<br />}<br />.navbar > li:last-child {<br /> -webkit-box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25),inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);<br />    box-shadow: inset 1px 1px 0px 0px rgba(255, 255, 255, 0.25), inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25);<br />}<br />.navbar > li > a {<br /> position:relative;<br /> display:block;<br /> width:100%;<br /> text-decoration:none;<br /> font-size:12px;<br /> color:#fff;<br /> text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.4);<br />    filter: dropshadow(color=#000, offx=0, offy=-1);<br /> z-index:4;<br /> -webkit-transition: all 300ms ease-in-out;<br /> -moz-transition: all 300ms ease-in-out;<br /> -ms-transition: all 300ms ease-in-out;<br /> -o-transition: all 300ms ease-in-out;<br /> transition: all 300ms ease-in-out;<br />}<br />.navbar > li:hover {<br /> -webkit-box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35);<br /> box-shadow: inset 0px -2px 8px 0px rgba(0, 0, 0, 0.35);<br />}<br />.navbar > li > a > span {<br /> position:relative;<br /> font-weight:bold;<br /> margin:0 15px 0 0;<br />}<br />.navbar > li  .drpcontent {<br /> position:absolute;<br /> display:none;<br /> margin:0;<br /> padding:20px 0 0 0;<br /> z-index:5;<br /> top:36px;<br /> min-width:200%;<br /> float:none;<br /> list-style-type:none;<br /> border:1px solid #737373;<br /> border-top:0;<br /> -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);<br /> box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25),inset 0px 6px 4px -4px rgba(0, 0, 0, 0.5);<br /> -webkit-border-radius: 0px 0px 4px 4px;<br /> border-radius: 0px 0px 4px 4px;<br /> background: rgb(249,249,249);<br /> background: -moz-linear-gradient(-45deg,  rgba(249,249,249,1) 0%, rgba(229,229,229,1) 100%);<br /> background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(249,249,249,1)), color-stop(100%,rgba(229,229,229,1)));<br /> background: -webkit-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);<br /> background: -o-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);<br /> background: -ms-linear-gradient(-45deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);<br /> background: linear-gradient(135deg,  rgba(249,249,249,1) 0%,rgba(229,229,229,1) 100%);<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#e5e5e5',GradientType=1 );<br /> -webkit-transition: opacity 300ms ease-in-out;<br /> -moz-transition: opacity 300ms ease-in-out;<br /> -ms-transition: opacity 300ms ease-in-out;<br /> -o-transition: opacity 300ms ease-in-out;<br /> transition: opacity 300ms ease-in-out;<br />}<br />.navbar > li:not(:last-of-type) .drpcontent {<br /> left:-1px;<br />}<br />.navbar > li:last-child .drpcontent {<br /> right: -1px;<br />}<br />.drpcontent li {<br /> position:relative;<br /> text-align:left;<br /> border-bottom:1px solid rgba(0, 0, 0, 0.2);<br /> font-size:12px;<br /> line-height:35px;<br /> height:35px;<br /> font-weight:bold;<br /> -webkit-box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);<br /> box-shadow: inset 0px -1px 0px 0px rgba(255, 255, 255, 0.2);<br /> overflow:hidden;<br />}<br />.drpcontent li:before {<br /> position:absolute;<br /> display:block;<br /> content: "";<br /> width:100%;<br /> height:100%;<br /> top:-100%;<br /> left:0;<br /> background: #cecece;<br /> -webkit-transition: all 500ms ease-in-out;<br /> -moz-transition: all 500ms ease-in-out;<br /> -ms-transition: all 500ms ease-in-out;<br /> -o-transition: all 500ms ease-in-out;<br /> transition: all 500ms ease-in-out;<br /> opacity:0;<br />}<br />.drpcontent li:after {<br /> position:absolute;<br /> display:block;<br /> content: "\0025b6";<br /> height:20px;<br /> width:20px;<br /> top:0;<br /> left:6px;<br /> font-size:8px;<br /> -webkit-transition: all 500ms ease-in-out;<br /> -moz-transition: all 500ms ease-in-out;<br /> -ms-transition: all 500ms ease-in-out;<br /> -o-transition: all 500ms ease-in-out;<br /> transition: all 500ms ease-in-out;<br />}<br />.drpcontent li:hover:before {<br /> top:0;<br /> opacity:0.8;<br />}<br />.drpcontent li:hover:after {<br /> color:#fff;<br /> left:12px;<br />}<br />.drpcontent li:last-child:hover:before {<br /> -webkit-border-radius: 0px 0px 4px 4px;<br /> border-radius: 0px 0px 4px 4px;<br />}<br />.drpcontent li a {<br /> display:block;<br /> height:100%;<br /> width:100%;<br /> position:relative;<br /> color:#000;<br /> text-decoration:none;<br /> width:100%;<br /> padding-left:20px;<br /> -webkit-transition: all 500ms ease-in-out;<br /> -moz-transition: all 500ms ease-in-out;<br /> -ms-transition: all 500ms ease-in-out;<br /> -o-transition: all 500ms ease-in-out;<br /> transition: all 500ms ease-in-out;<br />}<br />.drpcontent li:hover a{<br /> color:#fff;<br /> padding-left:26px;<br />}<br />.drpcontent li:first-child {<br /> border-top:1px solid #a6a6a6;<br />}<br />.drpcontent li:last-child {<br /> border:0;<br /> -webkit-box-shadow:none;<br /> box-shadow:none;<br /> -webkit-border-radius: 0px 0px 4px 4px;<br /> border-radius: 0px 0px 4px 4px;<br />}<br />.icon20{<br /> position:relative;<br /> float:left;<br /> display:block;<br /> width:20px;<br /> height:20px;<br /> margin:6px 8px 0 8px;<br /> background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAoCAYAAAA16j4lAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3MiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NjJERkRDNTBDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjJERkRDNTFDNUQ0MTFFMUI3QjJDOTZFNDMzQ0IwMjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MkRGREM0RUM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo2MkRGREM0RkM1RDQxMUUxQjdCMkM5NkU0MzNDQjAyNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Psj8MzMAAA91SURBVHja7FxbbBTVHx4QL6DAcPXeXQpFDQhbH0iMie48+mBsQwghIXZrgiQi7pRbBcHdNYiChd1ykSAk2/KAD6IgPPFAdvHFx24fDGhEphBqBbHTchG80P/3jec00+nM7Oy69h8JJxk6e+bMb8453+8+v2HUwMCAcrfduW3MSD/wo48+Uh966KEcz69du6a98847Zrm0MplMErQSY8b8vYw///yTNFO6rifvRLBaW1vTDz74YAzrVcV6zevXr7fF4/GmsgH++OOPI+PHj7cAuXr1qrZ27dpCuRPcunWr+uSTT+ZmzJgR4e9z587l0Kc1NzeXBXI4HFZmzZqlAGRFMIzyww8/jOimJ5PDeWnUqFHKvffeG77//vvr7rvvvhAAibCP2vKPP/4o3Lp1qxPH0b/++stMJBKBnvPpp5+m586dqz/22GPKAw88YPXdvHlT7e7u1nFNeeONN5pKBnjHjh2RmTNnEhBVAoI+bdWqVYVywH3iiSdymGSEwLCBGwl02SCrqqqApvWXzTRN5Zdffvm/Sdjo0aO5+dEJEyYkJk2aFOW8yHwE5J577lEAqPLbb79F+/v7ld7e3iyOtg8//DC1fv16oxhtMLI+Z84cZfLkyYpdY/E3mEfHz9IAJrgAloAQGKsPk1VBrGSQt23bFobkHsEESXNQ4niORu7OYUz9unXrjP+q+uSmT5w4Ucc60ziUqVOnkoEVSLB1jeDfvn3bAgXSS22o9PT0xC5evBjbtWtXZuXKlU1+9B9//HFlypQpg+CyQUtYfbxWkop2gitVggCa4hIY5O3bt1Nic88884waCoUscLlYwTAWyPgdwcQ7MFZbvXq1L83NmzeHIQ1hSsezzz4bouqzq0bQCe3duzdKaYbEGBs3bjSC2O+gzc3OkwY2OllTU5PAoUybNs3aM7lOt0bJ4ziqXMMw9P3796vLli1r9BoPda+4zZV9vBYYYDdw5SbyvFSQYb/Nhx9+uB5/+bMBdigmrwkPvg3X2jGGKraomoaUqJCOI9hQ/rW42M7R6IvBrMSuXLliQl1rXnSefvrpBE2FZN6gDXaPgNBwWgBT9UId1z311FMJMLHinJNX433ck7Fjx1qSDqBisKVdsKXDjPrBgwfDL730kict4sMxr7322nBm5ibLg9L25Zdf9n7//fcDN27cGIBKGXA29vEax3As77HT8DtOnz6dhNc3SIvn7At6vzzy+XwY/kBHX1/fACRqkB7P2cdrHFNkLgNweAZKbbyH90o6cEKV48ePn7tw4UJZ9OS8f/rpp4ETJ050uM310KFDkfPnz3vez2sc43bv6CCS6+QWKckcy3t4bxDupwOETRj8zfNynCJws0GPHqcFp4pmH69xjB8NrqFU9SxVol3qoUli0ARhSm459GxaQHnkkUdc93HJkiWF33//PUPz4GYyeI1jXB2/UsD9pyBzMvbECs/dJh2kwf6akFQN9rBA54UHz9nHayPlXMG0vEpb6mcH3ZoImUxowww866P4bUK1H/UaD4esFWOH9bOP13xtMJ2goOC6gUybjAkyVp4kr2/ZskUdN25cApOOgMMKTWh+9NJo8DgjjBMx6dSGDRuGgGSnxzFwcprmz59vdnZ2apw/x8A2auwTTlRajnWjV6kGcKN0FoPsmR1czMm4dOlSLYRjcF604V7thRdeMH788ccU98AeJkEDpnjNM3TjP1AP9bhRo9dXykQ5lvfwXtKQ/S0tLVGECh0Ii3Q4HwY2IcX+aDSahPfLB1gHz9knNirFsbyH95KGFz2ow5S8RkDheNXykOCycYwXvUo2xLyqn/QSTDhm5uXLl2fgqOU5GF6BzW0Hc5bEdLgnb5dinrOvaKpS07S8tJH2ydJjhJSOcniRA3YbxHgOcVhexmJ79uxJY2N1SLYJiWzEBrcFmfzSpUu52MZvv/32FMBJA/wcaGV4rZL0VqxY0VTh5EYejO7JPExuANj8d999Z1Ag4L0XwBQM4xoATkkpVex1lMwhG8/Zh9N8oDDJqeMZtcDw+/Y57yEYOOj+q1hYFp5h9ueff2bmJhWPx5MeOdYkNECCoVJVVZUiEwWgoQualaRXUYARCZyCGYjSUXJr9A2wR3UQnhiYQWUmS2S4wgiPkjLc8ms0T9OnT0/At9CZOJGN51zngQMHJkLdu5qhMc7JOGM+tzjQ7x5u5qOPPmr1k2Npn7jJcH4avBZTU1PTIDNcUPdWfMhNkMxTaXqVbIi3MwA5Ds2nupk3As9nYz5ZXocpsXwXZqDAgKEi6V3a94bq6uoYk0SM27ke2XjOPuyNjnE6NFQbHM325ubm/L/2NgkOQEFkpqxF8KAqYfbp8OHDOWdYRMmaN28eIw3Fzp0ElLSEGqwoPcGoKTgpZWWyeK/83d3dbUKjadjsHIAbBjIBZtZKOq9MbMhwDutq8njBE4VkZqHOw9RCPEhDJEQURwbNok2tCs0W4wGJNqDhGteuXZuvOMBYvIFNiNg3l5kdToC2Ctw+ZDwnzQU4sz9iIw1xXlF6IpPlqh77+/uzfCVHYNx8EG4q7h38TXMB+1pAvwY/JA2go84UJedCyRVhoYnNbz1//nwGNth0MS91s2fPPkINxPBLZru8TIDIgVvaiuMp6TBlTATlQKveqaINTCIc1JPmhHmPwxFoh4TV2QGRqpWc5lTp3AxO0vlM4UC0i/OK0iviFTdi409BMtIAQqV58GtU+wjP6ExZCRYwVwRz43zn0+aKfTVhpzvBMIW+vr48pb6rq8tiDpeXChG+NWL4SYc3KBZkAO4JGZxJE6pvPDMy6m5Fh3s7e/ZsBIBksdm1I/nckydPJmtraxNUyf+k/frrr0pHR0fqLsB3eBt9dwvu7DbiNVkrV65kyjEn7Je2a9euslOIq1evTjJ1Jx0QJhWYlty+fXvyTgRrzZo1aThcdABVsV4TcXVbS0tL+TVZ8Xg8AsOdE0G9Bs+s7Jqst99+W4UTkqMjwd8XL17MoU/buXNnWSDzZTnjbnqZbFiscuHChRHd9OXLl3t5t2E4WnXwoEMAZLAmC1403wx1wgGyarL27dsX6DnvvvtueubMmbr9xcatW7eY/NFxTfnggw9Kr8latWpVhHVUAESVgKBP27FjR6EccKdPn57DJCMEhg1esFWTVS7IDCFAUxHFBFbaNEDNwL/WCCI2PwqBSGBOUc6L3iwjAFmTBVCs0I7hGObb9tZbb6V2795tFKMNRtaxd/TyFbvGYohUVk0WwQUQBIRSZ/UxXcj6qVJBhhZgwH6kuro6wpy1lDiRv7ZqsjCmHtrB+K+qTxGm6FhnmvvF7BXXyRiY12RNFkFhyMbw6sqVK7FLly7F1q1bl9m2bZtvCpWMTDDt8bCMgXmtJBXtBFfGoAJoq1wnKMhNTU0RxJJWZSZjSi5aJgJ4TpCZqcLEOzBWS6fTvjTffPPNMMaHKR2zZs0aVpMFOqH169dHKc2M0T/55BMjiP0O2tzsPGlgo5NVVVUJmgzGodwzr5osxqoEhuOYeUPcrW/cuFHdvHmzZ02WZBQ3xvIrERoTBFy5iTwvFWRsojllypR6kUNl/jjmGNKGa+1MuQGUovqVlZ1oR1ibRSlxpu7QF4NZifX19bHEy7MmKxwOJ2gq7AmUII3S193dPViTRRDBbHWhUCjB7JNzTp7hy9+vWS17KjJVMdjSLtjSYQ7i+++/H37uued8TQPHvPfee4YvwH7gSkKlgowJ86HWg7/44osoU4zydSM3C05C18KFC/NBNxiqrLB///5a0CHIEefbFToh+Fvo6emp37Bhg1HMQStHgu2NAEEzpZkipESWSk9IvzWXmzdvvuqWPuWXDH4VmiJ7p/rGwcXAdQOZY3kP7w2yGDpA9hIdnpfjFC1btsxgiMWEvctlVnBoHONHQzo+5dhaO1MBnBj2wCrjLYeeTQvwxYHrPoJRC/C6M07mkgzHaxzjCXBQcP8pyJyMsybLbdJB2uLFi0149RpCo8GaLJ6zj9dGyrkCKK9ScoOUytqbfPEAqc3wMxbyP6TQsyYLDlmr1+tbXvO1wXSCgoLrpa6dNVkrVqxQoYr5Oi7C2A9OSVORpEVajuXruD179gwByY3ekiVLzM8++0wjg3EMbKPGviD0KtX4iYrtFWBgcPlmq7e3t/aVV14JNK/XX3/dOHbsWIp7YA+ToAFTvOYLMGKrevG+MldqTZYovtMYn8mm6zptbRbczTdTbSwMY78o6h5iY6LRqPUXKi7F0hosXgdH1oFGYyaTyfvRYxOADnsh4Eevkg0esernqMnqScS+nKMqkkYq1tB+9uzZkpgO9+SxrgS9cCm97Cuaqly+fLk16OTJk0PsC52g559/fgji33zzzYB9DOO5l19+efAhzc3NdDgYD7IMtHHRokVtQSa/adMmq4bq888/P4VFpPmJKWhZNVmVpLd169aKluyA4Xxrsmg6IKn5rq4uQ3jvBcyFYVwDwCkppQomiTrrytmnBK3Jcup4xpLOxj6GNF73YAE6PUqWsPALut27d2f56qq/vz/V0tKS9MixJvlFHl+R0cuWiQJoBl0AXEl6FQUY6z8FMxD1kmICjDF1UKUxMILKTJbIcIWh2pNKgJosmiesJcEvDJ2f6nCdYOaJ2BNXM+Rbk8Wv4JzN2ee8h5vJ4F3WUDHW4ybDPnrWUFVVVTUwbOFYmgpZRyWZp9L0KtkAHAvX49hsz5osPhvzycpCBYZWDI0AWqhIepf2vYFxPdds/zZYpHqtPtZkYY06NFQb5tK+c+fO/L/2NgkL4uckEVmmwoOqhDVUiGFzzrCIklVTUxNmlsvOnQSUtIQarCg9YX5ScFLKymTxXptdNMGAGjY7BykeBjJDIPon0nm1lSV71mTF43F+Y5xlYRm1EDUmaThLd2QMTdoUAqY+IckxSLQBDdfY2tpa+ZosLN7AJkTsgbksDqNP5ZQiWWHozP6IjTTEeUXpsS1cuNBVPX799ddZvpLj89x8ELYFCxbYwxeW7BSw2dq0adPS/ADcmZTgXCi5Iiw0YeZae3p6MmQOF/PCrNgRSqYsvfH7FFWW6nAcmZuMDVMWhobLgdbQmixMoOSaLN7jcATaIWF1dumR1YR8uLOCROSPh4UZwoFoF+cVpefXXnzxxcYTJ06cgmSkIQVqABvMXDI1RIGvU5mswNw43yE1WbDTnfyE59q1a/nLly+bvIe+hMtLhUh1dfVg4WBQLGTqk/tCaSdTsFjxbsmOR/vqq6/4TVUWXvuI1mTt3bs3yW+X7WFnOY3/TcSZM2fu1mTd6e1/AgwAINwEgYdXHAgAAAAASUVORK5CYII=") no-repeat;<br /> -webkit-transition: all 300ms ease-in-out;<br /> -moz-transition: all 300ms ease-in-out;<br /> -ms-transition: all 300ms ease-in-out;<br /> -o-transition: all 300ms ease-in-out;<br /> transition: all 300ms ease-in-out;<br />}<br />.icon20.home {background-position:0 0;}<br />.icon20.upload {background-position:-20px 0;}<br />.icon20.download {background-position:-40px 0;}<br />.icon20.comments {background-position:-60px 0;}<br />.icon20.theme {background-position:-80px 0;}<br />.icon20.login {background-position:-100px 0;}<br />.navbar > li:hover .icon20.home {background-position:0 -20px;}<br />.navbar > li:hover .icon20.upload {background-position:-20px -20px;}<br />.navbar > li:hover .icon20.download {background-position:-40px -20px;}<br />.navbar > li:hover .icon20.comments {background-position:-60px -20px;}<br />.navbar > li:hover .icon20.theme {background-position:-80px -20px;}<br />.navbar > li:hover .icon20.login {background-position:-100px -20px;}</blockquote>Save templates<br /><br /><b>HTML Code: </b><br /><b>You can add this code to widget  HTML / Javascript.</b><br /><b><br /></b><br /><blockquote class="tr_bq"><script type="text/javascript" src="https://bloggerknown.googlecode.com/files/jquery.min.js"></script><br /><ul class="navbar color1"><br /> <li><a href="#"><i class="icon20 home"></i><span>Home</span></a></li><br /> <li><a href="#"><i class="icon20 upload"></i><span>Upload</span></a></li><br /> <li><a href="#"><i class="icon20 download"></i><span>Download</span></a></li><br /> <li class="drpdown"><a href="#"><i class="icon20 comments"></i><span>Posts</span></a><br />  <ul class="drpcontent"><br />   <li><a href="#">Latest Posts</a></li><br />   <li><a href="#">Popular Posts</a></li><br />   <li><a href="#">Private Posts</a></li><br />  </ul><br /> </li><br /> <li><a href="#"><i class="icon20 login"></i><span>Login</span></a></li><br /> <li class="drpdown"><a href="http://www.ichibikarin.blogspot.com/"><i class="icon20 theme"></i><span>Themeselector</span></a><br />  <ul class="drpcontent" id="themeselect"><br />   <li><a href="#" data-color="color1">Orange</a></li><br />   <li><a href="#" data-color="color2">Marine</a></li><br />   <li><a href="#" data-color="color3">Green</a></li><br />   <li><a href="#" data-color="color4">Purple</a></li><br />   <li><a href="#" data-color="color5">Red</a></li><br />  </ul><br /> </li><br /></ul></blockquote><br /><br />Replace # with the URL and replace the blue text with the name you want the navigation menu.<br />Extras!!!. If there is an error on your blog in the navbar. Please replace the text that reads navbar on CSS3 code above.<br /><br /></div></div>

Creating Navigation Transition Effect In Blog

Today I will explain how to make the "Menu Navigation" very cool with transition effects. Transition effect is an effect where we ...

+ Read more »

HTML Color Codes

<div dir="ltr" style="text-align: left;" trbidi="on"><h4> <center><center style="text-align: left;"><b><span style="font-size: large;">HTML Color Code Generator Tool – Find Hex Code Of Any Color</span></b></center></center><center><center style="text-align: left;"><b>How to find HTML code of a color?</b></center><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaix0gd-x2FgXR7d82KmrFRPVjFcQmQMHXcE6LEiwlGoITTw0KWJg59T1wpO9ODRRp4H9_NnAqHi-rLjUieZpw0RfArVSB8gWgpFSffGgUE1IoWsFes2QBeF48uNHJGGzhcd_aIEYrOjM/s1600/HTML-Color-Code.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="html color code" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaix0gd-x2FgXR7d82KmrFRPVjFcQmQMHXcE6LEiwlGoITTw0KWJg59T1wpO9ODRRp4H9_NnAqHi-rLjUieZpw0RfArVSB8gWgpFSffGgUE1IoWsFes2QBeF48uNHJGGzhcd_aIEYrOjM/s1600/HTML-Color-Code.gif" title="html color code" /></a></div><center style="text-align: left;"><b></b></center></center></h4><center><center style="text-align: left;"><b>Follow the instruction given below to use this HTML Color code generators tool.</b></center><center style="text-align: left;"><ol><li>Drag the black bar on the “hue” selector to show your desired color.</li><li>Now click inside the Brightness/Saturation.</li><li>Drag it until you have achieved your desired color.</li><li>The “Swatch” bar shows the final color.</li><li>The hexadecimal color will be generated at the bottom of the grid in the “Hex” box. Simply copy and paste this code into your page.</li></ol></center></center><center></center><center><embed height="450px" name="plugin" src="http://www.2createawebsite.com/build/color.swf" type="application/x-shockwave-flash" width="100%"></embed></center><b>HTML color code for your website:</b>add html color code in your website <br /><b>Directions:</b> Simply copy everything inside and paste it where you wish the script to appear. <br /><textarea cols="75" rows="4"><embed width="100%" height="450px" name="plugin" src="http://www.2createawebsite.com/build/color.swf" type="application/x-shockwave-flash">

HTML Encoder

<div dir="ltr" style="text-align: left;" trbidi="on"><div dir="ltr" style="text-align: left;" trbidi="on"><h2 style="text-align: left;">HTML Encoder Decoder</h2><div><h2></h2><h2>Google Adsense Converter </h2><br /></div>Type or paste in the text you want to  encode or decode html entities, then press the ‘Convert’ button.<br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3mkHCsKRgH3DIyk2AwADWJr-YyZc_gQBwhC_VsL6LNMsNacMuLe_YTZmL2iqxFpBQYf7oulb5a6YMj0x4B6_KEluo-SYX7UOlEKrCUKASdbp5aPEgrkgNW-rP2sONcXSIxYlQYPfDrtA/s1600/HTML+Encoder+logo.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Html Encoder png logo" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3mkHCsKRgH3DIyk2AwADWJr-YyZc_gQBwhC_VsL6LNMsNacMuLe_YTZmL2iqxFpBQYf7oulb5a6YMj0x4B6_KEluo-SYX7UOlEKrCUKASdbp5aPEgrkgNW-rP2sONcXSIxYlQYPfDrtA/s320/HTML+Encoder+logo.png" title="Html Encoder png logo" width="320" /></a></div><br /></div><iframe frameborder="0" height="400" scrolling="no" src="http://www-open-opensocial.googleusercontent.com/gadgets/ifr?url=http%3A%2F%2Fhosting.gmodules.com%2Fig%2Fgadgets%2Ffile%2F102462998830435293579%2Fpost-Code.xml&container=open&view=home&lang=all&country=ALL&debug=0&nocache=0&sanitize=0&v=cfecbbdfc2769cc8&source=http%3A%2F%2Fgoogle-adsense-converter.blogspot.com%2F&parent=http%3A%2F%2Fgoogle-adsense-converter.blogspot.com%2F&libs=core%3Acore.io#up_grows=10&up_conv1=1&up_conv2=1&up_conv3=1&up_conv4=1&up_conv5=1&st=%25st%25" style="display: block;" width="100%"></iframe></div>

HTML Encoder

HTML Encoder Decoder Google Adsense Converter Type or paste in the text you want to  encode or decode html entities, then press the ‘Convert...

+ Read more »

Character Count

<div dir="ltr" style="text-align: left;" trbidi="on">Calculate and display the number of characters within a TEXTAREA with this script. Useful, for example, in helping your visitors manually keep their input length in check! <br /><br /><b>Count your characters:</b><br />Copy and paste your words below to find out your exact character count. (Blank spaces are counted as characters).<br /> <style>.bknownfield { border: 1px solid #9E9797; border-radius: 4px 4px 4px 4px; } .bknownfield>table { line-height: 11px; } .bknownbtn { background: -moz-linear-gradient(center top , #01F6FD 0%, #ABABAB 100%) repeat scroll 0 0 transparent; border: 1px solid #000000; border-radius: 3px 3px 3px 3px; cursor: pointer; padding: 4px 14px; } .bknowntxt:hover { border: 1px solid #F90821; } .bknownbtn:hover { background: none repeat scroll 0 0 #21FD93; } .bknowntxt { border: 1px solid #494A4B; border-radius: 3px 3px 3px 3px; padding:4px 2px; } .bknowntitle { background-color:#000000; border: 1px solid; border-radius: 14px 14px 14px 14px; font: 21px Verdana; padding: 4px; text-align: center; text-shadow: 1px 1px 1px #000000; } </style><script type="text/javascript">function charcount(){var count=document.getElementById('txt').value.length;document.getElementById('countdisp').innerHTML=count}function instantcount(a){document.getElementById('countdisp').innerHTML=a.value.length}function instantcountcheck(){var countbutton=document.getElementById('countgen');var countcheck=document.getElementById('instantcount');var txt=document.getElementById('txt');if(countcheck.checked==true){countbutton.disabled=true;txt.setAttribute('onkeyup','instantcount(this);')}else{countbutton.disabled=false;txt.removeAttribute('onkeyup')}}</script> <br /><div class='bodyborder'><fieldset class="bknownfield"><table width="100%"><tr><td width="40%" colspan="2"><textarea cols="72" rows="12" class="bknowntxt" id="txt">

Instant Count

Number of Characters: 0