Posts

Showing posts from May, 2013

Add Css Social Widget For Blogger

Image
Previously I was posted about CSS3 Widget With Zoom & Shrinking Effect And today we are going to post about New CSS social widget for blogger/blog.This widget is CSS powered social widget with RSS, Facebook, Twitter, Google+, And LinkedIn.This widget can attract your blog visitors easily i am sure.This CSS widget is  vertically and smooth.This widget is simple and clean.So, Let's see below how to add it on your blog. Live Demo  Subscribe to the RSS Feed Follow me on Twitter Find me on Facebook Join me on Google+ Connect with me on LinkedIn Adding CSS Social Widget For Blogger Log In To Blogger.com Go To Your Blogger Dashboard Navigate To Layout And Add A Gadget Select "HTML/JavaScript" Gadget Now Copy The Below Code And Paste It In Inside The Box. <style type="text/css"> .TechBlogGuide-chronicl-social {  width: 320px;  margin: -10px;  } .TechBlogGuide-chronicl-social ul {  margin: 0;  padding: 0;  } .TechBlogGuide-ch

Awesome Facebook And Twitter Widget With Ribbon

Image
Hello....Friends! Today We Are Here With New Awesome Facebook And Twitter Widget With Ribbon.Now a days Social Media Are Best Ways To Increase Our Blog.Followers Widget Are Most Essential Tool For Blogger.The Facebook And Twitter Are Best Social Network Sites.This Widget Is Looks Like Awesome.In This Widget Has A Blue Shine Color Of Ribbon.So, I Think Our Readers Will Sure Like This Widget.So, Without Vesting Your Time Let's See How To Add It On Your Blog.                                                               View Demo How To Add CSS Log In To Blogger.Com Go To Your Blogger Dashboard Navigate To Template  Click On Edit HTML And Proceed Search For ]]></b:skin> Tag Using (CTRL+F) And Copy The Provided Code Given Below And Paste It Before/Above ]]></b:skin>  .TechBlogGuide-wrapper {padding:5px;     margin: 50px auto;   width: 276px;   height: 360px;   border-radius: 0px;   position: relative;   z-index: 90; background:#eee;backgrou

Adding An Awesome Fixed Position Slide Open Heart Bookmarking Gadget For Blogger

Image
This is my first post about sharing widget for blogger.This widget comes with a LOVE heart when your visitors of them anyone float a selection of bookmarking buttons.When the hearts open it will shows social bookmark icons such as Facebook, Tweets, Pinterest,  Mayspace, LinkedIn, Fall Upon, Email And Share This Icon Are Included.This is an awesome widget for blogger/blog.It Setup is very easy to install on your blogger/Blog.So, Let's see below the tutorial about this widget. How To Add It On Your Blogger/Blog? Remember Always Back Up Your Template Before Editing Your Template. Log In  To Blogger.com Go To Your Blogger Dashboard Navigate To Template And Click On Edit HTML Press CTRL+F And Search The Code Given Below:  </head>  And Below Code Just Above/Before </head>  <!-- Social Bookmarking Gadget By http://www.TechBlogGuide.blogspot.com/  start--> <script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/j

Adding Beautiful And Sleek Search Box For Blogger[Collection]

Image
Hello friends, Today i am going to publish about beautiful and sleek search boxes for blogger/blog.These boxes widget will help your visitors to find some content articles present in your blog.This search boxes widget have different color, which ever you want to put on your blog you can put very easily.And Making these things easier for your visitors is a symptoms of good blogger.Friends this search boxes is looking simple and clean.So, blogger friends you can easily put this widget on your blog, Just follow the steps and you are done! How To Add Beautiful And Sleek Search Box For Blogger/Blog?   First Choose The Search Box (Which Provided Below) Code The Code Of That Search Box (Which You Like) Go To Your Blogger Dashboard Navigate To Layout And Add A Gsdget Select HTML/JavaScript Paste The Code And Save, Drag It To Where You Want Search Box: Style #1 <style type="text/css"> #TechBlogGuide-searchbox {     border-radius: 5px;     background: URL(ht

Adding CSS3 Multi Level Drop Down Menu For Blogger/Blog

Image
Hi friends...!, How are you.After a long time today we are here with new awesome CSS3 Multi level drop down menu for blogger/blog.Friends if you have a lot of sub categories in your blog or websites then you can use this awesome menu widget.The awesome black and Blue shine color is used to create this awesome menu widget.It uses no images at all and that's why open more fast than other.This awesome menu is suitable with all major browsers Like Google Chrome, Mozilla Firefox, Safari, Opera.It's installation is very easy, just copy and paste the code.Now let's come and see how to add this menu in your blog. How To Add CSS3 Multi Level Drop Down Menu For Blogger/Blog? Log In To Blogger.com Go To Your Dashboard Navigate To Layout And Add A Gadget Select HTML/JavaScript Now Paste The Following Code Inside The Box. <style> /*------ Drop Down Menu by Tech Blog Guide ---------*/ #TBG-menu, #TBG-menu ul { margin: 0; padding: 0; list-style: none; } #TBG-

2 Color Code Generator Tools

Image
Hi friends...! How are You?. Today i am going to share most important color code generator tools for blogger.This 2 color code generator tools can help you to get six digit color code means hexadecimal value.After getting your own desire of color you can customize your blog more more spicy and color full.So readers read the instructions below before using this color code generator tools. Color Code Generator Tool 1 Method instructions: First Drag The Bar On The Hue Color Sector To The Area Of your Own Choice Color Plate. Then Click Inside The Brightness-Saturation   Area Move The Cursor Until You Have Found The Your Own Desired color.The Swatch Bar  Which You Can Top Right On The Color Tool Show You The Result. The Hexadecimal Color Code Generated In The Hex Tab.Easily Copy The Color Code And Use It Where You Want. That's It. Color Chart For Finding Matching Color Plate. This Is Very Useful For Finding Color Code. Methods Instructions: Easily paste your code without (#) I

How To Add Auto Read More Button To Your Blog

Image
Auto Read more function are automatically shorten your blog posts.Auto read more button will add automatically when you publish something on your blog.Friends, Auto read more button will only display the summary on your blog Home Page.In this way your blog views will increase easily.Using This auto read more on your blog will your blog speed by showing posts instead of the full post on the home page.This Trick is awesome.Hope you will like this Post. How To Add It On Your Blog? First Go To Your Dashboard Navigate To Template Click On Edit HTML And Proceed Press CTRL+F In the code Window Find The </head> And Paste The Provided Code Before </head> <script type='text/javascript'>var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<

How To Hide Blog Post Date, Time And Author

Image
The blogger hack is really helpful for us.The blogger who want to keep their blog simple, neat and clean then use this hack trick.I am going to show you that how to hide blog post date, time and author.This hack is very easy to work on your blog.Just follow the steps and you done. Log in To Your Dashboard Navigate To template Click On Edit HTML And Proceed How To Hide Posts Date? Find The Provided Code Below <data:post.dateHeader/> And Delete It. How To Hide Posts Time? Find The Following Code <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a> </b:if> </b:

Add Stylish Professional Demo Button For Blogger

Image
You might have seen many bloggers are using demo button to make his blog look professional.That's why Friends we are going to publish about stylish professional demo button.This button will help you to increase your blog visitors easily.This demo button is in brown color with mouse hover design.When you mouse on hover this demo button then demo button will down automatically.Hope our visitors will like this demo button.                                                                              Live Demo Add It On Your Blogger/Blog Go To Your Blogger Dashboard  Navigate To Template Click On Edit HTML And Proceed Now Find </head> using CTRL+F Paste The Following Code Above </head>  <style> a.css3dbutton { background: darkred; /* background color of button */ color: white; text-decoration: none; font: bold 28px Arial; /* font size and style */ position: relative; top: 0; /* anchor main button's position */ bottom: -12px; /* Depth of 3D effe

Add CSS3 Vertical Menu For Blogger/Blog

Image
Today, i am going to publish about a new awesome css3 vertical shadow style menu for blogger/blog.This menu widget is really awesome.This menu widget is suites best for your blogger sidebar.Because this widget is vertical.Hope You will like this shadow style vertical menu.This widget is very easy to put on your blogger/blog.So, lets follow the steps                                LIVE DEMO Adding CSS3 Vertical Menu For Your Blog Go To Your Blogger Dashboard Navigate To Layout And Add A Gadget Select HTML/JavaScript Put The Following Code Inside The Box. <style> .TechBlogGuide_blockmenu{ font: bold 14px Germand; width: 190px; /* width of menu */ } .TechBlogGuide_blockmenu ul{ border: 1px solid #eee; padding: 0; margin: 0; list-style: none; } .TechBlogGuide_blockmenu ul li{ margin:0; padding:0; } .TechBlogGuide_blockmenu ul li a{ display:block; text-transform: uppercase; color: #494949; padding: 10px 15px; text-decoration: none; border-bottom: 1px solid #cacaca;

Add Blogger Official Contact Form To Your Blog

Image
Hello Friends, How are you? Blogger Team launched new official contact form for blogger.As we know that Blogger Team have launched many features in 2013.Through contact form visitors of your blog can ask you any question or queries without disclosing their identity to people.This widget is very simple and clean.The look of this contact form is only three option to fill up i.e. Name, Email & Message.This widget will help you to increase your  blog easily.Because any people can talk with you in privately.So, Lets Follow the easy steps and your are done. Officially Contact Form For Your Blog Go To Your Blogger Dashboard  Navigate To Layout  And Add A Gadget(Screen Shots Below ) Now Choose More Gadget And Click On The Plus Button At Right Side Of Contact Form Click On Save Button  That's All

Metro Classic Windows 8 Style Responsive Blogger Template

Image
Metro Classic template is responsive template for blogger.Metro classic template is like windows 8 look.It is compatible with almost all leading browsers like internet explorer, Google Chrome, Mozilla Firefox, Safari.The color of scheme of this template is eye-friendly.If you will put this template on your blog then your blog visitors will increase.Because this template looks is awesome, it's look like windows 8 style& many more.. Name: Metro Classic Released On: 10, May 2013 Platform: Blogger/BlogSpot Author:www.Templateism.com License: Creative Commons Attribution Features Of This Template  Windows 8 Look SEO-Friendly Featured Posts Widget Auto Thumbnail Posts Related Posts Threaded Comments And Many more...                                            LiVe DeMo   DoWnLoAd

Add All Types Of Alexa Traffic Rank Widget For Blogger/Blog

Image
Hello friends, how are you.Today in this tutorial i am gonna to share about all types of Alexa widget for blogger.Alexa is a leading site statistics company, its provide free statistics for authorized sites.This widget is very simple to add on your blogger/blog.So only you have to copy and make change and just put this widget where you want.Here different sizes of Alexa widget so choose one of them and put it.That's all. How To Install Alexa Traffic Rank Widget On Your Blog? Go To Your Blogger Dashboard>> Layout>> Add A Gadget>> Select HTML/JavaScript. After That Copy The desire Code Listed Below And Paste In It. Alexa Traffic Rank Widget: Style 1 <center><a href="http://www.alexa.com/siteinfo/ http://www.TechBlogGuide.Blogspot.com /"> <script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url= http://www.TechBlogGuide.Blogspot.com /'></script> </a></center>

Add Different - Multi Colored Popular Posts Widget For Blogger

Image
Hi Guys, After a long time today i am going to publish multi colored popular posts widget for blogger.Hope you are enjoying my blog.This widget is really nice for blogger.When you mouse on hover this widget then posts image will rotate.In this way your readers will attract your posts.As we know that popular posts provided by Blogger.Recently we provide a customizing Blogger's popular posts widget.You can apply this code with using only CSS.And it's very easy to install on your blogger.So, lets check below.                                                                         LIVE DEMO How To Add It On Your Blog? Go To Your Blogger Dashboard>> Template>> Edit HTML>> Proceed Backup Your Template Before Editing Your Blog Press CTRL + F And Search The Code Given Below. ]]></b:skin> Now Paste The Code Given Below #PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:5px 0;b

How To Add Follow Button To Your Facebook Profile

Image
In this tutorial , we are going to learn how to add follow button to your Facebook profile.Facebook is the largest social networking site as w know that.Follow button is simply a subscription which is created by Facebook Developers.If anyone Facebook users click your Facebook profile follow button then they can follow your public updates on Facebook.Which You share on your Facebook profile.You can only supplement this follow button if you cross 18.That's why up to now i haven't added this button on my Facebook profile. If you want to increase your blog ranking then always make subscription easy on your blog.This trick is very easy to install on your Facebook profile.Just follow the steps and you are done.So, lets check below. How To Add Follow/Subscribe Button To Your Facebook Profile? Sign In To Your Facebook Account. And Go To Here.  There You Will See A Green Button Named "Turn On Follow" Button.  Click That Button To On Activity Of Follow To Your Fa

The 3 C'S Of Social Media Marketing

Image
Hello Friends this is my First post at Tech Blog Guide.So let me introduce myself first.I am +Rajat Garg   the C.E.O. & Founder of  My Premium Lab .So now coming back to the topic today Social media has become increasingly important on the internet in recent years. In addition to giving people the chance to stay connected with friends and family, gave the opportunity for anyone who runs a small business and create a network for  your specific niche market . In order to make the most of your marketing with social media, it is essential to take note of the 3 C: content, community, commerce. Content The first C is the content to be developed. In social media the value is created by producing and sharing good content . There are many ways to create: write for a blog post or an e-book, create audio interviews or podcasts, offer short video or webinar, just to name a few. There is no reason to use social media to increase traffic to your company's website if you have nothing n

Awesome CSS3 Widget With Zoom & Shrinking Effect

Image
Hello, guys today i am gonna to share about awesome CSS3 widget with zoom and shrinking effect for Blogger.In this tutorial by using this widget you can link your social media profile like Facebook, Twitter, Google+, and RSS.This widget is very easy to install on blogger. So, lets Check below. LIVE DEMO How To Add It On Blooger Blog? Go To Your Blogger Dashboard Navigate To Layout And Add A Gadget Select HTML/JavaSript Paste The Code Below In It. <style> /* CSS reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {     margin:0;     padding:0; } html,body {     margin:0;     padding:0; } table {     border-collapse:collapse;     border-spacing:0; } fieldset,img {     border:0; } input{     border:1px solid #b0b0b0;     padding:3px 5px 4px;     color:#979797;     width:190px; } address,caption,cite,code,dfn,th,var {     font-style:normal;     font-weight:normal; } ol,ul {     list-