Blogger Syntax Code Highlighter Modification

<div class="example">
<mark>The Text You Want to Highlight Inside Code Box</mark>
</div>

This blogger modification is going to make your blog posts much more elegant and attractive than usual, you can use this to include Code with a simple Content Box or micro code like this: <div class="example">.

You will benefit from advanced features including syntax code highlighting, automatic language detection and more expanded code display functionality.

Live Demo

Tutorial

Recent Posts Widget with Timeline Design for Blogger

This blogger recent posts widget will absolutely boast your site's bounce rate to the maximum with its simple and clear timeline design that shows detailed information about your latest blog posts including title, description snippet and read more link. It's also so customizable that you can change the number of posts shown along with how many characters to show in the description before it puts the read more link.

Live Demo

<div class="recentpoststyle"> <script src="https://ismoothblog.googlecode.com/svn/recentposts.js"></script> <script> var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 50;</script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts"> </script> <noscript>Your browser does not support JavaScript!</noscript> <style type="text/css"> .recentpoststyle {counter-reset: countposts;list-style-type: none;} .recentpoststyle a {text-decoration: none; color: #49A8D1;} .recentpoststyle a:hover {color: #000;} .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;} li.recent-post-title { padding: 5px 0px;} .recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;} .recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;} .post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;} .recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;} </style></div> Add to Blogger

Blogger Comment Modification with Emoticons

This blogger modification is going to make your comment section much elegant and attractive than usual. You will benefit from advanced features including emoticons, code conversion and expanded functionality.

Live Demo

Tutorial

Blogger Social Subscription Widget with Email Form

This blogger widget will add an effective and sleek social subscription widget with an email form for your blog. It contains 3 subscription methods for your readers to subscribe and they are the most famous ways which are Facebook, Twitter and FeedBurner email subscription.

Live Demo

Tutorial

Simple Email Subscription Box Widget

 

This blogger widget will add a stylish, simple and neat email subscription box to your sidebar, it's using Google Feedburner to serve this newsletter form so, please set YourID to your feed account.

Live Demo

<style type='text/css'> #CHANGE-TO-YOUR-HTML-WIDGET-NUMBER h2 {font-family:'Oswald';font-size:16px;font-weight:400;color:#919392;padding:10px 15px;display:block;background-color:#fff;} #CHANGE-TO-YOUR-HTML-WIDGET-NUMBER h2:before {font-family:FontAwesome;content:'\f003'!important;margin-right:10px;font-size:20px;} #subscribe-box {width:auto;height:auto;background-color:#fff;} #subscribe-box p {font-family:'Open Sans';font-size:13px;color:#919392;line-height:20px;padding:10px 20px 0 20px;margin:0;} #subscribe-box .emailfield {padding:0px 20px 10px;} #subscribe-box .emailfield input {background:#fafafa;color:#aaacab;padding:10px;margin-top:10px;font-size:13px;font-family:'Open Sans';width:91%;border:0;border:1px solid #e9e9e9;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield input:focus {background:#fff;outline:none;border:1px solid #d9d9d9;color:#919392;} #subscribe-box .emailfield .submitbutton {background:#565f6a;color:#fff!important;text-transform:uppercase;font-weight:bold;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;} #subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#bfb079;color:#fff;} </style> <div id='subscribe-box'> <p> Sign up here with your email.</p> <div class='emailfield'> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=YourID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input type='text' name='name' onblur='if (this.value == "") {this.value = "Your Name";}' onfocus='if (this.value == "Your Name") {this.value = "";}' value='Your Name'/> <input type='text' name='email' onblur='if (this.value == "") {this.value = "Your Email";}' onfocus='if (this.value == "Your Email") {this.value = "";}' value='Your Email'/> <input name='uri' type='hidden' value='YourID'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='Subscribe Now!'/> </form> </div> </div> Add to Blogger