Ohayo Tricks: CSS and HTMLTricks

<div align="justify" style="background-color: white; font-size: 16px;"><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Rak3S2nDX2xsQHpQeR3nEX-TCFB7kAlJUAd_uXRHGRZcDMOlR6tw8kO_PmMLLzb7pEJl1aSfgl2-cdTZJblyOqNrcynYFp2NFYDWS0e1G_LZ7tLejVY52VscwfV_cgFyH1GyYIcIUWM/s1600/Follower-Counters%255B3%255D.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="264" data-original-width="279" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Rak3S2nDX2xsQHpQeR3nEX-TCFB7kAlJUAd_uXRHGRZcDMOlR6tw8kO_PmMLLzb7pEJl1aSfgl2-cdTZJblyOqNrcynYFp2NFYDWS0e1G_LZ7tLejVY52VscwfV_cgFyH1GyYIcIUWM/s1600/Follower-Counters%255B3%255D.gif" /></a></div> You have seen many mind blowing widgets on <a href="http://www.wordpress.org/" rel="noopener nofollow" style="outline: none; text-decoration-line: none;" target="">Wordpress</a> blogs but its now time to make <a href="https://www.blogger.com/" style="outline: none; text-decoration-line: none;" target="_blank">Blogger</a> a better place! Presenting to you just another beautiful and yet useful widget that displays the current number of your blog subscribers, <a href="https://www.twitter.com/" rel="noopener nofollow" style="outline: none; text-decoration-line: none;" target="">Twitter</a> and <a href="https://www.facebook.com/" rel="noopener nofollow" style="outline: none; text-decoration-line: none;" target="">Facebook</a> followers. This widget is based solely on pure CSS and HTML with no JavaScript involved therefore you just need to update the counts manually. At present I am learning programming too so as soon as I develop some good command in programming, I will automate all TZPH widgets but at present bear with me as a designer only :p</div><div style="background-color: white; color: #555555; font-size: 16px;"> </div> Take a look on how the widget will look like on a blog with narrow sidebar (The screenshot above is taken on a blog with wide sidebar) <div style="text-align: center;"><a class="button medium blue" href="https://cnhv.co/1ngdk">Follower Counter</a></div><div style="text-align: center;"> </div><div style="background-color: white; border-bottom: 1px solid rgb(40, 151, 40); font-size: 17.6px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal; margin-bottom: 10px; padding: 3px;">Follow the Steps Below To Add The Follower Counter To Your Blogger Blogs</div> <ol style="background-color: white; font-family: helvetica, arial; font-size: 16px;"><li style="font-size: 15px !important; line-height: 1.5em; margin: 10px 0px;">Go To Blogger > Layout</li><li style="color: #555555; font-size: 15px !important; line-height: 1.5em; margin: 10px 0px;">Choose Add a Gadget or Add a Page element</li><li style="color: #555555; font-size: 15px !important; line-height: 1.5em; margin: 10px 0px;">Select HTML/JavaScript widget</li><li style="color: #555555; font-size: 15px !important; line-height: 1.5em; margin: 10px 0px;">Paste the code below inside it,</li></ol><div> </div><div> <blockquote><style>        .rss-tzph {            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZLxrBXW5pCPVuglladZqJTmI9bEu1xaYk9XaxX18r6NWRGq5wqbPz41VmOdzLv23hRFFcqh-G3hnE1GEWTuMYJDoAqhII5PVC90V7UdqdWRQowGcYlmT0ieAoq81hJHtlL-NOrzXGNMc/s800/RSS1.png) no-repeat;            height: 64px;            padding: 0px 20px 0px 80px;            margin-top: 20px;        }       .twitter-tzph {            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD8xyfTV4p8ZW16vi2fm65Hd4ekaoEJT-INyMvgZHFlbnoEDyqUYLeUqT7beYx9naml6vkfVwcXW7jS1X92z-XrJJGKgkYtQH6_9fXqWrvGls1Wo0j2Hj_-_Ic04-u-L7S5ofh580D_kg/s800/TWITTER1.png) no-repeat;            height: 64px;            padding: 0px 20px 0px 80px;            margin-top: 20px;        }       .facebook-tzph {            background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWtfTkLZSTHd1kddrfl-A5kXcOhCEq7L1O5DsdA2Mm9-Tdh-4eiCB8w6Th_WYykpn4eJTrsIqgndit08Cc_UcPT1eAi3esfb38Qp1PN5f5jc91sZVBx2PT_Y7Y6f8f8zYeSyWvAEE0QmU/s800/FACEBOOK1.png) no-repeat;            height: 64px;            padding: 0px 20px 0px 80px;            margin-top: 20px;        }       .follower-rss, .follower-twitter, .follower-facebook {            font-family: Georgia,  sans-serif, Times;            font-size: 1.1em;                font-style:italic;                color:#289728;        }       .follower-rss span {            font-size: 1.9em;            font-weight: bold;                font-style:italic;                color:#FFB93C;    }       .follower-twitter span {            font-size: 1.9em;            font-weight: bold;                font-style:italic;                color:#6DB6E6;    }       .follower-facebook span {            font-size: 1.9em;            font-weight: bold;                font-style:italic;                color:#3889BA;    }       </style>       <div class="rss-tzph">        <div class="follower-rss"> 515 loyal readers        </div>        <a href="ADD-RSS-FEED-URL-HERE" rel="nofollow">RSS feed</a>        | <a href="ADD-RSS-EMAIL-FEED-URL-HERE" target="_blank" rel="nofollow">E-mail</a>        </div>       <div class="twitter-tzph"><div class="follower-twitter">1058 followers</div>                            <a href="ADD-YOUR-TWITTER-URL-HERE" target="_blank" rel="nofollow" title="I definitely follow you back">Follow us on Twitter!</a>        </div>                              <div class="facebook-tzph">                        <div class="follower-facebook">260 followers                            </div>                            <a href="ADD-YOUR-FACEBOOK-URL-HERE" target="_blank" rel="nofollow">Join us on Facebook!</a>        </div></blockquote><div align="justify" style="background-color: white; font-size: 16px;">NOTE:- Make sure to replace the bolded text with the required details (links of your Feedburner, twitter and facebook accounts) and replace the bolded numbers with your current follower counts. For example replace 515  with your current number of Subscribers, replace  1058 with the number of your twitter followers and replace 260 with the number of your facebook followers</div><div style="background-color: white; font-size: 16px;">     5.    Save and you are done! Now view your blog to see a stunning widget hanging on your sidebar :D</div><div style="background-color: white; color: #555555; font-size: 16px;"></div><h4 style="background-color: white; border-bottom: 1px solid rgb(40, 151, 40); font-size: 17.6px; font-stretch: normal; font-variant-east-asian: normal; font-variant-numeric: normal; line-height: normal; margin-bottom: 10px; padding: 3px;">Customization:</h4>I hope it was not difficult to add :). You can replace the images used in this widget with the image links of your choice. </div>

CSS and HTMLTricks Social Media Widgets Show Facebook and Twitter Followers, Follower Counts For RSS on Blogger

You have seen many mind blowing widgets on Wordpress blogs but its now time to make Blogger a better place! Presenting to you just anoth...

Ohayo Tricks

Show Facebook and Twitter Followers, Follower Counts For RSS on Blogger

Populars

Featured Post

[Tutorial] - Special Force Thailand Playtime Event

Blog Archive