Change The Address bar Icon (Favicon)

If you open a web/blog you will see an icon on addressbar. If you make blog in blogger your default icon will be like this:





But you can change the icon (favicon) with your own picture. it's very simple to do that. The first thing you have to do is prepare an image with low dimension, it's about 22x22 pixel to 32x32 pixel, actualy bigger is no problem but it will reduce speed to open your web/blog. And they can be formatted as gif, jpg, bmp, ico, png. Then you store your image to webhosting. But if don't know how to make it or don't want to occupied you can use the icon listed below. Ok lets begin the trick.


1. Login to blogger, chose "Layouts --> Edit HTML
2. Put the code below into your tag or below code.

"link

href=http://ambasagai.fileave.com/image1.gif rel='SHORTCUT ICON'/>

3. The bold text is an address for your icon, you can change it with your own or just copy the below listed address icon.
4. Save your editing.

here is the icon and it's addres


" : http://ambasagai.fileave.com/image1.gif
" : http://ambasagai.fileave.com/image2.gif
" : http://ambasagai.fileave.com/image3.gif
" : http://ambasagai.fileave.com/image4.gif
" : http://ambasagai.fileave.com/image5.gif
: http://ambasagai.fileave.com/image6.gif
: http://ambasagai.fileave.com/image7.gif
" : http://ambasagai.fileave.com/image8.gif
" : http://ambasagai.fileave.com/image9.gif
" : http://ambasagai.fileave.com/image10.gif
" : http://ambasagai.fileave.com/image11.gif
" : http://ambasagai.fileave.com/image12.gif
" : http://ambasagai.fileave.com/image13.gif
" : http://ambasagai.fileave.com/image14.gif
" : http://ambasagai.fileave.com/image15.gif
" : http://ambasagai.fileave.com/image16.gif


[+/-]READ MORE.......!!!

Embedded Comment Form Under Post

one of the new features from blogger.com is Embedded Commenet From, now you will have a comment form under your post.

The screenshot would be like this :

comment form under post















Are you ready to do some action? Below are the steps to get Comment Form under Post!



  1. Login to http://draft.blogger.com with your blogger ID. Just remember, you should login to http://draft.blogger.com not to http://blogger.com because this feature is still in draft.

  2. Click Settings.

  3. Click Comments tab

  4. Go to Comment Form Placement and choose Embedded below post. Refer to picture below :

    embedded below post

  5. Click save Settings button.

  6. Done.


Please View your blog and click your post title to open your post and you should be able to see the comment form under your post. Are there success? If those things didn’t work please follow the steps below :

  1. Click Layout tab.

  2. Click Edit HTML tab.

  3. Click Download Full Template. Please back up your template (important!)

  4. Please tick the little box beside Expand Widget Templates. Refer to picture below :



    expand-widget.png


  5. Find the code like this (some of template is different, please focus on Green color and some template have two code, please choose the code at your bottom template code:



    <p class='comment-footer'>
    <b:if cond='data:post.allowComments'>
    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>

    </p>








  6. Delete the above code and replace with codes below :




    <p class='comment-footer'>

    <b:if cond='data:post.embedCommentForm'>

    <b:include data='post' name='comment-form'/>

    <b:else/>


    <b:if cond='data:post.allowComments'>

    <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>

    </b:if>

    </b:if>

    </p>








  7. Click SAVE TEMPLATE







  8. Done. Please see the result.


[+/-]READ MORE.......!!!

Display Yahoo Messenger Status on Blog

The advantage of showing Yahoo Messenger status on your blog is your visittors can talk or ask something to you directly via YM, it will make your relationship with your visitor to be more tighly. Ok lets begin.

If you’re oflfline, it will display image like this:



And if you’re online, it will display icon like this:



It’s very simple to create it. You just copy the code below and put it on your "Page Element" or sidebar.


<a href="ymsgr:sendIM?ulumamis"> <img src="http://opi.yahoo.com/online?u=ulumamis&amp;m=g&amp;t=2&amp;l=us"/>
</a>


Change the red text (Ulumamis) with your YM id.
Look at the green number "2", you can change it. What the result of doing this? you will different image/icon as your YM status.

You must try it !!!!



[+/-]READ MORE.......!!!

GOOGLE CHROME

Google Chrome is an open source, free web browser developed by Google that has about 1% share of browser market. It was first released as a beta version for Microsoft Windows on 2 September 2008. The name is derived from the graphical user interface frame, or "chrome", of web browsers.
Chromium is the open source project behind Google Chrome, and is released under the BSD license. It implements the same feature set, but has a slightly different logo.


History

Announcement
The release announcement was originally scheduled for 3 September 2008, and a comic by Scott McCloud was to be sent to journalists and bloggers explaining the features of and motivations for the new browser.[6] Copies intended for Europe were shipped early and German blogger Philipp Lenssen of Google Blogoscoped[7] made a scanned copy of the 38-page comic available on his website after receiving it on 1 September 2008.[8] Google subsequently made the comic available on Google Books and their site[9] and mentioned it on its official blog along with an explanation for the early release.[10]

Public release

The browser was first publicly released for Microsoft Windows (XP and later only) on 2 September 2008 in 43 languages, officially a beta version. Chrome quickly gained about 1% market share. Mac OS X and Linux versions are under development.[11][12][13][14]
On 2 September, a CNET news item[15] drew attention to a passage in the terms of service for the initial beta release, which seemed to grant to Google a license to all content transferred via the Chrome browser. The passage in question was inherited from the general Google terms of service.[16] On the same day, Google responded to this criticism by stating that the language used was borrowed from other products, and removed the passage in question from the Terms of Service.[17] Google noted that this change would "apply retroactively to all users who have downloaded Google Chrome."[18] There were subsequent concerns about the browser's use of an unusual tracking feature that sends information about visited websites back to Google. The company stated that this is only enabled when users opt in by checking the option "help make Google Chrome better by automatically sending usage statistics and crash reports to Google" when the browser is installed.[19]
The first release of Google Chrome passed the Acid1 and Acid2 tests. While it did not pass the Acid3 test, it scored 78 out of 100 required to pass the test. This is higher than both Internet Explorer 7 (14) and Firefox 3 (71), but lower than Opera (84).[20] When compared to development builds, Chrome scored lower than Firefox (85), Opera (99), and Safari (100), but still higher than Internet Explorer (21).[20]
[edit]Unofficial Chromium releases, workarounds and mod utilities
On 15 September 2008, CodeWeavers released an unofficial bundle of a WINE derivative and Chromium Developer Build 21 for Linux and Mac OS X, which they dubbed "CrossOver Chromium".[21][22]
An unofficial workaround for use with Windows 2000 was referenced on one of Chromium's issue discussion pages.[23]
An unofficial patch was also released to fix a scrolling bug, which affected certain mouse software.[24]
Iron is a release of Chromium software that explicitly disables the collection and transmission of usage information to Google which is optional within Chrome.[25]

Development

Primary design goals were improvements in security, speed, and stability compared to existing browsers. There also were extensive changes in the user interface.[9] Chrome was assembled from 26 different code libraries from Google and others from third parties such as Netscape.[26]

Security

Chrome periodically downloads updates of two blacklists (one for phishing and one for malware), and warns users when they attempt to visit a harmful site. This service is also made available for use by others via a free public API called "Google Safe Browsing API". Google notifies the owners of listed sites who may not be aware of the presence of the harmful software.[9]
Chrome will typically allocate each tab to fit into its own process to "prevent malware from installing itself" or "using what happens in one tab to affect what happens in another", however the actual process allocation model is more complex.[27] Following the principle of least privilege, each process is stripped of its rights and can compute, but can not write files or read from sensitive areas (e.g. documents, desktop)—this is similar to the "Protected Mode" that is used by Internet Explorer 7 on Windows Vista. The Sandbox Team is said to have "taken this existing process boundary and made it into a jail";[28] for example, malicious software running in one tab is unable to sniff credit card numbers, interact with the mouse, or tell "Windows to run an executable on start-up" and it will be terminated when the tab is closed. This enforces a simple computer security model whereby there are two levels of multilevel security (user and sandbox) and the sandbox can only respond to communication requests initiated by the user.[29]
Typically, Plugins such as Adobe Flash Player are not standardized and as such, cannot be sandboxed as tabs can be. These often need to run at, or above, the security level of the browser itself. To reduce exposure to attack, plugins are run in separate processes that communicate with the renderer, itself operating at "very low privileges" in dedicated per-tab processes. Plugins will need to be modified to operate within this software architecture while following the principle of least privilege.[9] Chrome supports the Netscape Plugin Application Programming Interface (NPAPI),[30][31] but does not support the embedding of ActiveX controls.[31] Also, Chrome does not have an extension system such as Mozilla's XPInstall architecture.[32] Java applets support is available in Chrome as part of the pending Java 6 update 10, which currently is in Release Candidate testing.[33]
A private browsing feature called Incognito mode is provided that prevents the browser from storing any history information or cookies from the websites visited. This is similar to the private browsing feature available in Apple's Safari and the latest beta version of Internet Explorer 8.[34]
A denial-of-service vulnerability was found that allowed a malicious web page to crash the whole web browser.[35][36] However, Google Chrome developers confirmed the flaw, and it was fixed in the 0.2.149.29 release.[37]

Speed

The JavaScript virtual machine was considered a sufficiently important project to be split off (as was Adobe/Mozilla's Tamarin) and handled by a separate team in Denmark. Existing implementations were designed "for small programs, where the performance and interactivity of the system weren't that important," but web applications such as Gmail "are using the web browser to the fullest when it comes to DOM manipulations and Javascript." The resulting V8 JavaScript engine has features such as hidden class transitions, dynamic code generation, and precise garbage collection.[9] Tests by Google showed that V8 was about twice as fast as Firefox 3 and the Safari 4 beta.[38]
Several websites have performed benchmark tests using the SunSpider JavaScript Benchmark[1] tool as well as Google's own set of computationally intense benchmarks, which includes ray tracing and constraint solving.[39] They unanimously report that Chrome performs much faster than all competitors against which it has been tested, including Safari, Firefox 3, Internet Explorer 7, and Internet Explorer 8.[40][41][42][43] While Opera has not been compared to Chrome yet, in previous tests, it has been shown to be slightly slower than Firefox 3, which in turn, is slower than Chrome.[44][45] Another blog post by Mozilla developer Brendan Eich compared Chrome's V8 engine to his own TraceMonkey Javascript engine which is newly introduced in Firefox 3.1alpha, stating that some tests are faster in one engine and some are faster in the other, with Firefox 3.1a faster overall.[46] John Resig, Mozilla's JavaScript evangelist, further commented on the performance of different browsers on Google's own suite, finding Chrome "decimating" other browsers, but he questions whether Google's suite is representative of real programs. He states that Firefox performs poorly on recursion intensive benchmarks, such as those of Google, because the Mozilla team has not implemented recursion-tracing yet.[47]
Chrome also uses DNS prefetching to speed up website lookups.[48]

Stability

The Gears team was considering a multithreaded browser (noting that a problem with existing web browser implementations was that they are inherently single-threaded) and Chrome implemented this concept with a multi-process architecture,[49] similar to Loosely Coupled Internet Explorer (LCIE) recently implemented by Internet Explorer 8.[50] By default, a separate process is allocated to each site instance and plugin.[51] This prevents tasks from interfering with each other, which is good for security and stability; an attacker successfully gaining access to one application does not gain access to all, and failure in one application results in a Sad Tab screen of death, similar to the well-known Sad Mac, except only one single tab crashes instead of the whole application. This strategy exacts a fixed per-process cost up front, but results in less memory bloat overall as fragmentation is confined to each process and no longer results in further memory allocations.[52]
Chrome features a process management utility called the Task Manager which allows the user to "see what sites are using the most memory, downloading the most bytes and abusing [their] CPU" (as well as the plugins which run in separate processes) and terminate them.[9] Some users have reported a conflict with Internet Explorer, often resulting in the blue screen error on Windows.[53

User interface

The main user interface includes back, forward, refresh, bookmark, go, and cancel options. The options are similar to Safari, while the location of the settings is similar to versions of Internet Explorer starting with version 7. The design of the window is based on Windows Vista.
When the window is not maximized, the tab bar appears directly under the title bar. When maximized, the title bar disappears, and instead, the tab bar is shown at the very top of the window. Unlike other browsers such as Internet Explorer or Firefox which also have a full-screen mode that hides the operating system's interface completely, Chrome can only be maximized like a standard Windows application. Therefore, the Windows task bar, system tray, and start menu link still take space at all times unless they have been configured to hide at all times.
Chrome includes Gears, which adds features for web developers typically relating to the building of web applications (including offline support).[9]
Chrome replaces the browser home page which is displayed when a new tab is created with a New Tab Page. This shows[54] thumbnails of the nine most visited web sites along with the sites most often searched, recent bookmarks, and recently closed tabs.[9]
The Omnibox is the URL box at the top of each tab, which combines the functionalities of both URL box and search box. It includes autocomplete functionality, but only will autocomplete URLs that were manually entered (rather than all links), search suggestions, top pages (previously visited), popular pages (unvisited), and text search over history. Search engines also can be captured by the browser when used via the native user interface by pressing Tab.[9]
Popup windows "are scoped to the tab they came from" and will not appear outside the tab unless the user explicitly drags them out.[9] Popup windows do not run in their own process.[citation needed]
Chrome uses the WebKit rendering engine to display web pages, on advice from the Android team.[9] Like most browsers, Chrome was extensively tested internally before release with unit testing, "automated user interface testing of scripted user actions" and fuzz testing, as well as WebKit's layout tests (99% of which Chrome is claimed to have passed). New browser builds are automatically tested against tens of thousands of commonly accessed websites inside of the Google index within 20-30 minutes.[9]
Tabs are the primary component of Chrome's user interface and as such, have been moved to the top of the window rather than below the controls. This subtle change contrasts with many existing tabbed browsers which are based on windows and contain tabs. Tabs (including their state) can be transferred seamlessly between window containers by dragging. Each tab has its own set of controls, including the Omnibox.[9]
Chrome allows users to make local desktop shortcuts that open web applications in the browser. The browser, when opened in this way, contains none of the regular interface except for the title bar, so as not to "interrupt anything the user is trying to do." This allows web applications to run alongside local software (similar to Mozilla Prism and Fluid).[9]
By default, the status bar is hidden whenever it is not being used. However, it appears at the bottom left corner whenever a page is loading and when a hyperlink is hovered over.
For web developers, Chrome features an element inspector similar to the one in Firebug.[4

Usage Tracking and Communication

Google Chrome identifies each installation with a unique ID and collects usage statistics including keystrokes. Chrome's usage tracking option enables the software to regularly transmit this information to Google[55][not in citation given]. Usage tracking is an option presented to the user during the software's installation. Once accepted, it is possible to disable the transmission of this information by modifying Chrome's "Under the Hood" options.[56] Freeware programs such as UnChrome can remove the unique ID without having to change the browser.[57] Unofficial builds, such as SRWare Iron, seek to remove these features from the browser altogether[58].

Plugins & Themes

Recently, people have started releasing different plugins and themes (Similar to how Firefox uses themes and plugins) for the Chrome browser. Although there is no "official" program to install them with, users have found a way to use them.

Reception

The Daily Telegraph's Matthew Moore summarizes the verdict of early reviewers: "Google Chrome is attractive, fast and has some impressive new features, but may not—yet—be a threat to its Microsoft rival."[59]
Microsoft reportedly "played down the threat from Chrome" and "predicted that most people will embrace Internet Explorer 8."[60] Opera Software said that "Chrome will strengthen the Web as the biggest application platform in the world."[60] Mozilla said that Chrome's introduction into the web browser market comes as "no real surprise", that "Chrome is not aimed at competing with Firefox", — and furthermore, should not affect Google's financing of Firefox.[61][62]
Chrome’s design bridges the gap between desktop and so-called “cloud computing.” At the touch of a button, Chrome lets you make a desktop, Start menu, or Quick Launch shortcut to any Web page or Web application, blurring the line between what’s online and what’s inside your PC. For example, I created a desktop shortcut for Google Maps. When you create a shortcut for a Web application, Chrome strips away all of the toolbars and tabs from the window, leaving you with something that feels much more like a desktop application than like a Web application or page.
—PC World [63]
On September 9, 2008 the German Federal Office for Information Security (BSI) issued a statement about their first examination of Chrome, expressing a concern over the prominent download links on Google's German web page, because "beta versions should not be employed for general use applications" and browser manufactures should provide appropriate instructions regarding the use of pre-released software. They did, however, praise the browser's technical contribution to improving security on the web.[64]
Concern about Chrome's optional usage collection and tracking have been noted in several publications.[65][66]





[+/-]READ MORE.......!!!

Create Tab View

Tab View is very usefull box. We can fill it with many contain. It will save our blogs area. (See Image Below)


Here is Tutorial how to create a tab view:

1. Login to blogger, go to "Layout --> Edit HTML"
2. Then find this code ]]></b:skin>
3. Insert the below code before ]]></b:skin> or in CSS tag.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width top main menu */
text-align: center;
height: 24px; /* Height top main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Main menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Top main menu font */
font-weight: 900;
color: #000; /* Top main menu font color */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Top main menu background color */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Content Border color */
overflow: hidden;
background-color: #FF9900; /* Content background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}



4. You can change the code according to the red text explanation. To get html color code see HERE
5. The next step is put the code below before </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>



6. Then "save" it.
7. Go to "Page Elements" menu
8. Chose "Add Page Element" --> "HTML/Javascript" in place where you want to put this tab.
9. Insert this code :

<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>
<a>Tab 3</a>

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

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />

</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />

</div>
</div>


</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>



Note :
- The number or the blue text(350px) Is size of the tabview.
- The green code is the main menu text
- The red code is the content of tabview. you can fill it with links, banner, widget, comment or anything.
- To add more menu, see on the blink code. Add the code under it.

Good luck every body.


[+/-]READ MORE.......!!!

How to Create Dropdown Menu

What is dropdown menu?
Dropdown menu is like this :



Here is the trick how to create dropdown menu :

Copy the code below and put it on your page elements.


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

The red text is links, change it with your links.
The blue text is Anchor text. Yau must change it.

For example :


<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Blog Archive</option>
<option value="http://trick-blog.blogspot.com/2008/02/tutorial-to-create-dtree-menu.htmll"> How to Create Dtree Menul </option>
<option value="http://trick-blog.blogspot.com/2008/01/how-to-create-search-engine-in-blogger.html"> How to Create Search Engine </option>
</select>

The result would be like this:



To add more menu/item, put a code like below

<option value="Links 3">Text 3</option>

before this code </select>

If you want the links opened in new window, change the code below

<select onChange="document.location.href=this.options[this.selectedIndex].value;">

with this code ::

<select onchange="javascript:window.open(this.options[this.selectedIndex].value);">

The resul would be like this:



[+/-]READ MORE.......!!!

How To Create Readmore

If you post an articel to your blog it will displayed on a main page, if you have a long post content, your blog will opened more long time. But it can be tricked with a script to short your post or only abstraction post will dispaled on a main page, and the full post will replaced by "Read More" link. Here's the trick to create "Readmore"

1. You have to Login to blogger, then chose Layouts --> Edit HTML
2. Click on "Expand Widgets Template" checkbox.
3. Find the code below in your HTML Codes. ( the short way to find is by copy the code below then press "Ctrl + F" then paste in the box)

<div class='post-header-line-1'/>
<div class='post-body'>

or

<div class='post-header-line-1'/>
<div class='post-body entry-content'>


4. If you have found it, put the code below under the above 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>


5. Under the code, you will find code like this <p><data:post.body/></p> you have to put the code below under it.


<a expr:href='data:post.url'>Read More......</a>
</b:if>


6. You can change the "Read More" text with other.
7. Save your job.
8. Go to Setting --> Formatting Tab menu
9. At the lower page you will found "text area" box beside text "Post Template"
10. Put the code below to the box


<span class="fullpost">



</span>


11. Then click Save the setting.
12. If you want to post, put your short post or description above this code <span class="fullpost">, and the next or full post put between <span class="fullpost"> and </span> code.

GOOD LUCK!!!!!

[+/-]READ MORE.......!!!

How to Hide Your Post Date, Time and/or Author

There are some reason for bloger to hide Post date, time and author. May be they want to see their blog looks clear or everything. Now I will show you the trick to "hide your post date, time and or author". the mothods is very simple, just find the code that I pointed to you and delete it. You can chose which part want to delete, date only, time only, author only or it all. Ok, if you decided to do it lets begin the hack.

1. Login to blogger the go to "Layout --> Edit HTML"
2. Click on the "Download Full Template" to back up your template first.
3. Check on the "Expand Widget Templates" check box.

Hide Post Date
find this code and delete it.
<data:post.dateHeader/>.

Hide Post Time
find this code and delete it.
 <span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' rel='bookmark'
title='permanent link'><abbr class='published'
expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
</b:if>
</b:if>
</span>
.

Hide Post Author
find this code and delete it.
 <span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>
.

5. Save your editting

Good Luck ............

Related Post :
Change Post Date Become Calender Icon


[+/-]READ MORE.......!!!

Feature Draft Blogger

KOmentar di Bawah Postingan

Emang Blogger terus Selalu memberikan pelayanan yang memudahkan para Penggunannnya.. salah satu Featurenya adalah [Blogger In Draf].

cara Menggunakannya Mudah ketik aja URLnya di http://draft.blogger.com/

Didalam Draft Blogger ini ada Feature Membuat Kotak komentar dibawah postingan.. maksudnya apa sih?? ituloh kaya Kotak Komentar Yang ada di Wordpress yang langsung di bawah article...

cara Mengaturnya mudah kalo sudah masuk ke http://draft.blogger.com/ pilih tab {Setting/Pengaturan}terus Klik juga {Comment/Komentar}.Contoh Gambarnya bisa diliat seperti yang dibawah ini.. :





Tuh yang dilingkari warna merah settinganya,,, Kemudian setelah itu {Save/Simpan}
Dan silahkan lihat hasil Modifikasinya..



Semoga Berhasil..

Sangat disayangkan jika Ilmu hanya Copy paste...

Berkreasilah dengan Cara mengembangkannya ..

Maju terus Blogger iNdonesia..


Sumber :http://dunia-blogger.blogspot.com/2008/07/coment-under-post.html

[+/-]READ MORE.......!!!

How to Create Horizontal Tabs Menu

What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's look like this:



To create it is not as simple as it's look, it's complicated. You have to design button, you have to create CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.


The first thing you have to di is create an image like this:

and

If you can't to create it, you can use my below images:

blackleft.gifblackright.gif
greenleft.gifgreenright.gif
redleft.gifredright.gif
unguleft.gifunguright.gif
yellowleft.gifyellowright.gif
blueleft.gifblueright.gif
whiteleft.gifwhiteright.gif


Ok, let's begin

1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code ]]></b:skin>, if you found it then put the code below above it

/*credits : http://trick-blog.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://blogoholic.info/files/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://blogoholic.info/files/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}


you can change the bold text with other image, for example, if you want to chose my red menu image the code will be like this:

background:url("http://blogoholic.info/files/menu/redleft.gif") no-repeat left top;

background:url("http://blogoholic.info/files/menu/redright.gif") no-repeat right top;


5. Then copy the code below

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://trick-blog.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http:/trick-blog.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >


change http://trik-tips.blogspot.com with your own link, and change the bold text with your own text.

6. Next step is to put the tabs menu into your blog, this more difficult because we have different templates. There are some methods to do this, Here is the methods, you can chose and try for any methods.

- methode A:
Find this code :<div id="content-wrapper">. if you found it, paste the above code (code number five) above it. Preview your template, if it looks good save your editting, but if it's not good try to put above this code </div>, you will find many codes like that, try to put the code above it and preview your your blog, do it more often until it's suitable for your template.

If you have nice with your menu position, is unnecessary to do methode B, but if you feel difficult to apply methode A you can try methode B
- methode B:
Find the below code :

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>


change the green text so that to become like this:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>


Save your setting, the go to "Page Elements" and click "Add page Element " on the header area, chose "HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview your new blog.

[+/-]READ MORE.......!!!

How to Hide Navbar (Navigation Bar)

Navbar (Navigation Bar) is fasility of blogger.com. But many blogger want to hide this navbar because it will make their blog layout look better without a box (navbar) above it. The Question "is this break TOS (Term Of Service) of blogger.com?" I don't know, but so far is good, there are many blogger hide their navbar but no reaction from blogger.com. So? do you want to hide Your blog navbar? if you want here's the trick to hide blogger navbar:

1. Login to Blogger then klick "Layout --> Edit HTML".
2. Copy the code below and insert into your <head> tag.

#navbar-iframe {
display: none !important;
}


3. for example put like this

-----------------------------------------------
Blogger Template Style
Name: xxx
Designer: xxx
URL: http://trick-blog.blogspot.com
Date: Januari 2008
----------------------------------------------- */

#navbar-iframe {
display: none !important;
}


/* Variable definitions
====================

4. Save your setting, and open your blog, You will have no navbar in your blog page

CONGRATULATION!!!!!

[+/-]READ MORE.......!!!

Change Post Date Become Calender Icon

If you bored with your blog face, may be you can use this trick to make your blog more beautiful. This trick will explain "how to change posting date to become a calender icon" like as you see in my blog. If you interest c'mon let's do it now.
The first thing you have to do is change your "date header format" to become mm.dd.yyyy (1.24.2008). How to do this? go to your blogger account, then chose "Setting --> Formatting, change "date header format" to become what I said before (mm.dd.yyyy) then save your setting.

Next step is go to tabs "Template --> Edit HTML". Don't forget to backup your template first. Click on a "Expand Widget Templates" check box. OK lets go to the deep trick.

1. Find this code <TITLE><data:blog.pageTitle/></TITLE> in your HTML. If you found it, put the code below under it.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trick-blog.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>


2. Then Find this code:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}


if you can't found it try to find this:

h2.date-header {
margin:1.5em 0 .5em;
}


3. OK, you have found it? next step is put the below code under it.

.dateblock {
background: url("http://blogoholic.info/files/kalender/bluecalend.gif")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}


Code http://blogoholic.info/files/kalender/bluecalend.gif is the place for calender icon, you can change it with your own image or use my image below. what to do is change the bold text with the pictures code below, for example, if you want to change it with red icon calender, just change bluecalend.gif with redcalend.gif.
here is the icon images:

blackcalend.gifblue2calend.gifbluecalend.gif
greencalend.giforangecalend.gifpinkcalend.gif
redcalend.gifungucalend.gifyellowcalend.gif


4. Next step is find this code <data:post.dateHeader/>. The easy way to find it is by copying the code the press Ctrl-f then paste to the shown box, you will found the code immediately. If you didn't anything you can find it manually. OK, If you found it change the code with the below script.

<DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Save your editting, and see the result, is it working? :t

if the month and date upper, you can add this code padding: 4px 0px 0px 0px; under this code .month { and this .day {

Good Luck ............

[+/-]READ MORE.......!!!

Internet Advertising
Template by : Kendhin X-Template

Back to Top