The last one
of these posts (here) went down super well so I thought I would write up another one
while I am revamping my blog layout and everything is fresh in my mind. This is
probably going to be another extremely long, boring post for anyone not
interested in HTML or redoing their blog layout by themselves. Once again this
is based on the Blogger HTML and may not work on other platforms.
EDITING POST SHARE LINKS
Under your
post there are little icons which can be clicked on to share your post across
social medias, these are for visitors to use and share the post on their media
pages. On Blogger these are so ugly when you first join, I am sorry Blogger,
but they really, really are.
First things
first is click on the Layout tab of your dashboard, go to Blog post and click
the edit button in the bottom right-hand corner, then unclick ‘Show sharebuttons’. Then click on ‘Template’ and ‘Edit HTML’.
Once you are
in editing the HTML use ctrl F to find ‘<div class='post-footer-line
post-footer-line-1'>’ there are two of these codes within your HTML, it is
the second one you find, the first one should have ‘<span
class='post-comment-link'>’ directly under it, it is NOT this one.
After you
find the correct one you can return onto the next line below that code and put
in this:
<a
class='facebook' expr:href='"http://www.facebook.com/sharer.php?u="
+ data:post.url + "&t=" + data:post.title' href='https://www.blogger.com/null'
rel='nofollow' target='_blank' title='Share This On Facebook'><img
border='0' height='15'
src=’ICON'/></a>
Change the red text to the link of the icon you would like to
use, the green text
changes the height, but do not change the blue text.
To do this
follow the tips from my last post and upload the photos onto a blog draft post,
switch to HTML of the post and copy the URL of the photo, then paste it in
place of the red text.
TWITTER:
<a
class='twitter' expr:href='"https://twitter.com/share?url="
+ data:post.url + "&title=" + data:post.title'
href='https://www.blogger.com/null' rel='nofollow' target='_blank' title='Tweet
This'><img border='0' height='15' src=’ICON'/></a>
PINTEREST:
<a
class='pint-er-est' href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'
rel='nofollow' target='blank' title='Pin This'><img border='0' height='15' src='ICON'/></a>
GOOGLE+:
<a
class='Google+' expr:href='"https:http://plus.google.com/share?u="
+ data:post.url + "&t=" + data:post.title'
href='https://www.blogger.com/null' rel='nofollow' target='_blank' title='Share
This on Google+'><img border='0' height='15' src='ICON'/></a>
CHANGING ON HOVER
Like I said
in my previous post I use images I have created on Photoshop as my buttons in
categories and so on, but of course having the colour of text change on hover
seems impossible when your button is actually a photo. It is not, to do this create
two buttons one in the normal colour (see here) and one in the hover colour
(see here) and use the coding below to have the button change from image one,
to image two when a mouse hovers over it.
<a
href="LINK TO WHRE THE BUTTON TAKES YOU"
imageanchor="1" style="margin-top: 10px;
text-align: left;"><img
border="0" src="URL FOR BUTTON 1" onmouseover="this.src='URL FOR BUTTON 2/HOVER"
onmouseout="URL FOR BUTTON 1"/></a>
Change the red text to the URL of where you want the button to
take you, for example my beauty button’s URL is ‘http://www.heythererobyn.com/search/label/beauty’.
Change the blue text to the URL of the
button you want visable at all times (remember you do this twice, before and
after hover URL). Change the green
text to the URL for the button you want visible upon hover.
You can also
change the purple to change the distance
between the button and what is above it and the pink
text can be changed to align the button differently.
ADDING A SIMPLE SEARCH BAR
I really
want to change my search bar and make it a little more creative, but at this
present moment it’s pretty simplistic. To do this I created a HTML widget in
layout and put this code inside it:
<style>
#search {
border: 1px solid #ffbee1;
background: white url(http://4.bp.blogspot.com/-gvowb-6emhw/VeH2WTr1j8I/AAAAAAAABrM/dPu5C3XK3Yg/s1600/search3.jpg)
98% 50% no-repeat;
text-align: left;
padding: 8px 24px 6px 6px;
width: 75%;
height: 18px; mouse:pointer:
}
#search #s {
background: none;
color: #BDBDBD;
font-family: verdana;
font-size: 11px;
border: 0;
width: 100%;
padding: 0;
margin: 0;
outline: none;
}
</style>
<div id="search"
title="Type and hit enter"> <form action="/search"
id="searchform" method="get"> <input id="s"
name="q" onblur="if (this.value == "")
{this.value = "Search";}" onfocus="if (this.value
== "Search") {this.value = "";}"
type="text" value="Search" /> </form>
</div>
Change the pink text to a colour code which you like, these
are the same colours used in photoshop, change the red
text to a photo which you would like to use or take it away if you’d rather have
none. I have also left the link to the icon used in mine because you can save
it and use photoshop to change the colour of it if you wish. The blue text is the colour of the text in the search
bar, the purple is the font and the green is the font-size.
I also want
to point out that I altered some of the coding, but most of it is actually from
a tutorial online, which I can’t remember the link to due to having done it
months ago, so credit to the original creator.
This post
definitely wasn’t as long as my previous post, but I hope it was helpful for
anyone doing some blog editing and revamping. I hope to continue doing HTML and
blog editing posts especially as I learn more and more on the subject myself.
Thank you for reading,
I hope this post helped!
Are you doing a January restyle/revamp?
Social Icons