Page Navigation Hack Code

Today tutorial blog and blogger hack. One question for you, do you like attractive blog or just a simple blog?If you like the first one, now we will make it real with some hack that make your blog more attractive.

 

Some time when you look at the bottom of other blog, you will find a page navigation which the functions is move the page for the pages in sequence without clicking on the category.

 

We will make it with some CSS code, so if you not want your blog slower than usual don’t make your blog with full CSS code.

 

Ok, now we will continue with the code:

• Open your Edit HTML and back up your blog first
• click on Expand widget template
• Copy these code below and put above the ]]></ b: skin>

.showpageArea {padding: 0 2px;margin-bottom:10px;margin-top: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;
}

 

• Now find this code or similar in your blog
  
  <b:section class='main' id='main' showaddelement='yes'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  </b:section>

• now copy these code below and put under </b:section>

<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=6;
var displayPageNum=4;
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 &percnt; pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00&percnt;3A00&percnt;3A00&percnt;2B08&percnt;3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
if(title!=''){
if(itemCount==0 || (itemCount &percnt; pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00&percnt;3A00&percnt;3A00&percnt;2B08&percnt;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>

• Save and done

Well, that’s our tutorial blog and blogger hack today, hope you like it. Don’t forget to subscribe this blog and get the update direct to your Feed or E-mail

 

Happy Blogging

Read More.... »»

Different Background for your Post

Today tutorial blog and blogger hack. at previous article we have talked about hack post date and the result was your post date disappeared!!. Now, we will continue our hack inside our post. Maybe you have seen the Title of article today. That’s right, we will make some different background or maybe some different image background for our post.  It will be nice to see our post have different background.

 

If you boring with your post background, just use this hack and make your blog more colorful. You can apply these setting for your previous article too and you can remove or change it anytime :). Let’s begin our hack:

 

• It is done while you write your article by use some HTML code
• Just use a “div”  element, here the full code

Code for Changing the Color of the Post Background

 

<div style="background:#FFE1FF; padding:5px 8px 5px 8px;">
Your text goes here....
</div>

,,,,Put the pink code where you put on the beginning post

,,,The Orange code at the End of your post

,,,Replace the Green code by your preferred color hex value 

Code  for changing with image post background

<div style="background:url(URL address of your image) no-repeat;">
Your text goes here....
</div>

,,,Replace the Green code with your URl address of your image from image hosting (Photobucket, tinyurl. etc).

 

 

That's for tutorial blog and blogger hack today, i hope this hack will be useful for you to make your blog more attractive, if you have any question just tell me on my comment box,,Happy blogging all my friends :)

 

Read More.... »»

How To Hide Your Post Date

Today tutorial blog and blogger hack. Nice to write a post again in my busy time, actually it’s not to busy but i think i must reduce my time for blogging so i will keep my another activity still vary.Ok, forget about my daily.

 

Now we will talk a simpel tutorial about post date. Post date  can be define a date that show publish of article on your blog. It’s normal to show date post to show our article  consistency. But sometimes it’s nice to hide our post date, let’s make it real.Here the Hack:

 

• Go to Layout and Choose Edit HTML
• Back up your blog and click on Expand widget template
• Find this code h2.date-header {
• Add some code like this visibility: hidden;
• Here for the example

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80&percnt;;
color:#777;
height: 0px;
visibility: hidden;
}

• Save and done

 

It’s  will make your post date dissapears from your blog.If you want to make it to default and show your post date just delete the red code. That’s tutorial blog and blogger hack for today.  Happy blogging for every one

Read More.... »»

Super Hack Read More

Today tutorial blog and blogger hack. Do you know Peek-a-boo Hack? Or also known as read more? It’s difficult to say that many blog have this one inside. But sometimes it difficult to apply on our post, always put the code and publish. next post, put the code again. So why we make it simpel, read more always appear without put the code?.

This read more code i got from here. and here  Juat check For more info

 

Just relax and now we will start the hack.

 

Let’s Hack this one:

 

• First Check Your blog, if your blog has installed the previous read more, make it to default again to be  without read more. i mean redo your read more code. Just check the previous Tutorial about Read more Here.
• if you done make your blog without read more code,
• Open Your Layout, Choose Edit HTML, and back up your blog first
• Expand Widget Template and now copy this code

<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://www.geocities.com/fabisnis/hack-readmore.js' type='text/javascript'/>

 

• Put those code below  </head>  tag
• Now find this tag <data:post.body/>
• Delete and Change that code with code below

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

 

• Save and Done

Now you can post your content without write the read more code again, it’s Super Read more and it will appears otomatic. If there is any problem just check again those steps above and read carefully.

Any Question just ask, my YM always stand on sidebar.

Happy tutorial blog and blogger hack for all

Read More.... »»

Alternatif ShoutBox From GFC : Wall Gadget

Hallo all, nice to meet you here, after we talked about image sources yesterday, i think we can start fro tutorial blog and blogger hack now. Mmmm,  we know that our follower gadget now cooperates with Goggle Friend Connect , the display looks like more cool and simpel.

How far do you know about Google Friend Connect? No, i don’t mean to test your knowledge  about this gadget. But maybe we  have to know a little because this new features of google has a many function for make our blog more attractive.

 

Ok, just before i go to the main topic, you can read my previous content about GFC here.

Google Friend Connect (GFC) has some of gadget such as Wall gadget, Review/Rate Gadget, Playlist Gadget, Custom gadget or you can put a silly game for your visitor called LameGame.

 

Now, we will learn how to installing Wall gadget to our blog (you can find this gadget like Facebook, seems similar).

 

• Read About Join Google Friend Connect Here
• After You register Choose Social Gadget.
• Now Choose Wall gadget

• Look at this image below, Select Page from Scope Menu

• Design Your Wall with your colour, size or else
• Get the Code and Copy
• Now Open your Layout and add a gadget Choose HTML/Java script
• Paste the code and save

 

Now our tutorial blog is done. You can put that gadget on your sidebar or footer and make your blog more attractive with Wall Gadget.

You also can put this gadget under your post without disable commneting system from blogger.

 

Enjoy this gadget and don’t forget to follow this blog with me at tutorial blog and blogger hack.

Read More.... »»

10 Place Where You Can Find Free Image and BackGround

Well, Today i thinks i will not post about tutorial blog or blogger hack. Just some information for you.  we know that sometimes we have a little difficult to find image sources for our blog. Especially for image that have a good quality for our background, header, logo or else But maybe know i will post some of image sources that have a good quality.Instead you spend your time to search by search engine. Let’s take a look:

• Background image maker

          You can make your background here with hundred of style. Just check there

• Gradien Image maker

           You can choose your gradien here, and make your background

• Pixel Pattern

          You can choose more than 900 style pixel here. For personal and bussiness

• Striped Generator

          Make a stripe background here, and you can download for your blog

• DesignPacks

          Download 15 theme design here with high resolution image here.

• Flickr

          Get more than 10000 image for free here. You can share your image too for public 

          share

• Photobucket

          Full of image that you can use for free, maybe the most populer image sources

          today

• VintagePixels

          More than 900 image with theme vintage here for free.

• FreeFoto

          Get more than 100.000 free image here for your blog

• ImageAfter

          You can have a image with  size 1600x1200 or  2560x1920 for personal and

          bussiness purpose

 

 

Well thinks that we can feel free that download image from those site. so whats you waiting for, need some image and background? Don’t forget the list above and you will find many interesting image that you can’t find anywhere.

 

If you think that this blog have a lot information and you want make me feel excited and give more information. Just subscribe  My RSS below or Subscribe vie E-mail. It’s FREE

Read More.... »»

Display All your Post Using Feed2JS

Today Tutorial blog and blogger hack. We know that importan to display all of our post so the visitor can find it easily. Blogger has a gadget called Blog Archive where we can show our post by dropdown or list menu. Or you can display all your post by HTML/javascript code but you must add this manual if you have a new post.

Ok, let’s we  make it with some different way, Using Your Feed. We will use the third party called Feed2JS.

 

Here the steps:

• Open Feed2JS
• Enter your Feed URL ( if you using feedburner here the fromat : http://feeds2.feedburner/yourID )
• For another form just choose what do you like such as show a title or not, date post, and else
• Click preview if you want to see the display of feeds
• if you done with form just click generate javascript  to get the code
• Now we will put the code by create a new post
• Go to your Dashboard and choose New Post
• Paste the code you got before in post (on tab edit html)
• Choose Post Option and set date to be the oldest post
• Publish and Done

Now you can Put the link of your display post where visitor can see it maybe Navbar or Sidebar.

You can See my Link to Display All my post at Sidebar. Just click my list  and you will see all my post inside. One Benefit using feed is we mustn’t add the list by manual if we have a new post, so this list will be automatic added by our feed.

 

Ok, That’s enough today for tutorial blog and blogger hack.Hope we will meet again in the next post. Have a nice day

 

image source: www.scribemedia.org

Read More.... »»