The Yellow Bulb│Information Worth Sharing

Monday, December 10, 2012

Learn How To Back Up, Restore and Upload a New Template on Blogger

backup restore or upload a new template on blogger

I will give you an idea to learn the 3 basic essential of the new blogger interface, The Back Up/Restore or Uploading a new template. These are one of the most basic methods you must know to have a full control to your data safety. Once you’ve learn how to do this – you will be more confident and at peace. On uploading a new blogger template there are some factors you need to know, first always think what verification codes, scripts you inserted on your existing blogger template that is very important to be restored. Second, on the new blogger interface all your existing gadgets will be restored and remains the same as it is. They may look mixed up on the different positions but you can always arranged them anywhere you like.

Backing Up An Existing Blogger Template

If you are not much knowledgeable on the structure of the blogger xml template it is advisable for you to back up your template, so in case that you made some mistakes and you really screwed it – you can always restore your data.
On Backing up an existing template,
Step 1,

Blogger Dashboard,
Template
Look at the right side and you will see the BACKUP/RESTORE button,
Click that,

View Screenshot Below,

A pop up window will open that appears to be like this,
Click the “Download Full Template” which will prompt you to save your xml file to a specific folder on your computer.

NOTE: When backing up your Blogger template, the file is saved in the format of “template-1234567890.xml”. You can rename it later to avoid confusion.

How To Restore and Upload a New Blogger Template

Restoring your last saved xml data and uploading a new blogger template comes with a one process. You can simply do that by,

Following the step 1 (except the very last part)
Instead you should click the BROWSE or CHOOSE FILE option,
Locate your XML template and hit ok,

You will then see a success message when the process is all complete.

That’s it, you can now do this as often as needed. I hope that this tutorial helps you in some way.

Thursday, December 6, 2012

Introducing Google+ Followers Gadget On Blogger

The Yellow Bulb¦Information Worth Sharing

Blogger Buzz recently released a news regarding the newly added Google+ Followers gadget. A much awaited feature for bloggers. This will enhance your followers visibility by displaying the summary number who followed your blog. Makes it easier for your audience to follow you and grow your readership across the web. You can either connect with them through google+ stream and to your blog. To get started you need to create and connect your google+ page to your blog. If your interested to know how to add this gadget in more detailed manner, just keep reading.

CREATING AND CONNECTING YOUR GOOGLE+ PAGE TO YOUR BLOG

Simply log in to your blogger dashboard
locate your Google+ tab underneath the comments tab
There you will see a button “Create A Page”
Then start filling the information about your blog.
After your done filling the information needed,
proceed to next step……

ADDING THE GOOGLE+ FOLLOWERS GADGET

No fancy work needed,
Just go to your Blogger Dashboard
Locate Layout Tab
Click “Add a Gadget”
Choose “Google+ Followers”

You can now save your template!

That’s all about it, you can also add a google+ plus one button so your audience can easily recommend your post to their google+ stream.

PULSE!

Which one do you prefer? the newly added Google+ follower or the Google Friend Connect? Let me know!

Wednesday, November 14, 2012

How To Add PayPal Donate Button On Blogger

In this tutorial I will guide you step-by-step on how you can add a PayPal Donate Button on your blogger website. If your running a charity or a non profit organization , And you provide helpful tips to your beloved readers , you may probably wanted to receive cash in kind donation’s for your achievements and hard work. And to make it possible we’ll use PayPal to receive & send money securely online. In order to withdraw the cash donations from your Paypal account add your debit or credit card to get verified and withdraw directly to your bank account. Since the code was HTML you can also add this on your pages or blog posts. Now, Lets move forward on adding this in your blog/website.

Creating A PayPal Donate Button

In order to create a PayPal button, Firstly you have to create a PayPal account here its FREE.
After successfully creating your account, and confirming it – You have to Log In.
After logging In, Locate on your navigation menu the “MERCHANT Services” Tab.

Click that menu and proceed by scrolling down.
Find the Key Features menu at the right sidebar

Click/Select DONATIONS on the list
There you will start creating/customizing your Donate Button.

On Step 1, Choose a button type to “DONATIONS”
Insert your Organization/Website/Blog Name
OPTIONAL: You can put a donation ID
Tick the “Customize Button” to set the look & feel of your donate button
Look at the right side for your BUTTON PREVIEW

On Step 2, After clicking the drop down you can now choose your button style
Tick display credit card logos
Set the country & language
OPTIONAL: You can upload your own donate button just click the bullet icon
You can set your local currency but just to make it international, set it to U$D (US DOLLAR).
You can set if you wanted the contributions to be fixed amount or not (PREFERRED).

You can proceed to the next steps but those are absolutely optional.
If your already done, click CREATE BUTTON.

This is the final step on creating your button, Simply copy the HTML code by clicking SELECT CODE.
For the mean time, you can temporarily save it to your notepad
And now we can proceed on installing this on your website.

INSTALLING THE PAYPAL DONATE BUTTON ON BLOGGER

Go to your Blogger dashboard
Layout
Add a Gadget
Choose “HTML & JAVASCRIPT”
And insert your DONATE BUTTON CODE
You can position it on your footer or Sidebar

INSTALLING YOUR DONATE BUTTON ON POST OR PAGES

On Creating a Post or Page, simply switch from COMPOSE TO HTML
And simply paste the code in it.

Feel free to view your site

And see it working perfectly. ENJOY!

Tuesday, November 6, 2012

Must Have - Free PSD Collection For Web Designers

We all loved FREEBIES! Why not take advantage of this high quality & professional designs that we can get all for free. We have massive web designers out there who is very willing to share their hard work to all aspiring web designers with no cost at all. We cant waste so much time on creating awesome / creative designs especially, if you have a very limited knowledge about it - this is the part when we needed premade quality designs that you can access on web, you just need to Google around. And what am sharing you in this post is a bunch of premade , High Quality, Professional, Attractive designs and again – NO COST. Some of it are Login Forms, Subscription Forms, E-Commerce Badges, Read More Buttons, Stickers, Slider Templates, Ribbons, navigations, Download buttons and so much more. This files is on PSD(Photoshop) format and can be accessible if you got a Photoshop installed on your computer, am not really sure what version is most preferred cause this is a random selection from different websites. You can get a free Photoshop fully cracked free download here. And this can be used for E-commerce , Squeeze/Landing Site or any type of website that you wanted to be your master piece. Browse below and let me know how it works for your designs.

PSD Login Form BY blakeceeno

Button In Package: 1

License:

Free For Personal Use

PSD Slider Templates BY freepsdfiles

Button In Package: 1

License:

Creative Commons (Attribution 3.0 Unported)

9 PSD Sticker Templates BY freepsdfiles

Button In Package: 1

License:

Creative Commons (Attribution 3.0 Unported)

Website Badge PSD BY klefue

Button In Package: 1

License:

Free For Personal Use

Pretty little price tag BY Pawel Kadysz

Button In Package: 2

License:

Free For Personal Use

Tiny Sign In PSD BY pixelsdaily

Button In Package: 1

License:

Creative Commons (Attribution 3.0 Unported)

Free Download Now Button BY Buttons

Button In Package: 9

License:

Creative Commons (Attribution 3.0 Unported)

Sale Balloons BY dryicons

Button In Package: 5

License:

Free For Personal Use

Hot Price BY dryicons

Button In Package: 3

License:

Free For Personal Use

Sale Tags BY dryicons

Button In Package: 3

License:

Free For Personal Use

Photoshop empty and vote buttons BYpsdgraphics

Button In Package: 2

License:

Free For Personal Use

CSS3 Buttons Add Classes, Make BYvagrantradio

Button In Package: 20

License:

Free For Personal Use

Psd Ribbon Classic Set BY Matt

Button In Package: 4

License:

Free For Personal Use

Glossy buttons pack PSD BY freebiepixels

Button In Package: 10

License:

Free For Personal Use

Badges and ribbons PSD BY facecjf

Button In Package: 5

License:

Free For Personal Use

Web buttons PSD BY launchedpixels

Button In Package: 10

License:

Free For Personal Use

Some blue UI elements PSD BYlaunchedpixels

Button In Package: 2

License:

Free For Personal Use

Social buttons PSD BY launchedpixels

Button In Package: 6

License:

Free For Personal Use

Curled red ribbon PSD BY PSD Graphics

Button In Package: 2

License:

Free For Personal Use

Rounded Pricing Info Callouts PSD BY Zack Smith

Button In Package: 2

License:

Free For Personal Use

Psd Retro Badges Vintage BY Lee Kennedy

Button In Package: 6

License:

Free For Personal Use

Button In Package: 1

License:

Free For Personal Use

Simple Login Form Psd BY antsmagazine

Button In Package: 1

License:

Free For Personal Use

Saturday, November 3, 2012

Add This Animated Flash Clock's Widget

Animated Flash Clock's for your website. It automatically set's & shows the local time of your readers/viewers country. This can be easily installed on any website by just copying the html code below. We have Analog, Digital, Antique, Neon, Block, 3D and Glowing Clock's on the list. Browse the list below and grab one of your choice.

INSTALLING ANIMATED CLOCKS ON BLOGGER

Go to your Blogger Dashboard
Layout
Add a gadget (add anywhere you like)
Choose HTML/JAVASCRIPT
and paste your desired ANIMATED FLASH CLOCK CODES

NEON FLASH CLOCK

<embed src="http://flash-clocks.com/neon-flash-clock.swf?timeOffset=local&faceColor=0x000000&numbersColor=0xffffff&edgeColor=0xffffff&glowColor=0x000000&glowBlur=10&glowStrength=2&hourHandColor=0xffffff&minuteHandColor=0xffffff&secondHandColor=0xffffff" width=150px height=150px wmode="transparent" type="application/x-shockwave-flash"></embed>

BLOCK FLASH CLOCK

<embed src="http://flash-clocks.com/block-flash-clock.swf?timeOffset=local&backColor=0xFFFFFF&backAlpha=0&numbersColor=0x000000&hourColor=0x000000&minuteColor=0x000000&secondColor=0x000000" width=150px height=150px wmode="transparent" type="application/x-shockwave-flash"></embed>

DIGITAL FLASH CLOCK

<embed src="http://flash-clocks.com/digital-flash-clock-2.swf?timeOffset=local&faceColor=0x000000&faceColorAlpha=0&numbersColor=0x4F77A0" width=150px height=75px wmode="transparent" type="application/x-shockwave-flash"></embed>

ANALOG FLASH CLOCK'S

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-163.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-175.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-154.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed>

<embed height="200" src="http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-156.swf" type="application/x-shockwave-flash" width="200" wmode="transparent"></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-179.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-111.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-95.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

ANTIQUE CLOCK'S

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-133-1.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-6.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-84.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

GLOWING CLOCK'S

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-123.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-35.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-132.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

3D CLOCK

<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-169.swf width=200 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

Photo source: http://commons.wikimedia.org/wiki/File:Antique_Clock_Face.jpg

Advanced Email Subscription Widget For Blogger

Email Subscription Form Widget For Blogger

E-mail Subscription allows your valued readers get fresh updates directly from their inbox. This E-mail subscription is powered by FEEDBURNER so, if you wish to offer an email subscription for your site/blog get your feed burned here & create a RSS account to take advantage of this Subscription Widget. We call it widget cause what you would do on the installation of this is just a simple copy & paste, yes… no more tweaking, just your FEEDBURNER ID needed. I would like to mention the designer of this form but I really forgot the link (Too Bad…) – so if you came across on my site, let me know I would loved to add the credit for your awesome design. Moving forward, This widget is originally created & optimized by me and right now one color is the only available but I will add more different variant of colors on my next post. I hope you will appreciate the little hard work I put into on making this compatible & possible on blogger. Something Unique? is the safe & secured thing below the widget that added a little bit more advanced look. We have two ways of installing this First, adding it on your sidebar Second, adding it below your every post. I made two options since I thought maybe some of you wanted this below your every post. So, lets get started & add this widget in your site.

LIVE DEMO

ADDING THE SUBSCRIPTION WIDGET ON THE SIDEBAR

Blogger dashboard
Layout
Add a gadget
Choose HTML/JAVASCRIPT
And add this subscription code

/*THE YELLOW BULB EMAIL SUBSCRIPTION START*/
<style type='text/css'>
.tybform
{
background: url(http://4.bp.blogspot.com/-Uus2pb_ql2s/UJJopY40-CI/AAAAAAAAEDw/8kT3VmLRRJc/s1600/inputform.png) no-repeat;
width: 200px;
height: 30px;
margin: 130px 10px 0px 50px;
padding: 0px 0px 0px 10px;
font-size: 14px;
font-weight: bolder;
text-shadow:2px 2px 6px #999999;
border: 0;
}
.tybsubmit
{
background: url(http://1.bp.blogspot.com/-2kOMzhRkfCE/UJIEt5OVsoI/AAAAAAAAEBw/asWN3qK5tx0/s1600/subscription+form+submit.png)no-repeat;
width: 107px;
height: 44px;
border: 0;
float: right;
margin: 20px 40px 0px 0px;
cursor: pointer;
}
#emailsubs
{
background: url(http://2.bp.blogspot.com/-fAVMxeFOGIU/UJInlgIVyGI/AAAAAAAAEC0/M5ncx_sa1DM/s1600/subscription+form.png)no-repeat;
width: 320px;
height: 273px;
}
</style>
<div id='emailsubs'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=TheYellowBulb', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='TheYellowBulb'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='tybform' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
<input alt='' class='tybsubmit' title='' type='submit' value=''/>
</form></div>
/*THE YELLOW BULB EMAIL SUBSCRIPTION END*/

ADDING THE E-MAIL SUBSCRIPTION BELOW YOUR EVERY POST

Blogger dashboard
Template
Edit HTML
Proceed
Click “Expand Widget Template”
Press CTRL+F for search shortcut
And Locate this piece of a code

]]></b:skin>

And exactly above/before that add our subscription style

/*THE YELLOW BULB EMAIL SUBSCRIPTION START*/
.tybform
{
background: url(http://4.bp.blogspot.com/-Uus2pb_ql2s/UJJopY40-CI/AAAAAAAAEDw/8kT3VmLRRJc/s1600/inputform.png) no-repeat;
width: 200px;
height: 30px;
margin: 130px 10px 0px 50px;
padding: 0px 0px 0px 10px;
font-size: 14px;
font-weight: bolder;
text-shadow:2px 2px 6px #999999;
border: 0;
}
.tybsubmit
{
background: url(http://1.bp.blogspot.com/-2kOMzhRkfCE/UJIEt5OVsoI/AAAAAAAAEBw/asWN3qK5tx0/s1600/subscription+form+submit.png)no-repeat;
width: 107px;
height: 44px;
border: 0;
float: right;
margin: 20px 40px 0px 0px;
cursor: pointer;
}
#emailsubs
{
background: url(http://2.bp.blogspot.com/-fAVMxeFOGIU/UJInlgIVyGI/AAAAAAAAEC0/M5ncx_sa1DM/s1600/subscription+form.png)no-repeat;
width: 320px;
height: 273px;
}
/*THE YELLOW BULB EMAIL SUBSCRIPTION END*/

Next, Locate this code on your search box

<data:post.body/>

NOTE: IF YOU FOUND TWO OR THREE OCCURENCES OF THIS CODE, PLACE IT ON THE SECOND ONE

If you successfully located the code, add this below/after it.

<div id='emailsubs'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=TheYellowBulb', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='TheYellowBulb'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='tybform' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
<input alt='' class='tybsubmit' title='' type='submit' value=''/>
</form></div>

CUSTOMIZING YOUR SUBSCRIPTION FORM

Don’t forget to replace the Bolded Blue RSS ID above to your own ID.

YOU CAN NOW SAVE YOUR TEMPLATE

I hope this works perfectly on your site too.

ARE YOU CONFUSED REGARDING THIS TUTORIAL?

If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.

50 Useful Photoshop Tutorials For Beginners

Photoshop is a widely used software for editing, enhancing, creating visual images and also animation and 3d effects. A software often used by web designers and individual people as well. There are tons of Photoshop tutorials along the web now a days due to continuous growing of its users. So, Today I want to share some of those enormous Photoshop tutorial out there that you might also find Useful and Helpful for your next project.

CREATE A UNIQUE TEXT EFFECT