Add Shareaholic Sassy Bookmarks To Blogger

How To Add Shareaholic Sassy Bookmarks To Blogger

• Go to Blogger Dashboard > Template
• Now find for below code in your template

</body>


add below piece of code just above/before of above code.

<!-- Start Shareaholic Sassy Bookmarks HTML (http://shirazshakeel.blogspot.com)--> <div class="shr_ss shr_publisher"> </div> <!-- End Shareaholic Sassy Bookmarks HTML (http://shirazshakeel.blogspot.com) --> <!-- Start Shareaholic Sassy Bookmarks settings --> <script type="text/javascript"> var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}}; </script> <!-- End Shareaholic Sassy Bookmarks settings --> <!-- Start Shareaholic Sassy Bookmarks script --> <script type="text/javascript"> (function() { var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true; sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s); })(); </script> <!-- End Shareaholic Sassy Bookmarks script (http://shirazshakeel.blogspot.com) -->

• Now save your template and you are done

• I hope you will like this gadget.

Read More

Smooth jQuery Multi Level Drop Down Menu For Blogger - V1

How To Add Multi Drop Down Menu To Blogger

• Go to Blogger Dashboard > Design > Layout. (In new User Interface Dashboard > Layout)
• Click on add a gadget link just below of Header

Paste below code and save it.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script><script type="text/javascript" src="http://code.helperblogger.com/hb-smooth-menu.js"></script><script type="text/javascript">ddsmoothmenu.init({ mainmenuid: "smoothmenu1", orientation: 'h', classname: 'ddsmoothmenu', contentsource: "markup" })</script> <style> .ddsmoothmenu { width: 100%; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9yER6BpkIQXJX9ERzReolOG9mDLlqu5MnPTpOnVpYyLCYDOjKUyF2nW6UvMkRr_eEv_6zS4k04ZimiG_2G9iAGfSnEvpG97Jr15cCYY7rgzmVcPcjJDPo0b5vIc_afKbIoRqVlj3Gxi0/s1600/menu-bg.png); vertical-align: middle; height: 33px; font-family: Verdana; font-size: 13px; font-weight: bold;} .ddsmoothmenu ul { z-index: 100; margin: 0; padding: 0; list-style-type: none;} .ddsmoothmenu ul li { position: relative; display: inline; float: left;} .ddsmoothmenu ul li a { display: block; color: white; padding: 8px 10px; border-right: 1px solid #778; color: #666666; text-decoration: none; background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9yER6BpkIQXJX9ERzReolOG9mDLlqu5MnPTpOnVpYyLCYDOjKUyF2nW6UvMkRr_eEv_6zS4k04ZimiG_2G9iAGfSnEvpG97Jr15cCYY7rgzmVcPcjJDPo0b5vIc_afKbIoRqVlj3Gxi0/s1600/menu-bg.png);} * html .ddsmoothmenu ul li a { display: inline-block;} .ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited { color: white;} .ddsmoothmenu ul li a.selected { background: black; color: white;} .ddsmoothmenu ul li a:hover { background: black; color: white;} .ddsmoothmenu ul li ul { position: absolute; left: 0; display: none; visibility: hidden;} .ddsmoothmenu ul li ul li { display: list-item; float: none;} .ddsmoothmenu ul li ul li ul { top: 0;} .ddsmoothmenu ul li ul li a { font: normal 13px Verdana; width: 160px; padding: 5px; margin: 0; border-top-width: 0; border-bottom: 1px solid gray;} * html .ddsmoothmenu { height: 1%;} .downarrowclass { position: absolute; top: 12px; right: 7px;} .rightarrowclass { position: absolute; top: 6px; right: 5px;} .ddshadow { position: absolute; left: 0; top: 0; width: 0; height: 0; background: silver;} .toplevelshadow { opacity: 0.8;} </style> <div id="smoothmenu1" class="ddsmoothmenu"> <ul> <li> <a href="http://www.helperblogger.com/">Home</a> </li> <li> <a href="#">Folder 0</a> <ul> <li> <a href="#">Sub Item 1.1</a> </li> <li> <a href="#">Sub Item 1.2</a> </li> </ul> </li> <li> <a href="#">Folder 1</a> <ul> <li> <a href="#">Sub Item 1.1</a> </li> <li> <a href="#">Sub Item 1.2</a> </li> </ul> </li> <li> <a href="#">Item 3</a> </li> <li> <a href="#">Folder 2</a> <ul> <li> <a href="#">Sub Item 2.1</a> </li> </ul> </li> <li> <a href="http://shirazshakeel.blogspot.com/2013/01/smooth-jquery-multi-level-drop-down.html">Create This</a> </li> </ul> <br style="clear: left" /> <br style="clear: left" /></div>

That's It 

Read More

Breadcrumbs Navigation Widget For Blogger

Breadcrumb navigation helps your readers to track their position on your blog by showing a breadcrumb trail in this way (Home » Label Name » Post Title).This navigation appears just above of the your post title and the links are a trail from the homepage to post title.There is also option for showing the multiple labels in this navigation i.e. if any post have more than one label then it will show all of them.

Add BreadCrumbs Navigation For Blogger

Go to Blogger Dashboard > Template

1. Click on Edit HTML
2. Hit Proceed
3. Now find below code,

<b:include data='top' name='status-message'/>

just above it copy and paste below code,

<b:include data='posts' name='breadcrumb'/>

Now find below code Tip : (if you find two occurrences of this, then locate the second one)

<b:includable id='main' var='top'>

just above it paste below code,

<!-- Breadcrumb Navigation By www.shirazshakeel.blogspot.com -->
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'>
 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pagename/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v="http://rdf.data-vocabulary.org/#">
 <span typeof="v:Breadcrumb"><a expr:href='data:blog.homepageUrl' rel="v:url" property="v:title">Home</a></span>
 <b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.isLast == "true"'>
 » <span typeof="v:Breadcrumb"><a expr:href='data:label.url' rel="v:url" property="v:title"><data:label.name/></a></span>
 </b:if>
 </b:loop>
 » <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'>
 <span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span>
</div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pagename/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
 <b:if cond='data:blog.pageName == ""'>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
 <b:else/>
 <span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pagename/></span>
 </b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<!-- Breadcrumb Navigation By www.shirazshakeel.blogspot.com -->

This code will only display the last label of the post in the breadcrumb. If you want to display all the labels, then you will have to remove the code in line number 16 and 18.

Now find below code,

]]></b:skin>

add below CSS code just above it,

.breadcrumbs {
background: #F7F7F7;
float: left;
border: 1px solid #E6E6E6;
width: 575px;
font-size: 11px;
margin: 10px 10px 10px 10px;
padding: 5px 10px 5px 10px;
}

Now save your changes and you are done.

Thanks ! ! !

Read More

Fixed Position "Share This" Sharing Bar For Blogger

How To Add Share This Buttons To Blogger

Go to Blogger Dashboard > Design > Edit HTML.

Now search for

</head>

add below code just above it.

<script type="text/javascript">var switchTo5x=true;</script> <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script> <script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

Now find for below code in your template,

</body>

add below piece of code just above it

<b:if cond='data:blog.pageType == "item"'> <script> var options={ "publisher": "ur-a2599f1-8136-72d-5d41-d74061e0b4fc", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "pinterest", "email", "sharethis"]}}; var st_hover_widget = new sharethis.widgets.hoverbuttons(options); </script> </b:if>

Now save your template and you are done...

Read More

Related Posts Widget With Image Thumbnail For Blogger

How To Add Related Posts With Thumbnail For Blogger

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Download a copy of your template first.
3. Tick  "Expand Widget Templates" checkbox.
4. Now search for below tag in your template

</head>

Just above it paste below code,

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --> <b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float: center; text-transform: none; height: 100%; min-height: 100%; padding-top: 5px; padding-left: 5px; font-size } #related-posts h2 { font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “ Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a { color: black; } #related-posts a:hover { color: black; } #related-posts a:hover { background-color: #6E6E6E; color: #ffffff; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44n3HRSiB8041J-fNuHEc5R2UlP-w7qmLiQTgppA_Mgs_u0IKCuHGBY4oNeAQ18Ni1deaHQfsyi2gpr5OYiooPvBXcr8oJ6WpDHOyeYdK5Rgj5-E3_5JnjnOp1A-941l3V58ZeFMwhPc/s400/noimage.png"; var maxresults=5; var splittercolor="#d4eaf2"; var relatedpoststitle=""; </script> <script src='http://code.helperblogger.com/hb-related-posts.js' type='text/javascript'/>> <!-- remove --> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

Now search for below code in your template,

<div class='post-footer-line post-footer-line-1'/>

Now place below code snippet just before of above line,

<!-- Related Posts with Thumbnails Code Start--> <!-- remove --> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div> <div style='clear:both'/> <!-- remove --> </b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a></b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

Now save your template and go to your blog,you will watch this widget just below of your posts.

Customizations

• To change the title of widget find the Related Posts in 2nd code.
• To change the number of posts to display find this var maxresults=5; code in 2nd code.

Read More

Beautiful And Sleek Search Boxes For Blogger

How To Add Sleek Search Boxes To Blogger

1. First choose any search box below
2. Copy the code of that search box
3. Go to Blogger Dashboard > Layout
4. Click Add a Gadget
5. Select HTML/JavaScript
6. Paste code and save it
7. Drag it to the top of your siderbar,if you are good blogger :)

Search Box Style 1

<style type="text/css"> #helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjv73f9DsSaAuo_fpqGxnNqImkbzpA-PR6C06G__MmjDyVlSI1VIp4B7cEXMcnefDnj_-sw1hz0BHFH-QUgSbFURC7EiGR-oBblOHZMJkm6Hcyinn_cNB7GQg_YCuKsXSoi1ImM_qtkQg/s1600/www.shirazshakeel.blogspot.com-white.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent; } </style> <div id="helperblogger-searchbox"> <form id="helperblogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Search Box Style 2

<style type="text/css"> #helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiksGIeQHvTBFxnn7yA50Uilpf7xg-i3dtuyZVlhhyphenhyphen925-o6dTYGfSgZpRXSn4tedlzsmYPqH11LLUdzogavmomNS3QkwsrLGnM_8RVdPz_GXvf9Jmk3P73RA5U_OvdGfk-FC1E_gK3ep4/s1600/www.shirazshakeel.blogspot.com-blue.png no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent; } </style> <div id="helperblogger-searchbox"> <form id="helperblogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Search Box Style 3

<style type="text/css"> #helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnXcW-e5h-fvIQdGQQDI1QfTciOv3Dc5DPobSDjsapvVO3l7ne9ZcRt4H7MLB7cTQnWdtt4cphfKHMQkFU8xfDl13a6YKNDD0lZFuqjJB7EUlkHcGNDNQlFADuN0ur5cL5Hx5okohNPPk/s1600/www.shirazshakeel.blogspot.com-black.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent; } </style> <div id="helperblogger-searchbox"> <form id="helperblogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Search Box Style 4

<style type="text/css"> #helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNSCXrEuYGNPjCQZ9L6zaiw3lqgRDdLnuRboRv-MItcCL6zT8-CUC7MuMb5kCH2-uykjdk8jrMyU__KDfdwzQapHUmb6QH4397KZMY_u3hLW73P4Orcz1ib8tG4WNSiF3qPPPeUWZ87X8/s1600/www.shirazshakeel.blogspot.com-orange.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent; } </style> <div id="helperblogger-searchbox"> <form id="helperblogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>

Search Box Style 5

<style type="text/css"> #helperblogger-searchbox { border-radius: 5px; background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPq-V4ODqv-DhW9tAvyQ5ml0nAAlwbDOf74HnqmvNe8nLguKsDm2Mnfi6e902jQADTYWR57fecFDaHtbTPG52DnhqDkpV8Zi8sMaXCfqRdbzBLkyjnmyFjiCslH9TpeHz2o-ib2_56QhY/s1600/www.shirazshakeel.blogspot.com-pink.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 10px 12px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 220px; font-size: 14px; font-family: verdana; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 44px; vertical-align: top; border: none; background: transparent; } </style> <div id="helperblogger-searchbox"> <form id="helperblogger-searchform" action="/search" method="get"> <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}' /> <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" /> </form> </div>



I hope you have enjoyed this all search boxes :)

Peace Buddies :)

Read More