Advanced HTML

Monday, 18 January 2016


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='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + 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='&quot;https://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + 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(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+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='&quot;https:http://plus.google.com/share?u=&quot; + data:post.url + &quot;&amp;t=&quot; + 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 == &quot;&quot;) {this.value = &quot;Search&quot;;}" onfocus="if (this.value == &quot;Search&quot;) {this.value = &quot;&quot;;}" 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?

Latest Instagrams

© heythererobyn. Design by FCD.