To add Custom Widget that are not in the default Blogger gadget list, we can add it manually by the help of HTML / Javascript Gadget, and this is How.
- Locate the widget code we wish to add to our blog and copy the widget's code to the clipboard.
- Sign into Blogger.
- Go to the panel of the blog and click on on the Layout tab.
- Click on the Add Gadget link at the top of our sidebar (menu). This can bring up an popup New Add Gadget page.
- Locate the entry for HTML/Javascript and click on on the add to blog button. This can bring up a popup page allowing us to add some HTML or Javascript code to our sidebar.
- Type in whatever title we wish to give the block Title that may contain the widget. Also we can leave the title blank.
- Paste the widget's code into the text box labeled content.
- Click the Save Changes button.
- By default, Blogger puts the new element at the top of the sidebar. If you hover the mouse over the new element, the pointer can change to four arrows pointing up down left and right. While the mouse pointer has those arrows, we can hold down our mouse right button to drag the element up or down within the other gadget in the list, and then release the button to drop it at position that suited us.
- Click on the view blog button next to your tabs to go inspect your newly-added widget.
As example demonstration, we will to add custom blog author like picture below, try to copy and paste this code below to that content box.
CSS STYLE SHEET PART
<style>
.myProfile .isIndividual{text-align:center;margin-top:0}.myProfile{margin:0;line-height:177%;width:100%}.myProfile .myProfile-img{border-radius:50%;float:none}.myProfile .myProfile-link{color:#757575;font-size:15px;font-weight:700;margin-bottom:1em;opacity:.87;overflow:hidden}.myProfile .myProfile-link.visit-profile{border-style:solid;border-width:1px;border-radius:12px;cursor:pointer;font-size:15px;font-weight:400;padding:5px 20px;display:inline-block;line-height:normal}.myProfile .myProfile-link{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.myProfile .isIndividual .myProfile-link{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
</style>
HTML PART
<div class="myProfile">
<div class="blak-no-change">
<div class="wrapper solo">
<div class="isIndividual">
<a href="//plus.google.com/+BlakRush" rel="nofollow">
<img alt="My photo" class="myProfile-img" height="48" width="48" src="//lh3.googleusercontent.com/-Vbb2RDIujDA/AAAAAAAAAAI/AAAAAAAACH4/gwqnysBNx8k/s120-c-pf/photo.jpg"/>
</a>
<div class="myProfile-info">
<dl class="myProfile-datablock">
<dt class="myProfile-data">
<a class="myProfile-link g-profile" href="//plus.google.com/+BlakRush" rel="author nofollow">Blak Rush</a>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/u/0/+BlakRush" data-rel="author"/>
</dt>
</dl>
</div>
<a class="myProfile-link visit-profile" href="//plus.google.com/+BlakRush" rel="author">Visit profile</a>
</div>
</div>
</div>
</div>
The first code is part of CSS to control design of our HTML part. We can insert this two part code directly into HTML widget content input box or separate by placing only CSS part inside <b:skin> tag.
In this demonstration, we make custom made Google Plus profile widget and Google Plus Follow button in it, you can go to Google+ Follow Button Reference to get more detail what it is. As we see in the HTML part has 'Orange Color' your job is to replace that with yours.
And the href tag is Hypertext Reference that tell the browser where to go. If we dont have Google Plus Account, we can replace it with other profile address, your Facebook or Instagram address, etc for example.
Blogger , Tips and Tricks
