Thursday, May 10, 2012

Browse » Archives for 05/10/12

How to Manage Theme in Wordpress Blog

Thursday, May 10, 2012    No comments

Sundance is a free video theme for WordPress by automattic. Despite its minimalist design, Sundance was crafted with clean, elegant typography and close attention to detail. The home page offers a featured video carousel. Sundance supports the video post format, widgets, custom background, custom header, custom menus, and a custom link feature for your social media pages
Follow this tutorial to manage your theme.
Manage theme option :
1.  Select theme option.
     Check RSS Link to show RSS Link in your sidebar
2.  Fil the form with your twitter, facebook, google plus, and flicker link.
3.  Save Changes.

Manage Custom Header :
1.  Click header.
2.  Choose image file from your computer or image library and then 
     click upload and  then check show header text with your image. 
     You can upload a custom header image to be shown at the top of 
     your site instead of the default one. On the next screen you will be 
     able to crop the image. Images of exactly 984 × 242 pixels will be 
     used as-is.
3.  Set the background header colour with a custom colour,
4.  Save Changes.

Manage Custom Background :
1. Click the Background button
2. Choose image or custom color ( same as manage custom header )
3. Save Changes. Check how your blog appearance :

Read More
Posted by: Denmas Tugino
Godheg Updated at: Thursday, May 10, 2012
Browse » Archives for 05/10/12

Create a Blog Site with WordPress

Thursday, May 10, 2012    No comments

WordPress is a free personal publishing platform. It is an easy to use, fast and flexible blog script. It comes with a great set of features, designed to make your experience as a publisher as pleasant as possible. With WordPress you can easily make a blog. How to create blog site with Wordpress ? Follow this tutorials step by step


Go to Wordpress.com, click Sign Up and fill the form :
Edit Profile and then save the profile
Go to your e-mail and activate blog
Choose one of Wordpress themes, the example I choose Sundance Theme by clicking Choose This Theme.
Select my blog and then go to your blog

Done, your blog have been made !

The next step is managing your theme, the next tutorial is how to managing Wordpress theme.

Read More
Posted by: Denmas Tugino
Godheg Updated at: Thursday, May 10, 2012
Browse » Archives for 05/10/12

Facebook Comments for Blogger

Thursday, May 10, 2012    4 comments

How to put Facebook comment box for Blogger blog. The goal is the blog will get more visitor and comments. Because most people prefer to comment on the blog on Facebook than we are, then we pinch the ball entering the Facebookers comments to our blog automatically. How to put Facebook comment box for Blogger blog. ? Just following this tutorial bellow.


1. Disable Default Comments
   The first thing you should do it to disable blogger default comments. because you
   don’t want to have 2 comments forms. go to your blogger account, navigate to
   settings >>post and comment>>hide comment and then save setting,
   look at the picture bellow :
square
2.  Generate your Facebook App ID.
     Go to Facebook Developers
square
Next step
square
Coppy your apps ID and save to notepad.
3.  Add Codes to Your Template
     You must add the following codes to your blogger template to ensure that the 
     comments box  will  work for your blog in the right way. and in this step we’ll 
     add the following codes,
     a.  xmlns attribute
     b.  Open Graph protocol tags
     c.  SDK script

Adding the xmlns attribute :

Please go to your blogger account again, and navigate to, layout >> edit html >> and check Expand Widget Templates then find the following code,(use ctrl+f) :
<html
You’ll find it on the top of your code. second or third line, and after it add the following code,
xmlns:fb='http://www.facebook.com/2008/fbml'
square
In my template the code is located in third line, but in other template ussualy located after <html  code , like this <html xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog..............2005/gml/expr'>

Adding  Open Graph protocol tags  :
Search for code <b:skin>, and after it add the following code,
 <b:if cond='data:blog.pageType == "item"'><meta   expr:content='data:blog.pageTitle' property='og:title'/><meta   expr:content='data:blog.url' property='og:url'/><b:else/><meta   expr:content='data:blog.title' property='og:title'/><meta   expr:content='data:blog.homepageUrl' property='og:url'/></b:if><meta   content='Your Blog Name' property='og:site_name'/><meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/><meta content='Your Apps ID'   property='fb:app_id'/><meta content='Your Fb Admin Code'   property='fb:admins'/><meta content='article'   property='og:type'/>
Place this code above <b:skin>, and the code will look like this (look at the picture bellow) :
square
Please don’t forget to change Your Blog Name, Your Apps ID ( you got it in the previous step ), and Your Fb Admin ID. How to get your fb admin ID ? If you use Google Chrome, go to your Fb, push mouse right button, select view page source and you will get your fb ID, see the picture bellow :
square
Adding the SDK script Code :
Search for code <body and after it add the following code,
<div id="fb-root"></div> <script>     window.fbAsyncInit = function() {     FB.init({       appId  : 'YOUR   APP ID',       status : true, // check login status         cookie : true, // enable cookies to allow the server to access the   session       xfbml  : true  // parse XFBML     });   };      (function() {     var e = document.createElement('script');       e.src = document.location.protocol +   '//connect.facebook.net/en_US/all.js';     e.async = true;       document.getElementById('fb-root').appendChild(e);     }()); </script> 
 Look at the picture bellow :
square
Adding facebook comment box code
1.  Find this code: <div class='post-footer-line post-footer-line-3'> or (if not) find 
     this code: <p class ='post-footer-line post-footer-line-3 '>
2.  Add the following code under the code
    <div class='post-footer-line post-footer-line-3'>


<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='fb-comments' data-num-posts='10' data-width='450' expr:data-href='data:post.url'/></b:if>


"10 are  the number of posts will be displayed, 450 is the width of the comment coloumn will be displayed . If this code didn't work, try this code bellow :


<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=224056187697813&amp;xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='450'/>
</b:if> 
The red number is your apps ID, put the code above this code :
</b:includable>
<b:includable id='status-message'>
Look at the picture bellow :
square
Save your templates and see the result.

Read More
Posted by: Denmas Tugino
Godheg Updated at: Thursday, May 10, 2012