How to Add Numbered Page Navigation Widget for Blogger Blogs

<!-- AddThis Follow BEGIN --> <div style="text-align: justify;"> In Blogger, we have the option to set the number of posts we want to display per page. Once the number of total posts in our blog exceeds this number, we will see "Older Posts" and "Newer Posts" navigation links in our home page and archive pages footer as Blogger doesn't have any built-in function on page numbering. </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> But page numbers instead of older and newer posts links could help our blog visitors to navigate quicker (jump from one page to another page or click on a specific page) and know the total number of posts published. Here's a tutorial on how to add numbered page navigation using Javascript to a Blogger/ blogspot blog. You can select any one of 3 different styles that I have mentioned below. </div> <div style="clear: both; text-align: center;"> <span style="color: black;"><a href="http://www.google.com/url?q=http%3A%2F%2F3.bp.blogspot.com%2F-eIdlXeuX4U0%2FUz3SnggwCJI%2FAAAAAAAAHbM%2FNaf8vULtqNQ%2Fs1600%2Fnumbered-page-navigation-javascript-widget-for-blogger.png&sa=D&sntz=1&usg=AFQjCNEBUhhp610XGy_DAdzzmAVOzjlWmA" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="numbered page navigation widget " border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNbXTPrmHVWAB9nPa4EsqRMDKb6MR-bx5TFq8865-krkzGU6kezeLwe3ixvGHqqBUKYmbwdgRv0k3d4We3hOCxBfVMm4myu4S94nzHBLGkC-485aD8P1pQe8QLimM9Rdh98-Pg7U9b3ftZ/s1600/numbered-page-navigation-javascript-widget-for-blogger.png" title="How to Add Numbered Page Navigation Widget for Blogger 1" width="320" /></a></span></div> <br /><h2> <b>Adding Numbered Page Navigation to Blogger</b></h2> You can add this widget in just two steps.<br />1. Adding The CSS.<br />2. Adding The Script.<br /><br />Now let's see how to add the CSS style for page navigation.<br /><br /><h3> <b>1. Adding The CSS</b></h3> <b><span style="color: #6aa84f;">Step 1</span>. </b>Go to <span style="color: black;"><a href="http://blogger.com/" rel="nofollow" target="_blank">Blogger Dashboard</a> >> <b>Template</b> >> click on the <b>>>Edit HTML</b> button:<br /></span><div style="clear: both; text-align: center;"> <span style="color: black;"><a href="http://www.google.com/url?q=http%3A%2F%2F3.bp.blogspot.com%2F-rP7Xdxqm5W0%2FUaJpKUUs7pI%2FAAAAAAAADfc%2FNP9sNObx2l4%2Fs1600%2Fblogger_blogspot_template_edit_html_tutorial.png&sa=D&sntz=1&usg=AFQjCNHoonb6CMMZedRYhkP58uTRX2ImqA" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="blogger template html" border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguBmwiicD7jLIheB1ZU84_p9M0OBQC3NodDZki8ww5l1Hw7nSc1TnbtrAvTiw18Pv-26CHUYE_dXf69sbSyswAiTChg5iKj8l8uAoy11nVq3s6VPajwygziCObZ1EI_wwsS3LIbeBCTg6O/s1600/blogger_blogspot_template_edit_html_tutorial.png" title="How to Add Numbered Page Navigation Widget for Blogger 2" width="400" /></a></span></div> <br /><b>Step 2.</b> Click anywhere inside the code area and press the CTRL + F keys to open the Blogger search box. Type or paste <span style="background-color: yellow;">]]></b:skin></span> tag inside the search box and hit Enter to find it.<br /><br /><b>Step 3.</b> Now choose one of the following numbered page navigation styles and copy the code just below it. Just above <span style="background-color: yellow;">]]></b:skin></span> paste the code of the style that you want to use:<br /><br /><h3> <b>Style 1</b></h3> <div style="clear: both; text-align: center;"> <span style="color: black;"><a href="http://www.google.com/url?q=http%3A%2F%2F3.bp.blogspot.com%2F-_Aw4Wcud15g%2FUz3PLaeyt6I%2FAAAAAAAAHaw%2FgtpEfWoYsRw%2Fs1600%2Fpage-navigation-widget-for-blogger-style-1.png&sa=D&sntz=1&usg=AFQjCNE0BGBZzKCpJtiva7bcgvAm6KK7yg" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="numbered page navigation style 1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfzobHOhPIxGSCKT0mVB46HBFtUxl8q-1-BWHKP8ksXfDzC0cFDD7Q2CoHTVXdFUq_dQWdhaVYOemo3VgvQoengDNqkfoRKgfsXSnUuzyQ6uC3LrQpdrvGODq9uZo44g7rKmEdoEUQ0dk1/s1600/page-navigation-widget-for-blogger-style-1.png" title="How to Add Numbered Page Navigation Widget for Blogger 3" /></a></span></div> <blockquote> .pagenavi{clear:both;margin:<wbr></wbr>30px auto;text-align:center;}<br />.pagenavi span,.pagenavi a{padding: 3px 7px;margin-right:5px;<wbr></wbr>background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}<br />.pagenavi a:hover,.pagenavi .current{background:#CECECE;<wbr></wbr>text-decoration:none;color: #000;}<br />.pagenavi .pages,.pagenavi .current{font-weight:bold;<wbr></wbr>color: #888;}<br />.pagenavi .pages{border:none;}</blockquote> <br /><h3> <b>Style 2:</b></h3> <div style="clear: both; text-align: center;"> <span style="color: black;"><a href="http://www.google.com/url?q=http%3A%2F%2F1.bp.blogspot.com%2F-xSZImr035Z0%2FUz3PYLV3ckI%2FAAAAAAAAHa4%2FjXtv35npsXs%2Fs1600%2Fpage-navigation-widget-for-blogger-style-2.png&sa=D&sntz=1&usg=AFQjCNHintY7-Gvul1nrDb04lkxTxvAX_g" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="numbered page navigation style 2" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1nlqh6vO7T3joIjl_V29oJU5A2mmAHkKrA9u9CVt3ph-CdM2DPG1dcOA-LG_dw-GalQGNvDwpMQirtfmjfwHuvaVFzK8jltxX2shHdYBznHvJIGgfIS58JUlnApM5p-cGfZ4hCxAK2fAH/s1600/page-navigation-widget-for-blogger-style-2.png" title="How to Add Numbered Page Navigation Widget for Blogger 4" /></a></span></div> <blockquote> .pagenavi{clear:both;margin:<wbr></wbr>30px auto;text-align:center;}<br />.pagenavi span,.pagenavi a{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-<wbr></wbr>webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}<br />.pagenavi a:hover,.pagenavi .current{background:#EC8D04;<wbr></wbr>text-decoration:none;color: #fff;}<br />.pagenavi .pages,.pagenavi .current{font-weight:bold;<wbr></wbr>color: #fff;-webkit-box-shadow: inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);-moz-box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);box-shadow:inset 0px -1px 2px 0px rgba(50, 50, 50, 0.69);}<br />.pagenavi .pages{border:none;-webkit-<wbr></wbr>box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}</blockquote> <br /><h3> <b>Style 3:</b></h3> <div style="clear: both; text-align: center;"> <span style="color: black;"><a href="http://www.google.com/url?q=http%3A%2F%2F3.bp.blogspot.com%2F-k81zcDSdUGg%2FUz3PhXQVJsI%2FAAAAAAAAHbA%2FIVPdG8OliCk%2Fs1600%2Fpage-navigation-widget-for-blogger-style-3.png&sa=D&sntz=1&usg=AFQjCNF-7lrGzAIOx5WgZM2I8l9AsexdWA" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="numbered page navigation style 3" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3019peWjltvdyy2mgQh9hpr1AgxJHJjhGEK9nx1fxYmL046K5m-6mLnLDbfSH-Z1i6fbJ5Yn-6dqrWevSVAVCpzSNHMtp7YdQ4lXV1c9_ImFXnJtztaszBZbWkzRhPLn1K01NlDVScig7/s1600/page-navigation-widget-for-blogger-style-3.png" title="How to Add Numbered Page Navigation Widget for Blogger 5" /></a></span></div> <blockquote> .pagenavi{clear:both;margin:<wbr></wbr>30px auto;text-align:center;font-<wbr></wbr>size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}<br />.pagenavi span,.pagenavi a{padding: 3px 10px;margin-right:5px; color: #fff;}<br />.pagenavi a:hover,.pagenavi .current{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}<br />.pagenavi .pages{border:none;background: none;}</blockquote> <h3> <b>2. Adding The Script</b></h3> <span style="color: #6aa84f;"><b>Step 4. </b></span>Now find <i><b>(CTRL + F)</b></i> this line:<br /><blockquote> <i><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'></i></blockquote> <b><span style="color: #3d85c6;"><span style="color: #6aa84f;">Step 5.</span> </span></b>Add the following script just below it:<br /><blockquote> <b:includable id='page-navi'><br /><div class='pagenavi'><br /><script type='text/javascript'><br />var pageNaviConf = {<br />perPage: <span style="color: #cc0000;"><b>7</b></span>,<br />numPages: <span style="color: #cc0000;"><b>6</b></span>,<br />firstText: &quot;<span style="color: #cc0000;"><b>First</b></span>&quot;,<br />lastText: &quot;<span style="color: #cc0000;"><b>Last</b></span>&quot;,<br />nextText: &quot;<span style="color: #cc0000;"><b>Next</b></span>&quot;,<br />prevText: &quot;<span style="color: #cc0000;"><b>Prev</b></span>&quot;<br />}<br /></script><br /><script src='<a href="http://helplogger.googlecode.com/svn/trunk/pagenavi.min.js" target="_blank">http://helplogger.<wbr></wbr>googlecode.com/svn/trunk/<wbr></wbr>pagenavi.min.js</a>' type='text/javascript'/><br /><div class='clear'/><br /></div><br /></b:includable></blockquote> <b><span style="color: #3d85c6;"><span style="color: #6aa84f;">Step 6.</span> </span></b>Now we need to put the page navigation where it has to be shown (posts footer). Find the code below (if you can't find it, try to find only the first line):<br /><blockquote> <b><!-- navigation --></b><br /><b:include name='nextprev'/></blockquote> <span style="color: #6aa84f;"><b>Step 7.</b></span> Replace it with this one:<br /><blockquote> <b:if cond='data:blog.pageType == "index"'><br /><b:include name='page-navi' /><br /><b:else/><br /><b:if cond='data:blog.pageType == "archive"'><br /><b:include name='page-navi' /><br /></b:if><br /></b:if></blockquote> If you can't find the old page navigation code, then find this section of code:<br /><blockquote> <b:section class='main' id='main' showaddelement='no'><br /><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'><br />...<br /><b:includable id='main' var='top'><br />...<br /></b:includable><br /></b:widget><br /></b:section></blockquote> Insert this code immediately above the <span style="background-color: yellow;"></b:includable></span> tag:<br /><blockquote> <b:if cond='data:blog.pageType == "index"'><br /><b:include name='page-navi' /><br /><b:else/><br /><b:if cond='data:blog.pageType == "archive"'><br /><b:include name='page-navi' /><br /></b:if><br /></b:if></blockquote> <h3> Configuration</h3> After installing, you might want to change some default settings. All the settings are in the script of <span style="color: #6aa84f;"><b>step 5</b> </span>above:<br /><blockquote> var pageNaviConf = {<br />perPage: 7,<br />numPages: 6,<br />firstText: "First",<br />lastText: "Last",<br />nextText: "Next",<br />prevText: "Prev"<br />}</blockquote> - <span style="color: #cc0000;"><b>perPage</b></span>: number of posts are shown in each page (<span style="color: #cc0000;"><b>7</b></span>)<br />- <span style="color: #cc0000;"><b>numPages</b></span>: number of pages are shown in page navigation (<span style="color: #cc0000;"><b>6</b></span>)<br />- you can change the text by replacing the "<span style="color: #cc0000;"><b>First</b></span>", "<span style="color: #cc0000;"><b>Last</b></span>", "<span style="color: #cc0000;"><b>Next</b></span>" and "<span style="color: #cc0000;"><b>Prev</b></span>" texts.<br /><br /><b><span style="color: #3d85c6;"><span style="color: #6aa84f;">Step 8</span>. </span></b>Click on the <b>Save Template</b> button and that's it! Enjoy!<img height="1" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEg8JzePJaVKQEj70mCorbar2lorsHrdGZcsBiwvEVFURXhtP-brZQq5aVKY9odQR5x7euawQO9NtCItciz4e9omjc-iXOQSvZCNWaaoj073Zc63mZU-_WOmhMjGH8b0qkBir6nXXo1kpQ_pQqzJZgdKcI4UTmmT9WGF2k5ysz7YLKNgiT1DqHx65dj0bnVgB174sFNPteflRXHDUnJxMQs=s0-d-e1-ft&utm_medium=email" width="1" /><br /> <br /> <br /> <br /> <span style="font-size: x-small;"><b><i>Culled From <a href="http://helplogger.blogspot.com/" target="_blank">HelpLogger</a> </i></b></span><br /> <br /> Follow Us<br /> <div class="addthis_toolbox addthis_32x32_style addthis_default_style"> <a addthis:userid="XclusiveTech" class="addthis_button_facebook_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="StefnSylvester" class="addthis_button_twitter_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="StefnSylvester" class="addthis_button_linkedin_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="BluraySpaceTech" addthis:usertype="company" class="addthis_button_linkedin_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="102991872803748049109" class="addthis_button_google_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="XclusiveTech" class="addthis_button_youtube_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="StefnSylvester" class="addthis_button_vimeo_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="StefnSylvester" class="addthis_button_pinterest_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="StefnSylvester" class="addthis_button_instagram_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="Stefn" class="addthis_button_tumblr_follow" href="https://www.blogger.com/null"></a> </div> <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53029f4e0777facc" type="text/javascript"></script> <!-- AddThis Follow END --> <script type="text/javascript"> <!-- var _adynamo_client = "d77da6ea-69b0-49e9-948f-1452fc91ec5d"; var _adynamo_width = 500; var _adynamo_height = 60; //--> </script> <script src="http://static.addynamo.net/ad/js/deliverAds.js" type="text/javascript"></script>

How-To Tutorials How to Add Numbered Page Navigation Widget for Blogger Blogs

In Blogger, we have the option to set the number of posts we want to display per page. Once the number of total posts in our blog exceed...

Read more »

How to Add Instagram Photo Gallery Widget in Blogger Blog

<br /> <div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify;"> <img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmc8BMp-NOyAyt6od0pFNcbsUCXMerrx1CGcYxJ4xWMp7czpz7peMTBqHzSCxTwA2JMEKxAc3T56jRllev7MZraHOZdEhswcsxb7c6cQSylfWUxNK_1xSJI9SOOCz58LpIsf_GpmDFcg4/s200/instagram+photo+gallery+blogger.png" width="200" /></div> <br /> <div style="text-align: justify;"> <!-- AddThis Follow BEGIN --> </div> <div style="text-align: justify;"> Follow Us</div> <div style="text-align: justify;"> <span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">Are you looking how to use instagram on our blog? Then you are at right place. In this tutorial I will guide you how you can easily add instagram photo gallery widget to your blogger blog.</span></span></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;"> </span></span>Whether if you are blogging on photography or not, you still have to promote your blog images on instagram and it can leads you a lot of traffic. </div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> <span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">Instagram doesn’t have any official widget that could help us add it to blogs. However, there is a third-party widget provider that can be used. So to get started, go to</span><a href="http://snapwidget.com/#getstarted" rel="nofollow" style="background-color: white; line-height: 20px; margin: 15px 0px 5px; padding: 3px 7px; text-decoration: none;" target="_blank">http://snapwidget.com/#getstarted</a><span style="background-color: white; line-height: 20px;">and create an instagram widget for your site according to your desire needs. We have attached a screenshot below to help you understand its interface.</span></span><br /> <span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;"><br /></span></span> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZgFqJF8cLEXrt0MonlLk7-NRPXI_CisNYRzYiE6tLIxlIo3plPhJyGmhDv1vaNb1kWJ1yWUgqa2c3vZ8XnS25D1RCdCFuWXMcWYq-Cv9JVHsb8t_1gJuWStQZBSr_ooR1Pkon5tpj8U/s1600/instagram-widget-blogger.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZgFqJF8cLEXrt0MonlLk7-NRPXI_CisNYRzYiE6tLIxlIo3plPhJyGmhDv1vaNb1kWJ1yWUgqa2c3vZ8XnS25D1RCdCFuWXMcWYq-Cv9JVHsb8t_1gJuWStQZBSr_ooR1Pkon5tpj8U/s1600/instagram-widget-blogger.png" /></a></div> <div style="background-color: white; line-height: 20px; text-align: justify;"> </div> <div style="text-align: justify;"> <span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">After modifying the widget rendering to your requirements, press the “<b>Get widget</b>” button. On pressing the button you will be provided with your JavaScripts HTML embed code for the gadget.</span></span></div> <div style="background-color: white; line-height: 20px; text-align: justify;"> </div> <div class="separator" style="clear: both; text-align: justify;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKnkSwSl1SQaUj1qnWGdUi9NM-saIUJXsja6v0NbDuQcuxXjoCc2quUFhjX809Ssld6iwyIqUsi7QgCj_wXbZxPZ5LvlRsqlRZIElW6JWm2uJoMhqGW0ewG7sdFDkE3YrYV7dGbnnzu7o/s1600/instagram-sharing-code.png" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKnkSwSl1SQaUj1qnWGdUi9NM-saIUJXsja6v0NbDuQcuxXjoCc2quUFhjX809Ssld6iwyIqUsi7QgCj_wXbZxPZ5LvlRsqlRZIElW6JWm2uJoMhqGW0ewG7sdFDkE3YrYV7dGbnnzu7o/s1600/instagram-sharing-code.png" /></a></div> <div style="background-color: white; line-height: 20px; text-align: justify;"> </div> <div style="text-align: justify;"> <span style="background-color: white; line-height: 20px;"><span style="font-family: inherit;">Now go to<b> Blogger.com</b> >> <b>Layout>> Add Gadge</b>t >> <b>HTML/JavaScript</b>, paste the widget code which you copied. Save it. Now check your sidebar, you will see the Instagram Widget.</span></span><br /> <br /> <br /> </div> <h2 style="text-align: justify;"> <span style="background-color: white; line-height: 20px;"><span style="font-family: inherit;">Final Words:</span></span></h2> <div style="text-align: justify;"> <span style="background-color: white; line-height: 20px;"><span style="font-family: inherit;">This is an easy tutorial to add Instagram Photo Gallery Widget in Blogger and I hope you successfully added it. If you have any difficulty adding it to your blogger blog, do let me know in comments.</span></span></div> <div style="text-align: justify;"> <br /></div> <div class="addthis_toolbox addthis_32x32_style addthis_default_style" style="text-align: justify;"> <a addthis:userid="XclusiveTech" class="addthis_button_facebook_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="StefnSylvester" class="addthis_button_twitter_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="StefnSylvester" class="addthis_button_linkedin_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="BluraySpaceTech" addthis:usertype="company" class="addthis_button_linkedin_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="102991872803748049109" class="addthis_button_google_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="XclusiveTech" class="addthis_button_youtube_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="StefnSylvester" class="addthis_button_vimeo_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="StefnSylvester" class="addthis_button_pinterest_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="StefnSylvester" class="addthis_button_instagram_follow" href="https://www.blogger.com/null"></a> <a addthis:userid="Stefn" class="addthis_button_tumblr_follow" href="https://www.blogger.com/null"></a> </div> <div style="text-align: justify;"> <script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-53029f4e0777facc" type="text/javascript"></script> <!-- AddThis Follow END --> <script type="text/javascript"> <!-- var _adynamo_client = "d77da6ea-69b0-49e9-948f-1452fc91ec5d"; var _adynamo_width = 500; var _adynamo_height = 60; //--> </script> <script src="http://static.addynamo.net/ad/js/deliverAds.js" type="text/javascript"></script></div>

#Instagram How To How-To Social Media Marketing Tutorials Widgets How to Add Instagram Photo Gallery Widget in Blogger Blog

Follow Us Are you looking how to use instagram on our blog? Then you are at right place. In this tutorial I will guide you how yo...

Read more »

Latest Tips>> Embeddable “CSS Color Chart” – 216 Hexadecimal Values

<div style="text-align: justify;"> Below is an embeddable <span style="color: green;"><strong>Web Colour Chart</strong></span> most probably known as <span style="color: green;"><strong>hexadecimal colour chart</strong></span>. The chart below consists of a total 216 hexadecimal colours which are well interpreted by all browsers and are compatible in every sense. The Colour chart below uses a combination of well scripted HTML and CSS to produce a mouse over effect when you hover your cursor over the table cells. You can use this chart for both free and commercial purpose. </div> <div style="text-align: justify;">  <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRP_qkD1LCu6v4afiZ-esOS3NxV4SQTfpHpYFSY7EL3xjGrC8S37XUNOn1gdcZvnDa2Ufg3grpbr8LC550_Splklc929JvIq7Q13NvN6bcGZLNpCL7j_bxdlzhaovvwfE0Bt4eg2kmOys/s1600/HTML+CSS+Colour+Chart.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRP_qkD1LCu6v4afiZ-esOS3NxV4SQTfpHpYFSY7EL3xjGrC8S37XUNOn1gdcZvnDa2Ufg3grpbr8LC550_Splklc929JvIq7Q13NvN6bcGZLNpCL7j_bxdlzhaovvwfE0Bt4eg2kmOys/s1600/HTML+CSS+Colour+Chart.jpg" /></a></div> </div> <div style="text-align: justify;"> You can use these <span style="color: green;"><strong>colour codes<span style="color: black;">/</span>hexadecimal values</strong></span> for editing your Blogspot, Wordpress or web templates. They are web safe colours so they look the same in any browser.  You can embed this Colour Chart or table in your websites or weblogs. You only need to subscribe to this blog by filling up the simple Subscription form on the sidebar. Once you have subscribed kindly inform me by using the comment box below and include in it the email address with which you subscribed. To avoid spam robots, write your email address as follow, </div> <ul> <li>If you use hotmail write like this >> <span class="fullpost"><b>zzz</b></span> hot mail.</li> <li>If you use yahoomail; write like this >> <span class="fullpost"><b>zzz </b>yahoo mail</span> </li> <li>If you use gmail write like this >><span class="fullpost"><b> zzz</b></span> g mail </li> </ul> <div style="text-align: justify;"> <span class="fullpost"><div align="justify"> where <b>zzz</b> is your email ID. If you use any other emailing service then simply follow the above pattern.</div> <div align="justify"> The moment I receive your comment, I will send you the embeddable code to this chart.</div> <div align="justify">  </div> <div align="justify">  </div> <center> <h4> <div style="border-bottom: #0080ff 1px dotted; border-top: #0080ff 1px dotted; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px;"> <span style="color: #0080ff;">CSS Web Colour Chart </span></div> </h4> </center> <center>  </center> <center> <table border="0" cellpadding="4" cellspacing="2" style="width: 551px;"><tbody> <tr> <td bgcolor="#ffffff" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#FFFFFF</span> </td> <td bgcolor="#ffffcc" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#FFFFCC</span></td> <td bgcolor="#ffff99" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#FFFF99</span></td> <td bgcolor="#ffff66" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#FFFF66</span></td> <td bgcolor="#ffff33" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#FFFF33</span></td> <td bgcolor="#ffff00" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#FFFF00</span></td> </tr> <tr> <td bgcolor="#ffccff" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#FFCCFF</span></td> <td bgcolor="#ffcccc" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#FFCCCC</span></td> <td bgcolor="#ffcc99" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#FFCC99</span></td> <td bgcolor="#ffcc66" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#FFCC66</span></td> <td bgcolor="#ffcc33" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#FFCC33</span></td> <td bgcolor="#ffcc00" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#FFCC00</span></td> </tr> <tr> <td bgcolor="#ff99ff" class="mbt_out" valign="top" width="90"><span style="color: #004000;">#FF99FF</span></td> <td bgcolor="#ff99cc" class="mbt_out" valign="top" width="88"><span style="color: #004000;">#FF99CC</span></td> <td bgcolor="#ff9999" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#FF9999</span></td> <td bgcolor="#ff9966" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#FF9966</span></td> <td bgcolor="#ff9933" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#FF9933</span></td> <td bgcolor="#ff9900" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#FF9900</span></td> </tr> <tr> <td bgcolor="#ff66ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#FF66FF</span></td> <td bgcolor="#ff66cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#FF66CC</span></td> <td bgcolor="#ff6699" class="mbt_out" valign="top" width="87"><span style="color: white;">#FF6699</span></td> <td bgcolor="#ff6666" class="mbt_out" valign="top" width="87"><span style="color: white;">#FF6666</span></td> <td bgcolor="#ff6633" class="mbt_out" valign="top" width="87"><span style="color: white;">#FF6633</span></td> <td bgcolor="#ff6600" class="mbt_out" valign="top" width="96"><span style="color: white;">#FF6600</span></td> </tr> <tr> <td bgcolor="#ff33ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#FF33FF</span></td> <td bgcolor="#ff33cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#FF33CC</span></td> <td bgcolor="#ff3399" class="mbt_out" valign="top" width="87"><span style="color: white;">#FF3399</span></td> <td bgcolor="#ff3366" class="mbt_out" valign="top" width="87"><span style="color: white;">#FF3366</span></td> <td bgcolor="#ff3333" class="mbt_out" valign="top" width="87"><span style="color: white;">#FF3333</span></td> <td bgcolor="#ff3300" class="mbt_out" valign="top" width="96"><span style="color: white;">#FF3300</span></td> </tr> <tr> <td bgcolor="#ff00ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#FF00FF</span></td> <td bgcolor="#ff00cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#FF00CC</span></td> <td bgcolor="#ff0099" class="mbt_out" valign="top" width="87"><span style="color: white;">#FF0099</span></td> <td bgcolor="#ff0066" class="mbt_out" valign="top" width="87"><span style="color: white;">#FF0066</span></td> <td bgcolor="#ff0033" class="mbt_out" valign="top" width="87"><span style="color: white;">#FF0033</span></td> <td bgcolor="#ff0000" class="mbt_out" valign="top" width="96"><span style="color: white;">#FF0000</span></td> </tr> </tbody></table> </center> <center> <table border="0" cellpadding="4" cellspacing="2" style="width: 551px;"><tbody> <tr> <td bgcolor="#ccffff" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#CCFFFF</span> </td> <td bgcolor="#ccffcc" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#CCFFCC</span></td> <td bgcolor="#ccff99" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#CCFF99</span></td> <td bgcolor="#ccff66" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#CCFF66</span></td> <td bgcolor="#ccff33" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#CCFF33</span></td> <td bgcolor="#ccff00" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#CCFF00</span></td> </tr> <tr> <td bgcolor="#ccccff" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#CCCCFF</span></td> <td bgcolor="#cccccc" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#CCCCCC</span></td> <td bgcolor="#cccc99" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#CCCC99</span></td> <td bgcolor="#cccc66" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#CCCC66</span></td> <td bgcolor="#cccc33" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#CCCC33</span></td> <td bgcolor="#cccc00" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#CCCC00</span></td> </tr> <tr> <td bgcolor="#cc99ff" class="mbt_out" valign="top" width="90"><span style="color: #004000;">#CC99FF</span></td> <td bgcolor="#cc99cc" class="mbt_out" valign="top" width="88"><span style="color: #004000;">#CC99CC</span></td> <td bgcolor="#cc9999" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#CC9999</span></td> <td bgcolor="#cc9966" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#CC9966</span></td> <td bgcolor="#cc9933" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#CC9933</span></td> <td bgcolor="#cc9900" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#CC9900</span></td> </tr> <tr> <td bgcolor="#cc66ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#CC66FF</span></td> <td bgcolor="#cc66cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#CC66CC</span></td> <td bgcolor="#cc6699" class="mbt_out" valign="top" width="87"><span style="color: white;">#CC6699</span></td> <td bgcolor="#cc6666" class="mbt_out" valign="top" width="87"><span style="color: white;">#CC6666</span></td> <td bgcolor="#cc6633" class="mbt_out" valign="top" width="87"><span style="color: white;">#CC6633</span></td> <td bgcolor="#cc6600" class="mbt_out" valign="top" width="96"><span style="color: white;">#CC6600</span></td> </tr> <tr> <td bgcolor="#cc33ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#CC33FF</span></td> <td bgcolor="#cc33cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#CC33CC</span></td> <td bgcolor="#cc3399" class="mbt_out" valign="top" width="87"><span style="color: white;">#CC3399</span></td> <td bgcolor="#cc3366" class="mbt_out" valign="top" width="87"><span style="color: white;">#CC3366</span></td> <td bgcolor="#cc3333" valign="top" width="87"><span style="color: white;">#CC3333</span></td> <td bgcolor="#cc3300" class="mbt_out" valign="top" width="96"><span style="color: white;">#CC3300</span></td> </tr> <tr> <td bgcolor="#cc00ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#CC00FF</span></td> <td bgcolor="#cc00cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#CC00CC</span></td> <td bgcolor="#cc0099" class="mbt_out" valign="top" width="87"><span style="color: white;">#CC0099</span></td> <td bgcolor="#cc0066" class="mbt_out" valign="top" width="87"><span style="color: white;">#CC0066</span></td> <td bgcolor="#cc0033" class="mbt_out" valign="top" width="87"><span style="color: white;">#CC0033</span></td> <td bgcolor="#cc0000" class="mbt_out" valign="top" width="96"><span style="color: white;">#CC0000</span></td> </tr> </tbody></table> </center> <center>  </center> <center> <table border="0" cellpadding="4" cellspacing="2" style="width: 551px;"><tbody> <tr> <td bgcolor="#99ffff" class="mbt_out" valign="top" width="91"><span style="color: #004000;">#99FFFF</span> </td> <td bgcolor="#99ffcc" valign="top" width="89"><span style="color: #004000;">#99FFCC</span></td> <td bgcolor="#99ff99" valign="top" width="87"><span style="color: #004000;">#99FF99</span></td> <td bgcolor="#99ff66" valign="top" width="86"><span style="color: #004000;">#99FF66</span></td> <td bgcolor="#99ff33" class="mbt_out" valign="top" width="86"><span style="color: #004000;">#99FF33</span></td> <td bgcolor="#99ff00" valign="top" width="96"><span style="color: #004000;">#99FF00</span></td> </tr> <tr> <td bgcolor="#99ccff" valign="top" width="89"><span style="color: #004000;">#99CCFF</span></td> <td bgcolor="#99cccc" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#99CCCC</span></td> <td bgcolor="#99cc99" valign="top" width="87"><span style="color: #004000;">#99CC99</span></td> <td bgcolor="#99cc66" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#99CC66</span></td> <td bgcolor="#99cc33" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#99CC33</span></td> <td bgcolor="#99cc00" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#99CC00</span></td> </tr> <tr> <td bgcolor="#9999ff" valign="top" width="90"><span style="color: #004000;">#9999FF</span></td> <td bgcolor="#9999cc" valign="top" width="88"><span style="color: #004000;">#9999CC</span></td> <td bgcolor="#999999" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#999999</span></td> <td bgcolor="#999966" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#999966</span></td> <td bgcolor="#999933" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#999933</span></td> <td bgcolor="#999900" valign="top" width="96"><span style="color: #004000;">#999900</span></td> </tr> <tr> <td bgcolor="#9966ff" valign="top" width="90"><span style="color: white;">#9966FF</span></td> <td bgcolor="#9966cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#9966CC</span></td> <td bgcolor="#996699" class="mbt_out" valign="top" width="87"><span style="color: white;">#996699</span></td> <td bgcolor="#996666" class="mbt_out" valign="top" width="87"><span style="color: white;">#996666</span></td> <td bgcolor="#999933" class="mbt_out" valign="top" width="87"><span style="color: white;">#999933</span></td> <td bgcolor="#999900" valign="top" width="96"><span style="color: white;">#999900</span></td> </tr> <tr> <td bgcolor="#9933ff" valign="top" width="90"><span style="color: white;">#9933FF</span></td> <td bgcolor="#9933cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#9933CC</span></td> <td bgcolor="#993399" class="mbt_out" valign="top" width="87"><span style="color: white;">#993399</span></td> <td bgcolor="#993366" class="mbt_out" valign="top" width="87"><span style="color: white;">#993366</span></td> <td bgcolor="#993333" valign="top" width="87"><span style="color: white;">#993333</span></td> <td bgcolor="#993300" valign="top" width="96"><span style="color: white;">#993300</span></td> </tr> <tr> <td bgcolor="#9900ff" valign="top" width="90"><span style="color: white;">#9900FF</span></td> <td bgcolor="#9900cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#9900CC</span></td> <td bgcolor="#990099" valign="top" width="87"><span style="color: white;">#990099</span></td> <td bgcolor="#990066" valign="top" width="87"><span style="color: white;">#990066</span></td> <td bgcolor="#990033" class="mbt_out" valign="top" width="87"><span style="color: white;">#990033</span></td> <td bgcolor="#990000" class="mbt_out" valign="top" width="96"><span style="color: white;">#990000</span></td> </tr> </tbody></table> </center> <center> <table border="0" cellpadding="4" cellspacing="2" style="width: 551px;"><tbody> <tr> <td bgcolor="#66ffff" valign="top" width="91"><span style="color: #004000;">#66FFFF</span> </td> <td bgcolor="#66ffcc" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#66FFCC</span></td> <td bgcolor="#66ff99" valign="top" width="87"><span style="color: #004000;">#66FF99</span></td> <td bgcolor="#66ff66" valign="top" width="86"><span style="color: #004000;">#66FF66</span></td> <td bgcolor="#66ff33" class="mbt_out" valign="top" width="86"><span style="color: #004000;">#66FF33</span></td> <td bgcolor="#66ff00" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#66FF00</span></td> </tr> <tr> <td bgcolor="#66ccff" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#66CCFF</span></td> <td bgcolor="#66cccc" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#66CCCC</span></td> <td bgcolor="#66cc99" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#66CC99</span></td> <td bgcolor="#66cc66" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#66CC66</span></td> <td bgcolor="#66cc33" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#66CC33</span></td> <td bgcolor="#66cc00" valign="top" width="96"><span style="color: #004000;">#66CC00</span></td> </tr> <tr> <td bgcolor="#6699ff" class="mbt_out" valign="top" width="90"><span style="color: #004000;">#6699FF</span></td> <td bgcolor="#6699cc" class="mbt_out" valign="top" width="88"><span style="color: #004000;">#6699CC</span></td> <td bgcolor="#669999" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#669999</span></td> <td bgcolor="#669966" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#669966</span></td> <td bgcolor="#669933" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#669933</span></td> <td bgcolor="#669900" valign="top" width="96"><span style="color: #004000;">#669900</span></td> </tr> <tr> <td bgcolor="#6666ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#6666FF</span> </td> <td bgcolor="#6666cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#6666CC</span> </td> <td bgcolor="#666699" valign="top" width="87"><span style="color: white;">#666699</span> </td> <td bgcolor="#666666" class="mbt_out" valign="top" width="87"><span style="color: white;">#666666</span> </td> <td bgcolor="#666633" class="mbt_out" valign="top" width="87"><span style="color: white;">#666633</span> </td> <td bgcolor="#666600" valign="top" width="96"><span style="color: white;">#666600</span> </td> </tr> <tr> <td bgcolor="#6633ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#6633FF</span> </td> <td bgcolor="#6633cc" valign="top" width="88"><span style="color: white;">#6633CC</span> </td> <td bgcolor="#663399" class="mbt_out" valign="top" width="87"><span style="color: white;">#663399</span> </td> <td bgcolor="#663366" class="mbt_out" valign="top" width="87"><span style="color: white;">#663366</span> </td> <td bgcolor="#663333" class="mbt_out" valign="top" width="87"><span style="color: white;">#663333</span> </td> <td bgcolor="#663300" valign="top" width="96"><span style="color: white;">#663300</span> </td> </tr> <tr> <td bgcolor="#6600ff" valign="top" width="90"><span style="color: white;">#6600FF</span> </td> <td bgcolor="#6600cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#6600CC</span> </td> <td bgcolor="#660099" class="mbt_out" valign="top" width="87"><span style="color: white;">#660099</span> </td> <td bgcolor="#660066" valign="top" width="87"><span style="color: white;">#660066</span> </td> <td bgcolor="#660033" valign="top" width="87"><span style="color: white;">#660033</span> </td> <td bgcolor="#660000" valign="top" width="96"><span style="color: white;">#660000</span> </td> </tr> </tbody></table> </center> <center> <table border="0" cellpadding="4" cellspacing="2" style="width: 551px;"><tbody> <tr> <td bgcolor="#33ffff" class="mbt_out" valign="top" width="91"><span style="color: #004000;">#33FFFF</span> </td> <td bgcolor="#33ffcc" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#33FFCC</span></td> <td bgcolor="#33ff99" valign="top" width="87"><span style="color: #004000;">#33FF99</span></td> <td bgcolor="#33ff66" valign="top" width="86"><span style="color: #004000;">#33FF66</span></td> <td bgcolor="#33ff33" class="mbt_out" valign="top" width="86"><span style="color: #004000;">#33FF33</span></td> <td bgcolor="#33ff00" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#33FF00</span></td> </tr> <tr> <td bgcolor="#03ccf0" valign="top" width="89"><span style="color: #004000;">#33CCFF</span></td> <td bgcolor="#33cccc" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#33CCCC</span></td> <td bgcolor="#33cc99" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#33CC99</span></td> <td bgcolor="#33cc66" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#33CC66</span></td> <td bgcolor="#33cc33" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#33CC33</span></td> <td bgcolor="#33cc00" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#33CC00</span></td> </tr> <tr> <td bgcolor="#3399ff" class="mbt_out" valign="top" width="90"><span style="color: #004000;">#3399FF</span></td> <td bgcolor="#3399cc" class="mbt_out" valign="top" width="88"><span style="color: #004000;">#3399CC</span></td> <td bgcolor="#339999" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#339999</span></td> <td bgcolor="#339966" valign="top" width="87"><span style="color: #004000;">#339966</span></td> <td bgcolor="#339933" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#339933</span></td> <td bgcolor="#339900" valign="top" width="96"><span style="color: #004000;">#339900</span></td> </tr> <tr> <td bgcolor="#3366ff" valign="top" width="90"><span style="color: white;">#3366FF</span> </td> <td bgcolor="#3366cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#3366CC</span> </td> <td bgcolor="#336699" class="mbt_out" valign="top" width="87"><span style="color: white;">#336699</span> </td> <td bgcolor="#336666" valign="top" width="87"><span style="color: white;">#336666</span> </td> <td bgcolor="#336633" valign="top" width="87"><span style="color: white;">#336633</span> </td> <td bgcolor="#336600" class="mbt_out" valign="top" width="96"><span style="color: white;">#336600</span> </td> </tr> <tr> <td bgcolor="#3333ff" valign="top" width="90"><span style="color: white;">#3333FF</span> </td> <td bgcolor="#3333cc" valign="top" width="88"><span style="color: white;">#3333CC</span> </td> <td bgcolor="#333399" class="mbt_out" valign="top" width="87"><span style="color: white;">#333399</span> </td> <td bgcolor="#333366" class="mbt_out" valign="top" width="87"><span style="color: white;">#333366</span> </td> <td bgcolor="#333333" valign="top" width="87"><span style="color: white;">#333333</span> </td> <td bgcolor="#333300" class="mbt_out" valign="top" width="96"><span style="color: white;">#333300</span> </td> </tr> <tr> <td bgcolor="#3300ff" valign="top" width="90"><span style="color: white;">#3300FF</span> </td> <td bgcolor="#3300cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#3300CC</span> </td> <td bgcolor="#330099" class="mbt_out" valign="top" width="87"><span style="color: white;">#330099</span> </td> <td bgcolor="#330066" class="mbt_out" valign="top" width="87"><span style="color: white;">#330066</span> </td> <td bgcolor="#330033" valign="top" width="87"><span style="color: white;">#330033</span> </td> <td bgcolor="#330000" valign="top" width="96"><span style="color: white;">#330000</span> </td> </tr> </tbody></table> </center> <center> <table border="0" cellpadding="4" cellspacing="2" style="width: 551px;"><tbody> <tr> <td bgcolor="#00ffff" class="mbt_out" valign="top" width="91"><span style="color: #004000;">#00FFFF</span> </td> <td bgcolor="#00ffcc" valign="top" width="89"><span style="color: #004000;">#00FFCC</span></td> <td bgcolor="#00ff99" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#00FF99</span></td> <td bgcolor="#00ff66" class="mbt_out" valign="top" width="86"><span style="color: #004000;">#00FF66</span></td> <td bgcolor="#00ff33" valign="top" width="86"><span style="color: #004000;">#00FF33</span></td> <td bgcolor="#00ff00" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#00FF00</span></td> </tr> <tr> <td bgcolor="#00ccff" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#00CCFF</span></td> <td bgcolor="#00cccc" class="mbt_out" valign="top" width="89"><span style="color: #004000;">#00CCCC</span></td> <td bgcolor="#00cc99" valign="top" width="87"><span style="color: #004000;">#00CC99</span></td> <td bgcolor="#00cc66" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#00CC66</span></td> <td bgcolor="#00cc33" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#00CC33</span></td> <td bgcolor="#00cc00" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#00CC00</span></td> </tr> <tr> <td bgcolor="#0099ff" class="mbt_out" valign="top" width="90"><span style="color: #004000;">#0099FF</span></td> <td bgcolor="#0099cc" class="mbt_out" valign="top" width="88"><span style="color: #004000;">#0099CC</span></td> <td bgcolor="#009999" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#009999</span></td> <td bgcolor="#009966" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#009966</span></td> <td bgcolor="#009933" class="mbt_out" valign="top" width="87"><span style="color: #004000;">#009933</span></td> <td bgcolor="#009900" class="mbt_out" valign="top" width="96"><span style="color: #004000;">#009900</span></td> </tr> <tr> <td bgcolor="#0066ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#0066FF</span> </td> <td bgcolor="#0066cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#0066CC</span> </td> <td bgcolor="#006699" class="mbt_out" valign="top" width="87"><span style="color: white;">#006699</span> </td> <td bgcolor="#006666" class="mbt_out" valign="top" width="87"><span style="color: white;">#006666</span> </td> <td bgcolor="#006633" valign="top" width="87"><span style="color: white;">#006633</span> </td> <td bgcolor="#006600" valign="top" width="96"><span style="color: white;">#006600</span> </td> </tr> <tr> <td bgcolor="#0033ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#0033FF</span></td> <td bgcolor="#0033cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#0033CC</span></td> <td bgcolor="#003399" valign="top" width="87"><span style="color: white;">#003399</span> </td> <td bgcolor="#003366" class="mbt_out" valign="top" width="87"><span style="color: white;">#003366</span> </td> <td bgcolor="#003333" class="mbt_out" valign="top" width="87"><span style="color: white;">#003333</span> </td> <td bgcolor="#003300" valign="top" width="96"><span style="color: white;">#003300</span> </td> </tr> <tr> <td bgcolor="#0000ff" class="mbt_out" valign="top" width="90"><span style="color: white;">#0000FF</span> </td> <td bgcolor="#0000cc" class="mbt_out" valign="top" width="88"><span style="color: white;">#0000CC</span> </td> <td bgcolor="#000099" class="mbt_out" valign="top" width="87"><span style="color: white;">#000099</span> </td> <td bgcolor="#000066" valign="top" width="87"><span style="color: white;">#000066</span> </td> <td bgcolor="#000033" class="mbt_out" valign="top" width="87"><span style="color: white;">#000033</span> </td> <td bgcolor="#000000" class="mbt_out" valign="top" width="96"><span style="color: white;">#000000</span> </td> </tr> </tbody></table> </center> <br /> <span style="font-size: xx-small;">©<span style="font-family: Courier New;"> 2009 MBT. All rights reserved This chart was gotten from <a href="http://www.mybloggertricks.com/" target="_blank">MY Blogger Tricks</a></span></span><br /> </span></div> <div style="text-align: justify;"> <script type="text/javascript"> <!-- var _adynamo_client = "d77da6ea-69b0-49e9-948f-1452fc91ec5d"; var _adynamo_width = 500; var _adynamo_height = 60; //--> </script> <script src="http://static.addynamo.net/ad/js/deliverAds.js" type="text/javascript"></script></div>

HTML Tips Tutorials Latest Tips>> Embeddable “CSS Color Chart” – 216 Hexadecimal Values

Below is an embeddable Web Colour Chart most probably known as hexadecimal colour chart . The chart below consists of a total 216 hexadec...

Read more »

Lock Donload Link With Share To Unlock Widget in Blogger

<div style="text-align: justify;"> <span style="font-family: Georgia, Times New Roman, serif;">This Social Locker (Share-To-Unlock) widget consists of three social buttons and a locker displaying horizontally. The Social buttons consist of Facebook, Twitter and Google plus. Whenever, a person would either press Like, Tweet or Plus one button it would display the hidden content. This allows a person to get more real social followers.</span></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnYSPd47HihyphenhyphenqsLA-phAPLRRu9Jym27dUc0dPEvVJvbbKBtPLYB7V3uivW5jQUKYlBRPHK7UrXuGnCQkfTSroQcARnkOoXP29WNomwVyK_tNncEmcns6sjZDC_USp-Yqk4T7emWHOBrJo/s1600/How+To+Create+a+Social+Content+Locker+in+Blogger+BlogSpot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnYSPd47HihyphenhyphenqsLA-phAPLRRu9Jym27dUc0dPEvVJvbbKBtPLYB7V3uivW5jQUKYlBRPHK7UrXuGnCQkfTSroQcARnkOoXP29WNomwVyK_tNncEmcns6sjZDC_USp-Yqk4T7emWHOBrJo/s1600/How+To+Create+a+Social+Content+Locker+in+Blogger+BlogSpot.png" /></a></div> <div style="background-color: white; border: medium none; color: black; overflow: hidden; text-align: left; text-decoration: none;"> <br /><div> <div style="text-align: justify;"> <h3> <span style="font-family: Georgia, Times New Roman, serif; font-size: medium;">How To Add Social Content Locker in Blogger?</span></h3> </div> </div> <div style="text-align: justify;"> <span style="font-family: Georgia, Times New Roman, serif;"><br /></span></div> <div style="text-align: justify;"> <span style="font-family: Georgia, Times New Roman, serif;">The Steps are extremely straightforward and easy that even a novice can do it. You musnt be a HTML guru or whatever because all we have to do is to copy paste the code into your blogger template editor. <i>Follow the following instructions. </i></span></div> <div style="text-align: justify;"> <i> </i></div> <div style="text-align: justify;"> <i><span style="font-family: Georgia, Times New Roman, serif;"><br /></span></i></div> <div style="text-align: justify;"> <i> </i></div> <div> <div style="text-align: justify;"> <i> </i></div> <div> <div style="text-align: justify;"> <i> </i></div> <ul style="text-align: justify;"> <li><span style="font-family: Georgia, 'Times New Roman', serif;"><i>Go To <span style="background-color: white;"><b>Blogger.com</b> >> <b>Template </b>>> <b>Edit HTML</b></span></i><span style="background-color: white;">.</span></span></li> <li><span style="font-family: Georgia, 'Times New Roman', serif;">Search for <span style="background-color: white;"><i><b></head></b></i></span> just and above it paste the following CSS Coding.</span></li> </ul> </div> </div> <div> <blockquote class="tr_bq"> <blockquote class="tr_bq"> <span style="font-family: Georgia, Times New Roman, serif;"><link href='https://dl.dropboxusercontent.com/u/137869302/lockercss.css' rel='stylesheet' type='text/css'/></span></blockquote> </blockquote> </div> <blockquote class="tr_bq"> <span style="color: #0b5394; font-family: Georgia, Times New Roman, serif;"><span style="font-size: medium;"></span><a href="http://www.digitalhubinc.com/2013/02/How-to-create-Responsive-google-adsense-ads-on-your-website-2013.html" target="_blank"></a></span></blockquote> <div> <ul> <li><span style="font-family: Georgia, 'Times New Roman', serif;">After pasting the coding save the template and proceed to next step.</span></li> </ul> </div> <div> <div style="text-align: justify;"> <h3> <span style="font-size: medium;">How To Add Social Content Locker in Blogger</span></h3> </div> </div> <div style="text-align: justify;"> <div> <span style="font-family: Georgia, Times New Roman, serif;">Whenever you wants to add a Social Content locker in an article or post, just follow the following instructions. </span></div> <div> <i><span style="font-family: Georgia, Times New Roman, serif;"><b>Remember: </b>The same steps can also be used on Gadget Area and even in a template.  </span></i></div> </div> <div style="text-align: justify;"> </div> <div> <div> <ul style="text-align: justify;"> <li><span style="font-family: Georgia, 'Times New Roman', serif;">Go To <b>Blogger.com </b>>> <b><i>New Post</i></b>.</span></li> <li><span style="font-family: Georgia, 'Times New Roman', serif;">Select the <b>HTML Tab</b> from the blogger post editor and paste the following coding.</span></li> </ul> <div> <blockquote class="tr_bq"> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><article id="default-usage"></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><div class="to-lock" style="display: none;"></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">        </span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="color: #6aa84f; font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><!--Hidden Content Starts (You can Use HTML BELOW)--></span></div> <span style="background-color: white; font-family: inherit; font-size: 14px; line-height: 18px; list-style: none; margin: 0px; outline: none; padding: 0px;"></span><br /><span style="background-color: white; font-family: inherit; font-size: 14px; line-height: 18px; list-style: none; margin: 0px; outline: none; padding: 0px;"></span><span style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;"></span><span style="background-color: white; font-family: inherit; font-size: 14px; line-height: 18px; list-style: none; margin: 0px; outline: none; padding: 0px;"><span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"></span></span> <br /> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><div style="text-align: center; margin-bottom: 20px;"></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><img src="<span style="background-color: #9fc5e8; list-style: none; margin: 0px; outline: none; padding: 0px;">Add_Hidden_Image_Here</span>" alt="" style="margin: auto;" /></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"></div></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><div style="text-align: justify"></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="background-color: orange; font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">Add Your Hidden Text Here</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"></div></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="color: #6aa84f; list-style: none; margin: 0px; outline: none; padding: 0px;"><!--Hidden Content Ends (You can Use HTML ABOVE</span><span style="color: #6aa84f; list-style: none; margin: 0px; outline: none; padding: 0px;">)</span><span style="color: #6aa84f; list-style: none; margin: 0px; outline: none; padding: 0px;">--></span></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"></article> </span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"></div><div id="mblunlocker"> </div></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><script type="text/javascript" src="https://dl.dropboxusercontent.com/u/137869302/lockers.js"></script></span></div> <span style="background-color: white; font-family: inherit; font-size: 14px; line-height: 18px; list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="list-style: none; margin: 0px; outline: none; padding: 0px; text-align: left; white-space: pre;"> </span><span class="Apple-tab-span" style="list-style: none; margin: 0px; outline: none; padding: 0px; white-space: pre;"></span></span><br /> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><script></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">jQuery(document).ready(function ($) {</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">$("#default-usage .to-lock").socialLock({</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">text: {</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">header: "Share it To Unlock This Content",</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">message: "Yes, this is Social Locker. Just try it, click on one of buttons."</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">},</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">style: "ui-social-locker-secrets",</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">buttons: {</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">order: ["twitter", "facebook", "google"]</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">},</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">// twitter options</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">twitter: {</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">url: "<span style="background-color: cyan; list-style: none; margin: 0px; outline: none; padding: 0px;">http://twitter.com/StefnSylvester</span>",</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">text: "Upgrade your social buttons to get more social traffic!"</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">},</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">// facebook options</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">facebook: {</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">url: "<span style="background-color: #d0e0e3; list-style: none; margin: 0px; outline: none; padding: 0px;">http://www.facebook.com/XclusiveTech</span>",</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">appId: "<span style="background-color: #d9d2e9; list-style: none; margin: 0px; outline: none; padding: 0px;">408184442589211</span>"</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">},</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">google: {</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">url: "<span style="background-color: #d9ead3; list-style: none; margin: 0px; outline: none; padding: 0px;">http://xclusivedroidapk.blogspot.com/</span>"</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">}</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">});</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">});;;;</span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;">        </span></div> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"></script></span></div> </blockquote> </div> <blockquote> </blockquote> </div> <blockquote> </blockquote> </div> <blockquote> <div style="background-color: white; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px; text-align: left;"> <span style="font-family: inherit; list-style: none; margin: 0px; outline: none; padding: 0px;"><br /></span></div> </blockquote> <div style="background-color: white; text-align: left;"> <span style="list-style: none; margin: 0px; outline: none; padding: 0px;"></span><br /> <div> <span style="list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="font-family: Georgia, Times New Roman, serif; font-size: medium;"><span style="line-height: 18px;">Customization</span></span></span></div> <span style="list-style: none; margin: 0px; outline: none; padding: 0px;"> </span> <br /> <div> <ul style="text-align: left;"><span style="list-style: none; margin: 0px; outline: none; padding: 0px;"> <li><span style="font-family: Georgia, Times New Roman, serif;"><b style="background-color: transparent; color: #333333; line-height: 1.8em;">For Facebook: </b><span style="background-color: transparent; color: #333333; line-height: 1.8em;">Replace </span><span style="background-color: cyan; color: #333333; line-height: 1.8em; list-style: none; margin: 0px; outline: none; padding: 0px;">http://www.facebook.com/<span style="color: black;"><span style="font-family: Georgia,'Times New Roman',serif;">XclusiveTe<span style="color: black;">ch</span></span></span></span><span style="background-color: transparent; color: #333333; line-height: 1.8em;"> with your Facebook Page.</span></span></li> <li><span style="font-family: Georgia, Times New Roman, serif;"><b style="background-color: transparent; color: #333333; line-height: 1.8em;">For Twitter:</b><span style="background-color: transparent; color: #333333; line-height: 1.8em;"> Replace </span><span style="background-color: #cfe2f3; list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="color: #333333;"><span style="line-height: 28.796875px;">http://www.twitter.com/StefnSylvester</span></span></span><span style="background-color: transparent; color: #333333; line-height: 1.8em;"> with your Website's URL or etc. </span></span></li> <li><span style="font-family: Georgia, Times New Roman, serif;"><b style="background-color: transparent; color: #333333; line-height: 1.8em;">For Google+: </b><span style="background-color: transparent; color: #333333; line-height: 1.8em;">Replace http://xclusivedroidapk.blogspot.com/</span><span style="background-color: transparent; color: #333333; line-height: 1.8em;"><span style="background-color: #d9ead3; color: black; font-family: Consolas, 'Courier New', Monaco, Courier, monospace; font-size: 14px; line-height: 18px;"></span> with the URL of your website or post.</span></span></li> <li><span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: transparent; color: #333333; line-height: 1.8em;">Replace </span><span style="background-color: #9fc5e8; color: #333333; line-height: 1.8em; list-style: none; margin: 0px; outline: none; padding: 0px;">Add_Hidden_Image_Here</span><span style="background-color: transparent; color: #333333; line-height: 1.8em;"> with the Image that you want to Hide.</span></span></li> <li><span style="font-family: Georgia, Times New Roman, serif;"><span style="background-color: transparent; color: #333333; line-height: 1.8em;">Replace "</span><span style="background-color: orange; color: #333333; line-height: 1.8em; list-style: none; margin: 0px; outline: none; padding: 0px;">Add Your Hidden Text Here</span><span style="background-color: transparent; color: #333333; line-height: 1.8em;">" With the text that you want to hide from users.</span></span></li> </span></ul> <div style="color: #333333; line-height: 25.1875px; text-align: justify;"> <span style="list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="font-family: Georgia, Times New Roman, serif;"><span style="color: red; list-style: none; margin: 0px; outline: none; padding: 0px;">Remember: </span>Don't forgot to Add Facebook App ID otherwise the Facebook Like button will not appear properly. i.e. Replace </span><span style="background-color: #d9d2e9; color: black; line-height: 18px; text-align: left;"><span style="font-family: Georgia, Times New Roman, serif;">408184442589211</span></span><span style="font-family: Georgia, Times New Roman, serif;"> from above coding. </span></span></span></div> <div style="color: #333333; line-height: 25.1875px;"> <span style="list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="font-family: Georgia, Times New Roman, serif;"><br /></span></span></span></div> <div style="color: #333333; line-height: 25.1875px;"> <span style="list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="font-family: Georgia, Times New Roman, serif;"><b>Bravo!!!: </b>That's All, we hope this widget would help everyone to magnetize more social followers on your website. Feel free to leave your comment.</span></span></span></div> </div> <span style="list-style: none; margin: 0px; outline: none; padding: 0px;"> </span> <br /> <div> <span style="list-style: none; margin: 0px; outline: none; padding: 0px;"><span style="font-family: Georgia, Times New Roman, serif; font-size: medium;"><span style="line-height: 18px;"><br /></span></span></span></div> <span style="list-style: none; margin: 0px; outline: none; padding: 0px;"> </span> <br /> <div style="line-height: 18px;"> <i><b><span style="font-size: x-small;"><span style="list-style: none outside none; margin: 0px; outline: medium none; padding: 0px;"><span style="font-family: Georgia,Times New Roman,serif;"><span>Widget Created By :</span> <a href="http://www.mybloggerlab.com/">http://www.mybloggerlab.com/</a> <span style="color: #333333; line-height: 25.1875px;"> </span></span></span></span></b></i></div> <i><b><span style="font-size: x-small;"> <span style="list-style: none outside none; margin: 0px; outline: medium none; padding: 0px;"> </span> </span></b></i><div style="line-height: 18px;"> <i><b><span style="font-size: x-small;"><span style="list-style: none outside none; margin: 0px; outline: medium none; padding: 0px;"><span style="font-family: Georgia,Times New Roman,serif;">[ <a href="https://plus.google.com/106374439082237286396/posts" rel="nofollow" style="color: #0084ce; line-height: 25.1875px; list-style: none outside none; margin: 0px; outline: medium none; padding: 0px; text-decoration: none;">Syed Faizan Ali</a><span style="color: #333333; line-height: 25.1875px;"> (Founder of MyBloggerLab)]</span></span></span></span></b></i></div> </div> <br /></div> <script type="text/javascript"> <!-- var _adynamo_client = "d77da6ea-69b0-49e9-948f-1452fc91ec5d"; var _adynamo_width = 500; var _adynamo_height = 60; //--> </script> <script src="http://static.addynamo.net/ad/js/deliverAds.js" type="text/javascript"></script>

How-To Tutorials Widgets Lock Donload Link With Share To Unlock Widget in Blogger

This Social Locker (Share-To-Unlock) widget consists of three social buttons and a locker displaying horizontally. The Social buttons con...

Read more »

Amazon Cloud Services Reviewed - Taking care of Everything

<h3 class="MsoNormal" style="text-align: justify;"> </h3> <div class="MsoNormal" style="text-align: justify;"> <b><i><span lang="EN-US"></span></i></b></div> <div class="MsoNormal" style="text-align: justify;"> <span lang="EN-US">Amazon have been using their EC2 cloud for providing a number of different types of services to the end users, individuals or, more often, companies. They have a number of services they can provide, including computing and networking services, storage and content delivery network, database, analytics as well as deployment and management services. However, this article will focus on some of their more popular application services, which usually provide businesses with access to different applications, without having to upgrade their infrastructure, or hire IT staff responsible for updating the apps and maintaining them.</span></div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXUJPj_Dz-eHe2CmT8vCK3EsS1sS6xqnL3gofCGSyjmUsIhK-hqEeF_aIjqfo2DA2hJTO4K6eli1ArvNIpA7Bx0XUGJMOPiIHtUaioP9M5Thzw8Z0FswmtNa869pxQpgU9z_HvCtc7OXo/s1600/Cloud+Search.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="193" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXUJPj_Dz-eHe2CmT8vCK3EsS1sS6xqnL3gofCGSyjmUsIhK-hqEeF_aIjqfo2DA2hJTO4K6eli1ArvNIpA7Bx0XUGJMOPiIHtUaioP9M5Thzw8Z0FswmtNa869pxQpgU9z_HvCtc7OXo/s1600/Cloud+Search.jpg" width="400" /></a></div> <br /> <div class="separator" style="clear: both; text-align: center;"> </div> <br /> <h3 class="MsoNormal" style="text-align: justify;"> <b style="mso-bidi-font-weight: normal;"><span lang="EN-US">Amazon AppStream</span></b></h3> <div class="MsoNormal" style="text-align: justify;"> <span lang="EN-US">A relatively new service, which allows app developers to host their apps in Amazon’s cloud and distribute them to end users through convenient clients. The apps use the cloud’s resources to run, so hardware constraints are eliminated, and the fact that the app is centralized means that users of different platforms can easily access it through the platform specific client. This also means that it is much easier to update the app, and that it will be made available to a much larger group of users than it otherwise would.</span></div> <h3 class="MsoNormal" style="text-align: justify;"> <b style="mso-bidi-font-weight: normal;"><span lang="EN-US">Amazon Cloud Search</span></b></h3> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDbuJf7BV0g5ZxQJAdv2ASOa9hykq05UQ2kCjrbwm92NclnP45ed5WXKDiGN7OPvO7uJrbumBUpQiWi9vsBZd_lr4yNOOKPaM-6faFRFisVQt4vaqyhxTY75_V_nmySY-oaI5mG20vZY/s1600/images.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="121" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDbuJf7BV0g5ZxQJAdv2ASOa9hykq05UQ2kCjrbwm92NclnP45ed5WXKDiGN7OPvO7uJrbumBUpQiWi9vsBZd_lr4yNOOKPaM-6faFRFisVQt4vaqyhxTY75_V_nmySY-oaI5mG20vZY/s1600/images.jpg" width="200" /></a></div> <div class="MsoNormal" style="text-align: justify;"> <span lang="EN-US">This fully managed service allows you to easily add search capability to your website, without having to have an intimate knowledge of how search works, or how to implement it. You can create a database of searchable data, which will be used as the source for ensuing searches, and you don’t have to worry about the scaling as the volume of data increases, as it is automatically scaled. Likewise, since the cloud’s resources are used, you don’t have to worry about modifying your infrastructure.</span></div> <h3 class="MsoNormal" style="text-align: justify;"> <b style="mso-bidi-font-weight: normal;"><span lang="EN-US">Amazon Simple Email Service</span></b></h3> <div class="MsoNormal" style="text-align: justify;"> <span lang="EN-US">This service provides with a transactional and bulk emailing solution, that is not only easy to implement, but that is perfectly scalable, and for the most part, managed by the provider. Organizations that need to deal with bulk mailing know just how demanding this aspect of their business can be. Apart from some of them modifying their infrastructure to cover the needs of such a system, software requirements can be quite high as well. Dealing with third party providers of similar solution can also be somewhat complicated, which is why Amazon takes a huge part in the management of all your requirements, without demanding too much of your time.</span></div> <h3 class="MsoNormal" style="text-align: justify;"> <b style="mso-bidi-font-weight: normal;"><span lang="EN-US">Amazon Simple Workflow Service </span></b></h3> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzV4K-vHWAlbyL8bkLsBvUzj_fxiae2sl0A-vCqB785SfHc8vujMqiGlKg7zXSA7hHxjLOMxvm7aMNaLaSXTP-Yj1MKV-tJu1f3aCrn9YApMmZUE7H_vmfmqTgfHc-lW4rvS6yenYjZSs/s1600/Amazon+Cloud+Services.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzV4K-vHWAlbyL8bkLsBvUzj_fxiae2sl0A-vCqB785SfHc8vujMqiGlKg7zXSA7hHxjLOMxvm7aMNaLaSXTP-Yj1MKV-tJu1f3aCrn9YApMmZUE7H_vmfmqTgfHc-lW4rvS6yenYjZSs/s1600/Amazon+Cloud+Services.jpg" /></a></div> <div class="MsoNormal" style="text-align: justify;"> <span lang="EN-US">Another service aimed at app developers, SWF allows them to easily coordinate tasks and perform state management for their running apps. This includes data base creation, automating business processes, managing your cloud infrastructure services, and doing a number of other things that will make your life easier. Like other apps on the list, this one is distinguished by its scalability and the number of convenient options it provides you with.</span></div> <h3 class="MsoNormal" style="text-align: justify;"> <b style="mso-bidi-font-weight: normal;"><span lang="EN-US">Amazon Simple Notification Service</span></b></h3> <div class="MsoNormal" style="text-align: justify;"> <span lang="EN-US">SNS allows you to easily allow your iPhone, Android or other mobile device to give you cloud notifications, either by using push messages, or, if you prefer, with a text message. The service is very easy to set up, and allows you to constantly stay in the loop when it comes to your notifications, even when you don’t have access to your PC.</span></div> <div class="MsoNormal" style="text-align: justify;"> <br /></div> <div class="MsoNormal" style="text-align: justify;"> <b><i><span lang="EN-US">Guest Post: Leana Thorne: </span></i></b></div> <div class="MsoNormal" style="text-align: justify;"> <i style="mso-bidi-font-style: normal;"><span lang="EN-US">Leana Thorne is a devoted blogger and a regular contributor to several tech blogs. She enjoys exploring new internet technologies and sharing newly found information, and loves writing - especially about cloud and </span></i><span lang="EN-US"><a href="http://www.crucial.com.au/cloud/reseller-hosting">reseller hosting</a> <i style="mso-bidi-font-style: normal;">and is always happy to be of help. </i></span></div> <div class="MsoNormal" style="text-align: justify;"> <span lang="EN-US"><i style="mso-bidi-font-style: normal;"><b>You can find her on:</b> </i></span><span style="font-size: x-small;"><a href="http://www.google.com/url?q=http%3A%2F%2Fwww.linkedin.com%2Fpub%2Fleana-thorne%2F73%2F26a%2Fbb6%2F&sa=D&sntz=1&usg=AFQjCNG-ew-iN_k1n8je6wlPrxDqn1EIsw" target="_blank">LinkedIn</a> <span style="color: #444444;"><span style="color: #444444;"><span style="color: #666666;"><a href="https://plus.google.com/u/0/+LeanaThorne/" target="_blank">Google+</a></span></span></span>  </span><span style="color: #444444;"><span style="font-size: xx-small;"><span style="font-size: x-small;"><span style="color: #444444;"><span style="color: #666666;"><span style="color: #666666;"><a href="https://www.google.com/url?q=https%3A%2F%2Ftwitter.com%2FLeanaThorne&sa=D&sntz=1&usg=AFQjCNHOgpb2MrFyvhSTwgUGctZx-Z3WAA" target="_blank">Twitter </a></span></span></span></span><span style="color: #666666;"><span style="font-size: x-small;"><a href="https://www.google.com/url?q=https%3A%2F%2Fwww.facebook.com%2Fleana.thorne&sa=D&sntz=1&usg=AFQjCNGxpRw_3kqEpHjzQyGXCTvd8N4t4g" target="_blank">Facebook</a></span></span></span></span></div> <div class="MsoNormal" style="text-align: justify;"> <br /></div> <div style="text-align: justify;"> </div> <script type="text/javascript"> <!-- var _adynamo_client = "d77da6ea-69b0-49e9-948f-1452fc91ec5d"; var _adynamo_width = 500; var _adynamo_height = 60; //--> </script> <script src="http://static.addynamo.net/ad/js/deliverAds.js" type="text/javascript"></script>

Guest Post SEO Tutorials Web Design Amazon Cloud Services Reviewed - Taking care of Everything

Amazon have been using their EC2 cloud for providing a number of different types of services to the end users, individuals or, more o...

Read more »

How to Add Neat CSS3 Dropdown Menu in Blogger

This Tutorial was first shared from <a href="http://www.helplogger.blogspot.com/" target="_blank">HelpBlogger</a>. I found it very interesting and decided to share to my dear readers. And I hope it works out fine on your blogs.<br /> <br /> Here's an amazing dropdown menu with pure CSS3 made by Andrew from <a href="http://www.google.com/url?q=http%3A%2F%2Fscript-tutorials.com%2F&sa=D&sntz=1&usg=AFQjCNGkNlNni1VgN21PO-KYOZfJEeXhnA" style="color: blue;" target="_blank">script-tutorials.com</a>.<br /><br />In the upper right corner of this menu we have the contact links and the social media icons for Facebook, Twitter, Google Plus and RSS feed. Below these links, we have the drop-down navigation menu and on the left side, the search form. <br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzS2MxfzWgeNmf82FHC2P1OhoFGXHBw3sAx8DR_JDCMoObJlsC-UKY4vBdrqCt5kGbaSQPzuL5DDRmazy3Mt0zTRqFJ61ZDa2cQ7kF6aMTJqjWdgWhr84cQHBjWKy821_h7vpJg9dzEU/s1600/create-css3-dropdown-navigation-menu-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="270" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLzS2MxfzWgeNmf82FHC2P1OhoFGXHBw3sAx8DR_JDCMoObJlsC-UKY4vBdrqCt5kGbaSQPzuL5DDRmazy3Mt0zTRqFJ61ZDa2cQ7kF6aMTJqjWdgWhr84cQHBjWKy821_h7vpJg9dzEU/s1600/create-css3-dropdown-navigation-menu-in-blogger.png" width="640" /></a></div> <br />To achieve better user interface and interaction, the CSS dropdown menu features sub categories that appear with a nice touch of CSS3 <b>box-shadow</b>, <b>text-shadow</b> and a cool <b>transition</b> once the parent link is activated by a <b>hover</b>.<br /> <br /> <br /> Please visit <a href="http://www.google.com/url?q=http%3A%2F%2Fdemohelplogger1.blogspot.com%2F&sa=D&sntz=1&usg=AFQjCNG84nXYE0EurU8mM6ljnayNW5YQUA" rel="nofollow" style="color: blue;" target="_blank">this demo page</a> to see it in action.<br /><br /> <h3> <b><span style="color: #3d85c6;">Adding the CSS dropdown navigation menu in Blogger</span></b></h3> <span style="color: #3d85c6;"><b>Step 1.</b></span> Access your <a href="http://blogger.com/" rel="nofollow" style="color: blue;" target="_blank">Blogger Dashboard</a> and go to <b>Template</b> > click on the <b>Edit HTML</b> button<br /> <br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfQhZUSYTBSecKIYinVrM71LXrvkhqjGp3EwUnpZoGwcghHwAANv7gInMTYiFKkdGNUSvP4OSI_7pSC6Dto3GofUqdvXQYzRbtJ59Y8xzmDPTk7fOddtMSmmiusA57JWUuOU5nQ79zhQ/s1600/blogger_blogspot_template_edit_html_tutorial.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfQhZUSYTBSecKIYinVrM71LXrvkhqjGp3EwUnpZoGwcghHwAANv7gInMTYiFKkdGNUSvP4OSI_7pSC6Dto3GofUqdvXQYzRbtJ59Y8xzmDPTk7fOddtMSmmiusA57JWUuOU5nQ79zhQ/s1600/blogger_blogspot_template_edit_html_tutorial.png" /></a></div> <br /> <b><span style="color: #3d85c6;">Step 2. </span></b>Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag below inside the search box and hit Enter to find it.<br /> <blockquote> </header></blockquote> <b><span style="color: #3d85c6;">Step 3.</span></b> Just below <b></header></b> add the HTML structure:<br /><blockquote> <div id='contact-links'><br />    <div id='my-links'><br />        <a href='#'>About</a><br />        <a href='#'>Contact</a><br />                <a href='#'><img height='<b>18</b>px' src='<span style="color: blue;"><a href="http://www.google.com/url?q=http%3A%2F%2F3.bp.blogspot.com%2F-bsoTf8EpVbE%2FUw_W2HmlPOI%2FAAAAAAAAGXQ%2FRS57fNXl1tE%2Fs1600%2Ffacebook-icon.png&sa=D&sntz=1&usg=AFQjCNF6TB8iZ1Pzpu_DNNnMLVaEQl7B4A" target="_blank">http://3.bp.blogspot.com/<wbr></wbr>-bsoTf8EpVbE/Uw_W2HmlPOI/<wbr></wbr>AAAAAAAAGXQ/RS57fNXl1tE/s1600/<wbr></wbr>facebook-icon.png</a></span>' title='Facebook' width='<b>18</b>px'/></a><br /><a href='#'><img height='<b>18</b>px' src='<span style="color: blue;"><a href="http://www.google.com/url?q=http%3A%2F%2F2.bp.blogspot.com%2F-9OXxCWCilgM%2FUw_WNEqUShI%2FAAAAAAAAGXI%2F2T6Dc8zVrxA%2Fs1600%2Ftwitter.png&sa=D&sntz=1&usg=AFQjCNFN0zXUTOpSS9GWY4ChUucxTSGo5Q" target="_blank">http://2.bp.blogspot.com/<wbr></wbr>-9OXxCWCilgM/Uw_WNEqUShI/<wbr></wbr>AAAAAAAAGXI/2T6Dc8zVrxA/s1600/<wbr></wbr>twitter.png</a></span>' title='Twitter' width='<b>18</b>px' /></a><br />        <a href='#'><img height='<b>18</b>px' src='<span style="color: blue;"><a href="http://www.google.com/url?q=http%3A%2F%2F3.bp.blogspot.com%2F-LQABZjrBgiY%2FUw_X4zGqixI%2FAAAAAAAAGXo%2FjlR7r1blHso%2Fs1600%2Fgoogle-plus-icon.png&sa=D&sntz=1&usg=AFQjCNH1aUDRRNGUYqBomM2sSc-r2o86FA" target="_blank">http://3.bp.blogspot.com/<wbr></wbr>-LQABZjrBgiY/Uw_X4zGqixI/<wbr></wbr>AAAAAAAAGXo/jlR7r1blHso/s1600/<wbr></wbr>google-plus-icon.png</a></span>' title='Google' width='<b>18</b>px'/></a><br />        <a href='#'><img height='<b>18</b>px' src='<span style="color: blue;"><a href="http://www.google.com/url?q=http%3A%2F%2F1.bp.blogspot.com%2F-NsPs8DRJfP4%2FUw_XnNMAHTI%2FAAAAAAAAGXg%2FqC2kA_T-BdY%2Fs1600%2Frss-icon.png&sa=D&sntz=1&usg=AFQjCNFDXBkAWAiKQ_-ZvitFhF0OFI28mQ" target="_blank">http://1.bp.blogspot.com/<wbr></wbr>-NsPs8DRJfP4/Uw_XnNMAHTI/<wbr></wbr>AAAAAAAAGXg/qC2kA_T-BdY/s1600/<wbr></wbr>rss-icon.png</a></span>' title='RSS Feed' width='<b>18</b>px'/></a><br />    </div><br /><br />    <div id='menu-container'><br />        <nav id='neat-menu'><br />            <ul><br />              <li class='active'><a href='/'><span style="color: #0b5394;">Home</span></a></li><br />                <li><a href='#'><span style="color: #0b5394;">Dropdown</span></a><br />                    <span style="background-color: yellow;"><ul></span><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 1</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 2</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 3</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 4</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 5</span></a></li><br />                    <span style="background-color: yellow;"></ul></span><br />                </li><br />                <li><a href='#'><span style="color: #0b5394;">Dropdown</span></a><br />                    <span style="background-color: yellow;"><ul></span><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 1</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 2</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 3</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 4</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 5</span></a></li><br />                    <span style="background-color: yellow;"></ul></span><br />                </li><br />                <li><a href='#'><span style="color: #0b5394;">Dropdown</span></a><br />                    <span style="background-color: yellow;"><ul></span><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 1</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 2</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 3</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 4</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 5</span></a></li><br />                    <span style="background-color: yellow;"></ul></span><br />                </li><br />                <li><a href='#'><span style="color: #0b5394;">Single Menu</span></a></li><br />                <b><span style="color: #999999;"><li></span></b><a href='#'><span style="color: #0b5394;">Single Menu</span></a><span style="color: #999999;"><b></li></b></span><br />                <span style="color: #999999;"><b><li></b></span><a href='#'><span style="color: #0b5394;">Dropdown</span></a><br />                    <span style="background-color: yellow;"><ul></span><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 1</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 2</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 3</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 4</span></a></li><br />                        <li><a href='#'><span style="color: #3d85c6;">Menu element 5</span></a></li><br />                    <span style="background-color: yellow;"></ul></span><br />                <span style="color: #999999;"><b></li></b></span><br />            </ul><br />        </nav><br /><br />        <!-- menu-search form --><br />        <div id='menu-search'><br />          <form method='get' action='/search'><br />                <input autocomplete='off' name='q' placeholder='search...' type='text' value=''/><br />            </form><br />        </div><br />    </div><br /></div></blockquote> Replace the # symbols with the URLs of your links and replace the texts <span style="color: #3d85c6;">in blue</span> with the titles that you want to appear. To change the social media icons, add the links of your icons instead of the ones <span style="color: blue;">in blue</span>. If you don't know how to upload and get the URL of an image, please read <a href="http://www.google.com/url?q=http%3A%2F%2Fhelplogger.blogspot.com%2F2013%2F09%2Fupload-images-and-get-url-of-image.html&sa=D&sntz=1&usg=AFQjCNGLFqDgXEHrMS3XnmKmgKh4VFOCsw" style="color: blue;" target="_blank">this tutorial</a>. <br /><br />If you want to remove the sub categories, remove the code within the tags highlighted in yellow, including the <span style="background-color: yellow;">ul</span> tags. To remove only a menu element, remove the part that starts with <li> and ends with </li><br /><br /><b><span style="color: #3d85c6;">Step 4. </span></b>And now let's add the CSS styling for the menu. Search for the following piece of code:<br /><blockquote> ]]></b:skin></blockquote> Just above <span style="background-color: yellow;">]]></b:skin></span> add this code: <br /><blockquote> #contact-links {<br />    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);<br />    margin: auto;<br />    position: relative;<br />    width: 100%;<br />}<br />#contact-links a {<br />    color: #4C9FEB;<br />}<br />#contact-links a:hover {<br />    color: #3D85C6;<br />}<br />#my-links {<br />    float: right;<br />    font-size: 12px;<br />    margin: 4px 10px;<br />    overflow: hidden;<br />    text-shadow: 0 1px 0 #FFFFFF;<br />}<br />#my-links a {<br />    margin-left: 7px;<br />    padding-left: 8px;<br />    text-decoration: none;<br />}<br />#my-links a:first-child {<br />    border-width: 0;<br />}<br />#menu-container {<br />    background: -webkit-linear-gradient(#<wbr></wbr>f6f6f6, #e9eaea) repeat scroll 0 0 transparent;<br />    background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;<br />    background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;<br />    filter: progid:DXImageTransform.<wbr></wbr>Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',<wbr></wbr>GradientType=0 );<br />    border-radius: 0 0 4px 4px;<br />border:1px solid rgba(0,0,0,0.1);<br />    box-shadow: -1px 1px 0 rgba(255, 255, 255, 0.8) inset;<br />    clear: both;<br />    height: 46px;<br />    padding-top: 1px;<br />}<br />#neat-menu {<br />    float: left;<br />}<br />#neat-menu a {<br />    text-decoration: none;<br />}<br />#neat-menu ul {<br />    list-style: none;<br />    margin: 0;<br />    padding: 0;<br />}<br />#neat-menu > ul > li {<br />    float: left;<br />    padding-bottom: 12px;<br />}<br />#neat-menu ul li a {<br />    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.8) inset, 1px 0 0 rgba(255, 255, 255, 0.8) inset;<br />    border-color: #D1D1D1;<br />    border-image: none;<br />    border-style: solid;<br />    border-width: 0 1px 0 0;<br />    color: #333333;<br />    display: block;<br />    font-size: 14px;<br />    height: 25px;<br />    line-height: 25px;<br />    padding: 11px 15px 10px;<br />    text-shadow: 0 1px 0 #FFFFFF;<br />}<br />#neat-menu ul li a:hover {<br />background: -webkit-linear-gradient(#<wbr></wbr>efefef, #e9eaea) repeat scroll 0 0 transparent;<br />    background: -moz-linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;<br />    background: linear-gradient(#efefef, #e9eaea) repeat scroll 0 0 transparent;<br />    filter: progid:DXImageTransform.<wbr></wbr>Microsoft.gradient( startColorstr='#efefef', endColorstr='#e9eaea',<wbr></wbr>GradientType=0 );<br />}<br />#neat-menu > ul > li.active > a {<br />    background: -webkit-linear-gradient(#<wbr></wbr>55A6F1, #3F96E5) repeat scroll 0 0 transparent;<br />    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;<br />    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;<br />    filter: progid:DXImageTransform.<wbr></wbr>Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',<wbr></wbr>GradientType=0 );<br />    border-bottom: 1px solid #2D81CC;<br />    border-top: 1px solid #4791D6;<br />    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;<br />    color: #FFFFFF;<br />    margin: -1px 0 -1px -1px;<br />    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);<br />}<br />#neat-menu > ul > li.active > a:hover {<br />    background: -webkit-linear-gradient(#<wbr></wbr>499FEE, #3F96E5) repeat scroll 0 0 transparent;<br />    background: -moz-linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;<br />    background: linear-gradient(#499FEE, #3F96E5) repeat scroll 0 0 transparent;<br />    filter: progid:DXImageTransform.<wbr></wbr>Microsoft.gradient( startColorstr='#499FEE', endColorstr='#3F96E5',<wbr></wbr>GradientType=0 );<br />}<br />#neat-menu > ul > li:first-child > a {<br />    border-radius: 0 0 0 5px;<br />}<br />#neat-menu ul ul {<br />    background: -webkit-linear-gradient(#<wbr></wbr>F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;<br />    background: -moz-linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;<br />    background: linear-gradient(#F7F7F7, #F4F4F4) repeat scroll 0 0 padding-box transparent;<br />    filter: progid:DXImageTransform.<wbr></wbr>Microsoft.gradient( startColorstr='#F7F7F7', endColorstr='#F4F4F4',<wbr></wbr>GradientType=0 );<br />    border-radius: 5px 5px 5px 5px;<br />    border: 1px solid rgba(0, 0, 0, 0.1);<br />    box-shadow: 0 1px 0 #FFFFFF inset;<br />    height: 0;<br />    margin-top: 1px;<br />    opacity: 0;<br />    overflow: hidden;<br />    width: 240px;<br />    padding: 0;<br />    position: absolute;<br />    visibility: hidden;<br />    z-index: 1;<br />    -webkit-transition: all .5s;<br />    -moz-transition: all .5s;<br />    -ms-transition: all .5s;<br />    -o-transition: all .5s;<br />    transition: all .5s;<br />}<br />#neat-menu ul li:hover ul  {<br />    margin-top: 0\2;<br />    height: auto;<br />    opacity: 1;<br />    visibility: visible;<br />}<br />#neat-menu ul ul a {<br />    border-right-width: 0;<br />    border-top: 1px solid #D1D1D1;<br />    box-shadow: 0 1px 0 #FFFFFF inset;<br />    color: #444444;<br />    height: 24px;<br />    line-height: 24px;<br />    padding: 7px 12px;<br />    text-shadow: 0 1px 0 #FFFFFF;<br />}<br />#neat-menu ul ul a:hover {<br />background: -webkit-linear-gradient(#<wbr></wbr>55A6F1, #3F96E5) repeat scroll 0 0 transparent;<br />    background: -moz-linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;<br />    background: linear-gradient(#55A6F1, #3F96E5) repeat scroll 0 0 transparent;<br />    filter: progid:DXImageTransform.<wbr></wbr>Microsoft.gradient( startColorstr='#55A6F1', endColorstr='#3F96E5',<wbr></wbr>GradientType=0 );<br />    border-top: 1px solid #4791D6;<br />    box-shadow: -1px 0 0 #55A6F1 inset, 1px 0 0 #55A6F1 inset;<br />    color: #FFFFFF;<br />    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);<br />}<br />#neat-menu ul ul li:first-child a {<br />    border-top-width: 0;<br />}<br />#menu-search {<br />    margin:8px 10px 0 0;<br />    float: right;<br />}<br />#menu-search form {<br />    background: url("<a href="http://www.google.com/url?q=http%3A%2F%2F1.bp.blogspot.com%2F-NzU9je1udG4%2FUw-1tZku4eI%2FAAAAAAAAGWs%2F-h4BU1mFTiU%2Fs1600%2Fmenu-search.gif&sa=D&sntz=1&usg=AFQjCNE0jR5TEWBLHVJnADWOhYwO8ycT_g" target="_blank">http://1.bp.blogspot.com/<wbr></wbr>-NzU9je1udG4/Uw-1tZku4eI/<wbr></wbr>AAAAAAAAGWs/-h4BU1mFTiU/s1600/<wbr></wbr>menu-search.gif</a>") no-repeat scroll 5% 50% transparent;<br />    border: 1px solid #CCCCCC;<br />    border-radius: 3px 3px 3px 3px;<br />    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05) inset, 0 1px 0 #FFFFFF;<br />    height: 26px;<br />    padding: 0 25px;<br />    position: relative;<br />    width: 130px;<br />}<br />#menu-search form:hover {<br />    background-color: #F9F9F9;<br />}<br />#menu-search form input {<br />    color: #999999;<br />    font-size: 13px;<br />    height: 26px;<br />    text-shadow: 0 1px 0 #FFFFFF;<br />    background: none repeat scroll 0 0 transparent;<br />    border: medium none;<br />    float: left;<br />    outline: medium none;<br />    padding: 0;<br />    width: 100%;<br />}<br />#menu-search form input.placeholder, #menu-search form input:-moz-placeholder {<br />    color: #C4C4C4;<br />}</blockquote> <b><span style="color: #3d85c6;">Step 5.</span></b> Click on the <b>Save template</b> button to save the changes... and you're done! ;)<br /><br />I hope you like this CSS3 dropdown menu and if you enjoyed this tutorial, please share and subscribe.<img height="1" src="https://blogger.googleusercontent.com/img/proxy/AVvXsEg-IN7ADkEGXmcHgDjug-lvezCs1jtQJ8xIWvNElmIU_PLq_4WDErw8qEmZddgPoy-dqS_9FdKTYW9QYFIPPmGN_Y4uKvFOui-Ja4NW8R6kV2bAkXl9z8eb9rlYsmer6L3AT5t2ICVu6k_b-Hz4Ph8ypqDPmG-_N2Fuhm2R1p2kfH0eskwpF70wR6t4fx_PLw18_hFhtbwizoQcPC_v7U0=s0-d-e1-ft&utm_medium=email" width="1" /><br /> <br /> <script type="text/javascript"> <!-- var _adynamo_client = "d77da6ea-69b0-49e9-948f-1452fc91ec5d"; var _adynamo_width = 500; var _adynamo_height = 60; //--> </script> <script src="http://static.addynamo.net/ad/js/deliverAds.js" type="text/javascript"></script>

CSS How To How-To Tutorials How to Add Neat CSS3 Dropdown Menu in Blogger

This Tutorial was first shared from HelpBlogger . I found it very interesting and decided to share to my dear readers. And I hope it works o...

Read more »