Home | Looking for something? Sign In | New here? Sign Up | Log out

Tuesday, 29 November 2011

| | 0 comments | Read More


4 CLICK TWITTER INSTALLER.


FIRST CLICK : Click the button below to start the installation process :




This is the popup window you will see :


                          



SECOND CLICK : Fill in your Twitter Username instead of 'YourID' , customize title as you like instead of 'My Tweets' and type in the number of tweets you want shown instead of 'TweetNumber'. Then click Customize button.




THIRD CLICK : On clicking Customize button the 'Add Widget to My Blog' button will get activated. Click it. You will get the 'Add Page Element' window. See Picture below :





FOURTH CLICK : In the Add Page Element window select the blog you wish to add the gadget to (if you have multiple blogs in one account). Then type in a title "My Tweets" for the gadget. Lastly click 'Add Widget' button. The Page Elements subtab of Layout tab will open with the message that the widget has been added to the blog.




You can use this installer to add anyone else's tweets also. Just fill their Username instead of yours. The twitter gadget will adapt the styling of your blog. Enjoy

| | 0 comments | Read More

Add Google Calendar with Google Web Elements.


Add Google Calendar with Google Web Elements.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!
Here is an easy way to add Google Calendar to your blog using Google Web Elements.



As shown above you can add it in a post or in a HTML gadget in the sidebar. You can also choose the Agenda view instead of the Monthly view shown above.


With Google Web Elements you can show CalendarConversation (Comments Gadget from Google Friend Connect), Custom SearchMap (Google Maps), NewsPresentationsSpreadsheets and YouTube News at present and more will be added soon. They are all built by Google so no worries about third party hacks


You can also earn money with the The Custom Search element which displays Ads. by Google and you can choose to share in the revenue by associating your AdSense publisher ID..........................



ADD GOOGLE CALENDAR WEB ELEMENT


To add the Google Calendar Web Element follow these steps :

1. Login at Google Calendar.

2. Click the down arrow next to calendar name in sidebar.

3. Select 'Share This Calendar' from drop down menu.

4. In right hand pane click the 'Calendar Details' link/tab at the top.

5. Scroll down and click the orange XML button under Calendar Address.

6. Copy the link in the popup window.

7. Go to Google Web Elements.

8. Click Calendar link in sidebar.

9. Paste your calendar address copied in 6. above in the Calendar Address text box.

10. Customize options : Choose Monthly or Agenda view and size. Choose a width smaller than width of your posts column or you will have to increase blog width.

11. Copy the code given below and paste it in Edit Html tab of Post Editor and publish post or paste in a HTML gadget in sidebar.


| | 0 comments | Read More

Google Map with Markers in Blog.


Google Map with Markers in Blog.




In above picture you can see a Google Map with Markers in my test blog. Here are the steps to put such a map in your blog......................


STEP 1. Get a Google API key for your blog.

In the first step you have to generate a Google API key for your blog here.Put a check in "I have read and agree with the terms and conditions (printable version)" box by clicking it. Paste your blogspot URL in the text box and click Generate API Key button. Copy down the key generated.





STEP 2. Modify the Template Code.


Login at Blogger.com

Click Layout link under Blog Title on Dashboard.

Click Edit HTML subtab of Layout tab.

Scroll down in Template Code box and change :

<body>

TO :

<body onload='initialize()' onunload='GUnload()'>

Save Template.





STEP 3. ADD HTML GADGET in sidebar.

Login at Blogger.com

Click Layout link on Dashboard under blog title.

Click Add Gadget link on Page Elements subtab of Layout tab.

In popup window scroll down and click HTML/Javascript Gadget.

Copy the code below and paste it in Contents window of the HTML gadget




<script src="http://maps.google.com/maps?file=api&v=2&key=PASTE_YOUR_GOOGLE_API_KEY_HERE
type="text/javascript"></script>


<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);

// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(latlng));
}
}
}

</script>

<div id="map_canvas" style="width: 500px; height: 300px"></div>


Customize the above code by :

1. Paste in the Google API key obtained in Step 1 where it says "PASTE_YOUR_GOOGLE_API_KEY_HERE".


2. Put in the latitude and longitude of your map center in this line :

map.setCenter(new GLatLng(37.4419, -122.1419), 13);

3. The above code will add 10 markers at random locations. For more information checkout the Google Maps documentation.

Save Gadget.


| | 0 comments | Read More

ADD MEMBERS GADGET TO BLOG


ADD MEMBERS GADGET TO BLOG


First step is to sign up at Google Friend Connect. Then get the code for the Members Gadget. It will look something like this :

<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1236939855410" style="width:282px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '385';
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-XXXXXXXXXXXXX',
   site: 'XXXXXXXXXXXXXXXXXXXXXXXX' },
  skin);
</script>


In above code change :

style="width:282px;

to 282px to 100% and also change the hex colors :

skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
to match your site design. Change the height of the gadget  by modifying '385' in :


skin['HEIGHT'] = '385';

Then save the gadget.





GADGET APPEARS ON SPECIFIC PAGE ONLY


We do not want the gadget to appear on every page. We want it to appear only on the 'Blog Members' page. For this we use the power of conditional tags. The first step is to get the permalink of the Blog Members post published in Step 1 above. Look in the Blog Archives gadget as the post was backdated. Click the post link to open the post page. Copy the link from the address bar. It looks like this in my example :

http://www.blogdoctor.me/2007/03/blog-members.html




Then we have to modify the widget code. Login at Blogge.com and click Layouts link on dashboard. Then click Edit Html subtab of Layout tab. Click on Expand Widgets Template checkbox at top of Template Code box. Wait for page to refresh. Scroll down to the code for the Blog Members gadget. It will look like something this :

<b:widget id='HTML28' locked='false' title='BLOG MEMBERS' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == "http://www.blogdoctor.me/2007/03/blog-members.html"'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>


Put in the two lines in bold as shown above. In the first line :


<b:if cond='data:blog.url == "http://www.blogdoctor.me/2007/03/blog-members.html"'>

Put the permalink of your Blog Members post obtained in Step 1. Do not forget to put in the second line :

</b:if>

in exactly same place in the widget code. Save Template. As you can see the Members gadget showing all the present members appears only on this post.

| | 0 comments | Read More

How to put Adsense Link unit in your Header.


How to put Adsense Link unit in your Header.

To put an Adsense Link Unit Ad. in the header..........

Log in to your Dashboard. Click on your 'Layout' link under your blog name. This takes you to Page Elements under the Template tab. Click on Edit Html. Scroll down in Edit Template field till you come to :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='2' preferred='yes' showaddelement='yes'>

Change the second line to be the same as the second and third lines above.
Save Template.
Go to Page Elements subtab.
Now you will see in the Header Section an 'Add Page Element' link.
Click on the link and in the popup window choose Html/Javascript.
Paste your Adsense 728 by 15 Ad. Javascript code in Content field.
Save. The Ad. unit is placed above the Title unit.
Click and drag this to below the Title unit.
Save.
View blog.

| | 0 comments | Read More

Add Content with RSS Feeds.


Add Content with RSS Feeds.

To Add Content to your blog with RSS feeds.........

First find the RSS Feed Icon. On many sites it is shown as "RSS" or "About Feeds". The icons are shown alongside. 
Right click any one of these and select 'Copy Link Location'. Now you have to convert the feed into Javascript code. There are many such convertors online which you can find simply by searching Google. One such convertor is located at : http://itde.vccs.edu/rss2js/build.php. Go there and paste your feed url into the text box under 'Enter the web address of the RSS Feed'. Choose among the various options for the feed. Whether you want the title to be displayed etc... Then click 'Preview' to see if the feed is being generated. If the feed url is correct it will show items and content from the web page where you took the feed url from. If you are satisfied click 'Generate Javascript'. Javascript code is generated along with non javascript code which displays the feed on browsers without Javascript. Go back to your beta blog. Login to the Dashboard and click on Layouts under the name of your blog you want to add the feed to. The Page Elements page opens. Click on Add Page Element in the sidebar and choose HTML/Javascript in the popup window which opens. Paste the Javascript code in the content box and Save Changes. You can also add this to a Page Element in the Main Column of postings but then your feed will appear on all your posts. If you add it in the sidebar it will only appear once on the page.

WARNING :
1) Before taking content from other websites be sure to resd their Terms of Use for feeds. 2)You can fill your webpage with feeds but the Adsense bots are not able to read the content generated by them, so it is ineffective with Adsense. 3) You can use the Feed widget already present in the choices in the popup window which opens when you click on 'Add Page Element' in Page Elements page. However it will deliver only a maximum of five posts and titles whereas you can configure the feed in the above process to deliver all the posts.


You can also add a feed of your blog to your sidebar so that it shows all the posts titles. The URL of your beta blog's feed is :

http://yourblogname.blogspot.com/feeds/posts/full

Instead of 'yourblogname' type the name of your blog.


You can also add RECENT COMMENTS to the sidebar by using comment feeds URL which are

http://yourblogname.blogspot.com/feeds/comments/TYPE

Instead of 'yourblogname' type the name of your blog. Instead of TYPE use summary or full.

| | 0 comments | Read More

Make Money with Inline Adsense for Bloggers!


Make Money with Inline Adsense for Bloggers!

Blogger has now made it possible for you to make even more money! You can now add Inline Adsense advertisements between your blog posts.


As we have seen before you can add Adsense Ads. by selecting the Adsense Widget when adding widgets to your blog. If you want to include channel information also copy and paste the Adsense code into a Html Page Element.


Now with this method (Inside AdSense: Get inline) you can add Adsense Ads. between your blog posts inline with them. To do this login at Blogger.com and click on 'Layouts' link for your blog. In the Page Elements tab click on 'Edit' link in the Blog Posts widget. Scroll down in the popup window and check the box next to Show Ads Between Posts. You can then select how often you'd like your ads to appear, such as once after every post or once after every other post.


It also allows you to Customize your Adsense Ads. After customizing save the changes. At the moment search boxes and referral units cannot be added in this fashion. Since the optimum method is to have most of your Ads. above 'the fold' ( which is the viewable area of the screen when you open a site without having to scroll down ) use the Expandable Summaries hack to show only a summary of your posts on the Main Page with a 'Read More' link to the full post.


Using this method your posts on the Main Page will only contain a sentence or two and thus more posts and Adsense will be seen above the fold.

Followers

Featured Video

About Me : Herdiansyah Hamzah