Make a Post Summary(Read More Function)

>> Friday, June 5, 2009

The function like that called Post Summary. You can make a post summary function with add a little code to your template code. But this code is for new blogger template (beta) and does not work at classic template.

Please follow the steps below :

Step #1 :

1. Login to blogger with your ID
2. In the dashboard page , click Layout.
3. Then click edit HTML tab.
4. Click the Download full template link. Save your template (very important)
5. Please mark the little box beside Expand Widget Templates. Wait for a moment.



6. Go to your template code, and find the code like this :


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

7. Delete the above code and change with this code :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>

8. Click Save Template button
9. Step #1 is done.

Step #2 :

1. Click Setting tab.
2. Click formatting tab.
3. Go to lower side. you will find a blank text are beside Post Template. Fill that blank text area with


<span class="fullpost">



</span>

4. Click Save settings button.
5. Step #2 is done.

How to post your article?

When you post your article, choose and you will see the code below :


<span class="fullpost">



</span>

Place the first paragraps above of :


<span class="fullpost">


and place the rest of paragrap under of :


<span class="fullpost">

and above of :


</span>


and then publish your post. Done.


If you still feel confuse, this is the example how to place your article:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet. (this will show in front of your blog)

<span class="fullpost">

Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet, lectus. Mauris et mauris. Duis sed massa id mauris pretium venenatis. Suspendisse cursus velit vel ligula. Mauris elit. Donec neque. Phasellus nec sapien quis pede facilisis suscipit. Aenean quis risus sit amet eros volutpat ullamcorper. Ut a mi. Etiam nulla. Mauris interdum. . (this will show if visitor click read more)

</span>


At front page of your blog, will show just like this :

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque sed felis. Aliquam sit amet felis. Mauris semper, velit semper laoreet dictum, quam diam dictum urna, nec placerat elit nisl in quam. Etiam augue pede, molestie eget, rhoncus at, convallis ut, eros. Aliquam pharetra. Nulla in tellus eget odio sagittis blandit. Maecenas at nisl. Nullam lorem mi, eleifend a, fringilla vel, semper at, ligula. Mauris eu wisi. Ut ante dui, aliquet nec, congue non, accumsan sit amet. Read more...

The last, if you try this hack and you not succes, don't be panic. upload your backup template, and it's will be back to template code before you do edit.

Allright my friend, i think this enought. See you at my next post.


Read more...

How to setting your blog

If your blog want caried by google, you must doing several settings. This is how to setting your blog:

  1. Login to blogger.com with your ID.
  2. If your blog more than 1, click at the blog title want to setting.
  3. Click Setting and then click Basic. Several form that must in the contents to the menu basic:
    • Title : Content with your blog title. Example : Blog Tutorial.


    • Description : Content with your description blog. Example : All about blogging can find here.


    • Add your blog to our listing : chose Yes, so that every time posting always entered the Blogger.com list.


    • Show Quick Editing on your blog : Chose Yes.


    • Show Email post link : It is best to chose Yes, but if you chose No also it's allright.


    • Show compose Mode for all your blog : Chose Yes.


    • Show transliteration button for your post : chose Yes if the you wanted to be button to change normally alphabet to hindi (India) alphabet, Chose No if being the reverse.


    • Click Save Settings.


    • Finish.
  4. Click Publishing to arrange the publishing menu.
    • Blog’Spot Address : Content with your blog address. Example : kolom-tutorial.


    • Click Save Settings.


    • Finish.
  5. Click Formatting to arrange the formatting menu.
    • Show : Chose the number of post want you to display in your blog. Example : Show : 6 post, it's means your posting will display in your page Totally six posting. Chose Post (don't days) at pulldown menu


    • Date header Format : Chose the style of date/month what you wanted, this date/month will display above your post.


    • Archive Index Date Format : Chose the style for your archive


    • Timestamp Format : Chose the style of the time, what you wanted.


    • Time Zone : Chose the matching zone with your place. Example for WIB : [UTC+7.00] jakarta.


    • Language : Chose language what you wanted.


    • Convert line break : Chose Yes, but if you chose No it's allright.


    • Show Link Field : Chose No, but if you chose Yes it's allright.


    • Enable Float aligment : Chose Yes, but if you chose No it's allright.


    • Click Save Settings.

    • Finish.
  6. Click Comment to arrange the Comment menu.
    • Comments : Chose Show.


    • Who Comment? Chose Anyone. It's means anyone can comment to your post.


    • Comments Default for Post : Chose New post Have Comments


    • Back links : Chose Show. It's means you will know if another people has linked to your post.


    • Backlinks default for Posts : Chose New post have Backlinks.


    • Show comments in a popup window? : Chose Yes. It's means when the people click Comment link your blog not lost.


    • Show word verification for comments? : It's better to chose Yes


    • Enable comment moderation? : Chose No, but if you wanted chose Yes it's allright.


    • Show profile images on comments? : Chose Yes. It's means the photo of commentator of blogger member can display.


    • Comment Notification Address : Content with your email address.


    • Click SAVE SETTINGS.


    • Finish.
  7. Click ARCHIVING to arrange the archiving menu.
    • Archive Frequency : Chose monthly.


    • enable Post Pages? : Chose Yes.


    • Click SAVE SETTINGS.


    • Finish.
  8. Click Site Feed.
    • Publish Site Feed : Chose Yes.


    • Descriptions : Chose Full


    • Article Footer : If you have advertising code like Google Adsense, you can insert the code here.


    • Click SAVE SETTINGS.


    • Finish.

Read more...

How to Start a Free Blog at Blogger.com

>> Thursday, June 4, 2009

Step1:
Visit the Blogger.com home page and select the "Create Your Blog Now" button to begin the process to start your new Blogger.com blog.



Step2:

If you don't already have a Google account, you'll need to create one by completing the form on this page.



Step3:
If you already have a Google account, you can bypass the "Create Google Account" step and simply sign in with your existing Google account username and password.



Step4:
Enter the blog name and corresponding domain name (to precede '.blogspot.com') in the spaces provided.



Step5:
Select a standard template for your new blog.



Step6:
Your blog is now live and ready for you to start writing content.



Step7:
That's all there is to it! You're now ready to write your first blog post in your new Blogger.com blog and join the blogosphere.

Read more...

Page Navigation Menu Widget for Blogger

Let us see how to add this Page Navigation Menu Widget :



step 1 : Login to your Blogger account and Navigate to Layout Section . Now click Add Page Element link there.



Step 2 : In that Page Element window , choose HTML / JAVASCRIPT .

Step 3 : Now add this Javascript in that window.


<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}

.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;

}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;


}

.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;

}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}

.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/") 14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';



var labelHtml = '<span class="showpageNum"><a href="/search/label/' thisLable '?&max-results=' pageCount '">';

for(var i=0, post; post = json.feed.entry[i]; i ) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c ) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum ;
htmlMap[htmlMap.length] = '/search/label/' thisLable '?updated-max=' timestamp 'T00%3A00%3A00%2B08%3A00&max-results=' pageCount;
}
}
}
}//end if(post.category){

itemCount ;
}

}else{
if(title!=''){
if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum ;
htmlMap[htmlMap.length] = '/search?updated-max=' timestamp 'T00%3A00%3A00%2B08%3A00&max-results=' pageCount;
}
}
itemCount ;
}
}

for(var p =0;p< htmlMap.length;p ){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml upPageWord '</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">' upPageWord '</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="' htmlMap[p] '">' upPageWord '</a></span>';
}

fFlag ;
}

if(p==(thisNum-1)){
html = '&nbsp;<span class="showpagePoint"><u>' thisNum '</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml '1</a></span>';
}else{
html = '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html = '<span class="showpageNum"><a href="' htmlMap[p] '">' (p 1) ' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="' htmlMap[p] '">' downPageWord '</a></span>';
eFlag ;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p ){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">' firstPageWord ' </a></span>' upPageHtml ' ' html ' ';
}else{
html = '' labelHtml firstPageWord ' </a></span>' upPageHtml ' ' html ' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page ' thisNum ' of ' (postNum-1) ': </span>' html;

if(thisNum<(postNum-1)){
html = downPageHtml;
html = '<span class="showpage"><a href="' htmlMap[htmlMap.length-1] '"> ' endPageWord '</a></span>';
}

if(postNum==1) postNum ;
html = '</div>';

if(isPage isFirstPage isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p ){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://www.techieblogger.com/2008/07/page-navigation-hack-for-blogger.html">Grab this Widget ~ Blogger Accessories</a></div>


After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot

In the code above you can edit the lines in red to your wish .

1 : var pageCount = 5;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.



2 : var displayPageNum = 3;

here the digit in red represents number of pages to be listed.

Now save your template .

That's it now we have added Page Navigation menu widget to our blog successfully .


Read more...

  © Blogger templates Palm by Ourblogtemplates.com 2008

Back to TOP