tag:blogger.com,1999:blog-30632450795100591092024-03-14T02:25:19.004+10:00Allure Blogger DesignA blog where I share tips and tutorials for designing your blogger blog that I have picked up along the way.MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.comBlogger16125tag:blogger.com,1999:blog-3063245079510059109.post-60610935132567894682013-09-10T16:26:00.000+10:002013-09-10T16:26:14.675+10:00Twitter Widget for Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSc79R3d3Q6YAammmV9Lj6x-ws3UrCCbWmgitwDPBSkTf6YtHpXhpYLH5NGaMFf4oVdJQrQ1coBDcqRaeYhLBOx7V53dpSJCO8-YPxo1PS-470MJCL2_JLzQ6lgLD_6O5l2Nf_x2bs4gwN/s1600/Twitter+Widget.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/AVvXsEjSc79R3d3Q6YAammmV9Lj6x-ws3UrCCbWmgitwDPBSkTf6YtHpXhpYLH5NGaMFf4oVdJQrQ1coBDcqRaeYhLBOx7V53dpSJCO8-YPxo1PS-470MJCL2_JLzQ6lgLD_6O5l2Nf_x2bs4gwN/s1600/Twitter+Widget.jpg" /></a></div>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
<a name='more'></a>Sooner or later there will be posts to show you how to get widgets for <u>all</u> of your social media accounts, and today's post is a Twitter widget for your blog. In my opinion Twitter is one of if not the most important social media service for not only promoting your blog but getting in touch with similar bloggers.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
So to begin click <a href="https://twitter.com/settings/widgets" target="_blank">here</a> which will direct you to the Widget section of Twitter. You will need to be logged in. For the Twitter<b> buttons</b> scroll down.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Click on the <span style="color: #d15086;"><b>Create new</b></span> button.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwLwnn8bh4MBF3wEdwhMJVc_lt2Hi9BjAifZKuM36hBI_YWleaTuzp7IsdTQdL6C-Pyw07bJVVPIfIHayS3f8pMoJmwFMhygsrr2EF-zvsGs3KInXEBT6RwmAQXhuxcr4IlOI02J2m2npq/s1600/Twitter+Widget+Twitter.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/AVvXsEjwLwnn8bh4MBF3wEdwhMJVc_lt2Hi9BjAifZKuM36hBI_YWleaTuzp7IsdTQdL6C-Pyw07bJVVPIfIHayS3f8pMoJmwFMhygsrr2EF-zvsGs3KInXEBT6RwmAQXhuxcr4IlOI02J2m2npq/s1600/Twitter+Widget+Twitter.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
You will be taken to the <b style="color: #d15086;">Widgets Configurator </b>page where by simply choosing the options you will have a Twitter widget for your blog. Once you've chosen the timeline source you prefer and filled in the customisation options click the <b style="color: #d15086;">Create widget </b>button.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFXt_NyX_TPNYo03v6jnVTeZGqnekkgO1CVMM6jNmxJDJyQ6ucYL-rZ_c6bZuaFE5Q_P-EVsNOm3nYuHdmz8niFHFxy406NH3ROwM9dlRj0ZurzvlwNvf-txqg50FhIE9QTk6XK_LTkldu/s1600/Twitter+Widget+Twitter.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/AVvXsEgFXt_NyX_TPNYo03v6jnVTeZGqnekkgO1CVMM6jNmxJDJyQ6ucYL-rZ_c6bZuaFE5Q_P-EVsNOm3nYuHdmz8niFHFxy406NH3ROwM9dlRj0ZurzvlwNvf-txqg50FhIE9QTk6XK_LTkldu/s1600/Twitter+Widget+Twitter.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
By clicking the <b style="color: #d15086;">Create widget </b>button your screen will reload to show a message stating <span style="color: #d15086;"><i>Your widget has been created</i><b> </b></span>and will provide you with your customised code.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUOZjr8SOaTYabpWtLkIV49b691_CReAueUF1CSU2Ew_XOEkgKm9rvEaHWNsLwJ2NtrA3na2qbm4xm8IGTM_o7M0yt0bsbK9j8tKlu4V3KN7Ef39Lorr6wGK4ecJQ8jSLiJc7lZCDIQ3Ko/s1600/Twitter+Widget+Twitter.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/AVvXsEhUOZjr8SOaTYabpWtLkIV49b691_CReAueUF1CSU2Ew_XOEkgKm9rvEaHWNsLwJ2NtrA3na2qbm4xm8IGTM_o7M0yt0bsbK9j8tKlu4V3KN7Ef39Lorr6wGK4ecJQ8jSLiJc7lZCDIQ3Ko/s1600/Twitter+Widget+Twitter.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Now log onto Blogger and go to your blog and click <b style="color: #d15086;">Layout </b>on the left side of your screen. Now click the <b style="color: #d15086;">'Add a Gadget' </b>module and choose the <b style="color: #d15086;">'HTML/Javascript' </b>option. This will open a <b style="color: #d15086;">'Configure HTML/Javascript' </b>window. The <b style="color: #d15086;">'Content' </b>section is where you will be pasting your customised code.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh24-Hm7DmuQ9DWYOIKR9UO0Iy60_o2NlpYWldt2Dpxl5KhicO0qowQcPizEbD-QFjPLP2a-1O-J6Rx9T-5l3tpYTvODD605_XVMQNgkTANlpOfmITlNZ6akaASpU-ShdEk0cvdkhlTo0gx/s1600/Add+a+Gadget+Blogger.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/AVvXsEh24-Hm7DmuQ9DWYOIKR9UO0Iy60_o2NlpYWldt2Dpxl5KhicO0qowQcPizEbD-QFjPLP2a-1O-J6Rx9T-5l3tpYTvODD605_XVMQNgkTANlpOfmITlNZ6akaASpU-ShdEk0cvdkhlTo0gx/s1600/Add+a+Gadget+Blogger.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfZo1LxNUUDIoFdymfqrNVTbbvH1Uxa7AMZZuzlR1OdfYUyh2AFFM44aWxrtOGXN7jcoxy1SquX-NKjCh9W-TOrym4q9vm1-gByOUS8qK8eKimmscrvGX3fEoGZboEesvVNCSFkRXv_Y6X/s1600/Adding+a+HTML+Gadget+to+Blogger.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/AVvXsEhfZo1LxNUUDIoFdymfqrNVTbbvH1Uxa7AMZZuzlR1OdfYUyh2AFFM44aWxrtOGXN7jcoxy1SquX-NKjCh9W-TOrym4q9vm1-gByOUS8qK8eKimmscrvGX3fEoGZboEesvVNCSFkRXv_Y6X/s1600/Adding+a+HTML+Gadget+to+Blogger.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<center style="text-align: left;">
Back to your Twitter Widgets tab copy and paste the code into the <b style="color: #d15086;">'Content' </b>section of the <b style="color: #d15086;">'Configure HTML/Javascript' </b>window on Blogger. The <b style="color: #d15086;">'Title' </b>section is optional however as shown I have labelled it <i>Twitter</i>. Click <b style="color: #d15086;">Save</b>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUgAYr9gjn0JjZbvEczCPycOToLjbhyphenhyphenj-Nj7ZnnwdJQm0Msek-k8tG8C18mQHPZbR0o_SnmNMeDpMYuMm5QBF1a_2gOBipUek7jbzKii6tv9cJA48YDgKJWtLcQEvpOXPaftxhztHMZzPP/s1600/Twitter+Widget+Twitter.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUgAYr9gjn0JjZbvEczCPycOToLjbhyphenhyphenj-Nj7ZnnwdJQm0Msek-k8tG8C18mQHPZbR0o_SnmNMeDpMYuMm5QBF1a_2gOBipUek7jbzKii6tv9cJA48YDgKJWtLcQEvpOXPaftxhztHMZzPP/s1600/Twitter+Widget+Twitter.jpg" /></a></div>
<center style="text-align: left;">
You can now move the HTML/Javascript module anywhere in your blog layout you would like your Twitter widget to appear. You can then preview your blog with your Twitter widget and once happy press <b style="color: #d15086;">Save arrangement</b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<u><b>The other type of widget for Twitter is the different types of buttons - including the <i>share a link</i>, <i>follow</i>, <i>hashtag</i> and <i>mention</i> buttons.</b></u></center>
<center style="text-align: left;">
<u><b><br /></b></u></center>
<center style="text-align: left;">
To get a Twitter button on your Blogger blog click <a href="https://twitter.com/about/resources/buttons" target="_blank">here</a> to be directed to the Twitter>About>Resources>Buttons webpage. You will need to be logged into Twitter.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Choose which button you would like by clicking the corresponding point.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi79FoIXSjynXZtoMQApTMjuBDiRJ7ak_GIT-FRkBVdXywfTX-IkaRBsW5jR4Hgi3Cyfl3NhSwjLgyh2ETqMuwg49n2YIkXGHquNi7geBRIuRrAVLjwAq2HglW8B-oHp1W53f7VXArxP4AP/s1600/Twitter+Follow+Button.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/AVvXsEi79FoIXSjynXZtoMQApTMjuBDiRJ7ak_GIT-FRkBVdXywfTX-IkaRBsW5jR4Hgi3Cyfl3NhSwjLgyh2ETqMuwg49n2YIkXGHquNi7geBRIuRrAVLjwAq2HglW8B-oHp1W53f7VXArxP4AP/s1600/Twitter+Follow+Button.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
For this example I have chosen the <b style="color: #d15086;">Follow </b>button. This will expand your screen where you can customise the button to your liking. <i>Customisation options are limited but still available</i>. The screen will also include your customised code.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzAcuNQLwA1QsPZh1-iGkDHQnaOLvEEBOStOvYDr-LBVbCWpAh1EutkmsG0Op95_1GkaLtwV73SNQpISVwQLlsmn5lS_8p6nPduOaATK-ObbU_QHC8sX8fOeVTd0MK0AVBQDo3RjtDjfvr/s1600/Twitter+Follow+Button.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/AVvXsEhzAcuNQLwA1QsPZh1-iGkDHQnaOLvEEBOStOvYDr-LBVbCWpAh1EutkmsG0Op95_1GkaLtwV73SNQpISVwQLlsmn5lS_8p6nPduOaATK-ObbU_QHC8sX8fOeVTd0MK0AVBQDo3RjtDjfvr/s1600/Twitter+Follow+Button.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Llike we did for the Twitter widget, you will now log onto Blogger and go to your blog and click <b style="color: #d15086;">Layout </b>on the left side of your screen. Now click the <b style="color: #d15086;">'Add a Gadget' </b>module and choose the <b style="color: #d15086;">'HTML/Javascript' </b>option. This will open a <b style="color: #d15086;">'Configure HTML/Javascript' </b>window. The <b style="color: #d15086;">'Content' </b>section is where you will be pasting your customised code.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOCz7g3jCj5zW454mRT6drMH4zBPmTAFSd4YXnm5S-xXq7Rf6dVCjSkY9kM63o6V48tEc59waeYMedEfR6VQclreg0lt7VCX2nfSiYuQqyRdK72dQW2tQ2uziIXI4Qq1VXmVwTo1bLV9QZ/s1600/Add+a+Gadget+Blogger.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/AVvXsEhOCz7g3jCj5zW454mRT6drMH4zBPmTAFSd4YXnm5S-xXq7Rf6dVCjSkY9kM63o6V48tEc59waeYMedEfR6VQclreg0lt7VCX2nfSiYuQqyRdK72dQW2tQ2uziIXI4Qq1VXmVwTo1bLV9QZ/s1600/Add+a+Gadget+Blogger.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnGxG2zTgbjvxdnCfvW2gJcs0nI_4wzjWuc-riXDtCEFlDH6tvqVTLg7JLlwknaYr9F2RP8aOw5BiwM3rcsXWqA21f9PZHvpajtuRwMLS_61RnbAsx8n6xt-NToU9vFHOqfBIUeZa9Zfdo/s1600/Adding+a+HTML+Gadget+to+Blogger.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/AVvXsEgnGxG2zTgbjvxdnCfvW2gJcs0nI_4wzjWuc-riXDtCEFlDH6tvqVTLg7JLlwknaYr9F2RP8aOw5BiwM3rcsXWqA21f9PZHvpajtuRwMLS_61RnbAsx8n6xt-NToU9vFHOqfBIUeZa9Zfdo/s1600/Adding+a+HTML+Gadget+to+Blogger.jpg" /></a></div>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Back to your Twitter Buttons tab copy and paste the code into the <b style="color: #d15086;">'Content' </b>section of the <b style="color: #d15086;">'Configure HTML/Javascript' </b>window on Blogger. The <b style="color: #d15086;">'Title' </b>section is optional however as shown I have labelled it <i>Followers</i>. Click <b style="color: #d15086;">Save</b>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEKjqn5wPowYb6h0G6u4bmTj1kt1CeXJYAFBj6udv3Alba3J-baFVWWcv9XqqNSu4m-zM4qDASpsuN-8hlfNYlcgfO1hF5Xsj87xA2xnooIZO7I0nOncPplaQIUFtesMmdt1JpVyW9ylxX/s1600/Twitter+Follow+Button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEKjqn5wPowYb6h0G6u4bmTj1kt1CeXJYAFBj6udv3Alba3J-baFVWWcv9XqqNSu4m-zM4qDASpsuN-8hlfNYlcgfO1hF5Xsj87xA2xnooIZO7I0nOncPplaQIUFtesMmdt1JpVyW9ylxX/s1600/Twitter+Follow+Button.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
You can now move the HTML/Javascript module anywhere in your blog layout you would like your Twitter button to appear. You can then preview your blog with your Twitter button and once happy press <b style="color: #d15086;">Save arrangement</b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
That's it, you did it! Enjoy your Twitter widget and/or button/s.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-83105460153489736512013-09-08T13:11:00.000+10:002013-09-08T13:11:58.746+10:00How To - Make a Favicon<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuLsTFaHjSH86_NbN_zcrRLKHwzex7OeNaaSu_f86yHR8rz4TEM8J54ChkkLKu95PqCsGeUztMaSla_i0nf1XdP4dmtTU-G5JKr7Cq13DuxM6V3LTnWIx5IoIifrKREPZxsXheRsYyMTwU/s1600/How+To+-+Make+a+Favicon.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/AVvXsEiuLsTFaHjSH86_NbN_zcrRLKHwzex7OeNaaSu_f86yHR8rz4TEM8J54ChkkLKu95PqCsGeUztMaSla_i0nf1XdP4dmtTU-G5JKr7Cq13DuxM6V3LTnWIx5IoIifrKREPZxsXheRsYyMTwU/s1600/How+To+-+Make+a+Favicon.jpg" /></a></div>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
<a name='more'></a><div style="text-align: left;">
Have you ever wondered how to get a favicon? Are you wondering what a favicon is? A <span style="color: #d15086;"><b>favicon</b></span> is a marketing/shortcut/URL/bookmark icon found in the tab of your browser. For example below is a screenshot showing the different favicons for Blogger, Google and Twitter.</div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit0C3xN0cSd2_QHkyCgO4nwg76qpZbFFkRaTlkoDXQjUEHTmu_t6CZSqqug4uJ2i6twBE0lePLRM-UKnhD8qd2EoMaPQay_BG0NIcs-XEZRYs1j44_t-_OoSnsCSRpNHA0O91GhEe5KhEF/s1600/Favicons.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/AVvXsEit0C3xN0cSd2_QHkyCgO4nwg76qpZbFFkRaTlkoDXQjUEHTmu_t6CZSqqug4uJ2i6twBE0lePLRM-UKnhD8qd2EoMaPQay_BG0NIcs-XEZRYs1j44_t-_OoSnsCSRpNHA0O91GhEe5KhEF/s1600/Favicons.jpg" /></a></div>
<br /></div>
<div style="text-align: left;">
<br /></div>
<div style="text-align: left;">
<br /></div>
</center>
<center>
</center>
<center>
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
A favicon is a further way to add a design element to your blog and <u>concrete</u> your <i>logo</i>. This means when someone reads your blog they will see your personal <i>logo</i> instead of Blogger's favicon.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
To make a favicon for your blog you will need to do just that... make a favicon. You can make one on any photo-editing program or website such as <i>(and again I'll list my favourites)</i> Picmonkey, Gimp, Photoshop etc.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
You can create anything you like, choose any colours, objects or text. Let your creativity flow! However there are a few points to remember:</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<ul>
<li><b><u>Must</u></b> be a square image. For example 80x by 80px, it cannot be 80px by 81px. It will not work.</li>
<li>The image file <b><u>must</u></b> be under 100kb in size.</li>
</ul>
<div>
<br /></div>
<div>
Once you have created a square image to use as your favicon open <b style="color: #d15086;">Blogger </b>and click <b style="color: #d15086;">Layout </b>on the left side of your screen. Now click on <b style="color: #d15086;">'Edit' </b>on the favicon module.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilgfr8D9sXw3GwWapwJwzEc_3uWeGuLWKv3Czi4N5smxw0o7BwtOXhuI7QwB6fKD2Bs3Tt0Lpu8ELOoHF__q3Td8M-SOaiV_G_zkEKFtCRHFLsDxp11qK4E9WlqzCdWKKxIQsgZ0g7JUqG/s1600/Make+a+Favicon+for+Blogger.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/AVvXsEilgfr8D9sXw3GwWapwJwzEc_3uWeGuLWKv3Czi4N5smxw0o7BwtOXhuI7QwB6fKD2Bs3Tt0Lpu8ELOoHF__q3Td8M-SOaiV_G_zkEKFtCRHFLsDxp11qK4E9WlqzCdWKKxIQsgZ0g7JUqG/s1600/Make+a+Favicon+for+Blogger.jpg" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
This will open the <b style="color: #d15086;">'Configure Favicon'</b> window shown below where you will click the <b style="color: #d15086;">Choose File </b>button to upload the image/favicon you previously made and saved to your computer. Once you have uploaded your favicon press <b style="color: #d15086;">Save</b>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJxynYRZvfbzuu-DXZxd2V0TAukTK5bzXFvXDRc2Ht4voH3puWardLfvaEZOGQ2WWX6yoSjBDVvaouE_a26iniYvJ8J0hGetzoskFIFKougyNw_GLsw68BUmnVLneQUajYoPAndt_Y6wi6/s1600/Blogger+Configure+Favicon.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/AVvXsEhJxynYRZvfbzuu-DXZxd2V0TAukTK5bzXFvXDRc2Ht4voH3puWardLfvaEZOGQ2WWX6yoSjBDVvaouE_a26iniYvJ8J0hGetzoskFIFKougyNw_GLsw68BUmnVLneQUajYoPAndt_Y6wi6/s1600/Blogger+Configure+Favicon.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
</div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Once saved the <b style="color: #d15086;">Layout </b>of your blog will show your custom favicon instead of the default Blogger one.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLlilxvImcpLTqn2-M6P0p_RRHbXowJqxj3U7Tw9pN8dGBNHznzXkyQKQ861DKIBh1fGO5hO_AoNPWFdTTeVa0HJCARk_Ee82vvjuHek4SEeKf7dO_j3D6zJ3qeUkgkEiShS41rN20ojAH/s1600/Uploading+favicon+to+blogger.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/AVvXsEjLlilxvImcpLTqn2-M6P0p_RRHbXowJqxj3U7Tw9pN8dGBNHznzXkyQKQ861DKIBh1fGO5hO_AoNPWFdTTeVa0HJCARk_Ee82vvjuHek4SEeKf7dO_j3D6zJ3qeUkgkEiShS41rN20ojAH/s1600/Uploading+favicon+to+blogger.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
You can now click <b style="color: #d15086;">Preview </b>and <b style="color: #d15086;">Save arrangement </b>to see your favicon for your blog in your browser.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4-_kax-148E0WIsGS9F9-964Wrx3SyS1F_aHNRCPOK3fIGLifu4rF_pNaRU4_nDrXjag5ixOmOZzt036JgrWKPQdIbgNT486-xLyAFQeKz84oM_XJMJJRbnwwuOKgrEnk85mUOyO0LN4l/s1600/Uploading+favicon+to+blogger.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/AVvXsEh4-_kax-148E0WIsGS9F9-964Wrx3SyS1F_aHNRCPOK3fIGLifu4rF_pNaRU4_nDrXjag5ixOmOZzt036JgrWKPQdIbgNT486-xLyAFQeKz84oM_XJMJJRbnwwuOKgrEnk85mUOyO0LN4l/s1600/Uploading+favicon+to+blogger.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<b><u>Note:</u></b> If you have trouble seeing your new favicon try closing your internet windows/tabs and/or clearing the browser cache.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-3543394083628015862013-09-07T15:38:00.000+10:002013-09-07T15:38:01.056+10:00Pinterest Pin It Button for Images on Blogger<center>
</center>
<center>
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-a-MZZVsf4kb21S0pdrSPsvaInbI4Ursw417zWdoUTMitmDUEvRbjJ2Ftup8DAeGHMphOgTpGsnV3GFjQOY1otPnz7Vaf9WQCADTWyyRWQjnkWHQMU-WDDR9Bes3FxiBp38EnWqHAhXDC/s1600/Pinteret+Pin+It+Button+for+Images+on+Blogger.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/AVvXsEj-a-MZZVsf4kb21S0pdrSPsvaInbI4Ursw417zWdoUTMitmDUEvRbjJ2Ftup8DAeGHMphOgTpGsnV3GFjQOY1otPnz7Vaf9WQCADTWyyRWQjnkWHQMU-WDDR9Bes3FxiBp38EnWqHAhXDC/s1600/Pinteret+Pin+It+Button+for+Images+on+Blogger.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
We all know social media is an important if not <b>crucial</b> aspect of blogging and as Pinterest is on the rise as a popular source of social media what better way to enhance your blog than to add a <span style="color: #d15086;"><b>Pin It</b></span> button to your images. It works by hovering over the image where a <span style="color: #d15086;"><b>Pin It</b></span> button will appear and you can pin the image straight to your Pinterest account.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
This makes it easier for you and your readers to pin your blog images to Pinterest which hopefully will direct more traffic to your blog. To see these buttons in action your can view them on my personal blog <a href="http://allurebymaddison.blogspot.com.au/" target="_blank">Allure by Maddison</a>, as I have not implemented <span style="color: #d15086;"><b>Pin It</b></span> buttons for this design blog.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
I'd like to thank the people at <a href="http://www.bloggersentral.com/" target="_blank">Bloggersentral</a> as I found my code and realised it was originally from them. Now, lets get started.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Firstly you will need an icon to use as your <span style="color: #d15086;"><b>Pin It</b></span> button - you will find a range of different buttons by doing a few simple <b>Google</b> searches - if you need help locating some I'm happy to lend a hand. Or you can make your own.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Once you have your chosen icon saved to your computer you will need to upload it to a photo-sharing website - for this tutorial I have gone with <a href="http://photobucket.com/" target="_blank">Photobucket</a> <i>(free to use)</i>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Now log into <span style="color: #d15086;"><b>Blogger</b></span>. Click <span style="color: #d15086;"><b>Template</b></span> on the left side and click the <b style="color: #d15086;">Edit HTML </b>button.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBqa_flUtxjEAlAbYkEOiZj4PGTsqB6TbkeivZ2R_rZh-DJqLjEZPa5VxsTx7NLHBco8tGXhID0X02oaflmR-pSTq7ZU723KE_dgPJYpX_hwwcvM4cIlrkArY7inCLKeUWLcrFknvYPFsS/s1600/Pinteret+Pin+It+Button+for+Images+on+Blogger+HTML.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/AVvXsEjBqa_flUtxjEAlAbYkEOiZj4PGTsqB6TbkeivZ2R_rZh-DJqLjEZPa5VxsTx7NLHBco8tGXhID0X02oaflmR-pSTq7ZU723KE_dgPJYpX_hwwcvM4cIlrkArY7inCLKeUWLcrFknvYPFsS/s1600/Pinteret+Pin+It+Button+for+Images+on+Blogger+HTML.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<div>
<br /></div>
</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center>
</center>
<center>
</center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
Hold the <b style="color: #d15086;">Ctrl </b>and <b style="color: #d15086;">F </b>buttons simultaneously to open the <b style="color: #d15086;">Search </b>box. In the <b style="color: #d15086;">Search </b>box type <span style="font-family: Courier New, Courier, monospace;"></body></span> and press Enter. This will locate the <span style="font-family: Courier New, Courier, monospace;"></body></span> text found near the end of your html code and highlight it as shown below.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1naVL0gzuT3nHmPdnMeLoJ4ldXcI5gpIWalPdf8vMclK1Omek0lg5BUhO3qDmpVzmwVz7q4tjBV3fH6QK3GbjwnM_9NoVMUwhGzEveWsrtbB7V3El4O_YVplXN0LEc3l6VipeXZdoMrVq/s1600/Pinteret+Pin+It+Button+for+Images+on+Blogger+html+code.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/AVvXsEh1naVL0gzuT3nHmPdnMeLoJ4ldXcI5gpIWalPdf8vMclK1Omek0lg5BUhO3qDmpVzmwVz7q4tjBV3fH6QK3GbjwnM_9NoVMUwhGzEveWsrtbB7V3El4O_YVplXN0LEc3l6VipeXZdoMrVq/s1600/Pinteret+Pin+It+Button+for+Images+on+Blogger+html+code.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
You will copy the code for your <span style="color: #d15086;"><b>Pin It</b></span> button and paste it directly above the highlighted <span style="font-family: Courier New, Courier, monospace;"></body></span> text as shown below. I have highlighted the code in <span style="background-color: cyan;">blue</span> so you can easily understand where I have pasted it.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmKl6ya8vU9uIBJKSLsyKjv8RT9KhjKYc_Y85p7PE9ZFFF2bfeeNukuxF5qgh04IHDixzZu9MK4G4uMYU7YSPHUXSOkDlp_MV8R5UBjhbdnb-7zVjrP0guqrjONbc6bZsa_X2qeqHvNLFd/s1600/Pinteret+Pin+It+Button+for+Images+on+Blogger+html+code.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/AVvXsEgmKl6ya8vU9uIBJKSLsyKjv8RT9KhjKYc_Y85p7PE9ZFFF2bfeeNukuxF5qgh04IHDixzZu9MK4G4uMYU7YSPHUXSOkDlp_MV8R5UBjhbdnb-7zVjrP0guqrjONbc6bZsa_X2qeqHvNLFd/s1600/Pinteret+Pin+It+Button+for+Images+on+Blogger+html+code.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
The code you will need to copy is below:</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><script></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">//<![CDATA[</span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">var bs_pinButtonURL = "<span style="color: blue;">DIRECT URL OF IMAGE</span>";</span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">var bs_pinButtonPos = "<span style="color: red;">POSITION OF BUTTON</span>";</span></center>
<center style="text-align: left;">
<span style="color: magenta; font-family: Courier New, Courier, monospace;">var bs_pinPrefix = "";</span></center>
<center style="text-align: left;">
<span style="color: magenta; font-family: Courier New, Courier, monospace;">var bs_pinSuffix = "";</span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">//]]></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"></script></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">// This Pinterest Hover Button is brought to you by bloggersentral.com.</span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.</span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">// Feel free to use and share, but please keep this notice intact.</span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"></script></span></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="color: blue;">DIRECT URL OF IMAGE</span> When you uploaded your <span style="color: #d15086;"><b>Pin It</b></span> button image to Photobucket click on the individual icon and you will be taken to a page that looks like this. Where it says <u>Direct</u> - click on that code and paste it where I have written <span style="color: blue;">DIRECT URL OF IMAGE</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH39JzYy4F1HxVvXdDXCiPiHWR7LbK5vQOVwyejzv8jCGw9rh9kBu20q8UeoSw54VEEE0S5NhjNoVDtEfX6wIt9nynvWKA3NyLhcXBdO1p59qmY-AtgNtYfNfU3cMYcgZ1tjZeGP3Mfhc5/s1600/Pinteret+Pin+It+Button+for+Images+on+Blogger+html+code.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/AVvXsEgH39JzYy4F1HxVvXdDXCiPiHWR7LbK5vQOVwyejzv8jCGw9rh9kBu20q8UeoSw54VEEE0S5NhjNoVDtEfX6wIt9nynvWKA3NyLhcXBdO1p59qmY-AtgNtYfNfU3cMYcgZ1tjZeGP3Mfhc5/s1600/Pinteret+Pin+It+Button+for+Images+on+Blogger+html+code.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="color: red;">POSITION OF BUTTON</span> This is where you want the <span style="color: #d15086;"><b>Pin It</b></span> button to appear when your image is hovered over. There are five positions, so choose one of the following and paste it where I have written <span style="color: red;">POSITION OF BUTTON</span>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">center</span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">topleft</span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">topright</span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">bottomleft</span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">bottomright</span></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
The text in pink - <span style="color: magenta;">var bs_pinPrefix = ""; var bs_pinSuffix = "";</span> allows you to add a prefix/suffix to the pin description by adding your desired text inside the <span style="color: magenta;">""</span> marks. For example, I may write: <span style="color: magenta;">var bs_pinPrefix = "Allure by Maddison";</span>. This however is optional and I personally have not included to add this to my html code.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
When you have completed the code you can click <span style="color: #d15086;"><b>Preview template</b></span> to see your <span style="color: #d15086;"><b>Pin It</b></span> button in action. Once you're happy click <b style="color: #d15086;">Save template</b>. You will have now a Pinterest Pin It button for your images on your blog!</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
All the tricky html coding is over and now is just an <i><u>extra bit of information</u></i>. You can block the <span style="color: #d15086;"><b>Pin It</b></span> button from appearing on certain images if you wish. For example if you created a signature for your blog posts I presume you don't want your button appearing if the reader hovers over your signature. Thus, this is what you have to do.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
When you create a new post on Blogger you will be taken to your usual Post page. Click on the <b style="color: #d15086;">HTML </b>button in the top left.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA9x_4G8YFu9QjoszS3TiX98TAdZktI8SUqH3E-F0AwQSB2KNawE1h3Ci2tNfwYUk6eoOOU00AldoSa2HDXsp5h_UbRql-yrtaP6e0XoV06lLeoJ3tesMKOFkl9xpK5PHB6Qf6EHTHxhN9/s1600/Pinteret+Pin+It+Button.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/AVvXsEhA9x_4G8YFu9QjoszS3TiX98TAdZktI8SUqH3E-F0AwQSB2KNawE1h3Ci2tNfwYUk6eoOOU00AldoSa2HDXsp5h_UbRql-yrtaP6e0XoV06lLeoJ3tesMKOFkl9xpK5PHB6Qf6EHTHxhN9/s1600/Pinteret+Pin+It+Button.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="color: magenta;"><br /></span></center>
</center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
You will be taken to the html version of your blog post where you will find the code for images contained in that post. At the beginning of every image code will be <span style="font-family: Courier New, Courier, monospace;"><img</span> as shown below.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguRGxRP7fsBeaiqKz11CnEvsIY1-f8ye1VNj8gKHOfQDZExGErUm3rfXz6YnZm852OmJVtK7E_KptySsNtTYMOww59ugaId5Q9r_AQPLGGcLE2HroyJGMbucC6F9KRy0qoq7fOvsvuYM8c/s1600/Html+code+for+images.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/AVvXsEguRGxRP7fsBeaiqKz11CnEvsIY1-f8ye1VNj8gKHOfQDZExGErUm3rfXz6YnZm852OmJVtK7E_KptySsNtTYMOww59ugaId5Q9r_AQPLGGcLE2HroyJGMbucC6F9KRy0qoq7fOvsvuYM8c/s1600/Html+code+for+images.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
After <span style="font-family: Courier New, Courier, monospace;"><img</span> you will add <span style="font-family: Courier New, Courier, monospace;">class="nopin"</span> to any image you want to block the <span style="color: #d15086;"><b>Pin It</b></span> button on, like shown below.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXq4sS1IqqBcC_q0ElbEIQRSSUahpUEHndRoPRh0Unsn6ooT0rEdu6i5SRp1H5aTvtoIcKGTNAKreexIbNIaRGRbHsLIpWupF6eioexEe434sqj-E_OlSGGepyRQgvPf8PjKHVyswiZpg-/s1600/Html+code+for+images.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/AVvXsEhXq4sS1IqqBcC_q0ElbEIQRSSUahpUEHndRoPRh0Unsn6ooT0rEdu6i5SRp1H5aTvtoIcKGTNAKreexIbNIaRGRbHsLIpWupF6eioexEe434sqj-E_OlSGGepyRQgvPf8PjKHVyswiZpg-/s1600/Html+code+for+images.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
</div>
<center style="text-align: left;">
I hope you have found this tutorial easy to understand, if you have any questions just pop them below.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-45677437332172854562013-09-06T11:24:00.000+10:002013-09-06T11:24:36.297+10:00How To - Make a Post Divider<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGNHJGZ-RdIWGKa7TJdu0YPUTbnkXMspzTB2ejqQR4CevuASLoOWOXLsoqo-EDHYkcWWSFgmqWpXWhdPNHfegVq9QNEufOxHx-8syiyIpO-HXvCOPopO1MpxiUksHrueGkewmVRHU20FpS/s1600/How+To+-+Make+a+Post+Divider.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/AVvXsEiGNHJGZ-RdIWGKa7TJdu0YPUTbnkXMspzTB2ejqQR4CevuASLoOWOXLsoqo-EDHYkcWWSFgmqWpXWhdPNHfegVq9QNEufOxHx-8syiyIpO-HXvCOPopO1MpxiUksHrueGkewmVRHU20FpS/s1600/How+To+-+Make+a+Post+Divider.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
Depending on how you customise your blog homepage it can be to your advantage to create a divider to place between your posts. This will make it easier on the reader's eye to distinguish between posts and can add to the overall design of your blog.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
So let's get started.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
A post divider is generally a thin, horizontal graphic/image that is used to separate the end of one post and the beginning of another. Firstly you will need an image to use as your post divider or create one yourself. If you're choosing to use a pre-made image you can search <u><b>Google/Google Images</b></u> for <i><span style="color: #d15086;">'post dividers'</span></i>, <i><span style="color: #d15086;">'post divider for blog'</span></i> or something similar. If you decide to make one yourself you can do so on any photo-editing program or website such as; Picmonkey, Gimp, Photoshop, etc. However whichever you opt for there is something to keep in mind:</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<ul>
<li>The pixel (<i>px</i>) width of your post section. For example, the pixel width of my post section on <a href="http://allurebymaddison.blogspot.com.au/" target="_blank">Allure by Maddison</a> is 730px. Therefore I wouldn't use/make a post divider wider than 730px, however I could still use one smaller as the divider is centered.</li>
</ul>
<ul>
<li>If you are unsure of the <i>px</i> width of your post section you can find out by doing the following: <i>(If you know the px width skip this section.)</i></li>
</ul>
<div>
<i><br /></i></div>
<div>
<b style="color: #d15086;">1.</b> Go to your blog and click <span style="color: #d15086;"><b>Template</b> </span>on the left side and click the <b style="color: #d15086;">Edit HTML </b>button. Don't worry we're not adding any codes just looking for the post section <i>px</i> width. </div>
<div>
<br /></div>
<div>
<b style="color: #d15086;">2. </b>Hold the <b style="color: #d15086;">Ctrl </b>and <b style="color: #d15086;">F </b>buttons simultaneously to open the <b style="color: #d15086;">Search </b>box. In the <b style="color: #d15086;">Search </b>box type <span style="font-family: Courier New, Courier, monospace;">main-wrapper</span> and press Enter. This will locate the <span style="font-family: Courier New, Courier, monospace;">main-wrapper</span> text found in your html code and highlight it as shown below.</div>
<div>
<br /></div>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvquPNTy9_Qt_3N2knVArhu_-2ZAynOwucjCFiSU_FvvAvYJoNc9xxGldO92Hi5UC4oef1MNry-Cyg0aH3iSdkphpj8fX203pjyZZaJyr9HKJ9iVu7sD8Cd_1pJZ9xkFQjAkxv1177HWx/s1600/Adding+a+Post+Divider+to+your+Blog.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/AVvXsEgYvquPNTy9_Qt_3N2knVArhu_-2ZAynOwucjCFiSU_FvvAvYJoNc9xxGldO92Hi5UC4oef1MNry-Cyg0aH3iSdkphpj8fX203pjyZZaJyr9HKJ9iVu7sD8Cd_1pJZ9xkFQjAkxv1177HWx/s1600/Adding+a+Post+Divider+to+your+Blog.png" /></a></div>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
<b style="color: #d15086;">3. </b>If you look at the picture above and scroll your eyes to line <b style="color: #d15086;">404 </b>and <b style="color: #d15086;">405 </b>you will notice the text <span style="font-family: Courier New, Courier, monospace;">#main {width:750px; margin: 10px 0px;</span> which describes the <i>px</i> width. All I have to do is subtract the margins from the width, thus: 750 - 10 - 10 = 730. I take 10 away twice as there is a margin on each side. </center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
If you have any trouble finding the <i>px</i> width of your blog I'm more than happy to help.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Okay, now we're up to speed and I gather we have all found/made an image to use as our post dividers. You will now need to upload the image to a photo-sharing website - for this tutorial I have gone with <a href="http://s1303.photobucket.com/" target="_blank">Photobucket</a> <i>(simple and free)</i>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Now go to your blog and click <span style="color: #d15086;"><b>Layout</b> </span>on the left side of your screen. Now click the <span style="color: #d15086;"><b>Add a Gadget</b> </span>module and choose the <b style="color: #d15086;">HTML/Javascript </b>option. This will open a <b style="color: #d15086;">Configure HTML/Javascript </b>window. The <b style="color: #d15086;">'</b><b style="color: #d15086;">Content' </b>section is where you will be pasting your code.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKB0scXuDqrnbWamvP1EQ_Fr2hZ1mC6-9-A9pJRNeOzLIm3jTWCSgv-tE8TO88QQip91jrKHkFi2Kpk8ay7pBmX0k0igVo_Xf79-gdZrMDNL_MCfBcOrjWwrfhv_KDI7e1JDCBEyjCSja1/s1600/Adding+a+Post+Divider+for+Blogger.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/AVvXsEgKB0scXuDqrnbWamvP1EQ_Fr2hZ1mC6-9-A9pJRNeOzLIm3jTWCSgv-tE8TO88QQip91jrKHkFi2Kpk8ay7pBmX0k0igVo_Xf79-gdZrMDNL_MCfBcOrjWwrfhv_KDI7e1JDCBEyjCSja1/s1600/Adding+a+Post+Divider+for+Blogger.jpg" /></a></div>
<center style="text-align: left;">
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqdbGHuFsVEzP_Jn7CbWIKtD06igw1qSozndTmwe6w0kfCrOr8lAoi_BD-2E2YyuDQcrHvUljsIBWlJhDK1KH9JlnmkL_UqzBfFp-9xHAw3EAjUThQwjn32CD6sq9A5Z6bgBZSnpaRAWmO/s1600/Adding+a+HTML+Gadget+to+Blogger.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/AVvXsEiqdbGHuFsVEzP_Jn7CbWIKtD06igw1qSozndTmwe6w0kfCrOr8lAoi_BD-2E2YyuDQcrHvUljsIBWlJhDK1KH9JlnmkL_UqzBfFp-9xHAw3EAjUThQwjn32CD6sq9A5Z6bgBZSnpaRAWmO/s1600/Adding+a+HTML+Gadget+to+Blogger.jpg" /></a></div>
Now it is time to add your <u>HTML code</u>. There's only one and it is so simple :) Copy the code below and paste it into the <b style="color: #d15086;">'</b><b style="color: #d15086;">Content' </b>section as mentioned before.<br />
<br />
<br />
<span style="font-family: Courier New, Courier, monospace;"><style type="text/css">.post {background: url(<span style="color: blue;">DIRECT URL OF IMAGE</span>) no-repeat; background-position: bottom center; margin:1.5em 0 1.5em; border-bottom: none; padding-bottom: 3.5em;}</style></span><br />
<br />
<br />
<span style="color: blue;">DIRECT URL OF IMAGE</span> When you uploaded your post divider image to Photobucket click on the individual image and you will be taken to a page that looks like this. Where it says <u>Direct</u> - click on that code and paste it where I have written <span style="color: blue;">DIRECT URL OF IMAGE</span>.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimvAG08R_cftto2iBylHcIi9SG6G2UI2hoS2-3YpQhAQfZT6i14O2t-W3EwQHjlYUAApOpljooadRqVaTZmX-XstVDM7aYAH2e9H2OLs_osQbgZL09FeQOcR6J1dOUufiuZ27jHW5t3BrK/s1600/Uploading+Post+Divider+to+Photobucket.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/AVvXsEimvAG08R_cftto2iBylHcIi9SG6G2UI2hoS2-3YpQhAQfZT6i14O2t-W3EwQHjlYUAApOpljooadRqVaTZmX-XstVDM7aYAH2e9H2OLs_osQbgZL09FeQOcR6J1dOUufiuZ27jHW5t3BrK/s1600/Uploading+Post+Divider+to+Photobucket.jpg" /></a></div>
<br />
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
When you are finished click <b style="color: #d15086;">Save</b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
You can now move the HTML/JAVASCRIPT module anywhere in your blog layout as it won't affect its positioning. Click the <b style="color: #d15086;">Preview</b> button to preview your post divider on your blog. </center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
As you can see I made a post divider with a bee and uploaded it to my blog as an example. I created the image quickly on Picmonkey with dimensions of 720px wide by 40px tall. I would suggest keeping the height no more than 40px - 45px, but it really is up to you.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB1BaXvS7OtIehN98vABsTQ2Ny7B0-3toLLQkJUB_M4PbmQU-ueVHRTNH-iideFwBc5MKZBEwXsDnL6UWwQuk9Aim6y0Qqxf6u2sPI3J_m-qG9jgmZatCuoysL2YeGm4BfgpOrCBH97kds/s1600/Post+divider+example.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/AVvXsEjB1BaXvS7OtIehN98vABsTQ2Ny7B0-3toLLQkJUB_M4PbmQU-ueVHRTNH-iideFwBc5MKZBEwXsDnL6UWwQuk9Aim6y0Qqxf6u2sPI3J_m-qG9jgmZatCuoysL2YeGm4BfgpOrCBH97kds/s1600/Post+divider+example.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
If you have any questions please don't hesitate to ask.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center>
<br /></center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-24642282392960360712013-09-04T12:52:00.001+10:002013-09-04T12:52:55.952+10:00How To - Add Google Fonts to Your Blogger Blog Tutorial<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKL2CRkbClqQgTenqq41Lqt-ndQNmeF0f_IhTZAEYiJozxs_7huZ3wST9lXZdKkK5jR4QbzKoqiVDk8jUVGU5UmWF5t6xwHXqMuWEOgGrROV39U6IdY3GXZ0jwhERqjOazBIcu8ZMy_nbt/s1600/Add+Google+Fonts+to+Blogger.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/AVvXsEjKL2CRkbClqQgTenqq41Lqt-ndQNmeF0f_IhTZAEYiJozxs_7huZ3wST9lXZdKkK5jR4QbzKoqiVDk8jUVGU5UmWF5t6xwHXqMuWEOgGrROV39U6IdY3GXZ0jwhERqjOazBIcu8ZMy_nbt/s1600/Add+Google+Fonts+to+Blogger.jpg" /></a></div>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><br /></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b><a name='more'></a></b></span></center>
<center style="text-align: left;">
<span style="color: #d15086;"><b>Google Fonts</b></span> is a simple, popular and effective method of employing different and decorative fonts for the use on your blog. By using Google Fonts you do not need to stick with the limited font range that Blogger offers nor do you need to find a website to download fonts and furthermore find out how to use them for Blogger.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
So firstly if you haven't before used or looked at Google Fonts click <a href="http://www.google.com/fonts" target="_blank">here</a> and have a look around.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
You will notice you can view the fonts as a word, sentence, paragraph or poster <i>(the name of the font in the font)</i>, change the size, the order of viewing and use the filter to find specific types of font. Additionally you can customise the preview text which I find one of the most valuable tools. The sample preview Google Fonts give you is <i><u>Grumpy wizards make toxic brew for the evil Queen and Jack</u></i> which I assume will never be included on your blog. Thus preview a word/text that is particular to your blog, it helps.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Onto the tutorial...</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
When looking through the fonts when you have found one you like click the <span style="color: #d15086;"><b>Add to Collection</b></span> button for that font. Continue looking until you have added all of the fonts you want to include on your blog. <b><u>Note:</u></b> I suggest only adding the fonts you will use, whether one is for headings, one is for titles or your post text. In other words don't add 15 and only use 3.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDLpzY7doMiYNGtn22G_oCUKaz1i0kFcY06HhFXq5UZO18ZgFS3ZXoEYvMaH3aCu3y9nPFSuJmI8l8z5tjO5w7jngeQAH6zqR2toOpV9FxTaEFpDhojxBeJd1XA-IswgOo3Z6RG2o8LvjK/s1600/Adding+Google+Fonts+to+Blogger.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/AVvXsEgDLpzY7doMiYNGtn22G_oCUKaz1i0kFcY06HhFXq5UZO18ZgFS3ZXoEYvMaH3aCu3y9nPFSuJmI8l8z5tjO5w7jngeQAH6zqR2toOpV9FxTaEFpDhojxBeJd1XA-IswgOo3Z6RG2o8LvjK/s1600/Adding+Google+Fonts+to+Blogger.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
The fonts will be added to your <span style="color: #d15086;"><b>Collection</b></span> panel. As you can see as an example I have added <b style="color: #d15086;">Kavoon </b>and <b style="color: #d15086;">Flavors</b>. Once you have collected all the fonts you wish to use click the <b style="color: #d15086;">Use </b>button.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtTj3gGSynr48zrS-zzP9802wtbpL732Ii3tW7CvGe4PAAipeyFLf-vOj2KAdkHM4QeohgyqNTwMh4YaXxuerr_rklJwGiKFbJpMIHC32oGPcX4GrOpUq-4qOotkKqJrR56Fka0ZWxp5C2/s1600/Adding+Google+Fonts+to+Blogger+Collection.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/AVvXsEjtTj3gGSynr48zrS-zzP9802wtbpL732Ii3tW7CvGe4PAAipeyFLf-vOj2KAdkHM4QeohgyqNTwMh4YaXxuerr_rklJwGiKFbJpMIHC32oGPcX4GrOpUq-4qOotkKqJrR56Fka0ZWxp5C2/s1600/Adding+Google+Fonts+to+Blogger+Collection.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
</center>
<center>
</center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<b><br /></b></center>
<center style="text-align: left;">
<b>This will take to you a screen that looks like this.</b> By scrolling down you will see more of the details and steps you need to take, but don't worry I'll talk you through it. <b>See</b> the <b style="color: #d15086;">Page Load</b> symbol - the more fonts you have collected to use the higher the page load time will be.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRA5RKLc-Tr2QJZaqAqeMVV30w-9E39A5S2Z_mpotAfU6xUHjwKsAsAtpF4EZy5Q6rL2fEA0LNVsZWe8DxTAhYr8nbbxnKaxlmdemuUfzS0WRY7GLpwEOvew3_oZ8ait29zHuQMGz4kUu/s1600/Adding+Google+Fonts+to+Blogger+Collection.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/AVvXsEjjRA5RKLc-Tr2QJZaqAqeMVV30w-9E39A5S2Z_mpotAfU6xUHjwKsAsAtpF4EZy5Q6rL2fEA0LNVsZWe8DxTAhYr8nbbxnKaxlmdemuUfzS0WRY7GLpwEOvew3_oZ8ait29zHuQMGz4kUu/s1600/Adding+Google+Fonts+to+Blogger+Collection.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
Once you have chosen the styles you want in <i>Step 1</i> scroll down to <i>Step 3</i>. Now in another tab open and log into <b style="color: #d15086;">Blogger</b>. Click <b style="color: #d15086;">Template </b>on the left side and click the <b style="color: #d15086;">Edit HTML </b>button. Don't be frightened it is easy.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvuIZqWqEasYuGgJ4za8MKSLKREBrWSbqZ_h4W1J4VGTX9nnRX9wmBQEMC5W-IaXX9ORpcQAH0F2nQ5uFj8t7vs99BL3amXRmvQBbVVvYfi5IulkbYBdmjrxI_im1WJAMYALTMLbUAzUtt/s1600/Edit+HTML+Google+Fonts+Blogger.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/AVvXsEgvuIZqWqEasYuGgJ4za8MKSLKREBrWSbqZ_h4W1J4VGTX9nnRX9wmBQEMC5W-IaXX9ORpcQAH0F2nQ5uFj8t7vs99BL3amXRmvQBbVVvYfi5IulkbYBdmjrxI_im1WJAMYALTMLbUAzUtt/s1600/Edit+HTML+Google+Fonts+Blogger.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
Hold the <b style="color: #d15086;">Ctrl </b>and <b style="color: #d15086;">F </b>buttons simultaneously to open the <b style="color: #d15086;">Search </b>box. In the <b style="color: #d15086;">Search </b>box type <span style="font-family: Courier New, Courier, monospace;"><head></span> and press Enter. This will locate the first <span style="font-family: Courier New, Courier, monospace;"><head></span> text found in your html code and highlight it as shown below.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVQtFo1ELloKauQIbYUJEvRJFKhWV6JLcXB_YwrNSH4m3Wwqr0dLOfHo-KdiYPTSc9NUR85S52WiT6T4ZGvJwra1299C4mZnI8dUkg5Kb5EFs6X2dxKjEI4UoCgkP5iT3UB6SumGUGEFFf/s1600/Edit+HTML+Google+Fonts+Blogger.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/AVvXsEjVQtFo1ELloKauQIbYUJEvRJFKhWV6JLcXB_YwrNSH4m3Wwqr0dLOfHo-KdiYPTSc9NUR85S52WiT6T4ZGvJwra1299C4mZnI8dUkg5Kb5EFs6X2dxKjEI4UoCgkP5iT3UB6SumGUGEFFf/s1600/Edit+HTML+Google+Fonts+Blogger.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
Now switch to the Google Fonts tab and copy the code given to you in <i>Step 3</i>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOCOt-E0_eXiahq8vJfK645A0_Pp1VGmHOWGTAVTtdX0041M9G4ccdCSkgF7eY_DgA_Bdpa3unD-A2bYBtQ7OpLyPZyJVCHviTiAVZ-nxRB4L6MkP4hx37ffnUxwbKj2v8znmFkeAw14QS/s1600/Edit+HTML+Google+Fonts+Blogger.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/AVvXsEgOCOt-E0_eXiahq8vJfK645A0_Pp1VGmHOWGTAVTtdX0041M9G4ccdCSkgF7eY_DgA_Bdpa3unD-A2bYBtQ7OpLyPZyJVCHviTiAVZ-nxRB4L6MkP4hx37ffnUxwbKj2v8znmFkeAw14QS/s1600/Edit+HTML+Google+Fonts+Blogger.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
Switch back to your Blogger tab. You will add the code you just copied directly under the highlighted <span style="font-family: Courier New, Courier, monospace;"><head></span> text. See below. I have highlighted the copied and pasted code in pink for you to see.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY6H3YU0lCkJRhTL0mzKLsw6bkH-tiPnhT9mKPRNY9HgmvvRNHZfqlkX38G6r9JzivDSIAs5y4w9EWu-CmS4gJkUN1_DVA7qYkfXlfEJx3V1cK8XejmdivPhfLTgT6bN89P6FUsGeZDcx7/s1600/Edit+HTML+Google+Fonts+Blogger.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/AVvXsEgY6H3YU0lCkJRhTL0mzKLsw6bkH-tiPnhT9mKPRNY9HgmvvRNHZfqlkX38G6r9JzivDSIAs5y4w9EWu-CmS4gJkUN1_DVA7qYkfXlfEJx3V1cK8XejmdivPhfLTgT6bN89P6FUsGeZDcx7/s1600/Edit+HTML+Google+Fonts+Blogger.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
<b>There's just one more step to go.</b> The fonts are now embedded into your blog code, you just need to specify what parts of your blog will be what font.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
In the <b style="color: #d15086;">Search </b>box type <span style="font-family: Courier New, Courier, monospace;"><b:skin></span> and press Enter. This will locate the first <span style="font-family: 'Courier New', Courier, monospace;"><b:skin></span> text found in your html code and highlight it as shown below. Click the little black arrow to expand.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9-rdRq_EAHCu30lRtCw0qx4slngB06QKHuEeabKMGewqX84rJvKv0v4FWeO8k4-o8yqlBVgs2p3tdfLnA1UTAyCj6nxQSjF4oiLnWz0S1xioLI8kX68ZvKpc3F-MXk9SNZ24C9r_sXIDz/s1600/Edit+HTML+Google+Fonts+Blogger.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/AVvXsEg9-rdRq_EAHCu30lRtCw0qx4slngB06QKHuEeabKMGewqX84rJvKv0v4FWeO8k4-o8yqlBVgs2p3tdfLnA1UTAyCj6nxQSjF4oiLnWz0S1xioLI8kX68ZvKpc3F-MXk9SNZ24C9r_sXIDz/s1600/Edit+HTML+Google+Fonts+Blogger.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
Expanding the <span style="font-family: Courier New, Courier, monospace;"><b:skin></span> section of your html code will open the code that dictates most of your blog design. Now it's time to add the code/s in <i>Step 4 </i>of the Google Fonts tab where you want them.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
For example, if I wanted to use the <b style="color: #d15086;">Kavoon </b>font for my sidebar headers I would find the code that dictates my sidebar headers. These names will vary from blog code to blog code so unfortunately there's no translation table. Below however is my example;</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
I have scrolled down to find the text translating to my sidebar headers <span style="background-color: yellow;">highlighted in yellow</span> and the text dictating what font my sidebar headers are <span style="background-color: cyan;">highlighted in blue</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieNImht-X5qBbjZJmRAKRfxOhOMemdXpAvy-YvpGWIjVtepiAWUT_BCfkWq3jI8W7Vg7BGgQAaJdpmav0RajxqAh_Z_TTbA6aJ5CWBopdSPr-tlrlof19sKJs6rPWbDR-fMyXHUKOrW39g/s1600/Edit+HTML+Google+Fonts+Blogger.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/AVvXsEieNImht-X5qBbjZJmRAKRfxOhOMemdXpAvy-YvpGWIjVtepiAWUT_BCfkWq3jI8W7Vg7BGgQAaJdpmav0RajxqAh_Z_TTbA6aJ5CWBopdSPr-tlrlof19sKJs6rPWbDR-fMyXHUKOrW39g/s1600/Edit+HTML+Google+Fonts+Blogger.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
Then switching to the Google Fonts tab I will copy the code in <i>Step 4 </i>for the <b style="color: #d15086;">Kavoon </b>font.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM8yTU3_vG8g5tFTJ6NmnmOAbocMExggSKZ1V0kmgBhbnZFZydGxugNdwq5llz7b_wUD7jrRZvEzu3PT1Kt3ImUQSeWtD8tciiU89kcl3U4zb19xhzsbsocZ2f7J-J07xsbRi20KeMcZwG/s1600/Edit+HTML+Google+Fonts+Blogger.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/AVvXsEiM8yTU3_vG8g5tFTJ6NmnmOAbocMExggSKZ1V0kmgBhbnZFZydGxugNdwq5llz7b_wUD7jrRZvEzu3PT1Kt3ImUQSeWtD8tciiU89kcl3U4zb19xhzsbsocZ2f7J-J07xsbRi20KeMcZwG/s1600/Edit+HTML+Google+Fonts+Blogger.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
Switching back to my Blogger tab I would paste the code I just copied over the text <span style="background-color: cyan;">highlighted in blue</span> in the picture before.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
My code would now look like this;</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtpuktpZ8Ln4h0R6lJhwNqf3iPuC2ct0I0qfJfFZ7xqWVTZSlWG4R34eCWx4AwWFY2dD9ixIS3qQxKt77yWdq7WAp35eF5Mn4i72YViTUR5hIoRMFgpxP4_sauKYanh-UDLURS5mjUniyr/s1600/Edit+HTML+Google+Fonts+Blogger.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/AVvXsEjtpuktpZ8Ln4h0R6lJhwNqf3iPuC2ct0I0qfJfFZ7xqWVTZSlWG4R34eCWx4AwWFY2dD9ixIS3qQxKt77yWdq7WAp35eF5Mn4i72YViTUR5hIoRMFgpxP4_sauKYanh-UDLURS5mjUniyr/s1600/Edit+HTML+Google+Fonts+Blogger.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
As you can see I've changed the type of font to the Google font of my choosing. Before pressing <b style="color: #d15086;">Save template </b>I suggest you click <b style="color: #d15086;">Preview template </b>to see if the font you changed actually represents the part of your blog you wanted to change. If it is than you are finished and can click <b style="color: #d15086;">Save template</b>. If it wasn't just undo <i>(Hold the <b style="color: #d15086;">Ctrl </b>and <b style="color: #d15086;">Z </b>buttons)</i> until you erase the mistake.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
I hope I have detailed the steps for your understanding as I know html can be overwhelming and/or tricky. If you have any questions or need help please don't hesitate to ask. You can leave a comment or email me privately - the choice is yours.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-17912614883453141492013-09-04T10:21:00.000+10:002013-09-04T10:21:07.854+10:00Welcome Image and Text<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHqGmkvCzOxmPS7_HJzfzf1982VsNCmkKbnqw1yrCQ7_5-4ZJlNfQAj1fhKKDJxn03Ek1zE8xnocszJ5uVko-NfEturz-sGtl6wNjjktvClFyU7WxtruJnqDySKLYaNBx3w3e5hjR_uZXT/s1600/Create+a+Welcome+Image+and+Text+for+Blogger.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/AVvXsEjHqGmkvCzOxmPS7_HJzfzf1982VsNCmkKbnqw1yrCQ7_5-4ZJlNfQAj1fhKKDJxn03Ek1zE8xnocszJ5uVko-NfEturz-sGtl6wNjjktvClFyU7WxtruJnqDySKLYaNBx3w3e5hjR_uZXT/s1600/Create+a+Welcome+Image+and+Text+for+Blogger.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
In this post I thought we'd discuss the option to feature a <span style="color: #d15086;"><b>'welcome'</b></span> image and text on our blogs. I'm talking about the most often than not <b style="color: #d15086;">selfie </b>photo and short excerpt found at the top of a blogger's sidebar. I myself have not featured one on neither of my blogs but I plan to get around to it. <i>(It will probably be one of those projects that never get done.)</i></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Nonetheless, back on track. If you don't yet have one I recommend you get one, <b>asap</b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
This <span style="color: #d15086;"><b>'welcome'</b></span> image and text for optimal results would be placed at the top of your sidebar <i>(assuming you have a sidebar)</i>. Despite most bloggers having an <span style="color: #d15086;"><b>'about/about me'</b></span> page, having a photograph and a short sentence or two on the homepage can make the reader feel more connected with you before they even begin to navigate your blog. Connection often leads to more time spent on the blog, and to be honest if the blog I'm reading does not have one the first thing I do is look for their <span style="color: #d15086;"><b>'about/about me'</b></span> page because I like to know who's behind the content I'm reading.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
There are a few ways you can go about this...</center>
<center style="text-align: left;">
Firstly under <span style="color: #d15086;"><b>Layout </b></span>you would click <b style="color: #d15086;">'Add a Gadget' </b>and then...</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<ol>
<li>Upload the photo as an <b style="color: #d15086;">Image </b>and the sentence or two about you as <span style="color: #d15086;"><b>Text </b></span>and place them one after the other on your sidebar.</li>
<li><i>Once you have the image and text place them together as one whole image. For example, you could make this on Picmonkey, Gimp, Photoshop, etc.</i> Then upload the image as an <b style="color: #d15086;">Image</b>. This option allows you to get creative.</li>
<li><i>Once you have the image and text place them together as one whole image. For example, you could make this on Picmonkey, Gimp, Photoshop, etc and <b>then</b> upload to a photo-sharing website such as Photobucket.</i> You could then upload the image as <b style="color: #d15086;">HTML/Javascript</b>. By doing this you could add a link and/or a rollover effect to the welcome image and text. For example, when readers click on the image they are taken to your <span style="color: #d15086;"><b>'about/about me'</b></span> page.</li>
</ol>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2l7h5k5iZyZh-s6l5pInCbOqoHyZSU6BuSAslw306GgzP4YIOpElNT4XD9J-0K_om1AslfphLt7CbmIFHFQgUp6zdADe18J7RvyEZ1ERruBFCvxk5TVcGuRb9GCxTT0u1KKlBxhort4v7/s1600/Welcome+Image+and+Text.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2l7h5k5iZyZh-s6l5pInCbOqoHyZSU6BuSAslw306GgzP4YIOpElNT4XD9J-0K_om1AslfphLt7CbmIFHFQgUp6zdADe18J7RvyEZ1ERruBFCvxk5TVcGuRb9GCxTT0u1KKlBxhort4v7/s1600/Welcome+Image+and+Text.jpg" /></a></div>
<div>
<br /></div>
<div>
Alternatively you may just want an image without text or text without an image it's up to you. Whatever option you choose it will enhance your blog for your reader I can guarantee you.</div>
<div>
<br /></div>
<div>
Do keep in mind however:</div>
<div>
<br /></div>
<div>
<ul>
<li>Be aware of the <i>px</i> width of your sidebar and make your image fit accordingly. For example if your sidebar is 300px for best results don't upload an image wider than 300px. You also don't need the image to be that large, you could make it 200px and center the image <i>(to be honest that would probably look better)</i>.</li>
</ul>
<div>
<br /></div>
<div>
If you have any opinions or questions regarding the use of a <span style="color: #d15086;"><b>'welcome'</b></span> image and text feel free to let me know.</div>
</div>
<div>
<br /></div>
<div>
Happy blogging!</div>
<div>
xox</div>
</center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-46299232929513618722013-09-02T17:36:00.002+10:002013-09-03T11:52:39.657+10:00How To - Add Related Posts on Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgf6RpozU8o64ylerys82AcosgY7EU-EgkCdXVy1MDwS8VT43tqs-VYU9XT_x8ZZlX5szDgUG9yTZfXulReDhlcEw8ZPPs5f6RwXFSs0XKekvXVsTU1OW_p5n5entZiUgDopvjUwTtfCOq/s1600/How+To+Add+Related+Posts+on+Blogger.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/AVvXsEhgf6RpozU8o64ylerys82AcosgY7EU-EgkCdXVy1MDwS8VT43tqs-VYU9XT_x8ZZlX5szDgUG9yTZfXulReDhlcEw8ZPPs5f6RwXFSs0XKekvXVsTU1OW_p5n5entZiUgDopvjUwTtfCOq/s1600/How+To+Add+Related+Posts+on+Blogger.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
You may have noticed a number of blogs have a row of post thumbnails or list of text which are related to the post you are reading. These related posts are a huge mechanism in keeping the reader on your blog. Personally, it is the chief way a blog keeps me interested, as I finish reading a post and without having to search or look about a number of similar posts are placed right before my eyes.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
So let's get started. </center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
The three main platforms for related posts are <span style="color: #d15086;"><b>Linkwithin</b></span>, <span style="color: #d15086;"><b>nRelate</b></span> and <span style="color: #d15086;"><b>Outbrain</b></span>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
I'll discuss each platform <i>(I personally prefer nRelate)</i>. I won't be working through a step by step tutorial for these widgets as it is pretty self-explanatory and as I already have related posts on both of my blogs I don't want to interrupt this.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<b style="color: #d15086;"><u>Linkwithin</u></b></center>
<center style="text-align: left;">
To get the Linkwithin related posts widget on your Blogger blog click <a href="http://www.linkwithin.com/learn" target="_blank">here</a> to be directed to the Linkwithin website.</center>
<center style="text-align: left;">
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1lURV8psGFsuD_cO4q8Z6Xztf39hfryJ8Av30PcF8wHHqp_JwIccXl8nlnUdf6uDC_akGbHePZp26noMO_CdIG1_UJa4Bno2I09tjGgJM-fYnvyCA2O6xOQdbtk7ji9sFiIJULGYUKbmO/s1600/Add+LinkWithin+Widget+to+Blogger.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/AVvXsEj1lURV8psGFsuD_cO4q8Z6Xztf39hfryJ8Av30PcF8wHHqp_JwIccXl8nlnUdf6uDC_akGbHePZp26noMO_CdIG1_UJa4Bno2I09tjGgJM-fYnvyCA2O6xOQdbtk7ji9sFiIJULGYUKbmO/s1600/Add+LinkWithin+Widget+to+Blogger.png" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
As you can see by filling in the blanks you will have a related posts Linkwithin widget for your blog. Once you've filled out the blanks click the <span style="color: #d15086;"><b>Get Widget!</b></span> button.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<center style="text-align: left;">
<b style="color: #d15086;"><u>Pros of Linkwithin</u></b></center>
<center style="text-align: left;">
<ul>
<li>Free</li>
<li>No sign-up required</li>
<li>Simple and fast</li>
</ul>
<div>
<br /></div>
<div>
<center style="text-align: left;">
<b style="color: #d15086;"><u>Cons of Linkwithin</u></b></center>
<center style="text-align: left;">
<ul>
<li>Displays the <i>Linkwithin</i> logo</li>
<li>Customisation is limited</li>
</ul>
<div>
<br /></div>
<div>
If you need further help with installing this widget click <a href="http://www.linkwithin.com/install?platform=blogger&site_id=195326&url=http:/pwetbuk.blogspot.com/&email=edisonframilla@ymail.com" target="_blank">here</a> for the official Linkwithin <i>help</i> <b style="color: #d15086;">Install Widget for Blogger </b>page.<br />
<br /></div>
<div>
<center style="text-align: left;">
<b style="color: #d15086;"><u>nRelate</u></b></center>
<center style="text-align: left;">
To get the nRelate related posts widget on your Blogger blog click <a href="http://nrelate.com/" target="_blank">here</a> to be directed to the nRelate website. Or click <a href="https://partners.nrelate.com/registration/" target="_blank">here</a> to sign up to nRelate <i>(Sign up is free)</i>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
You will need to create an account (which is free) and then log into nRelate.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2fsnUIiox5O46DxwDXIb3Celgbz6Xn4gIsW5yTY1dl3NPOQsW7WFrGUSTVI2OMDZYXe4FP4zFqbSozuL2o8oMN12fSoN9hXGmhXW96cGNn2Wea2rFC62Nu8Y_YJzwbVJryqZ65H1QdjTg/s1600/Add+nRelate+Widget+to+Blogger.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/AVvXsEi2fsnUIiox5O46DxwDXIb3Celgbz6Xn4gIsW5yTY1dl3NPOQsW7WFrGUSTVI2OMDZYXe4FP4zFqbSozuL2o8oMN12fSoN9hXGmhXW96cGNn2Wea2rFC62Nu8Y_YJzwbVJryqZ65H1QdjTg/s1600/Add+nRelate+Widget+to+Blogger.png" /></a></div>
<center style="text-align: left;">
</center>
<div class="separator" style="clear: both; text-align: center;">
</div>
<center style="text-align: left;">
Once logged in you will click on the <b style="color: #d15086;">Install </b>button on the top menu and proceed to follow the prompts. Once installed you will have the option to customise your nRelate widget. What I love about nRelate is the customising options. There are so many!</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<center style="text-align: left;">
<b style="color: #d15086;"><u>Pros of nRelate</u></b></center>
<center style="text-align: left;">
<ul>
<li>Free</li>
<li>Wide range of cutomisation options <i>(too many to name)</i></li>
<li>You can display paid ads for income</li>
<li>You can choose whether or not to show the <i>nRelate</i> logo</li>
</ul>
<div>
<br /></div>
<div>
<center style="text-align: left;">
<b style="color: #d15086;"><u>Cons of nRelate</u></b></center>
<center style="text-align: left;">
<ul>
<li>Sign-up is required <i>(although this is barely a con)</i></li>
</ul>
<div>
<i><br /></i></div>
<div>
If you need further help with installing this widget please leave a comment below, <a href="mailto:mskotinis1995@gmail.com" target="_blank">email</a> me or <a href="http://twitter.com/MaddiSkotinis" target="_blank">tweet</a> me as I'm more than happy to lend a hand.<br />
<br /></div>
<div>
<center style="text-align: left;">
<center style="text-align: left;">
<b style="color: #d15086;"><u>Outbrain</u></b></center>
<center style="text-align: left;">
To get the Outbrain related posts widget on your Blogger blog click <a href="http://www.outbrain.com/" target="_blank">here</a> to be directed to the Outbrain website. Or click <a href="https://my.outbrain.com/register" target="_blank">here</a> to register <i>(registration is free)</i>.</center>
<center style="text-align: left;">
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXX3ObB-x1fXReBRute85LNkHyIV070fsM9bxJDH9kiEuBTkpQzGnPeMnLsqcA7Mps6IONzDCYota41pL235QzdksHh8iHJn39jUdNmPu4lMmCEOX2olAkdxIu2nc1ZZMXpCDAVn6dsZVV/s1600/Add+Outbrain+Widget+to+Blogger.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/AVvXsEjXX3ObB-x1fXReBRute85LNkHyIV070fsM9bxJDH9kiEuBTkpQzGnPeMnLsqcA7Mps6IONzDCYota41pL235QzdksHh8iHJn39jUdNmPu4lMmCEOX2olAkdxIu2nc1ZZMXpCDAVn6dsZVV/s1600/Add+Outbrain+Widget+to+Blogger.png" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Once logged in proceed to follow the prompts to install and customise your Outbrain widget.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<center style="text-align: left;">
<b style="color: #d15086;"><u>Pros of Outbrain</u></b></center>
<center style="text-align: left;">
<ul>
<li>Free</li>
<li>You can display paid related website ads for income</li>
</ul>
<div>
<br /></div>
<div>
<center style="text-align: left;">
<b style="color: #d15086;"><u>Cons of Outbrain</u></b></center>
<center style="text-align: left;">
<ul>
<li>Registration is required <i>(although this is barely a con)</i></li>
<li>Customisation is limited <i>(although still more options than Linkwithin)</i></li>
</ul>
<div>
<i><br /></i></div>
<div>
Again, If you need further help with installing this widget don't hesitate to let me know.<br />
<br /></div>
<div>
I hope you have found this post at least somewhat informative and now you can choose which related post widget you most prefer.<br />
<br /></div>
<div>
Happy blogging!</div>
<div>
xox</div>
</center>
</div>
</center>
</center>
</center>
</div>
</center>
</div>
</center>
</center>
</div>
</center>
</div>
</center>
</center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-52271261597381577152013-09-02T11:58:00.002+10:002013-09-02T11:58:57.586+10:00Print and PDF Buttons for Your Posts<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgenY7FQOxuVXmNiVcNjcT-gCjSSn1fsACGBNWHeAbsuA35Vgsb-KZ6ZDgPBEVy9TjHpNvk_J9QYZszwoildMR67q9bOJRTNn2qQk3G_orQFZ5bNESpdGsBlwQIkFDBKuRytm5ZxhkUtYXL/s1600/Print+and+PDF+Buttons+for+Your+Posts.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/AVvXsEgenY7FQOxuVXmNiVcNjcT-gCjSSn1fsACGBNWHeAbsuA35Vgsb-KZ6ZDgPBEVy9TjHpNvk_J9QYZszwoildMR67q9bOJRTNn2qQk3G_orQFZ5bNESpdGsBlwQIkFDBKuRytm5ZxhkUtYXL/s1600/Print+and+PDF+Buttons+for+Your+Posts.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
I don't know about you but I'm constantly on the look out to add widgets and design elements to my personal blog, spending hours at a time perfecting one minor detail. Okay, I might be obsessed. Nonetheless in this post I'll show you how to add <span style="color: #d15086;"><b>print and pdf buttons</b></span> to your posts.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
This addition allows readers to:</center>
<center style="text-align: left;">
<ul>
<li>Print your post the <b style="color: #d15086;"><i>print-friendly</i></b> way. Thus, your post will open in a separate window and your reader can delete parts she/he does not want to print. <i>For example;</i> if you posted a recipe and the reader wants to print the recipe without using ink for the included photos they can easily delete the photos before printing.</li>
<li>Download your post as a pdf file.</li>
<li>Easily email the page.</li>
</ul>
<div>
<br /></div>
<div>
You may not think this benefits you directly, however the more accessible and interactive your blog is to the reader the higher the chance they will return.</div>
<div>
<br /></div>
<div>
To get the print and pdf buttons on your blog click <a href="http://www.printfriendly.com/" target="_blank">here</a> to be directed to the PrintFriendly website. Additionally, make sure you are logged into Blogger. </div>
<div>
<br /></div>
<div>
Click on the <b style="color: #d15086;">get your button </b>button.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlYuHcfLSG28Gxa2FIyglVfuqhFm-miwKHH56CTqzvFZCUg8tMTcKB5ngKeo_HVKWqHWgCrVYEYxmcuZHzLM8Yqhrt1zlGH3ZQVY8LzsAfX1USIKYrL4xwE9ng9JHgFDE_n45w-9b3i1ku/s1600/PrintFriendly.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/AVvXsEhlYuHcfLSG28Gxa2FIyglVfuqhFm-miwKHH56CTqzvFZCUg8tMTcKB5ngKeo_HVKWqHWgCrVYEYxmcuZHzLM8Yqhrt1zlGH3ZQVY8LzsAfX1USIKYrL4xwE9ng9JHgFDE_n45w-9b3i1ku/s1600/PrintFriendly.jpg" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
You will be taken to a page where by simply clicking the <b style="color: #d15086;">Blogger/blogpost </b>option and filling in the blanks you will have a customised <span style="color: #d15086;"><b>print and pdf button </b></span>for your blog. Once you've filled out the blanks to your liking click the <b style="color: #d15086;">Install Blogger Widget </b>button.</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirxPgUWCJMkP8ZOXvTSFV-7zYg29zuPh0tDNclnHVkMLZcbXJsq1OdCXcVLgr0H-09o27Hui99BsQzBNsbYNQv7mDFE_zdkDm0_6NvLb42u473dZslgxttVIUapsIPeAGCTlIkpke9sh5s/s1600/PrintFriendly.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/AVvXsEirxPgUWCJMkP8ZOXvTSFV-7zYg29zuPh0tDNclnHVkMLZcbXJsq1OdCXcVLgr0H-09o27Hui99BsQzBNsbYNQv7mDFE_zdkDm0_6NvLb42u473dZslgxttVIUapsIPeAGCTlIkpke9sh5s/s1600/PrintFriendly.png" /></a></div>
<div>
<br /></div>
</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center>
</center>
<center>
</center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
By clicking the <b style="color: #d15086;">Install Blogger Widget </b>button you will re-directed to a page by Blogger to <b style="color: #d15086;"><i>Add Page Element</i></b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Select which blog <i>(if you have multiple)</i> you would like to install your <b style="color: #d15086;">print and pdf button </b>onto. Click on the <b style="color: #d15086;">Add Widget </b>button.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZm8oM3Lx6_wCwofJl5V-zVUL_mkRFrHvlA62aIwfDRx7FIwM_SmUsd_4NOP9dunLwrnN4YCYNbDy0VVN_0ycP7qth2k-ftytIKX086q0NkOzzMHgKptBd_BfQ4ijs-Cnm75sNl2nVqHV/s1600/PrintFriendly.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/AVvXsEguZm8oM3Lx6_wCwofJl5V-zVUL_mkRFrHvlA62aIwfDRx7FIwM_SmUsd_4NOP9dunLwrnN4YCYNbDy0VVN_0ycP7qth2k-ftytIKX086q0NkOzzMHgKptBd_BfQ4ijs-Cnm75sNl2nVqHV/s1600/PrintFriendly.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
</div>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
</div>
<center style="text-align: left;">
By clicking the <b style="color: #d15086;">Add Widget </b>button you will re-directed to the <b style="color: #d15086;">Blogger Layout</b> page of your blog. Move the <b style="color: #d15086;">Printfriendly </b>module above the <b style="color: #d15086;">Blog Posts </b>module <i>(like shown)</i>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWffYKIelpLp5ly05r9zQ5U2DzU2KtCbACuCUWElCOmQAgy4a5V9wKNwt1piuxSloYs4Pg2JMvY4GjSB29BDYbDrxzSEczA3kwLUDVAB4TEZadzYuWTb_IAnsdx1a9eTvRNaju4xoPquUB/s1600/PrintFriendly.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/AVvXsEjWffYKIelpLp5ly05r9zQ5U2DzU2KtCbACuCUWElCOmQAgy4a5V9wKNwt1piuxSloYs4Pg2JMvY4GjSB29BDYbDrxzSEczA3kwLUDVAB4TEZadzYuWTb_IAnsdx1a9eTvRNaju4xoPquUB/s1600/PrintFriendly.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
You can preview your blog with your Print and PDF widget and once happy click <b style="color: #d15086;">Save arrangement</b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Now when you click to view one of your posts you will see the customised button. <i>An example is below</i>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7uq_yIsxMdNuX_A6JOQJaAl3eUPW9LhF16K0exhVlrx23ev257fQ6YE0DQlxG61nrEivlWEWfDMPf-xtG5bHcrobR5taEXMhFsQaNsPyTWwAxhmdjJWIM5XMiOYdj3sGVOzB1JGJ40ZCe/s1600/PrintFriendly.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/AVvXsEh7uq_yIsxMdNuX_A6JOQJaAl3eUPW9LhF16K0exhVlrx23ev257fQ6YE0DQlxG61nrEivlWEWfDMPf-xtG5bHcrobR5taEXMhFsQaNsPyTWwAxhmdjJWIM5XMiOYdj3sGVOzB1JGJ40ZCe/s1600/PrintFriendly.png" /></a></div>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
</div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
By clicking on your customised <span style="color: #d15086;"><b>print and pdf button </b></span>you will see the options that are now available to your readers.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
If you have any questions feel free to pop a comment below.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-50225604534849141582013-08-28T12:42:00.002+10:002013-08-28T13:41:33.734+10:00Instagram Widget for Blogger<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNKa-JWoyp5w5pw7pafB1hpp5q2IR1edMz_YP45SmSyzMRvFZs9WzBDJJAQGVRIzeHs1Yqkrns-F2EjiW4Gc_9VeQRBWDXzH_vXigISjrGosWt-oZUBdkrW2HbGek6U7UKU1dD6PdroAwQ/s1600/Instagram+Widget.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/AVvXsEgNKa-JWoyp5w5pw7pafB1hpp5q2IR1edMz_YP45SmSyzMRvFZs9WzBDJJAQGVRIzeHs1Yqkrns-F2EjiW4Gc_9VeQRBWDXzH_vXigISjrGosWt-oZUBdkrW2HbGek6U7UKU1dD6PdroAwQ/s1600/Instagram+Widget.jpg" /></a></div>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
Social media is a strong mode of traffic to your blog and <i>vice versa</i> - your blog is a mode of traffic to your social media accounts. A <i>win-win</i> if you ask me.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Besides having a social media button linking to your Instagram account, an Instagram widget is extremely handy, especially if you're uploading photos rather regularly.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
To get the widget on your Blogger blog click <a href="http://snapwidget.com/" target="_blank">here</a> to be directed to the Snapwidget website.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Click on the <span style="color: #d15086;"><b>Get Your Free Widget</b></span> button.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCubbXydenClGwxRuAigG_H5bYc9WhXmabINqpvETGV53KMmOE48K4SkH9jMgI9QUpXhFt_0QCi67a7RDHnYakoHtBBDj_96YDbYVlhoT12Oj9gP1dcpE_mkx1KAeVYva1v-AKADhosqIY/s1600/Instagram+Widget+for+Blogger.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/AVvXsEgCubbXydenClGwxRuAigG_H5bYc9WhXmabINqpvETGV53KMmOE48K4SkH9jMgI9QUpXhFt_0QCi67a7RDHnYakoHtBBDj_96YDbYVlhoT12Oj9gP1dcpE_mkx1KAeVYva1v-AKADhosqIY/s1600/Instagram+Widget+for+Blogger.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
You will be taken to this page where by simply filling in the blanks you will have a customised Instagram widget for your blog. Once you've filled out the blanks to your liking click the <span style="color: #d15086;"><b>Get Widget</b></span> button.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisUkqEV_uVj7ITckN4WA2oOJeLQNF30o8ajZ07gSFRkMFWm-7-xpnvgTc-VDTktAj5_cGtivzCSKMcSj9BSkoQrdRi5UzQKFIrP_JETZ5YHPYioy5Eh_LJAW99Ye7E055yHEYuwzouKX2K/s1600/Customise+your+Instagram+Widget+for+Blogger.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/AVvXsEisUkqEV_uVj7ITckN4WA2oOJeLQNF30o8ajZ07gSFRkMFWm-7-xpnvgTc-VDTktAj5_cGtivzCSKMcSj9BSkoQrdRi5UzQKFIrP_JETZ5YHPYioy5Eh_LJAW99Ye7E055yHEYuwzouKX2K/s1600/Customise+your+Instagram+Widget+for+Blogger.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
By clicking the <span style="color: #d15086;"><b>Get Widget</b></span> button a window will open that includes your customised code.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMVjdM6HNgSHfrLRPbPBg-md0RLvrJkXkYxC1H5BKLHF2VWWfclPSUHDztHZai-feTGMS_P26tK7N4L8sqmCZ1fF3uQEnhI5tGtjfFcxKOI9RYsggJeDWAFkoaiBURJutS8JZWyRCN4p1_/s1600/Customise+your+Instagram+Widget+for+Blogger.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/AVvXsEgMVjdM6HNgSHfrLRPbPBg-md0RLvrJkXkYxC1H5BKLHF2VWWfclPSUHDztHZai-feTGMS_P26tK7N4L8sqmCZ1fF3uQEnhI5tGtjfFcxKOI9RYsggJeDWAFkoaiBURJutS8JZWyRCN4p1_/s1600/Customise+your+Instagram+Widget+for+Blogger.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Now log onto Blogger and go to your blog and click <span style="color: #d15086;"><b>Layout</b></span> on the left side of your screen. Now click the <span style="color: #d15086;"><b>'Add a Gadget'</b></span> module and choose the <span style="color: #d15086;"><b>'HTML/Javascript'</b></span> option. This will open a <span style="color: #d15086;"><b>'Configure HTML/Javascript'</b></span> window. The <span style="color: #d15086;"><b>'Content'</b></span> section is where you will be pasting your customised code.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFY0lQ-cbclFRrRPNGzjtR_j3_YZ2Hykl3rxpeKrgDUehWT2wpQKKa29yxHyFrNXvYbRdYgBAuaJOrW38iARzYx0RhCy235D9VjAhCPebvUo3KcGo5ElFJvVgr2iC_DYdsa7f2i-IMuzj4/s1600/Add+a+Gadget+Blogger.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/AVvXsEhFY0lQ-cbclFRrRPNGzjtR_j3_YZ2Hykl3rxpeKrgDUehWT2wpQKKa29yxHyFrNXvYbRdYgBAuaJOrW38iARzYx0RhCy235D9VjAhCPebvUo3KcGo5ElFJvVgr2iC_DYdsa7f2i-IMuzj4/s1600/Add+a+Gadget+Blogger.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtW51v8n4gq0DYRzXr_7D8WY3wGTnOSxYRzBhKO91pB2F2Jow7Ulcxbg4X3t0EGyaiaa_9LxVWe49-GrHSkPJTulJq386q1zc7pwu_3BUOGo9P2DMCK0gITIXiCIaTNPZepW9r3-rZRgIX/s1600/Adding+a+HTML+Gadget+to+Blogger.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/AVvXsEjtW51v8n4gq0DYRzXr_7D8WY3wGTnOSxYRzBhKO91pB2F2Jow7Ulcxbg4X3t0EGyaiaa_9LxVWe49-GrHSkPJTulJq386q1zc7pwu_3BUOGo9P2DMCK0gITIXiCIaTNPZepW9r3-rZRgIX/s1600/Adding+a+HTML+Gadget+to+Blogger.jpg" /></a></div>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Back to your SnapWidget tab copy and paste the code into the <span style="color: #d15086;"><b>'Content'</b></span> section of the <span style="color: #d15086;"><b>'Configure HTML/Javascript'</b></span> window on Blogger. The <span style="color: #d15086;"><b>'Title'</b></span> section is optional however as shown I have labelled it <i>Instagram</i>. Click <b style="color: #d15086;">Save</b>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu4Ls81kCoYoq2mPZ3Hnio5oC2Po3IrB3rOODLko0sgt-xmxt8P95DDhyzrEC8LYdJ6QZ92-PkdFHpGVkyFL2ofbrjE3MzJaoHwR5nOQeKW72qGC2MGbsFJW0yxJJbR7tcLoi5msvcIOD8/s1600/Customise+your+Instagram+Widget+for+Blogger.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu4Ls81kCoYoq2mPZ3Hnio5oC2Po3IrB3rOODLko0sgt-xmxt8P95DDhyzrEC8LYdJ6QZ92-PkdFHpGVkyFL2ofbrjE3MzJaoHwR5nOQeKW72qGC2MGbsFJW0yxJJbR7tcLoi5msvcIOD8/s1600/Customise+your+Instagram+Widget+for+Blogger.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
You can now move the HTML/Javascript module anywhere in your blog layout you would like your Instagram widget to appear. You can then preview your blog with your Instagram widget and once happy press <b style="color: #d15086;">Save arrangement</b>.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Congratulations! You did it. If you have any trouble don't hesitate to leave a comment.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Happy blogging!</div>
<div class="separator" style="clear: both; text-align: left;">
xox</div>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
<center>
</center>
<center>
</center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-70541002884005422742013-08-26T16:32:00.000+10:002013-08-26T16:32:14.830+10:00How To - Hide the Blogger NavBar<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv76mQrmhmZVIY7OHKTr24JcWKmCy7DQNDIzBdUTpksAABDdUmWrLJL37IpYFDmX59h9ngqyonUQcYPRtVTEJVx8zXuHrU_RloVbSBorIt-iHVswf6WvczbxI9EQenjesbjLKn7g2c6NhO/s1600/How+To+-+Hide+the+Blogger+Navbar.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/AVvXsEhv76mQrmhmZVIY7OHKTr24JcWKmCy7DQNDIzBdUTpksAABDdUmWrLJL37IpYFDmX59h9ngqyonUQcYPRtVTEJVx8zXuHrU_RloVbSBorIt-iHVswf6WvczbxI9EQenjesbjLKn7g2c6NhO/s1600/How+To+-+Hide+the+Blogger+Navbar.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
When you have a blog on Blogger it will automatically show a navigation bar at the top of the screen. This navigation bar though handy in some ways isn't exactly visually appealing. If you are wanting a more professional look I suggest hiding the <span style="color: #d15086;"><b>nav bar</b></span> on your blog.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
To do this on your Blogger dashboard click <span style="color: #d15086;"><b>Layout</b></span> on the left side and find the module <span style="color: #d15086;"><b>Navbar </b></span>and click the <b style="color: #d15086;">edit</b> button.</center>
<center style="text-align: left;">
<i><u><br /></u></i></center>
<center style="text-align: left;">
<i><u>Note</u></i>, if you are using a blogger template it will most likely be on the top, if you are using a customised template you may have to scroll through your layout modules to find it. </center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ7Q2uEtXwNg1LfygTps2g2T5f6WruS5R9uCihka14rjjx7CelMZhKtnq4KzytUe1-uKdCoYh4XUSHDFgRFCD8H1MywUFGBEBoiKkMvxVBzw2kDFizwilHjO8FJNTypk7KYzNPIHtacdQP/s1600/How+To+Hide+the+Blogger+navbar.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/AVvXsEjQ7Q2uEtXwNg1LfygTps2g2T5f6WruS5R9uCihka14rjjx7CelMZhKtnq4KzytUe1-uKdCoYh4XUSHDFgRFCD8H1MywUFGBEBoiKkMvxVBzw2kDFizwilHjO8FJNTypk7KYzNPIHtacdQP/s1600/How+To+Hide+the+Blogger+navbar.jpg" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYjh_Lld0HIcbzt8SkfTjP1bSqmS7ZXE4RYUvuaNZ34kIOjUD7Xlm5vFLFtUk3rBbprOBsMdiKGr5nKAjU0IzERoXyvUAUN2Hp2BpDGtEIHvx_wJmLTw4XGr_mj-9zO5hbN-TBg34zTLdl/s1600/navbar+module+Blogger.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/AVvXsEgYjh_Lld0HIcbzt8SkfTjP1bSqmS7ZXE4RYUvuaNZ34kIOjUD7Xlm5vFLFtUk3rBbprOBsMdiKGr5nKAjU0IzERoXyvUAUN2Hp2BpDGtEIHvx_wJmLTw4XGr_mj-9zO5hbN-TBg34zTLdl/s1600/navbar+module+Blogger.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
This will open the <b style="color: #d15086;">Navbar Configuration </b>window which allows you to change the appearance of the nav bar. Click the <b style="color: #d15086;">Off </b>option and press the <b style="color: #d15086;">Save</b> button.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigtNT9NpRasWCJWhLuY-3HNiIZhNP43KWlKFdACuIRXCS6-ODDhnHPGbmlrmUvN2WLNblrvHsdLMgAMSF3cLigLOcMEXnXD9oYzVEK99NMTDAxmeS8LpTe6SiL-_T93tHbOosU75QtNwuM/s1600/Navbar+Configuration.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/AVvXsEigtNT9NpRasWCJWhLuY-3HNiIZhNP43KWlKFdACuIRXCS6-ODDhnHPGbmlrmUvN2WLNblrvHsdLMgAMSF3cLigLOcMEXnXD9oYzVEK99NMTDAxmeS8LpTe6SiL-_T93tHbOosU75QtNwuM/s1600/Navbar+Configuration.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
Finished! You have now hidden the nav bar from your blog. Don't forget to press <b style="color: #d15086;">Save arrangement </b>to be safe.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center style="text-align: left;">
<br /></center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-13203602552427910022013-08-24T11:55:00.000+10:002013-08-24T11:55:22.311+10:00How To - Add a Signature to Your Posts<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2avC9fPjatLANrUGFVrd7RbysdE4bX0ZzY5HZPg8_wHwg3Rf3vviaIcQdCigEmi9vHQL-xPQDrVYoIWQ0IwGdv9Kpch5fNdjMzl56N2BdNRJe_OMMGeC3bunzGvmpr9-CR1Q8B5w1N7L0/s1600/How+To+-+Add+a+Signature+to+Your+Posts.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/AVvXsEh2avC9fPjatLANrUGFVrd7RbysdE4bX0ZzY5HZPg8_wHwg3Rf3vviaIcQdCigEmi9vHQL-xPQDrVYoIWQ0IwGdv9Kpch5fNdjMzl56N2BdNRJe_OMMGeC3bunzGvmpr9-CR1Q8B5w1N7L0/s1600/How+To+-+Add+a+Signature+to+Your+Posts.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
You may have noticed on a number of blogs - at the end of each post the blogger has included a signature. A simple feature of Blogger allows you to add a pre-formatted text or code to each post you create.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
First you will need to create a signature. The signature is actually an image which you can create on any photo-editing website or program - the options are endless. The only thing I suggest you take into consideration is the <b><span style="color: #d15086;">size</span> </b>of your signature - for example mine measures 334px by 69px.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
You are free to create any type of signature you want in any colours and fonts. Also, it looks more professional if the background of your signature is the same colour as the background of your posts - otherwise it is evident it is an image.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Once you have created your signature you will need to save it to your computer and upload it to a photo-sharing website. For this example I am using <a href="http://s1303.photobucket.com/" target="_blank">Photobucket</a>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Then on <b><span style="color: #d15086;">Blogger</span> </b>you will click the <b><span style="color: #d15086;">Settings</span> </b>button on the left side and then the <b><span style="color: #d15086;">Posts and comments </span></b>tab. Second from the top you will see the <b><span style="color: #d15086;">Post template</span> </b>section where you will place the code for your signature.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRryclCZdKoZoF0_xvt0ThTOjTYJ_Sjy4-Z47C2FIQs0NLdfNn_lbJoeERq-QkimSXgG0FNX1L61bqtXzI_k-FePJbVLYtDZrN3bsBkqP06zvDF1akFvpQT_kyc2ZOex8B5MYO4JkP1nXS/s1600/Blogger+Post+Template+Signature.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/AVvXsEgRryclCZdKoZoF0_xvt0ThTOjTYJ_Sjy4-Z47C2FIQs0NLdfNn_lbJoeERq-QkimSXgG0FNX1L61bqtXzI_k-FePJbVLYtDZrN3bsBkqP06zvDF1akFvpQT_kyc2ZOex8B5MYO4JkP1nXS/s1600/Blogger+Post+Template+Signature.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center>
</center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center>
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
The code you will copy and paste is below:</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><img src="<span style="color: red;">DIRECT URL OF IMAGE</span>"></span></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
If you would like your signature to be automatically aligned in the center copy and paste the code below:</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><center><img src="<span style="color: red;">DIRECT URL OF IMAGE</span>"></center></span></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="color: red;">DIRECT URL OF IMAGE</span> When you uploaded your signature/image to Photobucket click on the individual image and you will be taken to a page that looks like this. Where it says <u>Direct</u> - click on that code and paste it where I have written <span style="color: red;">DIRECT URL OF IMAGE</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxLFbX7NioVW2Q4TRXcOIp11TWWkWvq5QX_KCTtgXgLZ4nUGl6Q9JIDt2KSdijDr5rpwTjyb10cTk42Z6OCC4fzOsF_SdIg7E-AX06f0xY4SJ9Kf6Cmj57ISNg9I6LrTslgarn3olhg2zp/s1600/Photobucket+Direct+Code+Signature.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/AVvXsEgxLFbX7NioVW2Q4TRXcOIp11TWWkWvq5QX_KCTtgXgLZ4nUGl6Q9JIDt2KSdijDr5rpwTjyb10cTk42Z6OCC4fzOsF_SdIg7E-AX06f0xY4SJ9Kf6Cmj57ISNg9I6LrTslgarn3olhg2zp/s1600/Photobucket+Direct+Code+Signature.jpg" /></a></div>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
When you are finished don't forget to press <b><span style="color: #d15086;">Save Settings</span></b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Every post you create will now automatically have your signature image formatted. If you any questions don't hesitate to ask!</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-68563251899498877762013-08-23T14:14:00.000+10:002013-08-23T18:08:01.429+10:00How To - Add Social Media Icons to Your Blog<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNub1dG6BpiVhsCRQ_Synau4NjCdLG8PZSsJh9F2OeHnD_zxfix1WrdZwlKVD-paSwiXpShbfHZfRe4x67qnlx0dPGY1k2MvlSaYMC4J2e9nAOLs7GFNcuGPRZoH6ad3sFlG5ylI-sWXSG/s1600/How+To+-+Add+Social+Media+Icons+to+your+Blog.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/AVvXsEiNub1dG6BpiVhsCRQ_Synau4NjCdLG8PZSsJh9F2OeHnD_zxfix1WrdZwlKVD-paSwiXpShbfHZfRe4x67qnlx0dPGY1k2MvlSaYMC4J2e9nAOLs7GFNcuGPRZoH6ad3sFlG5ylI-sWXSG/s1600/How+To+-+Add+Social+Media+Icons+to+your+Blog.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
I admit one of my favourite elements of designing my blog is using social media icons. I can sit for hours and look through beautiful designs and colours and still not make up my mind. In this post I will be showing you how to install <span style="color: #d15086;"><b>social media icons</b></span> to your blog.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Firstly, you will need to find a set of icons that take to your fancy, <a href="http://allurebloggerdesign.blogspot.com.au/2013/08/social-media-icon-resources.html" target="_blank">here</a> I have compiled a resource post which includes some of my favourites <i>(all free)</i>. You can also buy a set from <a href="http://www.etsy.com/">Etsy</a> - the majority are quite cheap or if you're a creative one you can make your own!</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Anyhow, once you have your chosen icons saved to your computer you will need to upload them to a photo-sharing website - for this tutorial I have gone with <a href="http://s1303.photobucket.com/">Photobucket</a> <i>(simple and free to use)</i>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Go to your blog and click <span style="color: #d15086;"><b>'Layout'</b></span> on the left side of your screen. Now click the <span style="color: #d15086;"><b>'Add a Gadget'</b></span> module and choose the <span style="color: #d15086;"><b>'HTML/Javascript'</b></span> option. This will open a <span style="color: #d15086;"><b>'Configure HTML/Javascript'</b></span> window. The <span style="color: #d15086;"><b>'Content'</b></span> section is where you will be pasting your codes.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbCSDNVPq5IhIfk9vpjyZclUkbBa_4fthlkiWAKsroZgFEXuYWg9IpjMT_aKXKkQgUIGQbfTCUUV1h6zzPKUIFCZwO_WDld83K6ibn0rJbYmCwpBCB29Wl2TUJJLedQeh2ppGQ0EToKlhw/s1600/Add+a+Gadget+Blogger.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/AVvXsEgbCSDNVPq5IhIfk9vpjyZclUkbBa_4fthlkiWAKsroZgFEXuYWg9IpjMT_aKXKkQgUIGQbfTCUUV1h6zzPKUIFCZwO_WDld83K6ibn0rJbYmCwpBCB29Wl2TUJJLedQeh2ppGQ0EToKlhw/s1600/Add+a+Gadget+Blogger.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGH_RfN3epCUIcZia9B5S3PSkbsaMg3vLrSjsxknh081nT5vfg9hmfB6A17U7ysdK9-yXnxwn_-Kn44vl34uc4KNCkFrAsilX7tlybCozOCSZpBh0bBTtq81hENCQHbEdkaiOBD74o_obz/s1600/Adding+a+HTML+Gadget+to+Blogger.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/AVvXsEhGH_RfN3epCUIcZia9B5S3PSkbsaMg3vLrSjsxknh081nT5vfg9hmfB6A17U7ysdK9-yXnxwn_-Kn44vl34uc4KNCkFrAsilX7tlybCozOCSZpBh0bBTtq81hENCQHbEdkaiOBD74o_obz/s1600/Adding+a+HTML+Gadget+to+Blogger.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Now it is time to add some <u>HTML codes</u>. Don't worry I have made it easy as pie to understand. For each of your icons <b style="color: #d15086;"><u>except your email icon</u> </b>you will copy the code below. This code is for social media icons with <b style="color: #d15086;">no hover effect</b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">
<a href="<span style="color: red;">YOUR WEBSITE URL</span>"target="_blank"><img src="<span style="color: blue;">DIRECT URL OF IMAGE</span>" width="<span style="color: purple;">60</span>" /></a></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
<span style="color: red;">YOUR WEBSITE URL</span> Replace this with the URL of the website you are linking to, for example I will link the twitter icon to my twitter URL which is <a href="https://twitter.com/MaddiSkotinis">https://twitter.com/MaddiSkotinis</a></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="color: blue;">DIRECT URL OF IMAGE</span> When you uploaded your icon/image to Photobucket click on the individual icon and you will be taken to a page that looks like this. Where it says <u>Direct </u>- click on that code and paste it where I have written <span style="color: blue;">DIRECT URL OF IMAGE</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjpejecYiTIBL9us34sVu5oXoAbnXYtihoTyc5JCUz4cK5Z5_VavWqjTiUhaetmoshyAsHe44v_L4oOZeYDUFTC3RZgEVo5Mj-o473tcBB_1qV1E9fx0-fWw9Pc5kKZRmpPdHDV-Bv0KeR/s1600/Photobucket+Direct+URL+of+Image.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/AVvXsEhjpejecYiTIBL9us34sVu5oXoAbnXYtihoTyc5JCUz4cK5Z5_VavWqjTiUhaetmoshyAsHe44v_L4oOZeYDUFTC3RZgEVo5Mj-o473tcBB_1qV1E9fx0-fWw9Pc5kKZRmpPdHDV-Bv0KeR/s1600/Photobucket+Direct+URL+of+Image.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
width="<span style="color: purple;">60</span>" Changing the number in <span style="color: purple;">purple</span> will dictate how big/small your icon will be. I use this mainly to make the icons smaller if I add another icon to the row so they all fit. If they don't fit the next icon will automatically go underneath <i>(creating a new row)</i> which doesn't look bad either.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Congratulations your social media icons will now work. Use the same code for each icon but just make sure to change the URL address and Direct image URL for each icon. The code you will need for your <b style="color: #d15086;"><u>email icon</u> </b>is this: this code is for email icons with <b style="color: #d15086;">no hover effect</b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;">
<a href="mailto:<span style="color: red;">EMAIL ADDRESS</span>"><img src="<span style="color: blue;">DIRECT URL OF IMAGE</span>" width="<span style="color: purple;">60</span>" /></a></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
<span style="color: red;">EMAIL ADDRESS</span> Replace this with the email address you want to link to your email icon, for example my code would look like <a href="mailto:mskotinis1995@gmail.com"></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="color: blue;">DIRECT URL OF IMAGE</span> Using the same method as before, when you uploaded your icon/image to Photobucket click on the individual icon and you will be taken to a page that looks like the one posted above. Where it says <u>Direct </u>- click on that code and paste it where I have written <span style="color: blue;">DIRECT URL OF IMAGE</span>.</center>
<center style="text-align: left;">
<br /></center>
</center>
<center style="text-align: left;">
width="<span style="color: purple;">60</span>" Again, changing the number in <span style="color: purple;">purple</span> will dictate how big/small your icon will be.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Now if you would like your social media icons to have a <b style="color: #d15086;">hover effect </b>use the codes below - a hover effect is when you place your mouse over the icon it will change colour. Some bloggers like this as it allows the visitor to be certain they are about to click on that particular icon. This code is for social media icons <b style="color: #d15086;">with a hover effect</b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><a href="<span style="color: red;">YOUR WEBSITE URL</span>"target="_blank"><img src="<span style="color: blue;">DIRECT URL OF IMAGE</span>" onmouseover="this.src='<span style="color: orange;">DIRECT URL OF SECOND IMAGE</span>'" onmouseout="this.src='<span style="color: blue;">DIRECT URL OF IMAGE</span>'" width="<span style="color: purple;">60</span>" /></a></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
As with the code for no hover effect you will insert the URL address, Direct image URL and the width number the same way. You will replace the <span style="color: orange;">DIRECT URL OF SECOND IMAGE</span> with the Direct image URL of the image you want to appear when you hover over that icon.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
The code for a <b style="color: #d15086;">hover effect </b>for your email icon is:</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><a href="mailto:<span style="color: red;">EMAIL ADDRESS</span>"><img src="<span style="color: blue;">DIRECT URL OF IMAGE</span>" onmouseover="this.src='<span style="color: orange;">DIRECT URL OF SECOND IMAGE</span>'" onmouseout="this.src='<span style="color: blue;">DIRECT URL OF IMAGE</span>'" width="<span style="color: purple;">60</span>" /></a></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
<span style="font-family: Courier New, Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
If you would like your icons to have no spaces between them you will not include a space between the opening and closing tags. For example, your code for 3 no hover effect icons would look like this:</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">YOUR WEBSITE URL</span><span style="font-family: 'Courier New', Courier, monospace;">"target="_blank"><img src="</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">DIRECT URL OF IMAGE</span><span style="font-family: 'Courier New', Courier, monospace;">" width="</span><span style="color: purple; font-family: 'Courier New', Courier, monospace;">60</span><span style="font-family: 'Courier New', Courier, monospace;">" /></a></span><span style="font-family: 'Courier New', Courier, monospace;"><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">YOUR WEBSITE URL</span><span style="font-family: 'Courier New', Courier, monospace;">"target="_blank"><img src="</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">DIRECT URL OF IMAGE</span><span style="font-family: 'Courier New', Courier, monospace;">" width="</span><span style="color: purple; font-family: 'Courier New', Courier, monospace;">60</span><span style="font-family: 'Courier New', Courier, monospace;">" /></a></span><span style="font-family: 'Courier New', Courier, monospace;"><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">YOUR WEBSITE URL</span><span style="font-family: 'Courier New', Courier, monospace;">"target="_blank"><img src="</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">DIRECT URL OF IMAGE</span><span style="font-family: 'Courier New', Courier, monospace;">" width="</span><span style="color: purple; font-family: 'Courier New', Courier, monospace;">60</span><span style="font-family: 'Courier New', Courier, monospace;">" /></a></span></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></center>
</center>
<center style="text-align: left;">
If you would like a space between your icons you simply paste each code on a new line. For example, your code for 3 no hover effect icons would look like this:</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">YOUR WEBSITE URL</span><span style="font-family: 'Courier New', Courier, monospace;">"target="_blank"><img src="</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">DIRECT URL OF IMAGE</span><span style="font-family: 'Courier New', Courier, monospace;">" width="</span><span style="color: purple; font-family: 'Courier New', Courier, monospace;">60</span><span style="font-family: 'Courier New', Courier, monospace;">" /></a></span></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">YOUR WEBSITE URL</span><span style="font-family: 'Courier New', Courier, monospace;">"target="_blank"><img src="</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">DIRECT URL OF IMAGE</span><span style="font-family: 'Courier New', Courier, monospace;">" width="</span><span style="color: purple; font-family: 'Courier New', Courier, monospace;">60</span><span style="font-family: 'Courier New', Courier, monospace;">" /></a></span></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">YOUR WEBSITE URL</span><span style="font-family: 'Courier New', Courier, monospace;">"target="_blank"><img src="</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">DIRECT URL OF IMAGE</span><span style="font-family: 'Courier New', Courier, monospace;">" width="</span><span style="color: purple; font-family: 'Courier New', Courier, monospace;">60</span><span style="font-family: 'Courier New', Courier, monospace;">" /></a></span></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></center>
<center style="text-align: left;">
Another option you have is if you would like your icons centered. Thus no matter how many icons you have they will be aligned to the center of your sidebar/footer/etc. To do this you will add <span style="font-family: Courier New, Courier, monospace;"><center></span> before your code and <span style="font-family: Courier New, Courier, monospace;"></center></span> after your code. For example, your code for 3 no hover effect icons to be centered would look like this:</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: #6aa84f;"><center></span><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">YOUR WEBSITE URL</span><span style="font-family: 'Courier New', Courier, monospace;">"target="_blank"><img src="</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">DIRECT URL OF IMAGE</span><span style="font-family: 'Courier New', Courier, monospace;">" width="</span><span style="color: purple; font-family: 'Courier New', Courier, monospace;">60</span><span style="font-family: 'Courier New', Courier, monospace;">" /></a></span><span style="font-family: 'Courier New', Courier, monospace;"><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">YOUR WEBSITE URL</span><span style="font-family: 'Courier New', Courier, monospace;">"target="_blank"><img src="</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">DIRECT URL OF IMAGE</span><span style="font-family: 'Courier New', Courier, monospace;">" width="</span><span style="color: purple; font-family: 'Courier New', Courier, monospace;">60</span><span style="font-family: 'Courier New', Courier, monospace;">" /></a></span><span style="font-family: 'Courier New', Courier, monospace;"><a href="</span><span style="color: red; font-family: 'Courier New', Courier, monospace;">YOUR WEBSITE URL</span><span style="font-family: 'Courier New', Courier, monospace;">"target="_blank"><img src="</span><span style="color: blue; font-family: 'Courier New', Courier, monospace;">DIRECT URL OF IMAGE</span><span style="font-family: 'Courier New', Courier, monospace;">" width="</span><span style="color: purple; font-family: 'Courier New', Courier, monospace;">60</span><span style="font-family: 'Courier New', Courier, monospace;">" /></a><span style="color: #6aa84f;"></center></span></span></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: #6aa84f;"><br /></span></span></center>
<center style="text-align: left;">
<span style="font-family: 'Courier New', Courier, monospace;"><span style="color: #6aa84f;"><br /></span></span></center>
</center>
<center style="text-align: left;">
Finally, when you are happy with the position, sizes and images for your social media icons click <b style="color: #d15086;">Save</b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
You can now move the HTML/Javascript module anywhere in your sidebar/footer or to anywhere you would like your social media icons to appear.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
If you have any trouble or have any questions please feel free to leave a comment or you can tweet or email me. I hope you found the help you needed to install social media icons on your blogger blog.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center>
</center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-18070967783528452452013-08-23T14:13:00.000+10:002013-08-23T18:06:11.375+10:00Social Media Icon Resources<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaOIes-GDOuXCE_Q4BkQJ5oTP2O0jj-gKWDmK6I-RFF13Vq7txvStQg_TrYV1uPpu-cO3PMG7y4vOAObaha73Ao_l3ovHctx5EXoex05zmH44GfYuBWWSeWSka4BouA5DnYXeAOqWb79kz/s1600/Social+Media+Icon+Resources.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/AVvXsEgaOIes-GDOuXCE_Q4BkQJ5oTP2O0jj-gKWDmK6I-RFF13Vq7txvStQg_TrYV1uPpu-cO3PMG7y4vOAObaha73Ao_l3ovHctx5EXoex05zmH44GfYuBWWSeWSka4BouA5DnYXeAOqWb79kz/s1600/Social+Media+Icon+Resources.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
With my love of social media and social media icons for blogging I thought I'd compile a list of <span style="color: #d15086;"><b>free</b></span> icons which I particularly love. So if you're having trouble looking for some feel free to use these. Simply click on the photo to take you to the original website hosting the download.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Check out my post on how to add social media icons to your blog <a href="http://allurebloggerdesign.blogspot.com.au/2013/08/how-to-add-social-media-icons-to-your.html" target="_blank">here</a>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://beautifuldawndesigns.net/freebie-social-media-icon-pack/" target="_blank"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguD1A3r34Vjp6Z_WFRyLpj4B2_IpwN71dcAT7SrA61kbJoQ0f6IKYGuoei5ISXTep3oR07b-KiIqN-Os2Kds3I-YSbVJfpaKGyNcbsS4Kyncm7nWweo5YSSjc-WChXLzpc9iQ-_wLR0J0x/s320/social+media+icon+pack.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.irocksowhat.com/2012/08/free-download-social-media-icons-so.html" target="_blank"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhui2Y0-aKnwe3X7_YaMn3B8hPZG_ufWD_BX-PKibBqZSvS8W9pJFmTiQUgKl_zZV6Wy9D5byjyN_qmQB9UJi02gominqCvuFAH75ayM7YkLHYmcien7mesKfGbJkChhyKP3hqgIx9-HLgN/s400/socialmediaicons650.jpg" width="360" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.craftiments.com/2012/08/free-social-media-icons-in-pantone-fall.html?m=0" target="_blank"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzpIveVCiUuteOTsEjgEI0hTkvHGhec_rY01_ISqMvCAg06EZfz4fwVaOmuXs7TZhs5_uQK_uggU_QDljTdqFvsSbU5RSMTKYC9U_EcLulWxUsW_6nZGV_f3pelpePvf9LGYXxyDbUgSsp/s640/social+media+icons+collage.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.15minutebeauty.com/2013/02/freesocialmediaicons-neutralcolors.html" target="_blank"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiQpWnhFuiaV3yBGE5kULqGO07rSwPYjm4bu7yc3PZuzQYyeLcINp8PekZoC77jrTgTnX0Ar_BppnbS7a7gWRHbo8-orDkOF4yWie3XZ1CSWCDHIlabZjIlLM9-4Yo4_s8hJr27zD3J5EJ/s400/pantoneneutrals.png" width="300" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.designbolts.com/2013/01/08/20-free-retro-style-social-media-icons-2013-set-for-pretty-girly-blogs-ver-2/#" target="_blank"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqW3YUQyMt8IGe7mPQ64mTT82ByHA779pTGaLenj_Inpsy2HJSjWQluIFHoBNOp6TWHiGWsti257EodlL8VilepRUjCMRZMVQpjHRm64uU8UQZUNTN2bzsz24uHetDT4XFa0Lk0uImAwu8/s400/flower-social-media-icons.jpg" width="317" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.lilblueboo.com/2012/07/social-media-icons.html" target="_blank"><img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1qN197Qyl6WYLCnMY2VvpUOoIaELucCt7rfd4WgMx9iryjngyIFCWABwDgmn79bXtJuQfdNHUdUBV1qj7W-WJ0rn82QNJCGpgcP8xHOKnzy5iLJJTH9u7VZCQWUO4ZA8oFkoeNbfADBWK/s320/Scribble+and+Sketchy+Social+Media+Icons.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.lenabactually.com/2013/05/free-social-media-icons.html" target="_blank"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKe9tAFD5zS1YGFG37BbRLf18Fmvb9JnkKbtZ_FAC-0Y2ozuckxxA3raSlAW1E6-CnxI0WAqig-fNPoHJAsqartb67Me2LeE6IAkEIJTfjIBdNWFKf00GRDT8JaDLTOM3oOhjtA_rN0vFF/s400/Dinosaur+Stew+Social+Media+Icons.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.myfavouritethingsblog.com/2013/04/free-pink-social-media-icons.html" target="_blank"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqCjLG7b3tQ1vYj3voRHvmI6Oa2SHVC2YQnRaPcLC0TQuM0DmItwHJXUN2Ogn9NoRLh54ERLOoytoQf68zHS4D1LHGf5UcDW97Z_ehu6vuGP1s8QxyJqGLufoMoi0khU6hHCf3YDllS_gi/s400/Pink+Social+Media+Icons2.jpg" width="305" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://xomisse.com/free-social-media-icons/" target="_blank"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRanSwmxI3DPhMeIV3Wx-iF3u-oN4OHlp19FlwTC0rO4XGuWKlm8hUYrBP3cJ0F_Uf0nB60q1xLika2W67mbWujLNS6WkEw8GcaT55iG7XUfo0_RM5m41nfAOjR9C6F72c_I2G1IQV6Y_t/s400/Summer+Set+Social+Media+Icons.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://pancake-ninja.blogspot.de/2012/09/pastel-social-media-icons.html" target="_blank"><img border="0" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUbjxMpQVeQGmsN_wgeMexlBB0JGg-_mG8iFtujGIP1XkYY0187QiC5hK3nlNL8UGUtILsmcwVK4JOwdoAx8ok67FYT2xpQpgMVFTPfcYsQqGZDJn08rpUnnYRVxcK0Hncq2u0bPI6-sSr/s400/free+pastel+social+media+icons_thumb%5B2%5D.jpg" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://dindindoes.blogspot.com.au/2013/01/a-new-look-free-social-media-icons.html" target="_blank"><img border="0" height="241" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZlIf8siiWZv0HZ06j0ok0q6-eHw5k2SsoYIfNJIAqwJl47-MO-YrxAPKXxp2qKIWprKkzEw1ANrvmGjOi_SxOCg4QD7lmfzvNWuHDdFGLakqN0kKIeaaIfyFhZRp5A-KCeji8P2FnYHSi/s320/Screen+shot+2013-01-16+at+10.17.09+PM.png.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.designdeck.co.uk/a/253" target="_blank"><img border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc9FM9h9I6rqzU-ObBy1sYY0z-OXh1z3NKYGptcBuzPSayVabS0b_t_aEEt5lbSXD2I8yIdjzjNVvLslU78B8Cp4QdWOAQw4qkjn4GtquNCn-0Is1P7cQYjwXbcHfCR5vFaBrknJy66hKX/s400/simple_social_icon_set.png" width="400" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://www.hazelandagnes.com/free-download-glittery-social-media-icons/" target="_blank"><img border="0" height="306" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDUTjeebNLzk342uBnRYTq8p3cV1b2erHKPwQ0idbgAnMdCHRoVZhNGLTRntRZY34W2VjMaBiOgJ6RqrT91Cjh2SDso4czT_1hAakH3LZ0Y2gMYrhhzyp-BQEJfRFBFlwKGzmScxdpoPBO/s320/Glittery+Social+Media+Icons.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I hope you found a set you like, I could of kept adding icons for days but I thought I might stop there.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Happy blogging!</div>
<div class="separator" style="clear: both; text-align: left;">
xox</div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-6541107955276755722013-08-22T12:21:00.000+10:002013-08-23T17:26:36.797+10:00Tutorial - Remove White Background on Images<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOPmvddtGlGXuooRuPfHXirbiu-RGgIl9E_zt4KvPrELntYiTrGuianvRYRLzcPgIeXsIf3-_Ku9G9GcBeFssi_HpmPR3VCI1LHS4N7FZnpsk__lWOMdceXIj2m_HbhnM12KlzdNSfp1o_/s1600/Tutorial+-+GIMP+Remove+White+Background+on+Images.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/AVvXsEgOPmvddtGlGXuooRuPfHXirbiu-RGgIl9E_zt4KvPrELntYiTrGuianvRYRLzcPgIeXsIf3-_Ku9G9GcBeFssi_HpmPR3VCI1LHS4N7FZnpsk__lWOMdceXIj2m_HbhnM12KlzdNSfp1o_/s1600/Tutorial+-+GIMP+Remove+White+Background+on+Images.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
So you've created your new header for your blog <i>(or any image for that matter)</i> and now you're left with that <span style="color: #d15086;"><b>pesky white background</b></span> which for some reason never seems to match the white background on your blog. Being one of my biggest pet peeves I couldn't go past writing up a tutorial on how I remove this by created a transparent background using Gimp.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
This tutorial may seem long however this is because I have included as many images as I can to make the process as simple as possible.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
First of all if you haven't already you will need to download <a href="http://www.gimp.org/">Gimp</a> - a free image manipulation program which is available on the following supported platforms:</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<ul>
<li>GNU/Linux (i386, PPCP</li>
<li>Microsoft Windows (XP, Vista)</li>
<li>Mac OS X</li>
<li>Sun OpenSolaris</li>
<li>FreeBSD</li>
<li><br /></li>
</ul>
<div>
Once installed open the Gimp program which will look like this.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtYc-rzph0B4Y9yito-7Iy03D0l0QU2SCjLQxNq7M5A82kJBbgo7v-pSqRwTNCmv36dXjTRLZNVD7-1EN-TfrLBiGzP62MHkVR8XJzpzKP6x-0P-TnRVvdoAtv80kx43LAO91APRycN5VV/s1600/Gimp+Program.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/AVvXsEgtYc-rzph0B4Y9yito-7Iy03D0l0QU2SCjLQxNq7M5A82kJBbgo7v-pSqRwTNCmv36dXjTRLZNVD7-1EN-TfrLBiGzP62MHkVR8XJzpzKP6x-0P-TnRVvdoAtv80kx43LAO91APRycN5VV/s1600/Gimp+Program.png" /></a></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
To open your header/image click <span style="color: #d15086;"><b>'File' - 'Open'</b></span> and choose your designated file.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik5DPoOS66tVfttTYZiKZ0Mex5VM-hWeX2jlDCfQGfQSojpbxesXyHv62NnQXm-Yonx_jXq38aeT4gQ_VT-LnnPjaWVR6evR1cHpNzgfCDWhBuHCE03xfz3iL6MN4kO8TiTnkc0BFrbIKU/s1600/Gimp+Program.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/AVvXsEik5DPoOS66tVfttTYZiKZ0Mex5VM-hWeX2jlDCfQGfQSojpbxesXyHv62NnQXm-Yonx_jXq38aeT4gQ_VT-LnnPjaWVR6evR1cHpNzgfCDWhBuHCE03xfz3iL6MN4kO8TiTnkc0BFrbIKU/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Now turn your eyes to the <span style="color: #d15086;"><b>'Layers - Brushes'</b></span> box <span style="background-color: yellow;">highlighted in yellow</span> and click the <span style="color: #d15086;"><b>'Create a duplicate of the layer and add it to the image'</b></span> button which will create a copy of your image.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc4n8uUrMJVr31OWLzUckHAclQiLW-AtSlhe7WUme42k9ez8YHUSf4A3_B6vWUl8d_iXaJzVbfrRuSnBlxWeA5akj-wmDvvNr7zRiyMRSUHn39fqRwIbc8nlbds15RR9uld7WaSLb6gXRM/s1600/Gimp+Program+Create+a+Copy+Layer.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/AVvXsEjc4n8uUrMJVr31OWLzUckHAclQiLW-AtSlhe7WUme42k9ez8YHUSf4A3_B6vWUl8d_iXaJzVbfrRuSnBlxWeA5akj-wmDvvNr7zRiyMRSUHn39fqRwIbc8nlbds15RR9uld7WaSLb6gXRM/s1600/Gimp+Program+Create+a+Copy+Layer.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Now we are going to create a white layer. Keeping with the <span style="color: #d15086;"><b>'Layers - Brushes'</b></span> box <span style="background-color: yellow;">highlighted in yellow</span> you will click the <span style="color: #d15086;"><b>'Create a new layer and add it to the image'</b></span> button.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
This will open a window <span style="color: #d15086;"><b>'New Layer'</b></span> <span style="background-color: cyan;">highlighted in blue</span> where you will select the <span style="color: #d15086;"><b>'white'</b></span> option. You can rename the layer - I have named it <u><i>White</i></u> to avoid confusion. Press <b style="color: #d15086;">OK</b>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ27J4ZOzhLER6cKpygywkK7F2fkjSiyNVRU8hex6nZwtBuQDyt79WtuYM27brvoqrwGf7OljP1qfn0UKcny-3AaZDi8oJNifV1AM2WUdZSQ343jDPJpYG4E1334ChGETAgRdXZbJObz1n/s1600/Gimp+Program.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/AVvXsEhQ27J4ZOzhLER6cKpygywkK7F2fkjSiyNVRU8hex6nZwtBuQDyt79WtuYM27brvoqrwGf7OljP1qfn0UKcny-3AaZDi8oJNifV1AM2WUdZSQ343jDPJpYG4E1334ChGETAgRdXZbJObz1n/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Your screen should now look like this with both the copy layer, white (new layer) layer and the original layer.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiTtYFzXqjloqfiGbP4bh6IdphrWMJ3fqdIkDuF1ZgNoS7uz8YDDleY7AT8pD7j48Cknhou8k-yq8HA1pSWQjuLDtZ24718WKsMWYGXDkI4EI05Iv9AK-bsNnzNsCaALBD9ZYKbEzRuTHS/s1600/Gimp+Program.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/AVvXsEiiTtYFzXqjloqfiGbP4bh6IdphrWMJ3fqdIkDuF1ZgNoS7uz8YDDleY7AT8pD7j48Cknhou8k-yq8HA1pSWQjuLDtZ24718WKsMWYGXDkI4EI05Iv9AK-bsNnzNsCaALBD9ZYKbEzRuTHS/s1600/Gimp+Program.png" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Back to the <span style="color: #d15086;"><b>'Layers - Brushes'</b></span> box <span style="background-color: yellow;">highlighted in yellow</span> you are going to move the new layer you created down by clicking on the new layer <span style="background-color: cyan;">highlighted in blue</span><span style="background-color: white;"> </span>and then clicking the <span style="color: #d15086;"><b>'Lower this layer one step in the layer stack'</b></span> button.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
The new layer should now be in the middle.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM2rvvL8GmRvO_NWgmhlgh1oizgSRDm6laaL4ompTqKFNYY9HhjAeLvwzvwwkcLACmqCIzOtw2Qj2Qeac95oCv7MCS2i1Exuu1K5NrJ8qDXUFZ82K4rlJV8l7OnMduLW4pIQw60-EHK12p/s1600/Gimp+Program.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/AVvXsEhM2rvvL8GmRvO_NWgmhlgh1oizgSRDm6laaL4ompTqKFNYY9HhjAeLvwzvwwkcLACmqCIzOtw2Qj2Qeac95oCv7MCS2i1Exuu1K5NrJ8qDXUFZ82K4rlJV8l7OnMduLW4pIQw60-EHK12p/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Next you have to delete the very original image you opened in Gimp. This will be the bottom layer and will be the one without the word <span style="color: #d15086;"><b>'copy'</b></span>. You will click on the original layer <span style="background-color: cyan;">highlighted in blue</span><span style="background-color: white;"> </span>and click the <span style="color: #d15086;"><b>'Delete this layer'</b></span> button which looks like a rubbish bin.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKNMfzvkvJoHt_tXW8iwXUu2ygbWwn84y40GR4O7xzszXo6jHJCFQW3wMfVTgeEev8qECpXSciCBZAyeM_ivQ_cofjyuJI1BqREf3r_jswXy2WDLRg4r2cC81jeY7L7kyG0Chcx2Zaa9sb/s1600/Gimp+Program.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/AVvXsEiKNMfzvkvJoHt_tXW8iwXUu2ygbWwn84y40GR4O7xzszXo6jHJCFQW3wMfVTgeEev8qECpXSciCBZAyeM_ivQ_cofjyuJI1BqREf3r_jswXy2WDLRg4r2cC81jeY7L7kyG0Chcx2Zaa9sb/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
You will now be left with the white layer and the copy of the original layer.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqxgj5mcOFhyphenhyphen5SAloHa6UKhOUeRcoPSnDhCe3V0KgDMoHme1TGaNcZjil2hSMd6spjucRruI7KNP2cb20diSgf-zDPCIV-kQlbC17mprN9S3EexDArjhD63UqPbWntl738s8Mjts0cAsxJ/s1600/Gimp+Program.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/AVvXsEhqxgj5mcOFhyphenhyphen5SAloHa6UKhOUeRcoPSnDhCe3V0KgDMoHme1TGaNcZjil2hSMd6spjucRruI7KNP2cb20diSgf-zDPCIV-kQlbC17mprN9S3EexDArjhD63UqPbWntl738s8Mjts0cAsxJ/s1600/Gimp+Program.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
I hope you haven't had trouble so far as I've tried to outline it as simple as possible.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
The next step is to go back to the <span style="color: #d15086;"><b>'Layers - Brushes'</b></span> box <span style="background-color: yellow;">highlighted in yellow</span> and click the copy layer <span style="background-color: cyan;">highlighted in blue</span>. Now on the top of your screen click <b style="color: #d15086;">'Layer' - 'Transparency' - 'Color to Alpha...' </b>which are <span style="background-color: lime;">highlighted in green</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLcpLwJgKuD6xtZZLDIHFcQxe-xsjtu7lFG2W0jXe2oV1zQM_FrJIz8h4sYT0eDtN44tCB3iupKvkCOJqmNrB_rrCcS2vVIPFSwoOASk-UpURdNMx8mA38-ETblG1Jb-feC8nzdWKYbNei/s1600/Gimp+Program.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/AVvXsEjLcpLwJgKuD6xtZZLDIHFcQxe-xsjtu7lFG2W0jXe2oV1zQM_FrJIz8h4sYT0eDtN44tCB3iupKvkCOJqmNrB_rrCcS2vVIPFSwoOASk-UpURdNMx8mA38-ETblG1Jb-feC8nzdWKYbNei/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
This will open a window <span style="color: #d15086;"><b>'Color to Alpha'</b></span>. As you can see Gimp automatically chooses to change the colour white (#ffffff) to alpha, so then you just click <b style="color: #d15086;">OK</b>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3KAycuIf5Rhmbq2UfqU3vsy3dxVVGxy3IYPd23T2ReoUV7moLayn2zDQegaYg_2p33w8yHpeUe72VDY2HvW1FCf0TeKorAo9Af8y7nEpT4_KG38Wl0TRDJVH2eADv2bCQ8rvOhZ42R4nd/s1600/Gimp+Program.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/AVvXsEh3KAycuIf5Rhmbq2UfqU3vsy3dxVVGxy3IYPd23T2ReoUV7moLayn2zDQegaYg_2p33w8yHpeUe72VDY2HvW1FCf0TeKorAo9Af8y7nEpT4_KG38Wl0TRDJVH2eADv2bCQ8rvOhZ42R4nd/s1600/Gimp+Program.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
You will now be left with a screen like this. Although it may look no different you will see the copy layer has a transparent background. <i>See where the arrow is pointing</i>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLdkOM7k4WpHqyDbcG4keLgD6Mz5nEjd0upEMVRgMyg5qdvvDlAcQghjSPD7DgcLQpDkg-qerGiz2MRlvkHj1673zgOGoG7UCthyphenhyphenmfAwO_8elPpBmFg9U9pHEcxIK8EU3A_27BSh4td1cQ/s1600/Gimp+Program.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/AVvXsEiLdkOM7k4WpHqyDbcG4keLgD6Mz5nEjd0upEMVRgMyg5qdvvDlAcQghjSPD7DgcLQpDkg-qerGiz2MRlvkHj1673zgOGoG7UCthyphenhyphenmfAwO_8elPpBmFg9U9pHEcxIK8EU3A_27BSh4td1cQ/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
The next step is to again go back to the <span style="color: #d15086;"><b>'Layers - Brushes'</b></span> box <span style="background-color: yellow;">highlighted in yellow</span> and click the eye icon next to the new layer <i><u>(which I have named White)</u></i> <span style="background-color: cyan;">highlighted in blue</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNdLj3aU9rHRxRvvK6S4ALsJLwoH8dskRYUcmhZDio6CJxzNlxs1uTjMkgM8PzH5L49GvfWX-tKiA99M7bRCOU6bDGVcuilleM1PivCw_t_jiV1Fkqca2KQ57o9BzVviscVdDvlbZGMQuE/s1600/Gimp+Program.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/AVvXsEjNdLj3aU9rHRxRvvK6S4ALsJLwoH8dskRYUcmhZDio6CJxzNlxs1uTjMkgM8PzH5L49GvfWX-tKiA99M7bRCOU6bDGVcuilleM1PivCw_t_jiV1Fkqca2KQ57o9BzVviscVdDvlbZGMQuE/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
You will now be left with a screen with a transparent background. Yay! </center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjIhOwVx1fI8ZK44OouFW6fEx7DjmogYOaPe5P1NgoOXANzLy_ou1stZztz2L02FV5Dsl-BOUiym5LF3EmFbe2Z-lxH5Dx1yIYV7YZQn_qME8-BFN2UGTg7E192HDgS7uHW0Wmghzpbgyx/s1600/Gimp+Program.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/AVvXsEgjIhOwVx1fI8ZK44OouFW6fEx7DjmogYOaPe5P1NgoOXANzLy_ou1stZztz2L02FV5Dsl-BOUiym5LF3EmFbe2Z-lxH5Dx1yIYV7YZQn_qME8-BFN2UGTg7E192HDgS7uHW0Wmghzpbgyx/s1600/Gimp+Program.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
However as you will see some of the colours in your header/image may also appear transparent. To bring them back to the correct colour you will need to go to the <span style="color: #d15086;"><b>'Layers - Brushes'</b></span> box <span style="background-color: yellow;">highlighted in yellow</span> and <u>right-click</u> the copy layer <span style="background-color: cyan;">highlighted in blue</span><span style="background-color: white;"> </span>and click the <span style="color: #d15086;"><b>'Alpha to Selection'</b></span> box <span style="background-color: lime;">highlighted in green</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmdxzr_LenmwsB5T_gykbWqH4QaVyfWhXgTC4bjuiRh7rv9u25Y2Vnlqu-6xa74_SxzuoYyPESsa-iJDXWjZMLp4arvI6xOhvJA-xUS5XP8NmnsgIkwhDPSNMMRU8xw3fNnBzCZMmmhxUi/s1600/Gimp+Program.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/AVvXsEgmdxzr_LenmwsB5T_gykbWqH4QaVyfWhXgTC4bjuiRh7rv9u25Y2Vnlqu-6xa74_SxzuoYyPESsa-iJDXWjZMLp4arvI6xOhvJA-xUS5XP8NmnsgIkwhDPSNMMRU8xw3fNnBzCZMmmhxUi/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
This will show an animated dotted line around the coloured parts of your header/image. This means these are the only parts selected.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP2CYxyskyPfYMRp68ue_TyGOIQ640LTzls2iofaYmRHSTmaaPkZ024-LLEm36otj61Vb6z99nPct_o8ctUZO9qpmHfZCDXrxp5gGNsxzcNmsSINu-_vlXsh9p-9dFzQY5lLqwVHR0e71G/s1600/Gimp+Program.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/AVvXsEhP2CYxyskyPfYMRp68ue_TyGOIQ640LTzls2iofaYmRHSTmaaPkZ024-LLEm36otj61Vb6z99nPct_o8ctUZO9qpmHfZCDXrxp5gGNsxzcNmsSINu-_vlXsh9p-9dFzQY5lLqwVHR0e71G/s1600/Gimp+Program.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
The next step is to again go back to the <span style="color: #d15086;"><b>'Layers - Brushes'</b></span> box <span style="background-color: yellow;">highlighted in yellow</span> and click the eye icon next to the copy layer <span style="background-color: cyan;">highlighted in blue</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcpDt-zqj6D7n3K8lPOj0cBrBFeigQTNCNDjyGe5v_MQfurEJJnS3ITk_44U1UkdWCWqdP0f1uu8IFKyEaj0zlw9c-xMHAhjWV68u0NQjWMjVgbMgUaUszAyKxCxUE9o-yay5nqUuUaN5Q/s1600/Gimp+Program.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/AVvXsEhcpDt-zqj6D7n3K8lPOj0cBrBFeigQTNCNDjyGe5v_MQfurEJJnS3ITk_44U1UkdWCWqdP0f1uu8IFKyEaj0zlw9c-xMHAhjWV68u0NQjWMjVgbMgUaUszAyKxCxUE9o-yay5nqUuUaN5Q/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
You will now be left with a screen like this.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3zlb3t8rDkVFVGq3EHhyphenhyphenlSH6sZ-idnjPpkb2bGkpTmiUMOKUo54s-MZLnYOdMJ9WQSK3OCzMBZk9C7ygymqJXa4uOSm94tPd7Iy61nS1DM0meDBTbVsaZkYJYPinmsb3cpUQHoBsr76Jg/s1600/Gimp+Program.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/AVvXsEg3zlb3t8rDkVFVGq3EHhyphenhyphenlSH6sZ-idnjPpkb2bGkpTmiUMOKUo54s-MZLnYOdMJ9WQSK3OCzMBZk9C7ygymqJXa4uOSm94tPd7Iy61nS1DM0meDBTbVsaZkYJYPinmsb3cpUQHoBsr76Jg/s1600/Gimp+Program.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Breathe, we're almost done. Back to the <span style="color: #d15086;"><b>'Layers - Brushes'</b></span> box <span style="background-color: yellow;">highlighted in yellow</span> click the eye icon (for the eye icon to appear) next to the new layer <i><u>(which I have named White)</u></i> <span style="background-color: cyan;">highlighted in blue</span>. You are also going to make sure you have clicked on the new layer <span style="background-color: lime;">highlighted in green</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHXVORGi3CQYU0cMNYplN1o5bGIhYGgQB7rsNF4DeDBI9470L4VOOhpXdUf5qfnXs1zfnuamsvV18DEFEqUUoacb0UyRS8FH4KfwbpiNdj5V_ce8x_Z-OW8NsYzIrwYU8rOOd_PvVyb3x/s1600/Gimp+Program.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/AVvXsEhWHXVORGi3CQYU0cMNYplN1o5bGIhYGgQB7rsNF4DeDBI9470L4VOOhpXdUf5qfnXs1zfnuamsvV18DEFEqUUoacb0UyRS8FH4KfwbpiNdj5V_ce8x_Z-OW8NsYzIrwYU8rOOd_PvVyb3x/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Your screen will now look like this.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmEm_OqqtcQaOKaZXs_BYIqwf4coIj2_Zx2IUXOGUb_YzESMA-YKvMU6lw_nNojs5QTQ89Vx2rzfAh3qJcfCpwkyE8rNEUbhAzhWxF8YO_I_Z_n6kuGerSNlR_F0cz9a6XeZK66ItXUl0y/s1600/Gimp+Program.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/AVvXsEjmEm_OqqtcQaOKaZXs_BYIqwf4coIj2_Zx2IUXOGUb_YzESMA-YKvMU6lw_nNojs5QTQ89Vx2rzfAh3qJcfCpwkyE8rNEUbhAzhWxF8YO_I_Z_n6kuGerSNlR_F0cz9a6XeZK66ItXUl0y/s1600/Gimp+Program.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Now you are going to invert the selection by pressing <b style="color: #d15086;">(ctrl + I)</b> <b><u>once</u></b>. Then press the<b style="color: #d15086;"> delete </b>button. Your screen should look like this.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxqZD2G8uUH3wO6pWVUh-GX_jZniKPi9B5Obg19KeJq-NmxyQ021oBWI33iOGgXM354MYZWjC3RuZD5zHNpe8jHQvLYck9_SZbaPXhB2N1NaZn90frV68_7Y1MLpStsFzmODOJZS598QJa/s1600/Gimp+Program.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/AVvXsEgxqZD2G8uUH3wO6pWVUh-GX_jZniKPi9B5Obg19KeJq-NmxyQ021oBWI33iOGgXM354MYZWjC3RuZD5zHNpe8jHQvLYck9_SZbaPXhB2N1NaZn90frV68_7Y1MLpStsFzmODOJZS598QJa/s1600/Gimp+Program.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
<u>FINAL LAST STEPS!</u> Well done everyone. Back to the <span style="color: #d15086;"><b>'Layers - Brushes'</b></span> box <span style="background-color: yellow;">highlighted in yellow</span> click the eye icon (for the eye icon to appear) next to the copy layer <span style="background-color: cyan;">highlighted in blue</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy6UL-ncHXCURG9zv7_u8-rR3hBj6zYRj1AycQebgw-s0dDkKSX3JazedT_lnAOsP9JnqQf1MkhIvtSy-SaMZi8Ea37V9QvhZzayydHNyY00i8iOJsCbaiAOgOVgUGbVO-FMzJIG3voCZE/s1600/Gimp+Program.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/AVvXsEgy6UL-ncHXCURG9zv7_u8-rR3hBj6zYRj1AycQebgw-s0dDkKSX3JazedT_lnAOsP9JnqQf1MkhIvtSy-SaMZi8Ea37V9QvhZzayydHNyY00i8iOJsCbaiAOgOVgUGbVO-FMzJIG3voCZE/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Your screen will now look like this.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUoi9MqzvOrukxruN_lPLgsaBNrIwjwD51AXvpTO2fph3YW-4j7QeWLubsOCGi6GKuLpC9MTnEEWEpcLX47cMdo2L41f34YeonwhxnCJ9VIwDl1Fg7ZUUDULopt84yvqZQ4JfjnP5oKzEH/s1600/Gimp+Program.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/AVvXsEhUoi9MqzvOrukxruN_lPLgsaBNrIwjwD51AXvpTO2fph3YW-4j7QeWLubsOCGi6GKuLpC9MTnEEWEpcLX47cMdo2L41f34YeonwhxnCJ9VIwDl1Fg7ZUUDULopt84yvqZQ4JfjnP5oKzEH/s1600/Gimp+Program.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Lastly, go to the <span style="color: #d15086;"><b>'Layers - Brushes'</b></span> box <span style="background-color: yellow;">highlighted in yellow</span> and <u>right-click</u> the copy layer <span style="background-color: cyan;">highlighted in blue</span><span style="background-color: white;"> </span>and click the <span style="color: #d15086;"><b>'Merge Down'</b></span> box <span style="background-color: lime;">highlighted in green</span>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtoihHk9X12EkSOdi7GcUTkexpUVCpP9NQSE18tBxkXMlJypD1-6jhXI8TUu78nTmsaFsj1NO4GeL4Q_bPUG65b2eGm_sT_xrpbNj2sj3JN-yg4POgDwCda3qj4aj1DafGOcy06SmNmzOj/s1600/Gimp+Program.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/AVvXsEjtoihHk9X12EkSOdi7GcUTkexpUVCpP9NQSE18tBxkXMlJypD1-6jhXI8TUu78nTmsaFsj1NO4GeL4Q_bPUG65b2eGm_sT_xrpbNj2sj3JN-yg4POgDwCda3qj4aj1DafGOcy06SmNmzOj/s1600/Gimp+Program.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Your screen will now look like this and you are finished. Don't forget to click <span style="color: #d15086;"><b>'File' - 'Export'</b></span> to save your header/image onto your computer for uploading into blogger. See <a href="http://allurebloggerdesign.blogspot.com.au/2013/08/how-to-make-custom-header.html">How To - Make a Custom Header</a> for details on uploading your header onto blogger.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhS5mF1Petf_YrDScw_GPUktEQB3M1TAUDWrKvnxOdvSk1mWoB8nNZQMF41t0oHV70fnAAShz83NW4NN0qyBrJMiZPninS268RLymOLQXx6-TtQGsB0Oi4mKg3D308eAGrPf4qXPYeFzzAk/s1600/Gimp+Program.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/AVvXsEhS5mF1Petf_YrDScw_GPUktEQB3M1TAUDWrKvnxOdvSk1mWoB8nNZQMF41t0oHV70fnAAShz83NW4NN0qyBrJMiZPninS268RLymOLQXx6-TtQGsB0Oi4mKg3D308eAGrPf4qXPYeFzzAk/s1600/Gimp+Program.png" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Clicking <b style="color: #d15086;">'Save' </b>or <b style="color: #d15086;">'Save As' </b>in Gimp won't save the header to your computer in a readable format. It will save the image as a <i>.xcf</i> file which allows it to be later altered in Gimp.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
As mentioned in my <a href="http://allurebloggerdesign.blogspot.com.au/2013/08/how-to-make-custom-header.html">How To - Make a Custom Header</a> post the colour of the white will now match up to the white of your blog background however when tilting your computer/laptop screen you <b style="color: #d15086;">will</b> be able to see the outline of the header/image as I have not yet been able to remove this.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
I hope this has been of some help to you.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center style="text-align: left;">
<br /></center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-60014827487891357342013-08-20T17:09:00.000+10:002013-08-23T14:35:01.604+10:00How To - Make a Custom Header<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinqV36GzhfiUo6MumIivfB7g1lm7C3ndusc4wnDMcCuGifxRkdZGhyphenhyphenjgMrAefLbXT24KqvILchmMXVf3OK6oTUxa-rAyMHUPexi5Py-CU-o5H0IF59UeWxJIqzDwXb920x8YttFHY0NV5_/s1600/How+To+-+Make+a+Custom+Header.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/AVvXsEinqV36GzhfiUo6MumIivfB7g1lm7C3ndusc4wnDMcCuGifxRkdZGhyphenhyphenjgMrAefLbXT24KqvILchmMXVf3OK6oTUxa-rAyMHUPexi5Py-CU-o5H0IF59UeWxJIqzDwXb920x8YttFHY0NV5_/s1600/How+To+-+Make+a+Custom+Header.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<a name='more'></a></center>
<center style="text-align: left;">
First impressions matter, and no matter how good your content may be the design and appearance of your blog is just as important. One of the first aspects people notice is your header, as after all it is<i> </i><span style="color: #d15086;"><b>usually</b></span> what is placed at the very top of your blog.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
I strongly recommend creating a custom header to use instead of the header and description that will appear in a plain font if written in blogger.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
First things first you will need a platform or program to create your header and I suggest using <a href="http://www.picmonkey.com/">Picmonkey</a> - a free and very easy to use photo editing website.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-VzlwK2J0oyWeZtx9p_2wa508IMPX22MMroo5K6HXPfviOlrKNZOeY2xYC2-LhhujV97mz_KWfpHvfGJBkO5or2WejzBzVn0AGwy-IVnmS1kTrM7lWafbtX_Fb_d6tArJUwoSYTW8qa_U/s1600/Picmonkey.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/AVvXsEj-VzlwK2J0oyWeZtx9p_2wa508IMPX22MMroo5K6HXPfviOlrKNZOeY2xYC2-LhhujV97mz_KWfpHvfGJBkO5or2WejzBzVn0AGwy-IVnmS1kTrM7lWafbtX_Fb_d6tArJUwoSYTW8qa_U/s1600/Picmonkey.png" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Once in Picmonkey you will click on <b style="color: #d15086;">'Create a collage' </b>which will bring you to a page that looks like this:</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRH9IlQpvYXCfrsUh7Rp_qbfbLp0lM1Up1DM2yoaBp1v2WXk15UEn-KnGBTmZD8fbvjrk_2S3AGz1L9OQISnF34wA1dIrLfyWe3wDztkXEHraF1jHx3gJSIe1_WBixR6YUqRDpz6-lylxW/s1600/Picmonkey+Collage.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/AVvXsEgRH9IlQpvYXCfrsUh7Rp_qbfbLp0lM1Up1DM2yoaBp1v2WXk15UEn-KnGBTmZD8fbvjrk_2S3AGz1L9OQISnF34wA1dIrLfyWe3wDztkXEHraF1jHx3gJSIe1_WBixR6YUqRDpz6-lylxW/s1600/Picmonkey+Collage.png" /></a></div>
<center style="text-align: left;">
</center>
<div class="separator" style="clear: both; text-align: center;">
</div>
<center style="text-align: left;">
From here you will be able to change the width and height of your header using the dimensions at the bottom of your screen, upload photos to use on your header using the <b>images tab</b>, choose from different layouts in the <b>layouts tab</b>, use swatches for backgrounds in the <b>swatches tab</b>, and change details of spacing between layouts in the<b> background tab</b>. </center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
I suggest having a play around with these different options and finding the ones that work for you. Below I have created a collage using one layout,keeping all backgrounds white and at dimensions of 950 x 250.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
I like to play it safe and use the width which is the same as the width of my blog.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKnuGVI1JqEQYfrTgT8HaqmDIMKwPicFCiaDFloGTaG2aw71ld3W1G9SffAphThE8YB7UoIwkNAk8yBrA20iblJFr_0CeAd3YdU7gFdumBnKaJQsPZOu5Ch3AIW_iDfJM6p5-plcWMTV-Z/s1600/Picmonkey+Collage.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/AVvXsEiKnuGVI1JqEQYfrTgT8HaqmDIMKwPicFCiaDFloGTaG2aw71ld3W1G9SffAphThE8YB7UoIwkNAk8yBrA20iblJFr_0CeAd3YdU7gFdumBnKaJQsPZOu5Ch3AIW_iDfJM6p5-plcWMTV-Z/s1600/Picmonkey+Collage.png" /></a></div>
<center style="text-align: left;">
</center>
<div class="separator" style="clear: both; text-align: center;">
</div>
<center style="text-align: left;">
Now it's time to begin designing your header and so you will click the <b style="color: #d15086;">'Edit' </b>button which will take you directly to the Picmonkey Editor.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmbSEkcST1_ZTWwWf9Hf064G1sfXcqLaDJm3vRMVOqsw2XZavZcmA-hNYCiU3uFSh_SomfJjhs3wafMJhzFYvCqjfNFlPYD-R8gkNFDaX1g7UCg4_3qcOHs6Z2bbYanE9eCQtLFte_9_QQ/s1600/Picmonkey+Collage.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/AVvXsEjmbSEkcST1_ZTWwWf9Hf064G1sfXcqLaDJm3vRMVOqsw2XZavZcmA-hNYCiU3uFSh_SomfJjhs3wafMJhzFYvCqjfNFlPYD-R8gkNFDaX1g7UCg4_3qcOHs6Z2bbYanE9eCQtLFte_9_QQ/s1600/Picmonkey+Collage.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Along the left side there are a number of tabs which allow you to do and create different things. Again, having a play around with these will allow you to discover what Picmonkey offers and what you would like to incorporate <b style="color: #d15086;">(in this case)</b> into your header.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-iowO79dDiWQRuadpdgqMq8RUDtKhqYC09Zq2v3ElChkgvNeqPwEm0HHwQFJXDwRE6UeAw0kO67MAcHkQp10Dt4KRxsrBgCDR1cicMeZFGRHoCBE7bulNYGUwhYRA-7Kb0hCFrfGO7h23/s1600/Picmonkey+Collage.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/AVvXsEi-iowO79dDiWQRuadpdgqMq8RUDtKhqYC09Zq2v3ElChkgvNeqPwEm0HHwQFJXDwRE6UeAw0kO67MAcHkQp10Dt4KRxsrBgCDR1cicMeZFGRHoCBE7bulNYGUwhYRA-7Kb0hCFrfGO7h23/s1600/Picmonkey+Collage.png" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
I have clicked on the <b style="color: #d15086;">'P' </b>tab which is where you can add text to your collage. As you can see I have chosen the <b style="color: #d15086;">'Sue Ellen Francisco' </b>font to write part of my header. A text dialogue box will appear where you can adjust the colour, colour intensity, size and other smaller details of your written text.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC1SM0XiOCSqRG5bImNDSDTT8Q353aKFF1zynw6MTmRCWpiwNVsOqIgYqgxF6-MszOgz-opPRWaQB2o9RzvZLfTO-pfPhCDt0e9LRvwqH0x51gv3O0rVN4iCzOvU6LAvHmrEgUJ729_j61/s1600/Picmonkey+Collage.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/AVvXsEjC1SM0XiOCSqRG5bImNDSDTT8Q353aKFF1zynw6MTmRCWpiwNVsOqIgYqgxF6-MszOgz-opPRWaQB2o9RzvZLfTO-pfPhCDt0e9LRvwqH0x51gv3O0rVN4iCzOvU6LAvHmrEgUJ729_j61/s1600/Picmonkey+Collage.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
Using the same font I have then written the next part of my header with the only difference being in the colour black #000000 and in a smaller size. I suggest your header be the name of your blog so to not cause any confusion for your readers.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxDch6tpj_ME0D5AAA6jPkrmxAVaZZ0deIJ4ALnCMs7eNeq51ZVh2Ll19Yp5_F6lTZsyD2zfmE2Rh5ZEaGc8W84odTfNX5ei1P6QTxeGEzH206NqoyXx4JsNAyPFD3dQNE5W6YmOQRo1ir/s1600/Picmonkey+Collage.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/AVvXsEjxDch6tpj_ME0D5AAA6jPkrmxAVaZZ0deIJ4ALnCMs7eNeq51ZVh2Ll19Yp5_F6lTZsyD2zfmE2Rh5ZEaGc8W84odTfNX5ei1P6QTxeGEzH206NqoyXx4JsNAyPFD3dQNE5W6YmOQRo1ir/s1600/Picmonkey+Collage.png" /></a></div>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
<span style="text-align: left;"><br /></span></center>
<center>
<span style="text-align: left;"><br /></span></center>
<center>
<span style="text-align: left;"><br /></span></center>
<center>
<span style="text-align: left;"><br /></span></center>
<center>
<span style="text-align: left;"><br /></span></center>
<center>
<span style="text-align: left;"><br /></span></center>
<center>
<span style="text-align: left;"><br /></span></center>
<center>
<span style="text-align: left;"><br /></span></center>
<center style="text-align: left;">
<span style="text-align: left;">I have then clicked on the </span><b style="color: #d15086; text-align: left;">'Overlays' </b><span style="text-align: left;">tab which includes numerous shapes and objects to add to your collage. Specifically, under </span><b style="color: #d15086;">'Geometric' </b>I used a rectangle and triangle and under <b style="color: #d15086;">'Hearts' </b>I used a heart. Employing these shapes I created an almost key-like design and changed the colour to match <b style="color: #d15086;">'ALLURE' </b>and sent the objects behind the <b style="color: #d15086;">'BLOGGER DESIGN' </b>text by right clicking and choosing <b style="color: #d15086;">'send to back'</b>. I then tweaked the header by making my objects a little larger and aligning them to my liking. </center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
At this stage, you will save your header by clicking the <b style="color: #d15086;">'Save' </b>button on the top of the screen. Once saved to your computer you will need to upload the header into blogger.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMkwsqfnU2OHNAsDfO7Df6AK2U1FPZTy__FBfw1j-Y9Fdt3R3u2klXxR9MQDA83pdzIwWYHWvCXW1EAgyRCOKuPGNlfRbtzVp6EmPeJ2hS-b6Vb4kKVpICJOhIAippISvsupbqkEu0GcLu/s1600/Blogger+Layout+Adding+a+Header.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/AVvXsEgMkwsqfnU2OHNAsDfO7Df6AK2U1FPZTy__FBfw1j-Y9Fdt3R3u2klXxR9MQDA83pdzIwWYHWvCXW1EAgyRCOKuPGNlfRbtzVp6EmPeJ2hS-b6Vb4kKVpICJOhIAippISvsupbqkEu0GcLu/s1600/Blogger+Layout+Adding+a+Header.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
You'll need to click on <b style="color: #d15086;">'Layout' </b>in the left side tabs and then click on <b style="color: #d15086;">'Edit' </b>on your header module.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42niys9_HDTaUAq-3oiVFi68gKyN3iSyrPENbZnFsaTIoiXw-LvKD8il7gHGFH1br4gJ1LMMRiq4rasglUbY8COwDW11crLdY_0Qhf29QyU9n_KucwS0sxdoK8Lf8avnVn_gkvLscui8i/s1600/Blogger+Configure+Header.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi42niys9_HDTaUAq-3oiVFi68gKyN3iSyrPENbZnFsaTIoiXw-LvKD8il7gHGFH1br4gJ1LMMRiq4rasglUbY8COwDW11crLdY_0Qhf29QyU9n_KucwS0sxdoK8Lf8avnVn_gkvLscui8i/s1600/Blogger+Configure+Header.jpg" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<center style="text-align: left;">
This will open a window shown above where you will click <b style="color: #d15086;">'Choose File' </b>and choose the image you saved from Picmonkey. I would suggest then opting for the <b style="color: #d15086;">'Instead of title and description' </b>option as your placement, otherwise the plain font which blogger automatically produces for your header and description might still be noticeable.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
<b style="color: #d15086;"><u>Important:</u> </b>Make sure the <b style="color: #d15086;">'Shrink to fit' </b>box is unclicked as when I have tried shrinking images in the past they can at times become quite distorted. Press <b style="color: #d15086;">'Save'</b>.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
The Configure Header window will close and you will have the chance to preview your custom header by pressing the <b style="color: #d15086;">'Preview'</b> button in the top right of the <b style="color: #d15086;">'Layout'</b> dashboard. If you are happy with your creation don't forgot to press <b style="color: #d15086;">'Save arrangement'</b>.</center>
<center style="text-align: left;">
<br /></center>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlfBOdfl3SqFD70incpKd6Hm7rrqNCVAVCC5bIaBNpldoXhRWC6vBXS_LyooFNOzGglP1a1AK4V4xOK_zu7BSlysGqxzSLxV5FAc_kMN6shzlfPe1Eh4Om34SnVD4ES5JkjC4oIuFqQFMn/s1600/Blogger+Configure+Header.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/AVvXsEhlfBOdfl3SqFD70incpKd6Hm7rrqNCVAVCC5bIaBNpldoXhRWC6vBXS_LyooFNOzGglP1a1AK4V4xOK_zu7BSlysGqxzSLxV5FAc_kMN6shzlfPe1Eh4Om34SnVD4ES5JkjC4oIuFqQFMn/s1600/Blogger+Configure+Header.jpg" /></a></div>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center>
</center>
<center style="text-align: left;">
You will now see your customised header in action! </center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
There are certainly many additional programs and platforms which you can make your header on, however I find Picmonkey to be the most simplest of them all and suits my needs just fine.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
The <b style="color: #d15086;">only other thing </b>that you may be wondering is how to remove the white background on your header which will not match the white background of your blog. For some reason even if both colours are a complete #ffffff match you will see a difference. If your header background is not white you don't have a problem, however if it is and you would like to make it transparent I will be uploading a separate tutorial for this - which will require <a href="http://www.gimp.org/">Gimp</a> (a free photo editing program you can download from the internet).</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
I have done this on my header and as you can see the colours now match up. If you tilt your computer/laptop screen you <b style="color: #d15086;">will</b> be able to see the outline of the rectangle header however this is as best as I can achieve.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
I hope this provided you with some help in creating a header for your blog. Stay tuned for a step by step tutorial on how to remove that pesky white background.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center style="text-align: left;">
<br /></center>
<center>
<img src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0tag:blogger.com,1999:blog-3063245079510059109.post-78093829672133683312013-08-19T15:02:00.000+10:002013-08-23T14:32:47.838+10:00Welcome to Allure Blogger Design<a href="http://www.bloglovin.com/blog/10366129/?claim=h3bu9serddv">Follow my blog with Bloglovin</a>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRSOlhzsOdVC9kWKbOrxX3kWGF9gyoCMDcT0HDxBL9GMc1FfaX49boY8LjH5ezVVEQnnvJYfjepm9UwSJ5l5oPkrhzH52x6n-ERJaWojZYRaomXNMHa9wzmHZcUeZvYn1cS-Q1ZXsQAJqa/s1600/Welcome+to+Allure+Blogger+Design.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRSOlhzsOdVC9kWKbOrxX3kWGF9gyoCMDcT0HDxBL9GMc1FfaX49boY8LjH5ezVVEQnnvJYfjepm9UwSJ5l5oPkrhzH52x6n-ERJaWojZYRaomXNMHa9wzmHZcUeZvYn1cS-Q1ZXsQAJqa/s1600/Welcome+to+Allure+Blogger+Design.jpg" /></a></div>
<a name='more'></a><center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Hi everyone, you might be aware that I have a new beauty, fashion and lifestyle blog <a href="http://allurebymaddison.blogspot.com.au/">Allure by Maddison</a>, and as much as that is definitely where my passion lies I've been thinking for some time to create a separate blog to help with<b> <span style="color: #d15086;">prettying up</span></b> your blogger designs.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
I'm no web developer, code-genius or graphic designer however there are so many tips I've learnt along the way to spruce up my blog with a little html, that I feel obliged to share them with you all. Starting up a blog can be daunting and I remember the word <u>html</u> used to make me cringe with fear. And so I hope to bring you tutorials with easy step by step detail to help you install that latest widget, remove those pesky borders from your images or to simply add a rollover effect to your social media icons.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
I have a huge list of ideas and I aim to regularly post as many of those ideas as I can. If you ever have a specific question or need a hand to complete something please don't hesitate to ask me. I'm not promising you I will have the answers but I have read through enough endless tutorials myself that if I don't happen to know I can direct you to a helpful website.</center>
<center style="text-align: left;">
<br /></center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
Happy blogging!</center>
<center style="text-align: left;">
xox</center>
<center style="text-align: left;">
</center>
<center style="text-align: left;">
</center>
<center>
</center>
<center>
<img class="nopin" src="http://i1303.photobucket.com/albums/ag157/maddiskotinis/MaddisonSignature_zps01fba0e8.png" /></center>
MaddisonJanehttp://www.blogger.com/profile/09604322825865016871noreply@blogger.com0