Letak Website Lain Dalam Blog

Meletakkan website dalam blog masih boleh dilakukan dengan hanya menggunakan kod html/javascript

Klik disini untuk lihat demo website yang diletakkan dalam blog.

Berikut adalah langkah-langkah untuk tutorial ini.

1. Login akaun blogger, kemudian dari dashboard > layout > add a gadget


2. selepas klik pada add a gadget, pilih HTML/javascript


3. Copy code di bawah kemudian pastekan dalam ruangan html/javascript

<!--CHANGE LINKS BELOW TO YOUR OWN-->
<a href="javascript:jumpto('http://www.google.com')">Google</a> |
<a href="javascript:jumpto('http://www.yahoo.com')">Yahoo</a> |

<script language="javascript">
<!--


//Specify display mode (0 or 1)
//0 causes document to be displayed in an inline frame, while 1 in a new browser window
var displaymode=0
//if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
var iframecode='<iframe id="external" style="width:99%;height:400px" src="http://www.google.com"></iframe>'

/////NO NEED TO EDIT BELOW HERE////////////

if (displaymode==0)
document.write(iframecode)

function jumpto(inputurl){
if (document.getElementById&&displaymode==0)
document.getElementById("external").src=inputurl
else if (document.all&&displaymode==0)
document.all.external.src=inputurl
else{
if (!window.win2||win2.closed)
win2=window.open(inputurl)
//else if win2 already exists
else{
win2.location=inputurl
win2.focus()
}
}
}
//-->
</script>

Penerangan :
-Google: Gantikan dengan nama yang anda mahu
-www.google.com: Gantikan dengan website yang anda mahu


4. Save, klik preview dan jika berpuas hari, klik save.:)

Automatic Read More with Thumbnail for Blogger

STEP #1
Log in to Blogger, go to Layout -> Edit HTML
and mark the tick box "Expand Widget Templates"

STEP #2
Now find (CTRL+F) this code in the template:

</head>

And immediately after it, paste this code:


<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Now find this code:

<data:post.body/>

and replace it with the bellow code

<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:right;padding-top:20px;'><a expr:href='data:post.url'><img src='http://i37.tinypic.com/351icqx.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Now click Save Template




Change http://i37.tinypic.com/351icqx.jpg Code with The One You Like Bellow

http://i643.photobucket.com/albums/uu153/nirav07/black-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/black.png

http://i643.photobucket.com/albums/uu153/nirav07/black1.gif

http://i643.photobucket.com/albums/uu153/nirav07/blue-dark.gif

http://i643.photobucket.com/albums/uu153/nirav07/blue-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/blue.png

http://i643.photobucket.com/albums/uu153/nirav07/blue1.gif

http://i643.photobucket.com/albums/uu153/nirav07/bluish.png

http://i643.photobucket.com/albums/uu153/nirav07/brown.gif

http://i643.photobucket.com/albums/uu153/nirav07/dark-bluish.png

http://i643.photobucket.com/albums/uu153/nirav07/dark-grey.gif

http://i643.photobucket.com/albums/uu153/nirav07/dark-orange.gif

http://i643.photobucket.com/albums/uu153/nirav07/dark-purple.gif

http://i643.photobucket.com/albums/uu153/nirav07/green.png

http://i643.photobucket.com/albums/uu153/nirav07/green1.gif

http://i643.photobucket.com/albums/uu153/nirav07/greenish.png

http://i643.photobucket.com/albums/uu153/nirav07/grey-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/grey.png

http://i643.photobucket.com/albums/uu153/nirav07/grey1.gif

http://i643.photobucket.com/albums/uu153/nirav07/light-blue.png

http://i643.photobucket.com/albums/uu153/nirav07/light-orange.gif

http://i643.photobucket.com/albums/uu153/nirav07/orange.png

http://i643.photobucket.com/albums/uu153/nirav07/original.gif

http://i643.photobucket.com/albums/uu153/nirav07/pink.png

http://i643.photobucket.com/albums/uu153/nirav07/purple-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/purple.png

http://i643.photobucket.com/albums/uu153/nirav07/purple1.gif

http://i643.photobucket.com/albums/uu153/nirav07/red-dark.gif

http://i643.photobucket.com/albums/uu153/nirav07/red-1.gif

http://i643.photobucket.com/albums/uu153/nirav07/red.png

http://i643.photobucket.com/albums/uu153/nirav07/red1.gif

Remove - Subscribe to: Posts (Atom) from Blogger

In some Blogger templates there is a "subscribe to: Posts (Atom)" link, so that the blog visitors can subscribe to your Atom feeds. Considering the fact that many readers use RSS for their blog feeds, many of you could find this link useless. Moreover it occupies space at the bottom of the template and it doesn't look nice at all. In this case you might want to remove it.

How to remove subscribe to: Posts (Atom) link? 

Step 1. Go to your Dashboard >> Design >> Edit HTML;
Step 2. Check "expand widget templates";
Step 3. Find (CTRL + F) this line:

<b:include data='feedLinks' name='feedLinksBody'/>

Step 4. Remove it and Save Template.

This should remove subscribe to: posts (atom) link.

Related Posts Widget For Blogger With Thumbnails

Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. Related Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template. It helps your readers to go through the similar posts they were reading and so helps to decrease your bounce rate by increasing page views.

By displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.

In this post we will go through the steps of adding the Related Posts Widget with thumbnails for Blogger. Ready to add to your template? Go through the steps below.

How To Add Related Posts Widget For Blogger With Thumbnails?

1. Go To Blogger Dashboard > Template > Edit HTML.

2. Check the "Expand Widgets Template" box. 

3. Search (CTRL + F) for this piece of code:

</head>

4. Copy and paste the below code just before/above </head>:

<!--Related Posts with thumbnails Scripts and Styles Start B2W-->
<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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7DHdjdKP4ZdpSFIuyA4fBt8Lj2YZ_zrS9hRnykcXB_3HhBtkRIqVYVzbDzCHGFmyRzcG9qTqrxlr7QHK_DYyoA3Mp9QIZ3XxF1VBbQORN1Z-36swwLqSJYzJMsbPMW6gTIYuv3f8Y20o/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://beautifulbloggerwidgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End B2W-->

Note:

• To change the default picture when no images are available, replace the URL in blue with your own.
• For displaying more than 5 posts, replace 5 value from "var maxresults=5;"

5. Now find the following code:

<div class='post-footer-line post-footer-line-1'>

If you can't find it, then search for this one:

<p class='post-footer-line post-footer-line-1'>

OR:

<data:post.body/>

6. Copy and paste the below code just after any of those lines

<!-- Related Posts with Thumbnails Code Start B2W-->
<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'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</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://beautifulbloggerwidgets.blogspot.com/' ><img style="border: 0" alt="Blogger Widgets" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxm4XGQiLpvI4N3QQr-mx7ayExXvzp2Z9APa6UzN6Xd6VMccTrEl2ISfLa6ZlH1u4nJNqbxqqXMaCLv3HS57cej2aGbwPu487ZcN4hjM7A7dN-3htkMEgmFKnoMuzmertGpRfI9jNGCrSG/s1600/blogger-widgets.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End B2W-->

Note: 

• Change the 6 value from max-results=6 with the number of posts you want to be displayed.

7. Save the Template


sumber