Government Jobs | Sarkari Jobs | Bank Jobs India

Home/Showing posts with label Tutorial. Show all posts

New Animated Header and Collapsible Menu

Today I have made some major changes to my blog appearance by replacing the old 900x100px animated header with a new 1050x200px header and also applying a collapsible sidebar menu using jquery script.

This new animated header has been done the same way and with the same procedure as the previous one.

This header was designed to give a new image lift to my blog which I will try to fill it with articles related to general information, technology, environment, health and so on.

Another thing that you might notice is that my side bar menus are in collapsible form. When you click on the menu title, the body will expand. I have learned this technique using the jQuery script.

Let me show you how to do it.

First as usual, log in to your blog layout page and edit HTML. Click on the "Download Full Template" to save the existing template to our computer hard disk. In case of anything happened, we can revert it to the original/previous template.

Then we have to predefine our new css code of the menu list, header and body element between <head> to </head> segment. It could be something like this.

.menu_list {
margin: 0px;
padding: 0px;
width: 400px;
}
.menu_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
background-color:#FF8000;
margin:1px;
}
.menu_body {
padding: 5px 10px 15px;
background-color:#D8D8D8;
}

Then paste the jquery script below which use the hide, click and slideToggle function to the <body> to </body> segment or inside our sidebar script block.

If you would like to use images as the menu titles like I did, you may omit the background color from the predefined css codes and instead of the menu title text, replace it with your image source link address. Which look something like this.

The output should look like this. Click the header to see the action. The smaller the slideToggle value, the faster the action.

Header-1

Header-2

Header-3

Give it a try and good luck.

Home/Showing posts with label Tutorial. Show all posts

Customizing Blogger Template - 2 to 3 coloums

There are thousands of blog templates that we can choose from and apply to our blog. However some of us prefer to arrange our own layout or design according to our need and taste, even though we only have a little knowledge about the html and css code. It is better to learn how to do it our self rather than just use what ever they gave us.

It is not so hard to customize or to change our 2 coloums blog template to 3 coloums if we know the concept and have a bit of knowledge related to html and css coding.

For example, to change a simple 2 coloums minima blog template created by Douglas Bowman to 3 coloums, there are a couple of steps that we have to take.

Step 1:

Determine and decide on our total blog width, (main coloum + 1st side bar coloum + 2nd side bar coloum width).

For example change the total width from 660px to 1020px (i.e., main-wrapper 470px + sidebar-wrapper 300px + newsidebar-wrapper 250px = outer-wrapper 1020px). I change the dimension as above because most of the ads and widgets available usually use those dimensions. Make amendment by editing the template html code.

Before editing the template, you may want to save a copy of it if anything went wrong.

Log in to your blog layout page and edit HTML. Click on the "Download Full Template" to save the existing template to our computer hard disk. In case of anything happened, we can revert it to the original/previous template.

Find the css code of id name "outer-wrapper" between the <head> to </head> segment. [To easily find the spot, hold Ctrl key + F and type "#outer-wrapper" in the pop-up text box].

Do the amendment as the figure above or copy and paste the code below:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 1020px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 470px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
width: 300px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
width: 250px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

To add the new side bar that we have defined earlier to our template we need to modify the html code which lies between <body> to </body> segment.

Find the html code of id name "sidebar-wrapper" between the <body> to </body> segment. [Once again, to easily find the spot just hold Ctrl key + F and type "id='sidebar-wrapper'" in the pop-up text box]. We need to type in the html code for our newsidebar-wrapper after the code of our sidebar-wrapper as the figure above or copy and paste the code below:

One more thing that is quite interesting is that the "Add a Gadget" element can be turn on by changing the the "showaddelement" value from "no" to "yes" on our wrappers html code.

For example the "crosscol-wrapper" html code which was created, couldn't be seen on the page element because the "showaddelement" value was set as "no" and now has been changed to "yes" so that we can see it.

Finally, after we have finished amending the template, we may preview and save the template.

If everything is ok, our page element will look like the figure above. Can you spot the different? Yes, there are 3 new items on our page elements. The "crosscol - Add a Gadget", the "main - Add a Gadget" and our "newsidebar - Add a Gadget".

Now we may add new items immediately below the header and also above our post. To make the header and the footer to be the same size as the outer-wrapper, we need to change the width value of both of its to 1020px.

Take your time to try it and good luck.

Home/Showing posts with label Tutorial. Show all posts

How I Get Downlines - The Experiment

You could have the best Website in the world but without visitors, your site is nothing. So how could we get those visitors, especially the unique visitors? The visitors that are looking or searching for something that they are interested in. We need unique visitors to our site if we want to sell products or to earn commission from affiliates or to get downlines.

Unique visitors are measured according to their unique IP addresses, which are like online fingerprints, and unique visitors are counted only once no matter how many times they visit the site. There are some ISPs that use Dynamic Host Configuration Protocol, which use different IPs for every file requested, making one visitor look like many. In this case, a single IP address does not indicate a unique visitor.

As an ex-engineer, I like to do experiments on thing to see the out comes and results. Not because of the money, but for the sake of the knowledge. For me money is not everything. Knowledge comes first and money will follows. If you see banners or ads on my site, its mean that I am experimenting on something. Experiments usually take time to be accomplished. If they didn't work out well, then they will disappear.

What I would like to share with you here is how I get downlines (through my experiments), since downline seems to be so crucial and the most critical issue for marketers and salesmen. Of course there are 1001 ways to do that, but in this post I will try to show you how I get numbers of downline virally through viralURL.com and Paid to Click (PTC) in promoting the site I have experimented with for free.

Here is the proof of my downlines from Clixsense.com, a PTC website that I have been experimented with. [To view pictures clearly, right click and open link in a new tab]. Until now I'm still a free member of the clixsense.com and do not intend to upgrade to premium member to get the benefits. Why? Because I do not need that money.

And here are the statistics of the affiliate program of clixsense.com on July, August and September 2009. Please give the attention on the number of unique visitors.

My main purpose is to find ways how I could place my website on the first page of the search engines like google without investing a single cent.

I have registered to clixsense.com as a free member and was given an affiliate link thread that can be used for promoting and to get downlines for commission.

Earlier I have already registered to viralURL.com so that I could use it to promote and expose my sites to the world and of course it's also free. Upon registering, I've named my folder as 'linktoviral'. I was also given an affiliate link thread for promotion purpose.

Human seems to make mistakes. So in my experiment, I intentionally spell the word "clixsense.com" wrongly as "clicksense.com". In other word, the unique visitors that came to my promoted site are the one that are looking or searching for clicksense.com from the google search engine (other search engines didn't seems to work). You may give it a try. Actually, website with the name of clicksense.com doesn't even exist.

Lets start here. I logged in to my viralurl.com account. On the "Cloaking Section" tab under 'Add URL', I have filled the URL part with my clixsense's affiliate link thread. This is compulsory (link thread to the landing page) but the rest is optional. However, I purposely filled the Page Title part with the word "Clicksense.com' instead of 'Clixsense.com'. I have clicked yes on 'Enable credits' and viral bar to be put at the top of the landing page. The rest I just left it blank. However the keyword part was automatically filled with '24761607' by viralURL.com and still can be changed at any time if I wanted to.

viralurl.com will create a title page of "clicksense.com" and a cloaked link address of my actual clixsense.com affiliate link's address (i.e., viralurl.com/linktoviral/24761607).

Its not finished here. I need to promote the "clicksense.com" so that it will become popular and will be on the first page of the search engines list. On the "Ad Credit Section" tab, I need to manage the Viral Bar Ads, so that my text ads could earn credits.

I have already earned credits simply by enabling the credits option and using my cloaked links. To earn additional credits, I have to add Viralbar Ads to my web pages, blogs etc. The advertiser is charged 0.4 Viralbar Ad Credits for each time one of his text ads are displayed on my web page. Each time that Viralbar Ads are shown on one of my web pages, I will earn 0.2 credits. Earlier I already edit my account by listing in my web page address. If you have more web pages, it will be much better.

On the "Promotion Section" tab, I have used only 3 out of 23 promotional tools listed (i.e., Affiliate link, Text link and Banner link) and promoted its on my websites. I just leaved the other promotional tools as it is. If you would like to use it so as to promote your site quicker, be my guest. You could explore deeper about this system.

Please be advised that this system works like virus, and some of the browsers would blocked the content of the ads. If you couldn't see the ads or banners on my website with "ads by ViralURL.com" caption, its mean that your browser has blocked the ads. The rest, I've leaved it to the viralurl.com, virally promoting my site. Out of 500 unique visitors monthly, who had visited my promoted site, about 2% has became my down line.

If you have installed Google Adsense on your sites, please be reminded not to use this method to promote your sites because we have to adhere to their policies regarding invalid clicks and impressions. It stated that, clicks on Google ads must result from genuine user interest. Any method that artificially generates clicks or impressions on your Google ads is strictly prohibited. These prohibited methods include but are not limited to repeated manual clicks or impressions, using robots, automated click and impression generating tools, third-party services that generate clicks or impressions such as paid-to-click, paid-to-surf, autosurf, and click-exchange programs, or any deceptive software. Failure to comply with this policy may lead to your account being disabled.

Home/Showing posts with label Tutorial. Show all posts

Belajar CSS ( Cascading Style Sheets )

Akhir-akhir ini banyak sekali yang membuat templete blogger dengan berbagai view dan bentuk dari yang sederhana sampai yang rumit, dari yang hanya satu kolom sampai yang ada 4 kolom. Pertama kali saya mengenal templete secara detail dari blognya kang rohman. Terima kasih kang atas tutorialnya yang lengkap meskipun saya tidak baca semua, ya... minimal ada yang bisa digunakan untuk mempercantik tampilan blog. Templete hasil karya kang rohman sudah lumayan banyak juga dan sengaja saya koleksi di collector templete untuk sewaktu-waktu bisa digunakan.

Melihat dan membongkar templete blogger yang pernah ditemui, templete blogger dibuat dalam format XML atau singkatan dari eXtensible Markup Language dan penuh dengan code CSS atau singkatan dari Cascading Style Sheets. Nah modifikasi yang sering saya lakukan pada templete hasil karya orang lain yang salah satunya hasil akrya kang rohman adalah pada kode CSS-nya karena pada dasarnya kode yang lainnya bisa diinput pada widget yang ada dan perlu belajar kode tertentu lagi seperti kode huruf berjalan dengan marque dan lain sebagainya.

Yuk kita belajar tentang CSS. Syntax atau cara penulisan kode CSS adalah sebagai berikut :

selector {
property:value;
... }

tidak ada batasan jumlah property:value yang ditempatkan pada sebuah selector. Ada tiga tipe utama dari selector yaitu : type selectors, class selectors, and ID selectors. Type selector adalah eksisting tags HTML seperti body dan H1. Class ditandai dengan titik (.) sebelum nama selector dan ID ditandai dengan tanda pagar (#) sebelum nama selector. Perbedaan dari Class dan ID bisa dilihat di bawah :

Class
.navbar {
color:#0000FF;
}

ID
#footer {
color:#FF00FF;
}

Ada 4 cara untuk menerapkan stilysheet CSS pada kode HTML yaitu :

1. Inline

Stiles dideklarasikan dalam dokumen html, misalnya sebagai berikut:

<p style="FONT-SIZE: 16px; FONT-FAMILY: verdana">This is font size 16.</p>

maka tampilanya adalah :

This is font size 16.

2. Embeded

Stiles CSS diletakan didalam tags head, misalnya sebagai berikut:

<head>
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
</head>

<body>
<div>
The background color is red
</div>
</body>

3. External Link

Kode CSS disimpan di Ekstenal File dengan ekstensi .css. Dan pada tags header maka ditempatkan kode misalnya sebagai berikut:

yang artinya deklarasi CSS disimpan pada file "external-stylesheet.css".

4. Import

Biasanya cara ini digunakan untuk stylesheet yang berbeda pada browser yang berbeda. Contoh penulisan adalah sebagai berikut:

Nah yang sering dipakai pada templete blogger dengan format XML adalah Embeded dimana kode CSS dideklarasikan didalam tags haed. Demikian dulu artikel belajar CSS awal, nanti pas dapat yang baru diupdate kembali.

Salam

haerudin

Home/Showing posts with label Tutorial. Show all posts

Belajar CSS ( Cascading Style Sheets )

<p style="FONT-SIZE: 16px; FONT-FAMILY: verdana">This is font size 16.</p>

maka tampilanya adalah :

This is font size 16.

2. Embeded

Stiles CSS diletakan didalam tags head, misalnya sebagai berikut:

<head>
<style type="text/css">
div {
background-color:#FF0000;
}
</style>
</head>

<body>
<div>
The background color is red
</div>
</body>

3. External Link

Kode CSS disimpan di Ekstenal File dengan ekstensi .css. Dan pada tags header maka ditempatkan kode misalnya sebagai berikut:

yang artinya deklarasi CSS disimpan pada file "external-stylesheet.css".

4. Import

Biasanya cara ini digunakan untuk stylesheet yang berbeda pada browser yang berbeda. Contoh penulisan adalah sebagai berikut:

Salam

haerudin

Home/Showing posts with label Tutorial. Show all posts

How To Create a Fillable PDF Form

Not many of us realized that the PDF (Portable Document Format - the file which encapsulates a complete description of a fixed-layout 2-D document) documents can be edited and most of all can be fill up with texts and figures (type on a pdf file) after it has been created. This is because most of us only have the 'Reader' for the purpose of viewing the pdf documents that we've received from someone. In other words, we could not amend, edit or modify the documents using the "Reader". There are plenty of free pdf reader/viewer available such as Adobe Reader, Foxit Reader, PDF XChange Viewer, Sumatra PDF and so on.

In our daily live as a students, government servants, office workers etc., sometime we have came across forms that has to be filled repeatedly which has only slight changes in content such as application forms, booking forms, order forms, purchase requests and so forth. Conventionally we have to fill it, print it and hand it over, fax it or post it out.

These forms actually can be converted into pdf forms (files) electronically or scanned as images. To make it fillable, we have to modify it or we may create a fresh new form using the Adobe® LiveCycle® Designer (ALD) which is bundled together with the Adobe® Acrobat® Pro (AAP). We may transform any PDF file into an interactive form with various field types and formatting options. The ALD also use scripting features to add even more functionality to PDF forms. We may say it as an advanced pdfs. Adobe® LiveCycle® Designer software provides robust and intuitive tools for creating interactive forms and personalized documents. With this forms, it will enable anyone using the 'Reader' to fill in and save to pdf forms locally. No more printing and faxing.

However in this post, I will show you how to create a simple fillable PDF form using Adobe Acrobat Professional 8.0 and Adobe LiveCycle Designer from an electronically converted pdf document such as a pdf document converted from Microsoft Word.

Let us have a sample of a pdf document to work with. For example this application form which was downloaded from Perpustakaan Negara Malaysia for publisher to apply the ISBN for their publications.

First Run the AAP. In the drop down menu under the 'Forms' tab select the 'Create New Form'. [To view pictures clearly, right click and open link in a new tab.]

The Pop up menu of 'How would you like to create your interactive form' will appear on the screen. There are four options to select from (i.e., i- Select a template; ii- Start with an electronic document; iii- Import data from a spreadsheet; iv-Scan from paper). In this example we select the second option and click 'Continue'. Then another pop up of the info about creating and distributing forms will appear. Just click 'Continue'.

Another pop up menu will appear for locating the document. Locate the downloaded document by browsing our hard disk and open that particular file. Then click 'Next'.

AAP will import the selected document and created a new pdf document. Then click 'Next'. Another pop up will appear. On this menu, we have to decide how we would like to identify the fields on our document. Choose 'Run Auto Field Detection' and click 'Next' and then 'Next' again. Form fields are automatically recognized and converted to fillable fields.

Congratulation! We've succeeded in creating a new fillable pdf document using AAP. The bluish fields on the document that we've just created represent the fillable areas. Now we are ready to edit our document in ALD. By clicking 'Done' our works in AAP end here.

Immediately, ALD will pop opened on the screen with a 'New Form Assistant' menu, showing the third step of the Form Return Setup (i.e, Adding buttons). The first and the second step has been done using the AAP. We have two option here. To add an 'email' button and/or a 'print' button. In this simple example, I decided just to add the 'print' button and unchecked the option for an 'email' button and click 'Finish'.

Now we have a document with a fillable fields in ALD that need to be modified. The document can be edited by deleting unwanted fields and inserting additional fields and adjust them to suit our need.

In the 'Design View' tab of the ALD, we can just drag in the Text fields, Numeric Fields, Date/Time Fields, Document Signature Fields, Image Fields and much more from the Library.

After we've added the text fields to the form design, we may edit the caption text and manipulate the object’s properties in the Field, Value, and Binding tabs of the Object palette. We may also define their properties. For example, predefine some fields such as name, address, telephone numbers and so on by inserting the default text on the 'Value' tab. This field however can still be change or edited after the form has been created.

We may preview our fillable pdf form by clicking the 'Preview PDF' tab next to the 'Design View' tab. Finally, if everything is set to our satisfaction, we may save the document and the document now is a fillable pdf document.

Look at this form after it has been modified and makes fillable. Isn't it nice and convenience? Click on it and down load to give it a try and good luck.

You may use product such as PDFPRO to convert easily your office document to pdf within seconds.

If you like this post, please bookmark and share. Thank you

Home/Showing posts with label Tutorial. Show all posts

Animated Header for Blogger

Animated images could make our website's layout or presentations catchy but it may also distracting and annoying if its overdo.

I have received a few request from my blog site's visitors who interested in animated images to teach them how I've created my Blogger-hosted animated header. So as not to turn them down, in this post I will try to show you how I've created and uploaded the animated header to my blog site.

Its quite simple but it seem a bit complicated to those who are not familiar with the application software such as Adobe Photoshop, SWiSHmax or/and Adobe Flash.

Its actually a GIF animation file format (the only allowed Blogger-hosted animated image file). Uploaded to GoogleDocs and installed to Blogger template. It is as simple as that.

I started by creating the background of the header using a graphic application software that I am familiar with that is the Adobe Photoshop. The width of the background actually was designed for my previous template which is 900 x 100 pixels in dimension and was saved as JPEG file.

Then, I used SWiSHmax (Flash or Shockwave application software) to create the animated text effect by importing the background file into it. SWiSHmax has plenty of preset effects that can be used to make our presentation looks stunning and impressive. I've used the preset animated effects for my animated blog header namely "Move together from random direction", "Vortex up and slide forward" with "Squash out" and "Typewriter".

The latest SWiSHmax3 has the advanced flash creation tool for the graphic artist or web professional. It could creates stunning flash animations and websites with ease. It also includes over 350 preset multimedia effects and over 180 ready-to-use components and vector shapes. It has the capability of importing images, graphics, sound and video from all popular formats so as to export presentations to flash, video, EXE, GIF animation or image sequence.

Since I am using the earlier version's product which has been discontinued and has no capability of exporting presentations to GIF animation files, my animated header was save as a swf file.

If you have the latest version, you may skip the next step (converting SWF files to GIF Animation files).

In this step, I've used Adobe Flash application software (usually used to produce flash animation, flash banners or flash files) only just for the conversion purpose by importing the SWF file to the stage and set the 'loop play back' on, so that my animated header will repeatedly animated and then exported it as a GIF animation file.

The next step is to upload the file. Animated images won't stay animated if the image is a Blogger-hosted since the images are stored in Picasa Web Albums and Picasa doesn't support animated images.

What I've done was, to upload my animated GIF file to Google Docs of my Google Account.

Finally I've to edit or configured the header on my Blogger template layout by replacing the image of the my previous header with the newly created animated GIF file using the link address retrieved from the GoogleDocs.