Stylish Blogger Label using CSS

There are so much interesting you can do if you know much about CSS. For example for my current website design, I am using customize CSS to manage how the listing will behave. You can see a sample of it at my site now or at below image.


I am going to share you all the CSS here. Check out this CSS line:
.Label {  padding:4px 0;  width: 100%;  }
.Label ul{  padding:0;  margin: 0;  }
.Label ul li{ font-size:12px;clear: both;  display: inline;  float: right;  margin: 0 0 8px;  padding: 0; text-align:right; color: #00000;}
.Label ul li a{  background: #ff9900;  color: #FFFFFF;  display: block;  font-family:Verdana,serif;  padding: 4px 12px; font-size:11px;  }
.Label ul li a:hover{  background: #FFEF66;  color: #222222;  text-decoration: none;  }
 Just go Blogger Template Designer > Advance > Add CSS . This the location where you should paste. But remember to add the Label widget before or after you complete above step.

Need help? Post a comment below. :)

Part II : Create a page with multiple forms linked to multiple tables

Previously I has written about creating a page with multiple forms linked to multiple database. You can read it here. But, what I am going to post now is about trigger upon insert action, and how to pass the value into another page item.

Simple example is like this:

You are created 2 separate form in one page in APEX environment. One Submit button operation, all the data will be insert accordingly into their respective table, let say Table1 and Table2. Table1 has an auto generate ID by trigger on insert operation. And this Table1.ID was require to be pass to Table2. This scenario can be said as one to many relational table inside database.

I have tried to use the DML operation to pass the primary key into another page item unfortunately has failed. The workaround of it was to use 'RETURNING' clause in PL/SQL.

Check-out SQL below:

insert into Table1 ( column1, column2, column3) values
( :P1_Data1, :P1_Data2, :P1_Data3)
returning YourPrimaryKeyColumnName into :P1_YourTargetPageItem;

I took a lot of time searching how to do it. If you need more details on this, just let me know here.

APEX - Create a page with multiple forms linked to multiple tables and 1 Submit Page Button for INSERT operation

I am having a problem to update into Oracle table. To be exact, I have created 2 separate form into 1 page. And those forms are actually binded with different table as well. My operation or design will be, when I click a ‘Submit’ button, all the data entered by user will be inserted into their respective table. Well, I got an error. What has been wrong?

Oracle APEX limitation?

After ‘googling’ (I wonder if this word has in dictionary..) around, I found that this is a known limitation for APEX. Well, obviously Oracle need to check further for this. You can only have one automated row fetch (DML) process per page. However, it does not means that we cannot add other form on the page. There are few a solution for that which works well for me.

Create Separate Region for separate Form

1. On Page Rendering, locate Region > Body and right click. Click ‘Create’ to create new region. This one will be your 1st Form.
2. Create Region, select ‘Form’ and press ‘Next’
3. Create Form, select ‘Table’ and press ‘Next’. Please just proceed until the wizard complete. The 1st Form will be straight forward.

The Important on Next Sequence Form

You may now see the new region successfully created from the wizard. The Form will populated text field or other field as per your selection.

APEX-Page Definition

Now, the next step we need to do will bit different.

4. Repeat same step 1 and 2, but for 3 select ‘SQL Query (fetch row) instead of ‘Table’

image

5. Press ‘Next’ until you found ‘SQL SELECT Statement’ page tab. Here will be SQL to populate the page item into the page. You can type it manually, or click [Query Builder] link.

6. The new page items will be populated according to your SQL. You can see the Form already created for you.

Setting the INSERT Operation

You may notice that there are few button automatically created inside the page. For me, I do not want it so many, so I created a new region for only 1 button. This button will do action INSERT for those 2 form above for 2 different table. Just make sure that the button action is ‘Submit Page’.

image

7. Since the 1st Form using Automatic Row Processing(DML), I just need to set the INSERT operation for Table #2 in Form #2. Go to Page Processing > Processes and right click on it.

image

8. Select PL/SQL and Next. Give your process a name and Next.

9. When reach at [*Enter PL/SQL Page Prosess] , enter you INSERT SQL statement. Remember to use page items in this SQL. For Example:
insert into Table2 (column1, column2, column3) values ( : P1_Item1, : P1_Item2, : P1_Item3);
Hopefully above steps works for you. If you got comment, leave your comment below.

Free hosting for blogging–Blogspot (Blogger)

Like many other free blogging platform available like Blogger, Wordpress.com, TypePad, and Weebly, they certainly will set limitation of their services.

Since I am a Blogger user, I will talk about blog limitation on Blogger.

Actually, first thing came across my mind is, How Many Blog can I have in Blogger?. Some of internet user created their blog account for some various reason. It can be for personal blog, just for fun, even to make some money from affiliate program and advertising program like Adsense. For me, I have multiple various reason creating an account for Blogger. For example like my site here purposely to put a notes on my journey of exploring internet and IT knowledge.

Well, the answer of my first thought is in Blogger you may have up to 100 blogs per account. Pretty much right? And there is no limit of storage size per account in Blogger. Actually, Blogger "limits" here aren't really very limiting. Below are the important “limits” as in Blogger support page. You can read it below or simply go to their original page here.

Number of Blogs: You can have up to 100 blogs per account.

Number of Posts: There is no limit on the number of posts you can have on one blog. They will all be saved on your account (unless you manually delete them) regardless of whether you are publishing archives or not.

Size of Posts: Individual posts do not have a specific size limit, but very large posts may run you up against the page size limit. (See the next item.)

Size of Pages: Individual pages (the main page of your blog, or your archive pages) are limited to 1 MB in size. This will allow for a few hundred pages of text, but it may be a problem if you are listing hundreds of posts on the front page of your blog. If you hit this limit, you will see an error message saying "006 Please contact Blogger Support." You can get around this error by lowering the number of posts on your main page, which will have the added benefit of making your page load faster as well.

Number of Comments: A post can have any number of comments. As with archived posts, if you choose to hide comments on your blog, all pre-existing comments will remain saved on your account.

Number of Pictures: Up to 1 GB of total storage, shared with Picasa Web

Size of Pictures: If you are posting pictures through Blogger Mobile there is a limit of 250K per picture.

Team Members: There is a limit of 100 members per blog.

Number of Labels: Up to 2000 unique labels per blog and 20 per post.

Blog Description: Limited to 500 characters, with no HTML. Adding additional characters or HTML may cause it to revert to a previous setting.

"About Me" Profile Information: Maximum of 1,200 characters.

Profile Interests and Favorites: Maximum of 2,000 characters in each field.

How to align to left for Blogger Simple Template

All Simple Template inside Blogger was designed with centered align for the the whole page. However we can align the page according to your customization needs. It can be either left, center or right.

First thing first

It is important to identify the DIV element in your blog template. As per provided in Simple Template, the body layout can be customize to 1 column, 2 columns and even 3 columns. Identify the DIV element of it, so that later we are modifying the correct element to make it align as per our needs.

How to identify it easily?

In this post I will talk particularly on Chrome browser. Chrome provided a very useful, wonderful tools to check the element inside the webpage.

1. Open your blog page on new tab if you not yet opened it. Right Click at anywhere at the page. Look for 'Inspect Element'
2. You now will see a new page divider below it. Here you will see all the html code, DIV element, CSS and also a script associate to the page.


3. From above image, I have identify the correct element for me to alter. This will be use to align my page to left (I wanted to make it left)


4. Go Blogger Template Designer > Advance > Add CSS . Enter the code below: (If you do know where Blogger Template Designer, click on this post here )
.content {float:left}

5. Click 'Apply to Blog'Now your blog successfully aligned to left. Happy editing.






Remove Blogger Navigation Bar on top of the blog

On some some reason that you wanted to remove the navigation bar for blogger blog, that was a piece of cake. But this is only applicable if you are using Blogger Simple Template for your blog.



1. Go to Layout. You will see a page as in Image below. Look for 'Navbar' and click 'Edit'.
2. On Navbar Configuration > Select 'Off"
3. Click 'Save'

You will not see the navbar after you have perform above step.

How to control Image display and properties in Simple Blogger Template

If you are using a Simple Blogger Template as your blog theme, you may notice that the image inside the post body will be display as maximum resolution if you select the image to full size when you attaching the image.

To take full control over it, you can customize it using CSS. This setting can be done in Blogger Template Designer. Just follow these below steps:

1. Go To Template > Live on Blog : Customize
2. Advance > Add CSS
3. Add code below:
.post-body img{box-shadow:none;max-width:100%;}
4. Click 'Apply to Blog'

*max-width:100% tells the browser to shrink or shrank the image to follow 100% of post-body width.
*box-shadow:none; I do not like shadow all around the image. So I set it to none.




ShareThis