Showing posts with label Blogger Tricks. Show all posts
Showing posts with label Blogger Tricks. Show all posts

Creating Thumbnails Related Post

· 1 comments

Thumbnails Related Post is the same like usually related post but thumbnails contain with images. So your blog will make beautifull

How to make this:
* Login to account blogger
* Select Layout --> Edit HTML
* Check "Expand Widget Templates"
* Find code </head> and replace with the following script *

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
</head>



* Find code <div class='post-footer-line post-footer-line-1'>
* If it does not present, find this code <p class='post-footer-line post-footer-line-1'>

*Next copy and paste the following script, above code <div class='post-footer-line post-footer-line-1'> or <p class='post-footer-line post-footer-line-1'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://secretbloggertips.blogspot.com/2010/02/membuat-thumbnails-related-post.html' style='display:none;'>Thumbnails Related Posts </a><a href='http://www.secretbloggertips.blogspot.com/' style='display:none;'>Secret Blogger</a>
</b:if></b:if>


Read More......

Creating Popular Post

· 0 comments

Just a simple tricks
Let's Go

1. visit http://feedjit.com/joinjs/
2. Click the Widgets in the top menu
3. Copy the script was written there under Page Popularity
4. Then paste the script into widgets (page element)
5. Done

Read More......

Who's most commentators on the Blog?

· 0 comments

Do you want to find who's the most commentators on the Blog?

Let's get started:
1. Log into your blogger account
2. Select Layout
3. Choose a Page Element -> select add a gadgets
4. Select the HTML / Javascript type
5. Copy and paste the following scripts

<script type="text/javascript">
function pipeCallback(obj) {
document.write("<ol>");
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write("</ol>");
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=c92ac21897d8b56e61cfa85930dd89a1&filter=nickname&url=http%3A%2F%2Fyourblog.blogspot.com&num=10" type="text/javascript"></script>


6. Replace yourblog.blogspot.com with your's
7. Save
8. Done


Read More......

Prevent Copy Paste Articles

· 0 comments

If your blog is unique, and you worry if your posts copy-pasted by others. There are tricks to disable right click so that your articles can not be copied.

1. Log in to your Blogger account
2. Select the Layout -> Edit HTML
3. Find code <body>
4. Replace that code with the following code:


<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false" >


5. Save the template.

NB:
This trick causes all widgets that are filled (form) can not be used. For example shout box widgets, Comment Boxes, etc..

Read More......

Displaying Adsense in the middle Post

· 0 comments

Usually we put adsense (example: google ads) on the left or right sidebar, bottom or middle. This tutorial how to put ads in the middle of the posts/article.

But be careful this trick may be violates TOS (term of service, please consider to apply this trick because it could banned by google.


Here are the steps:

1. Log into your blogger account.
2. Click Settings -> Formatting
3. On the Formatting tab at the bottom looking for a "Convert Line Breaks". Please set to "NO".
4. Click Save button

5. create the new post. Put google ads code in the middle post:


<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxx";
google_ad_slot = "xxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


6. Delete the red code, so the code look like this

<script type="text/javascript">
google_ad_client = "pub-xxxxxxxxx";
google_ad_slot = "xxxxxxx";
google_ad_width = 728;
google_ad_height = 90;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>


7. Publish post

Read More......

Create Popular Post

· 0 comments

Tutorial to create Popular Post:

  • Login to Blogger Dashboard
  • Select "Layout"
  • Click on "Add Gadget".
  • Select "HTML/Javascript" type
  • Copy the folowing script:


<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1cf38ae68efbe859c4ba1ee239cec099& url=http%3A%2F%2Fsecretbloggertips.blogspot.com&num=10" type="text/javascript"></script>

<span style="gt;Widget by <a href="http://www.secretbloggertips.blogspot.com">Secret Blogger Tips </a></span>

  • Save
  • Finish

Description:
Replace secretbloggertips.blogspot.com with your blog
num=10 mean 10 popular article

Read More......

Changing Nofollow Comment to Follow

· 0 comments

some people delighted with Nofollow, some are anti with Nofollow. But whatever the choice is up to return to You. If we think positively of course we should turn on NoFollow to Follow. What is benefit ....
This trick is a SEO Friendly because if there is to comment on your blog, the commentator will get Backlink. And the advantage is that blog you'll often be given comments by the visitors due to the data by Robot Google.
Want to know how to change it:

1. Login to Blogger
2. Select Layout menu -> Edit HTML
3. Check "Expand Widget Templates"
4. Find Code under this

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


5. Remove the red code.
6. Search more code like below

<a expr:href='data:backlink.url'rel='nofollow'><data:backlink.title/></a>

5. Remove the red code.
6. SaveTemplate.

Read More......

Creating Falling Stars Effect

· 0 comments

After various effects such as How to Make posted Snow Effect 1, How to Create Snow Effect 2, as well as how to make Falling leaves. now we'll Make Falling Stars Effect.

1. Log in to your Blogger account
2. Click Layout and choose Page Elements
3. Click Add Gadget and select HTML / JavaScript
4. Enter the code below into the column HTML / JavaScript


<script src="http://h1.ripway.com/infosehatbugar/efekbintangberjatuhan.js"> </ script>


5. Save
6. Finish and see the results


Read More......

Authors and Reader : Different Background

· 0 comments

In the blog standart, comment of readers and authors usually the same, so many comments that look less beautiful. If you want author's comment has different background from the readers, here's how:

  • Login to blogger account
  • Select "Layout --> Edit HTML" menu
  • Check little box "Expand Widget Templates"
  • You Should back up your template first. Click Download Full Template
  • Copy the script below code before ]]></b:skin>

.comment-body-author {
background: #E6E6E6; /* Background Color */
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}




Description:
background: #E6E6E6; is background color. Look at Color Code Table if you want to replace.
dotted is line/border. Look at Style Border Code if you want to replace.




  • After that, find code as below. Although not exactly the same, try to find a similar code with:


<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<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>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

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

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>


  • Red color Code is the code that you must add the HTML.
  • Save Template.

Read More......

Showing Recent Comments

· 0 comments

Sometimes, our comments on the blog is too large. If you want show just Recent Comments on your bloge, following this trick....

  1. Login to Blogger.com
  2. Select menu Layout
  3. Select"Add a Gadget --> HTML/Javascript"
  4. Enter following this script below:


  5. <script style="text/javascript" src="http://www.geocities.com/sehatserasi72/recentcomments.js"></script><script style="text/javascript">var a_rc=10;var m_rc=false;var n_rc=true;var o_rc=40;</script><script src="http://panduan-blogger-mania.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"> </script>


  6. Save
  7. Finish


Note:

- The number 10 is amount the last of comments you want displayed.
- Rename panduan-blogger-mania.blogspot.com with your blog

Read More......

Unique Icon in the Address Bar

· 0 comments

Blog on blogspot that is still in the default, icon image will appear as the letter "B" on the orange background color. Well, if you're not satisfied and you want to change the icon, hre is how to do it:

When we open a website or blog, we often have an image or icon in the address bar (the box to type the web address). We can change the standart icon :

  • Login to your account blogger
  • Click "Layout --> Edit HTML"
  • Find code </head>
  • Copy the following script, put it before code </head>


<link href='http://i425.photobucket.com/albums/pp332/cookie_muncher123/cat.gif' rel='SHORTCUT ICON'/>




Replace the red text with your icon/image link.

  • Save

Some of the alternative icon image:

http://i425.photobucket.com/albums/pp332/cookie_muncher123/1058411jpporq3dbb.gif

http://i425.photobucket.com/albums/pp332/cookie_muncher123/3.gif

http://i425.photobucket.com/albums/pp332/cookie_muncher123/cat.gif

http://i425.photobucket.com/albums/pp332/cookie_muncher123/oxnard.gif


You can also create an image, then upload the images to photobucket.

Happy blogging :~

Read More......

Create Horizontal Menu

· 0 comments

Do you want to create a horizontal menu .............Please see Demo. Okay go ahead we continue...

  • Login to blogger.com
  • Select Layout --> Edit HTML
  • Check the "Expand Widget Templates" box.
  • We recommend backup your template first. Click Download Full Template
  • Find code ]]></b:skin>
  • Then copy script below and put the above code ]]></b:skin>

/* -- Start horizontal MENU -- */
#tabshori {
float:left;
width:100%;
font-size:12px;
border-bottom:1px solid #2763A5; /* Bottom Line */
line-height:normal;
}

#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /*Menu Position */
list-style:none;
}

#tabshori li {
display:inline;
margin:0;
padding:0;
}

#tabshori a {
float:left;
background: url("http://i594.photobucket.com/albums/tt27/infosehatbugar/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://i594.photobucket.com/albums/tt27/infosehatbugar/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#fff;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}

#tabshori a:hover span {
background-position:100% -42px;
}
/* -- END horizontal menu -- */





  • Next look for the code below

<div id="content-wrapper">

  • Copy the script below, and place it above or before the code <div id="content-wrapper">

<div id='tabshori'>
<ul>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Interna'><span>Interna</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Saraf'><span>Saraf</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Jiwa'><span>Jiwa</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Kulit'><span>Kulit</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Bedah'><span>Bedah</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Anak'><span>Anak</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Mata'><span>Mata</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20THT'><span>THT</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Kebidanan%20dan%20Kandungan/'><span>Obgin</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Gigi'><span>Gigi</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Poli%20Seksologi'><span>Seksologi</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Laboratorium'><span>Lab</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Farmasi'><span>Obat</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Nutrisi%20dan%20Kebugaran/'><span>Nutrisi-Bugar</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Tips%20Sehat%20dan%20Cantik/'><span>Tips</span></a></li>
<li><a href='http://infosehatbugar.blogspot.com/search/label/Journal'><span>Journal</span></a></li>
</ul>
</div>


  • Change the links above with your link.
  • See the results.





Read More......

Large First Letter at Your Articles

· 0 comments

Sometimes we are bored with the look or style of any posts on our posting. If you want to display different text styles like in the newspaper, which is where the initial article that is usually used LARGE letters. Follow the tutorial How to Create the first large Letter of articles.
As below.




Want to create a style of writing, such as above?

1. Sign in to account blogger
2. Click Layout
3. Select Edit HTML
4. Find code ]]> < /b:skin>
5. Copy the following code, place it above code ]]> < /b:skin>

/* script First Large Letter at articles
http://secretbloggertips.blogspot.com
----------------------------------------------- */

.initial {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}



6. Save Template


Description:
So that the color and letter color of the background color according to the posting on your blog, change the color code below with the appropriate color code.

color: #000000; color of letter
background:#ffffff; background color
To know the color code, please click on the HTML Color Code Table


How to Post

When writing the article, create an article on the edit HTML, not on the Compose.

Type this code < span class="initial"> First Letter </span>. Insert the first letter of your articles. After the initial letter you type, then you can type in edit the HTML or in the Compose

Example :

< span class="awal"> P </span> ostingan suatu artikel dapat ditampilkan dengan gaya yang berbeda dan masing-masing gaya tersebut memiliki kelebihannya sendiri.
Salah satu gaya dari penulisan artikel adalah huruf besar tampil pada awal kalimat suatu postingan/seperti gaya penulisan pada koran. Sebagai contoh adalah tulisan yang sedang anda baca ini. Huruf P dibuat sedemikian rupa sehingga terlihat lebih besar dari huruf-huruf lainnya.


Happy Blogging...!!!

Read More......

Create View Tab

· 4 comments

What is the View tab ...? See Demo Here, see the Content in the right side bar. In the View tab we can show links, Banner, comments, posting articles, etc.

How do I it?:

The first step:
  • Login to Your Account Blogger.com
  • Click ”Layout ” --> "Edit HTML"
  • Find this code ]]></b:skin>
  • Copy the following script, insert before or above code ]]></b:skin>


div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Width of main menu */ text-align: center;
height: 24px; /* Height of main menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Top Menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font main menu top */
font-weight: 900;
color: #000; /* Font color of main menu */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Background color of main menu */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Main box border color */
overflow: hidden;
background-color: #FF9900; /* Main box 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;
}

  • Note the text-the text printed in blue, is the information that is in the View tab. There are size, border style and color. Please change as you want.
  • See HTML Color code click here.
    See Border style click here.
  • Then copy the following kode, insert before code </head>


<script src='http://www.geocities.com/sehatserasi72/tabview.js' type='text/javascript'/>



  • Save


Second step:

  • Select "Page Elements"
  • Select "Add a Gadget" --> "HTML/Javascript" to put View Tab menu.
  • Copy the script below to them:


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



  • Save


Description:
  • Text of blue (350px) is height and width Tab View.
  • Code of Purple text is appears on Top Menu.
  • Code Yellow is content of View Tab.

Read More......

Automatic Read More

· 0 comments

Some people may feel a little difficult if they make read more, because if we post the article will use the code

<span class="fullpost">


…… Passage article........


</span>

Look at again Making Read More. Now, for the not-so difficult to want to make the code, we will create Read More faster than before. We only need to set up the number of letters / characters that need to appear before shown any posts Read More.
In addition, Automatic Read More script can display the picture / image at the beginning of the paragraph, even if we upload pictures that we do not place the beginning paragraphs.

Want to try, follow these steps:
1. Login to your Account Blogger
2. Click Layout
3. Select Edit HTML
4. Find code </head>
5. Copy the following script above code </head>

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 400;
summary_img = 350;
img_thumb_height = 120;
img_thumb_width = 120;

</script>
<script src='http://www.geocities.com/sehatserasi72/readmoreautomatic.js' type='text/javascript'/>



6. Please save template first.


The Next Step:

For those who have not fill Read More, find code:: <data:post.body>

replace the code <data:post.body> with all the code below

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


For those who already have Read More, better return as before like no-Read More. Clear Read More code, as below.

<div class='post-header-line-1'/>
<div class='post-body'>
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

Please Delete the Red Text.
Finish........

Description:

summary_noimg = 400;
(Showing 400 letters / characters that will appear before Read More if no picture is posted)
summary_img = 350;
(Showing 350 letters / characters that will appear before Read More if you have a picture posted)

Read More......

Create Blogroll Box

· 2 comments

After previously posted Create Dropdown Menu, this time we posted Create Blogroll Box. As the name, on the box we fill link. But other than link, we can fill such as Content Articles etc.

How to make it :
  • Login to Blogger.com / Blogspot.com
  • Click "Page Element"
  • Select Add Page Elements --> HTML/JavaScript
  • Copy the following script:

<div style="overflow:auto;width:95%;height:130px;padding:10px;border:1px solid #eee; background:#FFCCFF">
<a href="http://secretbloggertips.blogspot.com/2009/03/remove-blogspot-navigation-bar.html">1. Remove Nav Bar Blogspot</a><br/>
<a href="http://secretbloggertips.blogspot.com/2009/03/html-color-code-table.html">2. HTML Color Code Table</a><br/>
<a href="http://secretbloggertips.blogspot.com/2009/03/making-border-style.html">3. Making Border Style</a><br/>
<a href="http://secretbloggertips.blogspot.com/2009/04/making-label-cloud.html">4. Making Label Cloud</a><br/>
<a href="http://secretbloggertips.blogspot.com/2009/04/making-text-area.html">5. Making Text Area</a><br/>
<a href="http://secretbloggertips.blogspot.com/2009/04/install-time-on-blog.html">6. Install Time On Blog</a><br/>
<a href="http://secretbloggertips.blogspot.com/2009/04/create-snow-effect-on-your-blog-1.html">7. Create Snow Effect On Your blog 1</a><br/>
<a href="http://secretbloggertips.blogspot.com/2009/04/displaying-ip-address.html">8. displaying IP Address</a><br/>
<a href="http://secretbloggertips.blogspot.com/2009/04/install-google-translator.html">9. Install Google Translator</a><br/>
<a href="http://secretbloggertips.blogspot.com/2009/04/give-highlight-articles.html">10. Give Highlight Articles</a><br/>
</div>

note:
Text blue is script to create blogroll.
Text red is script your link, please change with your link

  • Save




Result:




Description:

<div style="overflow:auto;width:95%;height:130px;padding:10px;border:1px solid #eee; background:#FFCCFF">


width:95% is the width of the box you can change the use pixels, eg 250px
height:130px is the height of the box

background:#FFCCFF is the background of the box. See HTML Color Table click here. Or code background:#FFCCFF can be removed if not like.

solid on code border:1px solid is a type / style border, you can replace with another style. See border style click here.

Read More......

Making Nav Bar Becoming Transparent

· 1 comments

Some time ago I have posted Remove Blogspot Nav Bar, so now we will create a Nav Bar or Navigation Bar becoming transparent.

Follow the steps below :

1. Login to your Account Blogger
2. Click Layout
3. Select Edit HTML
4. Find code ]]></b:skin>
5. Copy the following Script, above code ]]></b:skin>

#navbar-iframe{opacity:0.2;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:0.5;filter:alpha(Opacity=100, FinishedOpacity=50)}


6. Save

Read More......

Make Read More (Article Snippet)

· 0 comments

Making Read More or Artikel Snippet, follow the steps below :

  1. Login to account blogger
  2. First, backup your template, click Download Full Template
  3. Select "Layout --> Edit HTML"
  4. Check the box "Expand Widget Template"
  5. Find the folowing script

  6. <data:post.body/> or <p><data:post.body/></p>


  7. Remove the script above, and change with the script below


  8. <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>
    <p><data:post.body/>
    <a expr:href='data:post.url'><strong>Read More...</strong></a></p>
    </b:if>



  9. Save Template


Next Step:

  1. Select "Setting --> Formatting "
  2. At the bottom of the box labeled "Post Template (Template Post)", fill the empty area with code below :




  3. <span class="fullpost">




    </span>



  4. Save setting




How to Post the Articles:

  1. Select Post
  2. Select "Edit HTML" not the " Compose", then the code automatically appears that we have been setting before, namely:

  3. <span class="fullpost">

    </span>

  4. Write articles that appear on the blog before the code: <span class="fullpost">


  5. While the rest of the article after the above code, and before the code: </span>


  6. Publish your articles

Read More......

Create Related Post

· 0 comments

Tips to create a related article (related post), is quite simple, follow the steps below:
  1. Login to Account Blogger.
  2. Click "Layout-->Edit HTML"
  3. Check the box "Expand Template Widgets".

  4. membuat artikel berhubungan








  5. Download Script Related Post file here

  6. Find code <data:post.body/>.

  7. Insert Script Related Post below code <data:post.body/>

  8. Save Template


Note:
The blog that has "Readmore" usually has 2 code <data:post.body/>. Put Script Related Post under the first one.

Read More......

Give Highlight The Articles

· 0 comments

The function of Highlight is to clarify the words that is shown by author. This tricks will enhance to your blog.
To make it follow the following steps:
  1. Login to Blogger account
  2. SelectLayout--> Edit HTML"
  3. Find code ]]></b:skin>
  4. Then copy the following code, insert before or above the code ]]></b:skin>

  5. .alert { background: #DDE4FF;
    text-align: left;
    padding: 5px 5px 5px 5px;
    border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;}



  6. Save Template



Description:

background: #DDE4FF;
Change background-color as you like. To see the HTML color code click here.

border:1px dotted
is the edge "1px" the thickness of the edge, can be replaced with another, customize the template with you, while "dotted" is the type of border in the box highlight the script. To see the style of border click here

#223344 is a color code border.

padding:5px 5px 5px 5px;
To give the edge to the boundary line of any posts 5 px



How to Post

At the time you want to create a new post, select the "Edit HTML" not the "Compose".
So that the code or script can there be a right in the box Highlight, to post articles (a posting or script) must use a certain way. Namely by adding the code <p class="alert"> before script or a posting that will be highlighted. And then added the code </p> end of script or a posting.




<p class="alert">


"a posting or script that we want to highlight"


</p>



Happy Blogging

Read More......

Translator

Custom Search
Indonesia English French German Spain Italian
Dutch Russian Portuguese Japanese Korean Arabic

Wallpaper

Ceck These Out

-->

U'R Comment



-->