Skip to main content

Featured

My Diary For 2023

Every year I write a blog post about which diary system or set up I am going to use for the following twelve months. In recent years, I have moved away from a Filofax (I trialled something earlier this year - more of that in a minute) and fallen in love with the Hobonichi printed diaries. For the last two years I have used a Hobonichi Weeks as my personal planner and I won't be deviating from that this year. I have tried a Hobonichi Techo A6 a couple of times but have never managed to feel comfortable with it size-wise.  I have always lusted after the Hobonichi Cousin A5 as a main work planner so, this year, I have bitten the bullet at launch time and invested in my very first one. Hobonichi Weeks The Hobonichi Weeks is a slim diary with a yearly, monthly and weekly layout. The main section is a "week to view with notes" and there are an additional 70 note pages at the back. This year (2022) I used the "Mega" version which comes with almost three times as m

Sharing is Sexy - Snazzy Social Buttons for Blogger

These "sharing is sexy" social media buttons are great and allow your readers to share your blog posts with their social media network.
They are traditionally a Wordpress plugin but after googling "sharing is sexy" I found a couple of tutorials which I have managed to break down into plain English for HTML numpties like myself.  I have also experimented a little a put together this HTML tutorial for you so that you can install these buttons too.  These instructions work perfectly on a Blogger/Blogspot blog.  If installing them on another platform or website then you will  have to insert them directly into the HTML section of your template.

First of all you need to be aware that I had to download two.png images.  Please feel free to use these two images for your buttons as I will not be deleting or moving the images.  Otherwise, you can download the two images from here and upload them on your own online photo storage space.

So, onto the instructions-for-muppets.  Please take a couple of minutes to read through them first to make sure you understand them.

Open your Blogger dashboard and click the "Design" tab and choose "Edit HTML"
Tick the "Expand Widget Templates" box and then click on the "Download Full Template" link.  Your existing template should auto-download to the "Downloads" section of your computer - or opt to download the file to your desktop.
This is important as if anything goes wrong whilst changing your HTML you don't need to panic.  You just use the "upload a template from your hard drive" option and reload your original template.


Now we are ready to start with the really technical stuff.

Find (CTRL + F) this code
]]></b:skin>

hit Enter or Return and below the ]]></b:skin code enter this CSS code:

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://img.photobucket.com/albums/v702/Tallulah1972/BLOG%20STUFF/sharingsexy.png') no-repeat left bottom;
position:relative;
width:540px;
}
div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://img.photobucket.com/albums/v702/Tallulah1972/BLOG%20STUFF/sharingsexy.png') no-repeat right bottom;
position:absolute;
right:-17px;
}
div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}
div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}
div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}
.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img.photobucket.com/albums/v702/Tallulah1972/BLOG%20STUFF/Sexysprite.png') no-repeat !important;
}
.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}
</style>

If you have downloaded the image pack and uploaded it to your own online photo storage site earlier, the "sharingsexy.png" image code (direct link) will replace the red highlighted link and the "sexysprite.png" image code (direct link) will replace the blue highlighted link.


Next we have to add some more code - this time it is HTML so please find (CTRL + F) the following code:
<data:post.body/>

hit Enter or Return and below the <data:post.body/> code enter this HTML code:
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/></div>



Where the green text is you will need to enter YOUR OWN Feedburner link.


Finally click SAVE TEMPLATE




Et Voila!  You now have "Sharing is Sexy" social buttons.  Enjoy!


* * *


Please leave any queries, praise or feedback in the section below.  Oh, and don't forget to use the social buttons to spread the word about this blog post.  I installed the "Sharing is Sexy" button rack and created this blog post by using a number of links found on the "Sharing is Sexy" google search page.




Related links:
A Quick HTML Lesson
A Quick HTML Lesson - Part 2