Joomla Tutor

Just my portofolio


http://www.lampungkitefestival.com


http://www.pimnas20.unila.ac.id/


http://himatro.elektro.unila.ac.id


http://fossi-ft.unila.ac.id

Read More..

This posting is out of content about Joomla, this blog is using template blogger Hallo 01 from Amanda (BloggerBuster). It's very minimalist and good design template.

More features of this template include:

* Navigation links beneath the header
* Icon to the right of the header (which can be replaced with your own photo or avatar if preferred)
* Fully widgetized sidebar
* Three column footer section
* Styling (and code) to display your own Flickr photostream
* Fonts and colors can be customized through your Blogger dashboard

But any problem with comment template, Overlapping Comments.

How to fix it

1. Copy this code CSS and paste before ]]></b:skin>

/* Comments
----------------------------------------------- */
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #000;font-size: 0.75em;color: #666;}
.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: #fff;
border-bottom: 1px solid #000;padding: 20px;list-style-type:none;}
.commentlist li.alt {background: #fff;}
.pane_l {float: left;display: inline;
width: 160px;min-width: 160px;max-width: 160px;
border-right: 1px solid #000;padding-right: 20px;margin-right: 20px;}
.pane_r {display: block;line-height: 1.5em;margin-left: 201px;}
.c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;}
.c_approved {color: #aaa;font-size: 0.9em;}


2. Find Code


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.author == data:post.author'>
<div class='comment-blog-author'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/><br/>
</dt>
<dd class='comment-body prop min50px'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
<p>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</p>
</dd>
</div>
<div class='clear' style='clear: both;'/>
<b:else/>
<div class='comment-general'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/><br/>
</dt>
<dd class='comment-body prop min50px'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
<p>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</p>
</dd>
</div>
<div class='clear' style='clear: both;'/>
</b:if>
</b:loop>
</dl>


3. And Replace All With


 <ul class='commentlist'>

<b:loop values='data:post.comments' var='comment'><li>

<div class='pane_l'>

<div class='c_author'>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

</div>

<div class='c_avatar'/>

<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/>

</div>

<div class='pane_r'>

<data:comment.body/>

</div>

<div class=' clear'/></li>

</b:loop>

 </ul>


4. Save Your Template

Read More..

I have write posting about Adding Feedjit to joomla, this tutorial not safe for you because can make crash your template if any Wrong in editing code template. Now I will give tutorial how add javascript to your joomla in module.

1. Turn off your editor (JCE Editor Mambot).

* In the administration panel, Go to Site >Global Configuration. Click in the site tab.
* Go to the Default WYSIWYG Editor: Choose No WYSIWYG Editor from the drop down menu.
* Click the Save Button.

2. Copy the Java Script that you wish to insert into your content item. like JS Feedjit

<script type="text/javascript" src="http://feedjit.com/serve/?bc=FFFFFF&amp;tc=494949&amp;brd1=336699&amp;lnk=494949&amp;hc=336699&amp;ww=160"></script><noscript><a href="http://feedjit.com/">Feedjit Live Blog Stats</a></noscript>

3. Go to the Module and Create New Module (in Joomla 1.0.X), If using Joomla 1.5 Goto Extentions -> Modules -> New Module And select custom HTML

4. Paste the Java Script into the item.

5. Click the Save button.

After Finishing, now From Site > Global Configuration, turn the WYSIWYG Editor back on.

WARNING: Whenever editing that particular content item, first disable the WYSIWYG Editor.

Read More..

The "Ultimate PNG Fix" Plugin (for IE up to version 6.x) gives you the ability to correct "alpha" transparency for BOTH inline and background 24/32-bit PNG images on Internet Explorer (from version 5 up to version 6.x, versions 7+ support PNG transparency natively). It does that by triggering some optional filters in IE using Javascript and thus achieving alpha transparency.

Freely speaking, this plugin "eases" the implementation of PNG alpha transparency for everyone by correctly inserting the appropriate Javascript code (including correct file and image paths).

"Inline" PNG images are the ones that you would use inside your joomla content items or inside your template with a normal tag. "Background" PNG images are the ones that you would normally include in your template's css file, e.g.


.header {
background:#c0c0c0 url(../images/transparent.png) no-repeat;
width:100px;
height:80px;
}


There are no restrictions on how we write the code in our css file, we can freely use background pngs even when we use shorthand syntax (which does not work in other proposed solutions).

And best of all? There is no HTML hassle at all! Just install the plugin, publish it and there you have it! Full PNG alpha transparency for your template graphics on Internet Explorer up to version 6!

Please read carefully the usage suggestions inside the plugin's admin for better implementation, as IE posses some limitations on PNG usage in general.

Credits (for the javascript code = all the hard work) go to:
- Bob Osola ( http://homepage.ntlworld.com/bobosola )
- Youngpup ( http://www.youngpup.net )
- Drew McLellan ( http://www.allinthehead.com ).

The official website of the plugin at http://www.joomlaworks.gr/ will always feature the latest update of the "Ultimate PNG Fix" Plugin for Joomla 1.0.x/1.5.x.


Please show your support by rating or commenting on the plugin at Joomla! Extensions .

The "Ultimate PNG Fix" Plugin for Joomla 1.0.x/1.5.x is released under the GNU/GPL license. Have fun!

Download : Here

Read More..

XTypo is a GPL joomla mambot / plugin that able to produce an extra nice css styling to your joomla content. With this plugin, you don't need anymore to put any hard code css into your template css just to get an extra css styling for your content. Just install and publish this plugin and get your extra css easily with adding a string like this : {xtypo_alert} . . . {/xtypo_alert} , {xtypo_quote} . . . {/xtypo_quote} etc , into your joomla content. Another good news is, this plugin also configurable, so you can modify the styling looks from the backend parameter. You can change the icon, define the border size, define the padding, etc ... and then create your own new styling

We use Xtypo plugin for this content typography. Xtypo plugin is a Free Joomla Plugin from TemplatePlazza.com that will produce a Nice Web 2.0 CSS Styling from any text in your joomla articles. This plugis in is configurable, you can change the look of the styling from backend parameter.
Feel free to download this plugin from templateplazza download section

I've seen too much :o) 12244567890!@#$%^&*()_+~ This is a sample of the 'xtypo_alert' style. You can use this style to denote specific information to your users. To use this style use the folllowing code: {xtypo_alert} . . . { /xtypo_alert}

I've seen too much :o) This is a sample of the 'xtypo_info' style. You can use this style to denote specific information to your users. To use this style use the folllowing code:{xtypo_ info} . . . { /xtypo_info}

This is a sample of the 'xtypo_warning' style. You can use this style to denote specific information to your users. To use this style use the folllowing code: {xtypo_warning} . . . {/xty po_warning}

This is a sample of the 'xtypo_sticky' style. You can use this style to denote specific information to your users. To use this style use the folllowing code:{xtypo_sticky} . . . { /xtypo_sticky}

This is a sample of the 'xtypo_feed' style. You can use this style to denote specific information to your users.
To use this style use the folllowing code:{xtypo_feed} . . .{ /xtypo_feed}

This is a sample of the 'xtypo_download' style. You can use this style to denote specific information to your users. To use this style use the folllowing code:{ xtypo_download} . . . {/xtypo_download }

Below is a sample of the 'xtypo_code' style. You can use this style to publish a piece of programming code to your users.

defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '';
?>p.rightalign {
text-align: right;
}
.red {
color: #c00;
}
.green {
color: #0c0;
}

To use the xtypo_code style use the folllowing code: { xtypo_code}. . . { /xtypo_code}

This is a sample of the 'xtypo_quote' style. You can use this style to quote a piece of content to your users. To use the xtypo_quote style use the folllowing code: {xtypo_quote}. . . { /xtypo_quote}

This is a sample of the 'left aligned xtypo_quote' style. You can use this style to quote a piece of
content to your users. To use this style use the folllowing code:{xtypo_quote_left}. . .{ /xtypo_quote_left}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

This is a sample of the 'left aligned xtypo_quote' style. You can use this style to quote a piece ofcontent to your users. To use this style use the folllowing code:{xtypo_quote_right}. . . {/xtypo_quote_right }

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

his is a sample of the 'xtypo_dropcap' style. You can use this style to give a nice dropcap
styling to your content.

To use the xtypo_dropcap style use the folllowing code: {xtypo_dropcap} T {/xtypo_dropcap } is is a dropcap

Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. Praesent non odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

To use the button styles above you can use the folllowing codes: { xtypo_button1} Button 1 { /xtypo_button1} , { xtypo_button2} Button 2{ /xtypo_button2} , { xtypo_button3} Button 3 { /xtypo_button3}

Demo : Here
Download : Available for Free

Read More..