tag:blogger.com,1999:blog-38502929606284115772024-02-18T17:42:46.381-08:00Blogspot TutorialsAnonymoushttp://www.blogger.com/profile/00848711628367787076noreply@blogger.comBlogger38125tag:blogger.com,1999:blog-3850292960628411577.post-68042003197993977592015-10-18T23:49:00.001-07:002015-10-18T23:49:45.277-07:00Geo Position for Blogger ( blogspot )<div style="text-align: justify;">
If you have a blog for your local business, wouldn’t it be great if potential customers can easily find your location? This can be made possible with Geo Tagging. Geo tagging is a technique that allows you to tag your website, content, RSS feeds, and other things at certain locations. You will be able to use the latitude and longitude to let your viewers know exactly where you are or where something is. You can use other elements other than longitude and latitude to make it more personalized. Add descriptions, titles, names, and more. There are plenty of different ways that geo tagging can benefit your online presence. We are always looking for more ways to attract visitors and increase our online presence, so using geo tags might be the solution to some of your problems.</div>
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-nBlmDqlvN7B2Mha-sDuwni0EWm8wZem6AkoeDmgXQZCLGtvrHpjI6csyKp3F6MEg8bplHHPRFg3g8FAWd9iXq-clFaNKNHUJoAX06dfmlhnM48YzDaPLhGn0TBYX4kmgEF5EeHd1yIc/s1600/Geo+Position+for+Blogger.png" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" height="141" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-nBlmDqlvN7B2Mha-sDuwni0EWm8wZem6AkoeDmgXQZCLGtvrHpjI6csyKp3F6MEg8bplHHPRFg3g8FAWd9iXq-clFaNKNHUJoAX06dfmlhnM48YzDaPLhGn0TBYX4kmgEF5EeHd1yIc/s320/Geo+Position+for+Blogger.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><i>Source: Google.com for Geo Tagging Position</i></td></tr>
</tbody></table>
<br />
<div style="text-align: justify;">
There are a couple ways to implement geo tagging into your site or content. The easiest way is going to be plugins, the next way will be to use meta tags. Plugins can be extremely simple to install and to operate. An example of a platform that has geo tagging plugins would be blogger. You can easily find a free geo taggin plugin, download it and being using it on your site and content within minutes.
The next option is a little more complicated if you are not aware of how to use HTML. Once you get used to it, it becomes easier. You will need to create a ICBM meta tag and also include the longitude and latitude with any other elements that you want. A quick example of how a basic meta tag looks would be: You can then add in the other elements that will make the tag better for your viewers. A full set of geo tags would look something like the below and should be placed in the header of the website. This means it should be placed between the <head> and </head> tags.</div>
<br />
<div style="text-align: justify;">
Meta Tags are elements used on every page of a website to provide
information related to the website and the individual pages of the
website. </div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Here are some common Meta tags:</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
1) <title>The Title of the Page</title></div>
<div style="text-align: justify;">
2) <meta name=”description” content=”Description of page” /></div>
<div style="text-align: justify;">
3) <meta name=”keywords” content=”Keywords related to page” /></div>
<div style="text-align: justify;">
<span id="more-182868"></span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<u><b>Optional Tags:</b></u></div>
<div style="text-align: justify;">
4) <meta name=”geo.position” content=”<a href="http://geotags.com/geo/geotags2.html#latitude">latitude</a>; <a href="http://geotags.com/geo/geotags2.html#longitude">longitude</a>“><br />
<meta name=”geo.placename” content=”<a href="http://geotags.com/geo/geotags2.html#placename">Place Name</a>“><br />
<meta name=”geo.region” content=”<a href="http://geotags.com/geo/geotags2.html#region">Country Subdivision Code</a>“></div>
<div style="text-align: justify;">
5) <meta name=”robots” content=”noindex, nofollow” /></div>
<div style="text-align: justify;">
6) <meta name=”revisit-after” content=”period”></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Description</b></div>
<ol style="text-align: justify;">
<li>The title tag is for use on every page on the website. This
should describe the content of each unique page and include keywords if
applicable.</li>
<li>The Meta Description tag is a place where you can include a summary of the page contents.</li>
<li>The Meta Keyword tag includes keywords relevant to your website and the specific page.</li>
<li>The Geo Tags are location specific tags which can sit on each
page on your website. These are for use if you have a physical location
that is important for your business, for example a restaurant. They can
also be used for businesses that have stores throughout the country,
with Geo Tags assigned to any corresponding page for each individual
location.</li>
<li>The Robots tag tells the search engine crawlers how to treat the
pages of your website, Noindex will tell the search engines not to index
that page. Nofollow will tell them not to follow any of the links on
the page.</li>
<li>The Revisit After tag tells the search engines how often to re-visit and re-crawl the website.</li>
</ol>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b><br /></b></div>
<div style="text-align: justify;">
<b> </b></div>
<div style="text-align: justify;">
<b>Title, Description and Keywords</b></div>
<div style="text-align: justify;">
<b></b>The Title tag is important and should appear on
every page of the website. This should reflect the content of the page
and include one or two keywords relevant to the page. The search engines
bold the keywords within the Title and Description associated with the
search query within the results. Each page should have individual Title
tags.</div>
<div style="text-align: justify;">
The Meta Description should be descriptive and also relate to what
appears on-page. These should contain keywords where relevant and be
restricted to 155 characters (any additional characters will be cut off
within the search engine results). The Meta Description has no/limited
ranking influence within the results and therefore its job is purely to
encourage a click.</div>
<div style="text-align: justify;">
The Meta Keyword tag typically includes a few keywords relevant to
each page. This tag is now largely redundant and is likely to be ignored
by the search engines. In the early years of SEO, this tag was largely
abused by stuffing in lots of keywords, sometimes unrelated to the page
content. To prevent this practise, search engines began ignoring these
to prevent any manipulation of the rankings. If preferred you can add a
few keywords relevant to each page, alternatively these can be left out
altogether.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Geo Tags</b></div>
<div style="text-align: justify;">
Geo tags are generally used if your website/business is location
specific. A restaurant would be a good example of this as it has a
physical location relevant to the services it is offering. These are
location specific and can be generated using various online tools (<a href="http://www.geo-tag.de/generator/en.html">http://www.geo-tag.de/generator/en.html</a>).
Placed on each page of the website, these let the search engines know
where you’re based and could help improve your search engine rankings
for local related search terms.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Robots Meta Tag</b></div>
<div style="text-align: justify;">
The Robots Meta tag is used to tell the search engines how to treat
certain pages of your website. For example, if you do not want the
search engines to index a certain page of your website, you can use the
Noindex tag. If you don’t want the search engines to follow any of the
links on a specific page of your website, you can use the Nofollow tag.
We recommend adding these carefully as they could prevent the indexation
of important pages of your website if installed on the wrong pages or
across the site.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<b>Revisit-After Tag</b></div>
<div style="text-align: justify;">
The Revisit-After tag is used to tell search engines how often they
should visit and crawl your website. A Blog typically is updated
regularly and would benefit from being crawled more regularly by the
search engines. It is better to avoid the use of this tag and leave it
to the search engines to decide how regularly to crawl your website.
Modern search engines are pretty advanced and are likely to be able to
distinguish a static website from a blog and will automatically crawl a
website more regularly if it has new content posted regularly and is
relatively popular. </div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0United States38.272688535980969 -102.6562512.750654035980968 -143.964844 63.794723035980965 -61.347656tag:blogger.com,1999:blog-3850292960628411577.post-1581744811475039062014-02-09T08:27:00.001-08:002014-02-09T08:48:10.043-08:00Edit HTML Tips on New Blogger Template HTML editor<div id="adsmiddle14007926937055538580"><span style="background-color: rgba(255, 255, 255, 0); -webkit-text-size-adjust: auto;">When you want to search for a code in the HTML editor, click inside the editor and press CTRL + F on your keyboard, then enter what you want to find in the search box that appears inside the editor.</span></div><div id="adsmiddle24007926937055538580"><span style="-webkit-text-size-adjust: auto; background-color: rgba(255, 255, 255, 0);"><br></span><div class="separator" style="text-align: start; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDv5ZkemRomKdbCLFt26OhFov5sKoc0Ik-6QaGgyAIOQ-WOGsBWO6WXc7am_lvWNt7RD-8BErlvSBAL1Z8sWX0J5NDdHPA-KG-SzXnZ1ZrpCS0m33HIUhuMGd2BHEzxsVdNl0D7F68d5p9/s1600/how-to-use-new-blogger-html-editor-with-search.png" imageanchor="1" style="margin: 0px 1em; padding: 0px; list-style: none; text-decoration: none; border: none; outline: none; -webkit-text-size-adjust: auto; background-color: rgba(255, 255, 255, 0);"><font color="#000000"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDv5ZkemRomKdbCLFt26OhFov5sKoc0Ik-6QaGgyAIOQ-WOGsBWO6WXc7am_lvWNt7RD-8BErlvSBAL1Z8sWX0J5NDdHPA-KG-SzXnZ1ZrpCS0m33HIUhuMGd2BHEzxsVdNl0D7F68d5p9/s1600/how-to-use-new-blogger-html-editor-with-search.png" height="289" width="640" style="margin: 0px; padding: 0px; list-style: none; border: none; outline: none; max-width: 600px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;" id="id_79cc_d217_ebaf_92ab"></font></a></div><span style="-webkit-text-size-adjust: auto; background-color: rgba(255, 255, 255, 0);"><br>Finally, hit the "ENTER" button on your keyboard and it should take you to the requested code.<br><br>If you want to be taken to the section of code that belongs to a particular widget, just click on the <b>Jump To Widget </b>button at the top of the editor, choose the widget's name from <span id="IL_AD4" class="IL_AD" style="margin: 0px; list-style: none; border-top-style: none; border-right-style: none; border-left-style: none; outline: none; position: static; padding: 0px 0px 1px !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-bottom-color: rgb(63, 125, 35) !important; background-image: none !important; background-attachment: scroll !important; cursor: pointer !important; display: inline !important; float: none !important; background-position: 0% 50% !important;">the list</span> and it will take you directly to that portion of code. <br><br></span><div class="separator" style="text-align: start; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrper1U5Il02F02G7k45qcllhTFbjk85tWtvZx42u1nXlkZa_p16a_tjEjavjlAGsjZHlMeGCTpwppB5Pz6UCiHvjaZw0jpTqiAGfiAQ6MYGCxfxxF_4a5dDV2GaRPTb5qC50KZXZ3OI1m/s1600/jump-to-widget-blogger-template-new-edit-html.png" imageanchor="1" style="margin: 0px 1em; padding: 0px; list-style: none; text-decoration: none; border: none; outline: none; -webkit-text-size-adjust: auto; background-color: rgba(255, 255, 255, 0);"><font color="#000000"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrper1U5Il02F02G7k45qcllhTFbjk85tWtvZx42u1nXlkZa_p16a_tjEjavjlAGsjZHlMeGCTpwppB5Pz6UCiHvjaZw0jpTqiAGfiAQ6MYGCxfxxF_4a5dDV2GaRPTb5qC50KZXZ3OI1m/s1600/jump-to-widget-blogger-template-new-edit-html.png" style="margin: 0px; padding: 0px; list-style: none; border: none; outline: none; max-width: 600px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;" id="id_5d3d_b7ac_8d53_e677"></font></a></div><span style="-webkit-text-size-adjust: auto; background-color: rgba(255, 255, 255, 0);"><br>The CSS rules can be found folded at the top of the template, between <span style="margin: 0px; padding: 0px; list-style: none; border: none; outline: none;"><b:skin>...</b:skin></span> and <span style="margin: 0px; padding: 0px; list-style: none; border: none; outline: none;"><b:template-skin>...</b:template-skin> </span>tags. To expand them, you have to click on the sideways arrow next to the line number<span style="margin: 0px; padding: 0px; list-style: none; border: none; outline: none;">.</span><br><br></span><div class="separator" style="text-align: start; clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSLviEwUyiRmM2Czy6VDlSb0beRpyhoQ8e99KbRn-7ZHcGkwRxIqu0PDO_qaaMVzSGcVJ43AN-4RDk4wBBrSacnF8nJCJ-r95Tm9ceDha5HR3LTR6RRJOxMhWaqqfKwua8ab78yn7hhui/s1600/css-rules-b-skin-blogger-new-template-editor-help.png" imageanchor="1" style="margin: 0px 1em; padding: 0px; list-style: none; text-decoration: none; border: none; outline: none; -webkit-text-size-adjust: auto; background-color: rgba(255, 255, 255, 0);"><font color="#000000"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSLviEwUyiRmM2Czy6VDlSb0beRpyhoQ8e99KbRn-7ZHcGkwRxIqu0PDO_qaaMVzSGcVJ43AN-4RDk4wBBrSacnF8nJCJ-r95Tm9ceDha5HR3LTR6RRJOxMhWaqqfKwua8ab78yn7hhui/s1600/css-rules-b-skin-blogger-new-template-editor-help.png" style="margin: 0px; padding: 0px; list-style: none; border: none; outline: none; max-width: 600px; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px;" id="id_dfc8_68c2_c414_fcf0"></font></a></div><span style="-webkit-text-size-adjust: auto; background-color: rgba(255, 255, 255, 0);"><br>Another great functionality is that now we can <b>Preview Template</b> in the same window without needing to leave <span id="IL_AD6" class="IL_AD" style="margin: 0px; list-style: none; border-top-style: none; border-right-style: none; border-left-style: none; outline: none; position: static; padding: 0px 0px 1px !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; border-bottom-color: rgb(63, 125, 35) !important; background-image: none !important; background-attachment: scroll !important; cursor: pointer !important; display: inline !important; float: none !important; background-position: 0% 50% !important;">the page</span> and we can easily go back to customize our template by clicking on the <b>Edit Template</b> button.<br><br>Finally, <b>Format template</b> re-orders the code, adding indentation automatically.<br><br>As always, we must use the <b>Save </b>button for the changes to take effect or we can <b>Revert </b>the changes.<br><br>And that's it. With a bit of effort, we can easily familiarize with this new HTML editor. Surely as usual and even reasonable to be something inherent in the human condition, this change does not appeal to many. Same with the Lightbox for images, the new template designer, the new desktop and other new things that have been added in the past.</span></div>BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com1tag:blogger.com,1999:blog-3850292960628411577.post-28770465221639493012014-02-08T00:26:00.001-08:002014-02-09T08:46:27.331-08:00Edit HTML for Create an Index for Your Blogspot<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOzF3blRgRu1GupWLTeas6nqHxyC5S9JfMIIyiZHRnvDBJKG0bmkk1weAytSEQ5yDFupGd-dMskj0IxQNNJK9rMocFxAPrI8JjUJ_kUJ0ypDbBsFlM0Ib6qAfaQ6lFZCROvhIJfntTxtej/s200/SixSistersStuff.jpg" imageanchor="1" style="clear: left; display: inline !important; float: left; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOzF3blRgRu1GupWLTeas6nqHxyC5S9JfMIIyiZHRnvDBJKG0bmkk1weAytSEQ5yDFupGd-dMskj0IxQNNJK9rMocFxAPrI8JjUJ_kUJ0ypDbBsFlM0Ib6qAfaQ6lFZCROvhIJfntTxtej/s200/SixSistersStuff.jpg" height="198" width="200" /></a><br />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">Before you try out any tutorial on this blog it's a really good idea to </span>BACK UP YOUR BLOG<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">!</span><br />
<br />
<div style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">
The first thing to do is to work out the categories that you want to divide your content into.<br />
<br />
We need to create a marker in the page for each category. In the example below, I have created markers for three of my learning through play categories: Science, Maths and Imagination.<br />
<br />
The <span style="background-color: #ffe599;">yellow </span>code is the URL of the page or post where you want the index to appear. Notice that you need to add a hash - # - after the URL.<br />
<br />
The <span style="background-color: #6fa8dc;">blue </span>code is the category as you want it to be displayed on the page.<br />
<br />
The <span style="background-color: #93c47d;">green </span>code is the name of category you want to add. The name won't be displayed on the page but it will be added to the URL so it's best to keep it as close as possible to the category but also short and sweet.<br />
<br />
The <span style="background-color: #c27ba0;">purple </span>code just says to display these categories as sub-headings.<br />
<br />
<div style="border: 1px dotted rgb(169, 22, 0); box-shadow: rgb(136, 136, 136) 2px 2px 1px; padding: 7px;">
<span style="background-color: #c27ba0;"><h3></span><br />
<a href="<span style="background-color: #ffe599;">http://edit-html.blogspot.com/p/time-to-play.html#</span>" name="<span style="background-color: #93c47d;">Science</span>"><span style="background-color: #6fa8dc;">Science</span></a><br />
<span style="background-color: #c27ba0;"></h3></span><br />
<br />
<span style="background-color: #c27ba0;"><h3></span><br />
<a href="<span style="background-color: #ffe599;">http://edit-html.blogspot.com/p/time-to-play.html#</span>" name="<span style="background-color: #93c47d;">Maths</span>"><span style="background-color: #6fa8dc;">Maths</span></a><br />
<span style="background-color: #c27ba0;"></h3></span><br />
<br />
<span style="background-color: #c27ba0;"><h3></span><br />
<a href="<span style="background-color: #ffe599;">http://edit-html.blogspot.comk/p/time-to-play.html#</span>"name="<span style="background-color: #93c47d;">Imagination</span>"><span style="background-color: #6fa8dc;">Imagination</span></a><br />
<span style="background-color: #c27ba0;"></h3></span></div>
<br />
<br />
<h3 style="margin: 0px; position: relative;">
Create the Index</h3>
<div>
You can now create the index using the categories you have defined. This is very simple - we are just going to create text links to the categories. </div>
<div>
<br /></div>
<div>
The <span style="background-color: #ea9999;">pink</span> code is the URL of your page, plus a hash sign, plus the name of the category. The<span style="background-color: #f6b26b;">orange</span> code is the value that you want to be displayed in the index - it doesn't have to be the same as the category that you defined in blue above, but it makes sense if it is.</div>
<div>
<br /></div>
<div style="border: 1px dotted rgb(169, 22, 0); box-shadow: rgb(136, 136, 136) 2px 2px 1px; padding: 7px;">
<div>
<a href="<span style="background-color: #ea9999;">http://edit-html.blogspot.com/p/time-to-play.html#Science</span>"><span style="background-color: #f6b26b;">Science</span></a><span style="background-color: #cccccc;">| </span></div>
<div>
<a href="<span style="background-color: #ea9999;">http://edit-html.blogspot.com/p/time-to-play.html#Maths</span>"><span style="background-color: #f6b26b;">Maths</span></a><span style="background-color: #cccccc;"> | </span></div>
<div>
<a href="<span style="background-color: #ea9999;">http://edit-html.blogspot.com/p/time-to-play.html#Imagination</span>"><span style="background-color: #f6b26b;">Imagination</span></a></div>
</div>
<br />
Although, we created the categories first we actually want the code for the index to be right at the top of the page.<br />
<br />
<br />
<h3 style="margin: 0px; position: relative;">
Add the Post Links to the Categories</h3>
We are now going to add links to individual posts into the categories.<br />
<br />
In the example below, I have used text links as on Six Sisters Stuff but you could also use image links as I do in my index pages. If you're not sure how to create image links, check out this tutorial how to add buttons to your blog.<br />
<br />
<div style="border: 1px dotted rgb(169, 22, 0); box-shadow: rgb(136, 136, 136) 2px 2px 1px; padding: 7px;">
<span style="background-color: #c27ba0;"><h3></span><br />
<a href="<span style="background-color: #ffe599;">http://edit-html.blogspot.com/p/time-to-play.html#</span>" name="<span style="background-color: #93c47d;">Science</span>"><span style="background-color: #6fa8dc;">Science</span></a><br />
<span style="background-color: #c27ba0;"></h3></span><br />
<a href="http://edit-html.blogspot.com/2013/02/does-it-always-sink.html">Sink and Float Experiments</a><br /><br />
<a href="http://edit-html.blogspot.comk/2013/01/20-early-years-static-magnetism.html">Static and Magnet Experiments</a><br /><br />
<a href="http://edit-html.blogspot.com/2013/03/10-experiments-that-go-fizz.html">Fizzy Potions</a> <br /> <br /><br />
<br />
<br />
<span style="background-color: #c27ba0;"><h3></span><br />
<a href="<span style="background-color: #ffe599;">http://edit-html.blogspot.com/p/time-to-play.html#</span>" name="<span style="background-color: #93c47d;">Maths</span>"><span style="background-color: #6fa8dc;">Maths</span></a><br />
<span style="background-color: #c27ba0;"></h3></span><br />
<a href="http://edit-html.blogspot.com/2013/01/how-many-birds-are-there-in-garden.html">Learning Simple Maths with Charts</a> <br /><br />
<a href="http://edit-html.blogspot.comk/2013/02/a-question-for-you-which-of-five.html">Capacity and Volume</a> <br /><br />
<a href="http://edit-html.blogspot.com/2013/02/my-mums-maths-manifesto.html">A Maths Manifesto</a> <br /><br /><br />
<br />
<br />
<span style="background-color: #c27ba0;"><h3></span><br />
<a href="<span style="background-color: #ffe599;">http://edit-html.blogspot.com/time-to-play.html#</span>"name="<span style="background-color: #93c47d;">Imagination</span>"><span style="background-color: #6fa8dc;">Imagination</span></a><br />
<span style="background-color: #c27ba0;"></h3></span><br />
<a href="http://edit-html.blogspot.com/2013/03/5-dressing-up-ideas-you-can-make.html">Dressing Up Clothes</a> <br /><br />
<a href="http://edit-htmlblogspot.com/2013/02/i-want-one-like-you-mummy.html">Make Believe Toys</a> <br /></div>
</div>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-GNho7saGFsg%2FUXAJteIr07I%2FAAAAAAAABZg%2FplFks9jTrbA%2Fs200%2FSixSistersStuff.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOzF3blRgRu1GupWLTeas6nqHxyC5S9JfMIIyiZHRnvDBJKG0bmkk1weAytSEQ5yDFupGd-dMskj0IxQNNJK9rMocFxAPrI8JjUJ_kUJ0ypDbBsFlM0Ib6qAfaQ6lFZCROvhIJfntTxtej/s200/SixSistersStuff.jpg" -->BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com1tag:blogger.com,1999:blog-3850292960628411577.post-30869666324243138242014-02-08T00:16:00.002-08:002014-02-09T08:46:27.336-08:00Configure Your Pages Menu in Blogspot<br />
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">Keep static information such as galleries, indices, about information, disclosure statements and just about anything else you want readers to access easily, separate from your posts.</span></div>
</div>
<br />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik4nzaJssCv2T0areq99oAc3f5QPPB-XwbFF5oLAcZtufwpL_-QO0hS2vA27rYWagzOIIo77xA4kA5_aJut48vHmi2aU1c8DMYrmAfw5G6aPsBFFIg1TkWVoZK63LYbycKX3hEnWkcps65/s320/HideMenuPages.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik4nzaJssCv2T0areq99oAc3f5QPPB-XwbFF5oLAcZtufwpL_-QO0hS2vA27rYWagzOIIo77xA4kA5_aJut48vHmi2aU1c8DMYrmAfw5G6aPsBFFIg1TkWVoZK63LYbycKX3hEnWkcps65/s320/HideMenuPages.jpg" height="200" width="200" /></a><span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">The only problem is that by default Blogger puts all the pages in the main menu which can make it very cluttered.</span><br />
<a href="https://www.blogger.com/blogger.g?blogID=3850292960628411577" name="more" style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;"></a><br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">It is much better to be able to hide some of the pages from the main menu and access them from for example, a </span>blog index<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">, </span>sub-menu<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;"> or sidebar </span>button<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">.</span><br />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">When you create a page there isn't any obvious way on the page itself to prevent it being displayed in your main menu, but it is actually super easy to configure the Blogger menu to do this.</span><br />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">1. Go to Layout within Blogger.</span><br />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">2. On the Pages gadget near the top of your layout click the Edit link.</span><br />
<br />
<div class="separator" style="background-color: white; clear: both; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7gQOFid4zu3d7bOfGYdXWAYl0-vKQZc-QvTgnwE7zbDo9BcyWFs27c5r_BACSv2c6ocICklsJHh1Hqdz_omtkn1CbMGxQTtgSUBw9QX3G-J2Y1X-axCUNRWdFRBFG3Rlrkqlz0Ntxao_U/s1600/Layout.png" imageanchor="1" style="color: #a91a00; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7gQOFid4zu3d7bOfGYdXWAYl0-vKQZc-QvTgnwE7zbDo9BcyWFs27c5r_BACSv2c6ocICklsJHh1Hqdz_omtkn1CbMGxQTtgSUBw9QX3G-J2Y1X-axCUNRWdFRBFG3Rlrkqlz0Ntxao_U/s400/Layout.png" height="183" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 5px; position: relative;" width="400" /></a></div>
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">3. A list of all your pages will be displayed.</span><br />
<br />
<div class="separator" style="background-color: white; clear: both; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7cAaxAQx3WFv0DYwa-lD3G86rxPjw-Acvd32XEYP833WzRdKzraehRtfYZIpH2IpE5ZG-ebbSyZotmvFi73ulXrfGEqWgeqeiCRbIC67SHcf_PFKiMSm41lhNbyT77L9cyN1pr3rrg_-/s1600/Pages.png" imageanchor="1" style="color: #a91a00; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7cAaxAQx3WFv0DYwa-lD3G86rxPjw-Acvd32XEYP833WzRdKzraehRtfYZIpH2IpE5ZG-ebbSyZotmvFi73ulXrfGEqWgeqeiCRbIC67SHcf_PFKiMSm41lhNbyT77L9cyN1pr3rrg_-/s320/Pages.png" height="320" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 5px; position: relative;" width="205" /></a></div>
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">4. Un-check any that you want to be public but don't want in the main menu & click Save.</span><br />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">5. Go to Pages within Blogger.</span><br />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">6. Click on the View link for the page you want to link to and copy the URL.</span><br />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">7. You can now create a link to this URL in for example ..</span><br />
<br />
<ul style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;">any blog post or other page using the standard blogger Link tool</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">an image or <a href="http://mumsmakelists.blogspot.co.uk/2013/03/mommy-hacks-1-how-to-add-buttons-to.html" style="color: #a91a00; text-decoration: none;">button</a> on your side bar</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">a <a href="http://mumsmakelists.blogspot.co.uk/2013/04/create-blog-index.html" style="color: #a91a00; text-decoration: none;">blog index</a></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">a <a href="http://mumsmakelists.blogspot.co.uk/2013/04/link-to-a-series-of-posts.html" style="color: #a91a00; text-decoration: none;">mini-menu</a> in your side bar</li>
</ul>
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;">That's it ... super simple!</span><br />
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<i style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;"><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Example</span></i><br />
<span class="Apple-style-span" style="background-color: white; color: #666666; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; line-height: 18.479999542236328px;">To see an example of how hidden pages can be used, check out the Blogging page in my main menu.</span><br />
<span class="Apple-style-span" style="background-color: white; color: #666666; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; line-height: 18.479999542236328px;"><br /></span><span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;"></span><span class="Apple-style-span" style="background-color: white; color: #666666; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; line-height: 18.479999542236328px;">I have shared a large number of different posts and resources for other Bloggers including ...</span><br />
<br />
<ul style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><i><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Tips on blog design & growing your blog</span></i></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><i><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Simple edit html that show bloggers how to code & configure their blog</span></i></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><i><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">An enormous link party directory</span></i></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><i><span class="Apple-style-span" style="font-family: Georgia, 'Times New Roman', serif;">Brilliant blogger directories that list great bloggers in particular niches & regions</span></i></li>
</ul>
<br style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;" />
<span class="Apple-style-span" style="background-color: white; color: #666666; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; line-height: 18.479999542236328px;">I don't want separate pages for each of these in the menu but if I include all the links in a single page, it becomes enormous and slow to load. </span><br />
<span class="Apple-style-span" style="background-color: white; color: #666666; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; line-height: 18.479999542236328px;"><br /></span><span style="background-color: white; color: #666666; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px;"></span><span class="Apple-style-span" style="background-color: white; color: #666666; font-family: Georgia, 'Times New Roman', serif; font-size: 13px; line-height: 18.479999542236328px;">So I've put the link party directory and brilliant blogger directories in separate hidden pages that I link to from my main blogging page. </span>
<!-- Blogger automated replacement: "https://images-blogger-opensocial.googleusercontent.com/gadgets/proxy?url=http%3A%2F%2F3.bp.blogspot.com%2F-h-vRdvEisd0%2FUeneBOYUfuI%2FAAAAAAAACkg%2F-O76JTyBAYM%2Fs320%2FHideMenuPages.jpg&container=blogger&gadget=a&rewriteMime=image%2F*" with "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik4nzaJssCv2T0areq99oAc3f5QPPB-XwbFF5oLAcZtufwpL_-QO0hS2vA27rYWagzOIIo77xA4kA5_aJut48vHmi2aU1c8DMYrmAfw5G6aPsBFFIg1TkWVoZK63LYbycKX3hEnWkcps65/s320/HideMenuPages.jpg" -->BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-73978162416603235062014-02-08T00:12:00.002-08:002014-02-09T08:46:27.403-08:00Back-up Your Blogspot Before Edit HTML<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-color: white; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; color: #666666; float: left; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 13px; line-height: 18.479999542236328px; margin-right: 1em; padding: 5px; position: relative; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizFPVPbn4ii_p8zGCXyhTJBWXyCEVqQJvAX360ffP-emLc_4wlkM4pjYScGneVaTVBIiamHr4t8IQQUngmnpwPkYZa8gF1oeDOuMETGuLKKnUVlf_zYcsvhqGq6H5nUH3if4kOJIySznrD/s1600/Backedup.jpg" imageanchor="1" style="clear: left; color: black; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizFPVPbn4ii_p8zGCXyhTJBWXyCEVqQJvAX360ffP-emLc_4wlkM4pjYScGneVaTVBIiamHr4t8IQQUngmnpwPkYZa8gF1oeDOuMETGuLKKnUVlf_zYcsvhqGq6H5nUH3if4kOJIySznrD/s320/Backedup.jpg" height="320" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px; background-color: transparent; border: none; box-shadow: rgba(0, 0, 0, 0.0980392) 0px 0px 0px; padding: 0px; position: relative;" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="font-size: 11px; text-align: right;"><span style="font-size: xx-small;">Copyright <a href="http://www.flickr.com/photos/83633410@N07/7658225516/in/photostream/" style="color: #a91a00; text-decoration: none;">CollegeDegrees360</a> 2012 - Creative Commons</span></td></tr>
</tbody></table>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 18px;">I do mean to back up whenever I post or tweak the template but somehow. I get distracted by other stuff.</span></div>
<br />
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18px;">Which is unbelievably stupid as:</span></span></div>
<span style="background-color: white;">
</span><br />
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 18px;">1. Risk = ENORMOUS and </span></div>
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;"><span style="line-height: 18px;">2. Effort = TINY</span><span style="line-height: 18px;">!</span></span></span></div>
<br />
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 18px;">To make it as easier to do quickly, I have written out instructions for myself on how to backup in Blogger. </span></div>
<span style="background-color: white;">
</span><br />
<br />
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18px;">I thought others might find them helpful so am sharing them here.</span></span></div>
<span style="background-color: white;">
</span><br />
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; line-height: 18.479999542236328px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">1. Back-up Content</strong></div>
<br />
<ul style="border: 0px; font-style: inherit; line-height: 17px; list-style-image: initial; list-style-position: outside; margin: 8px 0px 4px; outline: 0px; padding: 0px 0px 0px 40px; vertical-align: baseline;">
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">In Blogger click on Settings and then Other</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">At the top of the page click Export Blog</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">In pop up window click Download Blog</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">A file in the format blog-MM-DD-YYYY.xml will be created in downloads directory</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">When download complete click Close on pop up window</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">Move the file to a directory specifically for your back-ups</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">Copy the file to a secure remote storage e.g. Google Drive or Dropbox</span></span></li>
</ul>
<div style="border: 0px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; word-break: normal; word-wrap: break-word;">
<br />
<span style="background-color: white; border: 0px; font-family: inherit; font-style: inherit; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white; border: 0px; font-family: inherit; font-style: inherit; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;"><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">2. Back-up Template and Gadgets</strong></span></div>
<span style="background-color: white; border: 0px; font-family: inherit; font-style: inherit; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: pre-wrap;">
</span><br />
<div style="line-height: 18px; text-align: justify;">
<span style="background-color: white; font-family: inherit; white-space: pre-wrap;">(You only need to do this if you've changed the template, layout or gadgets in any way)</span></div>
<ul style="border: 0px; font-style: inherit; line-height: 17px; list-style-image: initial; list-style-position: outside; margin: 8px 0px 4px; outline: 0px; padding: 0px 0px 0px 40px; vertical-align: baseline;">
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;"><strong style="border: 0px; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"> </strong>In Blogger click on Template</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">At top right click on Backup / Restore</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">In pop up window click Download full template</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">A file in the format template-[uniquenumber].xml be created in the downloads directory</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">When download complete click Close on pop up window</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">Rename the file to include the date</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">Move the file to a directory specifically for your back-ups</span></span></li>
<li style="border: 0px; line-height: 18px; margin: 0px; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; word-break: normal; word-wrap: break-word;"><span style="background-color: white;"><span style="font-family: inherit;">Copy the file to a secure remote storage e.g. Google Drive or Dropbox</span></span></li>
</ul>
</div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-60288308032554500232014-02-08T00:08:00.000-08:002014-02-08T00:08:14.933-08:00Customize Your Jump Break in Blogspot<br />
<div style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;">
<span style="background-color: white;"></span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoCyjm4P6Df29XnyCU_LL5F2J99mXMx8BY7obJsp__vfPugi2aRvsgNM84RYijVMey8CwQHw3qHNnrRwKFivwmMKmlqttgiWjUHfAXcSqWt-1R_aXZT1WOvtvdDh3uYXXpp3alzqNODxYR/s320/CustomizeJumpBreaks.jpg" height="320" width="320" /></div>
<br />
<span style="background-color: white; font-family: inherit; line-height: 18.479999542236328px; text-align: justify;">Jump Breaks allow you to display snippets of lots of blog posts on your home page.</span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span>
<br />
<div style="font-family: inherit; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;">They're great because they give readers a good overview of all your most recent posts. Plus, they are really easy to insert via the Blogger tool bar. Just put your cursor where you want the break and click the icon circled red below.</span></span></div>
<span style="background-color: white;">
</span>
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoJ1xCUKUi5DpHmJ6Wi59ZgYLbpgxOG_VV6jD1hY_73OwLfD2c9BSNZ9hH74V_zhDLdF-zhCwb8svJWZr8qWw1dOH70g0ZBXLN9gJiU8JKwVSY2QGOenSgpJROVdg4jWQy4XYAH9p6S0Ap/s1600/CustomizeJumpBreak1.jpg" imageanchor="1" style="clear: right; float: right; line-height: 18.479999542236328px; margin-bottom: 1em; margin-left: 1em; text-align: justify; text-decoration: none;"><span style="background-color: white; color: black; font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoJ1xCUKUi5DpHmJ6Wi59ZgYLbpgxOG_VV6jD1hY_73OwLfD2c9BSNZ9hH74V_zhDLdF-zhCwb8svJWZr8qWw1dOH70g0ZBXLN9gJiU8JKwVSY2QGOenSgpJROVdg4jWQy4XYAH9p6S0Ap/s200/CustomizeJumpBreak1.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 5px; position: relative;" width="220" /></span></a><span style="background-color: white;"><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<span style="text-align: center;"><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
</span><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<span style="font-family: inherit; line-height: 18.479999542236328px; text-align: center;"><div style="text-align: justify;">
<span style="font-family: inherit;">The only problem is they are displayed in your default link font so they don't jump out, grab readers around the collar and shout </span><i style="font-family: inherit;">"come and read this post".</i></div>
</span><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="line-height: 18.479999542236328px;">For this </span></span><span style="line-height: 18.479999542236328px;">Customize Your Jump Break in Blogspot </span><span style="font-family: inherit;"><span style="line-height: 18.479999542236328px;">you are going to edit your blog template so </span></span><b style="font-family: inherit; line-height: 18.479999542236328px;">please back-up</b><span style="font-family: inherit; line-height: 18.479999542236328px;"> first.</span></div>
<a href="https://www.blogger.com/blogger.g?blogID=3850292960628411577" name="more"><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
</a><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
</span><br />
<h2 style="margin: 0px 0px 1em; position: relative; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; font-size: small;">Change the Default Jump Break Text</span></span></h2>
<br />
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 18.479999542236328px;">The first thing to do is to change the default jump break text.</span><span style="background-color: white; font-family: inherit; line-height: 18.479999542236328px;"> </span></div>
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span>
<br />
<div style="font-family: inherit; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;">In Blogger layout click on the Edit link at the bottom right of the Blog Posts box as below.</span></span></div>
<span style="background-color: white;">
</span>
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span><br />
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvE_E-kLs8bm4KpHMx4aLk23GRZ7jMID8x9BfYokTQPymmj_kD8njpUvUSfNwZK3i3DCyDQChu59IHtrJMBF3rMHqXnj4FawG6cJI0t4FzaDhNG9yew4ZclyFDjaqXyMT-aL1-G4Ik4KmJ/s1600/CustomizeJumpBreak2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="background-color: white; color: black; font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvE_E-kLs8bm4KpHMx4aLk23GRZ7jMID8x9BfYokTQPymmj_kD8njpUvUSfNwZK3i3DCyDQChu59IHtrJMBF3rMHqXnj4FawG6cJI0t4FzaDhNG9yew4ZclyFDjaqXyMT-aL1-G4Ik4KmJ/s400/CustomizeJumpBreak2.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 5px; position: relative;" width="500" /></span></a></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;">A pop-up window will be displayed. The second field down is your jump break text.</span></span></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;">Write whatever you like in the field and click the Save button at the bottom of the pop-up.</span></span></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwRqLnCO_Z0SkIPE1LtT5UtzSU2vsagSItOH4Eylqhp45vF10VJyItN-d9zOFMcpeBaA6M-nKAlmh9BuJ-4Ti1jV3NSKZVG5_Fc0nyoi_Z9sLa_m6a1pWI3GJliVkFyAGaKbJGLmRQ1WCj/s1600/CustomizeJumpBreak3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="background-color: white; color: black; font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwRqLnCO_Z0SkIPE1LtT5UtzSU2vsagSItOH4Eylqhp45vF10VJyItN-d9zOFMcpeBaA6M-nKAlmh9BuJ-4Ti1jV3NSKZVG5_Fc0nyoi_Z9sLa_m6a1pWI3GJliVkFyAGaKbJGLmRQ1WCj/s320/CustomizeJumpBreak3.jpg" height="225" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 5px; position: relative;" width="320" /></span></a></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<br />
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 18.479999542236328px;">All your jump breaks will now be displayed with the new text - fabulous!</span></div>
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span>
<br />
<div style="font-family: inherit; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;">But ... the text still doesn't jump up and grab readers so now we want to style it.</span></span></div>
<span style="background-color: white;">
</span>
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
<div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
</span><br />
<h2 style="margin: 0px 0px 1em; position: relative; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; font-size: small;">Style Jump Break Text</span></span></h2>
<div>
<div style="line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white; font-family: inherit;">We are now going to edit your blog template, so if you haven't already please</span><span style="background-color: white; font-family: inherit;"> </span>back up<span style="background-color: white; font-family: inherit;">!</span></div>
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
<span style="font-family: inherit; line-height: 18.479999542236328px;"></span></span>
<br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;"><span style="font-family: inherit;">1. Now copy the code below into note pad so you can edit it safely.</span></span></span></div>
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;">
</span></span></div>
<div>
<div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<span style="background-color: white;"></span><br />
<div style="line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;">The first bit of code tells the jump break to display on the right hand side - because we read top left to bottom right, this is the best place to put it for optimum impact.</span></span></div>
<span style="background-color: white;">
</span>
<br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
<span style="font-family: inherit; line-height: 18.479999542236328px;"></span></span>
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;"><span style="font-family: inherit;">The next bit of code defines how big we want the text to be (font-size), what colour we want it to be (color), which font we want it in (font-family) and that we want it to be in bold (font-weight). The final bit of code - .jump-link a:hover - defines the colour to be displayed when a reader hovers over the link.</span></span></span></div>
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;">
</span><div style="text-align: justify;">
<br /></div>
<span style="font-family: inherit; line-height: 18.479999542236328px;"><div style="text-align: justify;">
<span style="font-family: inherit;">Decide the font-size, color and font-family you want and change the values in note pad ...</span></div>
</span><div style="text-align: justify;">
<br /></div>
</span></div>
<div style="border: 1px dotted rgb(169, 22, 0); box-shadow: rgb(136, 136, 136) 2px 2px 1px; padding: 7px;">
<div style="line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white; font-family: inherit;">.jump-link { float: right; }</span></div>
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span>
<br />
<div style="font-family: inherit; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;">.jump-link a, .jump-link a:visited {</span></span></div>
<span style="background-color: white;">
</span>
<div style="font-family: inherit; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;">font-size:15px;</span></span></div>
<span style="background-color: white;">
<div style="font-family: inherit; line-height: 18.479999542236328px; text-align: justify;">
<span style="font-family: inherit;">color: #a91a00;</span></div>
<div style="font-family: inherit; line-height: 18.479999542236328px; text-align: justify;">
<span style="font-family: inherit;">font-family: "Georgia";</span></div>
<div style="font-family: inherit; line-height: 18.479999542236328px; text-align: justify;">
<span style="font-family: inherit;">font-weight: Bold; }</span></div>
<div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<span style="font-family: inherit; line-height: 18.479999542236328px;"><div style="text-align: justify;">
<span style="font-family: inherit;">.jump-link a:hover { color: #000000; }</span></div>
</span></span></div>
<div>
<div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<span style="background-color: white;"></span><br />
<div style="line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;">Now the bit where you MUST be careful.</span><span style="font-family: inherit;"> </span></span></div>
<span style="background-color: white;">
</span>
<br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
<span style="font-family: inherit; line-height: 18.479999542236328px;"></span></span>
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;"><span style="font-family: inherit;">2. Click on the </span><b style="font-family: inherit;">Template </b><span style="font-family: inherit;">link and then on the </span><b style="font-family: inherit;">Edit HTML</b><span style="font-family: inherit;"> button highlighted below.</span></span></span></div>
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;">
</span><b><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
</b><div style="text-align: justify;">
<br /></div>
</span><br />
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgma-8GLb1R4w1uBI7TbeRk_8r0orl-WUDdqS6SnLG6h_K5bUjiOjdBea8s7t7Dp3upV84QJuwa1_D3zwQZfE4ksKdBF6IBguQDfiHwCgnBNA7qdBirRkahWR4PcFba8v7L9CyDd0ANw5WC/s1600/CustomizeJumpBreak4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="background-color: white; color: black; font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgma-8GLb1R4w1uBI7TbeRk_8r0orl-WUDdqS6SnLG6h_K5bUjiOjdBea8s7t7Dp3upV84QJuwa1_D3zwQZfE4ksKdBF6IBguQDfiHwCgnBNA7qdBirRkahWR4PcFba8v7L9CyDd0ANw5WC/s400/CustomizeJumpBreak4.jpg" height="348" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 5px; position: relative;" width="400" /></span></a></div>
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-weight: bold; line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span>
<br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: center;">
</div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;">3. Now click carefully inside the scroll box displayed and press <b>Ctrl-F</b> on your keyboard. A<b>search field</b> will be displayed at the top right of the scroll box.</span></span></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;">Enter the following code into the search field and press enter: ]]></b:skin></span></span></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit;">The code you searched for will be highlighted as shown below.</span></span></div>
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span>
<br />
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnLwwngKInz9u59Ixr5MpSOEOxm_R2e9x88Bf1KLR9K7XMKdoU-3uZtaQqgdTwfpixsk4AiG6L6JHRE3QnxOhN5SrSR7VXxTZWwo2xXrRXWFzTijMLtmcTW8Rb06MqICDyQxdKSCrz4gzw/s1600/CustomizeJumpBreak5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="background-color: white; color: black; font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnLwwngKInz9u59Ixr5MpSOEOxm_R2e9x88Bf1KLR9K7XMKdoU-3uZtaQqgdTwfpixsk4AiG6L6JHRE3QnxOhN5SrSR7VXxTZWwo2xXrRXWFzTijMLtmcTW8Rb06MqICDyQxdKSCrz4gzw/s640/CustomizeJumpBreak5.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 5px; position: relative;" width="500" /></span></a></div>
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
<span style="font-family: inherit; line-height: 18.479999542236328px;"></span></span>
<br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;"><span style="font-family: inherit;">4. Copy the code you edited in notepad and paste it just above the highlighted code as shown below and then click</span><span style="font-family: inherit;"> </span><b style="font-family: inherit;">Save Template</b><span style="font-family: inherit;">.</span></span></span></div>
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;">
</span></span>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: center;">
</div>
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-weight: bold; line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span>
<br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span>
<div class="separator" style="clear: both; line-height: 18.479999542236328px; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKPWQzPH5na8vxPia1Jx4yGy3Eq7ZX5kP-eepXkzLrPDR7qq00sEcj2f0Fx3l7K1uyudgLSOG2CUNspMaHKn0C8A5aPB5wqN-9ZuAcqc50XRxxYJPnqYLn4DVsSUvSLmE-9jGUQDUlY4MZ/s1600/CustomizeJumpBreak6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-decoration: none;"><span style="background-color: white; color: black; font-family: inherit;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKPWQzPH5na8vxPia1Jx4yGy3Eq7ZX5kP-eepXkzLrPDR7qq00sEcj2f0Fx3l7K1uyudgLSOG2CUNspMaHKn0C8A5aPB5wqN-9ZuAcqc50XRxxYJPnqYLn4DVsSUvSLmE-9jGUQDUlY4MZ/s640/CustomizeJumpBreak6.jpg" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; padding: 5px; position: relative;" width="500" /></span></a></div>
<span style="background-color: white; font-weight: bold; line-height: 18.479999542236328px;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white; font-weight: bold; line-height: 18.479999542236328px;"><br /></span></div>
<span style="background-color: white; font-weight: bold; line-height: 18.479999542236328px;">
</span></div>
<br />
<div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;">5. Now view your blog and check out the new Jump Breaks.</span></span></div>
<span style="background-color: white;">
</span>
<br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
<span style="font-family: inherit; line-height: 18.479999542236328px;"></span></span>
<div style="text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;"><span style="font-family: inherit;">6. If you want to tweek the size, colour or font, just go back to steps 2 and 3 and change the values of </span><i style="font-family: inherit;">font-size</i><span style="font-family: inherit;">, </span><i style="font-family: inherit;">color </i><span style="font-family: inherit;">or </span><i style="font-family: inherit;">font-family</i><span style="font-family: inherit;">. Remember to click Save Template when you have finished.</span></span></span></div>
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;">
</span><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<span style="font-family: inherit; line-height: 18.479999542236328px;"><div style="text-align: justify;">
<span style="font-family: inherit;">If you don't want the jump break bold just delete the following code: </span><i style="font-family: inherit;">font-weight: Bold;</i></div>
</span><i><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
</i><span style="font-family: inherit; line-height: 18.479999542236328px;"><div style="text-align: justify;">
<span style="font-family: inherit;">7. Once your happy with your changes </span>back-up your blog<span style="font-family: inherit;">.</span></div>
</span><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
</span><br />
<h2 style="margin: 0px 0px 1em; position: relative; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; font-size: small;">More Jump Break Styling</span></span></h2>
<br />
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 18.479999542236328px;">Once you've added this code to your template, it's very easy to style it further by adding simple borders.</span></div>
<span style="background-color: white;"></span><br />
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span>
<br />
<div style="font-family: inherit; text-align: justify;">
<span style="background-color: white;"><span style="font-family: inherit; line-height: 18.479999542236328px;">These are a few examples of what you could do in just a few lines of code ....</span></span></div>
<span style="background-color: white;">
</span>
<div style="text-align: justify;">
<span style="background-color: white;"><span style="line-height: 18.479999542236328px;"><br /></span></span></div>
<span style="background-color: white;">
</span><span style="float: left; line-height: 18.479999542236328px; text-align: justify;"><span style="background-color: white;"><span style="font-family: inherit;">To underline the jump break with a dotted line just</span></span></span><span style="float: left; line-height: 18.479999542236328px; text-align: justify;"><span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></span><span style="border-bottom-color: rgb(0, 0, 0); border-bottom-style: dotted; border-bottom-width: 1px; clear: right; float: right; font-weight: bold; text-align: justify;"><span style="background-color: white;"><span style="font-family: inherit;">Click for more</span></span></span><span style="background-color: white;"><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<div style="font-family: inherit; text-align: justify;">
<span style="font-family: inherit; line-height: 18.479999542236328px;"> add the code: </span><i style="font-family: inherit; line-height: 18.479999542236328px;">border-bottom: dotted 1px black;</i></div>
<div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
</span><span style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-left-color: black; border-left-style: dotted; border-left-width: 2px; border-right-color: black; border-right-style: dotted; border-right-width: 2px; border-top-left-radius: 15px; border-top-right-radius: 15px; clear: right; float: right; font-weight: bold; padding: 4px 12px; text-align: justify;"><span style="background-color: white;"><span style="font-family: inherit;">Click for more</span></span></span><span style="background-color: white;"><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
<div style="font-family: inherit; text-align: justify;">
<span style="font-family: inherit; line-height: 18.479999542236328px;">To add some stylish brackets just add the code:</span></div>
<i style="font-family: inherit; line-height: 18.479999542236328px;"><div style="text-align: justify;">
<i style="font-family: inherit;">border-right: dotted 2px black;</i></div>
</i><i style="font-family: inherit; line-height: 18.479999542236328px;"><div style="text-align: justify;">
<i style="font-family: inherit;">border-left: dotted 2px black;</i></div>
</i><i style="font-family: inherit; line-height: 18.479999542236328px;"><div style="text-align: justify;">
<i style="font-family: inherit;">border-radius: 15px; </i></div>
</i><i style="font-family: inherit; line-height: 18.479999542236328px;"><div style="text-align: justify;">
<i style="font-family: inherit;">padding: 4px 12px;</i></div>
</i><i><div style="text-align: justify;">
<span style="line-height: 18.479999542236328px;"><br /></span></div>
</i><span style="font-family: inherit; line-height: 18.479999542236328px;"></span></span><span style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; border: 2px solid rgb(0, 0, 0); clear: right; float: right; font-weight: bold; padding: 4px 12px; text-align: justify;"><span style="background-color: white;"><span style="font-family: inherit;">Click for more</span></span></span><span style="background-color: white;"><div style="text-align: justify;">
<span style="font-family: inherit; line-height: 18.479999542236328px;">To create what looks like a button add the code:</span></div>
<span style="font-family: inherit;"><div style="text-align: justify;">
<i style="font-family: inherit; line-height: 18.479999542236328px;">border: solid 2px black;</i></div>
<i style="line-height: 18.479999542236328px;"><div style="text-align: justify;">
<i style="font-family: inherit;">border-radius: 15px; </i></div>
</i><i style="line-height: 18.479999542236328px;"><div style="text-align: justify;">
<i style="font-family: inherit;">padding: 4px 12px;</i></div>
</i><i style="line-height: 18.479999542236328px;"><div style="text-align: justify;">
<i style="font-family: inherit;">background-color: #a91a00;</i></div>
</i></span></span>BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-45379376401509944532013-11-18T07:56:00.003-08:002014-02-09T08:46:27.344-08:00Install Facebook's Open Graph tags into Blogger<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">Neil Patel recently explained on Quick Sprout </span><a href="http://www.quicksprout.com/2013/03/25/social-media-meta-tags-how-to-use-open-graph-and-cards/" style="background-color: white; color: #1850da; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-decoration: none;" target="_blank">why having Facebook and Twitter tags installed into your blog is important</a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">To cut his long story short, if you install them, then </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">when someone shares your blog-post, the shared item looks better</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">. This means that more people are likely to follow the link and/or share it themselves - so your blog gets more traffic, and people think you're more professional and thus credible.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">Neil also stated that if you don't use Wordpress, "</span><i style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">you’ll need to manually generate meta tags for each page on your site</i><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">" - but fortunately for Blogger users who are </span><a href="http://blogger-hints-and-tips.blogspot.com/2010/06/editing-your-blogs-template-advantanges.html" style="background-color: white; color: #1850da; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-decoration: none;">brave enough to edit their template</a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"> that's not true. Blogger provides lots of SEO-supportive features these days, and you can easily use them to make OG-tags work on your blog - even if you haven't quite got your head around what OG is - personally it took me months to understand what it was all about.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">The following sections have more details about how to do this.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><br />
<h2 style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 22px; margin: 0px 0px 1em; position: relative;">
How to install Facebook's Open Graph tags into a blog made with Blogger</h2>
<a href="http://blogger-hints-and-tips.blogspot.com/2012/02/how-to-edit-your-blogger-template.html" style="background-color: white; color: #1850da; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-decoration: none;">Edit your template</a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"> in the usual way.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><br />
<h3 style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px; position: relative;">
1 Tell Google about the namespace:</h3>
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">Find the opening <html ... statement, and add the Open Graph namespace information to it. The code to add is</span><br />
<blockquote class="tr_bq" style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
xmlns:og='http://ogp.me/ns#'</blockquote>
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">and it goes after the existing namespace statements. For example, my current tag looks like:</span><br />
<blockquote class="tr_bq" style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'<br />xmlns='http://www.w3.org/1999/xhtml'<br />xmlns:b='http://www.google.com/2005/gml/b'<br />xmlns:data='http://www.google.com/2005/gml/data'<br />xmlns:expr='http://www.google.com/2005/gml/expr' ></blockquote>
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">or like this after the line is added:</span><br />
<blockquote class="tr_bq" style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'<br />xmlns='http://www.w3.org/1999/xhtml'<br />xmlns:b='http://www.google.com/2005/gml/b'<br />xmlns:data='http://www.google.com/2005/gml/data'<br />xmlns:expr='http://www.google.com/2005/gml/expr'<br /><b>xmlns:og='http://ogp.me/ns#'</b>></blockquote>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<br /></div>
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" />
<h3 style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px; position: relative;">
2 Add the Open Graph tags</h3>
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">Find the closing </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"></head></b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"> tag.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><i style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">(Hint: I often search for just </head ie without the closing >, in case there's something else in the tag in my template)</i><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">Put the following code immediately </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">before</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"> it:</span><br />
<blockquote class="tr_bq" style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<span style="font-family: 'Courier New', Courier, monospace;"><!-- Begin Open Graph metadata --></span> </blockquote>
<blockquote class="tr_bq" style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<span style="font-family: 'Courier New', Courier, monospace;"><meta expr:content='&quot;<b><span style="color: red; font-size: medium;">en_US</span></b>&quot;' property='og:locale'/></span> <span style="font-family: 'Courier New', Courier, monospace;"><meta expr:content='data:blog.canonicalUrl' property='og:url'/> </span></blockquote>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><meta expr:content='data:blog.pageName' property='og:title'/><br /><meta content='article' property='og:type'/></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"></b:if></span> </blockquote>
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><meta expr:content='data:blog.title' property='og:site_name'/></span> </blockquote>
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><b:if cond='data:blog.postImageThumbnailUrl'><br /><meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/><br /><b:else/><br /><meta content='</span><b style="font-family: 'Courier New', Courier, monospace;"><span style="color: red; font-size: medium;">URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST</span></b><span style="font-family: 'Courier New', Courier, monospace;">' property='og:image'/><br /></b:if></span> </blockquote>
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><b:if cond='data:blog.metaDescription'></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><meta expr:content='data:blog.metaDescription' property='og:description'/></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><b:else/></span><br /><span style="font-family: 'Courier New', Courier, monospace;"></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><!-- Still looking for a way to use the post snippet if there's no description --></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"></b:if></span></blockquote>
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><!-- End Open Graph metadata --></span></blockquote>
<div>
</div>
<br /><br />This code needs to be <b>adapted for your blog</b>. In particular:<br /><ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;"><b>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><b>en_US</b></li>
</b></ul>
<b></b>This value is fine if your blog is written in US-English. But if you are writing in UK-English, you may want to change it to en_GB. </div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<br /></div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
And if you are using a different language altogether, you should change it to the two letter code for that language-territory combination: see <a href="https://developers.facebook.com/docs/internationalization/" style="color: #1850da; text-decoration: none;">https://developers.facebook.com/docs/internationalization/</a> for more information about the codes that they support<br /><br /><ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><b>URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST </b></li>
</ul>
Replace this with the web-address of a picture that you want to use if the individual post doesn't have a <a href="http://blogger-hints-and-tips.blogspot.com/2011/07/postsnippet-and-postthumbnail-tools-for.html" style="color: #1850da; text-decoration: none;">thumbnail </a> - perhaps your logo, or a blogger logo.<br /><br /><br /><ul style="line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><b>App-ID </b>and<b> Facebook-Profile-ID</b></li>
</ul>
</div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
If you have got an App-ID associated with your blog, perhaps because you signed up to use Facebook commenting with it, then you may also want to add the following statements, just before the "<span style="font-family: 'Courier New', Courier, monospace;"><!-- End Open Graph metadata --></span>"</div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
</div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<blockquote class="tr_bq">
<span style="font-family: 'Courier New', Courier, monospace;"><meta content='<b><span style="color: red;">App-ID</span></b>' property='fb:app_id'/><br /><meta content='<b><span style="color: red;">Facebook-Profile-ID</span></b>' property='fb:admins'/></span><br /><div>
<span style="font-family: 'Courier New', Courier, monospace;"><br /></span></div>
</blockquote>
</div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<div>
Of course putting in your own values instead of the ones in red (I'm assuming that if you knew enough to get an App-ID, then you will know how to find it, and also about the risks associated with linking your Facebook-profile-ID to your blog.)<br /><br /><h3 style="margin: 0px; position: relative;">
3 Check it's complete:</h3>
<b>Preview the template changes</b> to make sure that they've worked, and then <b>save</b> them.</div>
</div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<br /><h2 style="font-size: 22px; line-height: normal; margin: 0px 0px 1em; position: relative;">
Troubleshooting</h2>
<h3 style="margin: 0px; position: relative;">
Testing the OG tags</h3>
Facebook have a tool that you can use to see what values the OG tags in your blog have.<br />It is found here: <a href="https://developers.facebook.com/tools/debug" style="color: #1850da; text-decoration: none;">https://developers.facebook.com/tools/debug</a><br /><br />Enter the URL of one of the posts from your blog and click Debug to see the OG tags which Facebook finds for it.<br /><br /><h4 style="margin: 0px; position: relative;">
Descriptions</h4>
The Descriptions tag will only work if you have Search-descriptions on (Option > Search > Meta-tags > Enabled), and have entered a search description for each post using the post-editor. I had hoped to be able to use post.snippet when this wasn't available, but have not been able to work out the correct syntax to do this.<br /><br /><h3 style="margin: 0px; position: relative;">
Pictures</h3>
Facebook would like you to use an image that's at least 200x200 as your posts's thumbnail image or as the default image to use for posts that don't have one.<br /><br />If the picture that you use is smaller than this, they do appear to use it.<br /><br />However you will see the following message when you use a debugging tool to look at what tags Facebook is reading from your site:<br /><blockquote>
<i>og:image should be larger</i><br /><i>Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://3.bp.blogspot.com/XXX.png' will be used instead.</i></blockquote>
</div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com1tag:blogger.com,1999:blog-3850292960628411577.post-58984213381511382962013-11-18T07:52:00.000-08:002014-02-09T08:46:27.355-08:00Set up Twitter's "view summary" cards to work with Blogger posts<div style="text-align: justify;">
Recently, Neil Patel explained why having social sharing tags installed into your blog can be important, and I've written a little more about it specifically for Facebook and Blogger here.
Twitter, for reasons best known to themselves, have developed their own version of social media meta-tags, called "Twitter Cards". (Apparently they do make some use of Open Graph tags - but not for Twitter cards displays.)
Two things happen inside Twitter when someone tweets a message including a link to a website or blog that has Twitter-cards installed.
Firstly, the message has the words "View Summary" under it, instead of just "Expand".
</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Secondly, when someone in Twitter clicks the View Summary link, more information (ie a "Twitter Card") is shown about the contents of the link - like this:</div>
<div style="text-align: justify;">
<br /></div>
<h2 style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 22px; margin: 0px 0px 1em; position: relative; text-align: justify;">
How to install Twitter Cards into a blog made with Blogger</h2>
<div style="text-align: justify;">
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;">There are two simple steps needed to set up Twitter sharing tags for your blog: </span></div>
<ul style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;">Adding the code to your template, and then </li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;">Asking Twitter if you've got it right. </li>
</ul>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;">The 2nd step is necessary because (for whatever reason) Twitter won't use the tags you have installed until you've tested them in Twitter's own validation tool.</span></div>
<br /><br />
<h3 style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; margin: 0px; position: relative; text-align: justify;">
Step 1 Add the Twitter Card meta-tags to your template</h3>
<div style="text-align: justify;">
</div>
<div style="text-align: justify;">
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><br /></span></div>
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;"><div style="text-align: justify;">
Edit your template in the usual way.</div>
</span><br /><div style="text-align: justify;">
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;">Find the </head statement, and just </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;">before </b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;">it add the following lines of code:</span></div>
<div style="text-align: justify;">
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><br /></span></div>
<br />
<blockquote class="tr_bq" style="background-color: white;">
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<span style="font-family: 'Courier New', Courier, monospace;"><!-- START - TWITTER CARD TAGS --></span></div>
<span style="font-family: 'Courier New', Courier, monospace; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
<meta name="twitter:card" content="summary"/> </div>
</span><span style="font-family: 'Courier New', Courier, monospace; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
<meta name="twitter:site" content="@<b><span style="color: red;">YOUR-TWITTER-ACCOUNT-NAME</span></b>"/> <meta name="twitter:domain" content="<b><span style="color: red;">YOUR-BLOG-URL</span></b>"/></div>
</span><div style="text-align: justify;">
<span style="font-family: 'Courier New', Courier, monospace; font-size: 15px; line-height: 21px;"><br /></span></div>
<span style="font-family: 'Courier New', Courier, monospace; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
<b:if cond='data:blog.pageType == &quot;item&quot;'><meta name="twitter:title" expr:content='data:blog.pageName'/><b:else/></div>
</span><span style="font-family: 'Courier New', Courier, monospace; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
<meta expr:content='data:blog.homepageUrl' name='twitter:url'/></div>
</span><span style="font-family: 'Courier New', Courier, monospace; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
<meta expr:content='data:blog.pageTitle' name='twitter:title'/></b:if></div>
</span></blockquote>
<blockquote class="tr_bq" style="background-color: white;">
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<span style="font-family: 'Courier New', Courier, monospace;"><b:if cond='data:blog.postImageThumbnailUrl'></span><span style="font-family: 'Courier New', Courier, monospace;"><meta name="twitter:image:src" expr:content='data:blog.postImageThumbnailUrl'/></span><span style="font-family: 'Courier New', Courier, monospace;"><b:else/></span><span style="font-family: 'Courier New', Courier, monospace;"><meta name="twitter:image:src" content='<span style="color: red;"><b>URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST</b></span>' /></span><span style="font-family: 'Courier New', Courier, monospace;"></b:if> </span></div>
<span style="font-family: 'Courier New', Courier, monospace; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
<b:if cond='data:blog.metaDescription'><meta name="twitter:description" expr:content='data:blog.metaDescription'/><b:else/><!-- Still looking for a way to use the post snippet if there's no description --></b:if></div>
</span><div style="text-align: justify;">
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><br /></span></div>
<span style="font-family: 'Courier New', Courier, monospace; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
<meta name='twitter:url' expr:content='data:blog.canonicalUrl'/></div>
</span><span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
<!-- END - TWITTER CARD TAGS --></div>
</span></blockquote>
<div style="text-align: justify;">
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;" /></div>
<div style="background-color: white;">
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
Except, you need to <b>replace</b> a few items with your own values:</div>
<ul style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;"><b>YOUR-BLOG-URL</b> - with your blog's address (eg for me, it's blogger-hints-and-tips.blogspot.com)</li>
</ul>
<ul style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;"><b>YOUR-TWITTER-ACCOUNT-NAME</b> - with the Twitter account name for your blog. (This line is optional)</li>
</ul>
<ul style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;"><b>URL-FOR-IMAGE-YOU-WANT-TO-USE-IF-THERE-IS-NOT-A-THUMBNAIL-PHOTO-IN-THE-POST</b> - with the web-address of an alternative picture to use if the post doesn't have a <a href="http://blogger-hints-and-tips.blogspot.com/2011/07/postsnippet-and-postthumbnail-tools-for.html" style="color: #1850da; text-decoration: none;">thumbnail</a> image.</li>
</ul>
<b style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
<b>Save </b>the template changes.</div>
</b><div style="text-align: justify;">
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><br /></span></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
(Twitter also have a code-generator - but it's for websites in general, while I have configured the code above to use some of the values that Blogger makes available to us.)</div>
</span><div style="text-align: justify;">
<br /></div>
<h3 style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; margin: 0px; position: relative; text-align: justify;">
Step 2 Validate your domain</h3>
<div>
<div style="text-align: justify;">
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><br /></span></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
After you have done the first step, go <a href="https://dev.twitter.com/docs/cards/validation/validator" style="color: #1850da; text-decoration: none;" target="_blank">https://dev.twitter.com/docs/cards/validation/validator</a>. This is Twitter's validating tool, where they check if your code meets their requirements.</div>
</span></div>
<div style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<br /></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
Log in using your Twitter account. </div>
</span><i style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
<i>You do need to have a Twitter account yourself - or at least one that is dedicated to the blog - to use the validator and thus to install Twitter Cards.</i></div>
</i><div style="text-align: justify;">
<br /></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
Click the <b>Validate and Apply</b> tab.</div>
</span><div style="text-align: justify;">
<br /></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
Enter the address of <b>a post</b> from your blog and press Go.</div>
</span><div style="text-align: justify;">
<br /></div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
If you're using a browser that supports showing Twitter Cards, then a preview of the card for your post will be shown in the right side of the screen. <b>Check</b> that this looks correct.</div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<b style="text-align: start;">Fix </b><span style="text-align: start;">any problems, and enter the blog-post URL again - keep going until you get a green dot at the top of the list. (Some of the twitter card values are option, so it doesn't matter if they show as grey because they're irrelevant for a Blogger site.)</span></div>
<br /><div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<span style="text-align: start;">Enter the </span><b style="text-align: start;">URL of your blog</b><span style="text-align: start;"> overall (ie not a specific post). </span></div>
<ul style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em; text-align: start;">
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;">If you do nothave a custom domain (ie your blog is myBlog.blogspot.com), then make sure you <b>enter the blogspot.com URL</b>, not the country-specific one (eg myBlog.blogspot.in). This is important later in the validation process.</li>
</ul>
<ul style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em; text-align: start;">
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;">Fix any problems for this as well. (There shouldn't be any, but I think it's worth double-checking, especially if you modify the twitter-cards code in any way.)</li>
</ul>
<div style="text-align: justify;">
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><br /></span></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;"><div style="text-align: justify;">
Press the <b>Request Approval</b> button at the top of the left hand sidebar.</div>
</span><br /><div style="text-align: justify;">
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;">Confirm the </span><b style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;">administrative details</b><span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: start;"> on the screen that opens - by default it will be filled in with details from your Twitter account. You may be asked for:</span></div>
<ul style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; margin: 0.5em 0px; padding: 0px 2.5em; text-align: start;">
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;">Contact information for the person responsible for administering cards on your website (name, email address, Twitter handle)</li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;">Website information: the URL (ie the domain), and a description. Note: if you are based outside the USA and don't have a custom domain, then most probably your country-specific address will be shown here. Change it to the blogspot.com address.</li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;">Whether your site publishes images or videos that may contain sensitive content (eg nudity, violence, or medical procedures) - so that Twitter can warn viewers before showing them.</li>
<li style="margin: 0px 0px 0.25em; padding: 0px; text-align: justify;">The website's Twitter-name.</li>
</ul>
</div>
<div style="text-align: justify;">
<br /></div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
Look at the <b>list of results</b> of your Twitter-card values shown on the left of the screen. If any of them show a red-dot, then there is a problem that you need to fix. Typically this will be because you've accidentally left out a quote mark when you were adding your custom values.</div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
Press <b>Submit Request</b>.</div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<br /></div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
After a moment, if your details are correct, Twitter shows a message saying </div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
"<span style="color: #555555; font-family: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif; font-size: 13.333333015441895px; line-height: 25.33333396911621px;">Thanks for applying to be part of Twitter's cards service. We'll review your request as soon as possible. Expect a few weeks for turn-around time. You will receive an email when your request has been reviewed.</span>"</div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<br /></div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
I'm not sure if they apply this to all (or indeed any) countries or Twitter accounts: when I installed Twitter Cards for this site, I got an email in a few minutes saying .</div>
<div style="text-align: start;">
<blockquote class="tr_bq" style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<div style="text-align: justify;">
<i>Your Twitter card is ready!</i></div>
<i><div style="text-align: justify;">
<i>We've activated the summary card for blogger-hints-and-tips.blogspot.com.</i></div>
<div style="text-align: justify;">
<i>If you want to use other kinds of Twitter cards (and we know you do), please make another request.</i></div>
</i></blockquote>
<div style="text-align: justify;">
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><br /></span></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
And the cards themselves were activated on a <a href="https://twitter.com/BloggerHAT/statuses/379996777526464512" style="color: #1850da; text-decoration: none;" target="_blank">test-tweet</a> that I did a few minutes after that.</div>
</span><div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<h2 style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 22px; line-height: normal; margin: 0px 0px 1em; position: relative; text-align: justify;">
What your readers see</h2>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
If you have installed the Twitter Cards correctly, your current readers should see nothing different when they visit your blog or when they read your posts via email or and RSS feeder.</div>
</span><div style="text-align: justify;">
<br /></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
But when they include a reference to your blog in something that they send out inside Twitter, the content that they (and their followers) see is a nicely formatted card rather than an ugly-url.</div>
</span><div style="text-align: justify;">
<br /></div>
<h2 style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 22px; line-height: normal; margin: 0px 0px 1em; position: relative; text-align: justify;">
Troubleshooting</h2>
<h3 style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; margin: 0px; position: relative; text-align: justify;">
Search Descriptions</h3>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
Twitter cards will only work properly if you have enabled Search Descriptions for your blog, and if you have entered one for every post that is tweeted. I looked for ways around this using the post-snippet, but haven't found a way to make this work yet.</div>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<br /></div>
<h3 style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; margin: 0px; position: relative; text-align: justify;">
Country-specific redirects</h3>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
Neil Patel suggested one tag that is not included in the standard Twitter Cards documentation: twitter:url</div>
</span><div style="text-align: justify;">
<br /></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
Using it gets around the problems associated with country-specifc URLs for blogspot domain blogs, by changing any Tweets of them to the blogspot.com page, instead of having your tweets split across multiple urls.</div>
</span><div style="text-align: justify;">
<br /></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
I've included it in my list of tags, customized to take its value from Blogger. However I'm not yet 100% sure if it will work - and will update this article accordingly.</div>
</span><div style="text-align: justify;">
<br /></div>
<h3 style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; margin: 0px; position: relative; text-align: justify;">
Pictures</h3>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
I've set up the image tag to use the thumbnail picture for each post - because that is the only one that you can access on a systematic way for each post.</div>
</span><div style="text-align: justify;">
<br /></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
Twitter's rules say that pictures must be less than 1mb in file size, at least 60px by 60px, and that ones larger than 120px by 120px will be resized. However Blogger may have a thumbnail photo for some of your posts that is less than 60-by-60. For these it is likely that your default image will be used instead.</div>
</span><div style="text-align: justify;">
<br /></div>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
The only way to over-ride this is to use a post-specific Twitter meta-tag which points to a larger photo like:</div>
</span><blockquote class="tr_bq" style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<div style="text-align: justify;">
<span style="font-family: 'Courier New', Courier, monospace;"><b:if cond='data:blog.postURL == &quot;URL-OF-THE-POST&quot;'></span><span style="font-family: 'Courier New', Courier, monospace;"><meta name="twitter:image:src" content='</span><span style="color: red; font-family: 'Courier New', Courier, monospace;"><b>URL-FOR-IMAGE-YOU-WANT-TO-USE-FOR-THIS-POST</b></span><span style="font-family: 'Courier New', Courier, monospace;">' /></span></div>
<span style="font-family: 'Courier New', Courier, monospace;"><div style="text-align: justify;">
</b:if></div>
</span></blockquote>
<div style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; text-align: justify;">
<br /></div>
<h3 style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px; margin: 0px; position: relative; text-align: justify;">
Domains</h3>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
Twiter's documentation was initially a little sketchy about which specific domain should be validated. Some people reported having to validate all three possible URLs, ie</div>
</span><blockquote class="tr_bq" style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;">
<div style="text-align: justify;">
www.your-blog.blogspot.com</div>
<div style="text-align: justify;">
your-blog.blogspot.com</div>
<div style="text-align: justify;">
/*your-blog.blogspot.com</div>
</blockquote>
<span style="font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15px; line-height: 21px;"><div style="text-align: justify;">
although it is possible that this has now been resolved.</div>
</span></div>
</div>
</div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-66525258717151653712013-11-18T07:40:00.000-08:002014-02-09T08:46:27.386-08:00Manage several email accounts with Multiple Inboxes<div style="text-align: justify;">
<span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;">If you forward all your work or school email to Gmail, you can use Multiple Inboxes to see your two accounts separately within the same browser window. Here's how:</span></div>
<div style="text-align: justify;">
<br style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;" /></div>
<div style="text-align: justify;">
<span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;">1. Turn on Multiple Inboxes from the </span><a href="http://mail.google.com/mail/?ui=2&fs=1&view=pu&st=labs" style="color: #7759ae; font-family: arial, sans-serif; font-size: 13px; line-height: 20px; text-decoration: none;">Labs tab under Settings</a><span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;">.</span></div>
<div style="text-align: justify;">
<span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;">2. </span><a href="http://mail.google.com/support/bin/answer.py?hl=en&answer=6579" style="color: #7759ae; font-family: arial, sans-serif; font-size: 13px; line-height: 20px; text-decoration: none;">Set up a filter</a><span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;"> to auto-archive all mail sent to your work or school address.</span></div>
<div style="text-align: justify;">
<span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;">3. Customize one of your multiple inboxes to show mail sent to your other address. To do this, go to the Multiple Inboxes tab under Settings and set up one of the panes to search for mail sent to your other address. </span></div>
<div style="text-align: justify;">
<br style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;" /></div>
<div style="text-align: justify;">
<a href="http://2.bp.blogspot.com/_IzPv6nN_aWE/SZ7da8ICJlI/AAAAAAAAABE/BwLVHBdR5j4/s1600-h/multiple_inbox_query_2.png" style="color: #7759ae; font-family: arial, sans-serif; font-size: 13px; line-height: 20px; text-decoration: none;"><img alt="" border="0" height="50" id="BLOGGER_PHOTO_ID_5304920865975182930" src="http://2.bp.blogspot.com/_IzPv6nN_aWE/SZ7da8ICJlI/AAAAAAAAABE/BwLVHBdR5j4/s320/multiple_inbox_query_2.png" style="border: none; margin: 20px 0px; position: relative;" width="320" /></a></div>
<div style="text-align: justify;">
<br style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;" /></div>
<div style="text-align: justify;">
<span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;">4. (Optional) Use a </span><a href="http://mail.google.com/support/bin/answer.py?hl=en&answer=22370" style="color: #7759ae; font-family: arial, sans-serif; font-size: 13px; line-height: 20px; text-decoration: none;">"custom from" address</a><span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;"> so that replies will be sent from Gmail but as if they're from your other account. This way, your coworkers or classmates won't know the difference.</span></div>
<div style="text-align: justify;">
<br style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;" /></div>
<div style="text-align: justify;">
<span style="color: #444444; font-family: arial, sans-serif; font-size: 13px; line-height: 20px;">I use Multiple Inboxes to keep track of email sent to my college alumni address which I forward to Gmail. I used to filter, label, and auto-archive all these messages (my alumni frisbee team listserve gets tons of mail), but found that I rarely looked at the relevant labels. Now with a separate "inbox" I can see them easily without cluttering my primary inbox.</span></div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-18701396459898351292013-11-16T08:35:00.001-08:002014-02-09T08:46:27.312-08:00Using HTML as the Media Type for your API<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">There is an ongoing (and interesting) <a href="https://groups.google.com/forum/?fromgroups#!topic/api-craft/x-FS-isVwE8">discussion</a> on the <a href="https://groups.google.com/forum/?fromgroups#!forum/api-craft">API-craft</a> mailing list revolving around designing new media types for enabling hypermedia APIs primarily for programmatic consumption. As some folks may know, I like to use HTML as the media type for my hypermedia APIs. <a href="https://groups.google.com/d/msg/api-craft/x-FS-isVwE8/1mcykzUj2CoJ">Steven Willmott opined</a>:</span></div>
<blockquote style="background-color: white; border: 1px solid black; line-height: 16.890625px; margin: 1em 20px; padding: 5px;">
<div style="text-align: justify;">
<span style="font-family: inherit;">I think the problem isn't "why not HTML" it's "why HTML" - if you strip out all the parts of HTML which are to do with rendering things for presentation you're left with almost nothing at all:</span></div>
<ul style="list-style-type: none;">
<li style="text-align: justify;"><span style="font-family: inherit;"><a></span></li>
<li style="text-align: justify;"><span style="font-family: inherit;"><h1>, <h2>, <h3> ... (as nesting)</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;"><ul><li></span></li>
<li style="text-align: justify;"><span style="font-family: inherit;"><ol><li></span></li>
<li style="text-align: justify;"><span style="font-family: inherit;"><p> maybe (as a kind of separator) - or <div> ...</span></li>
</ul>
<span style="font-family: inherit;"></span><br />
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="font-family: inherit;">and even some of these are marginal. There is useful stuff around encodings, meta-data etc. but pretty much everything else is redundant.</span></span></div>
<span style="font-family: inherit;">
</span></blockquote>
<div style="background-color: white; line-height: 16.890625px;">
</div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">I thought this raised such an interesting implicit question, and I get asked about this enough that I thought it warranted a longer response. There are actually a variety of reasons I prefer using HTML:</span></div>
<ul style="background-color: white; line-height: 16.890625px;">
<li style="text-align: justify;"><span style="font-family: inherit;">rich semantics</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">hypermedia support</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">already standardized</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">tooling support</span></li>
</ul>
<div style="background-color: white; line-height: 16.890625px;">
</div>
<h2 style="background-color: white; line-height: 16.890625px; margin: 0px; text-align: justify;">
<span style="font-family: inherit; font-size: small;">Rich Semantics</span></h2>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">I've heard many folks say that HTML is primarily for presentation and not for conveying information, and hence it isn't suitable for API use. Hogwash, I say! There are many web experts (like <a href="https://twitter.com/obiwankimberly">Kimberly Blessing</a>) who would insist that markup is <i>exactly</i> for conveying semantics and that presentation should be a CSS concern. People seem to forget that web sites actually worked before CSS or Javascript was invented! I rely on this heavily for my HTML APIs.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">Now don't get me wrong--I'm not advocating a return to 1995; Javascript, CSS, and HTML advances have clearly afforded richer user experiences. But that doesn't mean your HTML API needs to serve up or depend on CSS or Javascript any more than clients need to execute it, necessarily. Just because the media type can express things you don't need or want doesn't make it a bad media type for your use--this is confusing the content for the media type.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">So let's get to specifics. From a semantic and informational point of view, there are whole segments of the HTML spec that I've found useful for expressing data structures. We obviously have lists (<ol>), bags (<ul>), and maps (<dl>). Raw XML doesn't have any of these, and JSON can't distinguish lists from bags and is constrained to use strings as map keys. We get encapsulation or grouping via ancestor inclusion or explicitly with <div>. We get 2-dimensional data layouts via <table>, and in fact something even more general than a 2-dimensional array via @colspan and @rowspan.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">But more powerfully, with the <a> tag, we have the ability to represent arbitrary data structures, even circular ones (which tree-structured media types like XML or JSON cannot represent). In fact, we can even represent<i>distributed</i> data structures (which, arguably, is what the Web as we know it is--a giant distributed data structure). This is amazingly powerful, and for comparable expressiveness in a different media type, you'll have to define conventions for all these things.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">Now, let me just take a run through the <a href="http://www.w3.org/TR/html5/">HTML5 spec</a> and identify which elements are useful or not useful from an API point of view:</span></div>
<dl style="background-color: white; line-height: 16.890625px;">
<dt style="text-align: justify;"><span style="font-family: inherit;"><html></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">required, so moot</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><head></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">useful for overall representation metadata, especially via <link> and <meta></span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><title></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">if you have a string that could be construed as a name for the whole representation, why not put it here?</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><base></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">useful for unambiguously supporting relative links</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><link></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">one of the key hypermedia controls, see the "Hypermedia Support" section below</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><meta></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">useful for arbitrary data annotations</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><style></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">Okay, I'll grant that this one is not as important for machine-to-machine (m2m) consumption, but it comes into play under the "Tooling Support" section below.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><script> and <noscript></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">Arguably, this is useful for implementing code-on-demand, but I'll grant that my current m2m use cases aren't this advanced yet.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><body></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">necessary for separating metadata in <head> from actual data</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><section>, <article>, <aside>, <h1>-<h6>, <hgroup>, <header>, <footer>, <blockquote></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">These are primarily useful for describing content meant for human consumption, and while I have not had cause to use these myself, they would clearly have an important place to play if data payloads had this structure, e.g., in the API for a content management system (CMS). That said, I'm happy to lump these into "not useful" for the sake of argument.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><nav></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">For m2m, I'm not sure there's much benefit to this over <link>s in the <head>, although there's room for more expressiveness here. Let's say, YAGNI here.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><address></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">If you have data that's an address, why not mark it as such? Seems like a not-that-unusual circumstance.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><p>, <pre>, <span></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">These are fine containers for arbitrary string data with slightly different semantics, particularly around whether whitespace is significant or not, and whether content may reasonably flowed when presented in a UI. However, these offer the ability to have rich content if desired as well.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><ol>, <ul>, <dl>, <li>, <dt>, <dd>, <div></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">As mentioned above, necessary for representing data structures.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><figure>, <figurecaption></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">Arguably not needed for m2m interactions.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;">Text-level semantics like <i>, <b>, etc.</span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">Not useful immediately for m2m interactions, but rather to allow rich payloads. Arguably, a JSON-based media type could carry HTML markup in its strings, but then there is an impact on tooling and visibility, which we'll discuss in tooling support below.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><img></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">I've seen many APIs that send around links to thumbnails, for example. Clearly useful.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><iframe>, <embed>, <object>, <canvas>, etc.</span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">Similar to the discussion of <script> above, our m2m interactions are not advanced enough to take advantage of these (yet).</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><audio>, <video></span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">Similar to images, allows for discussion of multimedia as first-class objects.</span></dd>
<dt style="text-align: justify;"><span style="font-family: inherit;"><form> et al.</span></dt>
<dd style="text-align: justify;"><span style="font-family: inherit;">Perhaps the single biggest reason to use HTML is its support for parameterized navigation via forms. See "Hypermedia Support" below.</span></dd></dl>
<div style="background-color: white; line-height: 16.890625px;">
</div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">Looking back across this list, sure, there's a lot of things that might not be immediately useful, but there's actually quite a large portion of HTML that offers semantics I'd immediately find useful in a programmatic API. We basically get to reap the benefit of many years of evolution in HTML, where its expressive power has grown and been refined over the years. You'll end up repeating most of the HTML standardization process to get a new media type up to the same level of expressiveness.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">On top of that, however, are facilities for describing application-domain specific semantics, namely through the use of <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/microdata.html">microdata</a> and/or <a href="http://www.w3.org/TR/rdfa-in-html/">RDFa</a>--all the "semantic web" stuff. I don't have to create a new semantic ontology for my application domain; I can leverage and/or enrich my markup with <a href="http://dublincore.org/">Dublin Core</a> or <a href="http://schema.org/">Schema.org</a>.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">In short, from a data description point of view, HTML and its associated standards give me all the tools I need to describe almost anything I could imagine, and those facilities are all off-the-shelf from my perspective.</span><br />
<span style="font-family: inherit;"><br /></span></div>
<h2 style="background-color: white; line-height: 16.890625px; margin: 0px; text-align: justify;">
<span style="font-family: inherit; font-size: small;">Hypermedia Support</span></h2>
<div>
<span style="font-family: inherit; font-size: small;"><br /></span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">HTML offers <a>, <link>, and <form> as obvious examples of hypermedia controls. In fact, the use of <form> to support parameterized navigation (where the client supplies some of the information needed to formulate a request) fairly well sets HTML apart from most existing <i>standard</i> (in the sense of being registered in the <a href="http://www.iana.org/assignments/media-types/index.html">IANA standards tree for media types</a>) media types. While currently this construct is not as powerful or expressive as it could be--c.f. only supporting GET and POST for methods--it's actually enough to get by, and is certainly <a href="http://roy.gbiv.com/untangled/2009/it-is-okay-to-use-post">sufficient for a RESTful system</a> (if you care about qualifying for the label). Furthermore, there are <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=10671">ongoing efforts</a> within the HTML5 standards process to address this.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">(As an aside, it's worth noting that <audio>, <video>, <iframe>, and <img> are also hypermedia controls).</span></div>
<h2 style="background-color: white; line-height: 16.890625px; margin: 0px; text-align: justify;">
<span style="font-family: inherit; font-size: small;"><br /></span></h2>
<h2 style="background-color: white; line-height: 16.890625px; margin: 0px; text-align: justify;">
<span style="font-family: inherit; font-size: small;">Already Standardized</span></h2>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;"><br /></span>
<span style="font-family: inherit;">HTML is shepherded by an existing open standards process and a large community of experts, which means it has all the social machinery for ongoing support and evolution. More than that, however, HTML has had the opportunity to be battle-hardened with real world use for <i>decades</i>, including the documentation that comprises its specification. This is huge, because in documentation I can talk about "following links" and "submitting forms" without getting into details about how to construct those HTTP requests, <i>because someone has already taken the trouble of writing that all down, including all the nasty corner cases</i>. I'm lazy--I don't want to define and write down a bunch of rules that solve the same problems reams of experienced people that came before me have already solved.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">Furthermore, due to its ubiquity, EVERYONE AND THEIR BROTHER understands HTML and lots of those people can write valid markup without consulting the HTML5 spec (of course, there are also lots who only <i>think</i> they can write valid markup without looking at the spec!). While developers may not be used to using HTML to power APIs, they can nonetheless look at an API response <i>and understand what's going on</i>. This is a huge advantage.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">More importantly, HTML is already all over the Web, and there are both human and machine participants consuming it. If I'm starting from an API, then it's entirely possible that someone from the "human-oriented" Web might link to my API, and presto, they can use it, because:</span></div>
<blockquote style="background-color: white; border: 1px solid black; line-height: 16.890625px; margin: 1em 20px; padding: 5px; text-align: justify;">
<span style="font-family: inherit;">human + browser = client for my HTML API</span></blockquote>
<div style="background-color: white; line-height: 16.890625px;">
</div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">Similarly, if I'm writing a client, and it can parse HTML (and especially if it can parse RDFa or microdata), then there's a <i>chance</i> it could be pointed at the human-oriented Web and find it can do something useful. But if that client can't parse HTML, then it has <i>no hope</i> of accessing all the existing HTML content on the web.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">The phrase here is "serendipitous reuse". The human stumbling onto my API will likely not find it pretty or well-designed, but they may still be able to <i>use</i> it. The programmatic client trolling through web sites will likely ignore half the stuff it downloads, but it still may find something useful (obviously Google has been able to do this). If I find my API is being visited by humans, too, I can add a link to a stylesheet and perhaps download a javascript client, and present them a more usable interface without bothering my programmatic clients that much. Similarly, if my human-oriented website decides it wants to serve programmatic clients too, it can always add semantic tagging in the meantime, and evolve elsewhere.</span></div>
<h2 style="background-color: white; line-height: 16.890625px; margin: 0px; text-align: justify;">
<span style="font-family: inherit; font-size: small;"><br /></span></h2>
<h2 style="background-color: white; line-height: 16.890625px; margin: 0px; text-align: justify;">
<span style="font-family: inherit; font-size: small;">Tooling Support</span></h2>
<div>
<span style="font-family: inherit; font-size: small;"><br /></span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">Before we get too far into this, let's talk for a minute about the relationship of HTML to XML. Both are flavors of SGML, although the sets of valid documents each can describe are overlapping and distinct. Specifically, there are valid HTML documents that aren't valid XML documents and vice versa, but there are documents that are both valid HTML and valid XML. Then there's XHTML, which is always valid XML but not always valid HTML (depending on the versions). Thus, the relationship is:</span></div>
<div class="separator" style="background-color: white; clear: both; line-height: 16.890625px; margin: 0px 0px 0.75em; text-align: justify;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcEl9-jiszooX9UAkI-i3Kc1_EJAKOUfa5xm0yltiaVkiq8-eF5Qo8aB1kkES-6JzZ9X25OasNVHB8Ql6Ok82Rsx-gZ5LdaxwapeDvx2_MZZtvLlzVTLG-HlrzHLRv4v-qMEk2LQILdwE/s1600/venn.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black; font-family: inherit;"><img alt="Venn diagram showing the relationships of the sets of valid XML, HTML, and XHTML documents" border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcEl9-jiszooX9UAkI-i3Kc1_EJAKOUfa5xm0yltiaVkiq8-eF5Qo8aB1kkES-6JzZ9X25OasNVHB8Ql6Ok82Rsx-gZ5LdaxwapeDvx2_MZZtvLlzVTLG-HlrzHLRv4v-qMEk2LQILdwE/s320/venn.gif" style="border: 1px solid rgb(255, 255, 255); padding: 4px;" width="320" /></span></a></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">In particular, I find that I can often use markup for my API that actually sits in the intersection of all three. My programmatic clients can ask for application/xhtml+xml, and I can give it to them, and browsers can ask for text/html, and I can give them the <i>exact same bytes</i> with a different Content-Type. If my client wants to use the ubiquitous and available XML parsing and handling libraries out there, great! If they want to be more robust and parse the full subset of HTML, great! And yes, there are full HTML parsing libraries (not XML parsing libraries) in most programming languages, for example: <a href="http://docs.python.org/library/htmlparser.html">Python</a>, <a href="https://www.ruby-toolbox.com/categories/html_parsing">Ruby</a>, <a href="http://ejohn.org/blog/pure-javascript-html-parser/">Javascript</a>, <a href="http://search.cpan.org/dist/HTML-Parser/Parser.pm">Perl</a>, <a href="http://sourceforge.net/projects/simplehtmldom/">PHP</a>, <a href="http://www.w3.org/Library/src/HTML.c">C</a>, and <a href="http://mercury.ccil.org/~cowan/XML/tagsoup/">Java</a>.</span><br />
<span style="font-family: inherit;"><br /></span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">Now, I will grant that most of these give you a DOM, and not much support above that, so you are endlessly and tediously traversing descendents and siblings in for loops, examining attributes to find what you're looking for. We do have an example, though, that shows manipulating a DOM need not be hard or tedious, and that is likewise ubiquitous: <a href="http://jquery.com/">JQuery</a>. And indeed, you can use JQuery selector syntax in other languages, too, like <a href="http://jsoup.org/cookbook/extracting-data/selector-syntax">Java</a> or <a href="http://www.straw-dogs.co.uk/11/09/pyquery-bringing-jquery-syntax-to-python/">Python</a>. So most of what you actually need for manipulating HTML programmatically in a client already probably exists.</span><br />
<span style="font-family: inherit;"><br /></span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">On the server side, we are up to our ears in webserver frameworks that serve up HTML, and IDEs and practices that are set up to optimize developing, testing and debugging them. It's sure nice to load your API up in a browser and <i>play</i> with it. A human plus a browser is a fully-capable client of your HTML API, regardless of what programmatic clients you may be targeting. I can look at the requests and responses over the network and examine the markup in detail in Chrome's developer tools. Many frameworks written for compiled languages like Java can even hotload markup template changes on the fly without recompiling. Plus you can wave a stick and hit thousands (perhaps millions) of developers who are already familiar with all of these technologies.</span><br />
<span style="font-family: inherit;"><br /></span></div>
<h2 style="background-color: white; line-height: 16.890625px; margin: 0px; text-align: justify;">
<span style="font-family: inherit; font-size: small;">But what about...?</span></h2>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;"><b>Domain-specific media types.</b> They're so concise! True; you'd have to work a little harder to represent a blog in HTML than in <a href="http://atompub.org/">Atom</a> or <a href="http://en.wikipedia.org/wiki/RSS">RSS</a>, or to represent contact information in HTML rather than in <a href="http://en.wikipedia.org/wiki/VCard">vcard</a>. If there's a domain-specific media type out there for what you're doing, great! Use it--that's what it's for! But I find I work in a world where the application domain is evolving rapidly with new concepts and new features, or where application domains are mixed and mashed up. Many domain-specific media types don't accommodate this well. Imagine trying to write a media type to document Facebook's functionality. You'd end up needing to change the spec daily! That defeats the purpose of having off-the-shelf libraries help you along for the parts that aren't changing much. Or wait--you could build a media type that was so flexible that it could express almost any application...oh.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;"><b>Bloat</b>. JSON is <i>way</i> more concise, and that <i>really</i> matters for mobile apps. I've heard this so many times that I'm going to have a hard time not being snarky here, so be warned. First off, if representation size or parsing speed is that critical, I'd suggest using a binary format instead, like <a href="http://code.google.com/p/protobuf/">Protocol Buffers</a> or <a href="http://avro.apache.org/">Avro</a>. What's that? You don't want to use a binary format because it's not human readable? Ah, so you <i>are</i> willing to give up some efficiency to trade off for other things. I see.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">But let's get down to some facts here. I often see the following argument presented:</span></div>
<blockquote style="background-color: white; border: 1px solid black; line-height: 16.890625px; margin: 1em 20px; padding: 5px;">
<div style="text-align: justify;">
<span style="font-family: inherit;">"Here's my sweet JSON representation, only 122 bytes!"</span></div>
<blockquote style="margin: 1em 20px;">
<pre><div style="text-align: justify;">
<span style="font-family: inherit;">{ "contacts" : [</span></div>
<span style="font-family: inherit;"><div style="text-align: justify;">
<span style="font-family: inherit;"> { "firstname" : "Jon", "lastname" : "Moore" },</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"> { "firstname" : "Homer", "lastname" : "Simpson" }</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">] }</span></div>
</span></pre>
</blockquote>
<span style="font-family: inherit;"></span><br />
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="font-family: inherit;">"And here's the bad, old, ugly</span><span style="font-family: inherit;"> </span><span style="font-family: inherit; text-decoration: line-through;">XML</span><span style="font-family: inherit;"> </span><span style="font-family: inherit;">HTML representation. It's 266 bytes, 118% bigger!"</span></span></div>
<span style="font-family: inherit;">
</span><br />
<blockquote style="margin: 1em 20px;">
<pre><div style="text-align: justify;">
<span style="font-family: inherit;"><html></span></div>
<span style="font-family: inherit;"><div style="text-align: justify;">
<span style="font-family: inherit;"> <body></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"> <ol class="contacts"></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"> <li><span class="firstname">Jon</span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"> <span class="lastname">Moore</span></li></span></div>
<li><span class="firstname">Homer</span>
<div style="text-align: justify;">
<span style="font-family: inherit;"></li>
</ol>
</body>
</html>
</span></div>
<span class="lastname">Simpson</span
<div style="text-align: justify;">
<span style="font-family: inherit;">></span></div>
</span></pre>
</blockquote>
<span style="font-family: inherit;"></span><br />
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="font-family: inherit;">"Ergo, HTML is more bloated than JSON."</span></span></div>
<span style="font-family: inherit;">
</span></blockquote>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">There are a couple of observations to make here. First, both of these would fit quite comfortably in a single TCP packet carried in a single 1500 byte Ethernet MTU frame, unless you've got a LOT of headers, in which case, start looking there for bandwidth savings first! So you're not going to notice the difference in practice.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">But we're building an HTTP-powered API, right? And we're using compression, right? If I gzip those two files, the gzipped JSON version is 103 bytes and the HTML version is 150 bytes. Now the HTML is only 45% bigger, not 118% bigger. But still bloated, right? Wait, there's more.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">These are really small files. Compression algorithms like <a href="http://en.wikipedia.org/wiki/Huffman_coding">Huffman coding</a> are based on repeatability of the occurrence of certain strings of bytes, so the compression rate is based on how big and how common those repeated strings are. Well, it turns out that what you call "bloat", gzip calls "compressable." The longer the document, the better it compresses, and the closer gzip will get to the information theoretic minimal representation. Let's see this in action, and with a real API, rather than a toy example. Here's a <a href="https://gist.github.com/3080485">sample JSON response</a> from the <a href="https://dev.twitter.com/">Twitter API</a>, and here's an<a href="https://gist.github.com/3080489">equivalent XML response</a>, also from the Twitter API. Finally, here's turning it into an <a href="https://gist.github.com/3081067">HTML-style response</a>.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">These samples are, respectively, 44265 bytes (JSON), 64493 bytes (XML), and 40252 bytes (HTML). Wait, what? The HTML representation is the smallest? How is that even possible? I did take the liberty of eliding blank properties, using HTML5 data attributes, and putting true boolean properties as @class values (and leaving off false boolean properties), which I assert are all common HTML idioms. But compare the source gists linked above and decide for yourself.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">Now let's gzip them: 7366 bytes (gzipped JSON), 7855 (gzipped XML), 7287 (gzipped HTML). This is only a size difference of 7% from smallest to largest, and even if you don't consider my HTML version comparable, you can see that gzip compression is removing a lot of the differences.</span></div>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">Now, don't get me wrong, JSON is a fine format, and I use it regularly. There are lots of good reasons to use it, but claiming that it is more economical on the wire, while possibly true, is probably not true by enough to make it a deciding factor (and if that really is a deciding factor, you probably want to go to binary formats anyway).</span></div>
<h2 style="background-color: white; line-height: 16.890625px; margin: 0px; text-align: justify;">
<span style="font-family: inherit; font-size: small;">Summary</span></h2>
<div style="background-color: white; line-height: 16.890625px; text-align: justify;">
<span style="font-family: inherit;">So what this all boils down to is that HTML offers me quite a lot of convenience as a hypermedia-aware, domain-agnostic media type. I have lots of off-the-shelf tooling, including getting my first client for free (the browser), and from a documentation point of view, between the HTML and HTTP, there's a whole lot of mechanics I don't have to discuss. In fact, if I'm using microdata, I don't even necessarily need to write much down about the particular application domain, at least from a vocabulary point of view. It <i>might</i> even be sufficient to document an HTML API just by listing out:</span></div>
<ul style="background-color: white; line-height: 16.890625px;">
<li style="text-align: justify;"><span style="font-family: inherit;">URL of the entry point(s)</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">link relations used (with pointers to their definitions <i>elsewhere</i>!), and important <form> @class values and <input> @names of importance (I think forms need parameterized link relations to do this a little more formally, but we don't quite have those yet)</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">pointers to the microdata definitions of importance (again, <i>elsewhere</i>).</span></li>
</ul>
<div style="text-align: justify;">
<span style="background-color: white; line-height: 16.890625px;"><span style="font-family: inherit;">That's not a lot to have to write down.</span></span></div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com2tag:blogger.com,1999:blog-3850292960628411577.post-82761533382847028752013-11-16T08:24:00.000-08:002013-11-16T08:25:29.161-08:00Use The New Blogger HTML Editor<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">To begin with, what we see now is all the template's code starting with numbered and colored lines showing us different </span><span class="IL_AD" id="IL_AD5" style="background-attachment: scroll !important; background-color: white; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(16, 44, 204) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; padding: 0px 0px 1px !important; position: static;">code snippets</span><span style="background-color: white; line-height: 20px;">: tags, variables, properties, etc.. depending on the HTML, CSS, JavaScript and even the language of Blogger - </span><span style="background-color: white; line-height: 20px;">include</span><span style="background-color: white; line-height: 20px;">, </span><span style="background-color: white; line-height: 20px;">b:if</span><span style="background-color: white; line-height: 20px;"> and other occurrences.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="background-color: white; clear: both; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQpc5z2_W3BxPSgJIzs3kLKz5EE37BeXmmu12mud6wJHm7f_PKsmTj6_-BrggkEXsoaM226LUtG7l4Mo1WQuF0yLF8ot_G3XiwgX8W8lwZyJlZ4JYvI_2P4vfM9VJ0wJfg7rBN3RkAASsU/s1600/blogger-template-html-editor-how-to.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify; text-decoration: none;"><span style="color: black; font-family: inherit;"><img alt="blogger template, blogger tricks, blogger widgets" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQpc5z2_W3BxPSgJIzs3kLKz5EE37BeXmmu12mud6wJHm7f_PKsmTj6_-BrggkEXsoaM226LUtG7l4Mo1WQuF0yLF8ot_G3XiwgX8W8lwZyJlZ4JYvI_2P4vfM9VJ0wJfg7rBN3RkAASsU/s400/blogger-template-html-editor-how-to.png" style="background-color: transparent; border: 1px solid transparent; padding: 5px; position: relative;" title="how to use the new blogger html editor" width="400" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">This is what any decent external editor does, but certainly, from now on it will be much easier to find that little bug that drives us crazy when we omit quotation marks or add one more semicolon. This also applies to CSS, which appears mostly in dark blue without distinguishing </span><span class="IL_AD" id="IL_AD7" style="background-attachment: scroll !important; background-color: white; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(16, 44, 204) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; padding: 0px 0px 1px !important; position: static;">selectors</span><span style="background-color: white; line-height: 20px;"> and rules, but the rest is a major improvement. </span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br style="background-color: white; line-height: 20px;" /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">Another great help are the numbers that appear in front of each </span><span class="IL_AD" id="IL_AD6" style="background-attachment: scroll !important; background-color: white; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(16, 44, 204) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; padding: 0px 0px 1px !important; position: static;">fragment</span><span style="background-color: white; line-height: 20px;"> of code, so that we can easily pinpoint and correct errors of this type: "Error parsing XML, line 103, column 9: The element ... "</span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br style="background-color: white; line-height: 20px;" /></span></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 20px;"><b>Using the New Blogger Template HTML Editor</b></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br style="background-color: white; line-height: 20px;" /></span></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 20px;">When you want to search for a code in the HTML editor, click inside the editor and press CTRL + F on your keyboard, then enter what you want to find in the search box that appears inside the editor.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="background-color: white; clear: both; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDv5ZkemRomKdbCLFt26OhFov5sKoc0Ik-6QaGgyAIOQ-WOGsBWO6WXc7am_lvWNt7RD-8BErlvSBAL1Z8sWX0J5NDdHPA-KG-SzXnZ1ZrpCS0m33HIUhuMGd2BHEzxsVdNl0D7F68d5p9/s1600/how-to-use-new-blogger-html-editor-with-search.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify; text-decoration: none;"><span style="color: black; font-family: inherit;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDv5ZkemRomKdbCLFt26OhFov5sKoc0Ik-6QaGgyAIOQ-WOGsBWO6WXc7am_lvWNt7RD-8BErlvSBAL1Z8sWX0J5NDdHPA-KG-SzXnZ1ZrpCS0m33HIUhuMGd2BHEzxsVdNl0D7F68d5p9/s400/how-to-use-new-blogger-html-editor-with-search.png" style="background-color: transparent; border: 1px solid transparent; padding: 5px; position: relative;" width="400" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br style="background-color: white; line-height: 20px;" /></span></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 20px;">Finally, hit the "ENTER" button on your keyboard and it should take you to the requested code.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br style="background-color: white; line-height: 20px;" /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">If you want to be taken to the section of code that belongs to a particular widget, just click on the </span><b style="background-color: white; line-height: 20px;">Jump To Widget </b><span style="background-color: white; line-height: 20px;">button at the top of the editor, choose the widget's name from </span><span class="IL_AD" id="IL_AD8" style="background-attachment: scroll !important; background-color: white; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(16, 44, 204) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; padding: 0px 0px 1px !important; position: static;">the list</span><span style="background-color: white; line-height: 20px;"> and it will take you directly to that portion of code. </span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="background-color: white; clear: both; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrper1U5Il02F02G7k45qcllhTFbjk85tWtvZx42u1nXlkZa_p16a_tjEjavjlAGsjZHlMeGCTpwppB5Pz6UCiHvjaZw0jpTqiAGfiAQ6MYGCxfxxF_4a5dDV2GaRPTb5qC50KZXZ3OI1m/s1600/jump-to-widget-blogger-template-new-edit-html.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify; text-decoration: none;"><span style="color: black; font-family: inherit;"><img border="0" height="138" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrper1U5Il02F02G7k45qcllhTFbjk85tWtvZx42u1nXlkZa_p16a_tjEjavjlAGsjZHlMeGCTpwppB5Pz6UCiHvjaZw0jpTqiAGfiAQ6MYGCxfxxF_4a5dDV2GaRPTb5qC50KZXZ3OI1m/s400/jump-to-widget-blogger-template-new-edit-html.png" style="background-color: transparent; border: 1px solid transparent; padding: 5px; position: relative;" width="400" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br style="background-color: white; line-height: 20px;" /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">The CSS rules can be found folded at the top of the template, between </span><span style="background-color: white; line-height: 20px;"><b:skin>...</b:skin></span><span style="background-color: white; line-height: 20px;"> and </span><span style="background-color: white; line-height: 20px;"><b:template-skin>...</b:template-skin> </span><span style="background-color: white; line-height: 20px;">tags. To expand them, you have to click on the sideways arrow next to the line number</span><span style="background-color: white; line-height: 20px;">.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="background-color: white; clear: both; line-height: 20px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSLviEwUyiRmM2Czy6VDlSb0beRpyhoQ8e99KbRn-7ZHcGkwRxIqu0PDO_qaaMVzSGcVJ43AN-4RDk4wBBrSacnF8nJCJ-r95Tm9ceDha5HR3LTR6RRJOxMhWaqqfKwua8ab78yn7hhui/s1600/css-rules-b-skin-blogger-new-template-editor-help.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: justify; text-decoration: none;"><span style="color: black; font-family: inherit;"><img border="0" height="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYSLviEwUyiRmM2Czy6VDlSb0beRpyhoQ8e99KbRn-7ZHcGkwRxIqu0PDO_qaaMVzSGcVJ43AN-4RDk4wBBrSacnF8nJCJ-r95Tm9ceDha5HR3LTR6RRJOxMhWaqqfKwua8ab78yn7hhui/s400/css-rules-b-skin-blogger-new-template-editor-help.png" style="background-color: transparent; border: 1px solid transparent; padding: 5px; position: relative;" width="400" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br style="background-color: white; line-height: 20px;" /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">Another great functionality is that now we can </span><b style="background-color: white; line-height: 20px;"><span class="IL_AD" id="IL_AD9" style="background-attachment: scroll !important; background-color: transparent !important; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(16, 44, 204) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; padding: 0px 0px 1px !important; position: static;">Preview</span> Template</b><span style="background-color: white; line-height: 20px;"> in the same window without needing to leave</span><span class="IL_AD" id="IL_AD2" style="background-attachment: scroll !important; background-color: white; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(16, 44, 204) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; padding: 0px 0px 1px !important; position: static;">the page</span><span style="background-color: white; line-height: 20px;"> and we can easily go back to customize our template by clicking on the </span><b style="background-color: white; line-height: 20px;">Edit Template</b><span style="background-color: white; line-height: 20px;"> button.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br style="background-color: white; line-height: 20px;" /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">Finally, </span><b style="background-color: white; line-height: 20px;">Format template</b><span style="background-color: white; line-height: 20px;"> re-orders the code, adding indentation automatically.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br style="background-color: white; line-height: 20px;" /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">As always, we must use the </span><b style="background-color: white; line-height: 20px;">Save </b><span style="background-color: white; line-height: 20px;">button for the changes to take effect or we can </span><b style="background-color: white; line-height: 20px;">Revert </b><span style="background-color: white; line-height: 20px;">the changes.</span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br style="background-color: white; line-height: 20px;" /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">And that's it. With a bit of effort, we can easily familiarize with this new </span><span class="IL_AD" id="IL_AD1" style="background-attachment: scroll !important; background-color: white; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(16, 44, 204) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; padding: 0px 0px 1px !important; position: static;">HTML editor</span><span style="background-color: white; line-height: 20px;">. Surely as usual and even reasonable to be something inherent in the human condition, this </span><span class="IL_AD" id="IL_AD10" style="background-attachment: scroll !important; background-color: white; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(16, 44, 204) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; padding: 0px 0px 1px !important; position: static;">change</span><span style="background-color: white; line-height: 20px;"> does not appeal to many. Same with the Lightbox for images, the new template designer, the new desktop and other new things that have been added in the past. But who now remembers that they once were new?</span></span></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 20px;">----------</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><span style="background-color: white; line-height: 20px;">For more info, </span><a href="http://buzz.blogger.com/2013/04/improvements-to-blogger-template-html.html" style="background-color: white; line-height: 20px; text-decoration: none;">check out this post</a><span style="background-color: white; line-height: 20px;"> on the Blogger Buzz blog, where Google </span><span class="IL_AD" id="IL_AD12" style="background-attachment: scroll !important; background-color: white; background-image: none !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(16, 44, 204) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; cursor: pointer !important; display: inline !important; float: none !important; padding: 0px 0px 1px !important; position: static;">software engineers</span><span style="background-color: white; line-height: 20px;"> +Samantha Schaffer and +Renee Kwang explained the steps for moving the date of a blog post from above the post title to underneath it, as an example in using the new Blogspot </span><span style="background-color: white; line-height: 20px;">HTML editor</span><span style="background-color: white; line-height: 20px;">.</span></span></div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-3526085672904546622013-05-05T23:04:00.003-07:002014-02-09T08:46:27.340-08:00The Top 35 Social Bookmarking site list that will help you raise ypur site's rank<br />
<div style="text-align: justify;">
<span style="font-family: inherit;"><strong>Social Bookmarking is a way to organize and share your bookmarks on the Internet</strong>.
Apart from being able to store your bookmarks categorized, helping you
find what you search easily, it’s a very effective way for webmasters to
promote their website.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">The two most important positive effects of using social bookmarking sites are the <strong>increased number of direct visitors if the story you submit gets voted</strong>
and appears on the front page and the link value that they give to the
article. Submitting your articles to social bookmarking sites <strong>will help each post get “link-juice” and rank much better for its main keywords</strong>.<span id="more-1582"></span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">There are two types of Social Bookmarking sites: <strong>general bookmarking sites </strong>and<strong> niche</strong> <strong>bookmarking sites</strong>.
In general you can submit almost all your posts in whatever niche it
belongs to, excluding of course adult oriented posts, gambling, etc.
Niche social bookmarking sites have less traffic than the general ones
but are much more focused, helping you spread your message in a much
more efficient way. Getting on the front-page of a niche social
bookmarking site often can also help your branding tremendously.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Let’s start by mentioning the general ones first and then go to the niche ones.</span></div>
<div style="text-align: justify;">
<br /></div>
<h2 class="cufon" style="text-align: justify;">
<span style="font-family: inherit; font-size: small;"><cufon alt="General " class="cufon cufon-canvas" style="height: 20px; width: 75px;"><cufontext>General </cufontext></cufon><cufon alt="Social " class="cufon cufon-canvas" style="height: 20px; width: 58px;"><cufontext>Social </cufontext></cufon><cufon alt="Bookmarking " class="cufon cufon-canvas" style="height: 20px; width: 126px;"><cufontext>Bookmarking </cufontext></cufon><cufon alt="Sites" class="cufon cufon-canvas" style="height: 20px; width: 43px;"><cufontext>Sites</cufontext></cufon></span></h2>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.delicious.com/"><img alt="delicious social bookmarking site" class="alignleft size-full wp-image-1599" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/delicious-social-bookmarking-site.png" title="delicious social bookmarking site" width="128" /></a><a href="http://www.delicious.com/">Delicious</a> is <strong>the first social bookmarking website</strong>
that went live on the Internet and remains one of the most important of
its kind. If you want to use only one site and you just need to
organize your bookmarks, Delicious is the way to go. Its tagging system
will help you organize everything according to the tags you specify and
you can access it from any device connected to the Internet. Delicious
can bring a lot of traffic if a story submitted reaches the frontpage
but mostly that has to happen organically: you just submit your article
to it and that’s it.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://www.digg.com/"><span style="color: black; font-family: inherit;"><img alt="digg social bookmarking site" class="alignleft size-full wp-image-1602" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/digg-social-bookmarking-site.png" title="digg social bookmarking site" width="128" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://digg.com/">Digg</a> is
one of the first social bookmarking sites set up that still ranks in the
top 5, whose popularity suffered a small decrease after its redesign
(which I’ve actually found to be pretty great). Don’t get me wrong
though, getting on the front-page of Digg will bring you thousands of
visitors to your post and hundreds of backlinks. It’s an asset for your
promotional efforts. Stories that work <strong>very well</strong> for
Digg are world news, technology, and humor posts. If your website niche
is close to one of the aforementioned, your chances are increased.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://www.stumbleupon.com/"><span style="color: black; font-family: inherit;"><img alt="stumbleupon social bookmarking site" class="alignleft size-full wp-image-1605" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/stumbleupon-social-bookmarking-site.png" title="stumbleupon social bookmarking site" width="128" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.stumbleupon.com/" target="_blank">StumbleUpon</a> is
not only my favorite social bookmarking site, but the guys who created
it sold it to eBay and after two years of steady drop in traffic, they
bought it back in order to resurrect it, and they did! Now <strong>StumbleUpon is more powerful than ever</strong>.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">StumbleUpon is <strong>heavily based on its toolbar</strong>
that Firefox and Chrome fully support. After the registration, the
system asks you to enter your interests and hobbies and then starts to
show you relevant sites to your interests when you press the Stumble
button on your toolbar. By liking and disliking the pages you visit, you
“train” StumbleUpon for it to serve you pages much closer to your
taste, making it the perfect tool for missing your deadlines :P As you
can imagine, <strong>it is an amazing tool for you to promote your own pages as well</strong>.
You can discover a page in stumble upon, set its category and hope that
the users who stumble upon it will like it too, creating a snowball
effect, bringing even more traffic. Needless to say that in my 7+ years
in Internet Marketing, SU is by far the number one referrer to my sites.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">But beware: <strong>It’s not a tool to shamelessly promote your web properties</strong>.
You must first be a user and then a promoter. Stumble doesn’t like it
when the same account discovers pages from the same domain all the time
and there’s really no way to fool it. If you like using stumble on your
free time, you might do very well when submitting your own content too,
otherwise you’re out of luck! This Social Network deserves a proper full
review and how-to post that’ll be published really soon.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.reddit.com/"><img alt="reddit social bookmarking site" class="alignleft size-full wp-image-1610" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/reddit-social-bookmarking-site.png" title="reddit social bookmarking site" width="128" /></a><a href="http://www.reddit.com/" target="_blank">Reddit</a> is a love-hate relationship for me. If you’re looking for a site with <strong>the best community</strong>
that will sometimes help you, sometimes troll you, hey, that’s what
Reddit is for! The most powerful user driven site on the net.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">For simple users it’s heaven but if you
want to promote a story, there comes trouble. A ban can come as easy as
adding a post in a sub-reddit. To see if you are banned, copy your
username page url inside reddit, log out and then refresh it to see if
it is visible. If not, you’re banned and there’s no point in submitting
new pages.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Reddit has what it calls sub-reddits,
something like a social bookmarking comminity inside a social bokmarking
community. Each subreddit has its own rules that submitters and users
have to follow, and it’s self maintained by the users. Every subreddit
has the url structure of http://www.reddit.com/r/<strong>subredditname,</strong>
and when you submit a story, you have to type that name where you want
your story to appear. People vote up or down a story and then you have a
chance to make it popular on that sub-reddit. If it becomes that
popular and the subreddit is big, many people will start seeing it on
the main page. And that’s where you’ll get amazing traffic!</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">So to make the long story short, <strong>Reddit is not somewhere you just go to submit your posts and leave:</strong> it’s
a one way road, and that’s to actively participate in it, engage in
conversation, help others and at the same time promote your properties
too.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.pinterest.com/"><img alt="pinterest social bookmarking site" class="alignleft size-full wp-image-1613" height="96" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/pinterest-social-bookmarking-site.png" title="pinterest social bookmarking site" width="128" /></a><a href="http://www.pinterest.com/" target="_blank">Pinterest</a> is <strong>the new social media craze</strong>.
While being a new social media website, it already has managed to
become one of the most visited websites on the internet (Alexa Rank:
53). While the majority of the traffic comes from a <strong>female audience</strong>,
lately and after the thousands of posts that spread on the Internet
everyday about it, its male audience started to get an increase in
numbers too. I don’t know if this climbing in traffic will continue, but
if it does it’ll be something that I won’t be able to explain.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">If you’re promoting products that
heavily rely on images and design, then Pinterest is your heaven. You
should create new content with amazing product shots and images and
promote it on Pinterest.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://www.facebook.com/"><span style="color: black; font-family: inherit;"><img alt="facebook social bookmarking" class="alignleft size-full wp-image-1618" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/facebook-social-bookmarking.png" title="facebook social bookmarking" width="128" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">While <a href="http://www.facebook.com/">Facebook</a>
is not even close to a social bookmarking site, it would not be fair
not to include it in this list because it plays such an important role,
even in organic results in Google. In Facebook you have two ways that
you can promote your articles: one is to <strong>submit your articles in your personal feed,</strong> and the other one is to <strong>create a fan page, </strong>and
while promoting that to your friends and readers, distribute your
article links there. In the long run, creating a fan page is the best
thing to do and what we do with our in-house projects is to always buy
some Facebook ads in order to gather a good amount of links to the fan
page, increasing the initial likes by a bit every time we post something
on it. It’s not something you should ignore, no matter what type of
site or store you have.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.twitter.com/"><img alt="twitter social bookmarking site" class="alignleft size-full wp-image-1619" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/twitter-social-bookmarking-site.png" title="twitter social bookmarking" width="128" /></a>While <a href="http://www.twitter.com/">Twitter</a>
as well, is not a social bookmarking site, it really has to be in this
list too. We both added Facebook and Twitter to this list because they
are both part of your social bookmarking efforts. When you submit a post
to social networks and social bookmarking sites, you hope for mentions,
links and visits and both Facebook and Twitter can help you in that. In
Twitter, you create an account and have a stream where you post
interesting links that people who follow you can see. <strong>It’s great for any niche</strong> because when someone follows you it’s sure they will love to see more from what you’re posting and that’s why <strong>you shouldn’t go off topic a lot</strong>.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><img alt="google plus social bookmarking" class="alignleft size-full wp-image-1702" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/google-plus-social-bookmarking.png" title="google plus social bookmarking" width="128" /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Google+ again, is not a social
bookmarking site but if you are serious about your website and
especially if your niche is business oriented, <strong>Google Plus is the place to be</strong>.
And I’m not talking about just pushing your links to your stream; that
won’t do anything. You have to become active and network with other
like-minded people and players in your niche. It’s actually the best
social networking tool you can use to build your reputation. One tip
goes a long way and that is to try to get into the most shared circles
you can (relevant circles with your niche, ofc). There’s only one way to
do that and that is to share amazing content with the network. <strong>The force is strong with this one</strong>.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://www.linkedin.com/"><span style="color: black; font-family: inherit;"><img alt="linkedin social bookmarking" class="alignleft size-full wp-image-1650" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/linkedin-social-bookmarking.png" title="linkedin social bookmarking" width="128" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.linkedin.com/" target="_blank">LinkedIn</a> is <strong>the most popular business social network</strong>. While Facebook has many more times the traffic that LinkedIn does, with LinkedIn <strong>you can build a brand and reputation</strong>
while at the same time explore new job opportunities and partnerships.
You can also use LinkedIn to promote your latest posts by sharing your
posts’ links on your <strong>timeline and in groups</strong> you belong
to and are relevant to that post’s theme. LinkedIn is one of the best
referring sources of traffic for this site and works amazingly well for
all business types of blogs.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.bloggers.com/"><img alt="bloggers social bookmarking site" class="alignleft size-full wp-image-1614" height="120" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/bloggers-social-bookmarking-site.jpg" title="bloggers social bookmarking site" width="120" /></a><a href="http://www.bloggers.com/" target="_blank">Bloggers</a> is a <strong>social network for bloggers</strong> but it can also work very well for social bookmarking too, and <strong>without the need to manually submit your posts</strong>
to it. All you have to do is to add your site to the bloggers platform
and add their banner to your site. Then, when you publish a new post, it
will automatically get it and show it as your blog’s latest post and
others will be able to vote for it. If it gets enough votes, it will be
promoted to the site’s main page and get much better exposure. The key
is to make friendships with other users so you will be able to mutually
vote other people’s posts that are worthy and at the same time get votes
on the good posts you publish too.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.friendfeed.com/"><img alt="friendfeed social bookmarking site" class="alignleft size-full wp-image-1615" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/friendfeed-social-bookmarking-site.png" title="friendfeed social bookmarking site" width="128" /></a>While <a href="http://friendfeed.com/" target="_blank">FriendFeed</a>
has been acquired by Facebook for quite some time and its feed is
displaying the links with a nofollow attribute, it’s still a powerful
website to post your links to. It works like twitter mostly and it’s
very fast to submit a link; so why not utilize FriendFeed to get one
more link to a post you have created? I wish it was still being actively
developed, but well, you can’t have everything, they still have the
site up and running well. :)</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://pinboard.in/"><img alt="pinboard social bookmarking site" class="alignleft size-full wp-image-1672" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/pinboard-social-bookmarking-site.jpg" title="pinboard social bookmarking site" width="128" /></a><a href="http://pinboard.in/">Pinboard</a> is very close to Delicious and gained a lot of traction when there were rumors that Delicious was about to close. <strong>It’s a paid website</strong>
but giving close to $10 once is nothing when you’re in it for the long
run. It’s a great and fast way to bookmark your links so if you haven’t
already registered, do so now. ;)</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.tiltzero.com/"><img alt="social bookmarking community site" class="alignleft size-full wp-image-1623" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/tiltzero-social-bookmarking-site.png" title="social bookmarking community site" width="128" /></a><a href="http://www.tiltzero.com/">TiltZero</a> is the brainchild of this team and <strong>just got released</strong>
to the public. You might think, why the heck does the world need one
more social bookmarking site? And the answer is that if everyone thought
of that, the Internet would have less than 1000 websites. Social
Bookmarking is something we actively do and we thought that creating our
own social bookmarking community would benefit both us and all the
users of the site. Being one of the first people that use a website has
its benefits (having a powerful account when the site goes mainstream),
so jump in the bandwagon with us and start submitting your useful and
inspiring posts with the rest of the world. It’s a general social
bookmarking site that accepts links on many categories. Check it out. ;)</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.blogengage.com/"><img alt="blogengage social bookmarking site" class="alignleft size-full wp-image-1626" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/blogengage-social-bookmarking-site1.jpg" title="blogengage social bookmarking site" width="128" /></a><a href="http://www.blogengage.com/">BlogEngage</a> is
a well established social bookmarking website with good traffic and a
well established community. It’s a general bookmarking site that prefers
business and motivational articles, but anything goes. It’s one of the
sites that are worth your attention because its results can be quite
good for your website. The key is to participate in the community and
make friendships. Give it a try, you will most probably like it.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.bloginteract.com/"><img alt="bloginteract social bookmarking site" class="alignleft size-full wp-image-1627" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/bloginteract-social-bookmarking-site.jpg" title="bloginteract social bookmarking site" width="128" /></a><a href="http://www.bloginteract.com/" target="_blank">BlogInteract</a>
is the brainchild of Bryan Hollis, and while it had some uptime
problems in the past it has now become more stable than ever. Bryan is
heavily involved with it and we’re expecting many great new features for
it in the future. BlogInteract accepts all kinds of posts and if you
haven’t already got an account there, give it a try, we’re sure you’ll
love it.</span></div>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;"> </span></div>
<span style="font-family: inherit;"><div style="text-align: justify;">
<a href="http://chime.in/" style="font-family: inherit;"><img alt="chime.in social bookmarking site" class="alignleft size-full wp-image-1631" height="129" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/chime-social-bookmarking-site.png" title="chime.in social bookmarking site" width="128" /></a></div>
</span><br />
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://chime.in/">Chime</a> is one of the new players in the <strong>Twitter competitor</strong>
list and while maintaining good traffic levels, it hasn’t yet become a
great threat for Twitter yet. This doesn’t mean that you shouldn’t
promote your posts there. In fact it’s a very good site to ping with
your posts and updates and the use of tags is very well thought.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Whenever you add a new “chime”, you should add the most important <strong>tags</strong>
for that specific post and that will help other users find your post
within their most preferred categories. It’s a great promotional tool to
use.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><img alt="diigo social bookmarking site" class="alignleft" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/diigo-social-bookmarking-site.png" title="diigo social bookmarking site" width="128" /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.diigo.com/">Diigo</a> works like Delicious and
has quite some traffic: you should submit your articles to it but more
than that, I can’t find any other reasons than link value to be
more involved.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.fark.com/"><img alt="fark social bookmarking site" class="alignleft size-full wp-image-1661" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/fark-social-bookmarking-site.jpg" title="fark social bookmarking site" width="128" /></a><a href="http://www.fark.com/">Fark</a> is the <strong>strangest of ‘em all</strong>!
A social bookmarking site to submit funny, strange and amusing posts.
If you have a site with funny images, it would be a great site to submit
your posts to. Or any other offbeat news to be honest!</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://zootool.com/"><img alt="zootool social bookmarking site" class="alignleft size-full wp-image-1651" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/zootool-social-bookmarking-site.jpg" title="zootool social bookmarking site" width="128" /></a><a href="http://zootool.com/" target="_blank">ZooTool</a> is
a great social bookmarking website that also has an iPhone application.
You can create folders and submit your articles in a folder, making
their retrieval later on a breeze.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.folkd.com/"><img alt="folkd social bookmarking site" class="alignleft size-full wp-image-1659" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/folkd-social-bookmarking-site.jpg" title="folkd social bookmarking site" width="128" /></a>While <a href="http://www.folkd.com/">Folkd</a> seems
to have a lot of traffic, it does not have a strong community. Just
submit your links and you’re good to go. One day I’ll study this site
more but until that day comes, that’s what I would suggest.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.newsmeback.com/"><img alt="newsmeback social bookmarking site" class="alignleft size-full wp-image-1664" height="64" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/newsmeback-social-bookmarking-site.jpg" title="newsmeback social bookmarking site" width="64" /></a><a href="http://www.newsmeback.com/">NewsMeBack</a> has
decent traffic and from the quality of links seen on the frontpage,
should be moderated, so send your links to it without being afraid of
being blacklisted without reason from the search engines. Other than
that, I can find many more reasons to be more involved in other social
bookmarking networks. It’s a great place to enter a link into but not a
community site.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://tagza.com/"><img alt="tagza social bookmarking site" class="alignleft size-full wp-image-1668" height="64" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/tagza-social-bookmarking-site.jpg" title="tagza social bookmarking site" width="64" /></a><a href="http://tagza.com/">Tagza</a>
is a good place to bookmark your post but that’s it; no reason to stay
longer on the site since the community there is underdeveloped. That’s
what you get when you focus more on promotion and less on the community.
And we’re not saying this to blame them, we’re just trying to repeat it
so we never forget it. ;)</span></div>
<div style="text-align: justify;">
<br /></div>
<h2 class="cufon" style="text-align: justify;">
<span style="font-family: inherit; font-size: small;"><cufon alt="Business " class="cufon cufon-canvas" style="height: 20px; width: 82px;"><cufontext>Business </cufontext></cufon><cufon alt="social " class="cufon cufon-canvas" style="height: 20px; width: 55px;"><cufontext>social </cufontext></cufon><cufon alt="bookmarking " class="cufon cufon-canvas" style="height: 20px; width: 126px;"><cufontext>bookmarking </cufontext></cufon><cufon alt="sites" class="cufon cufon-canvas" style="height: 20px; width: 41px;"><cufontext>sites</cufontext></cufon></span></h2>
<h2 class="cufon" style="text-align: justify;">
<a href="http://www.bizsugar.com/"><span style="color: black; font-family: inherit; font-size: small;"><img alt="bizsugar social bookmarking site" class="alignleft size-full wp-image-1630" height="39" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/bizsugar-social-bookmarking-site.gif" title="bizsugar social bookmarking site" width="128" /></span></a></h2>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.bizsugar.com/">BizSugar</a> is the <strong>most popular social bookmarking website for business articles</strong>.
They’re heavily promoting it using all kinds of online promotion but
most importantly, banner retargeting. This gives BizSugar the traffic it
needs to be the number one social bookmarking site for business blogs
and sites. Getting on the frontpage of BizSugar will give you many
benefits. While the traffic to your story is not that big (approximately
around 200 visits), top stories are distributed via their newsletter;
plus, the link value benefits are great. If you’re in the appropriate
niche, BizSugar is one of the websites you should first submit your
articles to.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://inbound.org/"><img alt="inbound social bookmarking site" class="alignleft size-full wp-image-1636" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/inbound-social-bookmarking-site.jpg" title="inbound social bookmarking site" width="128" /></a><a href="http://inbound.org/">Inbound</a> is a brand new website, but being created by the CEOs of <a href="http://www.seomoz.org/" target="_blank">SEOmoz</a> and <a href="http://www.hubspot.com/" target="_blank">HubSpot</a>,
we’re sure that it’ll soon be the most popular bookmarking site when it
comes to sharing Internet Marketing posts. It’s mostly for Internet
marketers, but will gladly accept anything about blogging, startups and
business too. And in the Internet marketing space, this is the front
page you should be looking at every day for all your link building and
Internet marketing news and updates. <strong>It’s a tool that shouldn’t be missed</strong>.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://myseocommunity.com/"><img alt="myseocommunity social bookmarking site" class="alignleft size-full wp-image-1647" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/myseocommunity-social-bookmarking-site.jpg" title="myseocommunity social bookmarking site" width="128" /></a><a href="http://myseocommunity.com/" target="_blank">My SEO Community</a> is
a social bookmarking community dedicated to search engine optimization
posts, but also focuses on blogging and design too. It’s a <strong>great place to start your bookmarking efforts</strong>
because it’s a moderated community and if your social media profile is
not that powerful, it’s a great place to submit your good content and
you will have a good chance for inclusion to the main page. The
moderating team is great and the articles accepted are 99% frontpage
worthy.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.mmosocialnetwork.com/"><img alt="mmo social bookmarking site" class="alignleft size-full wp-image-1649" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/mmo-social-bookmarking-site.jpg" title="mmo social bookmarking site" width="128" /></a><a href="http://www.mmosocialnetwork.com/" target="_blank">MMO Social Network</a> is focused in the general niche of making money online but also accepts articles about blogging and web design. It’s also <strong>moderated</strong>
so it’s a good place to start submitting your helpful articles if you
think that they belong to what the site wants in terms of content
category.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.blokube.com/"><img alt="blokube social bookmarking site" class="alignleft size-full wp-image-1654" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/blokube-social-bookmarking-site.jpg" title="blokube social bookmarking site" width="128" /></a><a href="http://www.blokube.com/" target="_blank">Blokube</a>
is a Social Media oriented social bookmarking website that accepts
everything from SEO to WordPress, design and technology articles. It’s
traffic is quite good and you should invest some time and connect with
its members.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<a href="http://www.serpd.com/"><span style="color: black; font-family: inherit;"><img alt="serpd social bookmarking site" class="alignleft size-full wp-image-1667" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/serpd-social-bookmarking-site.jpg" title="serpd social bookmarking site" width="128" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.serpd.com/">Serpd</a>
is all about Internet Marketing and Blogging. If your website is about
something related, Serpd is the place to be. While not having the best
traffic on the planet, Serpd has a <strong>very strong community</strong>,
in fact one of the best, and believe me, that makes up for the lack of
amazing traffic. One other thing that I haven’t seen on any other social
bookmarking site is that when you try to submit a second link from the
same domain it won’t let you, forcing you to submit something else first
and then something from the same domain again. This forces spammers to
leave the site without submissions from the same site again, and at the
same time, Seprd wins because of new quality content that they wouldn’t
otherwise have. When I need to submit something from my domain again, I
just open my RSS feed, get something from my favorites that has provided
me with something useful and submit it, waiting 2-3 hours before I
submit the next one.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.tipd.com/"><img alt="tip'd social bookmarking site" class="alignleft size-full wp-image-1653" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/tipd-social-bookmarking-site.jpg" title="tip'd social bookmarking site" width="128" /></a><a href="http://www.tipd.com/">Tip’d</a> is a social bookmarking site that is different from all the rest. It’s focused on a sub-niche, sharing <strong>financial</strong>
posts. While most of us would easily bet that the site wouldn’t have a
lot of traffic, Tip’d showed us that it can happen, having a lot of
traffic, more than the most social bookmarking sites out there. If your
niche is finance and economy related, not only this is a great
opportunity for a good amount of visits to your blog but also a great
source of information laser-targeted to your niche.</span></div>
<div style="text-align: justify;">
<br /></div>
<h2 class="cufon" style="text-align: justify;">
<span style="font-family: inherit; font-size: small;"><cufon alt="Programming " class="cufon cufon-canvas" style="height: 20px; width: 128px;"><cufontext>Programming </cufontext></cufon><cufon alt="Social " class="cufon cufon-canvas" style="height: 20px; width: 58px;"><cufontext>Social </cufontext></cufon><cufon alt="Bookmarking " class="cufon cufon-canvas" style="height: 20px; width: 126px;"><cufontext>Bookmarking </cufontext></cufon><cufon alt="sites" class="cufon cufon-canvas" style="height: 20px; width: 41px;"><cufontext>sites</cufontext></cufon></span></h2>
<div style="text-align: justify;">
<a href="http://news.ycombinator.com/"><span style="color: black; font-family: inherit;"><img alt="hacker news social bookmarking site" class="alignleft size-full wp-image-1633" height="125" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/hacker-news-social-bookmarking-site.jpg" title="hacker news social bookmarking site" width="125" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://news.ycombinator.com/">Hacker News</a> is the number one source for programming, geeky, and startup material. Its <strong>community is very helpful</strong>
and will many times go to great lengths to help a person who has a
technical problem. Even some types of business articles go very well in
hacker news because let’s not forget, programmers also need to promote
themselves, their startups and their projects too. Personally I’ll check
Hacker News at least once a day to see anything new interesting to
read, most of the times spending more than 30 minutes reading great
content found on the site.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.dzone.com/"><img alt="dzone social bookmarking site" class="alignleft size-full wp-image-1644" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/dzone-social-bookmarking-site.jpg" title="dzone social bookmarking site" width="128" /></a><a href="http://www.dzone.com/">DZone</a>
is an amazing website for any type of developer out there. You will
find anything about tutorials, videos, cheat-sheets plus help from the
community. If you are a programmer, not only you should submit your
posts there, but also participate in the community and often check out
their hope page for programming gems that can help you in your work.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<h2 class="cufon" style="text-align: justify;">
<span style="font-family: inherit; font-size: small;"><cufon alt="Web " class="cufon cufon-canvas" style="height: 20px; width: 44px;"><cufontext>Web </cufontext></cufon><cufon alt="Design " class="cufon cufon-canvas" style="height: 20px; width: 67px;"><cufontext>Design </cufontext></cufon><cufon alt="& " class="cufon cufon-canvas" style="height: 20px; width: 18px;"><cufontext>& </cufontext></cufon><cufon alt="Development " class="cufon cufon-canvas" style="height: 20px; width: 126px;"><cufontext>Development </cufontext></cufon><cufon alt="Social " class="cufon cufon-canvas" style="height: 20px; width: 58px;"><cufontext>Social </cufontext></cufon><cufon alt="Bookmarking " class="cufon cufon-canvas" style="height: 20px; width: 126px;"><cufontext>Bookmarking </cufontext></cufon><cufon alt="sites" class="cufon cufon-canvas" style="height: 20px; width: 41px;"><cufontext>sites</cufontext></cufon></span></h2>
<div style="text-align: justify;">
<a href="http://www.designfloat.com/"><span style="color: black; font-family: inherit;"><img alt="design float social bookmarking site" class="alignleft size-full wp-image-1637" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/design-float-social-bookmarking-site.jpg" title="design float social bookmarking site" width="128" /></span></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.designfloat.com/" target="_blank">Design Float</a> is the <strong>most popular design oriented social bookmarking website</strong>
on the Internet. It’s a great place for Designers to get feedback on
their creation and showcase their work or templates; plus it loves
programming tools that will help designers make their life easier.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">If you’re a freelancer and trying to
find more ways to get new clients over the Internet, you should really
start promoting your designs and create freebies for other designers and
start distributing them through social bookmarking.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.thewebblend.com/"><img alt="thewebblend social bookmarking site" class="alignleft size-full wp-image-1638" height="134" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/thewebblend-social-bookmarking-site.png" title="thewebblend social bookmarking site" width="128" /></a><a href="http://www.thewebblend.com/" target="_blank">The Web Blend</a>
is a web designer community that was recently re-designed and has went
live for the public. It’s one of the best social bookmarking sites to
promote your articles and designs, plus it allows news about
advertising, Apple and programming too. It’s by far the best designed
social bookmarking site and that’s how it should be, because being a
site for designers, it too should have an amazing design! Kudos to the
guys who redesigned it.</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.designpoke.com/"><img alt="design poke social bookmarking site" class="alignleft size-full wp-image-1640" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/design-poke-social-bookmarking-site.jpg" title="design poke social bookmarking site" width="128" /></a><a href="http://www.designpoke.com/" target="_blank">Design Poke</a> is
a design oriented social bookmarking site, but also focuses on
marketing, usability design, programming and WordPress too. It doesn’t
have that much traffic (compared to the two previous sites) but it’s a
great place for you to submit your link to. After all, you never know
how well it’ll do, plus, when you are promoting your articles, posts or
designs, you should think that whoever does the most work will win in
the end. (This is not a life lesson, nor an Internet marketing one:
please don’t sue me for giving advice that didn’t work out for you. ;))</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><a href="http://www.dezinews.com/"><img alt="dezinews social bookmarking site" class="alignleft size-full wp-image-1641" height="128" src="http://moneytized.s3.amazonaws.com/wp-content/uploads/dezinews-social-bookmarking-site.jpg" title="dezinews social bookmarking site" width="128" /></a><a href="http://www.dezinews.com/">DeziNews</a>
is another design oriented social bookmarking site and a great place to
find freebies for your own designs too! Traffic is close to DesignPoke
but as we said before, the links are permanent and you want the extra
exposure. In addition, you never know which social bookmarking site will
be the dominant one in two years from now, so why miss the chance to
have an account in great standing on the site?</span></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><strong>This is not a complete list</strong> of the social bookmarking sites that exist on the internet. And it shouldn’t be! <strong>The rule “the more the better” doesn’t apply to social bookmarking too</strong>.
Stay away from services that will submit your website to 1000′s of
social bookmarking sites, because most of them are not moderated and you
really don’t want your links to be placed together with God knows what
else. You WILL see an increase in your ranks, but that’s only temporary.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">I’ve tried to add all the best social bookmarking sites that I could
think of and am using, and it took me more than 10 hours to write this
article. <strong>If you think that I’ve missed a network that is worth
mentioning and will give value to other people, it will not only help
me, but will also help the thousands of others that will read this post</strong>. Help me help them!</span></div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com42tag:blogger.com,1999:blog-3850292960628411577.post-2757976191109639172013-05-05T21:35:00.001-07:002014-02-09T08:46:27.326-08:00Social Media Affects Your Website's Search Ranking<br />
<div style="text-align: justify;">
Social media is a great tool for communicating with clients, but it can also have a secondary benefit for your practice by boosting your website's search ranking.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The way most clients will find you is by searching on the Internet for a lawyer. Hopefully they'll narrow their search by area of law and location, but even then there are lots of competitors out there. Having a professional and informational website can be a great way to get clients, but it doesn't work if no one sees it.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Getting a professional consultant to manage your website's search engine optimization can be a valuable way to improve your rankings. But you can also help yourself by stepping up your social media presence.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
To prove that claim, we have some insight into how Google and other search engines rank web pages.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
The way websites are ranked is based on how useful and relevant the search engine thinks the page will be. To determine that, they look for how many other sites link to you, how often you're mentioned in other places, and how much activity you have on your webpage.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
That last one can be measured in several ways. It can be done via the number of page views; or by the level of engagement on your site in the form of posts, tweets, and other social interactions. When it comes to search rankings, both methods are used.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Bottom line: The more active your website is, the higher your rank will be.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Making your website more active could mean writing lots of informational blog posts and drumming up online goodwill so that people will link to and reference your site. But you're a full-time lawyer, so that's probably not going to happen.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Social media posts offer an easier way to get more traffic and boost your search rankings. A quick post asking your followers a question or linking to an article can still increase traffic.</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
In fact, the more active you are on Google+, Facebook, and Twitter, the higher your website will appear in Google's search-engine results, according to a recent study by the SEO firm TastyPlacement Inc. Perhaps unsurprisingly, more Google+ activity led to a higher ranking in Google's search results. (Not sure what Google+ can do for you? Click here to find out.)</div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Once you get that higher search ranking and more traffic, you'll hopefully also get some extra business. But even if your new audience doesn't hire you right away, at least they're getting you closer to the top of Google's search results.</div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com2tag:blogger.com,1999:blog-3850292960628411577.post-23607411429871999652013-05-05T08:05:00.002-07:002014-02-09T08:46:27.317-08:00[ Explained ] Basics Of On-Page SEO <div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJXr1OTVLuIyLuou9HDzExXbwB_CeGRowK9zVUocnxKZpU96dapaBT7YZxQinvSCNJatqGTcEREx7oRMi9kdMr0wl9aSkIngXVyJFtJNikavY3k6h96ezehX-zoPFWAnpxTPziXyJiWc/s1600/Basics+Of+On-Page+SEO.PNG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="180" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtJXr1OTVLuIyLuou9HDzExXbwB_CeGRowK9zVUocnxKZpU96dapaBT7YZxQinvSCNJatqGTcEREx7oRMi9kdMr0wl9aSkIngXVyJFtJNikavY3k6h96ezehX-zoPFWAnpxTPziXyJiWc/s200/Basics+Of+On-Page+SEO.PNG" width="200" /></a></div>
<div style="text-align: justify;">
Our host is <i style="font-family: inherit; line-height: 19px; outline: none medium; text-align: justify;">Samantha Kirk</i><span style="font-family: inherit; font-size: small; line-height: 19px; text-align: justify;">, last week we published "How To Get Your Blogs On-Page SEO Right In 2013 " but exactly what is On Page SEO ? in this post Samantha explains .See How To </span><span style="font-family: inherit;"><span style="line-height: 19px; outline-width: medium; text-align: justify;">Become a guest author on Spice Up Your Blog</span></span><span style="font-family: inherit; font-size: small; line-height: 19px; text-align: justify;">. </span><span style="font-family: inherit; font-size: small; line-height: 19px; text-align: justify;">Off-site </span><span style="font-family: inherit; line-height: 19px; text-align: justify;"><span style="line-height: 19px; outline-width: medium;">SEO</span></span><span style="font-family: inherit; font-size: small; line-height: 19px; text-align: justify;"> is a common practice and a number of site owners think that’s the main way you can generate traffic to a website. However, there are on-page tactics that make a huge difference, as well. Making small changes to your various pages will help you increase visibility on the web. </span><span style="font-family: inherit; line-height: 19px; text-align: justify;">At the end of the day, it all comes down to how high your site or blog is ranked by the search engines. In order to give you every chance to move up the search ranking ladder, on-page SEO tactics should be given a try. The results will begin to show up in a few weeks time.</span></div>
<span style="font-family: inherit; font-size: small; line-height: 19px;">
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="font-family: inherit; font-size: small; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">Here’s what on-page SEO is all about.</span></span></div>
<span style="font-family: inherit; font-size: small; line-height: 19px;">
</span><span style="font-family: inherit; line-height: 19px; outline-width: medium;"></span>
<h4 style="background-color: white; line-height: 19px; outline: none medium; text-align: justify;">
<span style="color: #990000; outline: none medium;"><span style="font-family: inherit;">The right title.</span></span></h4>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;">Search engine robots always land up on the title of a page before checking out other areas. This makes choosing the right title a crucial task. Some SEO experts will tell you that concise, unique titles will help you more than anything else.</span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">Make sure you take the time to think of descriptive page titles that are not longer than 60-70 characters. The pixel width of the characters will also be taken into consideration.</span></span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">See </span><span style="color: #e34600; font-family: inherit;"><span style="line-height: 19px; outline-width: medium;">6 Tips To Heart-Stopping Post Titles</span></span><span style="font-family: inherit; line-height: 19px;">.</span></span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<h4 style="background-color: white; line-height: 19px; outline: none medium; text-align: justify;">
<span style="color: #990000; outline: none medium;"><span style="font-family: inherit;">The perfect meta description.</span></span></h4>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;">This on-page tactic doesn’t affect rankings directly, but it can help attract more visitors to your pages. The meta description is what a person reads when your site comes up among others on the results page.</span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">If the description is unique and interesting, the chances of people choosing to click on your site are slightly higher than others.</span></span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">See </span><span style="color: #e34600; font-family: inherit;"><span style="line-height: 19px; outline-width: medium;">Add A Meta Description To Your Full Blog And Each Post On Blogger</span></span></span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<h4 style="background-color: white; line-height: 19px; outline: none medium; text-align: justify;">
<span style="color: #990000; outline: none medium;"><span style="font-family: inherit;">Image optimization.</span></span></h4>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">Most people don’t pay much attention to the file names of images. “Image123.jpg” or “pic001.jpg” are usually the default names and that’s how they remain when they’re uploaded on a site. If you want your site ranking to increase, then give each image an appropriate name depending on what it is about.</span></span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">Also, you should use ‘alt text’ in order to describe an image. A bot doesn’t actually view the image, but checks out relevant tags that is referred to as alt text. If you can add a caption to an image, use the right keywords while doing so.</span></span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">See </span><span style="color: #e34600; font-family: inherit;"><span style="line-height: 19px; outline-width: medium;">5 Top Tips For Optimizing Images For Google Search</span></span><span style="font-family: inherit; line-height: 19px;">.</span></span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<h4 style="background-color: white; line-height: 19px; outline: none medium; text-align: justify;">
<span style="color: #990000; outline: none medium;"><span style="font-family: inherit;">Importance of internal linking.</span></span></h4>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;">Create links to your important pages through all your posts. While relevant external links are required, you should also consider adding a few that lead to different sections of your site. </span><span style="background-color: white; font-family: inherit; line-height: 19px;">This will help the bots and visitors to find additional information if needed - an on-page SEO tactic that can help distribute traffic throughout your website.</span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<div style="text-align: justify;">
<span style="background-color: white; color: #990000; font-family: inherit; line-height: 19px;"><br /></span>
<span style="background-color: white; color: #990000; font-family: inherit; line-height: 19px;"><b>Content.</b></span><br />
<span style="background-color: white; color: #990000; font-family: inherit; line-height: 19px;"><b><br /></b></span></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">Last but not the least; you should concentrate on putting up fresh, unique content. This is the best way you can attract search engine spiders followed by visitors. Sites that have interesting content are bound to make it to the top of rankings.</span></span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">See </span><span style="color: #e34600; font-family: inherit;"><span style="line-height: 19px; outline-width: medium;">Dollar’s in the Details : Creating Quality Content</span></span><span style="font-family: inherit; line-height: 19px;">.</span></span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span style="background-color: white; font-family: inherit; line-height: 19px;"><span style="font-family: inherit; line-height: 19px;">On-page SEO tactics might not be much to take care of, but they can really make a difference. It wouldn’t hurt to try these SEO moves once in a while. It could really help your site get that extra push that it has been lacking all this while.</span></span></div>
<span style="background-color: white; font-family: inherit; line-height: 19px;">
</span>BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-88373029043750816932013-05-05T07:59:00.002-07:002014-02-09T08:46:27.418-08:00Google Plus Today For Tomorrow’s SEO<br />
<div style="background-color: white; line-height: 19px; outline: none medium; text-align: justify;">
<span style="font-family: inherit;">Our host is <i style="outline: none medium;">Samantha Priest</i><span style="font-size: small;">, it's been some time since Google added social signals to their algorithm here Samantha looks at how you can use Google+ to boost your blogs SEO.See How To </span><span style="outline-width: medium;">Become a guest author on Spice Up Your Blog</span><span style="font-size: small;">. </span><span style="font-size: small;">Over the last few years, the significance of social media in </span><span style="outline-width: medium;">SEO</span><span style="font-size: small;"> has increased manifolds. If you are really serious about</span><span style="outline-width: medium;">obtaining the top positions in search engine results</span><span style="font-size: small;">, you should devote adequate time building your social media influence. Search engines like Google have taken several big steps to integrate social media with search engine optimization. Google’s social network Google+ (or Plus) is, therefore, one of those social networks that you can never ignore. The kind of influence you build on Google+ will play a vital role in ranking your site in SERPs.</span></span></div>
<h2 style="background-color: white; line-height: 19px; outline: none medium; text-align: justify;">
<span style="font-family: inherit; font-size: small;">But do you know how to boost your site’s SEO with Google+ ?</span></h2>
<span style="font-family: inherit;"><br style="background-color: white; line-height: 19px; outline: none medium;" /><span style="background-color: white; line-height: 19px;">Though the roll out of Google+ has also led to a lot of debate as to whether it has the potential to last, it’s quite evident now that the social network is making its present felt quite strongly in Google search results.</span><br style="background-color: white; line-height: 19px; outline: none medium;" /><br style="background-color: white; line-height: 19px; outline: none medium;" /><span style="background-color: white; line-height: 19px;">One thing that you should always remember is that Google+ should not be treated in the same way as Facebook or Twitter. In order to improve the SEO of your web properties, you should treat Google+ as an indispensable web marketing tool. And it’s just the right time (as the competition is yet to build) to increase your Google+ usage and create an online presence that supports your website’s SEO.</span><br style="background-color: white; line-height: 19px; outline: none medium;" /><br style="background-color: white; line-height: 19px; outline: none medium;" /><span style="background-color: white; line-height: 19px;">Here are some of the best tips to follow.</span></span><h4 style="background-color: white; line-height: 19px; outline: none medium;">
<span style="color: #990000; outline: none medium;"><span style="font-family: inherit;">Set Up a Google+ Account (for Your Website, Business or Blog)</span></span></h4>
<span style="background-color: white; font-family: inherit; line-height: 19px;">If you don’t have a Google+ page for your blog yet, it’s time to set up an account right away. While creating the account, don’t forget to furnish all the required details to increase completeness (read authority).</span><span style="font-family: inherit;"><br /><br style="background-color: white; line-height: 19px; outline: none medium;" /><span style="background-color: white; line-height: 19px;">See </span><span style="color: #e34600; font-size: small;"><span style="background-color: white; line-height: 19px; outline-width: medium;">How To Create A Google+ Fan Page</span></span><span style="background-color: white; line-height: 19px;">. </span></span><h4 style="background-color: white; line-height: 19px; outline: none medium;">
<span style="color: #990000; outline: none medium;"><span style="font-family: inherit;">Optimize the Page</span></span></h4>
<span style="background-color: white; font-family: inherit; line-height: 19px;">The second important step is to optimize your Google+ business page so that it carries more weight as far as SEO is concerned. Thankfully, this social network doesn’t only allow you to link to your other social media profiles but also permits you to directly embed links from within your bio.</span><span style="font-family: inherit;"><br /><br style="background-color: white; line-height: 19px; outline: none medium;" /><b style="background-color: white; line-height: 19px; outline: none medium;">While optimizing, do the following –</b><br style="background-color: white; line-height: 19px; outline: none medium;" /></span><ul style="background-color: white; line-height: 19px; outline: none medium;">
<li style="outline: none medium;"><span style="font-family: inherit;">Don’t exceed the length of your page tag line than 21 characters</span></li>
<li style="outline: none medium;"><span style="font-family: inherit;">Include important keywords in the about section</span></li>
<li style="outline: none medium;"><span style="font-family: inherit;">Link to your site from your Google Plus page</span></li>
<li style="outline: none medium;"><span style="font-family: inherit;">Create circles around industry-relevant keywords</span></li>
<li style="outline: none medium;"><span style="font-family: inherit;">Share fresh content, videos, images</span></li>
<li style="outline: none medium;"><span style="font-family: inherit;">Increase the frequency of posting</span></li>
</ul>
<span style="font-family: inherit;"><br style="background-color: white; line-height: 19px; outline: none medium;" /><span style="background-color: white; line-height: 19px;">If you’re a new page owner, it’s advisable to check out some of the popular brand profiles, look at their way of optimization and learn from them.</span></span><h4 style="background-color: white; line-height: 19px; outline: none medium;">
<span style="color: #990000; outline: none medium;"><span style="font-family: inherit;">More Followers, the Better</span></span></h4>
<span style="background-color: white; font-family: inherit; line-height: 19px;">Once your Google+ business page is all set and optimized, it’s time to grow your following. Though social media is not basically a numbers game, the number of followers you have on Google+ will play an important role in ranking your site in Google search results. Some of the key things that you can do to gather more followers include sharing your G+ page link on other social networks, adding the Google+ badge to your website, placing a link to your G+ page on your website etc. In any case, you need to be more active on the social network to continue to acquire new followers.</span><span style="font-family: inherit;"><br /><br style="background-color: white; line-height: 19px; outline: none medium;" /><span style="background-color: white; line-height: 19px;">See </span><span style="color: #e34600; font-size: small;"><span style="background-color: white; line-height: 19px; outline-width: medium;">How To Use Google + Ripples To Find Influential Bloggers In Your Niche</span></span><span style="background-color: white; line-height: 19px;">.</span></span><h4 style="background-color: white; line-height: 19px; outline: none medium;">
<span style="color: #990000; outline: none medium;"><span style="font-family: inherit;">Claim Google+ Authorship</span></span></h4>
<span style="font-family: inherit;"><span style="background-color: white; line-height: 19px;">Yes, </span><span style="color: #e34600; font-size: small;"><span style="background-color: white; line-height: 19px; outline-width: medium;">Google+ also offers content creators an opportunity to claim the authorship for the content</span></span><span style="background-color: white; line-height: 19px;"> they have created. By claiming your authorship here, you can quickly set yourself apart in Google search results and improve your site’s SEO. For detailed information on how to claim your authorship on G+, </span><span style="color: #e34600; font-size: small;"><span style="background-color: white; line-height: 19px; outline-width: medium;">you can visit this official page</span></span><span style="background-color: white; line-height: 19px;">.</span></span><h4 style="background-color: white; line-height: 19px; outline: none medium;">
<span style="color: #990000; outline: none medium;"><span style="font-family: inherit;">Use the +1 Button</span></span></h4>
<span style="font-family: inherit;"><span style="background-color: white; line-height: 19px;">Similar to a retweet in a sense, the +1 endorsement is something you can never ignore when using Google+ to improve SEO. In fact, the total number of +1s a particular web page is shown in Google search results. So, it’s important to make sure that you have the </span><span style="color: #e34600; font-size: small;"><span style="background-color: white; line-height: 19px; outline-width: medium;">+1 button placed on your website or blog</span></span><span style="background-color: white; line-height: 19px;">. The more +1s your content receives, the better visibility it will achieve in Google search results.</span></span>BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com3tag:blogger.com,1999:blog-3850292960628411577.post-67816784025944986232013-05-05T07:20:00.000-07:002014-02-09T08:46:27.395-08:00Create and Publish Your Blog Feed with FeedBurner<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOyaY7YUth3hl2Umwd3hm_nyYavU81N19mbTEXVMmxIsR6_i2RdpJ7lvB6UFYcDg88_oTa1x32vUA_DX7A41_vOUIEGrCxhsvwVAk7g6pTw8YiIBWX2Nmjoxoa8E6ieWDdW0t-TlkGZCk/s1600/Create+and+Publish+Your+Blog+Feed+with+FeedBurner.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOyaY7YUth3hl2Umwd3hm_nyYavU81N19mbTEXVMmxIsR6_i2RdpJ7lvB6UFYcDg88_oTa1x32vUA_DX7A41_vOUIEGrCxhsvwVAk7g6pTw8YiIBWX2Nmjoxoa8E6ieWDdW0t-TlkGZCk/s1600/Create+and+Publish+Your+Blog+Feed+with+FeedBurner.jpg" /></a></div>
<br />
Feedburner is a free service provided by Google that enables a more smart control over our blogs Rss feed. Some of the main options on feedburner are in dept stats, Subscribe By Email option and you can even publish AdSense ads within the feed. In this Tutorial i show you step by step instructions with Screenshots exactly How to Create a Feedburner feed using your Blogs default Feed and then Redirecting your Default feed to Feedburner Feed.<br /><span id="more-67"></span><br />
<div class="clear">
</div>
Initially every blogger blog has a feed address like this.<br />
<code><a href="http://edit-html.blogspot.com/feeds/posts/default?alt=rss">http://edit-html.blogspot.com/feeds/posts/default?alt=rss</a></code><br />
You may have noticed the above feed for blog redirects to a Feedburner URL.<br />
<br />
How to Create Your Blog Feed with Feedburner?<br />
<ul>
<li>go to <b><a href="http://feedburner.google.com/" rel="nofollow" target="_blank">Feedburner</a></b> Site.</li>
<li>Login with your <b>Google</b> account <b>Username</b> and <b>Password</b>.</li>
<li>In <b>Feedburner Dashboard</b>, put your blog default feed address in “<b>Type your Blog or Feed Address here</b>” field<code>http://<span style="font-size: 22px; font-variant: small-caps; font-weight: bold; text-decoration: blink;">yourblogname</span>.blogspot.com/feeds/posts/default?alt=rss</code></li>
<li>After adding the feed address click Next button like below.<img alt="" border="0" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieMCfgzkVC-sIbrpY8JMNGO1Ok-it79frqpmg7aczlgkOHCduCk4fW32jtjpgLD5M2M-NeM_HWedOsd3kky8y4hp1wxMkdwz7P-DrtluFi3zbl9OFOsY_41T-hxsQEg45jDjMSul1cHn6g/+Blogger+Feed+Url+to+Feed+Burner.png" /></li>
<li>it Grabs the Blog Title and Feedburner Address like below.<div class="info">
Titile will be the same as your Blogs title.<br />Feedburner Address grabs from the Domain name and adds a random letters at the end.<br />if you using the Blogspot domain name then it will grabs like this<br /><code>http://feeds.feedburner.com/blogspot/XTzZp</code> (this is E Style Demo Template blog feed)<br />For this tutorial i am using the my blog domain name.<br />so take a look this screen shot, how it grabs the Usernaame!</div>
<img alt="" border="0" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw0MC8kP0KC9Ywps6ViMRL8gMyvPqFrUE8M9N3vvxLusl7yGpg7zRlp9sdYpXhVn6WyYeduIuvPyFzhTvsLJiI_76usqG-kOHjQibTlWEMuk_JxMD8iXh3VHP49jZhyy7NmY-Je-d7vfRW/+feedburner+title+and+url+of+the+blogger+feed.png" /></li>
<li>Change the <b style="color: red;">Title</b> and <b><span style="color: red;">Feedaddress.com</span></b> Url What exactly you want.</li>
<li>if you choose an existing <b>username</b>, then you will get the <span style="color: red;">Error</span>!<img alt="" border="0" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtqhFco_Fd-j5WNmQHkrOA_IjFGpuDS8UK6qe458IEqiOuLbyw4CzMC6bRxFoTojg9tRgUI8wK9dcPdpsndW4Z3epVIC9y5joUhc5VwrlFXg-xOWQ7InG2sM7ed3jqSkoX1SQ47ztoq9Rq/+will+get+the+error+by+selecting+the+already+regestered+name.png" /></li>
<li>so Change the similar feed address that you like, and click <b style="color: red;">Next</b><img alt="" border="0" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiEWu5Gvu1jp7z6Ouv8h8RpE-ss5nGWFoqS-PfG8qkWwrIih0hB9iunpBDqrciVE2vNlIDxrcN02DmRVYqFYzjU6hpknKrJ_XKo_nUgD2sHCY66CmMbt6Ev96VMxXOGeUfh5R71v-M-4wi/+the+right+feedburner+feed+url.png" /></li>
<li>a message will appear that show’s the feed is created. click <b style="color: red;">Next</b> to Set some Options.<img alt="" border="0" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpWM_vwWyF-zchjzkLRmVx1Tmu5v6KotSAr6tSxgIReprkHox-OBILh3mUq8qO2GAzID67_jxKiXUtaOKjEGPqMNdSWC-r16vc8S7lRZjgEa67R4W813rFhIwP5fjDMdkwPzEMSUbqEqtD/+nex+after+choosing+the+url.png" /></li>
<li>Click the Check boxes as below and click <b style="color: red;">Next</b> button.<img alt="" border="0" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcUAFlqn3GDw8hXBirOj95IfJ2ptSvIzwSfzVSPgmzs4owP3rf5cfJWw8n-Sy8XZBu3PhOun_b3lS6ncJb2vXcqLnxp5iWf8lyobcycp0nwesFGyIlQ2fuvKX5RsgRDtSlfQaiGnZK1Xy/+the+feed+burner+options.png" /></li>
<li>another message will appear that show’s your <b>Feed is Updated.</b><img alt="" border="0" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi12Dda1o1ZoiybniQ2jRGbvUXw0UfnrATJhZChE8X74BcZAGosvFNDHyHQ5ohflovrMOns3LMuXSK0sara1sdEKeCyOEEwZXH1qZL8wCPgs7VXQQkHJkrYInVBMrXe4etMhSJs1u-8rUNE/+success+image.png" /></li>
</ul>
<h3>
Redirecting Your Blog default feed to Feedburner feed</h3>
<ol>
<li>Go to <b style="color: red;">Blogger Dashboard</b> -> click <b style="color: red;">Settings</b>.<br />
<img alt="" border="0" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxCx7XrHD7jONo-gFPoNUjoOtHn8TgYa1kr3OS1x45I_MYK7cTQGR3WkDFNZaKscOTdUDJCu72K9yM4lwvlBWt4rlH9blI4av1L273l3p0KEgUpszixQEuN0oxlX8UQdLJG_s5B4mOgrxW/+redirect+the+feed+to+feedburner.png" /></li>
<li>Click the <b style="color: red;">Site Feed</b> tab -> <b style="color: red;">Post Feed Redirect Url</b></li>
<li>Enter the <b>Feedburner Feed Url</b> in the Input Box and click <b><span style="color: red;">Save</span></b> Button to save the settings<img alt="" border="0" class="screenshot" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM0_GcxUM81ZknusGLMA5ZCGYkcW-x8hnvayTCcGsRdXb1eFYDCrBzVcOIuwf1fH4rjm3o5O1pcrKz6-_aF2jz-VQal7o0kB9Fe2jxRMqD0oK0MoANo_zR5Wltx04pt5WZ7pNJgDC8gOEN/+redirect+feed+url+to+blogger.png" /></li>
</ol>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-82040470901053759532013-05-03T19:17:00.003-07:002014-02-09T08:46:27.412-08:00Google Heat Map Adsense<div style="text-align: justify;">
Google adsense advertisement is the best way for any blogger to earn
through Blogging and there websites but the problem is always about
which is the best place to place the adverts. Prime aim of any blogger
is to give excellent content and he can’t take a risk to place
advertisement at the middle of the post which is very annoying. Also,
after Google panda updates, it’s become necessary to keep less ads
around content and above the fold. Though Google itself suggest to place
ads above the fold for higher CTR. Anyways, lets get back to original
topic and learn some best adsense placement ideas. <span style="font-family: inherit; text-align: justify;">Adsense placement is quite tricky and </span><span style="font-family: inherit; text-align: justify;">placing your Google adsense
adverts can double your traffic if you place your advertisement with
trick and without annoying readers. With little cleverness you can
actually double your Google adsense income.</span></div>
<h3 style="text-align: justify;">
<span style="font-family: inherit; font-size: small;">
Adsense Heatmap Image:</span></h3>
<div style="text-align: justify;">
<span style="font-family: inherit;">I have visited many discussion forum and here goes the guide which
might help you to increase your revenue: First of all have a look at
official <strong><em>Google adsense </em></strong><strong><em>heat map</em></strong> Which clearly talks about the best adsense placement without annoying your readers.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<div style="text-align: justify;">
<span style="font-family: inherit; margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_A2M8s3tRELc59RwuqCdUCT_W55xzxAU3pJYFzZOUeODmJ0sPGoAOZEiENnIcGrK1ek9PWw1NONvr4IaMuv9oSdXq08C-0cxl5ZBSaJ5hgdCm4uGDmUtN69ll4iBrjlTitvkc90S18So/s640/Google+Heat+Map+Adsense.jpg" width="480" /></span></div>
</div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">It’s a fact that non technology websites make double of the money
then technology websites reason being that reader of technology websites
are well aware of advertisement and they generally ignore the
advertisement but on the other hand non technology websites like dating,
astrology websites make more money with google advertisement because of
unawareness of the readers.</span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Another fact is when readers from technology websites read the
article and they find it useful they click on advertisement to
appreciate the article. While putting advertisement do you think of
following points:</span></div>
<ul>
<li style="text-align: justify;"><span style="font-family: inherit;">Why your readers are here?</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">Content is more important or advertisement?</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">Where to keep the advertisement without hampering your readers point and without knocking down your advertisement.</span></li>
</ul>
<div style="text-align: justify;">
<strong><span style="font-family: inherit;">“Smart work is always better then hard work”</span></strong></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">You might think that I can write better
post and get more organic traffic and Better traffic = Better Income.
But think the other way placing adverts at the right place and at the
same time concentrate on better quality of post thus you will accomplish
both the task: <strong>Traffic and income</strong></span></div>
<div style="text-align: justify;">
<strong><span style="font-family: inherit;">Best advertisement placement guide:</span></strong></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Before advertisement have a look at maximum allowed adsense ad units Before the post ( text advertisement have better CTR then the image advertisement at that place)</span></div>
<ul>
<li style="text-align: justify;"><span style="font-family: inherit;">Have a look at <span class="removed_link" title="http://www.seounleashed.com/">SEOunleashed</span>
he cleverly placed the advertisement (Yahoo advertisement) between the
posts which does not even look like an advertisement but you need to be
very careful with keywords when you planning to do anything like this.</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">Ad placement at Top of the article header again have better Google adsense CTR.</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">If you thinking only about revenue you can place advertisement between the content.( Link units )</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">Google search for your website is also a good idea to increase some
more revenue and placing Google search unit at the best visible place on
your website would be much better idea.</span></li>
</ul>
<div style="text-align: justify;">
<span style="font-family: inherit;">Another few places where you can place advertisement for better CTR:</span></div>
<ul>
<li style="text-align: justify;"><span style="font-family: inherit;">Above the post</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">Sidebar banner</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">Sidebar video unit</span></li>
</ul>
<div style="text-align: justify;">
<span style="font-family: inherit;">Though I will suggest place advertisement smartly without hampering
your reader view and instead of keeping empty space on your website it’s
better to fill it with advertisement. Another adsense posts which will
help you to improve your revenue : Adsense Font size, Adsense for Parked domains, Google custom search unit, <span class="removed_link" title="http://www.shoutmeloud.com/improve-your-google-adsense-revenue-using-adsense-section-targeting.html">Adsense section targeting</span>.</span></div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-65016277880222121872013-05-03T02:34:00.000-07:002014-02-09T08:46:27.366-08:00Google Adsense High Paying Keywords 2013 <div style="text-align: justify;">
<a href="http://www.blogger.com/blogger.g?blogID=3850292960628411577" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><span style="font-family: inherit;">You may have
noticed that Adsense now-a-days is paying very low money by One
Click,usually it is .10$ to .20$.The main reason is that we are not
using Keywords in our Blogs Articles.Actually the <b style="text-align: justify;">Adsense CPC (Cost Per Click)</b><span style="text-align: justify;">
depends upon the Blog Niche(i.e what the blog is about) and the related
high paying keywords.Now Time to increase AdSense Revenue.The </span><span style="text-align: justify;"><span style="border-bottom-color: rgb(0, 129, 189) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important;">secret of</span></span><span style="text-align: justify;">
boosting AdSense Earning is High Paying Keywords,actually these
keywords helps you to increase your Adsense CPC(Cost Per Click).As a
result of increasing CPC(Cost per Click) you will get a huge amount of
money from One Click On </span><span style="text-align: justify;">Google Ads</span><span style="text-align: justify;">.Actually sometime </span><span style="text-align: justify;"><span style="border-bottom-color: rgb(0, 129, 189) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important;">Google Ads</span></span><span style="text-align: justify;"> Cost
became to high i.e may be up-to 5$ per Click.The </span><span style="text-align: justify;">Secret</span><span style="text-align: justify;"> behind these
earning is high paying keywords,so in this regard we have collected some
</span><span style="text-align: justify;"><span style="border-bottom-color: rgb(0, 129, 189) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important;">Google Adsense</span></span><span style="text-align: justify;"> high Paying Keyword,which will certainly increase your
AdSense Daily Earning.</span></span></div>
<span style="font-family: inherit; text-align: justify;">How Does Keywords increase Adsense Earning?</span><br />
<div style="text-align: justify;">
<span style="font-family: inherit;">As i mentioned
that AdSense Earning Depends upon the blog/website niche and high paying
related keywords which we use in blog articles.Now if your Blog
Articles contain any of the following High Paying Keyword,then surely
you can boost your AdSense Earning.Therefore don,t waste your time and
start using the below keywords in blog posts and enjoy earning alot of
money.</span></div>
<h3 style="text-align: justify;">
<span style="font-family: inherit; font-size: small;">Google Adsense High Paying Keywords 2013</span></h3>
<div style="text-align: justify;">
<span style="font-family: inherit;">There are many
new bloggers who takes month or years to cashout his/her first AdSense
Cheque of 100$,the reason is their AdSense CPC is low and as a result
they face alot of Problems.Therefore we are providing a huge list of
Google Adsense high paying Keyword,i can guarantee you,if you used these
keywords,you can earn alot of money.</span></div>
<blockquote class="tr_bq" style="text-align: justify;">
<span style="font-family: inherit;"><b>Keywords </b> <b> CPC(Cost Per Click)</b></span></blockquote>
<div style="text-align: justify;">
</div>
<blockquote class="tr_bq">
<div style="text-align: justify;">
<span style="font-family: inherit;">Data Recovery Raid<span class="Apple-tab-span" style="white-space: pre;"> </span> 93.22$</span></div>
<div style="text-align: justify;">
<a href="http://www.blogger.com/blogger.g?blogID=3850292960628411577" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">Personal Injury Lawyer<span class="Apple-tab-span" style="white-space: pre;"> </span> 66.53$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Car Insurance Quotes<span class="Apple-tab-span" style="white-space: pre;"> </span> 61.03$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Asbestos lung cancer<span class="Apple-tab-span" style="white-space: pre;"> </span> 35.96$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Injury lawyers<span class="Apple-tab-span" style="white-space: pre;"> </span> 66.79$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Mesothelioma Law Firm<span class="Apple-tab-span" style="white-space: pre;"> </span> 169.01$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Sell annuity Payment<span class="Apple-tab-span" style="white-space: pre;"> </span> 127.46$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Structured Annuity Settlement<span class="Apple-tab-span" style="white-space: pre;"> </span> 100.8$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Annuity Settlements<span class="Apple-tab-span" style="white-space: pre;"> </span> 100.72$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Virtual Data Rooms <span class="Apple-tab-span" style="white-space: pre;"> </span> 83.18$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Automobile Accident Attorney<span class="Apple-tab-span" style="white-space: pre;"> </span> 76.57$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Auto accident Attorney<span class="Apple-tab-span" style="white-space: pre;"> </span> 75.64$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Car Accident lawyers<span class="Apple-tab-span" style="white-space: pre;"> </span> 75.17$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Personal injury law firm<span class="Apple-tab-span" style="white-space: pre;"> </span> 40.56$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Online Criminal Justice Degree 61.4$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Car insurance Companies<span class="Apple-tab-span" style="white-space: pre;"> </span> 53.66$</span></div>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">Business <b>voip</b> Solutions<span class="Apple-tab-span" style="white-space: pre;"> </span> 59.9$</span></div>
</blockquote>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;">These were some high paying keywords,which will surely help you to
increase your AdSense Earning.However we will also share a Top 5 List of
High Paying Keywords,which are chosen keywords.</span></div>
<span style="font-family: inherit;">
</span>
<br />
<h3>
<span style="font-family: inherit; font-size: small;">
<div style="text-align: justify;">
Top 5 Google Adsense High Paying Keywords 2013</div>
</span></h3>
<ol>
<li style="text-align: justify;"><span style="font-family: inherit;"> Insurance $55.91</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">Mortgage $48.12</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">Gas/Electricity $53.62</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">Claim $46.21</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">Attorney $47.17</span></li>
</ol>
<span style="font-family: inherit;">
</span>
<br />
<div style="text-align: justify;">
<span style="font-family: inherit;">The above five mentioned keywords are the most High Paying Keywords.But
remember don,t use keywords which are not related to the blog
Niche,however you can use the Keywords which are realted to your
Blog/Website Niche,that will surely help you to boost AdSense Earning.</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">
</span>BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-2440367929342905802013-05-03T02:14:00.002-07:002014-02-09T08:46:27.322-08:00Tips Ampuh Kaya Raya dengan Google Adsense<br />
<div style="text-align: justify;">
<span style="font-family: inherit;"><span class="hps">Menghasilkan uang</span> <span class="hps">dari Google</span> <span class="hps">Adsense</span> <span class="hps">merupakan cara termudah</span> <span class="hps">dan paling populer</span> <span class="hps">cara</span> <span class="hps">untuk membuat</span> <span class="hps">uang secara online</span>. <span class="hps">Ribuan</span> <span class="hps">dan</span> <span class="hps">jutaan pengguna</span> <span class="hps">internet</span> <span class="hps">menggunakan</span> <span class="hps">AdSense</span> <span class="hps">untuk membuat</span> <span class="hps">uang dari</span> <span class="hps">blog</span> <span class="hps">mereka, dari</span> <span class="hps">HubPages,</span> <span class="hps">dari situs web dan</span> <span class="hps">sebagainya</span>.</span></div>
<span style="font-family: inherit;"><span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<span class="hps">Beberapa dari mereka</span> <span class="hps">membuat</span> <span class="hps">keuntungan besar</span> <span class="hps">menggunakan</span> <span class="hps">Google</span> <span class="hps">AdSense</span> <span class="hps">dan mendapatkan</span> <span class="hps">gaji</span> <span class="hps">bulanan</span> <span class="hps">BESAR</span> <span class="hps">dari Google</span> <span class="hps">setiap bulan</span>. <span class="hps">Saya</span> <span class="hps">telah melihat</span> <span class="hps">Penerbit</span> <span class="hps">AdSense</span> <span class="hps">membuat pendapatan</span> <span class="hps">besar</span> <span class="hps">dari Google</span> <span class="hps">AdSense</span> <span class="hps">setiap bulan</span> <span class="hps">dan saya</span> <span class="hps">telah melihat</span> <span class="hps">gaji</span> <span class="hps">terbesar</span> <span class="hps">Google</span> <span class="hps">AdSense</span>: <span class="hps">USD</span> <span class="hps">$</span> <span class="hps">132,994.97</span>. <span class="hps">Apakah</span> <span class="hps">Anda</span> <span class="hps">antik</span> <span class="hps">dan ingin</span> <span class="hps">tahu bagaimana</span> <span class="hps">Penerbit</span> <span class="hps">AdSense</span> <span class="hps">membuat</span> <span class="hps">USD</span> <span class="hps">$</span> <span class="hps">132,994.97</span> <span class="hps">per bulan</span>? <span class="hps">Jangan</span> <span class="hps">khawatir</span>, <span class="hps">Anda berada di</span> <span class="hps">tempat yang tepat</span> <span class="hps">dan</span> <span class="hps">Anda berada</span> <span class="hps">dalam status</span> <span class="hps">yang besar</span> <span class="hps">Anda</span> <span class="hps">menjadi seorang</span> <span class="hps">Penerbit</span> <span class="hps">AdSense</span>. <span class="hps">Setiap</span> <span class="hps">Penerbit</span> <span class="hps">AdSense</span> <span class="hps">memiliki potensi</span> <span class="hps">untuk membuat</span> <span class="hps">USD</span> <span class="hps">$</span> <span class="hps">132,994.97</span> <span class="hps">setiap bulan</span><span class="">,</span> <span class="hps">Anda</span> <span class="hps">harus</span> <span class="hps">berada di</span> <span class="hps">jalur yang benar</span> <span class="hps">dan</span> <span class="hps">cara yang tepat untuk</span> <span class="hps">mencapainya</span>.</div>
<div style="text-align: justify;">
<br /></div>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Saya</span> <span class="hps">punya beberapa tips</span> <span class="hps">AdSense</span> <span class="hps">untuk berbagi</span> <span class="hps">dengan Anda</span> <span class="hps">dan saya pikir itu</span> <span class="hps">akan</span> <span class="hps">sangat membantu</span> <span class="hps">untuk membantu</span> <span class="hps">Anda</span> <span class="hps">membuat lebih banyak uang</span> <span class="hps">dari Google</span> <span class="hps">AdSense</span>.</div>
</span></span>
</span><div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<span style="font-family: inherit;"><span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<span class="" id="result_box" lang="id" tabindex="-1"> </span><img alt="" class="full" height="180" src="http://s4.hubimg.com/u/367715_f520.jpg" title="" width="520" /></div>
</span>
</span><div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<span style="font-family: inherit;"><span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<span class="" id="result_box" lang="id" tabindex="-1"> </span><img alt="Best AdSense Placement" class="half" height="354" src="http://s3.hubimg.com/u/367674_f260.jpg" title="Best AdSense Placement" width="260" /></div>
</span>
</span><div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<span style="font-family: inherit;"><span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<span class="" id="result_box" lang="id" tabindex="-1"> </span><span class="" id="result_box" lang="id" tabindex="-1"><span class="hps">Terbaik</span> <span class="hps">AdSense</span> <span class="hps">Penempatan</span></span></div>
<div style="text-align: justify;">
<span class="" lang="id" tabindex="-1"><span class="hps"><br /></span></span></div>
</span><span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<b><span class="hps">1</span>. <span class="hps">Kekuatan</span> <span class="hps">Penempatan</span> <span class="hps">Iklan</span> <span class="hps">AdSense</span>:</b></div>
<div style="text-align: justify;">
<b><br /></b></div>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Menempatkan</span> <span class="hps">Iklan Google</span> <span class="hps">AdSense</span> <span class="hps">di blog atau</span> <span class="hps">webiste</span> <span class="hps">adalah tugas yang mudah</span>, tetapi <span class="hps">menempatkan</span> <span class="hps">Google</span> <span class="hps">Ads</span> <span class="hps">AdSense</span> <span class="hps">pada</span> <span class="hps">posisi yang benar</span> <span class="hps">atau kita</span> <span class="hps">biasanya menyebutnya</span> <span class="hps">Posisi</span> <span class="hps">Panas</span> <span class="hps">akan membantu Anda</span> <span class="hps">membuat uang</span> <span class="hps">sangat cepat</span> <span class="hps">dari Google</span> <span class="hps">AdSense</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Silakan lihat</span> <span class="hps">di</span> <span class="hps">Heatmap</span> <span class="hps">AdSense</span> <span class="hps">di sebelah kanan</span>. <span class="hps">Ini</span> <span class="hps">adalah</span> <span class="hps">tempat dimana</span> <span class="hps">AdSense</span> <span class="hps">Ads</span> <span class="hps">mendapatkan klik terbanyak</span> <span class="hps">dan membuat</span> <span class="hps">uang paling banyak.</span> <span class="hps">Tempat di mana</span> <span class="hps">saya</span> <span class="hps">menandai</span> <span class="hps atn">"</span>Terbaik" <span class="hps">adalah</span> <span class="hps">tempat untuk membuat</span> <span class="hps">banyak uang</span> <span class="hps">fron</span> <span class="hps">Google</span> <span class="hps">AdSense</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Tempatkan</span> <span class="hps">Iklan</span> <span class="hps">AdSense</span> <span class="hps">Anda</span> <span class="hps">pada posisi</span> <span class="hps">Panas</span> <span class="hps">yang merupakan</span> <span class="hps atn">"</span>terbaik" <span class="hps">posisi</span> <span class="hps">pada akhirnya</span> <span class="hps">akan</span> <span class="hps">membantu Anda mendapatkan</span> <span class="hps">ton</span> <span class="hps">dan</span> <span class="hps">ton</span> <span class="hps">klik</span> <span class="hps">dan tentu saja</span>, <span class="hps">Anda akan membuat</span> <span class="hps">ton</span> <span class="hps">dan</span> <span class="hps">ton</span> <span class="hps">uang</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Saya telah mencoba</span> <span class="hps atn">"</span>Terbaik" <span class="hps">penempatan dan</span> <span class="hps">itu benar-benar</span> <span class="hps">bekerja</span> <span class="hps">untuk membantu saya</span> <span class="hps">membuat uang</span> <span class="hps">sangat cepat</span> <span class="hps">dari Google</span> <span class="hps">AdSense</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Dalam</span> <span class="hps">Hubpages</span>, <span class="hps">penempatan</span> <span class="hps">AdSense</span> <span class="hps">adalah tetap</span> <span class="hps">dan kita</span> <span class="hps">tidak bisa</span> <span class="hps">membuat perubahan</span> <span class="hps">untuk itu</span> <span class="hps">tapi saya dapat mengatakan</span> <span class="hps">bahwa</span> <span class="hps">AdSense</span> <span class="hps">Iklan</span> <span class="hps">penempatan</span> <span class="hps">penempatan</span> <span class="hps">berada di</span> <span class="hps">tempat yang baik</span>.</div>
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<span class="hps"><div style="text-align: justify;">
<b><span class="hps">2</span>. <span class="hps">Isi</span> <span class="hps">AdSense</span> <span class="hps">Optimization</span>:</b></div>
<div style="text-align: justify;">
<b><br /></b></div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Isi</span> <span class="hps">adalah bagian paling</span> <span class="hps">penting</span> <span class="hps">dan vital</span> <span class="hps">dalam rangka</span> <span class="hps">tom</span> <span class="hps">menghasilkan uang dari</span> <span class="hps">Google</span> <span class="hps">AdSense</span>. <span class="hps">Menciptakan</span> <span class="hps">unik dan</span> <span class="hps">isi</span> <span class="hps">dengan kata kunci</span> <span class="hps">membayar tinggi</span> <span class="hps">dapat membantu Anda</span> <span class="hps">untuk membuat</span> <span class="hps">lebih banyak uang dari</span> <span class="hps">Google</span> <span class="hps">AdSense</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Sebagai contoh</span>:</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Anda</span> <span class="hps">biasanya membuat</span> <span class="hps">$ 0,10</span> <span class="hps">ketika orang</span> <span class="hps">klik pada</span> <span class="hps">iklan</span> <span class="hps">AdSense</span> <span class="hps">Anda</span>. <span class="hps">Jika</span> <span class="hps">Anda</span> <span class="hps">dapat</span> <span class="hps">mengidentifikasi</span> <span class="hps">kata kunci</span> <span class="hps">membayar tinggi</span> <span class="hps">dari Google</span> <span class="hps">AdSense</span>, <span class="hps">Anda</span> <span class="hps">dapat membuat</span> <span class="hps">$ 10,00 per</span> <span class="hps">klik</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Jadi</span>, <span class="hps">cobalah</span> <span class="hps">untuk menemukan</span> <span class="hps">kata kunci yang terbaik</span> <span class="hps">yang dapat membantu</span> <span class="hps">Anda</span> <span class="hps">ganda</span> <span class="hps">dan</span> <span class="hps">triple penghasilan</span> <span class="hps">AdSense</span> <span class="hps">Anda</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Daftar</span> <span class="hps">kata kunci</span> <span class="hps">membayar tinggi</span>:</div>
</span></span>
</span><ul>
<li style="text-align: justify;"><span style="font-family: inherit;">Adverse credit remortgage: $31.10 per click</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">att call conference: $29.34 per click</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">angeles drug los rehab: $28.51 per click</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">att go: $28.32 per click</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">at t wireless: $27.11 per click</span></li>
<li style="text-align: justify;"><span style="font-family: inherit;">benchmark lending($40.36), domain yahoo($97.44), insurance medical
temporary, hair removal washington dc, american single and so on. </span></li>
</ul>
<span style="font-family: inherit;"><span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<span class="hps">Biaya tertinggi</span> <span class="hps">per klik</span> <span class="hps">/</span> <span class="hps">pembayaran</span> <span class="hps">per klik</span> <span class="hps">selalu</span> <span class="hps">bervariasi</span> <span class="hps">dan Anda</span> <span class="hps">dapat memeriksa</span> <span class="hps">di</span>: <span class="hps">Google</span> <span class="hps">AdWords</span></div>
<div style="text-align: justify;">
<br /></div>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Jadi</span>, <span class="hps">memulai sebuah</span> <span class="hps">blog</span>, <span class="hps">website atau</span> <span class="hps">menulis</span> <span class="hps">artikel</span> <span class="hps">yang berisi</span> <span class="hps">AdSense</span> <span class="hps">membayar tinggi</span> <span class="hps">kata kunci</span> <span class="hps">dan Anda</span> <span class="hps">akan</span> <span class="hps">membuat</span> <span class="hps">cepat</span> <span class="hps">uang dari</span> <span class="hps">Google</span> <span class="hps">AdSense</span>.</div>
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<br /></div>
<span class="hps"><div style="text-align: justify;">
<b><span class="hps">3</span>. <span class="hps">Rahasia</span> <span class="hps">AdSense</span> <span class="hps">BPTe</span>:</b></div>
<div style="text-align: justify;">
<br /></div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Apa</span> <span class="hps">BPTe</span>:</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">eCPM</span> <span class="hps">adalah</span> <span class="hps">Biaya</span> <span class="hps">Efektif</span> <span class="hps">per 1000</span> <span class="hps">Tayangan</span> <span class="hps">atau kita</span> <span class="hps">bisa</span> <span class="hps">menyebutnya</span> <span class="hps">Biaya</span> <span class="hps">Efektif</span> <span class="hps">per seribu</span> <span class="hps">Tayangan</span>.</div>
</span></span>
</span><div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><img alt="" class="half" height="52" src="http://s2.hubimg.com/u/367681_f260.jpg" title="" width="260" /><span class="" id="result_box" lang="id" tabindex="-1"> </span> </span></div>
<span class="" id="result_box" lang="id" tabindex="-1"><span style="font-family: inherit;"><div style="text-align: justify;">
<br /></div>
</span></span><div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<span style="font-family: inherit;"><span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<span class="hps">Cara Menghitung</span> <span class="hps">BPTe</span>:</div>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Anda dapat</span> <span class="hps">menghitung</span> <span class="hps">eCPM</span> <span class="hps">menggunakan</span> <span class="hps">rumus</span> <span class="hps">dalam gambar</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Untuk</span> <span class="hps">Contoh</span>: <span class="hps">Sekarang</span>, <span class="hps">Anda memiliki $</span> <span class="hps">10,00 di</span> <span class="hps">Akun</span> <span class="hps">AdSense</span> <span class="hps">Anda</span> <span class="hps">dan Anda memiliki</span> <span class="hps">total</span> <span class="hps">7000</span> <span class="hps">tayangan</span> <span class="hps">yang</span> <span class="hps">membuatnya</span> <span class="hps">7 ribu</span> <span class="hps">tayangan</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Jadi</span>, <span class="hps">eCPM</span> <span class="hps">akan</span>: $ <span class="hps">10,00 / 7 = $ 1,43</span></div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Ingat</span>: <span class="hps">Tayangan</span> <span class="hps">total adalah</span> <span class="hps">dalam ribuan</span>. <span class="hps">Jika Anda memiliki</span> <span class="hps">10.000</span> <span class="hps">tayangan</span>, <span class="hps">maka</span> <span class="hps">akan menjadi</span> <span class="hps">10</span> <span class="hps">untuk</span> <span class="hps">tayangan</span> <span class="hps">total.</span></div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Mengubah</span> <span class="hps">eCPM</span> <span class="hps">dan</span> <span class="hps">Make More Money</span>:</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">eCPM</span> <span class="hps">dapat diubah</span> <span class="hps">dengan menguji</span> <span class="hps">format yang berbeda</span> <span class="hps">Iklan</span>. <span class="hps">Anda dapat</span> <span class="hps">mencoba untuk</span> <span class="hps">mengamati</span> <span class="hps">kinerja</span> <span class="hps">eCPM</span> <span class="hps">format</span> <span class="hps">iklan</span> <span class="hps">yang berbeda</span> <span class="hps">menggunakan</span> <span class="hps atn">"</span>Saluran Kustom" <span class="hps">di</span> <span class="hps">Akun</span> <span class="hps">AdSense</span> <span class="hps">Anda</span>. <span class="hps">mencoba</span> <span class="hps">format yang berbeda</span> <span class="hps">Iklan</span> <span class="hps">dan</span> <span class="hps">menemukan</span> <span class="hps">eCPM</span> <span class="hps">tertinggi</span>, <span class="hps">menempel</span> <span class="hps">format</span> <span class="hps">Iklan yang</span> <span class="hps">memiliki</span> <span class="hps">BPTe</span> <span class="hps">tertinggi</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Potensi Anda</span> <span class="hps">untuk membuat</span> <span class="hps">lebih banyak uang dari</span> <span class="hps">Google</span> <span class="hps">AdSense</span> <span class="hps">akan meningkat</span>.</div>
</span></span>
</span><div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><img alt="" class="half" height="209" src="http://s3.hubimg.com/u/367714_f260.jpg" title="" width="260" /><span class="" id="result_box" lang="id" tabindex="-1"> </span><span class="" id="result_box" lang="id" tabindex="-1"> </span></span></div>
<div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<span style="font-family: inherit;"><span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<b><span class="" id="result_box" lang="id" tabindex="-1"> </span><span class="" id="result_box" lang="id" tabindex="-1"><span class="hps">4</span>. <span class="hps">Terbaik</span> <span class="hps">AdSense</span> <span class="hps">Iklan</span> <span class="hps">Format</span>:</span></b></div>
<div style="text-align: justify;">
<span class="" lang="id" tabindex="-1"><br /></span></div>
</span><span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<span class="hps">AdSense</span> <span class="hps">terbaik</span> <span class="hps">Iklan</span> <span class="hps">format yang membantu</span> <span class="hps">Penerbit</span> <span class="hps">AdSense</span> <span class="hps">membuat</span> <span class="hps">banyak uang</span> <span class="hps">adalah</span> <span class="hps">persegi panjang</span> <span class="hps">Format</span> <span class="hps">Iklan</span> <span class="hps">besar</span>.</div>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Secara pribadi</span>, <span class="hps">yang</span> <span class="hps">terbaik</span> <span class="hps">AdSense</span> <span class="hps">Iklan</span> <span class="hps">format</span> <span class="hps">persegi panjang</span> <span class="hps">yang besar</span>, <span class="hps">judul</span> <span class="hps">merah</span>, <span class="hps">hitam dan</span> <span class="hps">deskripsi</span> <span class="hps">URL</span> <span class="hps">hitam /</span> <span class="hps">biru</span> <span class="hps">/</span> <span class="hps">merah</span>. <span class="hps">Anda dapat</span> <span class="hps">melihat</span> <span class="hps">contoh pada</span> <span class="hps">gambar</span>.</div>
</span>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
<span class="hps">Bagaimana</span> <span class="hps">Anda</span> <span class="hps">Bisa</span> <span class="hps">Menghasilkan Uang</span> <span class="hps">Dari</span> <span class="hps">Forum</span> <span class="hps">dan</span> <span class="hps">Diskusi</span></div>
<div style="text-align: justify;">
<span class="hps">Bergabung dengan forum</span> <span class="hps">dan berpartisipasi</span> <span class="hps">aktif</span> <span class="hps">dalam diskusi untuk</span> <span class="hps">menghasilkan uang</span>. <span class="hps">Anda</span> <span class="hps">membuat</span> <span class="hps">uang ketika Anda</span> <span class="hps">berpartisipasi</span>. <span class="hps">Saya</span> <span class="hps">membuat</span> <span class="hps">$ 30,00</span> <span class="hps">+</span> <span class="hps">+</span> <span class="hps">dalam waktu</span> <span class="hps">2</span> <span class="hps">bulan</span>. <span class="hps">:)</span></div>
<div style="text-align: justify;">
<span class="hps">Cara</span> <span class="hps">Dapatkan</span> <span class="hps">1000 Pengunjung</span> <span class="hps">Gratis</span> <span class="hps">dan</span> <span class="hps">Membuat</span> <span class="hps">banyak</span> <span class="hps">Money Online</span></div>
<div style="text-align: justify;">
<span class="hps">Ini adalah</span> <span class="hps">hub</span> <span class="hps">baru saya</span> <span class="hps">dan saya</span> <span class="hps">berbagi</span> <span class="hps">beberapa tips</span> <span class="hps">untuk mendapatkan</span> <span class="hps">lalu lintas ke</span>, <span class="hps">Anda</span> <span class="hps">blog</span> <span class="hps">hub</span> <span class="hps">dan situs</span> <span class="hps">untuk membantu</span> <span class="hps">Anda membuat</span> <span class="hps">uang secara online</span> <span class="hps">lebih banyak</span>. <span class="hps">:)</span></div>
<div style="text-align: justify;">
<span class="hps">Membuat</span> <span class="hps">Lebih dari</span> <span class="hps">$ 1.000,00</span> <span class="hps">Menggunakan</span> <span class="hps">Bakat</span> <span class="hps">Menulis</span> <span class="hps">Anda</span> <span class="hps atn">(</span>Tanpa <span class="hps">Google</span> <span class="hps">AdSense</span>)</div>
<div style="text-align: justify;">
<span class="hps">Anda dapat</span> <span class="hps">membuat lebih banyak uang</span> <span class="hps">dan membuat</span> <span class="hps">uang cepat</span> <span class="hps">tanpa</span> <span class="hps">Google</span> <span class="hps">AdSense</span>. <span class="hps">Anda harus</span> <span class="hps">bekerja</span> <span class="hps">keras dan</span> <span class="hps">mengeluarkan</span> <span class="hps">bakat menulis</span> <span class="hps">Anda</span>. <span class="hps">Uang</span> <span class="hps">akan</span> <span class="hps">membanjiri</span> <span class="hps">rekening bank</span> <span class="hps">Anda</span> <span class="hps">setiap bulan</span>.</div>
<div style="text-align: justify;">
<span class="hps">Membuat</span> <span class="hps">Lebih dari</span> <span class="hps">$ 1.000,00</span> <span class="hps">online</span> <span class="hps">menggunakan</span> <span class="hps">Bakat</span> <span class="hps">Menulis</span> <span class="hps">Anda</span></div>
<div style="text-align: justify;">
<span class="hps">Membuat</span> <span class="hps">$ 1.000,00</span> <span class="hps">setiap bulan</span> <span class="hps">secara online</span> <span class="hps">menggunakan</span> <span class="hps">bakat menulis</span> <span class="hps">Anda</span> <span class="hps">adalah cara termudah</span> <span class="hps">dan</span> <span class="hps">tercepat</span> <span class="hps">untuk membuat</span> <span class="hps">uang secara online</span>.</div>
<div style="text-align: justify;">
<span class="hps">Cara</span> <span class="hps">Membuat</span> <span class="hps">$ 200,00</span> <span class="hps">sehari-hari</span> <span class="hps">dengan</span> <span class="hps">Menciptakan</span> <span class="hps">Money Making</span> <span class="hps">Combos</span></div>
<div style="text-align: justify;">
<span class="hps">Make Money</span> <span class="hps">online</span> <span class="hps">seperti permainan</span>, <span class="hps">Anda harus memiliki</span> <span class="hps">uang membuat</span> <span class="hps">combo</span> <span class="hps">untuk membantu</span> <span class="hps">Anda</span> <span class="hps">menghasilkan uang</span> <span class="hps">setiap hari</span>.</div>
<div style="text-align: justify;">
<br /></div>
<span class="hps"><div style="text-align: justify;">
<b><span class="hps">5</span>. <span class="hps">Patuhi</span> <span class="hps">Kebijakan</span> <span class="hps">AdSense</span>:</b></div>
<div style="text-align: justify;">
<br /></div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Akun Google</span> <span class="hps">AdSense</span> <span class="hps">adalah</span> <span class="hps">angsa</span> <span class="hps">Anda</span> <span class="hps">yang meletakkan</span> <span class="hps">Telur</span> <span class="hps">Emas</span> <span class="hps">untuk Anda</span>. <span class="hps">Jangan</span> <span class="hps">membunuh atau</span> <span class="hps">lain Anda</span> <span class="hps">tidak akan mendapatkan</span> <span class="hps">Golden Telur</span> <span class="hps">di masa depan</span>.</div>
</span>
<span class="hps"><div style="text-align: justify;">
<span class="hps">Beberapa</span> <span class="hps">pembatasan</span> <span class="hps">dari</span> <span class="hps">Google</span> <span class="hps">AdSense</span>:</div>
</span></span>
</span><div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<span style="font-family: inherit;"><span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<span class="" id="result_box" lang="id" tabindex="-1"> <i> </i></span><span class="" id="result_box" lang="id" tabindex="-1"><i><span class="hps">Jangan</span> <span class="hps">mengubah kode</span> <span class="hps">iklan</span>.</i></span></div>
</span><span class="" id="result_box" lang="id" tabindex="-1"><i><div style="text-align: justify;">
<span class="hps">Jangan</span> <span class="hps">menempatkan</span> <span class="hps">gambar</span> <span class="hps">/ foto</span> <span class="hps">di samping</span> <span class="hps">Iklan</span> <span class="hps">AdSense</span> <span class="hps">untuk menarik</span> <span class="hps">klik</span>.</div>
<div style="text-align: justify;">
<span class="hps">Jangan</span> <span class="hps">meminta orang untuk</span> <span class="hps">mengklik</span> <span class="hps">iklan</span>.</div>
<div style="text-align: justify;">
<span class="hps">Jangan</span> <span class="hps">mengklik</span> <span class="hps">diri Anda</span> <span class="hps">AdSense</span> <span class="hps">Iklan</span>.</div>
<div style="text-align: justify;">
<span class="hps">dan</span> <span class="hps">seterusnya</span> <span class="hps">...</span></div>
</i></span>
</span><div style="text-align: justify;">
<span style="font-family: inherit;"><br /></span></div>
<span class="" id="result_box" lang="id" tabindex="-1"><div style="text-align: justify;">
<span style="font-family: inherit;"><span class="hps">Patuhi</span> <span class="hps">aturan</span> <span class="hps">dan Anda</span> <span class="hps">akan</span> <span class="hps">membuat</span> <span class="hps">lebih banyak uang dan</span> <span class="hps">lebih banyak dari</span> <span class="hps">Google</span> <span class="hps">Adsense</span>.</span></div>
</span>BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com0tag:blogger.com,1999:blog-3850292960628411577.post-59125229532373555512013-02-21T07:21:00.001-08:002014-02-09T08:46:27.361-08:00Anti Copy Paste dari Blog KamuSahabat <a href="http://edit-html.blogspot.com/">EDIT HTML</a> yang saya gemari, di kesempatan ini kita akan membahas cara untuk melindungi data yang ada di blog sahabat, jika blog sahabat mempunyai isi yang hanya ingin ditampilkan untuk dibaca pengunjung saja tetapi tidak untuk di copy dan di paste di blog lain. Salah satu cara terbaik yang harus diterapkan adalah dengan cara menempatkan kode anti copy paste di blog sahabat. Berikut ini adalah langkah-langkahnya yang saya sajikan secara simple dan praktis.<br />
<br />
<ul style="margin: 0px 0px 0px 30px; padding: 0px; text-align: justify;">
<li style="margin: 0px; padding: 0px; text-align: -webkit-auto;"><span style="background-color: rgba(255, 255, 255, 0);">Login ke blogger, klik rancangan dan pilih Tab <a href="http://edit-html.blogspot.com/">EDIT HTML</a></span></li>
<li style="margin: 0px; padding: 0px; text-align: -webkit-auto;"><span style="background-color: rgba(255, 255, 255, 0);">Centang Expand Widget Template</span></li>
<li style="margin: 0px; padding: 0px; text-align: -webkit-auto;"><span style="background-color: rgba(255, 255, 255, 0);">Cari kode </head> (gunakan ctrl+f)</span></li>
<li style="margin: 0px; padding: 0px; text-align: -webkit-auto;"><span style="background-color: rgba(255, 255, 255, 0);">Copy script berikut lalu paste tepat di bawah kode </head></span></li>
</ul>
<blockquote class="tr_bq" style="border-left-color: rgb(240, 240, 236); border-left-style: solid; border-left-width: 5px; margin: 0px 20px 10px 10px; padding: 10px 15px; text-align: justify;">
<div style="text-align: -webkit-auto;">
<span style="background-color: rgba(255, 255, 255, 0);"><SCRIPT type="text/javascript"></span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: rgba(255, 255, 255, 0);">if (typeof document.onselectstart!="undefined") {</span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: rgba(255, 255, 255, 0);">document.onselectstart=new Function ("return false");</span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: rgba(255, 255, 255, 0);">}</span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: rgba(255, 255, 255, 0);">else{</span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: rgba(255, 255, 255, 0);">document.onmousedown=new Function ("return false");</span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: rgba(255, 255, 255, 0);">document.onmouseup=new Function ("return true");</span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: rgba(255, 255, 255, 0);">}</span></div>
<div style="text-align: -webkit-auto;">
<span style="background-color: rgba(255, 255, 255, 0);"></SCRIPT></span></div>
</blockquote>
<ul style="margin: 0px 0px 0px 30px; padding: 0px; text-align: justify;">
<li style="margin: 0px; padding: 0px; text-align: -webkit-auto;"><span style="background-color: rgba(255, 255, 255, 0);">Save.</span></li>
<li style="margin: 0px; padding: 0px; text-align: -webkit-auto;"><span style="background-color: rgba(255, 255, 255, 0);">Selesai.</span></li>
</ul>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: justify;">
Selamat menikmati sobat <a href="http://edit-html.blogspot.com/">EDIT-HTML</a></div>
BukuKerja.comhttp://www.blogger.com/profile/02483368822941259926noreply@blogger.com88tag:blogger.com,1999:blog-3850292960628411577.post-65841281180529946342013-02-15T05:05:00.000-08:002014-02-09T08:46:27.382-08:00Membuat related post unik di blogspot<span style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: x-small; line-height: 19.1875px; text-align: justify;">Hallo Sobat </span><a href="http://edit-html.blogspot.com/" style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: small; line-height: 19.1875px; text-align: justify;" target="_blank">Edit-HTML</a><span style="background-color: white; font-family: Arial, Helvetica, sans-serif; font-size: x-small; line-height: 19.1875px; text-align: justify;">, dipertemuan kali ini kita akan membahas cara membuat related post unik di blogspot yaitu sangatlah mudah hanya dengan memberikan tambahan kode script yang akan saya berikan di bawah ini tetapi saya sarankan agar terlebih dahulu untuk memback up template untuk berjaga-jaga jika terjadi sesuatu hal yang tidak di inginkan. </span><br />
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br /></span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">1. Silahkan masuk ke akun sobat.</span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">2. Klik "Template" -> "<a href="http://edit-html.blogspot.com/" target="_blank">Edit HTML</a>" -> centang "Expand Template Widget"</span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">3. Cari kode <b>]]></b></span></div>
dengan menekan Ctrl + F untuk memudahkan proses pencarian.<br />
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">4. Selanjutnya silahkan simpan kode berikut di atas kode <b>]]></b></span></div>
<br />
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br /></span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<blockquote class="tr_bq" style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 3px; margin: 5px 0px 5px 10px; padding: 0px 10px; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">#rbbox{float:left;width:275px;border-right:1px solid #ffaaff;margin:5px 0 0;padding:0 15px 0 0}<br />#rbbox .widget{margin:0;padding:0}<br />#rbbox .widget h2,#related-posts h2{font:bold 13px Droid Serif;color:#000;text-transform:none;margin:0 0 5px;padding:0}<br />#rbbox {color:#333;font:12px Droid Serif}<br />#rbbox:hover{color:#f9ab39}<br />#rbbox li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9SL3ayMFPRikveXBebuSyyY24F2aSRcJZXGItmW5a8FJfE5GREMHISQcNZqFtG8irmXyApbWeZgXZVODOG-0GOyZa7CattnhzhGwOGh6e8W2hm0R7qoHdeWfbCruENjP70bkqgFtAU1o/s1600/bullet-list.gif) no-repeat 0 8px;text-indent:0;line-height:1.2em;margin:0;padding:2px 0 2px 10px}<br />#banner-ads{float:right;width:300px;margin:5px 0}</span></blockquote>
</div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br /></span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<b><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Note:</span></b></div>
<ul style="background-color: white; line-height: 1.4; margin: 0.5em 0px; padding: 0px 2.5em; text-align: justify;">
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">float:left;width:275px : Posisi related post yang ada di kiri dengan lebar 275px</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">float:right;width:300px : Posisi banner-ads yang ada di sebelah kanan dengan lebar 300px</span></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Silahkan sesuaikan dengan template yang agan gunakan.</span></li>
</ul>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br /></span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">5. Masih di bagian "<a href="http://edit-html.blogspot.com/" target="_blank">Edit HTM</a>L" kemudian agan cari kode <b><data:post .body=""></data:post></b>, apabila kode tersebut terdapat 3 atau 4, maka taruh kode berikut di bawah kode no 3. apabila kode <b><data:post .body=""></data:post></b>, terdapat hanya 2 maka taruh kode berikut dibawah no.2 </span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br /></span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<blockquote class="tr_bq" style="border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 3px; margin: 5px 0px 5px 10px; padding: 0px 10px; text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><b:if cond="data:blog.pageType == "item""><br /></b:if></span>
<h3>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">
Artikel Terkait :</span></h3>
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">
<br /><div id="banner-ads">
<br />
MASUKKAN SCRIPT HTML/JAVASCRIPT KAMU DISINI..!!!</div>
<br /><div class="rbbox">
<br />
<div style="border: 0px solid #ccc; height: 250px; margin: 0; overflow: auto; padding: 10px;">
<br />
<div id="albri">
<br />
<script type="text/javascript"><br>var homeUrl3 = "<data:blog.homepageUrl/>";<br>var maxNumberOfPostsPerLabel = 10 ;<br>var maxNumberOfLabels = 10;<br>maxNumberOfPostsPerLabel = 10;<br>maxNumberOfLabels = 3;<br>function listEntries10(json) {<br>var ul = document.createElement('ul');<br>var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?<br>json.feed.entry.length : maxNumberOfPostsPerLabel;<br>for (var i = 0; i < maxPosts; i++) {<br>var entry = json.feed.entry[i];<br>var alturl;<br>for (var k = 0; k < entry.link.length; k++) {<br>if (entry.link[k].rel == 'alternate') {<br>alturl = entry.link[k].href;<br>break;<br>}<br>}<br>var li = document.createElement('li');<br>var a = document.createElement('a');<br>a.href = alturl;<br>if(a.href!=location.href) {<br>var txt = document.createTextNode(entry.title.$t);<br>a.appendChild(txt);<br>li.appendChild(a);<br>ul.appendChild(li);<br>}<br>}<br>for (var l = 0; l < json.feed.link.length; l++) {<br>if (json.feed.link[l].rel == 'alternate') {<br>var raw = json.feed.link[l].href;<br>var label = raw.substr(homeUrl3.length+13);<br>var k;<br>for (k=0; k<20; k++) label = label.replace("%20", " ");<br>var txt = document.createTextNode(label);<br>var h = document.createElement('b');<br>h.appendChild(txt);<br>var div1 = document.createElement('div');<br>div1.appendChild(h);<br>div1.appendChild(ul);<br>document.getElementById('albri').appendChild(div1);<br>}<br>}<br>}<br>function search10(query, label) {<br>var script = document.createElement('script');<br>script.setAttribute('src', query + 'feeds/posts/default/-/'<br>+ label +<br>'?alt=json-in-script&callback=listEntries10');<br>script.setAttribute('type', 'text/javascript');<br>document.documentElement.firstChild.appendChild(script);<br>}<br>var labelArray = new Array();<br>var numLabel = 0;<br><b:loop values='data:posts' var='post'><br><b:loop values='data:post.labels' var='label'><br>textLabel = "<data:label.name/>";<br>var test = 0;<br>for (var i = 0; i < labelArray.length; i++)<br>if (labelArray[i] == textLabel) test = 1;<br>if (test == 0) {<br>labelArray.push(textLabel);<br>var maxLabels = (labelArray.length <= maxNumberOfLabels) ?<br>labelArray.length : maxNumberOfLabels;<br>if (numLabel < maxLabels) {<br>search10(homeUrl3, textLabel);<br>numLabel++;<br>}<br>}<br></b:loop><br></b:loop><br></script><br />
<script type="text/javascript">RelPost();</script></div>
</div>
</div>
</span></blockquote>
</div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br /></span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">6. Langkah terakhir silahkan klik "Pratinjau" dan "Simpan" template jika dirasa sudah berhasil.</span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><br /></span></div>
<div style="background-color: white; line-height: 19.1875px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Selamat menikmati.</span></div>
Unknownnoreply@blogger.com6tag:blogger.com,1999:blog-3850292960628411577.post-12366322407364227212012-02-16T06:13:00.000-08:002014-02-09T08:46:27.306-08:00Mengedit Struktur Tampilan Blogger Mobile Templates<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4HyHGekXsHdUGAtXwZPkPXWNfJZe0kXMLSaCEoQRoQUPvfd_coDgX7htQJiCUsEwM0KDwgRqsMIjYMKBT4dt3mqAwMSGQMMYmSHyoqgKY4Vhvg23W3BibaYX8LgkDE810A1TlCK6S6DA/s1600/Customizing+the+structure+of+your+Mobile+Template..png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="175" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4HyHGekXsHdUGAtXwZPkPXWNfJZe0kXMLSaCEoQRoQUPvfd_coDgX7htQJiCUsEwM0KDwgRqsMIjYMKBT4dt3mqAwMSGQMMYmSHyoqgKY4Vhvg23W3BibaYX8LgkDE810A1TlCK6S6DA/s200/Customizing+the+structure+of+your+Mobile+Template..png" width="200" /></a></div><br />
<h2 style="background-color: white; color: #333333; font-family: arial; font-size: 18px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Where to Start?</h2><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">Go to <strong>Template</strong> and Click on the Gear Icon below the Mobile Template. From the Dropdown opt for “<strong>Custom</strong>”, <strong>Preview</strong> the mobile template and <strong>Save</strong> it</div><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;"></div><h2 style="font-family: arial; font-size: 18px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;"></h2><h2 style="background-color: white; color: #333333; font-size: 18px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Customizing the structure of your Mobile Template.</h2><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">Blogger Templates are made up using Widgets.Blogger has added a new property(mobile) to the <b:widget> tag. This property can take values ‘default', ‘yes', ‘no' or ‘only'. And this property will determine how the widget will be rendered in the mobile view.</b:widget></div><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">The widgets that display on mobile by default are the following:</div><ul style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; line-height: 19px;"><li style="line-height: 22px;">Header</li>
<li style="line-height: 22px;">Blog</li>
<li style="line-height: 22px;">Profile</li>
<li style="line-height: 22px;">PageList</li>
<li style="line-height: 22px;">AdSense</li>
<li style="line-height: 22px;">Attribution</li>
</ul><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">If you want to hide any of those, then use the property mobile='no' in the Widget tag, and that widget would no longer appear in the mobile view.</div><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">For example I can hide the Attribution Gadget in Mobile view if I use</div><pre class="code" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: rgb(215, 232, 240); border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(215, 232, 240); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(215, 232, 240); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(215, 232, 240); border-top-style: solid; border-top-width: 2px; color: blue; font-size: small; font-weight: normal; font: normal normal normal 1.2em/normal 'Courier New', Courier, Fixed; margin-bottom: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><b:widget <strong="" id="Attribution1" locked="true"><span style="color: red;"> mobile='no'</span> title='' type='Attribution'/></b:widget></pre><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">If you want to display the non-default widgets in your Mobile view, then just set the mobile property to yes.</div><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">E.g.: this is the normal tag for the Blog Archive Widget</div><pre class="code" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: rgb(215, 232, 240); border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(215, 232, 240); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(215, 232, 240); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(215, 232, 240); border-top-style: solid; border-top-width: 2px; color: blue; font-size: small; font-weight: normal; font: normal normal normal 1.2em/normal 'Courier New', Courier, Fixed; margin-bottom: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><b:widget id="BlogArchive1" title="Blog Archive" type="BlogArchive"></b:widget></pre><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">Now if you set the mobile property as</div><pre class="code" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: rgb(215, 232, 240); border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(215, 232, 240); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(215, 232, 240); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(215, 232, 240); border-top-style: solid; border-top-width: 2px; color: blue; font-size: small; font-weight: normal; font: normal normal normal 1.2em/normal 'Courier New', Courier, Fixed; margin-bottom: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><b:widget <strong="" id="BlogArchive1" title="Blog Archive"><span style="color: red;"> mobile='yes'</span> type='BlogArchive'></b:widget></pre><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">, then you should see the archive widget on your Mobile View(I didn't get it working).</div><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">If you want a widget to appear only in the mobile view, then you can set the mobile property to 'only'</div><pre class="code" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: rgb(215, 232, 240); border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(215, 232, 240); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(215, 232, 240); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(215, 232, 240); border-top-style: solid; border-top-width: 2px; color: blue; font-size: small; font-weight: normal; font: normal normal normal 1.2em/normal 'Courier New', Courier, Fixed; margin-bottom: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><b:widget <strong="" id="Attribution1" locked="true"><span style="color: red;"> mobile='only'</span> title='' type='Attribution'/></b:widget></pre><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">If I use this tag, the attribution gadget will disappear from my desktop view, and will appear only on the mobile view.</div><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">This code change will make the attribution widget disappear from your Mobile View.</div><h2 style="background-color: white; color: #333333; font-size: 18px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Customizing the Look and Feel of your Mobile Template</h2><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">Now you can fully customize the looks of your mobile template. The body element of the mobile template will be styled my the mobile class</div><pre class="code" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: rgb(215, 232, 240); border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(215, 232, 240); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(215, 232, 240); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(215, 232, 240); border-top-style: solid; border-top-width: 2px; color: blue; font-size: small; font-weight: normal; font: normal normal normal 1.2em/normal 'Courier New', Courier, Fixed; margin-bottom: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"></pre><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">Make sure that your template has:</div><pre class="code" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: rgb(215, 232, 240); border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(215, 232, 240); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(215, 232, 240); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(215, 232, 240); border-top-style: solid; border-top-width: 2px; color: blue; font-size: small; font-weight: normal; font: normal normal normal 1.2em/normal 'Courier New', Courier, Fixed; margin-bottom: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"></pre><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">So if you are good at CSS, you can use this class name to style your mobile template.</div><pre class="code" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: rgb(215, 232, 240); border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(215, 232, 240); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(215, 232, 240); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(215, 232, 240); border-top-style: solid; border-top-width: 2px; color: blue; font-size: small; font-weight: normal; font: normal normal normal 1.2em/normal 'Courier New', Courier, Fixed; margin-bottom: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;">.mobile .date-header {
text-decoration:underline;
}</pre><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;"><br />
</div><h2 style="background-color: white; color: #333333; font-size: 18px; line-height: 19px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px;">Alternate Widget Content on Mobile View</h2><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">Once you switch to the Custom Mobile Template, you might find that the template is too huge to fit into a Mobile Browser. If you want, then you can provide alternate content inside a widget.</div><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">e.g:</div><pre class="code" style="background-attachment: initial; background-clip: initial; background-color: white; background-image: initial; background-origin: initial; border-bottom-color: rgb(215, 232, 240); border-bottom-style: solid; border-bottom-width: 2px; border-image: initial; border-left-color: rgb(215, 232, 240); border-left-style: solid; border-left-width: 2px; border-right-color: rgb(215, 232, 240); border-right-style: solid; border-right-width: 2px; border-top-color: rgb(215, 232, 240); border-top-style: solid; border-top-width: 2px; color: blue; font-size: small; font-weight: normal; font: normal normal normal 1.2em/normal 'Courier New', Courier, Fixed; margin-bottom: 10px; margin-top: 10px; overflow-x: auto; overflow-y: auto; padding-bottom: 5px; padding-left: 10px; padding-right: 10px; padding-top: 5px; text-align: left;"><div class="widget-content"><b:if cond="data:blog.isMobile">
<a href="http://www.blogger.com/">
Powered By Blogger
</a>
<b:else>
<a href="http://www.blogger.com/">
<img alt="Powered By Blogger" expr:src="data:fullButton" />
</a>
</b:else></b:if>
</div></pre><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">This will show a Powered by Blogger Text link on the Mobile View, and a Powered by Blogger image on the normal desktop view.</div><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">The condition</div><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;"><b:if cond="data:blog.isMobile"></b:if></div><div style="background-color: white; color: #333333; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; font: normal normal normal 14px/21px Arial, Helvetica, sans-serif; line-height: 19px; margin-bottom: 1em; margin-top: 10px;">can be used to check if the viewer is viewing your blog in a mobile browser or not. You can use this conditional check creatively and give a totally different look to the mobile version of the blog. Happy hacking, and do share if you have created some really awesome mobile template :)</div>Unknownnoreply@blogger.com42tag:blogger.com,1999:blog-3850292960628411577.post-34733590425684349182011-06-29T12:33:00.000-07:002011-06-29T12:39:27.947-07:00Cara membuat Jam Cantik dan Berbunyi di Blog (blogspot) tanpa Banner<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">Jika anda ingin membuat atau memasang jam cantik seperti dibawah pada blog anda, caranya adalah seperti berikut ini:</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><embed height="40" pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://sites.google.com/site/myedithtml/swf/edit-html.clock-7.swf" type="application/x-shockwave-flash" width="120" wmode="transparent"></embed></span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">buka: <b>Blogger <span class="IL_AD" id="IL_AD4" style="background-attachment: scroll !important; background-clip: initial !important; background-color: transparent !important; background-image: none !important; background-origin: initial !important; background-position: 0% 50%; background-repeat: repeat repeat !important; border-bottom-color: rgb(0, 0, 255) !important; border-bottom-style: dotted !important; border-bottom-width: 1px !important; color: blue; cursor: pointer !important; display: inline !important; float: none !important; font-style: normal !important; font-weight: bold !important; padding-bottom: 1px !important; padding-left: 0px !important; padding-right: 0px !important; padding-top: 0px !important; position: static;">Dashboard</span> > Layout > Page Element > Add a Gadget > HTML/JavaScript</b></span><br />
<b><span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br />
</span></b><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">kemudian copy kode di bawah dan paste pada <b>Gadget > HTML/JavaScript </b>yang terbuka:</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><span class="Apple-style-span" style="color: blue;"><embed pluginspage="http://www.macromedia.com/go/getflashplayer" src="https://sites.google.com/site/myedithtml/swf/edit-html.clock-7.swf" wmode="transparent" type="application/x-shockwave-flash" width="</span><span class="Apple-style-span" style="color: red;">120</span><span class="Apple-style-span" style="color: blue;">" height="</span><span class="Apple-style-span" style="color: red;">40</span><span class="Apple-style-span" style="color: blue;">"></span></span><br />
<span class="Apple-style-span" style="color: #274e13; font-family: Verdana, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">Kemudian <b>Simpan</b>, dan lihatlah hasilnya.</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Verdana, sans-serif;">*) warna <span class="Apple-style-span" style="color: red;">merah </span>adalah ukuran jam yang dapat anda sesuaikan.</span>Unknownnoreply@blogger.com29tag:blogger.com,1999:blog-3850292960628411577.post-60056344238916704282011-06-22T10:12:00.000-07:002011-06-22T10:12:24.555-07:00Membuat Semua Link di Blogspot terbuka di window (tab) baru /Make All Links Open In A New WindowIf you compose your blog, as I do, with lots of links to other blogs and web sites, you may make it convenient for your readers to view those other blogs or web sites then return to your blog. Instead of viewing the other blog or web site in the same window, you open the other blog or web site in a new window. When your reader finishes viewing the other blog or web site, he / she simply closes the new window. The article that he or she was reading, in your blog, is right there in front of them.<br />
<br />
You can, similarly, do this with pictures. If you want your reader to view a picture, then return to the text in your article, you open the picture in a new window.<br />
<br />
Instead of coding each individual link to a blog, picture, or web site, you can make all links within your blog open in a new window. Simply add a "<base target='_blank' />" to your blog, in the header.<br />
<br />
Find<br />
<head><br />
<br />
And change that to:<br />
<head><br />
<span style="color: #38761d;"><base target='_blank' /></span><br />
<br />
But, consider this carefully. If you construct your blog heavily using hypertext, as I construct my blogs, do you really want your readers having to close a window each time they finish reading a linked article in your blog? Do this with discretion.<br />
<br />
While the reader is in your blog, give them one choice of what to read at any time. If they click on a link to read some detail, let them read the detail. Then, they click on the Back button, and return to where they left the previous article. Only if the reader is leaving your blog, to read another web site for detail, should you keep your blog open in the current window, and open a new window for the new web site.<br />
<br />
<div style="text-align: justify;">Of course, if you have an insanely huge amount of links that you would like this way, maybe in a few linklists, you could host the linklists in another blog, and include the other blog in an iframe or maybe a series of posts linked to your public blog. Maybe including the iframe in your sidebar would work for you</div>Unknownnoreply@blogger.com8tag:blogger.com,1999:blog-3850292960628411577.post-56060362054214934712011-06-20T04:30:00.000-07:002011-06-20T04:32:38.426-07:00Cara Membuat Twitter Follow Burung Terbang (bird Sprite) pada Blogspot<div class="separator" style="clear: both; text-align: center;"><a href="http://4.bp.blogspot.com/-jmMHmT3wOak/Tam8b6aBLkI/AAAAAAAABBg/goBeWfPYRYw/s1600/birdsprite.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-jmMHmT3wOak/Tam8b6aBLkI/AAAAAAAABBg/goBeWfPYRYw/s1600/birdsprite.png" /></a></div><br />
Hallo Sobat Edit-HTML, kali ini saya akan menjelaskan bagaimana cara membuat twitter Follow dengan gaya burung yang terbang ke seluruh halaman blog sobat, cukup mudah dan sangat praktis namun tetap kreatif, inilah langkah-langkahnya:<br />
<br />
<b>Blogger Dashboard > Layout > Page Element > Add a Gadget > HTML/JavaScript</b><br />
<br />
Kemudian Copykan Code dibawah ini ke <b>HTML/JavaScript </b>yang<b> </b>telah terbuka<b></b><br />
<br />
<div style="color: #38761d;"><div class="widget-content"></div><div style="color: #38761d;"><script type="text/javascript" src="http://techgyo.com/wp-content/FlyingTwitbird/tripleflap.js"></script></div><div style="color: #38761d;"><script type="text/javascript"></div><div style="color: #38761d;">var birdSprite="http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png";</div><div style="color: #38761d;">var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");</div><div style="color: #38761d;">var twitterAccount = "<span style="color: red;">http://twitter.com/akuntwittermu</span>";var tweetThisText = "Twitter - kamu <span style="color: red;">http://www.alamatblogmur.blogspot.com/</span>";tripleflapInit();</div><div style="color: #38761d;"></script></div><div style="color: #38761d;"><a id="theBird" href="<span style="color: red;">http://twitter.com/akuntwittermu</span>" target="_blank" style="display: block; position: absolute; width: 64px; height: 64px; background-image: url(&quot;http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png&quot;); background-color: transparent; z-index: 947; left: 28px; top: 97px; background-position: 0px 0px;"></a></div><div style="color: #38761d;"><a id="theBirdLtweet" href="http://twitter.com/home?status=Twitter%20-%20techgyo%20<span style="color: #38761d;">http</span>%3A//<span style="color: red;">www.alamatblogmu.blogspot.com</span>/" target="_blank" title="tweet this" style="position: absolute; background-image: url(&quot;http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png&quot;); background-color: transparent; width: 58px; height: 30px; z-index: 951; left: 49px; top: 583px; display: none; opacity: 0; background-position: -64px 0px;"></a></div><div style="color: #38761d;"><a id="theBirdLfollow" href="<span style="color: red;">http://twitter.com/akuntwittermu</span>" target="_blank" title="follow me" style="position: absolute; background-image: url(&quot;http://techgyo.com/wp-content/FlyingTwitbird/birdsprite.png&quot;); background-color: transparent; width: 58px; height: 20px; z-index: 952; left: 54px; top: 613px; display: none; opacity: 0; background-position: -64px -30px;"></a></div><div style="color: #38761d;"></div></div><br />
<u>Keterangan</u><b></b><br />
Yang berwarna <span style="color: red;">merah</span> dapat disesuaikan dengan alamat blog / akuntwitter sobat edit-HTML<b>.</b><br />
<b><br />
</b><br />
<b>Kemudian Simpan dan Lihat Hasilnya<br />
</b>Unknownnoreply@blogger.com18