Showing posts with label widgets. Show all posts
Showing posts with label widgets. Show all posts

Mar 4, 2013

Using blogger tags to beautify template and creating plugins

Alright, long time without making a post huh.
On today's post i decided on making a simple tutorial on blogger, creating plugins by adding short tags and features to template

Blogger, add link to website

Blogger add link to website plugin Demo: just drop down to post end.
Uisng blogger tags we can get currect url easily.
Go to Blogger > Template > tick Expand widget template and search for:
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
 Above it paste this code:
<span style='color:#666;font-size:11px;font-weight:bold'>Add this post to your website</span>
<textarea onclick='this.focus();this.select()' onfocus='this.select()' readonly='readonly' style='width:100%;outline:none;height:60px;padding-right:12px;color:#333'>
<data:post.title/> | <a expr:href='data:post.url'><data:post.title/></a>
</textarea>
 and you're done

Title tag seo

Using this method you can easily self specify the way the title tag can be shown in the page.
Again go to Blogger > Template > tick Expand widget template and search for:

<head>
At the top (most of cases) you will find this piece of code
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/> - Web Developement blog, Tutorials on Php, Mysql, Jquery with examples</title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>
What it does is, if homepage display some title, if post display post title and page title.
You can easuly costumize it on your own, ex showing only blog post without title (seo), ex:
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <title><data:blog.pageTitle/></title>
    <b:else/>
    <title><data:blog.pageName/> - <data:blog.title/></title>
    </b:if>

Adsense tips

Meta keywords

They do not have any seo benefit anymore for most of search engines like google and bing.
The only purpose of using them is defining what type of ad category should be shown on the site, also for showing ads with high CPC(cost per click)
The best tool on finding this keywords is Google keyword tools.
After you got some nice keywords, all of them should not pass 200-500 chars then find the <head> part and below it type:
<meta content='keywords, here' name='keywords'/>

 Showing ads above post

Search for
<data:post.body/>
the second result and above it add your adsense code.
First of all you shoul encode the adsence code the paste it above just like this:
&lt;script type=&quot;text/javascript&quot;&gt;&lt;!--
google_ad_client = &quot;ca-pub-ID&quot;;
/* post */
google_ad_slot = &quot;ID&quot;;
google_ad_width = 336;
google_ad_height = 280;
//--&gt;
&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot;
src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot;&gt; &lt;/script&gt;
Hope you like this simple tips i made, also ill create the socond part soon on using blogger template functions.

Nov 17, 2012

Donate Button With Photoshop

Hi I am the new contributor on this site and this is my first tutorial.
So today we are going to make a Basic donate button for Paypal.
Donate Button With Photoshop

So lets get started by creating a new file on photoshop.

Photoshop buttons


Then set the document size 92x26 pixel resolution 300 pixels per inch, CYMK colors and transparent backround.


Photoshop Button Tutorial


Then we put some guides to our file in order to help us.
Then we create a new layer and we select the Rounded Rentangle Tool.





After we have dragged a Rounded Rentagle we will ad some colors. So we select the layer of the element and we right-click and select blending options.




And we selecte the following parametres:









 And that we've got by far:




Next we Rasterize the Layer by right-clicking on the layer and selecting Rasterize Layer





Then we make a new layer and we select the type tool and we write Donate






*I have added some effects on the text but you can leave as it is or you can experiment until you got you 'style' also you can use your favorite font.

Now we make a new layer and select again the type tool and we make the $ sign next to the text.






And thats all if you like you can add whatever you like to do it 'ala your style'
So we save by clicking File , Save us and select the folder you like to save it type the name of your file and Save it as .jpg.


Now go to http://www.paypal.com and log to your account .








Then Click on the menu bar where it says Merchant Services 












On the right side down ia a box says Donations click that one and something like this will apear to you. Fill all the areas according to the instructions.








When you finish click create button.





Now you should copy the whole scipt and create and new html file in order to place the script.





Your code should be like this

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="KJRZCTWPKFTSL">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>


Now replace the this line
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" />

With this


<input type="image" src="yourimagepath.jpg" />



And add it to your site in order to have some income.

Thank for reading 
If you have any questions or problems please let me help you!

Jul 22, 2012

Best blogger social media sharing widgets of 2012

blogger sharing social widgets
Here is a list of best blogger sharing widgets of 2012, starting from the most used to the just published.
Blogger dashboard is not the only place where you can find widgets, with the easy to build interface blogger widgets are taking an inportant part on social media sharing.

Fixed Position Scrolling Sticky Bar blogger widget
Now days concept scrolling bar or sticky bar has becomes very popular because of their attention grabbing capacity,they quickly catches any ones attention on them that's why I am also using a sticky bar(hellobar) on my blog.

2- Social sharing widget buttons
social sharing widget
The area just below your post titles have more impressions i.e. that area is more viewed by your visitors and if you add social share or bookmarking buttons such as the new google+ then there are more chances of getting more likes, digs, stumbles and +1'd.

Presenting yet another beautiful social media connect widget that lets your visitors to search your blog, subscribe to your RSS Feeds, follow you on twitter, follow you on Facebook and share your blog with over 350+ social media networks.

social bookmarking widget sharing is sexy
I being a blogger user for quite a long time, still love to give back to the community one way or other. This time again, I have tried to give back to the community by making the new version of Sexy Bookmarks compatible with blogger.

MintShare – Pure CSS & HTML Based Social Share Widget
Hundreds of social bookmarking plugins / widgets available on the Internet. So you may ask, why do we need another. Ok, let me tell you why we made MintShare in a simple way.

blogger sharing floating widget
Till now we learned and created many floating social sharing buttons but those button widgets in fact do not slide when the user scrolls the page up or down.

best blogger sharing widgets of 2012
There are so many types of sharing widgets are available in web which you use in your blog to became your blog more share able and you choose your best sharing icon and you are satisfied with that, but What? if your visitors can’t find their Share Button in your site which they use and want to share your article with their friends circle.

Ok the last one!
its not a sharing widget but it is made by us