HI-TRANSFER: change template

Tampilkan postingan dengan label change template. Tampilkan semua postingan

Minggu, 13 Maret 2011

How To Add Disqus Comment System to Blogger

DISQUS is a comments platform that helps you build an active community from your website's audience. It has awesome features, powerful tools, and it's easy to install.Before this I have explain how to add IntenseDebate comment system to blogger blog and now I am going to explain how to add Disqus comment system to your blogger blog.

There are lot of good features with Disqus comment system when we comparing it with Blogger default comment system.

Realtime comment system

Comments become more like live discussions with realtime posting and updating. By offering a faster, more intuitive experience, Disqus is everyone's favorite way to comment.

Notification and reply system

The notification system lets people know when they've received a response. Best of all, they can continue the conversation straight from the email.

Inline media embedding

Full integration with media services such as Youtube, Flickr, and more. Attach media such as photos and videos right within the comments.

Mobile commenting

Fully compatible with mobile websites for commenting while on the go. The default mobile theme is formatted with smartphones, like the iPhone or Android phones, in mind.

Social integration

Full integration with Facebook, Twitter, and more. Let people login, comment, and share using social services they already use and love.

The Community Box

A quick way to show off what your community is made up of. The community box gives everyone a summary view of the activity and people participating on the site.

Liking and sharing

People can rate what they like by liking pages or comments and then sharing that on Facebook, Twitter, and other networks.

Moderation tools

Powerful and easy-to-use tools helps you keep your community under control. The moderation panel is designed for managing a large volume of incoming comments.

Spam-Be-Gone

Our in-house anti-spam technology keeps spam and unsavory people out of your community. Our anti-spam continually learns from the rest of the Disqus network to keep your site safe.

Mobile apps

Disqus apps are available for the iPhone, Android, and webOS phones. Manage your communities while you're on the go with these freely available apps.

Blacklists and whitelists

Make daily moderation easier with granular control over who gets to contribute within the community. Disqus gives you powerful tools such as blacklists, whitelists, and word filtering.

Import and export

Import existing comments into Disqus and sync up your data. All data is completely portable and can be exported at any time.

International languages

Disqus supports dozens of languages in addition to English. Complete your integration with native language support.

SEO-friendly and local sync

We offer plugins and integration methods that ensure compatibility with search engines.

Theme customization

Customize with CSS to smooth out the integration with your website. Or, use our advanced theme editor to craft your own custom theme.

Tweets and reactions

Disqus brings the conversation back to your site by collecting Tweets, mentions, and other reactions from around the web.

Profile management

Commenters control their personas and reputation across the different communities they participate on. Disqus makes it easy to track and keep conversations together.

Activity streams

Audiences stay engaged with insight into others' activity all over the web. Integrated activity streams let people see where else the smart people are talking.

Connected communities

Disqus reaches 200 million people every month across half a million websites and communities on the web. Keep the conversations lively by connecting your audience with the millions of others already on Disqus.

Before follow the instruction given below,

(a) Login to your Blogger Account.
(b) Backup your blogger template.
(c) Make sure that your blog is using Blogger Layouts. See upgrade instructions if not.
(d) Enable commenting. See instructions to enable commenting. Make sure that Who Can Comment? is set to Anyone.

Now Follow the steps given below. You can add Disqus comment system to your blog easily.

1. First create a account on Disqus.com.

2. Now visit this link to add your blog to the Disqus account:

http://disqus.com/admin/register/

3. Fill in the necessary details and click on "Continue".

4. Now you can see below screen. select the option as you like and click on "Continue" again.

5. Now can see installer instructions page.

Click on "Blogger" instructions.

6. Now click on "Add site..." button.

7. You will bring to your blogger account. If there are multiple blogs under your Blogger account, be sure to pick the correct blog. Select your blog and click on "Add Widget" button.

You are done. you can see Disqus widget there in Blogger "page elements" page. For best performance, make sure that the widget is in the bottom slot of the bottom-most right column.

Now Disqus comment box will appear under your every blogger posts.

Note : Do you have existing comments in Blogger? You can import them into Disqus by visiting the import page under Tools.

Jumat, 11 Februari 2011

How To Add IntenseDebate Comment System to Blogger

change template , comments , widget Tidak ada komentar :

IntenseDebate is one of the most popular a feature-rich comment system for WordPress, Blogger, Tumblr and many other blogging/CMS platforms.In this tutorial I am going to explain how to add IntenseDebate comment system to Blogger blog.

With IntenseDebate,you can do many things than your default comment system.These are some main features of IntenseDebate comments.

IntenseDebate features:

Comment Threading.
Reply-By-Email.
Email Notifications.
Commenter Profiles.
Moderation/Blacklisting.
Reputation Points & Comment Voting.
Plugins API.
OpenID.
Widgets.
Twitter Connect.
Facebook Connect.
RSS Readers & Tracking.

HTML Formatting

You can also customize your links and add some photos to your comments. IntenseDebate supports the following HTML tags: <a>, , , , , , <blockquote>, , , <strike>, <img>

Gravatar

Intensedebate offers full Gravatar support. If you have a Gravatar they will automatically upload your Gravatar when you signup for IntenseDebate. You can choose to use your Gravatar or upload a different profile pic.

Before start this process,you must backup your blogger template first.Save the backup template file on your hard drive.

1.Create a Account on IntenseDebate.com.

2.Now add your blog to IntenseDebate : http://intensedebate.com/install

3.Then you can see this window. Now you have to select some option.

1.How would you like to install IntenseDebate?

select "Template" option.

2.Which blog posts should have IntenseDebate comments enabled?

Only on new posts
- Your old comments will be displayed using your blog's native comment system

On all blog posts
- IntenseDebate comments will be available on all posts, but your existing comments will be hidden.

Select "On all blog posts" option.

Note : If you want to keep "Blogger default comments of your old blog posts",then select "Only on new posts".

4.Scroll down to the bottom of the instructions.

Now upload the template you have backup.

5.After uploading it you can see a screen like below. Copy modified template code from the textfield.

6.Login to your blogger dashboard--> Design--> Edit html.

7.Select entire code in the Edit Template text Box and delete it.Now you must have a blank text box.

8.Now paste the code we have copied in step 5.

Save your template.You are done.

You can see IntenseDebate comment form under your blog posts.

Senin, 30 Agustus 2010

How To Compatible Blogger Blog With Mobile Phones

basic , change template Tidak ada komentar :

If you are using a Blogger Layout Template,this tutorial will helpful for you.But if your template is a blogger template,created by using Blogger Template Designer, usually this feature has already added to your template.This will really helpful to increase the number of mobile visitors of your blog.

Now follow the simple steps given below to ready your blogger blog for mobile phones.

1.Login to your blogger Dashboard--> Design- -> Edit HTML

2.Scroll down to where you see below code:

<b:include data='blog' name='all-head-content'/>

3.Now copy below code and paste it just before the above line.

<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>

4.Now save your template and you are done.

Senin, 14 Juni 2010

How To Add Reply Option to Blogger Comments

change template , comments Tidak ada komentar :

This tutorials will show you how to add reply option to your blogger comments like wordpress.Usually we can see reply option in non blogger blogs.But in blogger blogs there is no option to reply comments.But after you add this trick to your blogger template,you can see a reply option in blogger comments.

Before add this feature to your blogger blog you must find your blog ID.

To find your blog id follow the step given below.

Login to your dashboard and click on "Settings" link of your blog.

Now look at address bar of your browser.You can see your blog ID on the address bar.It will be a number like 2183677992760077155.Now note your blog ID.

Now let see how to add reply option to blogger comments.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

<data:commentPostedByMsg/>

4.Copy below code and paste it just after above code.

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=YOUR-BLOG-ID&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Reply]</a></span>

NOTE : Remember to replace YOUR-BLOG-ID with your real blog ID.

Look at the example given below:

<span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=5649319381222938273&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;'>[Reply]</a></span>

5.Now save your template and you are done.

Minggu, 18 April 2010

How To Hidden Deleted Comments in Blogger

change template , comments Tidak ada komentar :

When you delete the comments in blogger, still you'll see an message like the picture below.This messages add a ugly appearance to your blogspot site.But doing this little trick,you can hidden deleted comments easily.If you like to hidden deleted comments in your blogspot blog,then simply follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see below code:

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

<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>

<a expr:name='data:comment.anchorName'/>

<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

<data:comment.author/>

<data:commentPostedByMsg/>
</dt>

<dd class='comment-body'>

<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>

</b:loop>

4.Copy below code and paste it just after <b:loop values='data:post.comments' var='comment'>.

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

<b:else/>

5.Copy below code and paste it just before </b:loop>.

</b:if>

6.Save your template and you are done.

Now your deleted comments will not appear.

Sabtu, 17 April 2010

How To Remove Commentators Profiles/Sites URLs in Blogger

basic , change template , comments Tidak ada komentar :

When someone leave a comment,your site is linked automatically into his website or profile url.If you don't like this you can stop it doing this very simple trick.Simply follow the steps below to do it:

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see below code:

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

4.Now replace above code with below code:

<data:comment.author/>

5.Save your template and you are done.

Now your site will not linked to commentators sites/profiles.

Minggu, 27 Desember 2009

How To Remove Post Count From Blog Archive

basic , change template , html Tidak ada komentar :

When you add a blog archive to your blogger blog it shows the number of post for time periods.But if you don't like it, you can remove this post count feature from your blog archive easily.To do it,follow the steps below:

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see your blog archive code:

Note : Your blog archive code will look like this:

<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>&#9660;&#160;</span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;&#160;
<b:else/>
&#9658;&#160;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>

4.Now Remove below code from your blog archive code:

(<data:i.post-count/>)

Note : You can find it 3 times.

5.Now save your template and you are done.Look at the picture below:

Sabtu, 26 Desember 2009

How To Show Post Title Only on HomePage in Blogger

change template , css , post Tidak ada komentar :

Do you like to show only your blogger post title on your home page?Then follow the steps below:

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see </head> tag .

3.Copy below code and paste it just before the </head> tag .

<style type='text/css'>

<b:if cond='data:blog.pageType != "item"'></b:if>

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

</b:if>

</style>

4.Now Save your template.

5.Go to Layout-->Page Elements.Click on "Edit" link of Blog Posts Section.

6.Enter the value for "Number of posts on main page:" as your choice and click on save.

You are done.

Selasa, 22 Desember 2009

How To Change "Post a Comment" Text of Blogger Blog

change template , comments Tidak ada komentar :

You can see "Post a Comment" text above your comment form in blogger.If you like to replace this "Post a Comment" text with your own creative text follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see this:

<data:postCommentMsg/>

Note : You can find above code in 2 places.

4.Now replace above codes with your own text.For example I replace it with "Give Your's Feedbacks".

5.Now save your template and you are done.Refresh your site to see result.It will look like above image.

Senin, 21 Desember 2009

How To Add Show/Hide NavBar Link to Blogger

change template , java script Tidak ada komentar :

If you want to let your visitors to show and hide your blogger navbar,then foolow the easy steps below.

1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the code given below and click save.

<script type="text/javascript">
var showHeader=false;
function ShowHideNav()
{
showHeader=!showHeader;
var nav=document.getElementById("navbar-iframe");
if (showHeader)
{
nav.style.visibility="visible";
nav.style.display="block";
}
else
{
nav.style.visibility="hidden";
nav.style.display="none";
}
}
</script>
<style type="text/css">
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>


<span style="cursor:pointer; font-weight:normal; " onclick="ShowHideNav();">
Show/Hide Blogger NavBar
<a style="visibility:hidden;" href="#"></a>
</span>

You are done.Look at the demo.

Demo

Jumat, 04 Desember 2009

How To Enable Avatars in Blogger Comments

change template , comments , image Tidak ada komentar :

If you use this hack,you can show Show Blogger Profile Images In Comments As Avatars.For your safety,first backup your blogger template.To Enable avatars in blogger/blogspot comments follow the steps below.If first method doesn't work for you,then follow the second method.

Method 1

1.Login to your blogger dashboard--> Settings- -> Comments.

2.Enable Show profile images on comments.

3.Now Click on "Save Settings" and you are done.

Method 2

1.Login to your blogger dashboard--> Settings- -> Comments.

2.Enable Show profile images on comments.

3.Now Click on "Save Settings".

4.Go to Layout- -> Edit HTML.

5.Click on "Expand Widget Templates".

6.Now search below code in your template.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

NOTE: If you can find above code no problem.But if you can't find it then search:

<dl id='comments-block'>

<div id='comments-block'>

in your template.

Now Replace it with:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

7.Now find below code:

<a expr:name='data:comment.anchorName'/>

Note:You can see above code one or more time.

8.Now Replace every above code (<a expr:name='data:comment.anchorName'/>) with below code:

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

9.Now find ]]></b:skin> tag in your template.

10.Copy below code and paste it just before ]]></b:skin> tag.

/* Avatar */
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinhVp8RX1adnQF8EeKyZ4FTOvwcZr5-KVG7kVxPkJ0hRnJIW8Hk0oOTllIrKM3-p3MAiIz1lyNBfABuWNcZ8K79zPiwmt8EbqLX_bnRVLW6tqzIHD4N2l6s-5LfUCm6XblmzATTpkOXzXl/+avatar.png);
width:35px;
height:35px;
}

11.Save your template and you are done.

Selasa, 10 November 2009

How To Replace Read More Text With Image

change template , image , post Tidak ada komentar :

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Now find "Read More" text in your template.

Note:It can be different from "Read More" according to your template.(Eg:more,full story,....)

4.Now replace it with below code:

<img src='LINK-OF-YOUR-IMAGE'/>

Note: Replace "LINK-OF-YOUR-IMAGE" with your image link.

You are done.

Senin, 26 Oktober 2009

How To Add Syntax Highlighter to Blogger

change template , css , html , java script Tidak ada komentar :

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]></b:skin> tag .

4.Copy below code and paste it just before the ]]></b:skin> tag .

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Note-Link of the above code:
http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css

5.Now Scroll down to where you see </head> tag .

6.Copy below code and paste it just before the </head> tag.

<!-- Add-in CSS for syntax highlighting -->
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

7.Now again Scroll down to where you see </body> tag .

8.Copy below code and paste it just before the </body> tag .

<!-- Add-in Script for syntax highlighting -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

9.Now Click on "Save Templates".

10.Whenever you have to write some codes in your posts, click on "Edit Html" tab of your post editor and write the codes between the following tags :

<pre name="code" class="cpp">

...Your html-escaped code goes here...

</pre>

When you publish your post, your codes will look like this :

Langganan: Postingan ( Atom )

HI-TRANSFER

Minggu, 13 Maret 2011

How To Add Disqus Comment System to Blogger

Jumat, 11 Februari 2011

How To Add IntenseDebate Comment System to Blogger

Senin, 30 Agustus 2010

How To Compatible Blogger Blog With Mobile Phones

Senin, 14 Juni 2010

How To Add Reply Option to Blogger Comments

Minggu, 18 April 2010

How To Hidden Deleted Comments in Blogger

Sabtu, 17 April 2010

How To Remove Commentators Profiles/Sites URLs in Blogger

Minggu, 27 Desember 2009

How To Remove Post Count From Blog Archive

Sabtu, 26 Desember 2009

How To Show Post Title Only on HomePage in Blogger

Selasa, 22 Desember 2009

How To Change "Post a Comment" Text of Blogger Blog

Senin, 21 Desember 2009

How To Add Show/Hide NavBar Link to Blogger

Jumat, 04 Desember 2009

How To Enable Avatars in Blogger Comments

Selasa, 10 November 2009

How To Replace Read More Text With Image

Senin, 26 Oktober 2009

How To Add Syntax Highlighter to Blogger

Subscribe

Recent Posts

Labels

Like us

Recent Posts

Formulir Kontak