Uncategorized
Mashable Like Templates And Widgets

16 January, 2012
Being a Big fan of Mashable.com for their fantastic work,I have collected some great alternatives of their look-alike design available around the web.This post consist of
Mashable Subscribe Box
Mashable Bottom Page Slide
Mashable Template
Mashable Share buttons
1.Mashable Subscribe Box
Create a Mashable look alike subscribe widget for Blogger and WordPress
A still from Mashable
For WordPress : Easy Mashable Social Bar Plugin
For Blogger :
Goto Design
Add Widget
HTML/Javascript widget
Copy Paste the entire code below
Make changes to the RED FONT shown in code
P.S The Code is very long.But it wont affect your page loading time.Believe me it looks awesome.



 
      http://facebook.com/FACEBOOK_USERNAME</span><span style="color: #222222;">&amp;send=false&amp;layout=standard&amp; width=200px&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;<br />font&amp;height=100px&amp;appId=234513819928295" scrolling="no" frameborder="0" style="border:none; overflow:hidden; "></span>
  Recommend us on Google!
  TWITTER_USERNAME</span><span style="color: #222222;">&amp;show_count=&amp;<br />show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"> </span></span></span></pre></div><div id="email-news-subscribe">  </p>
<div class="email-box"></p> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=</span><span style="color: red;">FEEDBURNER_URL</span><span style="color: #222222;">&#8216;, &#8216;popupwindow&#8217;, &#8216;scrollbars=yes,width=550,height=520&#8217;);return true&#8221;> <br /> <input class="email" type="text" style="width: 150px; font-size: 12px;" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if(this.value==&#39;&#39;)this.value=this.defaultValue;" /> <br /> <input type="hidden" value="</span/></span><span style="color: red; font-family: Georgia,'Times New Roman', serif; font-size: 14px; line-height: 22px; white-space: pre-wrap;">FEEDBURNER_URL</span><span style="color: #222222; font-family: Georgia,'Times New Roman', serif; font-size: 14px; line-height: 22px; white-space: pre-wrap;">&#8221; name=&#8221;uri&#8221; /> </span><br /><span style="font-family: Georgia,'Times New Roman', serif;"><span style="font-size: 14px; line-height: 22px; white-space: pre-wrap;"><span style="color: #222222;"> <input type="hidden" name="loc" value="en_US" /> <br /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> <br /> </span></span></span></form> <p></div></p></div><div id="other-social-bar">  </p> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/tntbystc" target="_blank">RSS Feed</a> </li> <li class="my-linkedin"> <a rel="nofollow" title="linkedin" rel="author" href="</span target="_blank"><span style="color: red;">LINKEDIN PROFILE LINK</span><span style="color: #222222;">&#8221; target=&#8221;_blank&#8221;>linkedin</span></a> </li> <li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href="</span target="_blank"><span style="color: red;">http://plus.google.com/44448117245314564536</span><span style="color: #222222;">&#8221; target=&#8221;_blank&#8221;>Google Plus</span></a> </li> </ul></div><div id="mashable" style="background: #EBEBEB;border: 1px solid #CCC;border-top: 1px solid white;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family:"arial","helvetica",sans-serif;"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.amazingthings.in" target="_blank">Amazingthings »</a></span></div></div><p></div><p> <br /><span style="font-size: large;"><b>2.Mashable Bottom Page Slide</b></span><br /><span style="font-size: large;">Curious to have a Mashable Like slide box??Check out below 🙂</span><br /><span style="font-size: large;">Check out the <b><a href="http://demo.erikvandeven.com/bottom-page-jquery-slide-box/" target="_blank" rel="nofollow"><span></span>DEMO<span></span></a> </b>and <b><a href="http://demo.erikvandeven.com/bottom-page-jquery-slide-box/download.zip" target="_blank" rel="nofollow">DOWNLOAD</a></b></span><br /><span style="font-size: large;">Full Article : <a href="http://erikvandeven.com/jquery/bottom-page-jquery-slide-box/" target="_blank" rel="nofollow">Bottom Page Jquery Slider</a></span></p>
<table align="center" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: center;">
<tbody>
<tr>
<td style="text-align: center;"><img src="https://www.amazingthings.in/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://1.bp.blogspot.com/-20U4kFdsXxM/TxQrSV45UWI/AAAAAAAAB7U/r4pOXkzJg8o/s1600/mashableslide.jpg" decoding="async" border="0" style="margin-left: auto; margin-right: auto;"><noscript><img alt="blank" onload="Wpfcll.r(this,true);" src="https://www.amazingthings.in/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif" decoding="async" border="0" data-wpfc-original-src="http://1.bp.blogspot.com/-20U4kFdsXxM/TxQrSV45UWI/AAAAAAAAB7U/r4pOXkzJg8o/s1600/mashableslide.jpg" style="margin-left: auto; margin-right: auto;"/></noscript></td>
</tr>
<tr>
<td style="text-align: center;">A Still from erikvandeven</td>
</tr>
</tbody>
</table>
<p><span style="font-size: large;">Original Article : <a href="http://tympanus.net/codrops/2010/04/13/end-of-page-slide-out-box/" target="_blank" rel="nofollow">End of page slide out jquery CODROPS</a></span><br /><span style="font-size: large;"><br /></span><br /><span style="font-size: large;">Bad news for Blogger&#8217;s : If you are a good html coder then you can manually implement it on each individual post o.O!</span><br /><b style="font-size: x-large;"><br /></b><br /><b style="font-size: x-large;">Alternative</b><span style="font-size: large;"> : </span><a href="http://simplereach.com/" style="font-size: x-large;" target="_blank" rel="nofollow">Simplereach</a><span style="font-size: large;"> , it Recommend the most relevant content Increase pageviews and time on site.Free and easy-to-install</span><br /><span style="font-size: large;"><br /></span></p>
<div style="text-align: center;"><span style="font-size: large;">Platforms : Almost works on all well known blog platform 🙂</span></div><div style="clear: both; text-align: center;"><img src="https://www.amazingthings.in/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://2.bp.blogspot.com/-c1YE8vSFT48/TxQuX0Gk7lI/AAAAAAAAB7c/xSwnua1VESo/s1600/slide.png" decoding="async" border="0"><noscript><img alt="blank" onload="Wpfcll.r(this,true);" src="https://www.amazingthings.in/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif" decoding="async" border="0" data-wpfc-original-src="http://2.bp.blogspot.com/-c1YE8vSFT48/TxQuX0Gk7lI/AAAAAAAAB7c/xSwnua1VESo/s1600/slide.png"/></noscript></div><table align="center" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: center;">
<tbody>
<tr>
<td style="text-align: center;"><a href="http://1.bp.blogspot.com/-19RIMOS0Dpg/TxQvcEK_DLI/AAAAAAAAB7k/FoMMTLZI-4A/s1600/download.png" style="margin-left: auto; margin-right: auto;" target="_blank" rel="nofollow"><img src="https://www.amazingthings.in/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://1.bp.blogspot.com/-19RIMOS0Dpg/TxQvcEK_DLI/AAAAAAAAB7k/FoMMTLZI-4A/s1600/download.png" decoding="async" border="0"><noscript><img alt="blank" onload="Wpfcll.r(this,true);" src="https://www.amazingthings.in/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif" decoding="async" border="0" data-wpfc-original-src="http://1.bp.blogspot.com/-19RIMOS0Dpg/TxQvcEK_DLI/AAAAAAAAB7k/FoMMTLZI-4A/s1600/download.png"/></noscript></a></td>
</tr>
<tr>
<td style="text-align: center;">A still from <a href="http://www.amazingthings.in/" target="_blank">amazingthings</a> dashboard</td>
</tr>
</tbody>
</table>
<p><span style="font-size: large;"><b>3.Mashable Look-alike Template Theme</b></span><br /><span style="font-size: large;"><b><br /></b></span></p>
<div style="text-align: center;"><span style="font-size: large;">A must look </span><b><span style="font-size: x-large;"><a href="http://www.themesdesk.com/themes/magazine-theme/" target="_blank" rel="nofollow">DEMO</a></span></b></div><div style="clear: both; text-align: center;"><img src="https://www.amazingthings.in/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://2.bp.blogspot.com/-H5wSrXRDd0M/TxQ0UdeJM2I/AAAAAAAAB7s/-WKQz9r9zL0/s1600/mashabletheme.png" decoding="async" border="0"><noscript><img alt="blank" onload="Wpfcll.r(this,true);" src="https://www.amazingthings.in/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif" decoding="async" border="0" data-wpfc-original-src="http://2.bp.blogspot.com/-H5wSrXRDd0M/TxQ0UdeJM2I/AAAAAAAAB7s/-WKQz9r9zL0/s1600/mashabletheme.png"/></noscript></div><div style="clear: both; text-align: center;"></div><div style="text-align: justify;"><span style="font-size: large;"><a href="http://www.bloggermint.com/go/themesdesk" target="_blank" rel="nofollow">ThemesDesk</a> a WordPress theme provider has released an awesome looking Magazine Theme which exactly look like Mashable’s present theme design.</span></div><div style="text-align: justify;"><span style="font-size: large;">Premium : 79$ 🙁</span></div><div style="text-align: justify;"><span style="font-size: large;">But If you are ready to spent some money on your blog then , <a href="http://www.themesdesk.com/themes/magazine-theme/" target="_blank" rel="nofollow">Magazine theme</a> is worth buying 🙂</span></div><div style="text-align: justify;"><span style="font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="font-size: large;">And yet again,not available for blogger 🙁</span></div><div style="text-align: justify;"><span style="font-size: large;"><br /></span></div><div style="text-align: justify;"><span style="font-size: large;">Alternative :<a href="http://mash2-bloggermint.blogspot.com/" target="_blank" rel="nofollow"> MASH 2</a> is an Mashable inspired template for blogger by <a href="http://www.bloggermint.com/2010/11/mash-2-mashable-inspired-blogger-template/" target="_blank" rel="nofollow">FranlinManuel</a></span></div><div style="text-align: justify;"></div><div style="text-align: justify;"><span style="font-size: large;">Homepage : <a href="http://www.bloggermint.com/2010/11/mash-2-mashable-inspired-blogger-template/" target="_blank" rel="nofollow">Mash 2 Template</a></span></div><div style="clear: both; text-align: center;"><img src="https://www.amazingthings.in/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://4.bp.blogspot.com/-zHwoYtZdr_o/TxQ1IWHYU4I/AAAAAAAAB70/1RLmJoatV1I/s1600/mash-2-template.png" decoding="async" border="0"><noscript><img alt="blank" onload="Wpfcll.r(this,true);" src="https://www.amazingthings.in/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif" decoding="async" border="0" data-wpfc-original-src="http://4.bp.blogspot.com/-zHwoYtZdr_o/TxQ1IWHYU4I/AAAAAAAAB70/1RLmJoatV1I/s1600/mash-2-template.png"/></noscript></div><div style="text-align: center;"><span style="font-size: large;"><b><a href="http://mash2-bloggermint.blogspot.com/" target="_blank" rel="nofollow">DEMO</a> and <a href="http://www.box.net/shared/s0cursaezn" target="_blank" rel="nofollow">DOWNLOAD</a></b></span></div><div style="text-align: left;"><span style="font-size: large;"><b><br /></b></span></div><div style="text-align: left;"><span style="font-size: large;"><b>4.Mashable Sharing Bar for every post</b></span></div><div style="text-align: justify;"><span style="font-size: large;">If you have read an article from Mashable you will come across a sharebar with multiple options to share it on social sites.A screenshot is shown below</span></div><div style="text-align: left;"><span style="font-size: large;"><br /></span></div><table align="center" cellpadding="0" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: center;">
<tbody>
<tr>
<td style="text-align: center;"><a href="http://3.bp.blogspot.com/-EsLxfF9Z2jk/TxQ4KWVZ3rI/AAAAAAAAB78/T6v0mNRiyag/s1600/download+%25281%2529.png" style="margin-left: auto; margin-right: auto;" target="_blank" rel="nofollow"><img src="https://www.amazingthings.in/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://3.bp.blogspot.com/-EsLxfF9Z2jk/TxQ4KWVZ3rI/AAAAAAAAB78/T6v0mNRiyag/s1600/download+%25281%2529.png" decoding="async" border="0"><noscript><img alt="blank" onload="Wpfcll.r(this,true);" src="https://www.amazingthings.in/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif" decoding="async" border="0" data-wpfc-original-src="http://3.bp.blogspot.com/-EsLxfF9Z2jk/TxQ4KWVZ3rI/AAAAAAAAB78/T6v0mNRiyag/s1600/download+%25281%2529.png"/></noscript></a></td>
</tr>
<tr>
<td style="text-align: center;">A still from Mashable post</td>
</tr>
</tbody>
</table>
<div style="text-align: left;"><span style="font-size: large;"><a href="http://sharethis.com/" target="_blank" rel="nofollow">ShareThis</a> offers the most innovative sharing platform with a different button styles,one of which is similar to the picture shown above.</span></div><div style="clear: both; text-align: center;"><a href="http://3.bp.blogspot.com/-ctlDY7qxLkQ/TxQ4K9k86sI/AAAAAAAAB8E/5bSSZN723fs/s1600/download+%25282%2529.png" style="margin-left: 1em; margin-right: 1em;" target="_blank" rel="nofollow"><img src="https://www.amazingthings.in/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://3.bp.blogspot.com/-ctlDY7qxLkQ/TxQ4K9k86sI/AAAAAAAAB8E/5bSSZN723fs/s1600/download+%25282%2529.png" decoding="async" border="0"><noscript><img alt="blank" onload="Wpfcll.r(this,true);" src="https://www.amazingthings.in/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif" decoding="async" border="0" data-wpfc-original-src="http://3.bp.blogspot.com/-ctlDY7qxLkQ/TxQ4K9k86sI/AAAAAAAAB8E/5bSSZN723fs/s1600/download+%25282%2529.png"/></noscript></a></div><div style="text-align: left;"><span style="font-size: large;"><br /></span></div><div style="text-align: left;"><span style="font-size: large;"><a href="http://sharethis.com/" target="_blank" rel="nofollow">Sharethis</a> is available for following platforms</span></div><div style="clear: both; text-align: center;"><img src="https://www.amazingthings.in/wp-content/plugins/lazy-load/images/1x1.trans.gif" data-lazy-src="http://3.bp.blogspot.com/-iBnv9BJqZ2Y/TxQ5JsvMORI/AAAAAAAAB8M/pVlh7WiQkLQ/s640/download+%25283%2529.png" decoding="async" border="0" height="77" width="640"><noscript><img alt="blank" onload="Wpfcll.r(this,true);" src="https://www.amazingthings.in/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif" decoding="async" border="0" height="77" data-wpfc-original-src="http://3.bp.blogspot.com/-iBnv9BJqZ2Y/TxQ5JsvMORI/AAAAAAAAB8M/pVlh7WiQkLQ/s640/download+%25283%2529.png" width="640"/></noscript></div><div style="text-align: left;"><span style="font-size: large;"><b><br /></b></span></p>
<div style="text-align: center;"><span style="font-size: x-large;">Thats all Folk&#8217;s : </span><span style="font-size: large;">Comment if you have any queries</span></div></div><div class="sharedaddy sd-sharing-enabled"><div class="robots-nocontent sd-block sd-social sd-social-icon sd-sharing"><h3 class="sd-title">Share this:</h3><div class="sd-content"><ul><li class="share-facebook"><a rel="nofollow noopener noreferrer" data-shared="sharing-facebook-589" class="share-facebook sd-button share-icon no-text" href="https://www.amazingthings.in/mashable-like-templates-and-widgets.html?share=facebook" target="_blank" title="Click to share on Facebook"><span></span><span class="sharing-screen-reader-text">Click to share on Facebook (Opens in new window)</span></a></li><li class="share-twitter"><a rel="nofollow noopener noreferrer" data-shared="sharing-twitter-589" class="share-twitter sd-button share-icon no-text" href="https://www.amazingthings.in/mashable-like-templates-and-widgets.html?share=twitter" target="_blank" title="Click to share on Twitter"><span></span><span class="sharing-screen-reader-text">Click to share on Twitter (Opens in new window)</span></a></li><li class="share-pinterest"><a rel="nofollow noopener noreferrer" data-shared="sharing-pinterest-589" class="share-pinterest sd-button share-icon no-text" href="https://www.amazingthings.in/mashable-like-templates-and-widgets.html?share=pinterest" target="_blank" title="Click to share on Pinterest"><span></span><span class="sharing-screen-reader-text">Click to share on Pinterest (Opens in new window)</span></a></li><li class="share-linkedin"><a rel="nofollow noopener noreferrer" data-shared="sharing-linkedin-589" class="share-linkedin sd-button share-icon no-text" href="https://www.amazingthings.in/mashable-like-templates-and-widgets.html?share=linkedin" target="_blank" title="Click to share on LinkedIn"><span></span><span class="sharing-screen-reader-text">Click to share on LinkedIn (Opens in new window)</span></a></li><li class="share-jetpack-whatsapp"><a rel="nofollow noopener noreferrer" data-shared="" class="share-jetpack-whatsapp sd-button share-icon no-text" href="https://www.amazingthings.in/mashable-like-templates-and-widgets.html?share=jetpack-whatsapp" target="_blank" title="Click to share on WhatsApp"><span></span><span class="sharing-screen-reader-text">Click to share on WhatsApp (Opens in new window)</span></a></li><li class="share-telegram"><a rel="nofollow noopener noreferrer" data-shared="" class="share-telegram sd-button share-icon no-text" href="https://www.amazingthings.in/mashable-like-templates-and-widgets.html?share=telegram" target="_blank" title="Click to share on Telegram"><span></span><span class="sharing-screen-reader-text">Click to share on Telegram (Opens in new window)</span></a></li><li class="share-end"></li></ul></div></div></div><div id='jp-relatedposts' class='jp-relatedposts'> <h3 class="jp-relatedposts-headline"><em>Related</em></h3></div></div><footer>
<div class="td-post-source-tags"></div><div class="td-post-sharing-bottom"><div class="td-post-sharing-classic"><iframe title="bottomFacebookLike" frameBorder="0" onload="Wpfcll.r(this,true);" data-wpfc-original-src="https://www.facebook.com/plugins/like.php?href=https://www.amazingthings.in/mashable-like-templates-and-widgets.html&amp;layout=button_count&amp;show_faces=false&amp;width=105&amp;action=like&amp;colorscheme=light&amp;height=21" style="border:none; overflow:hidden; width:auto; height:21px; background-color:transparent;">



Share
Facebook
WhatsApp
Twitter
Pinterest
Linkedin

Previous article20 Beautiful Example of Photo Retouching in Photoshop
Next articleMind Blowing HTML5 Jquery and Javascript Demo’s
Aakash Doshi
Bachelor's in Computer Science, NMIMS UNIVERSITY Currently Working as a Software Specialist in eClinicalWorks (Number 1 Electronic Medical Record Software Provider in USA). A web Addict and a Hardcore Gamer, Dreaming of "The Next Big Thing !"
Mashable Like Templates And Widgets

Leave a ReplyCancel reply

Amazing Blogging Tips Do’s And Dont’s

She Blocked Me Flash Animation

RELATED ARTICLESMORE FROM AUTHOR

[Online Games] Frat Boy Beer Pong

Amazing 3D Animal T-Shirts You Should Buy

[Comic] Similarity Between Farmer and Engineer

Leave a ReplyCancel reply

Amazing Blogging Tips Do’s And Dont’s

She Blocked Me Flash Animation

RELATED ARTICLES MORE FROM AUTHOR
