Blog Information: and

Tampilkan postingan dengan label and. Tampilkan semua postingan

Jumat, 14 Februari 2014

Remember Who Knows When Youve Been Naughty or Nice When You Are Sleeping And When You Are Awake

Its not Santa Claus. Its NSA.

Minggu, 09 Februari 2014

Showcase and Share Your Memories Photos Video Clips and More

Vividly recreate and preserve your memories with a multimedia slideshow you’ll be proud to share with friends and family with PhotoStage slideshow creator software.

There’s no better tool than PhotoStage for showcasing your favorite photographs, images and video clips. PhotoStage brings your pictures, images and video to life and lets you share your favorite memories with family and friends in an interesting and portable way. Creating a slideshow from your digital photos has never been easier.

Kamis, 30 Januari 2014

Saving Loops and Samples for DJs

Feedback from our customers is very important in helping improve our software product offerings. Some of the best features in our products have been suggested by people who have used our software and have ideas on how to make it better. One of the most recent updates to our Zulu DJ Software came about as a result of feedback from DJs.

Zulu now features an enhanced, easy-to-use sample bank that lets you load up to 32 loops and samples that you can easily access while tracks are playing on the main decks. The Loops and Samples tab is located in the lower pane along with the Playlist.

Zulu D J Mixing Software Loop and Sample Bank

DJs can use the Loops and Samples bank for any kind of short recording that they want to drop in while a song is playing, or even use it in between songs for announcements. The recordings can be played once or can be set to loop mode to continue playing until paused or turned off. Each sample also features volume control and buttons for sync and pitch. The sync button allows you to sync the sample file beat to the beat of the currently loaded deck. Use the pitch button to prevent pitch changes while you sync the beat.

Whether youre DJing a wedding, adding life to a party, working as club DJ, or just having fun at home, the enhanced Loops and Samples bank in Zulu DJ Software will help you sound your best.

Sabtu, 11 Januari 2014

Javascript allow textbox accept numbers and 2 decimal points only

Minggu, 05 Januari 2014

Cartridges and Filament flow errors

Since there have been several users including myself with filament cartridge issues, and several posts about it in the CubeX user group, I thought I should post about it here with some possible temporary help to keep printing.

This might help you to get by and use a problem cartridge.
(Attempt at own risk).

Each cartridge has a little chip at the bottom where the filament exits, that makes contact with the CubeX when the cartridge is installed. The chip contains information about what type of cartridge it is and possibly records the amount left in the cartridge.

If you have a cartridge read error, you should check that the contacts in the CubeX and on the cartridge are clean and try to re-insert it. If that does not help try the cartridge in a different cartridge slot if you have a duo or trio. I have had only one cartridge read error and it went away when I re-inserted it a few times. Otherwise I dont have more help on that one, except power cycling the CubeX and trying again.

If your cartridge is binding (filament wont pull out easily) and or you are getting a filament flow error you can carefully open the cartridge and run the spool externally.

(Note: A filament flow error might not always be due to a binding cartridge.)

In some cases the filament is wound up crossed onto the spool and hanging the spool externally wont help either because it keeps tangling on the spool. (At least you can see what is going on with the spool hanging externally). In that case unwinding and rewinding up the filament on the spool is the only fix.

(Note: Be careful to not damage the chip at the bottom of the cartridge, and careful with the inner cardboard spool since it is only lightly glued together.)

Here is what I did:
This has worked great for me with the 3 cartridges I had binding issues with. One I had to glue the spool back together, but got it useable off the external hanger.

Take the cartridge out of the CubeX.

Use a exactor knife to cut the label at the cartridge seam.

To open the cartridge, start at bottom of the cartridge next to the chip. Insert a small flat screwdriver to release the clip next to the chip. Try to keep the chip in its place.

Then do the same on the clip next to it and move all the way around to open the cartridge case.

Carefully take the cardboard spool out. Handle the spool with care so it does not fall apart, since it is only lightly glued together.

Once the spool is taken out of the cartridge, make sure the chip is in its place (if the chip fell out, make sure to position and orient it correctly, otherwise it wont make contact with the CubeX) and then close up the empty cartridge (with chip in place).

Also, when removing the spool from a cartridge, make sure to write onto the spool, which cartridge it belongs to, so you dont get them mixed up if you have multiple cartridges of same color etc..

The empty cartridge can now be inserted back into the CubeX.

Inspect the spool and how the filament is wound up on it. You might have to unwind some filament, where it is bound or tangled up, and then loosely wind the filament back up on the spool.

For the cardboard spool, you need a holder with a smooth rod so the spool can rotate on it.

Here is a hanger you can print yourself (in PLA), but you also need a smooth 1/2" rod (should be very smooth / polished) with 8-32 threaded holes on each end and two 8-32 x 1/2" SHC screws and washers and one large fender washer.

STL file for spool hanger: Spool holder .stl file
SolidWorks file for spool hanger: Spool holder SolidWorks file
Or you can rig up anything similar as long as the spool has a very smooth rod to hang off and rotate on.

Take the filament end, and make sure to get a clean cut of the filament so it will feed in properly. The filament should be still round at the end after clipping it. If not, you can use a exactor knife to slightly taper the end of the filament which might help feeding it back into the guide and filament feed motor.

After prepping the filament end, you can then just feed the filament directly from the hanging spool into the filament guide in front of where you inserted the empty cartridge.

Use the cartridge replace menu. (You can leave the empty cartridge in place during the process).

Once the filament is feed thru and extruding , you are ready to go.

If you have problems feeding the filament and the motor wont pull the filament in, go into the menu with the 240C icon. There you can heat up the jet by double clicking on the TGT temperature, it will toggle between 0 C, 195C and 230C. Use 230C. Then you can double click on the feed speed to get the motor feeding at different speeds, 8 or 12 should work.

Keep pushing the filament in, pull in and out, eventually it should go.

I had a difficulties last time at a filament change, but eventually after I re-cut the end of the filament again, it feed in ok.

After using the cartridge, I stick it in a plastic bag with the desiccant from the cartridge, till I use it again.

Rabu, 02 Oktober 2013

Fading Box With Newer Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.

You can see it in action on this demo blog - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.

This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.

How to Add Navigation Box with Newer & Older Posts on Blogger

Step 1. From your Blogger Dashboard, go to Template > Edit HTML, click anywhere inside the code area and search - using CTRL + F - for this line:

<b:include name=nextprev/>

Screenshot:

Step 2. REPLACE the code above with this one:

<b:if cond=data:blog.pageType != "item">
<b:include name=nextprev/>
</b:if>
<b:if cond=data:blog.pageType == "item">
<div id=blog-pager-box>
<h4>Other posts published:</h4>
<b:include name=nextprev/>
</div>
</b:if>

Note: you can change the "Other posts published" title with your own

Step 3. Now add just above </head> the following code:

<b:if cond=data:blog.pageType == "item">
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js type=text/javascript/>
<script>
// <![CDATA[
$(function() {
$(#blog-pager-box).toggle()
.css({
width: 520px,
height: 150px,
position: fixed,
padding: 1em,
bottom: 0,
right: 0,
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvE_yeDv-5ha1cjifbQhZYHeuoYyKe3_WEX8qdjqBkYdHADsn57bMv1sPjvSkJXL6V8mJDTf23Ra3CVwVCEhstDzngqM3qDlt-v-YfdU4yEp8eh0RwIlwbzJs9Uv1BD_S1QQYVVbeSGxv/s1600/paper.jpg)
});

$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$(#blog-pager-box).fadeIn();
} else {
$(#blog-pager-box).fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>Newer Posts:</div>" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>Older Posts:</div>" + olderLinkTitle);
});
});
// ]]>
</script>

<style type=text/css>

</style>
</b:if>

Note that this gadget uses jQuery, so try to have only one version.

Customization:

- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
- In green you can see where to change the text colors.
- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.

Step 4. Now, Save the Template and thats it!

You can also change the "Older Posts" and "Newer Posts" links with posts titles or images.

Senin, 30 September 2013

Upload images and get the URL of the image

As each day there are lots of new users joining the world of blogging, is necessary to discuss about some basic topics that bring up some recurring questions such as how we could get the URL of an image?

On the Internet there are many both free as well as paid web hosting where we can host images, but since we use Blogger then there is nothing better than using the same hosting service that Google gives us and that is Picasa.

The fastest way to upload an image is by going to the Blogger post editor. From your Blogger Dashboard, go to your blog, then click on the New post button. And preferably from the Edit HTML tab, click on the image icon.

A pop-up window will open, then click on the Choose files button, browse for your image(s), double click or click on Open and then hit Add selected.

When you have uploaded you will see that in the post editor shows the code of the image.

That code is the URL of the image. Youll see two URLs (Web addresses):

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhPOjPHpZImwdVZp1un8IWHzEN7i6mFv_A2LjuETMWrJDbzJjLF7pC_hD8d7Np4wNc8dJF1RXzhyi5DLSFvgMwV3xtXbnDmlm_Zvh6P9DNQLB7GcAkDmWbLL4NFMBFJy5erbboLkjJSnM/s1600/Bliss-Windows-XP.png" imageanchor="1"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwhPOjPHpZImwdVZp1un8IWHzEN7i6mFv_A2LjuETMWrJDbzJjLF7pC_hD8d7Np4wNc8dJF1RXzhyi5DLSFvgMwV3xtXbnDmlm_Zvh6P9DNQLB7GcAkDmWbLL4NFMBFJy5erbboLkjJSnM/s320/Bliss-Windows-XP.png" /></a>

The first is the URL of the image that you need to take. It is not necessary to publish this entry where you uploaded the picture, you could as well not publish it, leave it as a draft or delete it, the image will be saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the image to remove). You could also upload image directly from Picasa. Just login to PicasaWeb, select the album where you want to host the image, and click on Add photos.

Select the image from your computer and upload it.

After we have uploaded, click on OK.

There you will see the thumbnail, along with other photos, if there are more.

If you want to get the URL of the image from Picasa then click on the image to open in full size.
With the right mouse button click on the picture and select option depending on the browser you use...

If using Google Chrome, then select Copy Image URL:

If you are using Mozilla Firefox select Copy Image Location:

If you are using Opera select Copy Image URL:

If you are using Safari select Copy Image Address:

If you are using Internet Explorer (I hope not), first select Properties, a window will open, there you will find the Address section from where you can select the URL of the image and copy it:

Having selected any of these options youll have in the clipboard the URL of the image. Simple isnt it?

Remember that all images you upload on Blogger are stored in your Picasa account, so if you find an image previously uploaded to your blog, go to your Picasa account, select the album containing the name of your blog and there find the picture you need. The procedure to obtain the URL of the image is the same as explained above.

Minggu, 22 September 2013

Using the before and after Pseudo Elements on Sidebar Titles

This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an explanatory title and the right, a related link.

The idea of generating Adobe-like Arrow Headers was actually discussed by css-tricks and adapted to Blogger.

How to Add Adobe-like Headers to Blogger

Step 1. Log in to your Blogger dashboard > go to Template > Edit HTML, then click anywhere inside the code area to search - using the CTRL + F keys - for the following tag:

</head>

Step 2. Just above it, copy and paste this code:

<style>
.module h2 {
background-color: #D5D5D5;
border-radius: 20px 0 0 20px;
color: #FFFFFF;
font-family: Verdana;
font-size: 14px;
line-height: 32px;
margin: 0;
padding: 0 0 0 20px;
text-shadow: 2px 1px 1px #222;
}

.module h2 a {
    border-left: 5px solid #ffffff;
    color: #101921;
    float: right;
    font-size: 14px;
    text-decoration: none;
    text-shadow: none;
    padding: 0 10px;
    position: relative;
   -moz-transition: padding 0.1s linear;
   -webkit-transition: padding 0.1s linear;
   -ms-transition: padding 0.1s linear;
   -o-transition: padding 0.1s linear;
}
.module h2 a:hover {
padding: 0 32px;
}

.module h2 a:before, .module h2 a:after {
    content: "";
    height: 0;
    position: absolute;
    top: 50%;
    width: 0;
}
.module h2 a:before {
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ffffff;
    border-top: 8px solid transparent;
    left: -12px;
    margin-top: -8px;
}
.module h2 a:after {
    border-bottom: 6px solid transparent;
    border-top: 6px solid transparent;
    left: -6px;
    margin-top: -6px;
}

.module.blue h2 a {background-color: #A2D5EC;}
.module.blue h2 a:hover {background-color: #C5F0FF;}
.module.blue h2 a:after {border-right: 6px solid #A2D5EC;}
.module.blue h2 a:hover:after {border-right-color: #C5F0FF;}

.module.yellow h2 a {background-color: #FCE98D;}
.module.yellow h2 a:hover {background-color: #FFD700;}
.module.yellow h2 a:after {border-right: 6px solid #FCE98D;}
.module.yellow h2 a:hover:after {border-right-color: #FFD700;}

.module.green h2 a {background-color: #bada55;}
.module.green h2 a:hover {background: #C7E176;}
.module.green h2 a:after {border-right: 6px solid #bada55;}
.module.green h2 a:hover:after {border-right-color: #C7E176;}

.module.red h2 a {background-color: #F0A5B5;}
.module.red h2 a:hover {background-color: #FFC7D2;}
.module.red h2 a:after {border-right: 6px solid #F0A5B5;}
.module.red h2 a:hover:after {border-right-color: #FFC7D2;}
</style>

Step 3. Save the Template.

Screenshot:

Step 4. Now go to Layout and Add a new HTML/JavaScript Gadget with one of the codes below for each of the widget title:

Background in blue:

<div class="module blue">
<h2>Title in <a href="Link URL">Blue</a></h2>
</div>

Background in yellow:

<div class="module yellow">
<h2>Title in <a href="Link URL">Yellow</a></h2>
</div>

Background in green:

<div class="module green">
<h2>Title in <a href="Link URL">Green</a></h2>
</div>

Background in red:

<div class="module red">
<h2>Title in <a href="Link URL">Red</a></h2>
</div>

Note: Change "Title in" text with your widgets title and Blue, Yellow, Green and Red with the text on the right, then add a Link URL to it.

Step 5. After you saved the HTML/Javascript gadgets containing the codes above, drag and drop them just above the widgets you want to show... and Save the Arrangement.

DEMO

You can see how the sidebar titles has been replaced with some cool header bars on this demo blog.

Jumat, 20 September 2013

Display post author date labels and comments with icons below post titles

When there are no comments made to your posts, theres a link that says Be the First to comment! and when there is just one comment it says 1 comment so far. If you want to make your blog more stylish by replacing these texts with some cute small icons along with the default Author Name, Post Date, Labels and Comments... then just follow the next steps:

Steps:

Step 1. From your Blogger Dashboard, click on the Template option, then press the Edit HTML button:

Step 2. Select the "Expand widgets templates" box

Step 3. Search for the below code (press the CTRL + F keys and paste the code in the search box):

<div class=post-header-line-1>

If you cant find the code above, look for this one:

<div class=post-header>

Step 4. Paste the following code below/after the code above:

<font style=background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibni4K6hf9jalTrpsctOB95N96L4vD84kShFA4iijEpNEz5wdf6iTd8u8sc8Zif3y4jXyBvST-UGrhcm3t0iLmoAEX1p8iQ4AYoyDRn8j8mnRozCjWtnQNQt3Ip1f1206xPhAvuhLEr-VT/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;><data:post.author/></font> | <font style=background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEOX8qPRxdB-bJJa7Nj15gWkBLFqjS2bltsTIfxj_sG91dQIghuAN0CldP8qEQlIyIC8O4366-GwhuecYrCCcXkOdZsD_U6IbUj5JzwVgbON3ngcelTGAKkArEdVetRVZnLL_OWMkJVJ1l/s1600/clock_icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;><data:post.timestamp/></font> | <font style=background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjsWSje38aM7O8whHWD5cFgN8uV2bIORF7ySQw4VndJ4NFvZPOf7whpw4iF9mwZDlFaVoEF6i_PKk8xzUc04fsexTAOGvjuscqOAENlcEGcLF8cYCx5TndJ7OJnnhd1QkOiHnBH-ixHsGb/s1600/tag+icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;><b:if cond=data:post.labels>
<b:loop values=data:post.labels var=label>
<a expr:href=data:label.url + "?max-results=8" rel=tag><data:label.name/></a>
<b:if cond=data:label.isLast != "true">|</b:if>
</b:loop>
</b:if></font>
<span class=post-comment-link style=Float:right;>
        <b:if cond=data:blog.pageType != "item">
          <b:if cond=data:post.allowComments>
            <a class=comment-link expr:href=data:post.addCommentUrl expr:onclick=data:post.addCommentOnclick style=background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPTeKPl10dph3Q0JzhsbhXXa9AwFfC4kqUWXNfq_8qsncdTmOOrqQLG89oIOPBxGrMcHoGEDpeV_GWNGZ4P14mQCVMw5GzneIro0tMQkDroNlMjxv6-xY65UvxPr0duvXur5VICQOuXcu4/s1600/comment-icon.png) no-repeat;Padding-left:20px;><b:if cond=data:post.numComments == 0>Be the first to comment!<b:else/> <b:if cond=data:post.numComments == 1><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>
          </b:if>
        </b:if>
      </span>

How to customize:

If you want to change the icons, just replace the URL addresses above colored with:

Red - Author
Green - Date
Blue - Labels
Violet - Comment bubble

... with the URL address of your image.

Step 5. Save template... and youre done!

Selasa, 17 September 2013

Replace Older Newer And Home Blogger links with an image or text

Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts.
The number of the posts on these pages will be the same as the number of the posts on your main page.

What we can do:

A. Change the text of Newer, Older, Home links
B. Place a picture beside them (a small icon, arrow, or whatever...)
C. Add an image instead of the links

So lets start customizing them...

1. Log in to your Blogger Dashboard, go to Template > Edit HTML

2. Click anywhere inside the code area and find - using CTRL + F keys - the following code:

    <b:if cond=data:newerPageUrl>
      <span id=blog-pager-newer-link>
      <a class=blog-pager-newer-link expr:href=data:newerPageUrl expr:id=data:widget.instanceId + "_blog-pager-newer-link" expr:title=data:newerPageTitle><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond=data:olderPageUrl>
      <span id=blog-pager-older-link>
      <a class=blog-pager-older-link expr:href=data:olderPageUrl expr:id=data:widget.instanceId + "_blog-pager-older-link" expr:title=data:olderPageTitle><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class=home-link expr:href=data:blog.homepageUrl><data:homeMsg/></a>

Or find in this code the following fragments which corresponds to each page links

<data:newerPageTitle/> represents Newer Posts link
<data:olderPageTitle/> represents Older Posts link
<data:homeMsg/> represents Home link

Now change these fragments of codes as it follows:

A. Change the text of Newer Posts, Older Posts and Home Links

You need to REPLACE following parts in original code with ANY TEXT you like:

replace <data:newerPageTitle/> with, for example NEXT POST
replace <data:olderPageTitle/> with, for example PREVIOUS POST
replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE

B. Place a picture beside Newer Posts, Older Posts and Home links

Add the below code just at the beginning of each of the colored fragments of codes from step 2.
<img src="URL Address"/>

So it should look like this:

<img src="URL Address"/><data:newerPageTitle/>

Note: Replace URL Address text with the url address of the image you want to appear

C. Replace Older Posts, Newer Posts and Home links with an image/picture

You can place any kind of picture you want All you have to do is use this code for the pic:

<img src="URL ADDRESS"/>

...just replace URL ADDRESS, with the URL of your hosted picture
...and in code, REPLACE the original link code for text with picture code

replace <data:newerPageTitle/> with the pic for newer (next) posts
replace <data:olderPageTitle/> with the pic for older (previous) posts
replace <data:homeMsg/> (only the first one) with the pic for homepage

Screenshot

3. Thats it! Preview and Save the Template.

Sabtu, 14 September 2013

How to add go to top and go to bottom buttons Using jQuery in Blogger

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page there are many articles or when an article has too many comments. These buttons have a fadeIn and fadeOut effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.

Demo

You can see a live demo on my blog, the buttons are located on the right side.

How to put Go Up and Go Down buttons using the jQuery slide effect

Step 1. Go to Template, click on the Edit HTML button

Step 2. Select the "Expand Widget Templates" box

Step 3. Search (using CTRL + F) for the following piece of code:

]]></b:skin>

Step 4. Just above this code, paste this one:

/* Up and Down Buttons with jQuery
----------------------------------------------- */
.button_up{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK_svw4My_S0xeEROPDpvBrM8Z7MQ1dh4RrTg6dq1fYm31XXpDZ3mUHmBif_y-8dbSI9J_hfNMAWY5As7n3FI-O3OtNHC3fgo58sR4XHmrgkMueC6Fvt-LBX2VfioM12V9A4o7DjDMeOg/s16/arrow_up.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Buttons width */
height:20px; /* Buttons height */
bottom:280px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}
.button_down{
padding:7px; /* Distance between the border and the icon */
background-color:white;
border:1px solid #CCC; /* Border Color */
position:fixed;
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilLZ7TGGT3x1mV1h1U09TyTasD_UczNz8N6blvceF8ddjmAaZ77228CaiGYxskIMjz26INCxqckKJ0irRYdJO1DkHf1OymJIOl2CP4k_8WvXcXVCYq6DADcAS64kktNjYVz13bACjC25o/s16/arrow_down.png) no-repeat top left;
background-position:50% 50%;
width:20px; /* Buttons width */
height:20px; /* Buttons height */
bottom:242px; /* Distance from the bottom */
right:5px; /* Change right to left if you want the buttons on the left */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

Note: - in green are some annotations that explains what styles you can modify on their left side.
- You can change the arrows by changing the URLs in blue.
- To change the buttons background color of buttons, change the white text with your color

Step 5. Now search (CTRL + F) for this tag:

</body>

Step 6. And just above it, paste the following code:

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/>

<div class=button_up id=button_up style=display:none;/>
<div class=button_down id=button_down style=display:none;/>

<script>
//<![CDATA[
(function(){var special=jQuery.event.special,uid1=D+(+new Date()),uid2=D+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type=scrollstart;jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind(scroll,handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind(scroll,jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type=scrollstop;jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind(scroll,handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind(scroll,jQuery(this).data(uid2))}}})();

$(function() {
var $elem = $(body);
$(#button_up).fadeIn(slow);
$(#button_down).fadeIn(slow);
$(window).bind(scrollstart, function(){
$(#button_up,#button_down).stop().animate({opacity:0.2});
});
$(window).bind(scrollstop, function(){
$(#button_up,#button_down).stop().animate({opacity:1});
});
$(#button_down).click(
function (e) {
$(html, body).animate({scrollTop: $elem.height()}, 800);
} );
$(#button_up).click(
function (e) {
$(html, body).animate({scrollTop: 0px}, 800);
} );});
//]]>
</script>

Note: In case you want to remove the "Go to top" button, remove the 1st bolded code and to remove the "Go to bottom" button, remove the 2nd one.

Step 7. Finally, Save your Template. Enjoy!

Selasa, 10 September 2013

How to Replace Older Posts and Newer Posts Links with Blogger Post Titles

If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts of the so-called blog pager which helps readers navigate between pages and posts.

If you want to increase your page impressions, one of the ways is to replace the older/newer posts links with the Blogger post titles.

How To Add Post Titles Instead of Older Post/Newer Post Link

Step 1. Log in to Blogger, go to Layout and click on "Add A Gadget" link

Step 2. From the pop-up window, choose "HTML/JavaScript"

Step 3. Paste the following code into the empty field of the HTML/JavaScript gadget:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Note: The line in red is for acquiring jQuery framework. If you have acquired jQuery in your template, then you can just delete this part.

Step 4. Now Save the Widget and drag it under the Blog Posts section.

Step 5. Click on Save arrangement.

Now view your blog and see the older/newer posts link, replaced with your post titles.

For any questions, leave a comment below.

Sabtu, 07 September 2013

How to Customize Blogger Comments By Adding a Background Color and Border

The comments are an essential part of a blog because in them is reflected the readers opinions regarding a post or our blog, so it is important to spend a little of our time to make this part looking more presentable, accessible and neat.

To set in order our comments, it is necessary to make each comment easy to identify, therefore to know from where it begins and to where it ends, otherwise it becomes a jumble of letters of which the reader can run away. Here are some ways to make some order by separating each comment.

- Add a Separator To Blogger Comments
- Add a Divider Below Comments in Blogger
- Fully Customize Your Blogger Comments By Changing The Background Color and Border

The first method is the easiest, and is about how to put a border below our comments, this is to separate each blog comment in a simple but effective way.

How to Add a Separator/Border To Blogger Comments

Step 1. To add a simple separator go to Template > Edit HTML and click on the small arrow on the left of <b:skin>...</b:skin>

Step 2. Click anywhere inside the code area and search using CTRL + F keys, for the following piece of code:

]]></b:skin>

Step 3. Paste the following style just above it:

- If we are using threaded comments (with the reply option):

.comment-block {
border-bottom: 1px solid #000000;
}

.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}

- If we are using previous commenting system (with no reply option)

#comments-block .comment-footer {
border-bottom:1px solid #000000;
}

Note: To change the borders color, replace the bolded color value and to change its thickness, increase/decrease the 1 value.

Step 4. Save the Template.

Instead of a simple border, we can also add a divider/image between our comments.

How to Add a Divider (Image) Between Each Comment in Blogger

blogger comments, blogger tricks, blogger tutorials

Step 1. Go to Template > Edit HTML and search (CTRL + F) for the following piece of code:

]]></b:skin>

Screenshot:

Step 2. Paste the following just above it:

- If we are using threaded comments (with the reply option):

.comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpuRPyiCv8M4ZdxLaVH4zOU1vAhtdjvC_Rf76uheg57D8jiDG5RdUFH5Iz7gvZoRfanoqdCg2TctTWI_SexQDWGAcsJjtZcBkglAlQbEiSsGaQHtRMVpW7zGCHKTDYYTu3fPosjAMVYlJQ/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}

.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}

- If we are using previous commenting system (with no reply function)

#comments-block .comment-footer {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpuRPyiCv8M4ZdxLaVH4zOU1vAhtdjvC_Rf76uheg57D8jiDG5RdUFH5Iz7gvZoRfanoqdCg2TctTWI_SexQDWGAcsJjtZcBkglAlQbEiSsGaQHtRMVpW7zGCHKTDYYTu3fPosjAMVYlJQ/s1600/74.gif);
background-repeat:no-repeat;
background-position:center bottom;
height: 50px;
}

Note: The URL that is in blue represents the image that you can change as you like, just remember that at the height must set the height of an image with 30px more, for instance, if the images height is 50px then the value will be 80px. This is for making sure that the image wont overlap the date of comments. (for threaded comments, increase/decrease the padding 30 value)

Step 3. Save the Template.

But you can still have more styles for each comment, for example adding a background color and a border.

How to Add A Border and A Background Color To Blogger Comments

Step 1. Go to Template > Edit HTML and search for the following piece of code:

]]></b:skin>

Step 2. Paste the following just above it:

- If we are using threaded comments (with the reply option):

.comment-block {
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Border style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.comments .comment-thread.inline-thread {
background-color: #FAFAFA; /* Background color behind the replies */
border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */
}

.comment-content {
padding:2px 10px 10px 10px;
color:#444444; /* Font Color in Comments */
}

.datetime a {
font-style:italic;
font-size:9px;
margin-left: 2px;
}

.comments .comments-content .user a{
color:#1982D1; /* Authors name color */
font-size: 12px; /* Authors name size */
padding-left: 10px;
font-weight:bold;
text-decoration:none;
}

.comments .comment .comment-actions a,.comments .comment .continue a{
display:inline-block;
margin:0 0 10px 10px;
padding:0 15px;
color:#B4B4B7;
text-align:center;
text-decoration:none;
background:#F8F8FB;
border:1px solid #C2C2C5;
border-radius:4px;
height:20px;
line-height:20px;
font-weight:normal;
cursor:pointer;
}

.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}

.comments .comments-content .icon.blog-author {
background-image: none;
margin-left: -10px;
}

.comments .avatar-image-container{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 40px;
max-height: 40px;
border: 1px solid #F2F2F2;
padding: 1px;
}

.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 40px;
height: 40px;
}

Step 3. Save the Template.

- If we are using previous commenting system (with no reply function):

Step 1. Search for this line in your template:

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

Step 2. Then, add the following code just below of it:

<div class=comments-ct>

Step 3. Look a little further down and youll see the </b:loop> code and just above it, add this:

</div>

Step 4. Now find this:

]]></b:skin>

Step 5. And just above of it, add this CSS code:

.comments-ct{
background:#F9F9F9; /* Background Color */
border: 1px solid #f1f1f1; /* Bprder Style */
margin-bottom:20px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

.comment-body {
color:#444444; /* Font Color in Comments */
padding:10px;
}

.comments-ct a {
padding-left: 5px; /* Link color */
color: #4A9BD8;
}

.comment-timestamp a {
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}

(The rounded edges will not work in Internet Explorer with CSS)

In either case, you can change the background color, border, etc.. in parts with annotations in green.

Step 6. Save the Template.

If you need more help, leave a comment below.

Jumat, 16 Agustus 2013

Removing Stored User Name and Password in Mozila Firefox

When you visit a Web site that requires authentication or attempt to connect to remote computers, you are given the option to save your password so that the next time you visit the page or attempt to access a remote resource, you do not have to reenter your password. This feature can be a huge convenience, especially if you access a particular Web site or resource frequently. The downside to this convenience is the potential for horrible security and privacy problems. Essentially, you are taking the password off all of the sites and resources for which you saved a password. Anyone who has physical access to your computer can get in using your username and password, even if they do not know your password.

1. Open Mozila Firefox.

2. Click on Tools -> options -> Security -> Seved Passwords -> Show Passwords -> Yes.

3. The Stored User Names and Passwords window will load, showing you a list of all of the accounts that are saved on your computer.

4. To remove a saved password, select the account on the list and click the Remove
button.

5. Repeat the previous steps for any other accounts that you want to remove.

6. When you are finished, just click Close.

You can also use the Stored User Names and Passwords window to add more user names and passwords to your computer.

Blog Information

Ads 468x60px

Pages

Jumat, 14 Februari 2014

Remember Who Knows When Youve Been Naughty or Nice When You Are Sleeping And When You Are Awake

Minggu, 09 Februari 2014

Showcase and Share Your Memories Photos Video Clips and More

Kamis, 30 Januari 2014

Saving Loops and Samples for DJs

Sabtu, 11 Januari 2014

Javascript allow textbox accept numbers and 2 decimal points only

Minggu, 05 Januari 2014

Cartridges and Filament flow errors

Rabu, 02 Oktober 2013

Fading Box With Newer Older Posts Links and Titles for Blogger

How to Add Navigation Box with Newer & Older Posts on Blogger

Customization:

Senin, 30 September 2013

Upload images and get the URL of the image

Minggu, 22 September 2013

Using the before and after Pseudo Elements on Sidebar Titles

How to Add Adobe-like Headers to Blogger

Jumat, 20 September 2013

Display post author date labels and comments with icons below post titles

Selasa, 17 September 2013

Replace Older Newer And Home Blogger links with an image or text

A. Change the text of Newer Posts, Older Posts and Home Links

B. Place a picture beside Newer Posts, Older Posts and Home links

C. Replace Older Posts, Newer Posts and Home links with an image/picture

Sabtu, 14 September 2013

How to add go to top and go to bottom buttons Using jQuery in Blogger

Selasa, 10 September 2013

How to Replace Older Posts and Newer Posts Links with Blogger Post Titles

Sabtu, 07 September 2013

How to Customize Blogger Comments By Adding a Background Color and Border

Jumat, 16 Agustus 2013

Removing Stored User Name and Password in Mozila Firefox

Postingan Populer

Arsip Blog