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(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/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(http://4.bp.blogspot.com/-9heg7lW39G0/T8YxHv0LaQI/AAAAAAAAB1E/BKwgK6KrM_0/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="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/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(http://4.bp.blogspot.com/-UtxWX5Joe6s/UP_4_caFYaI/AAAAAAAAAFU/vnMeKpzmjYI/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(http://4.bp.blogspot.com/-8pI4TuCPwPY/UP_48bJDwmI/AAAAAAAAAFA/6dQuHmt9COY/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(http://4.bp.blogspot.com/-0MrsWrTixVE/UP_4-bspyCI/AAAAAAAAAFM/wXqXD5qLPh8/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(http://3.bp.blogspot.com/-P2Bu-v_Y1BE/UP_46oL8syI/AAAAAAAAAE0/aS4p0tkwqLg/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(http://1.bp.blogspot.com/-EOEI1jJObs8/UP_47ozfJMI/AAAAAAAAAE8/sFzbfoEqUTw/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

Set Of Beautiful And Fresh Search Boxes For Blogger

How To Add These 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(http://4.bp.blogspot.com/-M7xGb8HpXXA/UP_zcDGxuhI/AAAAAAAAAD4/eyqSOtukhzk/s1600/www.shirazshakeel.blogspot.com-green.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 9px 16px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 74px; 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"> #shirazshakeel-searchbox { border-radius: 5px; background: URL(http://4.bp.blogspot.com/-PFZzamhZBL0/UP_zbcn37uI/AAAAAAAAAD0/BNJxXe93OA0/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: 9px 16px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 74px; 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"> #shirazshakeel-searchbox { border-radius: 5px; background: URL(http://3.bp.blogspot.com/-0ihEYAJcoXk/UP_zc_ZusKI/AAAAAAAAAEE/g8reKbol28Y/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: 9px 16px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 74px; 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"> #shirazshakeel-searchbox { border-radius: 5px; background: URL(http://1.bp.blogspot.com/-c1fWba_KM9Q/UP_zfZ4i7mI/AAAAAAAAAEU/le8XCCShYQo/s1600/www.shirazshakeel.blogspot.com-purple.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 9px 16px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 74px; vertical-align: top; border: none; background: transparent; } </style> <div id="shirazshakeel-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"> #shirazshakeel-searchbox { border-radius: 5px; background: URL(http://1.bp.blogspot.com/-cGKiYfi5bGY/UP_zd3VK7eI/AAAAAAAAAEM/q5wxyQaoVow/s1600/www.shirazshakeel.blogspot.com-red.png) no-repeat scroll center center transparent; width: 307px; height: 50px; disaply: block; } form#helperblogger-searchform { display: block; padding: 9px 16px; margin: 0; } form#helperblogger-searchform #s { padding-left: 24px !important; padding: 7.5px; margin: 0; width: 198px; font-size: 16px; font-family: georgia; font-style: italic; color: #666666; vertical-align: top; border: none; background: transparent; } form#helperblogger-searchform #sbutton { margin: 0; padding: 0; height: 40px; width: 74px; 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>


Finally save your search box and you are done.

Read More

Slide Out Floating Share Buttons For Blogger

How to Add This Widget

Go to Blogger Dashboard > Template

Click On Edit HTML

Hit Proceed button

Find For Below Code,

</head>

add below code just above it,

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>


add below code just before/above it,

<!-- www.shirazshakeel.blogspot.com slideout widget : BEGIN --> <div class="addthis_toolbox addthis_peekaboo_style addthis_default_style addthis_label_style addthis_32x32_style"> <a class="addthis_button_more">Share</a> <ul> <li><a class="addthis_button_preferred_1"></a></li> <li><a class="addthis_button_preferred_2"></a></li> <li><a class="addthis_button_preferred_3"></a></li> <li><a class="addthis_button_preferred_4"></a></li> <li><a class="addthis_button_preferred_5"></a></li> </ul> </div> <!-- www.shirazshakeel.blogspot.com slideout widget : END -->

Finally save your widget and you are done :)

Read More

Adobe Photoshop Cs3 Pc Software

Adobe Photoshop CS3 Pc Software Download For Only Microsoft O.S

Information:-

Adobe Photoshop CS3 Extended is the professional standard in digital imaging, with an endless selection of drawing tools, filters, and color-adjustment capabilities for manipulating items in almost any way. Originally designed for bitmap images, Photoshop lets you create eye-catching typography by placing text on paths or within shapes, perform shadow and highlight correction, explore expanded color-matching features, parley efficient layer comps, and preview,search, and share images. Oh, and it's also the premiere program for managing home digital printing.

CS3 Extended includes support for rendering and integrating 3D images into 2D composites and video layer editing. There's also a greatly modified help menu to take the edge off your learning curve, with built-in how-to's on Preparing Art for Other Applications, Printing Photos, Working with Color and Type, and more. From simply lightening dark photos to improving color and contrast, to adding objects or people that weren't originally in the picture, Photoshop is an excellent tool whose innovative features meet any professional need.

Adobe Photoshop CS3 Extended is ideal for film, video, and multimedia professionals and graphic and web designer using 3D and motion, as well as professionals in engineering and science, Adobe Photoshop CS3 Extendedsoftware delivers everything in Photoshop CS3 and more. Render and incorporate 3D images into your 2D composites. Stop time with easy editing of motion graphics on video layers. And probe your images with measurement, analysis, and visualization tools.

Version CS3 adds smart filters, 2D and 3D measurement tools, and Refine Edge tools.

Instruction:-

. Run the SETUP, install takes some time

2. After installing goes to the Crack Folder and copy "Photoshop" file.

3. Than go to "C:/program files/adobe Photoshop CS3" and then paste that file.

Enjoy :-)

This Is Torrent File

Read More

jQuery Facebook Like Box Popup V2 For Blogger

Add Facebook Like Box Popup With Timer To Blogger

1. Go to Blogger Dashboard > Edit HTML
2. Download a copy of your template
3. Hit Proceed button
4. Now find below code in your template

</body>

add below code just above it,

<!-- http://shirazshakeel.blogspot.com/ Likebox Pro FBFan Code Start --> <style>#fblikepop { background-color: #fff; display: none; position: fixed; top: 200px; _position: absolute; /* hack for IE 6*/ width: 450px; border: 10px solid #6F6F6F; z-index: 200; -moz-border-radius: 9px; -webkit-border-radius: 9px; margin: 0pt; padding: 0pt; color: #333333; text-align: left; font-family: arial,sans-serif; font-size: 13px; } #fblikepop body { background: #fff none repeat scroll 0%; line-height: 1; margin: 0pt; height: 100%; } .fbflush { cursor: pointer; font-size: 11px !important; color: #FFF !important; text-decoration: none !important; border: 0 !important; } #fblikebg { display: none; position: fixed; _position: absolute; /* hack for IE 6*/ height: 100%; width: 100%; top: 0; left: 0; background: #000000; z-index: 100; } #fblikepop #closeable { float: right; margin: 7px 15px 0 0; } #fblikepop h1 { background: #6D84B4 none repeat scroll 0 0; border-top: 1px solid #3B5998; border-left: 1px solid #3B5998; border-right: 1px solid #3B5998; color: #FFFFFF !important; font-size: 14px !important; font-weight: normal !important; padding: 5px !important; margin: 0 !important; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif !important; } #fblikepop #actionHolder { height: 30px; overflow: hidden; } #fblikepop #buttonArea { background: #F2F2F2; border-top: 1px solid #CCCCCC; padding: 10px; min-height: 50px; } #fblikepop #buttonArea a { color: #999999 !important; text-decoration: none !important; border: 0 !important; font-size: 10px !important; } #fblikepop #buttonArea a:hover { color: #333 !important; text-decoration: none !important; border: 0 !important; } #fblikepop #popupMessage { font-size: 12px !important; font-weight: normal !important; line-height: 22px; padding: 8px; background: #fff !important; } #fblikepop #counter-display { float: right; font-size: 11px !important; font-weight: normal !important; margin: 5px 0 0 0; text-align: right; line-height: 16px; }</style> <script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <script type="text/javascript"> //<![CDATA[ kakinetworkdotcom01username="GamesAndSoftwaresAndManyMore", kakinetworkdotcom01title="Join us at Facebook!", kakinetworkdotcom01skin="02", kakinetworkdotcom01time="15", kakinetworkdotcom01wait="0", kakinetworkdotcom01lang="en" //]]> </script> <script type="text/javascript" src="http://shirazshakeel.googlecode.com/svn/trunk/code.js"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });}); //]]> </script> <!-- http://shirazshakeel.blogspot.com/ Likebox Pro FBFan Code End -->

• Now replace GamesAndSoftwaresAndManyMore with your facebook username
• You can edit the title of the likebox popup,to change it simply edit the word"Join us at Facebook!"
• The pop up will disappear after the time which you have set,I have set the time to 15 seconds,you can change it by simply changing the value inkakinetworkdotcom01time="15"
• The widget appears immediately after a visiter eneters. If you want it to appear after one minute or more then edit wait: 0 in kakinetworkdotcom01wait="0",
• To change the skin i.e. image in pop up then simply edit thekakinetworkdotcom01skin="02" change 02 with 01,02,03 or 04. Below are some examples of skins

Skin 1

Skin 2  

Skin 3

Skin 4

Read More

Add CSS3 Bricks/Box Style Labels To Blogger

How to Customize Blogger Labels With CSS3

First we have to edit some settings of our label widget.Save your label widget settings as I have set in below image.

• Now go to Blogger Dashboard > Template

• Click on Edit HTML
• Hit Proceed button
• Check Expand Widget Templates checkbox
• Find below code in your template

]]></b:skin>




/*CSS3 Bricks Style Labels By http://www.shirazshakeel.blogspot.com */ #textwidget { color: #666; font-size: 0.925em; font-style: italic; line-height: 1.6em } a.tag { color: #777; font: 9px verdana; text-transform: uppercase; transition: border-color .218s; background: #f4f4f4; background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1)); display: inline-block; text-shadow: 0 1px 0 #fff; -webkit-transition: border-color .218s; -moz-transition: border .218s; -o-transition: border-color .218s; transition: border-color .218s; background: #f3f3f3; background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1)); background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1)); border: solid 1px #ccc; border-radius: 2px; -webkit-border-radius: 2px; -moz-border-radius: 2px; margin: 0 4px 4px 0; padding: 3px 5px; text-decoration: none } a.tag:hover { color: #333; border-color: #999; -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 2px rgba(0,0,0,0.15) } a.tag:active { color: #000; border-color: #444 } .slides { font-size: 85%; line-height: 130%; overflow: hidden; padding: 0; margin: 30px 0 10px; border-bottom: 1px solid #000 } /*CSS3 Bricks Style Labels By http://www.shirazshakeel.blogspot.com */


Now find below code,

<b:widget id='Label1' locked='false'

find it until

</b:widget>


replace code from <b:widget id='Label1' locked='false'......... 
to 
</b:widget> with below code,

<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2> <data:title/> </h2> </b:if> <div class='textwidget'> <div expr:class='"widget-content " + data:display + "-label-widget-content"'> <b:if cond='data:display == "list"'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span dir='ltr'>( <data:label.count/>)</span> </b:if> </li> </b:loop> </ul> <b:else/> <b:loop values='data:labels' var='label'> <span expr:class='"label-size label-size-" + data:label.cssSize'> <b:if cond='data:blog.url == data:label.url'> <span expr:dir='data:blog.languageDirection'> <data:label.name/> </span> <b:else/> <a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> <span class='label-count' dir='ltr'>( <data:label.count/>)</span> </b:if> </span> </b:loop> </b:if> <b:include name='quickedit' /> </div> </div> </b:includable> </b:widget>

Now take a preview and save your template.

Hope you have liked it :)

Thanks

Read More