Showing posts with label Java Script. Show all posts

Home > Posts filed under Java Script

How to Add Social Bookmarking Icons to Blogger

Wednesday, June 08, 2011

Adding social bookmarking icons or buttons below blogger posts let's your readers to bookmark and share your posts which ever he likes. It's not only a Web 2.0 feature but also a great way to get social. I have seen that there are many times when I get traffic from social networking sites. Now you may also like to get social by adding bookmarking buttons, so I have updated this tutorial with 18 bookmarking sites and a feed icon.

Social Bookmarking Icons Below Blogger Posts

1. Go to Design > Edit HTML and backup your template and check the “Expand Widget Templates” box.

2. Find the bellow snippet:

<data:post.body/>

Or:

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

3. Just bellow any one of the sections mentioned above, add the bookmarking codes:

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

    <div class='share-icons'>

    <h4>Share this post</h4>

    

    <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Stumble' src='http://icon URL'/></a>

    

    <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Delicious' src='http://icon URL'/></a>

    

    <a expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Google Buzz' src='http://icon URL'/></a>

    

    <a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Facebook' src='http://icon URL'/></a>

    

    <a expr:href='"http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Reddit' src='http://icon URL'/></a>

    

    <a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' src='http://icon URL'/></a>

    

    <a expr:href='"http://buzz.yahoo.com/buzz?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Buzz it' src='http://icon URL'/></a>

    

    <a expr:href='"http://twitter.com/share?url=" + data:post.url + "&text=Currently reading: " + data:post.title + "&via=blogger_Raju"' target='_blank'><img alt='Twitter' src='http://icon URL'/></a>

    

    <a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg it' src='http://icon URL'/></a>

    

    <a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Designfloat' src='http://icon URL'/></a>

    

    <a expr:href='"http://www.diigo.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Diigo' src='http://icon URL'/></a>

    

    <a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Mixx' src='http://icon URL'/></a>

    

    <a expr:href='"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Google Bookmarks' src='http://icon URL'/></a>

    

    <a expr:href='"http://meneame.net/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Meneame' src='http://icon URL'/></a>

    

    <a expr:href='"http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Furl' src='http://icon URL'/></a>

    

    <a expr:href='"http://ma.gnolia.com/beta/bookmarklet/add?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Magnolia' src='http://icon URL'/></a>

    

    <a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Description=&Url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Blinklist' src='http://icon URL'/></a>

    

    <a expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Blogmarks' src='http://icon URL'/></a>

    

    <a href="http://feeds.feedburner.com/om-simplebloggertutorials" title='Subscribe to Feeds'><img alt='Subscribe to RSS' src='http://icon URL'/></a>

    </div>

    </b:if>

Note the conditional tags marked in red. These are used to hide the bookmarking icons from appearing below every posts on homepage.

As I'm providing too many bookmarking codes, I was unable to get matching icons for all of them, so change “src=http://icon URL” with the icons you want to use as social bookmarking buttons, “YOUR FEED ADDRESS” with the feed address of your blog and “blogger_Raju” to your twitter account.

If you don't want to add any specific bookmark, then delete it. For example, if you don't want to include Mixx, then delete:

<! -- Mixx -->

<a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Mixx' src='http://icon URL'/></a>

4. Find ]]></b:skin> and above it add:

.share-icons {
display: block;
background:#EEEEEE;
margin: 10px 0 0;
padding:5px;
border:2px solid #992211;
-moz-border-radius: 5px;
border-radius: 5px;
}
.share-icons img {
margin: 2px;
border: none;
}

Adding Addthis or Addtoany Bookmarks to Blogger

Visit AddThis or AddToAny, which ever you like, select the style you want to use and get the script code that they will provide.

Now for adding the bookmarking scripts, Find:

<data:post.body/>

Or:

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

And paste script beneath any one of the codes.

5. Preview your template for any errors and save it.

If you also want these bookmarks to not to appear on homepage, then use the conditional tags as mentioned above. Now wait for some one to come across your posts and click the bookmarking icons to add it to their favorite Bookmarks.

If you like this post then don't forget to add it to your favorite social bookmarks by clicking the bookmarking buttons.

"java code for blogger"

Sunday, May 29, 2011

Showing HTML or JAVA code like the screenshot below is not as easy as you think. Try posting HTML code inside the posts, you will notice that the HTML code gets hidden.

example of html and javascript showing in blogger post

The Solution:

First Step: Log onto blogger and go to Dashboard –> Layout –> Edit HTML and look for the this code by find option (Ctrl + F)

]]>

Above ]]>, paste the code given below:

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

After that click save.

For putting any HTML or JAVA code inside the post you have to first convert the code into escaped characters. To convert the code go to QUICK ESCAPE TOOL, insert the code and click “convert to escaped characters”

Now you have to put that converted code inside the post within “pre” tag as shown below:

And finally click publish post!

Javascript in Blogger Hosting Solutions

Monday, May 23, 2011

When the most unpleasant moment the javascript file where we store on another host start running out of bandwidth. An interactive blog that originally seen even so chaotic tampilanya khan. Well, this is one keleman bloggers because they do not give us the capacity of disk space, especially those dealing with the javascript file. As an alternative we can usually only borrow free web hosting from a third party, unfortunately the offer provided was not always satisfactory. storage capacity offered big hell, but so useless when given bandwidth capacity is not comparable hehehe. Well, here I try to share tips to overcome the problem of hosting javascript in blogger, hopefully enough to help.

Change the format of the file extension from .Js to .Txt

Remember, not all the javascript is called by the ending .Js, this is an advantage where we can store and call the javascript file in a text format that are stored in the format .txt

Not all free web hosting services provide the flexibility for us to store the file format. Js in hosting them, so we can outsmart just by changing the extension from .Js to .txt

How to call a javascript format .txt file on another host:

The invitation can be replaced with

Save Javascript in an HTML page element / Blogger Gadget

Not all the javascript code should be in store in other hosts or only in the Edit HTML page, we could have put this JS code directly on the blogger page element "HTML / Javascript". Unfortunately this does not always 100% successful, because not all javascript files can support the storage of this widget. Perhaps the only successful if the javascript code is only stand alone, in terms of JS files are not interconnected with one calling code and other code.

Save the javascript code directly in HTML EDIT page

Platform bloggers actually frees us to put the code directly javascipt on Edit HTML page. The way I apply these always succeed, but sometimes not very effective as well if the javascript code that we use the script code is too long. This last way I think is the best one that should be attempted.

Before you try the method below, make sure that we already have a JS code that will be saved. If someone is still confused, JS code can be found directly by taking the URL address. see example below calling code are printed bold. JS code and there are usually stored.

Try to directly input the URL in your browser, if you have found any live copy the code.

JS code for previously in other host can be directly used dialamat diblogger, we can directly use the code below.

Hopefully the above can solve the problem running out of bandwidth, if ya still have problems staying just use a paid hosting goes wrong ..

Page Peel Effect using jQuery & CSS

Tuesday, May 17, 2011

If no one ever wrote my first tutorial on style ads Page Peel huh? try opening the archive before ... never see you:) oh yes it turns out there are 2 different tutorials ever published, the first to use the style display Page Ear Javascript, then this is the same .. Sexy Curls jQuery Plugin. Well, for a foreign partner with the term rada Page Peel, please go back to previous records on the second link above yes.

Advanced Ok, well this time I found the latest Peel artificial Page Sohtanaka.com with coding that is of course very different from the above two Page Peel, Sohtanaka not use complicated coding setup, so just put it directly associates live page blog. Although there is little to be edited, and even then just change the look of the picture and link purpose only. When viewed at a glance, for it looks almost the same style, where when you point your mouse at this PagePeel area, it will show the page as you open the roll up a piece of paper and found another page dilembar vice versa. See demo here.

How To Install:

Put the following jQuery script code on code <b:skin><![CDATA[

Then put the CSS code below the above code]]> </b:skin>

#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}

Put this code under the tag <body>

Please be saved and see the results. Remember! Display the above only as an example, yes, peer can change the image and link any purpose as desired.

Make Highlighting Current Page or Current Menu on Blogger

Saturday, May 07, 2011

Highlighting Current Page or Current Menu is usually interpreted as a marker for the current active page when the user is in a particular page, say in the pages Home, About, Help us and Contact. On Blogger itself was actually only recently been planted this feature if we are to enable a feature to page (Page). But for some reason most bloggers including myself are not so interested in using.

What makes I'm interested to discuss this Page Current function because almost all the templates that I provide on this site is embedded feature to display the navigation menu, unfortunately, yes it was, the menu should be good even as simply as a decoration substitute for links only, and mostly just look beautiful when users mouse over (mouse hover) but has no marker features that the menu should look actively participating in the page that are also active.

As an example please see the demo colleagues on this site.

There we can see when colleagues are in the area of the page HOME, HOME menu link is also seen to participate actively. Neither time colleague's how the FAQ page and a few other menu that looks also participate actively.

Let it easier to learn please Download Demo Menu examples I've designed here.

OK directly to the tutorial course yes. Oh yes, the example below the menu are not the same as sample menus on this site, but colleagues can edit the menu as needed. Frankly I trouble to explain it, because almost every code CSS Menu has a unique design and berbeda.Tapi with this example I'm sure colleagues at least have little idea how to Aktive Curren Page / Current menu is working.

1. Please immediately go to the Edit HTML page

2. Put the CSS code below just above the code ]]></b:skin>

#nav ul {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7-bXXHNioDfKFe6zcz4SKIne7Cmy65Nd663wvd6j8CQPhp6-YZVm3oyzcb5NJEgrQ1Sm5lcI7Yhg_5wvQNyvBp9330a5C4tDRDK4nKp3Ec46eVseTGfjCe40NaRm6t2zyo580lhuFhFSb/s400/backgr.jpg) repeat-x left top;
margin:0;
border-bottom:3px solid #98CB00;
border-top:1px solid #00CCFF;
list-style-type:none;
height:31px;
}
#nav li {
float:left;
}
#nav li a {
display:block;
padding:5px 15px 4px;
font:bold 16px "Trebuchet MS";
font-stretch:condensed;
text-decoration:none;
color:#00CCFF;
letter-spacing: -0.1em;
}
#nav li a:hover {
color:#98CB00;
}
#nav li.current {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioNc-9ppsAY-onqug1EePui9Ai8vu7y9kSkPNIJfJTQ5ylJGRxmQzEJ3WFOHu93x_qDF20_3AUiVxyX3FKb-gcFCHxloh9V-mq8srbTMaIk6smG7rlw-5304mVgttgcJs1LKdfrcaaniGZ/s400/current.gi) no-repeat center bottom;
color:#98CB00;
}

2. Put the JavaScript code below just above the code </head>

3. Then please find the following code in the line of code in Edit HTML page

Then put the following code right above the code above.

<div id='nav'>
<ul>
<li><a href='/'>HOME</a></li>
<li><a href='#'>FAQ'S</a></li>
<li><a href='#'>HELP US</a></li>
<li><a href='#'>CONTACT</a></li>
</ul>
<script language='javascript'>setPage()</script>
</div>

Current Stock for Page / Menu to work, colleagues must replace the # above with an active post the url address.

To create and edit the menu display is much more beautiful than the example above menu colleagues should inevitably have much to learn HTML coding, CSS and Javascript.

Thumbnail Related Posts with Marquee (Walking)

Sunday, April 03, 2011

For those of you who already use or want to use thumbnails Related Posts (related article illustrated), would be more interested in using it, karen looks quite interesting with the picture, but there are some shortcomings of the tools that this one, which takes a lot of places on the blog page. Therefore, most blogs that I visit minimize the amount of the related post, especially with the narrow size of the post pages. Therefore to make this the marquee with the alternative (walking).

Well, for example thumbnails Related Posts Marquee method can be my friend see here.

In the previous post already described how to create thumbnails Related Posts +, my friend can apply in advance tutorial Thumbnails Related Postsnya here, but just enough to apply the Code CSSnya (script code first reply)To create these thumbnails Related Posts to be displayed with the number of lots that is by Marquee method, there are little changes that will be performed on a second script code.

Well, to get started:

1. Please see how to create thumbnails related posts here (Simply apply only code CSSnya / code first)

2. After my friend apply the first point above, now please find this code:

3. If you've met one of the code above, place the following code after one of the code above:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=10;
var relatedpoststitle="";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://serba-seru.blogspot.com/2010/02/thumbnail-related-posting-with-marquee.html' style='display:none;'>Thumbnail Related Post</a>
<a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>
</b:if>
</b:if>

- To show the number of posts, man can change the code red- To change the title, man can change the code blue

- To change the title, man can change the code blue

4. Save and see the results