Free Color Codes Online

Today tutorial blog and blogger hack. first,i want to give some credits to all my visitor/readers cause without you all, this blog can’t get a love PR from google. Thanks for all.

 

Now, this time we will talking about color source for your blog. are you difficult to find some color code for your blog combination or design?? here some sources for color code. just check this out.

•  Color Picker

  you can get your color code here with only slide on the cursor on the color, simple and easy to use

 

• HTML Color Codes

Here you can choose your html codes for your color, the code just show on the front of the color. easy enough.

 

• Color  Scheme

 

This moto is :Generate matching color schemes like never before! visit this site and combine the color of yours

 

• Color Blender

 

your free online tool for color matching and palette design! just combine your favorites color, have fun

 

Well, maybe those sources is enough to get your favorites color codes for your blog or design. just play your color and make some a creative style for your design.

 

don’t forget to subscribe this tutorial blog and blogger hack at my sidebar and get the updates free to your e-mail.

 

Happy blogging

Read More.... »»

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.... »»

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.... »»

Hot Gadget: Marquee BLogroll

Today Tutorial blog and blogger hack. After Finishing my job now i can writing for my blog, i miss it. Ok, last tutorial blog we have learned about Marquee. Now we can implementation it to make a blogroll. Let’s start it with a simple steps:

• Go to Your Layout
• Add a gadget adn Choose HTML/Javascript
• Copy this code below

 

<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="up" width="300" height="250" scrollamount="2" align="center">

http://linkhere

http;//linkhere

………
</marque>

• If you want to change the direction of link just change the green code with “up” or “down” 
• Change the blue code with your link.
• Save and Done

   

  It’s easy and you can save some space in your template for this blogroll. Don’t miss another tutorial blog and blogger hack here.

   

  If you don’t mind please subscribe this blog and you will get the latest tutorial blog to your e-mail.

Read More.... »»

Hot Gadget: Google Friend Connect

Today Tutorial Blog and Blogger Hack. You know that blogspot has a widget called follower where you can get the update from blog that you follow. Now Google also has a similar gadget  where we can connect to another blogger via google account and we can call it Google Friends Connect.

 

It’s really look  like Follower gadget where our photo show up to anyone, Interact with other visitors by making friends, sharing media, posting comments, playing games, and more, Invite friends from other social networks and contact lists to join your site or blog. Maybe you will get interest with this gadget and now our tutorial blog today is installing Google Friend Connect.

Let’s move on to the tutorial blog below

• Open google friend connect
• Click on Setup  a new site
• Fiil in your data with your site name and URL. see at below

 

 

• Just ignore the second step where you direct to add 2 files to your site (just click continue until you are in set up the member gadget)

• In set up the member gadget you can choose your gadget style, if you done with it just click on Generate Code
• Now Copy and Paste the code to your blog in sidebar or footer
• Just go to layout and add gadget choose HTML/javascript, paste the code
• Save and done

Now you have get the gadget from google, just enjoy the connection and grow your traffic from this gadget.

It’s really nice to share with you all about tutorial blog and blogger hack. just give me a feedback and we will make it really great experience for both of us.

Keep blogging and see for the next tutorial blog and blogger hack.

Best Regard

Read More.... »»

Hot Gadget : Related Post

Today Tutorial Blog and Blogger Hack. We all know that making visitor comfortable in our blog is the priority. They will feel like a someone special if we serve the best for them. For example if they want to find your old article that related to they want, your blog will give it an easily link to them. So it call related post widget. All you have to do is give them related post and they satisfied with your blog service.

 

Now our blogger hack today is making a related post below your post, so we will make it simple:

• Now Download This script here
• Open that file and copy the code
• Go to your Layout and Choose Edit HTML
• Click on Expand Widget Template (back up your blog first)
• Now paste the code below <data:post body/>
• Save and done

 

If you want to change the word “ Related Post by categories” by yourself just find this word on the code.

 

It’s enough for today and if you like our tutorial blog and blogger hack just subscribe our RSS or E-mail

 

See you at next Tutorial blog

Read More.... »»

Embedded Emoticons In Your Shoutmix

Today Tutorial blog and Blogger Hack. Do you see at my Shoutmix?if you haven’t see, just check on it and you will find that  some new  emoticon has appears. like this maybe

 

or this

and many more emoticons like that where you can find it at myem0.com. Now our tutorial blog today is installing that funny emoticons in our shoutmix.We will embedded emoticons as like we embedded comment box or Installling Yahoo in comment box  before. If you haven’t use Shoutmix in your blog just sign up here.

 

Let’s make it just a simple Tutorial blog:

 

• Go to your account in shoutmix
• In dashboard, Choose Smileys
• Copy-paste emoticons code that you get it from myem0.com
• Just add code begin on http:// and end with .gif
• for example : add http://i269.photobucket.com/albums/jj72/myem0/01/yoyo-emoticon-1-014.gif in the box and click add.
• Dont forget to choose initial for your emoticons eg: :)) or :O or like this :))
• Save your setting and done

Now check at yoor shoutmix and it’s has added. But, you just can add 10 emoticons besides your standar smileys. If you want more 500 smileys, upgrade your account and it’s not free, it costs $2 /month

 

Well i think i just use free account until get some money. That’s tutorial blog today, we will see you next post.

 

If you want some update of this blog, feel free to Subscribe our RSS or E-mail.

 

See you at next Tutorial blog here

Read More.... »»

Hot Gadget : Making A Tab View

Today Tutorial blog and Blogger hack  TabView is a easy ways to give information to the readers especially for the blog with limited space. You can fill TabView with shoutmix, twitter, recent comment, or else.

 

With this Tutorial blog we will make TabView easy, so please keep your focus, now we begins:

• Go to Layout, choose Edit HTML
• Backup your blog and Expand widget Template
• Copy-Paste code below and put above the

  ]]></b:skin>

  div.TabView div.Tabs
  {
  height: 24px;
  overflow: hidden;
  }
  div.TabView div.Tabs a
  {
  float: left;
  display: block;
  width: 90px; /*width of main menu*/ text-align: center;
  height: 24px; /* height of main menu */
  padding-top: 3px;
  vertical-align: middle;
  border: 1px solid #F4F4F4; /* border colour from above */
  border-bottom-width: 0;
  text-decoration: none;
  font-family: "Times New Roman", Serif; /* Type of Fonts */
  font-weight: 900;
  color: #F4F4F4; /* Colour of fonts*/
  }
  div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
  {
  background-color: #FFFFFF;/* background colour*/
  }
  div.TabView div.Pages
  {
  clear: both;
  border: 1px solid #F4F4F4; /* line colour menu*/
  overflow: hidden;
  background-color: #FFFFFF; /* backgorund colour */
  }
  div.TabView div.Pages div.Page
  {
  height: 100%;
  padding: 0px;
  overflow: hidden;
  }
  div.TabView div.Pages div.Page div.Pad
  {
  padding: 3px 5px;

   

  • Noe put this code before tag </head>

  <script src="http://h1.ripway.com/khantry/javascript/tabview.js" type="text/javascript"></script>

   

  • Then Save
  • Now back to Layout and add a gadget
  • Choose HTML/Javascript and COpy-Paste code below

  <form action="tabview.html" method="get">
  <div class="TabView" id="TabView">
  <div class="Tabs" style="width: 350px;">

  <a>Tab 1</a>

  <a>Tab 2</a>

  </div>
  <div class="Pages" style="width: 350px; height: 250px;">
  <div class="Page">
  <div class="Pad">

  Code Here 1.1 <br />

  Code Here 1.2<br />

  </div>
  </div>
  <div class="Page">
  <div class="Pad">
  Code Here 2.1 <br />
  Code Here 2.2<br />
  </div>
  </div>
  </div></div>
  </form>
  <script type="text/javascript">
  tabview_initialize('TabView');
  </script>

   

  Then Save, Now please look this explanation :

  • You can change this width: 350px and  height: 250px
  • Change the blue code with your Text or title
  • Change the red code with your Javascript eg: shoutmix code, image, or else

  That’s tutorial blog today, hope you enjoy this, if there’s any error just tell me and i will give you a hand.

  Thanks for coming in tutorial blog and blogger hack

Read More.... »»