Subscribe:

Thursday, 17 April 2014

How to publish your Windows 8 App to the Store

Ready to submit your first Windows 8 app to the Windows Store? Read this walkthrough to guide you through the process
Publishing your app requires a series of steps, we’ll try to walk you through them here!
Log in to the windows store
Submit your app
  • App name
  • Selling details
  • Advanced features
  • Age rating and rating certificates
  • Cryptography
  • Packages (building the app package, running the WACK test, uploading the app package)
  • Description
  • Notes to testers

Log in to the Windows Store


Before you can publish your app, you need a Windows Store account. Go to the Windows Store to register. Remember if you are a student you can get your Store account for free, you can find instructions on how to do that here.
After you log in to the store with your live ID (the one you used for your store account),  go to “Dashboard
If this is your first time logging in since you created your account, you may see a message that says “Before we can list any of your apps in the Store, you’ll need to verify your payment method. Verify your payment method.” When you created your account you entered credit card information. A small amount was charged and then reimbursed on your credit card to validate the card. You need to find your billing statement (or call your credit card company) to find out the transaction amount that was charged.
Select the Verify your payment method link and you will be taken to the Payment account verification screen. When you get there scroll to the bottom of the screen. using the information from your credit card billing statement, enter the amount that was charged or the 3 digit code from the transaction description and select Next.
image
Once you see the message saying “We successfully verified your payment account” You are ready to begin submitting your app!

Submit your app

From the top menu, select “Dashboard” then select “Submit an app” from the menu on the right.
Use the dashboard to see all the applications you submitted and their status in the store certification process. It can take as little as 2 days or as much as 2 weeks for an app to be published after you submit it.
10-31-2012 5-59-14 PM
    There are 8 sections to complete, let’s break them down one by one!
  • App name
  • Selling details
  • Advanced features
  • Age rating and rating certificates
  • Cryptography
  • Packages
  • Description
  • Notes to testers

App name

Your app name is important! It is the first thing a customer sees when they find your app in the store. Be creative! Make sure you don't use names that are trademarked by others or those who own the trademark could ask to have your app removed from the store.
Enter the app name you wish to use and select Reserve App Name. If you get a message back informing you your app name is already in use, you will have to enter a different app name.
NOTE: The app name you enter here must match the Display Name in your app manifest.
image

TIP: You can just do this first step to reserve your app name before you have the code ready to publish. Your name will be reserved for 12 months.
10-31-2012 6-16-56 PM

Selling details

Price - This is where you set the price of your app, and your free trial options. If you choose to charge for your app, pricing can start at 1.49 USD. The price you select may include a sales tax that the customer must pay. Your proceeds will be based on the pretax amount.
TIP: Apps with free trials of some sort usually get more downloads, you can either limit the duration of the trial, or in your code you can limit the features available on the trial version. Use the license Information class to determine if a trial has expired, or if a user is running a trial version. You can find more information about handling trials in your code here.
Markets - Select the countries where you want your app to be available. Selecting a country does not guarantee your app will be published there. There is some content and features that is restricted to certain regions, you could be using a feature that is not available in a particular region yet. You might want to consider the primary languages spoken in a particular country when deciding which countries you select.
TIP: When publishing a game, the countries Korea, South Africa, Brazil, and Taiwan require a game to be rated by a rating board and certified to prove the age rating of the game. If you do not have certificate files to prove you have completed that process, make sure you do not select those markets or your app will fail certification.


10-31-2012 6-19-26 PM

Release Date - If you want your app to be published as soon as it is certified select the first option.

date
Category - Now, select the category that best matches your app, this will affect where your app will be listed in the store, so consider your choice carefully. If a Windows user was searching for an app like yours in the store, which category would they choose to search? It's important to make it as easy as possible for users to find your app in the store. Picking the wrong category can also result in failing certification, because the testing team may not feel the category is appropriate for your app.
Hardware requirements – If your app has minimum RAM or DirectX requirements, you can specify that here.
Accessibility – Only select this check box if you have gone through all the accessibility guidelines and tested your app to ensure it is accessible. Accessibility includes testing for users with low vision or screen readers.

Advanced features

You only need to complete this section if your application supports push notifications (often used to update tiles), connect services such as SkyDrive and Single Sign-On, or in-app purchases. In app purchases is a popular way of making money with apps, the app is free, but a user can make in app purchases improve their app experience. For example, there are games where players can purchase weapons or armour.
If you have not implemented any of the above features you can just leave all the fields in this section blank.

Age rating and rating certificates

This section is to describe the audience for your app and upload your rating certificates. If you can't decide between two age ratings, for example your app has content you feel is suitable for 12 and older, but requires an account that can only be created by users 16 or older, choose the higher age rating. Some countries requires will also require that your app be rated through a ratings board, especially for games. So check the list to see if a market you selected requires a rating certificate. If you try to publish to a market that requires a rating certificate and you do not provide the certificate file, your app will fail certification.

Cryptography

You must declare whether your app calls, supports, contains or uses cryptography or encryption.
There are US regulations regarding the exporting of technology that use certain types of encryption. Apps in the Windows store must comply with these laws because the app files can be stored in the US. These rules apply even if you are a developer in Canada selling apps in Canada through the store. So if your app is doing some type of cryptography or encryption you should read up on the regulations to see if your app requires an Export Commodity Classification Number (ECCN).

Packages

Now it's time to upload your app to the Windows Store. But there are a couple of things you need to do first:Build your package and run the WACK test.

Building the App package

  • In Visual Studio, change the Build type from Debug to Release and Build the solution by choosing Build | Build Solution from the menu.
image
  • From the menu choose Project | Store | Create App Packages…
  • When asked “Do you want to build packages to upload to the Windows Store”, select Yes. and then select Sign In.
  • Sign in with the same email account you used for the Windows Store.
  • Select the app name you reserved to indicate the app for which you are creating a package. If you are resubmitting after a failed attempt to publish or to update your app in the store, you will want to select the checkbox “Include app names that already have packages” so you can see your app in the list.
  • After you select the app name, select Next.
  • Now you must choose which platforms will be able to install your application. If you pick Neutral, you will get a single package with builds that will run on any Windows 8 hardware. If you select individual builds you will get a different package for each build type. NOTE: If you are building an app which requires a lot of memory and processing power and you have not tested it on ARM, you might want to consider selecting x86 and x64 specifically and not including ARM in your release.
  • For the version number, I recommend using the Automatically increment. Otherwise you must make sure the version number in your app manifest file matches the version number on this page.
  • Make a note of the output location, because you will need to upload the file from that location to the store after the package(s) is/are created.
  • Select Create when you are ready for Visual studio to generate the app package.

Running the Windows App Certification Kit (WACK) test

After your package is created, you are prompted to launch the Windows App Certification Kit. This will run your app through a series of tests to chefck for issues that could cause it to fail certification. While it is running you will see the app occasionally launch and close. Do not interact with the app while the WACK test is running.
To start the WACK test select Launch Windows App Certification Kit. This process can take 10 minutes or so. You will know when it is complete because you will see the test summary page informing you if your app passed or failed. The results window does not automatically appear in the foreground, so you may want to occasionally check your task bar and desktop to see if the test is completed..
image
If your app failed, select “Click here to view full report” then investigate and resolve the issues that caused it to fail, then create a new package and try again. If your app passed, you are ready to upload the package to the store.
NOTE: Wondering what sort of issues the WACK test might catch? When I used JavaScript files from the CreateJS library in my solution, my app failed the WACK test because they were encoded as ANSI instead of UTF-8. I had to open each .js file in NotePad and do a Save As, changing the Encode to UTF-8. When I rebuilt the project and package and ran the WACK test again, it passed.
image

Uploading the package

Once your package is created you will find a new folder called “AppPackages” inside your application folder. Inside the “AppPackages” folder is a file that ends with “.appxupload” extension. This is the file you will select when you upload your app.
If you made changes to your app and rebuilt the package, make sure you pick the most recent app package, the version number in the package file name or the date created can help you identify the most recent package(s).
Go to the Packages section in the application submission and then drag your package(s) to the app submission page. (remember if you chose to make separate builds for x86,x64 or ARM you will have multiple packages and you will need to upload all of them to the store.)
You will know when your package is uploaded because you will see it listed as an uploaded package.
Uploaded packages
Description
App Description - This is where you describe what your app does and this is what users will see when they look at your app in the Windows store. If you want your app to be downloaded by a lot of people, make sure to take time to write a good description. Take a look at the descriptions of similar apps in the store, how will your description stand out? Make sure the first couple of sentences grab their attention. Make sure you have a short list of your app's best features. If you offer a free trial, this is a good place to explain how the trial works. There are some good tips on writing your app description here.
TIP: If your app will require anyone to log in to complete certain tasks, you must mention that in your description or you will fail certification.
Screenshots - After you add the description of your app, you will need to upload images of your app including a logo that the will be used to feature the app.
If you don’t have these images already, you can create them using the simulator in Visual Studio. Change the launch option to Simulator using the drop down key in the menu.
Simulator drop down
When the app launches, on the right side of the simulator is a button with a camera icon which will let you to take a snapshot of the screen and put it in your clipboard. Then you can open an app such as Paint paste it and save it as a .PNG file. If your image is larger than 2 MB you may have to use a tool like Paint .NET (which you can download for free) to save it at a lower resolution. You can’t just resize the image because it must be at least 1366 x768 pixels (landscape) or 768X1366 pixels (portrait).

10-31-2012 7-04-54 PM
Keywords – If someone was searching the store, what keywords would they use to find your app? Specify these as keywords to help users discover your app.
Copyright and trademark info – this is a mandatory field where you specify the copyright information for your application. Basically this is where you get to say, whose app is this.
Promotional Images – If you have a great app, make sure you include some extra images so your app has the potential to be featured in the store! Being featured always results in more downloads, so if you’ve done something amazing, make sure to include all the promotional images so your app could be highlighted!
Website – If you have a website for your app or other apps you have built, you can include a link to it here
Support Contact Info – you must provide a way for users to contact you if they have problems with the app. An email address, or a link to a website with a Contact Us option will suffice.
Privacy Policy - One of the main reason that apps fail certification is developers forget to include a privacy statement in the description section. You may think you do not need a privacy statement because you are not collecting email addresses or personal information. However, if your app connects to the internet, or if the app manifest says it connects to the internet (which it does if you used any of the default templates and you haven't changed it) then your app requires a privacy policy. Any app that connects to the internet fetches the user’s IP address. If your privacy statement is less than 200 words, you can put the text directly in the About page of your app and on this submission page (the privacy statement must appear in both places). If it’s more then 200 words, you need to include a URL to a website that displays your privacy statement. Below are some resources to help you figure out if you need a privacy statement, and how to add a privacy statement
Notes to testers
This is a place for you to add any notes you wish to share with the people who are testing your app for certification. For example, if your app requires a login to an online service, you must provide the login information for an account the testers can use. If your app is only intended for a limited audience, it is good to mention that in notes to testers as well, because your app can be rejected because it does not appeal to a wide audience. So, if you are making an app for a specific audience, make that clear in the description and notes to testers. The information you enter in this section is not seen by users of the app, it is only seen by the team who tests your app to see if it is suitable for the Windows Store.

Submit for certification

After you have completed all the sections you should see a checkmark beside every section. If there is a section without a checkmark, go back to see if you either missed a mandatory field, or you have a field entered incorrectly.
image
If every section is marked as complete you can now select Submit for Certification.
Congratulations! You have just submitted your app to the store!

Once you submit your app, it will take up to 2 weeks to get certified, you can track the progress of your app in the main dashboard. You don’t have to keep coming back here to check the status. If you fail certification, you will receive an email and a detailed error report explaining why it failed so you can correct any errors and resubmit. If you pass certification, you will receive an email with a link to your app in the store!
10-31-2012 7-15-52 PM 
The Windows team has created this great checklist to help you prepare and organize all the required info to make it easier to enter the info when you submit an app.
If you are a Canadian don't forget to register for the Developer Movement to see if you can get rewards for your app!

Monday, 7 April 2014

How to set up Video Chat in Facebook

Video chat facility on Facebook powered by Skype is now available to use. You can easily install and intergrate Facebook video chat option in your Facebook account.

To do so, follow these simple steps given below:

  • Go to this URL, and click on get started.


  • Suddenly your Chat interface will be changed and it will prompt your to set up few things.
  • Now click on Cam symbol appearing on chat window of  any of your friend.


  • A notification will appear and guide you to download the facebookvideochat.exe plugin on your computer.

  • Now wait until the plugin will get installed.


  • And its all done now, click on the Cam symbol to make a video call.
  • Once your friend will answer the call, you will start seeing each other.

It’s all done! Now enjoy the video calling with your Facebook friends and family easily.

How To Add Facebook Like Box In Blogger Blog


When you start your Facebook page you ask your friends and family members to like it and after that it all depends upon the content you write. If people like your content they will voluntary like your Facebook page. But still you need to provide them with an easy method of doing this. Facebook like box allows your visitors to join you easily and they don't have to find you manually. Facebook developers have made this thing very easy to integrate a Facebook like box in to your Blog by adding a few lines of code in it. No let us take a look at the steps you need to follow.


How To Add Facebook Like Box In Blogger Blog.
  • This process includes the editing of your Blog's template, so it is recommended to take a backup of your Blog. First click on the template from your Blogger Dashboard. Then click on Backup/Restore and download the template from the pop-up window.
  • Now that you have taken the backup, you are ready for the process. Visit the FacebookDevelopers.
  • You will see a window like the one shown below.


  • Customize the look and feel, height, width of your Like box from this window.
  • Uncheck the show stream if you don't want the latest posts with this widget.
  • Uncheck the header checkbox if you don't want to display "Find us on Facebook".
  • Once you are done with the customization, click on Get code. It would pop-up a window like the one shown below.



  • Click on Edit template from the Blogger dashboard. Copy the code 1 from the above window and paste it just after the <body> tag.
  • Now save the template and click the Layout button.
  • Click on add a gadget from your sidebar. Add HTML/JavaScript gadget and Paste the code 2 in it.
  • Now you are done. Save the arrangement and click on View Blog.

  • You just added a Facebook like Box in your Blog. If you need any help you can comment here. You should also see other Blogging and SEOtips on Unziptech, it will help you improve your Blogging experience.
  • If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumble upon or giving us a link back via the links below. Stay tuned for more tech updates.

Add Flipper Sharing Widget Below Every Post In Blogger


 
How To Add Flipper Sharing Widget Below Every Post In Blogger?
  • First for All Go To Blogger.com > Design > Edit Html
  • Find <data:post.body/> Using CTRL+F
  • Copy the code below and paste it just after <data:post.body/> tag 

<style>
/*--------Flipper Sharing Widget ------*/
.flipper a {
display:block;
height:48px;
width:48px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwu1g08DLRFDIW3LIJ9nSVLTGA3Ia0lDpXmFa6CQqqO0bMrhn-9XawWxejBXR_xFekZOTVLWtKG1qilDeSqXNwiCAvFeLZqny5wPDFUnrx3Z2bI1SnrS2iLEZsC9T22rcRRSdu5Ie1FYbz/s1600/flipper.png) no-repeat;
-webkit-transition: ease-in 0.15s all;   
-moz-transition: ease-in 0.15s all;   
-o-transition: ease-in 0.15s all;   
-ms-transition: ease-in 0.15s all;   
transition: ease-in 0.15s all;
cursor:pointer;
}
.flipper a.googleplus {
background-position: 0px -348px;
}
.flipper a.googleplus:hover {
background-position: 0px -406px;
}
.flipper a.pinterest {
background-position: 0px -464px;
}
.flipper a.pinterest:hover {
background-position: 0px -522px;
}
.flipper a.delicious {
background-position: 0px 0px;
}
.flipper a.delicious:hover {
background-position: 0px -58px;
}
.flipper a.digg {
background-position: 0px -116px;
}
.flipper a.digg:hover {
background-position: 0px -174px;
}
.flipper a.stumbleupon {
background-position: 0px -812px;
}
.flipper a.stumbleupon:hover {
background-position: 0px -870px;
}
.flipper a.technorati {
background-position: 0px -928px;
}
.flipper a.technorati:hover {
background-position: 0px -406px;
}
.flipper a.twitter {
background-position: 0px -928px;
}
.flipper a.twitter:hover {
background-position: 0px -986px;
}
.flipper a.facebook {
background-position: 0px -232px;
}
.flipper a.facebook:hover {
background-position: 0px -290px;
}
.flipper a.reddit {
background-position: 0px -580px;
}
.flipper a.reddit:hover {
background-position: 0px -638px;
}
.flipper a.rss {
background-position: 0px -696px;
}
.flipper a.rss:hover {
background-position: 0px -754px;
}
.Pleaseshare{
margin:10px 0px;
color:#333333;
font-weight:bold;
font-size:20px;
font-family:sans-serif;
}
</style>
<div class='flipper'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="Pleaseshare">
Please Share it! :) </div>
<!--Google Plus-->
<a class='googleplus' expr:href='&quot;http://plus.google.com/share?url=&quot; + data:post.url' rel='external nofollow' target='_blank' title='+1 it :&gt;'/>
<!--Facebook-->
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :&gt;'/>
<!-- Twitter -->
<a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :&gt;'/>
<!-- Pinterest -->
<a class='pinterest'  href="http://pinterest.com/" rel='external nofollow' target='_blank' title='Pin it :&gt;'/>
<!-- Delicious -->
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :&gt;'/>
<!--DIGG-->
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='external nofollow' target='_blank' title='Digg this :&gt;'/>
<!--Stumble-->
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :&gt;'/>
<!-- Reddit -->
<a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank' title='Add this to Reddit :&gt;'/>
<!--RSS -->
<a class='rss' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Bookmark plz :&gt;'/>
</b:if></div>
<div style="clear:both"/>
To Change The Color Of The Text That Appears On The Top Of The Widget Edit #333333

Add Simple Subscribe Via Email Box Widget To Blogger

How To Add Simple Subscribe Via Email Box ?
  • First for All Go To Blogger.com > Design > Page Elements > Add a Gadget
  • Choose HTML/JavaScript from the list of the gadgets
  • Copy and paste the code below in the content box.
<style>
.rb-email{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9130zUL5GCwmEatrdzG5kC0rI2Zr9tYnyiUnHlfj19WeoKMa6pnuEC3fiNHH2uBTlVOaHv3jij9zqCh_joWlf2cdGFgreHs-l_z3al2elwLPmJsD4VXWR7Siw7hyI0wIyfxn1MAE8_ZWU/s1600/email.png) no-repeat 0px 12px ;
width:300px;
padding:10px 0 0 55px;
float:left;
font-size:1.4em;
font-weight:bold;
margin:0 0 10px 0;
color:#686B6C;
}
.rb-emailsubmit{
background:#9B9895;
cursor:pointer;
color:#fff;
border:none;
padding:3px;
text-shadow:0 -1px 1px rgba(0,0,0,0.25);
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
font:12px sans-serif;
}
.rb-emailsubmit:hover{
background:#E98313;
}
.textarea{
padding:2px;
margin:6px 2px 6px 2px;
background:#f9f9f9;
border:1px solid #ccc;
resize:none;
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1);
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;
width:170px;
color:#666;}
</style>
<div class="rb-email">
Subscribe via Email
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Yaqoobzone', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here...&quot;;}" onfocus="if (this.value == &quot;Enter email address here...&quot;) {this.value = &quot;&quot;;}" value="Enter email address here..." type="text" />
<input type="hidden" value="pctrickstou" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="rb-emailsubmit" value="Submit" type="submit" />
</form>
</div>
  • Replace pctrickstou with your feed title/username

Add Stylish Subscription Box With Social Media Buttons Below Each Post In Blogger

Adding subscription box below your each post is another best way of increasing your blog subscribers. This widget comprises of a subscription box, RSS link, twitter link, facebook link, and google + link. It will appear at the bottom of your post and this is one of the best way to get your readers attention.

How To Add Stylish Subscription Box With Social Media Buttons Below Each Post In Blogger ?
  • First for All Go To Blogger.com > Design > Edit Html
  • Find <data:post.body/> Using 
  • CTRL+F
  • Copy the code below and paste it just after <data:post.body/> tag 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
form.feedburner{
margin:20px 0 0;
display:block;
clear:both;
}
.RBstyle{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeyuQgPVzpoHb3WJHg8rzpIq73-kVnbSBcl91A_QKQqH6I4LYeWp4RmCZ0i5-OYXIrpXJgr6RaNTgJcArQqnPipiwc90X4kpfQEn7RT_Unv44B4XPZCk7LheJ-SaWqdoWwGjjLJ7NWYzC7/s400/email_icon.png) no-repeat scroll 4px center transparent;
padding:7px 15px 7px 35px;
color:#666;
font-weight:bold;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
.RBsubmit{
color:#666;
font-weight:bold;
text-decoration:none;
padding:6px 15px;
border:1px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 4px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#emailwidget-outer {
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-goog-ms-border-radius: 10px 10px 10px 10px;
border-radius: 10px;
background: none repeat scroll 0 0 transparent;
border: 1px solid #D3D3D3;
padding: 8px;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
width:480px;
}
#emailwidget-outer:hover{
background: none repeat scroll 0 0 #FFF;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
}
#emailwidget-outer td{
padding:3px 0;
}
</style>
<center>
<div id='emailwidget-outer'>
<div id='emailwidget'>
<table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
<tbody>
<tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
<td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 22px; margin:0px 0px 5px 0px; '>Get free daily email updates!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=pctrickstou&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='Realcombiz'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='RBstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/>
<input alt='' class='RBsubmit' title='' type='submit' value='Submit'/>
</form>
</td>
<td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'><p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px; '>Follow us!</p>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=pctrickstou' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbLYQ39A3GBbaTHvmYAluV0SZx-ZFMFvBd2tGNuoBve5gtlQDIrramGsVeu3WHA1FKNYXzZM-O9ks_PdFwQ8nByIm_Q8NeScSuXLXqaJv6Vezc_paizqH83Owk4Jp3BvIYzWMdyzXksw/s1600/rss-30×43.png'/></a>
<a href='http://twitter.com/poornagollakoti' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfwqMD6NhHYLEkmbSewBsIo_bbhyphenhyphensPTqGqYRaAaUPPqfDTZBZ2Mx_xDUFR0qY7eGtsQAuypb-kEFGRpUsxwQQyDqBghd5WI3LRuP1Dm51IwFKcgM5BfgrUoSTWJ6lkzcU8tT1d7AWeWZE/s1600/twitter-30×43.png'/></a>
<a href='http://www.facebook.com/HashmiWorld4U' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi43PEMS40bNvdBJuDOAeY635qFAj4ToiASKua6tuT5gI6crMqe_Pj9BondMu4FSFlDkvQI8BSaiZfGOd5MlswWbnaerhDEsAloj2K8ErZMShUB438NKQ9eXPZnVBnv0U5GCg1FbYBDL5Y/s1600/facebook-30×43.png'/></a>
<a href='https://plus.google.com/104283015279880391921' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifOHdG33evhgc0LZNj-f-R7cvsknk9Y11JL-g1H9fRQSpCZhhvOw1bcHuQeSNG9HLMQoZfWfZXU10sATMu5yG76P0VfaaPWK-PsTB3WxHm695gHXueMUPoQBvOhplg-I9NMIZhHT20U4o/s1600/googleplus-30×43.png'/></a> 
</td>
</tr>
</tbody></table>
<div align='right'><span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://yaqoobzone.blogspot.com/2012/10/how-to-add-stylish-subscription-box.html' style='text-decoration: none;' target='_blank'><font color='#ffffff' decoration='none'>[Get this widget]</font></a></span></div>
</div></div>
</center>
</b:if>
Please Make These Changes : 
  • Replace pctrickstou,pctrickstou with your feedburner username.
  • Replace pctrickstou with your Twitter username.
  • Replace pctrickstou with your Facebook Page username.
  • Replace https://plus.google.com/104283015279880391921 with your Google+.

Add Beautiful Social Subscription Widget To Blogger






How To Add Beautiful Social Subscription Widget To Blogger
  • First for All Go To Blogger.com > Design > Page Elements > Add a Gadget
  • Choose HTML/JavaScript from the list of the gadgets
  • Copy and paste the code below in the content box.
<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqSHRn-LwkJtOuhCqQ-4UG6Wx_Hw-B4c91uLK17ND29sDChwm9hLRLRoavGkVx7MwslC0-i4PWLN5yKWaBgs5ujuMvM6kXhNxO-Jxpll_KW8QoAwLdfkibx7grg3eev8dtCnTvkRHCyzE/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-cNor59igFNSaqjW-HbVPe9PZPvVtc8RmYAIsUwQ9BVrqDb1uAfBrFQ2-AQtShnab9zfcfA7pHp2yPRsSNZo85gSLn0MAVZs0Tn48FzFE6IMZhQ1TcqCPrdd9gMR4rwSqYWa2GxiPJI8/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://www.facebook.com/SoftTechSpot"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhmTXHopN7_sn_hXZ-AVTxuEmfjdOk_odQ0HMukTwObJpULTQJFflJRs1QJdvnmM3Yhp1JOmMKinuBKj3mWjrgWe_dLozBS4rsh1g5C_c-bcxOKK8_j9mbpbNHF-lLufHl26tM3fj1BYlj/s1600/Bloggertrix-facebook.png" /></a>
<a class="social-icons" href="https://twitter.com/poornagollakoti"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7qMHHVr4e48cdiUkJ7PMApwt-FIKf1FExK9njlZBIHkayqEOPoaNeWea1iySB7io-KoyOS_Wv4Uw-_TWcIkvUif61-sAyJmVKSvRcQWqe07e0mCe861F-DCJhNOYwtQoLaOWrSfPPRBet/s1600/bloggertrix-twitter.png" /></a>
<a class="social-icons" href="https://plus.google.com/b/100702882701565711888/100702882701565711888/posts"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOeCCabhyzLf8FQ5Ya6SF8QYDgOrWWAZz2vCHxCV3wpAzBKChXTGroE8j84wer1rA-lL2sXONKCk_mHNVc13Vb5mpYKGGsO5ujBZ_eK2O6IxL02EaGx-JaSzBMEVdXglkA7oihlveV0nvd/s1600/Bloggertrix-Googleplus.png" /></a>
<a class="social-icons" href="http://feeds.feedburner.com/SoftTechSpot"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKr4jVinpOAQ4Lb-b4NMA_ZVP_a92oXRgYZlqfFDfWNKsERzInhW6epqldRZ_K4EfSQb4215szVOSOUO3AbtAxC8QDipv-IpTJgjfCWoqFUC_Vuo6z4Wh6L8allZtgfYFKQQBq5BeIZqZ2/s1600/Bloggertrix-Rss.png" /></a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=SoftTechSpot" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=SoftTechSpot', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="way2usefulinfo" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>
  • Replace all highlighted colors.

Add Simple Recent Posts Widget In Blogger

 
How To Add Simple Recent Posts Widget In Blogger?

  • First for All Go To Blogger.comPage Elements > Add a Gadget
  • Choose HTML/JavaScript from the list of the gadgets
  • Copy and paste the code below in the content box.
 




1: Recent Posts Widget With Snippets

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://hashmiworld4u.blogspot.com/2013/10/add-simple-recent-posts-widget-in.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://HashmiWorld4U.blogspot.com" title="Recent Posts Widget">Tricks World</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7MQ3WVL73468mAPmc1UDoEMHHHyVBjpLiOAcQ0ZU6O4s9XzY6xwRWOhcK31XdlBmaDIDViBXjPnV1iMqYU_pmtdcAoVI3wv6wCzQi5k11gax_xGcTRsPszShfpsQ7vmIoaV0AYIlTX-P/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>
 2: Recent Posts Widget Showing Post Titles Only
<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://hashmiworld4u.blogspot.com/2013/10/add-simple-recent-posts-widget-in.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://HashmiWorld4U.blogspot.com" title="Recent Posts Widget">Tricks Worlds</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css> 
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgf7MQ3WVL73468mAPmc1UDoEMHHHyVBjpLiOAcQ0ZU6O4s9XzY6xwRWOhcK31XdlBmaDIDViBXjPnV1iMqYU_pmtdcAoVI3wv6wCzQi5k11gax_xGcTRsPszShfpsQ7vmIoaV0AYIlTX-P/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

  • Change 5 (option 1) and 10 (option 2) with the number of posts you want to display. 
  • Change false to true if you want the posts dates to appear 
  • Change 100 (option 1) if you want more characters to be displayed.
  • To change the color and font size of the links, modify the values in blue (links) and violet (font-size)
  • To change the style of posts summary, modify the values in green (color) and orange (font size)
  • Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example: 
http://www.your-site.com/feeds/posts/default....
Well Done!

Add Floating Share Buttons Widget in Blogger

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
How To Add Floating Share Buttons Widget in Blogger
  • First for All Go To Blogger.com > Design > Edit Html
  • Find <b:includable id='post' var='post'> Using 
    CTRL+F
  • Copy the code below and paste it just after <b:includable id='post' var=post'> tag 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
position:fixed; bottom:10%; margin-left:-60px; float:left;
width:60px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibbDQi8B7EUyYOlXUA6lNPIaiu2KrhaOfLir3MA9vJe-m4F4TlrjtGQLbW0e8L5H_fWWwd-Nne4cZq3TiI8s9I-sxI72Z7BE5vmcAdM6RnnLItQ37TiewP8dhlUBI1yiao8jYPkc6kzgVV/s400/gc_social_sprite.gif&#39;) no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibbDQi8B7EUyYOlXUA6lNPIaiu2KrhaOfLir3MA9vJe-m4F4TlrjtGQLbW0e8L5H_fWWwd-Nne4cZq3TiI8s9I-sxI72Z7BE5vmcAdM6RnnLItQ37TiewP8dhlUBI1yiao8jYPkc6kzgVV/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>
<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='pctrickstou'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.pctrickstou.blogspot.com/2013/07/add-floating-share-buttons-widget-in.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>
  • Replace poornagollakoti With Your Twitter Username..

Add Css Social Widget In Blogger

 
 
 
 
 
 
 
 
 
 
 
 
 
How To Add Css Social Widget In Blogger 

  • First for All Go To Blogger.com > Page Elements > Add a Gadget
  • Choose HTML/JavaScript from the list of the gadgets
  • Copy and paste the code below in the content box. 
 <style type="text/css">
.btnt-chronicl-social {  width: 320px;  margin: -10px;  }
.btnt-chronicl-social ul {  margin: 0;  padding: 0;  }
.btnt-chronicl-social ul li {  list-style:none;   padding: 0; text-transform: none; }
.btnt-chronicl-social ul li a {   color: #fff;   display:block;  }
.btnt-chronicl-social ul li a:hover {  color: #c9c9c9;  background-color: #333;   }
.btnt-chronicl-social ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 10px center #F87E12; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 10px center #4CACEE; background-size: 20px; padding: 17.5px 45px;}
.btnt-chronicl-social ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 10px center #3B5998; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 10px center #D44937; background-size: 20px; padding: 17.5px 45px; }
.btnt-chronicl-social ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; background-size: 20px; padding: 17.5px 45px; }
</style>
<div class="btnt-chronicl-social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/pctrickstoU">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/poornachandra">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/pctrickstoU">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/104283015279880391921">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/in/YourUserName">Connect with me on LinkedIn</a></li>
</ul>
</div>
Change all Bold Red words with your Url's.


  • Replace pctrickstoU with your feedburner Feed ID
  • Replace pctrickstoU with your facebook Page ID
  • Replace poornachandra with your twitter ID
  • Replace https://plus.google.com/104283015279880391921 with your Google+ ID 
  • Replace http://in.linkedin.com/in/YourUserName with your Linkedin URL

Add SpiceUpYourBlog Style Social Widget In Blogger

SpiceUpYourBlog is a Popular blog which covers topics like Blogging Tips, SEO etc. You must have visited this blog before and if you did, you must have noticed its awesome social widget. The Social widget has a nice spinning effect on mouse hovering.this is very cool widget.Its main feature is it covers all major social links facebook, twitter, feedburner feeds, google+, Pinterest.It changes your blog look attractive.



 
 
How To Add SpiceUpYourBlog Style Social Widget In Blogger?

  • First for All Go To Blogger.com > Page Elements > Add a Gadget
  • Choose HTML/JavaScript from the list of the gadgets
  • Copy and paste the code below in the content box. 
 <style>
#social img {
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
#social img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
.CSS_LIGHTBOX_BG_MASK
{
background-color:#990000 !important;opacity: 0.8 !important;
}
.post img {max-width:95% !important;}
--></style>
<center><div id="social"><a title="Grab Our Rss Feed" href="http://feeds.feedburner.com/pctrickstou"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJomSuhAq2Fd9QzGOd9w2adRNfAfv6iuflyyaR_OqKT_wFJg7Uv8LO1dx1EWg-TEu0nMBjyBKaaCN531PMO2e4fI1XlCtRCxZLj9mbsywPmMx0PbfEEZu8rLkkVaqm4Y3rYYLeRDVYh_u6/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Get Free Updates Via Email" href="http://feedburner.google.com/fb/a/mailverify?uri=pctrickstou&amp;loc=en_US"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNyQAr0GogN4yxjxo-HP2YxzGMkAFXykhhLQ8iZ8nRdwEV1FLSR_pkVU5VDDzynTGPIG2GB3hyJXpXOx8o59d7G6WdK-i0ATnylbc82JqI6a-OUd0wnLiJRwGh9ORdVpS5Oq9LugzSPp3l/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Like Our Facebook Page" href="http://facebook.com/pctrickstou"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOaVvHfHHzjfcQdIcRzxGgOCPjoa6nzenKeW-8Oa3dDaSET3eKVteVD9cJJCtonUsIAiZ_xB2XOsD9gw8Cwf-vFAbV-GD6vQtD1IT_zLMrSwMoYQ8ZBMe7mJbpRoWf3nmdTSVsfpKLwGtR/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a rel="nofollow" title="Follow Our Updates On Twitter" href="http://twitter.com/poornachandra"  target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyOCKnXVw7ufH0NvyhGc3LqjZiv0KN31b0ycXQuqv10EKPVKuxPgDm1LsTLJpkuo6RGQ4Oixu_lcLselChsP6kTPq-C2daK0hS2XavYg8yIxTSq77J0QkvbXds5sLRf0lGhLnZnnFeL4r2/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a><a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/104283015279880391921" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu3_L81T3z5pDJAYCAWwYxJU1ibXKoq0OBTVkrAFsKyq7o_iWp3r2Rs9TVoIXEVTgtiJUYbrhLhK7ppMFriP5Yz4aVLAYAqkmwKRQwbLhxqOKAib-VTDDDFZ9L-hnjF9jKFY71pe4-9mg9/s1600/GOOGLE-PLUS-48x48.png"/></a><a title="Follow Our Pins" rel="nofollow" href="http://pinterest.com/YourUserName" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXhMadJ6JX7gGeF0KDjp9uiHMtlXz2Z1EZzcYZ23OuwovVGQ7QKrN-8n1ylCxuTxXCBSUecE4w2968gpaxrqOUBw7iUjZzu4JLY2OqZIyNmv2-0rlQraLa_lDRgz8o-XRdmDbQxBjhzWOz/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a></div></center> 
Change all Bold Red words with your URL's

  • Replace pctrickstou with your feedburner Feed ID
  • Replace pctrickstou with your facebook Page ID
  • Replace poornachandra with your twitter ID
  • Replace https://plus.google.com/104283015279880391921 with your Google+ ID 
  • Replace http://pinterest.com/YourUserName with your Linkedin URL
Well Done!

Pc tricks
Powered by Conduit Mobile