rss

About Me

My Photo
irnanto dwi saputra
View my complete profile
Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

12 November 2012

How To Create a Sitemap in Wordpress

Sitemap is a page that shows the parts or links contained on the site. Sitemap devoted to two things for search engines and for the user (human). This time I will give a little tutorial on how to create a sitemap in wordpress for user. Here I am using a CMS wordpress hosting service that has the facility to use a PHP file. OK we just practice how to create a sitemap in wordpress.
The steps that you should follow the following :
  1. Login to cpanel your website
  2. Open the file manager
  3. Go to the directory of your website template is being actively used
    example: public_html / wp-content / themes / name-theme
  4. Create a new file with the name sitemap.php
  5. Copy or type the code below in file sitemap.php
    <?php
    /*
    Template Name: Sitemap
    */
    ?>
    <?php get_header(); ?>

    <div id="content" >
      <div class="post">
        <div class="title">
          <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>">
            <?php the_title(); ?>
    <!-- ----------------- Display Post with its relative category ----------------- -->
            </a></h2>
        </div>
        <div class="entry siteMap">
          <h2 id="posts">Posts</h2>
          <ul>
            <?php
    // Add categories seprated with comma (,) you'd like to hide to display on sitemap
    $cats = get_categories('exclude=');
    foreach ($cats as $cat) {
      echo "<li><h3>".$cat->cat_name."</h3>";
      echo "<ul>";
      query_posts('posts_per_page=-1&cat='.$cat->cat_ID);
      while(have_posts()) {
        the_post();
        $category = get_the_category();
      
        for($xi=0;$xi<=5;$xi++){
        if ($category[$xi]->cat_ID == $cat->cat_ID) {
          echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
        }
        }
      }
      echo "</ul>";
      echo "</li>";
    }
    ?>
          </ul>
    <!-- ----------------- Display Categories ----------------- -->
          <h2>Categories</h2>
          <ul>
            <?php wp_list_cats("sort_column=name&feed_image=/wp-content/themes/wizer/images/rss-ball.jpg&optioncount=1&hierarchical=0"); ?>
          </ul>
    <!-- ----------------- Display Pages ----------------- -->
          <h2 id="pages">Pages</h2>
          <ul>
            <?php
    // Add pages seprated with comma[,] that you'd like to hide to display on sitemap
    wp_list_pages(
      array(
        'exclude' => '',
        'title_li' => '',
      )
    );
    ?>
          </ul>
        </div>
      </div>
    </div>
    <?php get_sidebar(); ?>
    <?php get_footer(); ?>
  6. Save file sitemap.php
  7. Login to your-domain/wp-admin
  8. Click the page menu
  9. Select add new
  10. Type the title "Sitemap" without quotes
  11. On the Page Attributes -> Template
    How To Create a Sitemap in Wordpress
  12. Select sitemap
  13. Click Publish
Now look at the results in your web menus. For demo please visit this website.
Read more.....

23 September 2011

Create a JQuery Slide show Recent Post

Salam blogger, before I would berterimakasi to visitors and lovers of bloggers in particular sekalin shabat - blogger friend, on the occasion tonight I'll share one for a simple trick, simple but fun hehe, how to install was very easy.

OK, the trick that I will give is how to create a "Recent Post JQuery Slide Show" with the name "Recent Post Slide Show"

this blog we will be more beautiful and interesting, hopefully our visitors were also felt at home.

OK, since I do not want to talk at length because it is still much to do, simply:

1. As usual Log into your Blogger account, select "Layout" then "Page Elements", 2. Click the "Add a Gadget" (whatever okay), then select "HTML / JavaScript", 3. Copy-paste the code below:
<script src="https://sites.google.com/site/efekefek/file-js/recentpostslide.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

<script language='javascript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://weblearning27.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
<script src=https://sites.google.com/site/efekefek/file-js/recentpostslide2.js' type='text/javascript'></script>
</div>

CAUTION

Replace the red code with your link address, OK.

After all the measures passed, the store and see the results!

Read more.....

10 June 2011

Create Avatar Comments on Custom Template

Questioned about the new features of the avatar comment blogger who can not appear on some templates or custom templates derived not from the templates provided on the dashboard of blogger, so I'll share my little experience about how to make a comment avatar.

For those of you who commented yet appeared avatars, maybe your template does not yet support for these new features, but of course do not worry because with a little touch of modifications on your template, blogger avatar will appear, which are important amenities already provided by the blogger.

Ok, we just peraktekkan. Please follow lankah follows:

  1. Login to blogger with your ID.
  2. Click Layout.
  3. Click the Edit HTML tab
  4. Click "Download Full Template", please backup your template first (just in case).
  5. Put a tick in a small box beside the words "Expand Widget Templates"
    expand template widget weblearning27.blogspot.com

    Copy and paste the following code above the code ]]></ b: skin>
    .Avatar-image-container img {
    background: transparent url (http://i33.tinypic.com/24b9na8.jpg) no-repeat;
    height: 35px;
    width: 35px;
    }
  6. Find the following code in your template:

    <dl id='comments-block'>

    Or sometimes will be using code like this:

    <div id='comments-block'>

  7. Replace the code with the following code:

    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>

    If your template code includes code that uses a div then changed to:

    <div expr:class='data:post.avatarIndentClass' id='comments-block'>

  8. Find the following code:
    <a expr:name='data:comment.anchorName'/>
  9. Remove the code and then replace with the following code:
    <b:if cond='data:comment.favicon'>
    <img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
    </b: if>
    <a expr:name='data:comment.anchorName'/>
    <b:if cond='data:blog.enabledCommentProfileImages'>
    <data:comment.authorAvatarImage/>
    </b: if>
  10. Click Save Template button.
  11. Done.

The steps above may not be suitable for all existing custom templates, chances are you have to do some modification to the template you have the maximum.

Read more.....

08 June 2011

Comment box Under Posting

I affirm that the tutorial pairs comment box below this post specially for those of you who have never before modifying your comment box or in other words are still the original by nature.

  1. Please Login to http://draft.blogger.com with your blogger ID. Remember! not log in to blogger.com but to draft.blogger.com because these facilities are still in test phase.
  2. Go on your blog that will put his comments box. Click on Settings.
  3. Click the Comments tab, go to the article Placement Formulis feedback, then check the radio button for embeddable below posts. Let me be more clear, quasi-viewed images:
    Under Posting Comment box weblearning27.blogspot.com
  4. Click the Save Settings button in the bottom of your screen.
  5. Done. Please see the results, hopefully an immediate success.
    STOP !!! If you have successfully then you do not need to follow the next steps, but if unsuccessful, could try the steps below (usually rare that fails if this one).

Step # 1

  1. Still in that position before, click Layout.
  2. Click Edit HTML.
  3. Click on Download Full Template inscription on the side of the monitor. Please on Backup template first (very important).
  4. Tick the little box next to Expand Widget Templates.
    Under Posting Comment box weblearning27.blogspot.com
  5. wait a while until the process is complete.
  6. Find the code like below (because sometimes different template code, please focus on the code is red, and usually this code there are two, choose the position code at the bottom of ya!)
    <p class='comment-footer'>
    <b:if cond='data:post.allowComments'>
    <a expr: href = 'data: post.addCommentUrl'
    expr: onclick = 'data: post.addCommentOnclick'> <data:postCommentMsg/> </a>
    </b: if>

    </p>


  7. Remove / delete the above code, and replace with the code below:
    <p class='comment-footer'>
    <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='comment-form'/>
    <b:else/>
    <b:if cond='data:post.allowComments'>

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/> </ a>
    </b: if>
    </b: if>
    </p>

  8. Click the Save Template button.

Step # 2

  1. Click on Settings
  2. Click the Comments tab, go to the article Placement Formulis feedback, then check the radio button for embeddable below posts. Let me be more clear, quasi-viewed images:
    Under Posting Comment box weblearning27.blogspot.com
  3. Click the Save Settings button in the bottom of your screen.
  4. Done. Please see the results.

Read more.....

Create Read More in Blogger

There are several lines of basic code from the posts that need to be on the look.

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Take a good look at the code above, it is the original code of your template before the brain-tweaking. What we need now is to add a few lines of html code. Immediately, we see the code / text in red below.

<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p> <!-- satu -->
<b:else/>
<style>.fullpost{display:none;}</style>


<p><data:post.body/></p> <!-- dua -->

<a expr:href='data:post.url'>Read More.....</a> </b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

The code is deliberately to differentiate the color, the color blue is the original code of the template, the color red is the code that had been added. What should my friend look carefully is this code:

<p><data:post.body/></p>

The above code should make sure that there are two there should be no one because if there is one then post my friend could disappear altogether, but in fact the whole post is not lost, but not in the show alias in hiding. Postings on the show and in hiding since the code:

<style>.fullpost{display:inline;}</style>

<style>.fullpost{display:none;}</style>

{display: inline;} means that in the show, and {display: none;} means do not display an alias to hide and this is the code if incorrect installation resulted in all posts to be not in the show, so if united the entire code, then something like This

Show posts

Do not show post

Show posts if at the click of a link Read more ...

Steps to be no less importantly, my friend have to install the code Readmorenya on the Edit HTML tab and not on the Compose tab, and the code Read more ... should always be on the cover. Example installation of the code read more ... in articles like this:

It is written in the first paragraph that will appear on your blog home page, paragraph - the other paragraphs will occur if the blog visitors to click the link Read more ...

<div class="fullpost">

writing / paragraphs to hide

</ div>

You want to see the original sample please click here

Read more.....

07 June 2011

Make Related Post

A few weeks ago I was browsing the Internet looking for articles Related Posts / Articles related. Jump here jump there looking for a reliable article, after a few tries the codes that are obtained, finally I found a suitable article. But there are
still obstacles that is, an article that I found the English language. Inevitably I have to translate his own article.

After a few minutes to translate, the translation was finally finished already, and now I want to share this experience with you. So, you can instantly read and practice it without having to translate it first.

  1. Login to blogger with your ID.
  2. Click Layout.
  3. Click the Edit HTML tab.
  4. Click Download Full Template. Please backup your template first (important).
  5. Put a check / tick the little box next to Expan templates Widget.
    Make Related Post weblearning27.blogspot.com
  6. Wait a few moments when the process is underway.
  7. Find the code below.
    <data:post.body/>
  8. Copy the code below.

    For convenience, you can donwload Related Posts / Articles on file.

    <b:if cond='data:blog.pageType == "item"'>
    <div class='similiar'>
    <! - ***************** Related Articles by Labels - Take Two ****************** -> ;
    <div class='widget-content'> <h3> Related Posts by Categories </ h3>
    <div id='data2007'/> <br/> <br/>
    <div id='hoctro'>
    Widget by Hoctro <u> <a href='http://hoctro.blogspot.com'> </ a> </ u> | <u> <a href = 'http://www . jackbook.com / 'title =' Related Posts on Blogger Modified by JackBook.Com. Read More? '> Jack Book </ a> </ u>
    </ Div>
    <script type='text/javascript'>

    var <data:blog.homepageUrl/> homeUrl3 = &quot; &quot;;
    var maxNumberOfPostsPerLabel = 4;
    var maxNumberOfLabels = 10;

    maxNumberOfPostsPerLabel = 100;
    maxNumberOfLabels = 3;
    listEntries10 function (json) {
    var ul = document.createElement (&#39; &#39; ul);
    var maxPosts = (json.feed.entry.length &lt; = maxNumberOfPostsPerLabel)?
    json.feed.entry.length: maxNumberOfPostsPerLabel;
    for (var i = 0; i &lt; maxPosts; i + +) {
    var entry = json.feed.entry [i];
    var alturl;

    for (var k = 0; k &lt; entry.link.length; k + +) {
    if (entry.link [k]. rel == &#39; &#39; alternate) {
    alturl = entry.link [k]. href;

    break;
    }
    }
    var div = document.createElement (&#39; li &#39;);
    var a = document.createElement (&#39; a &#39;);
    a.href = alturl;

    if (a.href! = location.href) {
    var txt = document.createTextNode (entry.title. $ t);
    a.appendChild (txt);
    li.appendChild (a);
    ul.appendChild (li);
    }
    }
    for (var l = 0; l &lt; json.feed.link.length; l + +) {
    if (json.feed.link [l]. rel == &#39; &#39; alternate) {
    var raw = json.feed.link [l]. href;
    var label = raw.substr (homeUrl3.length +13);
    var k;
    for (k = 0; k &lt; 20; k + +) label = label.replace (&quot;% 20 &quot;, &quot; &quot;);
    var txt = document.createTextNode (label);
    var h = document.createElement (&#39; &#39; b);
    h.appendChild (txt);
    var div1 = document.createElement (div &#39; &#39;);
    div1.appendChild (h);
    div1.appendChild (ul);
    document.getElementById (data2007 &#39; &#39;). appendChild (div1);
    }
    }
    }
    search10 function (query, label) {

    var script = document.createElement (script &#39; &#39;);
    script.setAttribute (src &#39; &#39;, &#39; query + feeds/posts/default/- / &#39;
    + Labels +
    &#39;? Alt = json-in-script = listEntries10 &#39; B & callbacks);
    script.setAttribute (type &#39; &#39;, &#39; text / javascript &#39;);
    document.documentElement.firstChild.appendChild (script);
    }

    var labelArray = new Array ();
    var numLabel = 0;

    <b:loop values='data:posts' var='post'>
    <b:loop values='data:post.labels' var='label'>
    <data:label.name/> textLabel = &quot; &quot;;

    var test = 0;
    for (var i = 0; i &lt; labelArray.length; i + +)
    if (labelArray [i] == textLabel) test = 1;
    if (test == 0) {
    labelArray.push (textLabel);
    var maxLabels = (labelArray.length &lt; = maxNumberOfLabels)?
    labelArray.length: maxNumberOfLabels;
    if (numLabel &lt; maxLabels) {
    search10 (homeUrl3, textLabel);
    numLabel + +;
    }
    }
    </ B: loop>
    </ B: loop>
    </ Script>
    </ Div>

    </ Div>
    </ B: if>
  9. Paste the above code after / below code <data:post.body/>
  10. Save Template.
Done deh!
Good luck! Read more.....
 

Site Info

Google Pagerank Powered by  MyPagerank.Net My Ping in TotalPing.com TopOfBlogs My Zimbio Blog Directory