Upload images and get the URL of the image

<div class="post-body"><div id="adsmiddle12555988110797770707"></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle22555988110797770707">As each day there are lots of new users joining the world of blogging, it's important to discuss about some basic topics that would raise some recurring questions such as<b> how we could get the URL of an image</b>?<br><br>On the Internet there are many both free as well as paid web hosting services where we can <b>host images</b>, but since we use Blogger, then there is nothing better than using the same hosting service that Google gives us, which is Picasa.<br><br>The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the <b>New post</b> button. And preferably, from the <b>Edit HTML</b> tab, click on the image icon.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3AwiJcWiYA6ErEkRX9syt8jOl2B4FoefiOxE3LNBNCGoPSQrme2S6IIlcBeYcb4ypWVSG8TLL-nJhorM0SZoipQIucL7-Wb64A5mbLbstbCxOCCi-FRle9Dq_9Oi4VrMSEqFDjJAOZd8s/s1600/upload-image-on-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3AwiJcWiYA6ErEkRX9syt8jOl2B4FoefiOxE3LNBNCGoPSQrme2S6IIlcBeYcb4ypWVSG8TLL-nJhorM0SZoipQIucL7-Wb64A5mbLbstbCxOCCi-FRle9Dq_9Oi4VrMSEqFDjJAOZd8s/s1600/upload-image-on-blogger-blogspot.png"></a></div><br>When the pop-up window opens, click on the <b>Choose files</b> button, browse for your image(s), double click or click on <b>Open </b>and then hit <b>Add selected</b>. <br><br>Once it has been uploaded, you will see in the post editor the html code of the image.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxGneLC9smugB_riNrKlzFkI3Jq1P5Dq6u0Zw4dUlcrd8qYlHHQ9Lqm1-WzaETPz2MWChZYHLwPBcdGKKUJp0KRnoEwHEHX39Q0ViZEmucqSMqMk3wpHjTFsVH92qE6RJGcRj_ldHGM3tH/s1600/upload-image-on-blogger-blogspot1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxGneLC9smugB_riNrKlzFkI3Jq1P5Dq6u0Zw4dUlcrd8qYlHHQ9Lqm1-WzaETPz2MWChZYHLwPBcdGKKUJp0KRnoEwHEHX39Q0ViZEmucqSMqMk3wpHjTFsVH92qE6RJGcRj_ldHGM3tH/s1600/upload-image-on-blogger-blogspot1.png"></a></div><br>That code contains the URL of your picture. The two URLs (Web addresses) that you will see, would look like this:<br><blockquote class="tr_bq"><a href="<span style="color: blue;">https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyy_DfafMeyKXWMKF_pNTAZ8nzCRCOI0RxbWcomdBzD3gA5ob98aj6sFEIHZCvgHnQY5qsVq7P9I_QBZbbYsXZCPdKZ7SToVkwgL0VKESyVxNF9cSgyrpwIUDrveS34_16qxlXVsfJbGq/s1600/Bliss-Windows-XP.png</span>" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSyy_DfafMeyKXWMKF_pNTAZ8nzCRCOI0RxbWcomdBzD3gA5ob98aj6sFEIHZCvgHnQY5qsVq7P9I_QBZbbYsXZCPdKZ7SToVkwgL0VKESyVxNF9cSgyrpwIUDrveS34_16qxlXVsfJbGq/s320/Bliss-Windows-XP.png" /></a></blockquote>The first is the URL of the image that you need to copy. It's not required to publish this entry where you uploaded the photo; you could as well not publish it, leave it as Draft or delete it. The image will be saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the option to remove the image).<br><br>You could also upload image directly from Picasa:<br>Just login to <a href="https://picasaweb.google.com/home" rel="nofollow" target="_blank">PicasaWeb</a>, select the album where you want to host the image, and click on <b>Add photos</b>.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NJW2wRMDG114oTeWnoiiiW43kdydcBoplBc_J5T27LhmeVRS2IY6lt-ZF1X3timdtlX9pUVN6FvoOYC6z0QEyWiQ_A8E962lYF1a3UcFmNSDK-ZY4mpmeGPt_7VuFz5ThYXxPYeP9uF9/s1600/upload-pictures-on-picasaweb.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0NJW2wRMDG114oTeWnoiiiW43kdydcBoplBc_J5T27LhmeVRS2IY6lt-ZF1X3timdtlX9pUVN6FvoOYC6z0QEyWiQ_A8E962lYF1a3UcFmNSDK-ZY4mpmeGPt_7VuFz5ThYXxPYeP9uF9/s1600/upload-pictures-on-picasaweb.png"></a></div><br>Select the image from a location on your computer and upload it.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJmBZHP9__FOqKI96mnJxBXaPmTuUoHfRPakBcK-TnJhwZy4quF0L1OnjxRujw4Ak5lqg9QRKtv_IZJ7KDfqgFub6qtB0EQbq4o2LPM-0plQG-dx-B-BV5AJ5wKb-P4fVwXLd_JDSXHgQ4/s1600/upload-pictures-on-picasaweb1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJmBZHP9__FOqKI96mnJxBXaPmTuUoHfRPakBcK-TnJhwZy4quF0L1OnjxRujw4Ak5lqg9QRKtv_IZJ7KDfqgFub6qtB0EQbq4o2LPM-0plQG-dx-B-BV5AJ5wKb-P4fVwXLd_JDSXHgQ4/s1600/upload-pictures-on-picasaweb1.png"></a></div><br>After it has been uploaded, click <b>OK</b>. Now you will see the thumbnail, along with other photos if there are more.<br><br>To get the URL of the image from Picasa, click on the image to open in full size > right click on the picture and select the following option depending on the browser you are using...<br><br>On <b>Google Chrome</b> > select <b>Copy Image URL</b>:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPA73xmVR-uUztpjmJ1rhRdg-IpJicRNvFrWn8ADM1mjCG7QGHaHKdUZgAh0F39Cm2OyYMru4GkHj0SYst2RUMgzse77jbsfI2ehwkHo5BIcs9J5VX3LJylZ1Xa1LyulwtJhW0tJsKmkP9/s1600/how-to-get-image-url-address-on-google-chrome.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPA73xmVR-uUztpjmJ1rhRdg-IpJicRNvFrWn8ADM1mjCG7QGHaHKdUZgAh0F39Cm2OyYMru4GkHj0SYst2RUMgzse77jbsfI2ehwkHo5BIcs9J5VX3LJylZ1Xa1LyulwtJhW0tJsKmkP9/s1600/how-to-get-image-url-address-on-google-chrome.png"></a></div><br>If you are using <b>Mozilla Firefox</b>  > select <b>Copy Image Location</b>:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifL8lQii1tVVZwbkk9C8glw0PLA0UfaDnw_B8JEY9XIOzCBUQi9wMspgTYA4QzuQYF1x5oo7FkSKyvAIs45VFWhZxQH0g4dEuOGv-qKMERSr9jt6L0Mw5Cd7LK6QVfICfQqC7hpbgPEsYA/s1600/how-to-get-the-url-address-of-an-image-on-mozilla-firefox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifL8lQii1tVVZwbkk9C8glw0PLA0UfaDnw_B8JEY9XIOzCBUQi9wMspgTYA4QzuQYF1x5oo7FkSKyvAIs45VFWhZxQH0g4dEuOGv-qKMERSr9jt6L0Mw5Cd7LK6QVfICfQqC7hpbgPEsYA/s1600/how-to-get-the-url-address-of-an-image-on-mozilla-firefox.png"></a></div><br>If you are using <b>Opera > </b>select <b>Copy Image URL</b>:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66JhzeP4lTZe4AzowlqD-HV1nM3JWI5br9Pai8djhViAixUz8ZDc3Z6nA4bsyFCa2LI84YUWtr42fIGJx6IX1tuD8UDJ7UvAlib07uOTle3tHb16CbZxX_bDViftkKFCOgqbuzLkIUg8d/s1600/how-to-get-image-url-address-on-opera.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj66JhzeP4lTZe4AzowlqD-HV1nM3JWI5br9Pai8djhViAixUz8ZDc3Z6nA4bsyFCa2LI84YUWtr42fIGJx6IX1tuD8UDJ7UvAlib07uOTle3tHb16CbZxX_bDViftkKFCOgqbuzLkIUg8d/s1600/how-to-get-image-url-address-on-opera.png"></a></div><br>If you are using <b>Safari </b>> select<b> Copy Image Address</b>:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL4MlonhZITDlMVF3iGQM6WL5LdrkBN2F0gkFQGwGzCNeVsvr7-YnWRwT8Y4lqkeyDRG2fGb0crbiIdRHSZfGHSa9PisAal5Q-vTTYmWZ-A0exGCL5NIG7m87WnNmRhyDWSxVrH55MI7op/s1600/how-to-get-image-url-address-on-safari.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL4MlonhZITDlMVF3iGQM6WL5LdrkBN2F0gkFQGwGzCNeVsvr7-YnWRwT8Y4lqkeyDRG2fGb0crbiIdRHSZfGHSa9PisAal5Q-vTTYmWZ-A0exGCL5NIG7m87WnNmRhyDWSxVrH55MI7op/s1600/how-to-get-image-url-address-on-safari.png"></a></div><br>If you are using <b>Internet Explorer</b> (I hope not) > first select <b>Properties</b>, a window will open and there you will find the Address section from where you can select the URL of the image. Copy it:<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dsEONjNYeYuMyqAz0n1NRrIG-0uykLD21iLaF1UoixjZtaBxFk3XfnRrE2ds2Ggh6Y9MPucNvCQi4Vp27eF8b_b-S-BZKObfNd0bxlJET2LkuoYgZk0omR3rUSzlmIIvJZe7Xz2_-J9V/s1600/how-to-get-the-url-address-of-an-image-on-internet-explorer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0dsEONjNYeYuMyqAz0n1NRrIG-0uykLD21iLaF1UoixjZtaBxFk3XfnRrE2ds2Ggh6Y9MPucNvCQi4Vp27eF8b_b-S-BZKObfNd0bxlJET2LkuoYgZk0omR3rUSzlmIIvJZe7Xz2_-J9V/s320/how-to-get-the-url-address-of-an-image-on-internet-explorer.png" width="260"></a></div><br>Once you have selected any of these options, you'll have the URL of the image copied to the clipboard. It's that easy!<br><br>Related: <a href="/2015/07/how-to-optimize-images-for-better_10.html" style="color: blue;" target="_blank">How to Optimize Images for Better SEO</a><br><br>Remember that all images you upload on Blogger, are stored in your Picasa account. So, if you find an image previously uploaded on your blog, just go to your Picasa account, select the album containing the name of your blog and there find the picture you need. The method to get the URL of the image is the same as explained above. </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle12555988110797770707"); var obj1=document.getElementById("adsmiddle22555988110797770707"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Upload images and get the URL of the image

As each day there are lots of new users joining the world of blogging, it's important to discuss about some basic topics that would rais...

Read more »

How to Create Static Pages in Blogger

<div class="post-body"><div id="adsmiddle11015511765478892518"><span style="font-size: large;"><b>What are Blogger static pages? </b></span><br><br>Blogger Static Pages allows you to create specific pages like About Me, Contact page, Privacy Policy etc. on stand-alone pages that are linked from your blog. The static pages basically are the same as post pages, but there are several things that make them different. One of the differences is that static pages don't appear in the home page, don't have a label, and are not indexed as archive pages.<br><br><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ0BnZ4m8UW_em00ss1I8-lUMj3uUnbw0rp7PEk2o3UAMQxUTmFtmXhk4GnfWv-N_ayV9PojWBRLi9cPpeYHBYCwH_RdrAeXK2ArD0gSTXECD6xiGYZJhwApsu7HZSIWuoyxOXpHat5CBV/s1600/how+to+create+static+pages+in+blogger+blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ0BnZ4m8UW_em00ss1I8-lUMj3uUnbw0rp7PEk2o3UAMQxUTmFtmXhk4GnfWv-N_ayV9PojWBRLi9cPpeYHBYCwH_RdrAeXK2ArD0gSTXECD6xiGYZJhwApsu7HZSIWuoyxOXpHat5CBV/s320/how+to+create+static+pages+in+blogger+blogspot.png" width="320"></a></div><br><span style="font-size: large;"><b>How to Create Static Pages in Blogger.</b></span><br><br><span style="color: #0b5394;"><b>Step 1.</b></span> Log in to your <a href="http://www.blogger.com/home" rel="nofollow">Blogger Dashboard</a><br><br><span style="color: #0b5394;"><b>Step 2.</b></span> Click on <b>Pages</b><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaUuqO-HHXj-NkarD1aI3-pT2xKmSW7Cp6d_OWwGslUKPDNdg0DOW8FP7gUK4cRzY5KmY1Y0xsDiXHAVMt3a2HgCP2s9mlmx0FZSad6NOU_J07SCJSwnGG73IfQyTuBMWL6rGg9ypwv5oJ/s1600/how-to-create-static-pages-on-blogger-blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="static pages blogger, blogger tutorials, widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaUuqO-HHXj-NkarD1aI3-pT2xKmSW7Cp6d_OWwGslUKPDNdg0DOW8FP7gUK4cRzY5KmY1Y0xsDiXHAVMt3a2HgCP2s9mlmx0FZSad6NOU_J07SCJSwnGG73IfQyTuBMWL6rGg9ypwv5oJ/s1600/how-to-create-static-pages-on-blogger-blogspot.png" title="how to add static pages in blogger blogspot"></a></div><br><br><span style="color: #0b5394;"><b>Step 3.</b></span> Click on <b>New Page - Blank Page</b><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDC9sWevCoprzAAsPAcRU0HqQpQS51qb2RYAVXGwU2hA6MkA7JlUh-rU8SwgDESjwb0LIwzxy_j-LpZWNLI4BViKlWe5vkQQoUTU53B9GLufL8VsBInKlE4GgaJWWm2SUKBDBuV68mn7bK/s1600/how-to-create-static-pages-in-blogger-blogspot-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDC9sWevCoprzAAsPAcRU0HqQpQS51qb2RYAVXGwU2hA6MkA7JlUh-rU8SwgDESjwb0LIwzxy_j-LpZWNLI4BViKlWe5vkQQoUTU53B9GLufL8VsBInKlE4GgaJWWm2SUKBDBuV68mn7bK/s1600/how-to-create-static-pages-in-blogger-blogspot-2.png"></a></div><br><span style="color: #0b5394;"><b>Step 4.</b></span> Type the title and write the page's content.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcBu0CynVcLZFHQX6U7ho6XQphV2qcr82OGrOeU7wKV01BcTdyhVU1w4cfdRYwhr4D6e4o_G41E7nY4BjJbXxq-mIOhopeN4YWAgh5HHZY6wxSrIbugCR4ZTxQRonUgEugawTJxs6Hq7Hg/s1600/how-to-create-static-pages-in-blogger-blogspot-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcBu0CynVcLZFHQX6U7ho6XQphV2qcr82OGrOeU7wKV01BcTdyhVU1w4cfdRYwhr4D6e4o_G41E7nY4BjJbXxq-mIOhopeN4YWAgh5HHZY6wxSrIbugCR4ZTxQRonUgEugawTJxs6Hq7Hg/s400/how-to-create-static-pages-in-blogger-blogspot-3.png" width="400"></a></div><br><b><span style="color: #0b5394;">Step 5.</span></b> Before publishing it, click on Preview to see how it will appear on your blog.<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNyoj3XAr9qnrIrW0BdmUEmyshWFZGyJx5sqsb3IjyRvN8A4MhjeDZTbwQJoCdVdnOsze0tL4n78LjXPDngQQd7YXvNQb49Zm3iU_o6AaxAz20_OWDgLcj1eTX5nf830hAuYrI5c0kidD/s1600/static-pages-for-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcNyoj3XAr9qnrIrW0BdmUEmyshWFZGyJx5sqsb3IjyRvN8A4MhjeDZTbwQJoCdVdnOsze0tL4n78LjXPDngQQd7YXvNQb49Zm3iU_o6AaxAz20_OWDgLcj1eTX5nf830hAuYrI5c0kidD/s1600/static-pages-for-blogger.png"></a></div><span style="color: #0b5394;"><b>Step 6.</b></span> When you have finished the editing, click on Publish button.<br><br><span style="color: #0b5394;"><b>Step 7. </b></span>Now you have 3 options:<br><ol><li>Keep it as nav menu below header <b>- Top tabs</b> </li><li>Display the page in your blog's sidebar - <b>Side Links</b></li><li>Add the page's link manually to your template - <b>Don't Show</b></li></ol><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvT8c6Nx7SCo2yhgPyZrfRbixGAu0OyCg-w4exowXKBBhgsY_P74Ocyaw4BWb9Pl07A7TmEUNPrq1YOGQG1mVvE-j_B1fl5NuAwXw-kKXjB5qBgsLCHeiO7PYuKkyRPeSqisxdEHOKKopO/s1600/how-to-create-static-pages-in-blogger-blogspot-4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvT8c6Nx7SCo2yhgPyZrfRbixGAu0OyCg-w4exowXKBBhgsY_P74Ocyaw4BWb9Pl07A7TmEUNPrq1YOGQG1mVvE-j_B1fl5NuAwXw-kKXjB5qBgsLCHeiO7PYuKkyRPeSqisxdEHOKKopO/s400/how-to-create-static-pages-in-blogger-blogspot-4.png" width="400"></a></div><br><span style="color: #0b5394;"><b>Step 8.</b></span> After you have chosen where the page will appear, click on the Save arrangement button<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_vqSnXu3L44hu7N7-M6-CSFXbk93A5CMkXg9RomxLXlsRNLSyEzk_WRacWrD53fD3GZw8Zlun5r5GrseA2Q79jeuR_V5Ra4xMenph_zi0lVCi1K8cPF4gZzB4WKRIsR7P33pNwzwLsVOX/s1600/how-to-create-static-pages-in-blogger-blogspot-5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="68" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_vqSnXu3L44hu7N7-M6-CSFXbk93A5CMkXg9RomxLXlsRNLSyEzk_WRacWrD53fD3GZw8Zlun5r5GrseA2Q79jeuR_V5Ra4xMenph_zi0lVCi1K8cPF4gZzB4WKRIsR7P33pNwzwLsVOX/s400/how-to-create-static-pages-in-blogger-blogspot-5.png" width="400"></a></div><br><br>And now you're done!<br>Now you have owned the static page. If you want another static page, just repeat the steps above.<br><br><i><b>Note:</b> if you have opted for Don't show option: go to Pages again and right click on the page's title and select Copy link location (in firefox). You can add the link manually to your sidebar via Link widget or add the link in your template, via Edit HTML.</i><br><br><b>UPDATE: Blogger made an update recently to the way that pages are added to blogs. Here is an updated tutorial that will walk you through the new process, step by step: <a href="/2015/07/how-to-create-static-pages-in-blogger_7.html" style="color: blue;" target="_blank">How to Add Static Pages to a Blogger Blog</a></b><br><br>Or you can watch this video tutorial below:<br><br><div style="text-align: center"><iframe width="640" height="360" src="//www.youtube.com/embed/e0e8k8PYJcM?rel=0" frameborder="0" allowfullscreen=""></iframe></div></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle21015511765478892518"></div><script type="text/javascript">var obj0=document.getElementById("adsmiddle11015511765478892518"); var obj1=document.getElementById("adsmiddle21015511765478892518"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design How to Create Static Pages in Blogger

What are Blogger static pages?  Blogger Static Pages allows you to create specific pages like About Me, Contact page, Privacy Policy etc. on...

Read more »

Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

<div class="post-body"><div id="adsmiddle11271181592539982835"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUPi1QrB0i9CwM0QgaGU_RSPUkINtgUOggLdtjDzWcYc7aMxwY15Z6JWm1kHbfQpuhuVYqWxD-qI3I3mDbskzgiGKKQSk9lTcS5-GwOaS1BKUCAKqxjuB_7HwELtNgs4EPBGrYLlZgteUp/s1600/how+to+hide+show+blogger+widgets+in+homepage+posts+static+pages.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUPi1QrB0i9CwM0QgaGU_RSPUkINtgUOggLdtjDzWcYc7aMxwY15Z6JWm1kHbfQpuhuVYqWxD-qI3I3mDbskzgiGKKQSk9lTcS5-GwOaS1BKUCAKqxjuB_7HwELtNgs4EPBGrYLlZgteUp/s200/how+to+hide+show+blogger+widgets+in+homepage+posts+static+pages.png" width="150"></a></div>As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the homepage as well. And I'm sure very few know that AdSense could disable your account in case you've put ad units inside the content of your contact or privacy policy pages. Therefore, hiding certain elements inside your blog pages is not only a matter of design, but it is also a requirement.<br><br><b>To hide (or show) widgets in particular posts, static pages, homepage or archive pages, you can use conditional tags.</b><br><br><span style="color: #3d85c6;"><b>Step 1.</b></span> Go to Blogger's <b>Dashboard</b> > <b>Layout</b><b> </b>and name the HTML/Javascript gadgets that you have already added. Doing this, it will be easier for you to identify the widgets that you have in your Blogger's template. Give it a unique title so that it does not match with any of the titles of any other widgets already added.<br><br></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle21271181592539982835"><span style="color: #3d85c6;"><b>Step 2.</b></span> Next thing to do is to go to <b>Template </b>and click on <b>Edit HTML</b><br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8V2g1EpP5DB1A3G_Se85NferkkY5rIRnrf-NyVxbyMAg3M7SYr7LR0rY3a0k3I5EhaT6fmW0eTK-RBsgZbkNq8FichVafx_zsWpecL-Hg-9uuRllgnwCNsFzeZILI8B2n9nSIAHFCtgwp/s1600/remove-blogger-labels.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger template, edit html" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8V2g1EpP5DB1A3G_Se85NferkkY5rIRnrf-NyVxbyMAg3M7SYr7LR0rY3a0k3I5EhaT6fmW0eTK-RBsgZbkNq8FichVafx_zsWpecL-Hg-9uuRllgnwCNsFzeZILI8B2n9nSIAHFCtgwp/s1600/remove-blogger-labels.png" title="Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger" width="320"></a></div><br><br><span style="color: #3d85c6;"><b>Step 3.</b></span> Click anywhere inside the code area and press the <b>CTRL + F</b> keys to open the search box<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLfrUP7GwwElDA_M1pWB1dGWYRkx6Up0cnKO4Z70RXUhIoYjvkm22I4NTF5qS429_LSl95B_l5K_CSD5uTwGauBrAgZDSganuS1vB-8Z2bR1tX4S0NM6fDTy1o9iBcAS65GithN6tSiiKX/s1600/open-blogger-search-box-ctrl+f.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger template, ctrl + f, search box" border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLfrUP7GwwElDA_M1pWB1dGWYRkx6Up0cnKO4Z70RXUhIoYjvkm22I4NTF5qS429_LSl95B_l5K_CSD5uTwGauBrAgZDSganuS1vB-8Z2bR1tX4S0NM6fDTy1o9iBcAS65GithN6tSiiKX/s1600/open-blogger-search-box-ctrl+f.png" title="Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger" width="400"></a></div><br><span style="color: #3d85c6;"><b>Step 4.</b></span> Find the HTML of your widget by typing the widget's name in the search box - hit Enter.<br><br>Let's say that the title for one of my widgets is "<b>Recent Posts</b>". After searching for the widget's name, I will find a similar code in my template:<br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='<b>Recent Posts</b>' type='HTML'><br><b:includable id='main'><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br></b:includable><br></b:widget>  </blockquote><br>This code represents the widget/gadget that I have added in the Page Elements location (Layout).<br><br><span style="color: #3d85c6;"><b>Step 5.</b></span> After you've found your widget's code, add the following conditional tags marked with red just below and above to hide the widget from specific pages or posts in Blogger. For instance, in case you want:<br><br><span style="color: #3d85c6;"><span style="font-size: large;"><b>To show the widget only in Homepage:</b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b> <span style="color: #cc0000;"><b:if cond='data:blog.url == data:blog.homepageUrl'></span></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b><span style="color: #cc0000;"> </b:if></span></b><br></b:includable><br></b:widget></blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b>To show Blogger widget only in post pages </b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"><b:if cond='data:blog.pageType == "item"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b style="color: #cc0000;"></b:if></b><br></b:includable><br></b:widget></blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b>To hide Blogger widget in post pages</b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"><b:if cond='data:blog.pageType!= "item"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b style="color: #cc0000;"></b:if></b><br></b:includable><br></b:widget></blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b><span class="royalb">To show the widget in a specific page</span></b></span></span><br><span style="font-size: large;"><b><span class="royalb"> </span></b> </span><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b><span style="color: #cc0000;"><b:if cond='data:blog.url == "<u>URL of the page</u>"'></span></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b><span style="color: #cc0000;"> </b:if></span></b><br></b:includable><br></b:widget></blockquote><br><b>Note</b>: Replace <b style="color: #cc0000;">URL of the page</b> with the address of the page in which you want the widget to appear<br><br><span style="color: #3d85c6;"><span style="font-size: large;"><b><span class="royalb">To hide a widget only in a particular page</span></b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"> <b:if cond='data:blog.url != "URL of the page"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b><span style="color: #cc0000;"> </b:if></span></b><br></b:includable><br></b:widget> </blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b><span class="royalb">To show widgets only in static pages</span></b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"> <b:if cond='data:blog.pageType == "static_page"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b style="color: #cc0000;"></b:if></b><br></b:includable><br></b:widget>  <span class="royalb"></span></blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b><span class="royalb">To hide widgets in Static Pages</span></b></span></span><br><br><blockquote class="tr_bq"><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"> <b:if cond='data:blog.pageType != "static_page"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b style="color: #cc0000;"> </b:if></b><br></b:includable><br></b:widget>  <span class="royalb"></span></blockquote><br><span style="color: #3d85c6;"><span style="font-size: large;"><b><span class="royalb">To show widgets only in Archive Pages</span></b></span></span><br><br><blockquote class="tr_bq"><span class="royalb"> </span><b:widget id='HTML1' locked='false' title='Recent Posts' type='HTML'><br><b:includable id='main'><br><b style="color: #cc0000;"> <b:if cond='data:blog.pageType == "archive"'></b><br><!-- only display title if it's non-empty --><br><b:if cond='data:title != ""'><br><h2 class='title'><data:title/></h2><br></b:if><br><div class='widget-content'><br><data:content/><br></div><br><br><b:include name='quickedit'/><br><b style="color: #cc0000;"> </b:if></b><br></b:includable><br></b:widget> </blockquote><br><i><b>Note:</b>  Pay attention each time you're adding a new address which should end up with <b>.com</b>, otherwise it may not work.</i><br><br><span style="color: #3d85c6;"><b>Step 6.</b></span> After you have added the conditional tags, <b>Save Template</b> and view your blog.<br><br>That's it! </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle11271181592539982835"); var obj1=document.getElementById("adsmiddle21271181592539982835"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Hide/Show Widgets/Gadgets in Home/post/static/archive pages in Blogger

As some of you may have noticed, all the widgets/gadgets you add to your blog, will be displayed on all the pages by default, including the ...

Read more »

How to Add or Invite Multiple Authors on Blogger

<div class="post-body"><div id="adsmiddle14541370581711947603"></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle24541370581711947603">If you ever considered working on a blog with multiple authors and you'd like to add others to publish posts or moderate comments, you can <b>invite multiple authors on your Blogger blog</b>. These additional authors have blog posting rights and can be either a guest author or blog administrator.<br><ol><li>An author can create and edit only his/her own posts and have restricted access to some of the blog' Settings. There, he or she will be able to access the Posting options and Add a mobile device, or remove themselves from the blog membership. </li><li>An administrator, on the other hand, will have FULL access to the blog' settings and template. Users with this privilege can edit or delete posts made by other members of the blog, add/remove other members or transfer the ownership of a blog.</li></ol><div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5uD3Qd6LAjSzLLc4B-6c2QIkJ-JcNZAqODBI8YwHb81KeCkIyWMylbZsJ7I1Z-zBOnoHxbQmH4f7BJmgPO32hCT2aTFIk0iLALp8F0twvPkz6Vsm48FkrV3J0jIG4pCncc1c5n0GhC-ld/s1600/how-to-invite-multiple-authors-on-a-blogger-blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="invite multiple authors on blogger" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5uD3Qd6LAjSzLLc4B-6c2QIkJ-JcNZAqODBI8YwHb81KeCkIyWMylbZsJ7I1Z-zBOnoHxbQmH4f7BJmgPO32hCT2aTFIk0iLALp8F0twvPkz6Vsm48FkrV3J0jIG4pCncc1c5n0GhC-ld/s1600/how-to-invite-multiple-authors-on-a-blogger-blog.png" title="How to Add or Invite Multiple Authors on Blogger"></a></div><br><b>Related: </b><a href="/2015/07/add-author-profile-picture-and-name-in_10.html" style="color: blue;" target="_blank">Add Author's Profile Picture and Name in Multi Author Blog</a><br><br><h2>How to Invite Authors on Blogger</h2><br>To invite multiple authors on a Blogger blog is really easy. Just follow the steps below:<br><br><b><span style="color: #3d85c6;">Step 1. </span></b>Log into your blogger account at <a href="http://blogger.com/" style="color: blue;">blogger.com</a> and click the name of your blog<br><br><b><span style="color: #3d85c6;">Step 2.</span></b> Click "Settings" on the left side of the page and go to the "Basic" tab:<br><br><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD5_gq1AwMHb2OSf1oc-wq-zz0YV46oBn7aaK0FeHP5CEkjbnLrb3UenEYMsAtZNw9ydbE6DZ-BqbsvgJ84JszXrAiPxPnL0ioL9f5TPV8AYLh6sYpKRq3YOxGdRd9CMeawy8BGl5k1jVd/s1600/how-to-add-invite-multiple-authors-on-blogger-blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="invite multiple authors on blogger" border="0" height="201" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD5_gq1AwMHb2OSf1oc-wq-zz0YV46oBn7aaK0FeHP5CEkjbnLrb3UenEYMsAtZNw9ydbE6DZ-BqbsvgJ84JszXrAiPxPnL0ioL9f5TPV8AYLh6sYpKRq3YOxGdRd9CMeawy8BGl5k1jVd/s1600/how-to-add-invite-multiple-authors-on-blogger-blog.png" title="How to Add or Invite Multiple Authors on Blogger 1" width="400"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Invite multiple authors on Blogger</td></tr></tbody></table><b><span style="color: #3d85c6;">Step 3.</span></b> Look for the Permissions/Blog authors section and click on the "Add authors" link. Enter the email address for each author you would like to invite, separating each address with a comma.<br><br><b><span style="color: #3d85c6;">Step 4.</span></b> Click "Invite authors" button at the bottom once you're done. And that's it!<br><br><h3>Managing Authors</h3><br>The invited Authors will be listed after the invitations have been sent. They will need to click the "Accept Invitation" button in the invitation email in order to get started. Authors which have yet to accept or decline the invite will be listed under 'open invitations'. To remove an author from the blog, simply click the Remove icon next to the author's email address:<br><br><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Y3tpIapl6w4lWiHil-kQzp3U1N4_b99YtxuRkwbRn6VtS4pkqGsakyLPF4YCZUEiZ7_MdXN7Z7IqBI6l_gzoqXX1CTCFwdbx1rgwimG-awrDciMwCwO_VW08IAqdSmU5xnUBxnm5CG0L/s1600/how-to-remove-invite-multiple-authors-on-blogger-blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="invite multiple authors on blogger" border="0" height="103" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Y3tpIapl6w4lWiHil-kQzp3U1N4_b99YtxuRkwbRn6VtS4pkqGsakyLPF4YCZUEiZ7_MdXN7Z7IqBI6l_gzoqXX1CTCFwdbx1rgwimG-awrDciMwCwO_VW08IAqdSmU5xnUBxnm5CG0L/s1600/how-to-remove-invite-multiple-authors-on-blogger-blog.png" title="How to Add or Invite Multiple Authors on Blogger 2" width="400"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Cancel the invitation</td></tr></tbody></table>Once the invited member accept your invitation, they will be listed as an "Author" by default. To give a person full admin privileges, you can change the "Author" status in the "Permissions" section of the Settings > Basic tab to "Admin":<br><br><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8qmgsCDNTmZo_8nBDDkBav5SFBOKVq0vfeTAHNEnGrQ-TID1zoY056-BLABQ69xPNLW_v-HBJUCgckGfVTAchr0qft5tn-s1jo1cBtjsWEyQzyoLbnqLPostTuJ585YiOaMJ6EVO2BBOU/s1600/how-to-make-author-admin-on-blogger-blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="add second admin on blogger" border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8qmgsCDNTmZo_8nBDDkBav5SFBOKVq0vfeTAHNEnGrQ-TID1zoY056-BLABQ69xPNLW_v-HBJUCgckGfVTAchr0qft5tn-s1jo1cBtjsWEyQzyoLbnqLPostTuJ585YiOaMJ6EVO2BBOU/s1600/how-to-make-author-admin-on-blogger-blog.png" title="How to Add or Invite Multiple Authors on Blogger 3" width="400"></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Changing an Author into an Admin in Blogger</td></tr></tbody></table><br><div style="padding: 0px 80px 0px 60px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVKDlcM_l5dvED9pmCSyTPRhoSo3vLoVuVE1WvtA-yVOPjFGjSQxam30Sigoojgi8WyWuJnxx5xwS-kDtgWYBnr1h0z1U1mWYVb1vAdo__lhoSrEd4MmJCzGcNYHp-Gz2ZaWqxha8V36u/s1600/warning-sign.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQVKDlcM_l5dvED9pmCSyTPRhoSo3vLoVuVE1WvtA-yVOPjFGjSQxam30Sigoojgi8WyWuJnxx5xwS-kDtgWYBnr1h0z1U1mWYVb1vAdo__lhoSrEd4MmJCzGcNYHp-Gz2ZaWqxha8V36u/s1600/warning-sign.png"></a></div><i>Please proceed with caution! Administrators have as much power over your blog as you do, including the ability to permanently delete it!</i></div><br>So this is <b>how you can invite multiple authors in blogger</b>. With this feature, everyone on your team can help create different engaging content for your readers to enjoy. </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle14541370581711947603"); var obj1=document.getElementById("adsmiddle24541370581711947603"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design How to Add or Invite Multiple Authors on Blogger

If you ever considered working on a blog with multiple authors and you'd like to add others to publish posts or moderate comments, you c...

Read more »

Simple Recent Posts Widget for Blogger/Blogspot

<div class="post-body"><div id="adsmiddle15197552418331573382">The main advantage on this Recent Posts widget is that it will show not only post titles, but also post excerpts or snippets, and it's easy to customize or apply different style on it. To make it fit your own design, you will need to modify the CSS style - you can change the link or background color, the size and color of text/links.<br><br>What you can do with this widget:<br>- display post titles only <br>- change the number of posts <br>- change the number of characters of the post snippet/excerpt <br>- show the post dates <br><br>See the screenshot below:<br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2lMIY9qVKx56Pz6sGTil6TyxjgCFXEfEBrKz-inSm723K8J46ZLp8TQLZe04CLcPchr6ItQh7ErfL4hLsifoRmm-aY8zhTj74uR4CFd9R9exy1tzr28mv0M71m4ERs5oYL-qLqXr_A7Ki/s1600/add+recent+posts+widget+for+blogger+blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2lMIY9qVKx56Pz6sGTil6TyxjgCFXEfEBrKz-inSm723K8J46ZLp8TQLZe04CLcPchr6ItQh7ErfL4hLsifoRmm-aY8zhTj74uR4CFd9R9exy1tzr28mv0M71m4ERs5oYL-qLqXr_A7Ki/s320/add+recent+posts+widget+for+blogger+blogspot.png" width="320"></a></div><br><h2>How to add Recent Posts Widget to Blogger</h2>Step 1. Log in to your Blogger Dashboard > go to "Layout" and click the "Add a Gadget" link<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho_CA-q0hFith8SYGDxmfzQv6S0oN_q1bXeFTNBUQxpDgChVjk9C8b7lo2EgpgtiJnqteR6zOsS7VZVw4WhhrAWVOMJoFy8apf8m5r24hu4i-3FR1yC7C-9Nhu1JWsWEtd9X7iJRcxXsDu/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEho_CA-q0hFith8SYGDxmfzQv6S0oN_q1bXeFTNBUQxpDgChVjk9C8b7lo2EgpgtiJnqteR6zOsS7VZVw4WhhrAWVOMJoFy8apf8m5r24hu4i-3FR1yC7C-9Nhu1JWsWEtd9X7iJRcxXsDu/s1600/blogger-layout-add+a+gadget-how-to.png" width="640"></a></div><br>Step 2. From the pop-up window, scroll down and choose HTML/JavaScript<br><br><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9XOqQits4qc1jxNszMkXPiL4-hfw5gAS3fihbx88c60WLUPGp2pMwKTOnEfQK96K6PQNcYuQwMvRIZsXf2__vEw8NfXUbsuGDl8mVaP4uE9HiNo9VxKa5kdvh3bWmyNK8t-MvbfSOgSom/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9XOqQits4qc1jxNszMkXPiL4-hfw5gAS3fihbx88c60WLUPGp2pMwKTOnEfQK96K6PQNcYuQwMvRIZsXf2__vEw8NfXUbsuGDl8mVaP4uE9HiNo9VxKa5kdvh3bWmyNK8t-MvbfSOgSom/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="400"></a></div><br>Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript:<br><br><h3>Option 1: Recent Posts Widget with Snippets</h3><blockquote class="tr_bq"><div id="hlrpsa"><br><script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js"><br></script><br><script><br>var numposts = <b><span style="color: red;">5</span></b>;var showpostdate = <b><span style="color: red;">false</span></b>;var showpostsummary = true;var numchars = <b><span style="color: red;">100</span></b>;var standardstyling = true;<br></script><br><script src="<span style="color: blue;">http://blog-address.com</span><b></b>/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"><br></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="/2015/07/simple-recent-posts-widget-for_7.html" rel="nofollow" >Recent Posts Widget</a><br><noscript>Your browser does not support JavaScript!</noscript><br><style type="text/css"><br>#hlrpsa a {color: <b><span style="color: blue;">#0B3861</span></b>; font-size: <b><span style="color: purple;">13px</span></b>;} <br>#rpdr, #rpdr a {color:#808080;}<br>#hlrpsa { color:<b> <span style="color: #38761d;">#999999</span></b>; font-size: <b><span style="color: orange;">11px</span></b>; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}<br>.hlrps a {font-weight:bold; }<br>.hlrpssumm {}<br></style></blockquote><br><h3>Option 2: Recent Posts Widget Showing Post Titles Only</h3><blockquote class="tr_bq"><div id="hlrpsb"><br><script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script><br><script style="text/javascript">var numposts = <b><span style="color: red;">10</span></b>;var showpostdate =<b><span style="color: red;"> false</span></b>;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><br><script src="<span style="color: blue;">http://blog-address.com</span>/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="/2015/07/simple-recent-posts-widget-for_7.html" rel="nofollow" >Recent Posts Widget</a><br><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript><br><style type=text/css> <br>#hlrpsb a {color: <span style="color: blue;"><b>#0B3861</b></span>; font-size: <span style="color: #741b47;"><b>13px</b></span>;} <br>#rpdr, #rpdr a {color:#808080;}<br>.bbrecpost2 {<br>padding-top:6px;<br>padding-bottom:6px;<br>border-bottom: 1px #cccccc dotted; }<br></style></blockquote>Step 4. Customize it:<br>- Change <b><span style="color: red;">5</span></b> (option 1) and <b><span style="color: red;">10</span></b> (option 2) with the number of posts that you want to display.<br>- Change <b><span style="color: red;">false</span></b> to true if you want the posts dates to appear<br>- Change 100 (option 1) if you want more characters to be displayed.<br>- To change the color and font size of the links, modify the values in <span style="color: blue;"><b>blue</b></span> (links) and <span style="color: #741b47;"><b>violet</b></span> (font-size)<br>- To change the style of posts summary, modify the values in <span style="color: #38761d;"><b>green</b></span> (color) and <span style="color: orange;"><b>orange</b></span> (font size)<br>- Replace the <span style="color: blue;">http://blog-address.com</span> text with your URL<br><br>Step 5. Save your widget. And that's it! Enjoy!<br></div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle25197552418331573382"></div><script type="text/javascript">var obj0=document.getElementById("adsmiddle15197552418331573382"); var obj1=document.getElementById("adsmiddle25197552418331573382"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Simple Recent Posts Widget for Blogger/Blogspot

The main advantage on this Recent Posts widget is that it will show not only post titles, but also post excerpts or snippets, and it's e...

Read more »

Color Code Generator

<div class="post-body"><div id="adsmiddle18639811741251181528"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWHMHnRXd9zUtPL_8LYqwRkxqI-FQoolBK2SF4DUQqlAcWkEc_F7ssKLitwYzKeTMYZXVS3Pnmv9N9nCZ2FRLL0whYkoKK8T11QPpSpVuCcjMpZmt8SVnufhswQXWnVnwIXcE_nuqRbWD/s1600/color-code-generator-for-blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="hex codes, color chart, color codes" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOWHMHnRXd9zUtPL_8LYqwRkxqI-FQoolBK2SF4DUQqlAcWkEc_F7ssKLitwYzKeTMYZXVS3Pnmv9N9nCZ2FRLL0whYkoKK8T11QPpSpVuCcjMpZmt8SVnufhswQXWnVnwIXcE_nuqRbWD/s1600/color-code-generator-for-blogger.jpg" title="color code generator for blogger"></a></div>This Color Code Generator will help you get the six digit color code i.e hexadecimal value. It could be very effective if you want to get  a perfect combination of colors for your blog and if you have a good experience about color picking and selection matching, this will help you to make your blog to look really professional. The Color Code Generator is also very useful when you try to blend the Google Adsense Ads with the site content.<br><br><center><object border="0" classid="clsid:D27CDB6E -AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param name="movie" value="http://www.2createawebsite.com/build/color.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></object></center><br><span style="color: #3d85c6;"><b><span style="font-size: large;">Instructions</span></b></span><br><br>- Drag the bar on the "Hue" selector to the area of your desired colour palette. <br>- Then click inside the Brightness/Saturation area and drag the cursor until you have achieved your desired colour. The "Swatch" bar shows you the final colour result.<br>- The hexadecimal colour code is generated in the "Hex" box. Simply copy the six digit code i.e #000000<br><br><h3><span style="color: #3d85c6;">How to add Hex Colour Code Generator </span></h3><br>To install Hex Color Code Generator on a Blogger/Blogspot page or post, copy the following code and paste it in the post or page HTML:<br><blockquote class="tr_bq"><center><object border="0" classid="clsid:D27CDB6E -AE6D-11CF-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="480" id="obj1" width="480"> <param name="movie" value="http://www.2createawebsite.com/build/color.swf"><param name="quality" value="High"><embed src="http://www.2createawebsite.com/build/color.swf" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" name="obj1" width="485" height="485" quality="High"></embed></object></center></blockquote>That's it! </div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle28639811741251181528"></div><script type="text/javascript">var obj0=document.getElementById("adsmiddle18639811741251181528"); var obj1=document.getElementById("adsmiddle28639811741251181528"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div>

Blog Design Color Code Generator

This Color Code Generator will help you get the six digit color code i.e hexadecimal value. It could be very effective if you want to get  a...

Read more »

CSS Basics. How to Apply Rounded Corners On Images #2

<div class="post-body"><div id="adsmiddle13866518637046698909"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnEj615x1EpJ0VhdRaZqkD_KnGWZ4j-B_KrfgeZsU52uxWkxq4CpdhKP2LUC12k8bUWTtzvUQD6cCcXjPi3hjPM6PlvsOsjBuk6CTH1TRrEtK989zBc2iFtPFVMhghPdos2LLj98GUg8a/s1600/leaf.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img alt="blogger tricks, css tricks, border radius" border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnEj615x1EpJ0VhdRaZqkD_KnGWZ4j-B_KrfgeZsU52uxWkxq4CpdhKP2LUC12k8bUWTtzvUQD6cCcXjPi3hjPM6PlvsOsjBuk6CTH1TRrEtK989zBc2iFtPFVMhghPdos2LLj98GUg8a/s1600/leaf.jpg" style="border-radius: 800px 800px 800px 800px; border: 2px solid rgb(186, 218, 85); margin-top: 0px; padding: 0px;" title="how to round images using css in Blogger" width="200" /></a><a href="/2015/06/css-basics-how-to-apply-rounded-corners_73.html" style="color: blue;">In the previous post</a> I have mentioned that we will learn about how to create rounded images using CSS, without needing to edit them one by one using a program. Now that we have seen the basics of CSS, let's try to apply it on some pictures.<br /><br />What we will do in this tutorial is to upload an image (HTML) and then add some rules in the stylesheet that will transform the outer shape to look like a circle... or, at least, to appear round. This will depend on the proportions of that picture we will use.<br /><br />In fact, we can apply this effect to any picture, to a specific part of our blog or to all the pictures found in our blog. This depends on your tastes.<br /><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>Marking up HTML</b></span></span><br /><br />Obviously, the first thing we need to do in order to set a rounded border around an image is to get a picture and upload it to get the html structure. The code could be a little bit more complicated, but an image is built within the <b>img</b> tag, which basically, looks like this:<br /><blockquote class="tr_bq"><img src="<span style="color: blue;">image_URL</span>"/></blockquote><i>Screenshot</i>:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcmgDm6VHLwXw8YLKavetyXjepbTx8OBu4nNlp_wmHXs2Pi4zWQr803tjnU15fKfKhTM6lhPpqB9bC0nuJeTV-E-mDWpGBSYhdAhTGy8koGONmXPRJ0e0UDS9shhzK46-R-z-zzt8ub7pk/s1600/how-to-add-rounded-border-to-blogger-images-css-border-radius.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="116" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcmgDm6VHLwXw8YLKavetyXjepbTx8OBu4nNlp_wmHXs2Pi4zWQr803tjnU15fKfKhTM6lhPpqB9bC0nuJeTV-E-mDWpGBSYhdAhTGy8koGONmXPRJ0e0UDS9shhzK46-R-z-zzt8ub7pk/s1600/how-to-add-rounded-border-to-blogger-images-css-border-radius.png" width="320" /></a></div><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWbuQDWlkjglXCJIBQyaV9RtmRBSbQk0EklnYaDMBJiF2QqnBIRgQhdZ6cysG7bdTowNv8stmGF23YMo_zvO7NgMANS-Jm_elA6oCCAEP710zxkrARr35pZ7P2-3bpW-993Df61I-ncR6/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCWbuQDWlkjglXCJIBQyaV9RtmRBSbQk0EklnYaDMBJiF2QqnBIRgQhdZ6cysG7bdTowNv8stmGF23YMo_zvO7NgMANS-Jm_elA6oCCAEP710zxkrARr35pZ7P2-3bpW-993Df61I-ncR6/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" width="150" /></a></div>Adding this code inside the HTML of the post with the url of our image - instead of the text in blue - we will be able to display it like this image on the left.<br /><br />Usually, it might also contain an <b>alt </b>text, and sometimes, may have some predetermined dimensions (with a specific width and/or height). When we upload an image using the Blogger post editor, the code will also have a link pointing to the original image.<br /><br />But if we want to modify this image using CSS, we need to add a class selector. We can add it in two ways: within the <b>img</b> tag or in a parent box. The name that I have chosen for the image selector is <span style="color: #990000;">roundedcorners</span>, however, you can add any name you want: <br /><blockquote class="tr_bq"><img class="<span style="color: #990000;">roundedcorners</span>" src="<span style="color: blue;">image_URL</span>"/></blockquote><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmfrXgrCYJhqIh5WPP0TjjpO1pP2BRBqphffRYG1pq5UB89BLdFZQtPo6j3_T9e2ZmlM8zLiyAI0_InixQzY4MnHRfUpwwk4BaHOV4_JNC2sdeDJHnQYOrmy-wxv_EtaQRYAR_MwMPh0l/s1600/how-to-add-rounded-border-to-blogger-images-css-border-radius-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="99" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNmfrXgrCYJhqIh5WPP0TjjpO1pP2BRBqphffRYG1pq5UB89BLdFZQtPo6j3_T9e2ZmlM8zLiyAI0_InixQzY4MnHRfUpwwk4BaHOV4_JNC2sdeDJHnQYOrmy-wxv_EtaQRYAR_MwMPh0l/s1600/how-to-add-rounded-border-to-blogger-images-css-border-radius-1.png" width="320" /></a></div><br /><blockquote class="tr_bq"><div class="<span style="color: #990000;">roundedcorners</span>"><br /><img src="<span style="color: blue;">image_URL</span>"/><br /></div></blockquote><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>Applying style to all homogeneous elements</b></span></span><br /><br />But that selector alone won't do anything special. It needs to be linked to a style rule telling what to do with it. The same if when we add just classes, if these are not defined within the CSS, the appearance of a picture (or a certain element) will not change.<br /><br />To change the shape of the all the pictures on our blog, this is what we should add to our CSS:<br /><blockquote class="tr_bq"><span style="color: #cc0000;">img</span> {<br />border: 2px solid #BADA55;<br />margin: 0;<br />padding: 0;<br />border-radius: 1000px;<br />-moz-border-radius: 1000px;<br />}</blockquote>And how this translates to your browser?<br /><br />Search for images by name tag (<span style="color: #cc0000;">img</span>) and apply the following style:<br /><ul><li>a solid green border of 2 pixels</li><li>set the margins (space outside the border) and padding (space inside the border) to zero</li><li>apply the rounded corner look to all the four corners</li></ul><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpYK0ZyiL79562AoerJsoDEEQW12GKlzMaAFT4N7Y15_1XrIU9Py8tyAwdy1yglhY93HmqMfJELWxxAZcUli4leKuiwnYAubwC6DbTDZYIxH2ImxhkpExgKA5EYj9FZ5gZIcJTV3npc6w/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpYK0ZyiL79562AoerJsoDEEQW12GKlzMaAFT4N7Y15_1XrIU9Py8tyAwdy1yglhY93HmqMfJELWxxAZcUli4leKuiwnYAubwC6DbTDZYIxH2ImxhkpExgKA5EYj9FZ5gZIcJTV3npc6w/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" style="border-radius: 100% 100% 100% 100%; border: 2px solid rgb(186, 218, 85); margin-top: 0px; padding: 0px;" width="150" /></a>Now that we have this rule in our style sheet itself, we'll be able to see the picture as we want - take a look at the image on the right.<br /><br />To declare a property correctly, we need to know what it does and how to write it - details which could be found all over the internet, although <a href="http://www.w3.org/TR/css3-background/#the-border-radius">W3C</a> is the authority in this.<br /><br />For instance, the <b>border-radius</b> property initially requires four (4) values reading from left to right, which represent the roundness of the upper-left, upper-right, lower-right and lower-left corner. If you add a single value, it will make all the four corners to be equal with that value.<br /><br />It is important to mention that when the value of the border exceeds the dimensions of the container, this border will create a circle. <br /><br /><span style="color: #3d85c6;"><span style="font-size: large;"><b>How to apply the same style<span style="font-size: large;"> on</span> <span style="font-size: large;">t</span>he elements of <span style="font-size: large;">t</span>he <span style="font-size: large;">s</span>ame container</b></span></span><br /><br />Sometimes, we don't want all the images on our blog to be round, but only the ones that we choose, otherwise adding the style above within the head tag will make all the pictures taking this shape. Before, we used an HTML tag (<span style="color: #cc0000;">img</span>) and not a selector and, for this reason, the style will affect all our images.</div><div style="clear: both: margin: 10px 5px; display: none;"></div><div id="adsmiddle23866518637046698909">To avoid this, we can do one of the things we saw at the beginning of this post and that was to place the image inside a div with the <span style="color: #990000;">roundedcorners</span> class. This way, only the images within the container with that class will be affected by the rule that will make them round.<br /><blockquote class="tr_bq"><div class="<span style="color: #990000;">roundedcorners</span>"><img src="<span style="color: blue;">image_URL</span>"/></div></blockquote>But the rule then should not affect the img tag directly, but the <span style="color: #990000;">roundedcorners</span> selector. In this case, you should write it like this:<br /><blockquote class="tr_bq">.roundedcorners img {<br />border: 2px solid #BADA55;<br />....<br />}</blockquote><i>This implies that this style applies only to images that are within the container with the roundedcorners class. </i><br /><br /><span style="font-size: large;"><b><span style="color: #3d85c6;">Final words</span></b></span><br /><br />To end this tutorial on creating pictures with rounded borders, keep in mind that if these are not square, instead of becoming circular, they will look oval:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQmaO15GWROhm42mnJkwvv1jGkzzkaTQC_uPXptQsswrdNpLjaffcKfepJISbupoE6LlCy5jtxDI_gpiNAwMGBHN151qLRB8xVYkrMeVQJVt966LrMTs6JYwP3m2D1usR97BVITw1gXXJ/s1600/Snail_and_Chameleon.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQQmaO15GWROhm42mnJkwvv1jGkzzkaTQC_uPXptQsswrdNpLjaffcKfepJISbupoE6LlCy5jtxDI_gpiNAwMGBHN151qLRB8xVYkrMeVQJVt966LrMTs6JYwP3m2D1usR97BVITw1gXXJ/s1600/Snail_and_Chameleon.jpg" style="border-radius: 100px; border: 2px solid #BADA55; margin: 0; padding: 0;" width="320" /></a></div><br />To fix this we should add the width and height with the same measure (value in pixels) to force the image cropping and to make it appear perfectly circular. That was all!<br /><br />If you enjoy reading this blog, please share and subscribe. For any questions, drop a comment below ;) </div><script type="text/javascript">var obj0=document.getElementById("adsmiddle13866518637046698909"); var obj1=document.getElementById("adsmiddle23866518637046698909"); var s=obj1.innerHTML; var r=s.search(/\x3C!-- adsense --\x3E/igm); if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);} </script></div><br /><br /><br /><br /><br /><br /><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F2.bp.blogspot.com%2F-JE2gK4-dcDs%2FUUjMcD2KmmI%2FAAAAAAAADH8%2FYEdAZ5zGFIM%2Fs1600%2Fleaf.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnEj615x1EpJ0VhdRaZqkD_KnGWZ4j-B_KrfgeZsU52uxWkxq4CpdhKP2LUC12k8bUWTtzvUQD6cCcXjPi3hjPM6PlvsOsjBuk6CTH1TRrEtK989zBc2iFtPFVMhghPdos2LLj98GUg8a/s1600/leaf.jpg" --><!-- Blogger automated replacement: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnEj615x1EpJ0VhdRaZqkD_KnGWZ4j-B_KrfgeZsU52uxWkxq4CpdhKP2LUC12k8bUWTtzvUQD6cCcXjPi3hjPM6PlvsOsjBuk6CTH1TRrEtK989zBc2iFtPFVMhghPdos2LLj98GUg8a/s1600/leaf.jpg" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihnEj615x1EpJ0VhdRaZqkD_KnGWZ4j-B_KrfgeZsU52uxWkxq4CpdhKP2LUC12k8bUWTtzvUQD6cCcXjPi3hjPM6PlvsOsjBuk6CTH1TRrEtK989zBc2iFtPFVMhghPdos2LLj98GUg8a/s1600/leaf.jpg" --><!-- Blogger automated replacement: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpYK0ZyiL79562AoerJsoDEEQW12GKlzMaAFT4N7Y15_1XrIU9Py8tyAwdy1yglhY93HmqMfJELWxxAZcUli4leKuiwnYAubwC6DbTDZYIxH2ImxhkpExgKA5EYj9FZ5gZIcJTV3npc6w/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpYK0ZyiL79562AoerJsoDEEQW12GKlzMaAFT4N7Y15_1XrIU9Py8tyAwdy1yglhY93HmqMfJELWxxAZcUli4leKuiwnYAubwC6DbTDZYIxH2ImxhkpExgKA5EYj9FZ5gZIcJTV3npc6w/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" --><!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-QmnwxuDE88w%2FUUjP4kyusKI%2FAAAAAAAADII%2FXlGDFxhDD4s%2Fs1600%2Fhow-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYpYK0ZyiL79562AoerJsoDEEQW12GKlzMaAFT4N7Y15_1XrIU9Py8tyAwdy1yglhY93HmqMfJELWxxAZcUli4leKuiwnYAubwC6DbTDZYIxH2ImxhkpExgKA5EYj9FZ5gZIcJTV3npc6w/s1600/how-to-add-rounded-corners-to-images-blogger-tutorial-css-trick.jpg" -->

Blog Design CSS Basics. How to Apply Rounded Corners On Images #2

In the previous post I have mentioned that we will learn about how to create rounded images using CSS, without needing to edit them one by ...

Read more »