Sign up for PayPal and start accepting credit card payments instantly.
Showing posts with label Script Html. Show all posts
Showing posts with label Script Html. Show all posts

How to Add AutoHiding Social Bookmarking (Sharing is Sexy/Caring) Widget To Your Blog

.
5 comments

Translate This Article To Indonesia

By installing the widget "sharing is sexy", so your post or article will mate quickly spread and your blog will be to famous at social bookmarks sites automatically. That is a gathering of bloggers around the world. But it must be with a record of the contents of interesting content, and your must register on the social bookmarking site, so you can instantly share without waiting for visitors who click your blog sharing by the widget.

Adding Social Bookmarking widget is one of the blogging tricks which will indirectly increase the popularity of our blog. Visitors blog will be very easy to send our blog articles to various Social Bookmarking sites, like Facebook, Stumble Upon, Digg, and others. Now there has been much Social Bookmarking widgets for Blogger by script html.

Sharing is Sexy image


To add this widget to your blog, follow these instructions:

Step 1:
Log in to Blogger, go to Layout -> Edit HTML and mark the "Expand Widget Templates" box.

Step 2:
Now find (CTRL+F) this in the code:

</head>

And immediately BEFORE/ABOVE it, paste this code:

<!--HIDDEN-BOOKMARKS-STARTS-->
<style type='text/css'>
div.beauty-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.beauty-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.beauty-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.beauty-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;
}

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover {
background:url('http://i44.tinypic.com/1znbj83.png') no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-yahoo {
background-position:-650px top !important;
}
.beauty-yahoo:hover {
background-position:-650px bottom !important;
}
.beauty-blinklist {
background-position:-600px top !important;
}
.beauty-blinklist:hover {
background-position:-600px bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-myspace {
background-position:-200px top !important;
}
.beauty-myspace:hover {
background-position:-200px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-mixx {
background-position:-250px top !important;
}
.beauty-mixx:hover {
background-position:-250px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}
.beauty-syndicate {
background-position:-150px top !important;
}
.beauty-syndicate:hover {
background-position:-150px bottom !important;
}
.beauty-email {
background-position:-753px top !important;
}
.beauty-email:hover {
background-position:-753px bottom !important;
}

</style>
<!--HIDDEN-BOOKMARKS-STOPS-http://sulthanyusuf.blogspot.com/-->

Step 3:
Now find this in the code:

<data:post.body/>

And BELOW/AFTER that, paste this code:

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>
<li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
<li class='beauty-syndicate'><a href='http://feeds.feedburner.com/blogspot/aCIu' title='Subscribe to RSS'/></li>
<li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
</ul>
<span class='beauty-rightside'/></div>
</b:if>

You may of course remove any button code, if you do not want to show it.

Now save the template.

That's it. Now just write some good posts worth bookmarking
READ MOREads

Embedded Comment Form (blogger in draft)

.
7 comments

Translate This Article To Indonesia

After so long in the complaint use, ultimately improving the Blogger Team is also complicated the problem in comment form, the new features this time we will no longer find that annoying blogger comments. Blogger now allows us to put comment form (Embedded Comment Form) under the posts.




To install the Embedded Comment Form to login first to http://draft.blogger.com then on the "Settings" select the tab "Comments" after it agreed to a "Placement Formula comments" do not forget to check the "Embedded below post" do not forgotten saved and see the results.




STOP! if you've succeeded, the following article does not need to be continued.

Please note before you try this feature sometimes does not directly work on the template already in the modification, for blogs that have not been on the modifications I think there is no problem. To overcome this problem blogger offers a somewhat less well, ie by deleting coding <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'> then put back the code to its original position . This method does not delete the actual post page elements, if still forced us to lose the previous setting.

To try the solution into the layout of the pages - Edit HML (do not forget to check the Expand Widget Templates).

Find the code below: (Sometimes a little different each template just so focused to the color code green)

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


Already? then delete all the above code and replace it with all the code 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>


Do not forget to save, please try again, if it still does not work try to go back to the comment page and check back "Embedded below post".

Hopefully the above ways can help to solve your problems

.
READ MOREads

How to Make emoticons in Blog Comments Column

.
11 comments

Translate This Article To Indonesia

Install emoticons above comment box will make it easier for commentators to show expression and emotion. To sample Emoticons can be seen on my column's comments.

:)):)] ;)) ;;) :D ;) :p :(( :) :( 
:X =(( :-o :-/ :-* :| 8-} ~x( :-t 
b-( :-L  =))

Before installing the above Emoticon comment box, make sure the system was already using the latest Commenting from bloggers (see here), if my explanation still does not work too .. maybe it should be no change in coding XML Template.

To install the column Emoticon code comments, first .. Edit HTML view the first entry, then copy-paste the script below the orange and place the code above </ body> This code is usually located at the bottom of the HTML code.

<script src='http://sites.google.com/site/sulthanyusuf99/my-hosting/smiley.js'
type='text/javascript'/>

As for installing emoticon codes comment box above, remain on the Edit HTML page (do not forget to check the Expand Widget Templates). then look for the red color code 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>

now copy and paste the code below and place under the code <p class='comment-footer'> (see the previous script) kalo finished do not forget to save, and see the results :)

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>



Hopefully this information is useful ! Thanks

.
READ MOREads

How To Create a List of Contents According to Label Blog

.
4 comments

Table of Contents is very necessary for a blog so that visitors can easily google search our blog. Blogger itself has not provided a list of widgets for other content and widget Archieves Labels.

But we can use the widget Labels as an aid to create our own list of contents based on a label or category. By using javascript, we can do this.


Steps that must be done is:

1. Edit the script in advance in accordance with the label and the name of your blog.
2. Log in to your Blogger Dashboard
3. Create a new post.
4. Copy-parse the script


<table border="0" cellspacing="20"><tbody>
<tr><td valign="top" width="45%">

<center style="color: lime;"><span style="font-size: x-large;">LabelTitle1</span></center>
<script style="text/javascript">
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
// get entry i from feed
var entry = json.feed.entry[i];
// get the posttitle
var posttitle = entry.title.$t;
// get the post url
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
document.write('<li><a href="'+ posturl + '">'+ posttitle + '</a>'+ '<br>');
}
}
</script><br />
<p>Articles :</p><ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script

src="http://BLOGTITLE.blogspot.com/feeds/posts/default/-/LabelTitle1?alt=json-in-script&callback=showrecentposts"></script>
</ul>
</td> <td valign="top" width="45%">

<center style="color: lime;"><span style="font-size: x-large;">LabelTitle2</span></center>
<script style="text/javascript">
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
// get entry i from feed
var entry = json.feed.entry[i];
// get the posttitle
var posttitle = entry.title.$t;
// get the post url
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
document.write('<li><a href="'+ posturl + '">'+ posttitle + '</a>'+ '<br>');
}
}
</script><br />
<p>Articles :</p><ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script src="http://BLOGTITLE.blogspot.com/feeds/posts/default/-/LabelTitle2?alt=json-in-script&callback=showrecentposts"></script>
</ul>
</td> </tr>
</tbody></table>

<table border="0" cellspacing="20"><tbody>
<tr><td valign="top" width="45%">

<center style="color: lime;"><span style="font-size: x-large;">LabelTitle3</span></center>
<script style="text/javascript">
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
// get entry i from feed
var entry = json.feed.entry[i];
// get the posttitle
var posttitle = entry.title.$t;
// get the post url
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
document.write('<li><a href="'+ posturl + '">'+ posttitle + '</a>'+ '<br>');
}
}
</script><br />
<p>Articles :</p><ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script

src="http://BLOGTITLE.blogspot.com/feeds/posts/default/-/LabelTitle3?alt=json-in-script&callback=showrecentposts"></script>
</ul>
</td> <td valign="top" width="45%">

<center style="color: lime;"><span style="font-size: x-large;">LabelTitle4</span></center>
<script style="text/javascript">
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
// get entry i from feed
var entry = json.feed.entry[i];
// get the posttitle
var posttitle = entry.title.$t;
// get the post url
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
document.write('<li><a href="'+ posturl + '">'+ posttitle + '</a>'+ '<br>');
}
}
</script><br />
<p>Articles :</p><ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script src="http://BLOGTITLE.blogspot.com/feeds/posts/default/-/LabelTitle4?alt=json-in-script&callback=showrecentposts"></script>
</ul>
</td> </tr>
</tbody></table>

<table border="0" cellspacing="20"><tbody>
<tr><td valign="top" width="45%">

<center style="color: lime;"><span style="font-size: x-large;">LabelTitle5</span></center>
<script style="text/javascript">
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
// get entry i from feed
var entry = json.feed.entry[i];
// get the posttitle
var posttitle = entry.title.$t;
// get the post url
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
document.write('<li><a href="'+ posturl + '">'+ posttitle + '</a>'+ '<br>');
}
}
</script><br />
<p>Articles :</p><ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script

src="http://BLOGTITLE.blogspot.com/feeds/posts/default/-/LabelTitle5?alt=json-in-script&callback=showrecentposts"></script>
</ul>
</td> <td valign="top" width="45%">

<center style="color: lime;"><span style="font-size: x-large;">LabelTitle6</span></center>
<script style="text/javascript">
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
// get entry i from feed
var entry = json.feed.entry[i];
// get the posttitle
var posttitle = entry.title.$t;
// get the post url
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
document.write('<li><a href="'+ posturl + '">'+ posttitle + '</a>'+ '<br>');
}
}
</script><br />
<p>Articles :</p><ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script src="http://BLOGTITLE.blogspot.com/feeds/posts/default/-/LabelTitle6?alt=json-in-script&callback=showrecentposts"></script>
</ul>
</td> </tr>
</tbody></table>

<table border="0" cellspacing="20"><tbody>
<tr><td valign="top" width="45%">

<center style="color: lime;"><span style="font-size: x-large;">LabelTitle7</span></center>
<script style="text/javascript">
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
// get entry i from feed
var entry = json.feed.entry[i];
// get the posttitle
var posttitle = entry.title.$t;
// get the post url
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
document.write('<li><a href="'+ posturl + '">'+ posttitle + '</a>'+ '<br>');
}
}
</script><br />
<p>Articles :</p><ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script src="http://BLOGTITLE.blogspot.com/feeds/posts/default/-/LabelTitle7?alt=json-in-script&callback=showrecentposts"></script>
</ul>
</td> <td valign="top" width="45%">

<center style="color: lime;"><span style="font-size: x-large;">LabelTitle8</span></center>
<script style="text/javascript">
function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
// get entry i from feed
var entry = json.feed.entry[i];
// get the posttitle
var posttitle = entry.title.$t;
// get the post url
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
document.write('<li><a href="'+ posturl + '">'+ posttitle + '</a>'+ '<br>');
}
}
</script><br />
<p>Articles :</p><ul><script style="text/javascript">
var numposts=100;
var numchars=100;
</script>
<script

src="http://BLOGTITLE.blogspot.com/feeds/posts/default/-/LabelTitle8?alt=js

on-in-script&callback=showrecentposts"></script>
</ul>
</td> </tr>
</tbody></table>

<div style='text-align:center; font-size:80%'>"Widget by: <a href='http://sulthanyusuf.blogspot.com/2009/12/how-to-create-a-list-of-contents-according-to-label-blog.html'>BLOG SulthanYusuf ™"</a></div>



5.In the bottom row code, replace BLOGTITLE.blogspot.com with your blog name as the name and replace blog.blogspot.com
6.LableTitle1, LableTitle2, LableTitle3, etc. to label your post will be made a list of contents.
7.If your post in one label more than a hundred, then you stay up the settings on numposts variable.
8.Then publish your post and try to open your blog then your contents will look like this; click here to review


-
READ MOREads

Opening Link In New Tab Page

.
0 comments

Each put a link on one of the words / phrases in the post, if the word / phrase in the click it will close the tab of our blog page. It is very difficult if we want to go back to the old tab pages, we have to click the previous and wait for pages to load displacement while.
To overcome this, we can edit the link command so when we open (click) the link can move into a new tab page that the page we read that was not covered by it.

How to edit it quite easily, you can follow the following steps:.

* On the Edit Entries page, click Edit HTML.
* Find a word / phrase that has been given the link. For example like this:

<a href="http://sulthanyusuf.blogspot.com">BLOG SulthanYusuf</a>

"Http://sulthanyusuf.blogspot.com" is a link from the sentence BLOG SulthanYusuf.

*Add command target = "_blank" after the URL link, such as the following example:

<a href="http://sulthanyusuf.blogspot.com" target="_blank">BLOG SulthanYusuf</a>

Target = "_blank" This is the command to open a new tab page. Apart from that command you can also use the command "up" or "new" to change the command "_blank".

Well, you finished. But you reply more attractive again in the link you are, for example by displaying the description of each link is designated by the mouse pointer, then you simply add the command title = "description" in the link, as an example:

<a href="http://sulthanyusuf.blogspot.com" target="_blank" title="description">BLOG SulthanYusuf</a>

Replace the word "description" with the sentence you want.

Good luck!

-
READ MOREads

Different Background Image On Each Blog Post

.
2 comments

I want to explain how to display a different background image on a blog post. Quite simple way, using HTML and CSS without JavaScript. Theoretically, using the background replaced with span width of 100% DAB height of 100%, the span was placed in a position below content (lower z-index). For more convenience, copy & paste the HTML code below and put in the post.


<div style="position: fixed; top: 0pt; left: 0pt; width: 100%; height:100%; background: url(http://your-URL/background.jpg); text-align: center; z-index: -5;">
</div>


Change http://your-URL/background.jpg address with the desired picture.If you do not want to use a photo as background, can also use the color.

Important!
The way the above is purely a trick that I have successfully applied in this blog. So far, these tricks can work well when combined with JavaScript readmore (because the script is turn off the HTML of each post on the main page). If you try this trick without combining it with the readmore script, likely the effect will disrupt the main page.

Advice :
Put the HTML code at the end of the post.

This trick can be run on the latest browsers. I've tested it in Firefox 3.x, Safari 4, Chrome 3, and Opera 9. However, can not walk well for IE 6.
For the demo, can be seen on this blog.
Good luck ..


READ MOREads

Membuat MENU pada BLOGSPOT

.
5 comments

Artikel MEMBUAT MENU BLOG ini telah banyak di posting oleh para BLOGGER yg lain.Disini saya hanya ingin

menyajikannya kembali ,dan juga sebagai catatan agar saya lebih mudah menggunakannya

andaikata pada suatu hari nanti saya ingin membuat MENU pada blog baru saya.

Baiklah kita mulai saja:
1. Login ke blogger terus pilih Layout --> Edit HTML, jangan lupa template di backup dulu.
2. Cari script seperti ini ]]></b:skin>, kalo udah ketemu copy script dibawah ini dan taruh diatasnya

/*credits : http://sulthanyusuf.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("") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background: url("") 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 {color:#fff; background-color:grey; margin:0 7px; padding:5px 4px}{
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}


3. Copy script berikut ini

<div id="tabshori">
<ul>
<li><a href="http://sulthanyusuf.blogspot.com"><span>Home</span></a></li>
<li><a href="http://sulthanyusuf.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://sulthanyusuf.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://sulthanyusuf.blogspot.com"><span>News</span></a></li>
<li><a href="http://sulthanyusuf.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >

4. Ganti http://sulthanyusuf.blogspot.com dengan link yang kamu tuju. Link tersebut bisa berupa

alamat blog lain atau link postingan km. Untuk mendapatkan link postingan caranya klik kanan

pada judul postingannya trus pilih "copy link location" (untuk mozilla firefox).
Kemudian text yang dicetak tebal bisa kamu ganti dengan text yang kamu suka. Text tersebut

adalah text yang muncul di tombol/menu.
5. Cara memasangnya ada beberapa macam tergantung dari template yang digunakan, salah satu

contoh memasangnya yaitu begini
cari kode berikut ini :

<div id="content-wrapper">

caranya nyari biar gampang, copy script diatas lalu tekan Ctrl-f kemudian paste di kotak find, nha

langsung ketemu kan. Kalo sudah ketemu copy script yang tadi diatasnya
6. Simpan hasil pengeditan.
7. Lihat hasilnya.
8. kalo hasilnya kurang bagus/acak-acakan coba script tadi dipindah tempatnya, misalnya pindah

keatasnya yaitu diatas kode </div>. kalao nggak cocok juga tempatnya dicoba lagi yang diatasnya

atau juga dibawahnya, begitu terus sampai ketemu tempat yang cocok.

9. Kalo masih belum berhasil juga coba cara ini:

- Cari kode berikut ini :

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


terus ganti script-nya sehingga menjadi seperti ini:

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

terus di Save

Klik tab Page Elements, kemudian di daerah header klik Add a page element lalu pilih

HTML/JavaScript paste script link tadi di dalam kotak content terus simpan, coba drag kebawah

dikit, terus simpan dan lihat hasilnya.
hasilnya pasti akan berbeda-beda di setiap template.
kalo gagal berarti coba diteliti lagi langkah-langkahnya dan dipahami maksudnya, Good luck.....

Semoga Bermanfaat....
READ MOREads

READ MORE outomatic with Thumbnail

.
5 comments


Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)


<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;'/>


Cari kode </head> kemudian letakan script dibawah ini di atas kode </head> Kalo sudah, jangan lupa di simpan terlebih dahulu.


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


<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
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>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu ganti kode <data:post.body/> dengan semua kode dibawah ini

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


silahkan disimpan dan lihat hasilnya :)

Keterangan:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Semoga Bermanfaat...
READ MOREads

Membagi Postingan Menjadi 2 Kolom

.
8 comments

Pernah baca koran kan?...(emang tanya apaan,ya pernah lah)
Maaf,sekedar ingin mengingatkan bahwa tulisan di koran itu kan berkolom -kolom jadi saya ingin memberikan TIPS untuk Membagi Postingan Menjadi 2 Kolom layaknya tulisan di dalam koran.
Contohnya seperti postingan ini...Langsung saja,seperti biasa login ke akun blogger kamu terus buat postingan baru dan pilih EDIT HTML,ingat jangan salah pilih ya.Selanjutnya masukan script-nya kedalam postingan :


<table width="200" border="0" cellspacing="10"><tr><td width="100" valign="top">artikel kamu...</td>
<td width="100" valign="top">Artikel kamu</td>
</tr>
</table>

Kemudian kamu dapat menuliskan postingan kamu dengan mengganti kata-kata yg bertuliskan ARTIKEL KAMU dengan postingan kamu.

Dan kamu dapat meng-edit script diatas dengan ketentuan sbb:
1. table width="200″ –> lebar table
2. td width="100″ –> lebar kolom 1
3. td width="100″ –> lebar kolom 2
4. cellpacing="10″ –> jarak antar kolom.

Oya,script diatas blum saya coba pada GADGET atau WIDGET html.Kalau ada temen-temen yang telah mencobanya saya mohon informasinya apakah script diatas berhasil pada WIDGET html.Oke Sob,thanks sudah berkenan membaca post ini....salam BLOGGER.
READ MOREads

Membuat Buku Tamu Tersembunyi Dengan 5 New Tab Di Dalamnya

.
17 comments

Saya akan mengulang postingan para blogger lain yg telah banyak menampilkan artikel sejenis. Namun dalam kesempatan ini,script html-nya saya modifikasi sehingga di dalam widget tersembunyi tersebut mampu memuat 5 new tab yg mungkin akan lebih menghemat ruangan blog.

Langsung aja ya,nih script nya :

<style type="text/css">
#gb{
position:fixed;
top:0px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjP7TV1kQvXBTrCCZhSgri5yYFvE78P7asjefthyphenhyphenMhS35akOCiGAWnAr3_OgwHS4Mx3ZKjTJ8CxJPT-ft8teM3YZAwNYSz_D2auZ-p0eerzE05xSyffUjVNia03LSVM95qA9WGa7zpnfLj/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<script language="JavaScript" type="text/javascript">
function st2(t){
for(i=1;i<=5;i++){
ts=document.getElementById('tt'+i);
tr = document.getElementById('dd'+i);
ta = document.getElementById('aa'+i);
if(t==i){
if(t==1) ts.className="Tab1";
if(t==2) ts.className="Tab2";
if(t==3) ts.className="Tab3";
if(t==4) ts.className="Tab4";
if(t==5) ts.className="Tab5";
ta.className="srchlinksel2";
ts.style.borderBottom="1px solid #FFFFFF";
tr.style["display"]="block";
tr.style["visibility"]="visible";
}
else{
ts.className="tb2";
ta.className="srchlink2";
ts.style.borderBottom="1px solid #B5D6EF";
tr.style["display"]="none";
tr.style["visibility"]="hidden";
}
}
}
</script>

<style type="text/css">.f10 {
FONT-SIZE: 10px; FONT-FAMILY: arial
}
.f11 {
FONT-SIZE: 11px; FONT-FAMILY: arial
}
.f12 {
FONT-SIZE: 12px; FONT-FAMILY: arial
}
.f12r {
FONT-SIZE: 12px; LINE-HEIGHT: 13px; FONT-FAMILY: arial
}
.f12n {
FONT-SIZE: 12px; LINE-HEIGHT: 1.3em; FONT-FAMILY: arial
}
.ft11a {
FONT-SIZE: 11px; LINE-HEIGHT: 13px; FONT-FAMILY: Tahoma
}
.fv9 {
FONT-SIZE: 9px; FONT-FAMILY: verdana
}
.fv10 {
FONT-SIZE: 10px; FONT-FAMILY: verdana
}
.ft11 {
FONT-SIZE: 11px; LINE-HEIGHT: 14px; FONT-FAMILY: Tahoma
}
.fmicro9 {
FONT-SIZE: 9px; FONT-FAMILY: Microsoft Sans Serif
}
A.srchlink:link {
COLOR: #2864b4; TEXT-DECORATION: none
}
A.srchlink:visited {
}
A.srchlinksel:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlink2:link {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlink2:visited {
COLOR: #2864b4; TEXT-DECORATION: underline
}
A.srchlinksel2:link {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
A.srchlinksel2:visited {
CURSOR: text; COLOR: #000000; TEXT-DECORATION: none
}
.tb2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#D9E9F6');BACKGROUND-COLOR: #d9e9f6
}
.tbmain2 {
BACKGROUND-COLOR: #ffffff
}
.lfttbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#DEFFC6',EndColorStr:'#B7E4A2'); BACKGROUND-COLOR: #deffc6
}
.rttbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#EEF5FB',EndColorStr:'#DEEFF7'); BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #eef5fb
}
.rttblx {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef 1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #ffffff
}
.rt_tbl {
BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: 0px; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM: #b5d6ef 1px solid; BACKGROUND-COLOR: #b0dafd
}
.toptbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#4A84AD',EndColorStr:'#00426B'); BACKGROUND-COLOR: #00426b
}
.srchtbl {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FFFFFF',EndColorStr:'#A5DEDE'); BACKGROUND-COLOR: #a5dede
}
.Tab1 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEDFB3',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab2 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#B39DFE',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab3 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#F6FE9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab4 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#FEAF9D',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
.Tab5 {
FILTER: progid:DXImageTransform.Microsoft.Gradient
(GradientType:0,StartColorStr:'#9DFEA5',EndColorStr:'#FFFFFF');
BACKGROUND-COLOR: #ffffff
}
A {
TEXT-DECORATION: none
}
A:hover {
TEXT-DECORATION: underline}
</style>

<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td id="tt1"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid" width="59"
class="Tab1" height="22" onclick="st2('1')" align="middle"><a id="aa1"
class="srchlinksel2" href="javascript:undefined"><font
class = f12><b><center>EDIT TAB 1</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt2"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('2')" align="middle"><a id="aa2"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>EDIT TAB 2</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt3"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('3')" align="middle"><a id="aa3"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>EDIT TAB 3</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt4"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('4')" align="middle"><a id="aa4"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>EDIT TAB 4</center></b></font
class></a></td>
<td style="BORDER-BOTTOM: #b5d6ef 1px solid" width="2">
<table border="0" cellspacing="0" cellpadding="0" width="2">
<tbody>
<tr>
<td width="2"></td></tr></tbody></table></td>
<td id="tt5"
style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP: #b5d6ef
1px solid; BORDER-LEFT: #b5d6ef 1px solid; BORDER-BOTTOM:
#b5d6ef 1px solid" width="59"
class="tb2" height="22" onclick="st2('5')" align="middle"><a id="aa5"
class="srchlink2" href="javascript:undefined"><font
class = f12><b><center>EDIT TAB 5</center></b></font
class></a></td></tr>
<tr>
<td colspan="9">
<div style="BORDER-RIGHT: #b5d6ef 1px solid; BORDER-TOP:
0px; BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px;
BORDER-BOTTOM: 0px"
><!-- Main Headlines Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295" height="5">
<tbody>
<tr>
<td height="5"></td></tr></tbody></table>
&nbsp;&nbsp; <span style="gt;Widget edited by <a" href="#" target="_blank">BLOG SulthanYusuf</span>


<div id="dd1" style="BORDER-RIGHT: #b5d6ef 0px solid;
BORDER-TOP: 0px; DISPLAY: block; VISIBILITY: visible;
BORDER-LEFT: #b5d6ef 0px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
>
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 1 -->


<!-- Script Html Widget Kamu Pada Tab 1-->
</font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table></div><!-- Main
Headlines End //--></div>
<div id="dd2" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- News Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 2 -->


<!-- Script Html Widget Kamu Pada Tab 2-->
</font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- News End
//--></div>
<div id="dd3" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Business Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 3 -->



<!-- Script Html Widget Kamu Pada Tab 3-->
</font></td></tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Business End
//--></div>
<div id="dd4" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Movies Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 4 -->


<!-- Script Html Widget Kamu Pada Tab 4-->
</font></td>
</tr>
<tr>
</tr>
<tr>
<td height="4"></td></tr></tbody></table><!-- Movies End
//--></div>
<div id="dd5" style="BORDER-RIGHT: #b5d6ef 1px solid;
BORDER-TOP: 0px; DISPLAY: none; VISIBILITY: hidden;
BORDER-LEFT: #b5d6ef 1px solid; WIDTH: 295px; BORDER-BOTTOM:
#b5d6ef 1px solid"
><!-- Sports Begin //-->
<table border="0" cellspacing="0" cellpadding="0"
width="295">
<tbody>
<tr>
<td width="14"></td>
<td valign="top"><font color="#16387c" class="f12n">

<!-- ISI TAB 5 -->


<!-- Script Html Widget Kamu Pada Tab 5-->
</font></td></tr>
<tr>
</tr>
<tr>
<td
height 4=></td
height></tr></tbody></table></div></td></tr></tbody></table>
<br/>
Mau seperti ini?<br/>
Klick aja disini--->
<a href="http://sulthanyusuf.blogspot.com/2009/11/membuat-buku-tamu-tersembunyi-dengan-5.html">
<blink>BLOG SulthanYusuf</blink><!--Saya Harap Anda Tidak Menghapus Link Saya--></a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>


Petunjuk : Ganti tulisan atau script berwarna merah seperti di bawah ini dengan script html widget kamu.


<!-- Script Html Widget Kamu Pada Tab 1-->
<!-- Script Html Widget Kamu Pada Tab 2-->
<!-- Script Html Widget Kamu Pada Tab 3-->
<!-- Script Html Widget Kamu Pada Tab 4-->
<!-- Script Html Widget Kamu Pada Tab 5-->

Silahkan Dicoba ,Semoga Bermanfaat...
READ MOREads

Membuat Google Translate Dengan Logo Bendera

.
7 comments

Memasang Widget Google Translate di blog akan memudahkan pengunjung dari luar negeri untuk membaca artikel yang telah kita post ke dalam blog,apalagi dengan menggunakan logo bendera setiap negara tentu akan membuat tampilannya bertambah indah.
Berikut Saya share script untuk widget-nya,walau kurang lengkap ( tidak semua negara ) namun saya rasa cukup lah buat menghiasi tampilan blog.
Anda juga bisa menambahkan logo bendera yang lain (saya rasa dengan melihat script berikut nanti Anda akan mengetahui bagaimana cara menambahkannya) tetapi jika Anda tidak tahu caranya...ya..nikmati aja yang ada.....:D




<a href="http://translate.google.com/translate?hl=id&sl=auto&tl=en&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1EBVaCneqn9UXW-i3wsXpnYVVhxUj2T9hF5z64kTA3q0a1l8NfkEYKsuMmtVYLP5iE5s2kcNo4wTQGkcspdvJv_QgkU8SLZfAIv0ZILP4HcWm-EgwkzlQnapPUUrEkVIDiyxtMLoJu9k/s1600/english.png" title="âEnglishâ"/></a>

<a href="http://translate.google.com/translate?hl=id&langpair=id|zh-CN&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnvBXyTBNtBHM8EnteWgJrxgaCxLU3viRtJvTW2DkwPAwZpGyqe0zUde0J702Kwtl04ImPdPsoQkwfBWBj7Hqgy-xa0gTespQHnlBlKbFgzh7LErYaah76PKK9QWl4FjcM08qR1337d6o/s1600/china.png" title="âChineseâ"/></a>

<a href="http://translate.google.com/translate?hl=id&langpair=id|es&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6gBm8IMJeWbumzTcfaqbYJxflolb27P2fekWxjewgHbFFyUF-1yQvdigoEYugr48W-GT-QI3OCg7ax62AyS9buPfrA8hNCC_PdtYJ_3GfNE1V24vVc8KxuApSksc0aKqLTzLJ5AkbGq0/s1600/span.png" title="âSpainâ"/></a>

<a href="http://translate.google.com/translate?hl=id&langpair=id|de&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2XpupqFt1K_Ov-lIXRIC59reqaAzKI7oH5YvwfnjHLgTAnhl1K-XV_m310daen9A1GCJy89mrPRaIe4GcBunZVfb34C_BGYuA7Nei7CO7Jv4W5zsGLt27VGFI2AYRWKw3MVkcy5sYzg/s1600/germany.png" title="âGermanyâ"/></a>

<a href="http://translate.google.com/translate?hl=id&langpair=id|fr&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieImIGUIHIMQXtreItM-HVarQPH72HNVq83murTq6AX9i7Ii5y3_kzwIGbISFqN2CjfnxXR47KtoRdjWPjCPvGYfM1QZZN8DM2Jq5-Mi8CwU6J4ESYyt89NlBIPPk-zMioomsQdIuf0w8/s1600/france.png" title="âFranceâ"/></a>

<a href="http://translate.google.com/translate?hl=id&langpair=id|ja&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6WS4N5rCm5ZqWVKENRWi2ND9rrC5fUYekyWZ5J311iwZtR3_683kTHbKJ1F6xabJ7HMtMVE-AtGPSwPenEmju78njFxzct2fP7nmbAYi0HJ5qtTkgHYCVcHQ39UiQKkZadCMRPPZKx4U/s1600/japan.png" title="âJapaneneâ"/></a>

<ul>
<br/><a href="http://translate.google.com/translate?hl=id&langpair=id|it&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidCATlHwcP0azeT5p1K7SRuEPmv-ZIIq6MI6QxhuLWldUOK9MISwbhBgNiKrA353aYCpJ7ROi3WgBNvbgPFDGPJhBG5_8mHXcnW1H2CjqNPueD0La4dToxTqwN3_9j4KTmV2si2A15MIk/s1600/italian.png" title="âItalianâ"/></a>

<a href="http://translate.google.com/translate?hl=id&langpair=id|pt&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIocUCfKfqbyV-mJFE5e1Pv2Iw_F0mGHqLthmmrsQzse2O_60y2UVXXWCOxTpMgCZ9IqxdKTLxbQk4N9Q2jLT9s7w_hgtGNOefNplBEYRCg874eSLMhyphenhyphenWco2DnfEoViAr9CfgnEkaRs6Y/s1600/portuguies.png" title="âPourtugueseâ"/></a>

<a href="http://translate.google.com/translate?hl=id&langpair=id|ru&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTxHcGJRW37cJpyRI-koAGGMU0dQaFG9t3JRwmPezDKNxN-iRGACKheIGxHCkQexZVCv6f-AQQnoV-TS6L9Cer2j16uj7xqxlKOewsexZ_gZKmZyCWH04OGb0HZv5PegPAZHE1gw0Qdmk/s1600/russian.png" title="âRussianâ"/></a>

<a href="http://translate.google.com/translate?hl=id&langpair=id|nl&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqqtdoE_OD8VdMjLzpZKagdCdeqlYmNU9iKmQLc-bohImM8pwl6r9peYh1daFzhLb6y6KX_VnzNdGNyKvMqdiZJfnr0QhyphenhyphenQ-P9eJkcpjgWgbYfJ3v09n90If2vfRDqwW0K_9HzHrM97XM/s1600/dutch.png" title="âDutchâ"/></a>

<a href="http://translate.google.com/translate?hl=id&langpair=id|ar&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitINYz8DaeAjTvXYr9YbWV4rZ5kcWru4CzZ9irjPGqLMITk2xSfLh3CTgbJzWVHgzM2znVTQiWI5ivAwlNJXwZqEqajCasQQ4MDujgteyaor_eGR76qOiwbkAfx_IA9W9oKuJJB8i7irk/s1600/arabian.png" title="âArabianâ"/></a>

<a href="http://translate.google.com/translate?hl=id&langpair=id|ko&u=http://link-kamu/">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg20xE5ILknWGXijoQ7zHnLe12qMoo4W0u5vGJS4tMr8IBdlCp3xZ7a0uvgIga9g3m7ikU2mIeCHxK4E49UYiGtaQRyGA3n4-adT7DPrfj0NtQqkPxRxJW2yY5XbU8eP9-_ei7b0OZTu7w/s1600/korean.png" title="âKoreanâ"/></a><br/></ul>

<p><span style="">Mau Widget Seperti Ini?</span>
<a target="_blank" href="http://sulthanyusuf.blogspot.com/2009/11/membuat-google-translate-dengan-logo.html">Klik Disini..</a></p>

Caranya :
Tambahkan widget html di layout page element terus copy+pass kedalamnya.Tapi jangan lupa untuk meng-edit tulisan dengan warna merah (link-kamu ) dengan alamat URL anda.
Selamat mencoba...Semoga bermanfaat.
READ MOREads

RELATED ARTICLES by LABELS / ARTIKEL TERKAIT

.
4 comments

Membuat Related Article/Related Post atau Artikel Terkait akan memudahkan pembaca untuk menemukan postingan kita yg sejenis.

Langsung aja:
1. Buka account Blogger Beta Anda, lalu klik "TEMPLATE", selanjutnya klik "EDIT HTML"
2. Klik "Expand Widget".
3. Jangan lupa untuk menyimpan template Anda di Komputer atau File lain dengan meng-klik Download Full Template. Ini adalah prosedur standar (gold procedure) setiap kali Anda akan melakukan perubahan pada template Blogger Beta. Sewaktuwaktu, jika proses editing Template Blogger Beta Anda bermasalah, maka Anda masih bisa kembali ke Template Anda sebelumnya.
4. Cari kode
<data:post.body/>
5. Copy + Paste kode Java Script dibawah ini setelah kode tersebut

<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- *****************http://astaqauliyah.com*****Nov,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->


<div class='widget-content'>
<b>Postingan Terkait Lainnya :</b>
<div id='data2007'/><br/><br/>
<div id='Randezvous'>
Widget by <u><a href='http://sulthanyusuf.blogspot.com/2009/11/related-articles-by-labels-artikel.html' target='_blank'>BLOG SulthanYusuf</a></u>
</div>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

6.Kemudian Save Template.
READ MOREads

Kode "Email Me" html / javascript untuk halaman web ( blog )

.
2 comments

Menambahkan "Email me" link ke blog / halaman Web ini sangat membantu bagi pengunjung yang ingin menghubungi Anda.Dapat juga meningkatkan interaktivitas antara pengunjung dan situs Anda dan membuat mereka datang secara teratur.
Saya akan menulis alamat email secara langsung seperti abc@gmail.com dan meminta pengunjung untuk menghubungi saya.Jadi, itu sebabnya mengapa untuk menambahkan link seperti ini disebut "Email me"?
 
  Ada banyak masalah jika Anda menunjukkan alamat email Anda secara langsung di situs Anda sebagai spammer dan menemukan alamat email Anda dengan mudah melalui mesin pencari, dan sumber lain.
Jadi, dengan menambahkan jenis link ini akan menyembunyikan alamat email dan Jika pengunjung Anda ingin menghubungi Anda, mereka akan mengklik link itu.
Dengan mengklik link, WINDOWS OUTLOOK EXPRESS akan terbuka secara default.

  Jadi, bagaimana cara menambahkan link "Email me" ?
Ada dua jenis cara untuk melakukannya.Pertama adalah link teks dan satu lagi adalah image link.

Teks Link:
Misalnya, email Anda adalah abc@gmail.com, di sini adalah kode yang anda harus tambahkan



Image link
Misalkan,Anda ingin pengunjung ke email Anda dengan mengklik pada gambar seperti di bawah ini





Pertama Anda harus mengupload gambar Anda ke layanan hosting gambar. Mereka akan memberikan link langsung untuk di-upload.Setelah itu copy kode html gambar tersebut.


Berikut adalah bentuk script-nya




Terima Kasih.
Semoga Bermanfaat....Salam Blogger !

 
READ MOREads

Cara Sembunyikan / Hapus Label Count di Blog Blogger

.
7 comments

Sebagian orang memilih untuk tidak menampilkan penghitung artikel dalam label blog mereka yang sepertinya akan terlihat agak tidak profesional. Sebagai contoh : label 'Tutorial' memiliki 50 artikel sedangkan label ' Marquee Script' memiliki 2 artikel.maka pengunjung akan kurang berminat untuk membuka postingan dengan label 'Marquee Script'




Jadi, mari kita lihat bagaimana cara untuk menyembunyikan atau menghapus penghitung Label di blog blogger.

1. Masuk ke dashboard Blogger »Layout» Edit html

  Beri tanda centang pada expand widget template dan hapus barisan dari template ..




 
2. Simpan Perubahan dan selesai!
READ MOREads

Script Html Code Scrolling Text ( marquee )

.
3 comments

Postingan ini menjelaskan kepada Anda bagaimana cara untuk menambahkan SCROLLING text / teks yang bergulir (juga disebut sebagai marquee) ke sidebars blog Anda, ruang posting, dll
Cara lain untuk menarik pengunjung adalah dengan menambahkan beberapa dekorasi ke dalam blog kita seperti scrolling teks, dll.Akan tetapi jangan menghiasnya terlalu banyak, sebab akan mengganggu dan merusak konsentrasi para pengunjung blog .

Jadi, bagaimana cara menambahkan teks bergulir di blog Anda, bacalah terus postingan ini.

Menambahkan teks bergulir sederhana:
Berikut adalah kode untuk menambahkan teks bergulir sederhana dari kanan ke kiri

Hasilnya akan seperti dibawah ini
contoh scrolling text sederhana

Menambahkan Background Warna Pada Teks Bergulir

Hasilnya akan seperti dibawah ini
contoh scrolling text sederhana
Jika Anda menginginkan warna yang lain ,cukup mengganti kode #99CCFF

Merubah Arah Text Bergulir Ke Kanan

Hasilnya akan seperti di bawah ini
contoh scrolling text sederhana

Merubah Arah Text Bergulir Ke Atas

Hasilnya akan seperti di bawah ini
contoh scrolling text sederhana


Merubah Arah Text Bergulir Ke Bawah


Hasilnya akan seperti di bawah ini
contoh scrolling text sederhana


Membuat Teks Bergulir Bolak-Balik

Hasilnya akan seperti di bawah ini
contoh scrolling text sederhana

 Mengatur Kecepatan Guliran Teks

Hasilnya akan seperti di bawah ini
contoh scrolling text sederhana
Yang Anda lakukan adalah menambahkan kata scrollamount="2"


Menghentikan Teks Ketika Tersentuh Cursor/Mouse

Hasilnya akan seperti di bawah ini
contoh scrolling text sederhana

 Menambahkan Hyperlink / Alamat Situs
Membuka Pada Jendela Yang Sama


Hasilnya akan seperti dibawah ini


    Pengalaman Mudik Disaat Air Surut.  Mengukur Isi Tangki Mobil Pertamina  Masjid Islamic Center Samarinda

 

Membuka Pada Jendela Baru
 

Demikianlah,sebagian kecil dari seni teks marquee.Jika Anda masih merasa bingung dengan keterangan diatas,silakan tinggalkan komentar dan saya akan menanggapi komentar Anda secepatnya.
Terima Kasih,Semoga bermanfaat.




READ MOREads

 

Followers

Recent POST

adsenseCAMP | KumpulBLOGGER

Sharing About Tips And Tricks of Blogging And Chatting! is proudly powered by o-om.com | Modif by BLOG SulthanYusuf ™