SEO Title Image Dan Alt Image Blogspot

Seo Image pada blogspot dapat meningkatkan kualitas seo sebuah blog. Secara otomatis penempatan Title Image dan Alt Image dapat diterapkan dengan meletakkan script dibawah ini pada template blog.

Image Source: http://photos.demandstudios.com/getty/article/88/45/87487527.jpg

Letakkan script SEO Title Dan Alt Image untuk blogger ini diatas </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
 $('img').each(function(){
 var $img = $(this);
 var filename = $img.attr('src')
 $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));

 $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
 });
});
//]]>
</script>

Cara Membuat About Me Author Bio Profil Blogspot

Author Bio / About Me / Profil Box pada Blogspot dapat dibuat dengan berbagai kombinasi dan teknik. Cara mudah membuat Kotak About Me ini adalah dengan menyisipkan sedikit kode-kode sederhana.

Profil Box yang nantinya terpasang dibawah post artikel, dipastikan akan meningkatkan kualitas SEO dari setiap halaman, karena mengandung Authorship dan Meta Description blog.

Untuk membuat Author Bio dibawah artikel, dapat dilakukan langkah-langkah berikut:

Langkah 1
Cari dan temukan:

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

atau

<div class='post-footer-line post-footer-line-3'>
...content...
</div>

Langkah 2
Letakkan kode ini dibawahnya:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.profil{width:auto;margin:10px;padding:10px;border:1px solid #dedede}
.profil h3{font-family:Baskerville,&#39;Baskerville Old Face&#39;,&#39;Hoefler Text&#39;,Garamond,&#39;Times New Roman&#39;,serif;font-size:125%}
.g-plus,.profil-photo{float:left;margin:0 10px 0 0}
</style>
<div class='profil'>
<h3>About Me</h3>
<div class='profil-photo'>
<a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='author'>
<div style='width:72px; height:72px'>
<img expr:alt='data:post.author' expr:title='data:post.author' height='72' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSnNVwpKkfPQ0UkgrMxD6NreJYYGYQXcps5H30EuL1pOf1mbApFiRVs82n6sbSIFMPh7tw1oz65h4z8mKUNPlOi58IxYp0YjpBm9RUJ_SMNHIo8sEgBbc3q-PhQ2qSZjmYuFwfI1B1mdg/s1600/avatar.png' width='72'/>
</div>
</a>
</div>
<div class='blog-info'>
<span><a expr:href='data:blog.homepageUrl' expr:title='data:blog.title'><data:blog.title/></a> : <data:description/></span><br/>
<span><data:blog.pageTitle/> - <data:blog.metaDescription/></span>
</div>
<span>Posted By: <a expr:href='data:post.authorProfileUrl' expr:title='data:post.author' rel='publisher'><data:post.author/></a> On: <data:post.dateHeader/></span>
<div class='g-plus' data-rel='publisher' data-width='100%' expr:data-href='data:post.authorProfileUrl'/>
</div>
</b:if>

100% SEO Friendly Blogger Template Terbaik

Free Download Clean, Stylist, User Friendly Seo Friendly Blogger Template. This template was designed for better search engine crawler result, completed with optimized dinamic heading tags, metadata opengraph and social network sharing button. It is 100% Free With Or Without Credit Links.

TEMPLATE SPESIFICATION

Template Name : Fastest Seo Friendly Blogger Template V.06
Author Name : Muhammad Habib Effendi
Template Url : http://hab1b.blogspot.com

TEMPLATE FEATURES

• Responsive With CSS Media Query
• Seo Optimized With Metadata Opengraph
• Google Plus, Twitter And Facebook Social Network Sharing Button
• 100% CSS Styling Without Images
• More Than 5 CSS Web Save Fonts
• Two Columns
• Three Columns Footer
• Dropdown Menu
• Default Blogspot Thumbnail And Summary
• Related Posts With Tooltips
• Author Bio
• Stylist And Compact Threaded Comment

SCREENSHOT

DEMO | DOWNLOAD

Bloglist Widget Blogspot

Bloglist Widget Blogspot adalah widget blogroll dapat digunakan untuk link exchange antar sesama blogger. Bloglist Widget Blogspot ini dapat dibuat menjadi lebih efisien dan powerfull bagi link exchange dengan sedikit modifikasi.

Image Source: crafterminds.com

Cara Membuat Halaman Bloglist Statis dapat menjadi alternatif untuk memaksimalkan fungsi blogroll dan agar Blog List menjadi lebih menarik, dapat dilakukan beberapa perubahan pada scriptnya.

Caranya, replace bloglist widget script dengan kode berikut:

<b:widget id='BlogList1' locked='false' title='Blogroll' type='BlogList'>
<b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h4 class='title'><data:title/></h4>
    </b:if>

    <div class='widget-content'>
      <div class='blog-list-container' expr:id='data:widget.instanceId + &quot;_container&quot;'>
        <ul expr:id='data:widget.instanceId + &quot;_blogs&quot;'>
          <b:loop values='data:items' var='item'>
            <li expr:style='data:item.displayStyle'>
              <div class='blog-icon'>
                <b:if cond='data:showIcon == &quot;true&quot;'>
                  <input expr:value='data:item.blogIconUrl' type='hidden'/>
                </b:if>
              </div>
              <div class='blog-content'>
                <div class='blog-title'>
                  <a expr:href='data:item.blogUrl' target='_blank'>
                    <data:item.blogTitle/></a>
                </div>
                <div class='item-content'>
                  <b:if cond='data:showItemThumbnail == &quot;true&quot;'>
                    <b:if cond='data:item.itemThumbnail'> 
                      <div class='item-thumbnail'>
                        <a expr:href='data:item.itemUrl' target='_blank'>
                          <img border='0' expr:alt='data:item.itemTitle' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:title='data:item.itemTitle' expr:width='data:item.itemThumbnail.width'/>
                        </a>
                      </div>
                    <b:else/>
                        <div class='item-thumbnail'>
                            <a expr:href='data:item.itemUrl' target='_blank'>
                                <img border='0' expr:alt='data:item.itemTitle' expr:height='data:thumbnailSize' expr:title='data:item.itemTitle' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfC8VNfCBAlKK91hkeUPVR2X455ni9gbhGdWzZzzT3jovlGDrsyMDmWF-LdCNRFDBKkD5_Xvmrz0lMMTBmXLibqgLnvy9h2Q91-QjNJ5i5zq7x3-hjElZ2JucmdFHmgzzjPPcdPX6cPew4/'/>
                            </a>
                        </div>
                    </b:if>
                  </b:if>
                  <b:if cond='data:showItemTitle == &quot;true&quot;'>
                    <span class='item-title'>
                      <b:if cond='data:item.itemUrl != &quot;&quot;'>
                        <a expr:href='data:item.itemUrl' expr:title='data:item.itemTitle' target='_blank'>
                          <data:item.itemTitle/></a>
                      <b:else/>
                        <data:item.itemTitle/>
                      </b:if>
                    </span>
                  </b:if>
                  <b:if cond='data:showItemSnippet == &quot;true&quot;'> 
                    <b:if cond='data:showItemTitle == &quot;true&quot;'>
                      -
                    </b:if>
                    <span class='item-snippet'>
                      <data:item.itemSnippet/>
                    </span>
                  </b:if>
                  <b:if cond='data:showTimePeriodSinceLastUpdate == &quot;true&quot;'>
                    <div class='item-time'>
                      <data:item.timePeriodSinceLastUpdate/>
                    </div>
                  </b:if>
                </div>
              </div>
              <div style='clear: both;'/>
            </li>
          </b:loop>
        </ul>

        <b:if cond='data:numItemsToShow != 0'>
          <b:if cond='data:totalItems &gt; data:numItemsToShow'>
            <div class='show-option'>
              <span expr:id='data:widget.instanceId + &quot;_show-n&quot;' style='display: none;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showNText/></a>
              </span>
              <span expr:id='data:widget.instanceId + &quot;_show-all&quot;' style='margin-left: 5px;'>
                <a href='javascript:void(0)' onclick='return false;'><data:showAllText/></a>
              </span>
            </div>
          </b:if>
        </b:if>

        <b:include name='quickedit'/>
      </div>
    </div>
  </b:includable>
</b:widget>

Dan beri style pada css, letakkan kode css ini diatas ]]></b:skin>

.blog-list-container .blog-content{float:left;margin:0 0 5px;text-indent:0;width:100%}
.blog-list-container .item-content{font-size:90%;height:95px;line-height:1.3em;overflow:hidden}
.blog-list-container .item-thumbnail{float:left;margin:2px 5px 5px}

Star Rating Widget Blogger

Star Rating Widget Blogger secara default dapat diterapkan menggunakan start rating default for blogspot melalui http://draft.blogger.com. Untuk memasang star rating widget ini dapat pula memanfaatkan widget yang disediakan oleh http://www.graddit.com dengan pilihan tampilan yang lebih bervariasi dan menarik.

Source: http://www.freetattoopicture.com

Default Star Rating Widget Blogger

Cara memasang rating bintang blogspot, sedikit lebih rumit :)

Langkah 1
Edit User Setting

Langkah 2
Activate Blogger Draft

Langkah 3
Edit Layout - Edit Posting Blog - Activate Default Star Rating For Blogger

Langkah 4
Jika Star Rating tidak terlihat, maka Edit HTML Template - Expand Widget Templates - Ctrl+F <div class='post-header-line-1'> - Letakkan script ini:

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <span class='star-ratings'>
        <b:if cond='data:top.showStars'>
            <div expr:g:background-color='data:backgroundColor' expr:g:text-color='data:textColor' expr:g:url='data:post.absoluteUrl' g:height='42' g:type='RatingPanel' g:width='280'/>
        </b:if>
      </span>
      </b:if>

Animated Star Rating Widget Blogger

Cara memasang rating bintang untuk blogspot dengan menggunakan widget dari 3th party, tidak sulit :)

Langkah 1
Edit HTML Template - Expand Widget Templates - Ctrl+F <div class='post-header-line-1'> - Letakkan script ini:

<b:if cond='data:blog.pageType != &quot;index&quot;'><b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='"labels_" + data:post.id' style='display: none; visibility: hidden;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>,</b:loop></b:if></div>Rate this posting: <div expr:id='data:post.id' class='ffbs_rate'>{[[&#39;&lt;img src=&quot;http://static.graddit.com/img/star.png&quot;/&gt;&#39;]]}</div>
<div expr:id='&quot;ffbs_stats_&quot; + data:post.id' class='ffbs_stats'></div>
<script type='text/javascript' expr:src='&quot;http://www.graddit.com/rate/eng/5/&quot; + data:post.id + &quot;?id=&quot; + data:post.id + &quot;&amp;stats=ffbs_stats_&quot; + data:post.id + &quot;&amp;labels=labels_&quot; + data:post.id + &quot;&amp;info=info-&quot; + data:post.id + &quot;&amp;info_delay=2&amp;url=&quot; + data:post.url + &quot;&amp;class_star=ffbs_star_img&amp;class_star_set=ffbs_star_img_set&amp;class_star_vote=ffbs_star_img_vote&amp;views=yes&amp;votes=yes&amp;average=yes&quot;'></script></b:if></b:if> 

Untuk Animated Star Rating Widget For Blogger ini, terdapat berbagai pilihan style, silahkan kunjungi:

Source: http://www.graddit.com/ratings-widget

Tutorial: http://fruitfulbookmarks-en.blogspot.com/2011/11/rating-widgets-for-websites-blogs-and.html

Link Exchange Dengan Thumbnail - Thumbshot Blogger

Link Exchange Dengan Thumbnail - Thumbshot Website Untuk Blogger.

Berbagaimacam cara untuk menampilkan link exchange, namun jarang sekali yang disertakan dengan thumbshot/ thumbnail/ gambar mini dari link yang tertera :)

Dengan adanya thumbshot pada halaman blogroll blogger, tentunya akan terlihat sedikit berbeda pada tampilan dan terlihat menarik.  

Thums Up Icon By http://www.psdgraphics.com

Link Website Dan Blog Dengan Gambar Mini Screenshot Website

Cara membuat thumbshot atau thumbnail website pada blogspot, sangat mudah sekali;

Letakkan diatas </head> kode:

<script type="text/javascript" src="http://www.picoshot.com/pagepix.js"></script>

Kemudian, pada setiap bagian pada link-exchange, bubuhkan kode:

<script type="text/javascript">stw_pagepix('[url]', 'en');</script>

Dan hasilnya akan menjadi seperti ini:


Thumbshot ini disediakan gratis dan dengan fitur unlimite website thumbnails oleh:



Free Website Thumbnails provided by Picoshot

Cara Membuat Halaman Bloglist Statis

Bloglist Widget pada Blogspot adalah sebuah widget yang sangat berguna untuk saling bertukar link antara sesama blogger. Dengan beragam pilihan tampilan yang menarik dan link dofollow tentunya widget ini sangat banyk digunakan oleh blogger untuk keperluan bertukar backlink.

Namun adakalanya penggunaan widget ini dapat memberikan efek negatif pada blog, seperti:

1. memberatkan loading blog apabila setiap link menggunakan "enable image", 
2. merusak tampilan blog apabila banyak link berjajar secara vertikal dari atas ke bawah (cara seperti ini dapat diantisipasi dengan menggunakan css; yaitu dengan meletakkan kode .blog-list-container{height:250px;overflow:auto} diatas ]]></b:skin>),
3. dan merusak posisi blog dalam serp apabila jumlah link dalam bloglist terlalu banyak; sebaiknya jumlah link dalam sebuah halaman blog tidak lebih dari 100 links*.

Dengan meletakkan Widget Bloglist pada sebuah Halaman Statis, maka banyak hal yang didapatkan dan meminimalisir efek negatif tersebut :)

source: http://madnesslab.deviantart.com/art/Be-Creative-Wallpaper-89392128

Cara Membuat Widget Bloglist Pada Halaman Static Blogspot

Langkah Pertama:
Buatlah sebuah halaman kosong dan jangan tuliskan apapun didalamnya, serta non-aktifkan kotak komentar.

Langkah Kedua:
Setting Layout dan letakkan Bloglist Widget dibawah Posting Blog

 


Langkah Ketiga:
Edit HTML Template, Expand Widget Templates dan kemudian - CTRL+F BlogList1


Langkah Keempat:
Arahkan BlogList1 hanya pada halaman kosong yang telah dibuat sebelumnya.

Letakkan  Blogspot Conditional Tags Url

<b:if cond='data:blog.url == &quot;http://fau2i.blogspot.com/p/blog-list.html&quot;'>

dibawah

<b:includable id='main'>

Dan tutup kondisi itu dengan

</b:if>

diatas

</b:includable>

<b:widget id='BlogList1' locked='false' title='' type='BlogList'>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;http://fau2i.blogspot.com/p/blog-list.html&quot;'>
<style>
.blog-list-container img{float:left;margin:10px}
.blog-list-container li{border:1px solid #dedede;box-shadow:0 1px 2px rgba(0,0,0,.3);margin:10px 0}
.blog-list-container .item-content{line-height:2em}
#main-wrapper{width:100%}
#sidebar-wrapper{display:none}
</style>
.......................
.......................
.......................
.......................
.......................
.......................
.......................
.......................
</b:if>
</b:includable>
</b:widget> 

Langkah Kelima:

Jika berhasil, maka akan menjadi seperti Halaman Blog List ini :D

Langkah Keenam:

Selamat Mencoba :D

Cara Membuat Template Blogspot

Untuk membuat template personal blogspot tidak begitu sulit, cukup dengan mengetahui bagian penting dari template dan susunan template blogspot sesuai dengan yang diinginkan.

Dalam membuat Template Blogspot yang sederhana, Saya bagi komponen-komponennya menjadi beberapa bagian, karena Saya belum bisa menjelaskannya secara detail :D

Hasilnya ya bisa saja berbeda, tergantung pengetahuan masing-masing orang, kalau Saya sih baru bisa menghasilkan CANVASnya saja :D

DEMO SCRIPT
DOWNLOAD SUMBER

Bagian pertama template blogspot merupakan tipe dokumen dan html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Bagian kedua template itu adalah head dan title

<!--:[ START HEADING ]:-->
<head>
<b:include data='blog' name='all-head-content' />
<title><data:blog.pageTitle/></title>

Bagian ketiga template adalah CSS Style

<!--:[ START STYLE ]:-->
<b:skin><![CDATA[
/* -----------------------------------------------------
Smart Template For Blogspot By http://fau2i.blogspot.com
Name:     Smart Template
Author:   Muhammad Fauzi
URL:      http://fau2i.blogspot.com
-------------------------------------------------------- */
#navbar-iframe{display:none;height:0;visibility:hidden}

html{-webkit-text-size-adjust:none}

body{background:#f8f8f8}

#outer-wrapper{width:980px;margin:0 auto;background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(100,100,100,.3);-moz-box-shadow:0 2px 6px rgba(100,100,100,.3);-webkit-box-shadow:0 2px 6px rgba(100,100,100,.3);color:#222;font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;font-size:1em;line-height:1.575em;text-align:left}

#header-wrapper{margin:0 auto}
#header{width:100%;height:120px;clear:both}
#header-inner{margin:20px;padding:20px}

#header h1,#header h3{color:#222;font-family:Lucida sans unicode,Georgia, Times New Roman;font-weight:400;margin:0;padding:0;font-size:35px}
#header h2{color:#888;font-family:Georgia, Times New Roman;font-weight:400;text-decoration:none;margin:0;padding:0;font-size:12px}

#header-navigation{border-top:1px solid #ddd;border-bottom:1px solid #ddd}
#header-navigation ul{padding:0}
#header-navigation li{width:20px;padding:10px;list-style:none;display:inline;text-decoration:none}

#main-wrapper{margin:10px}
#content-wrapper{float:left;width:600px;border-right:1px solid #eee;margin: 0 10px}
.post-body img{padding:5px;border:1px solid #eee;box-shadow:0 2px 4px #999}
.post-body h2{border-bottom:1px solid #ccc;font:Segoe UI, Serif;line-height:1.4em;letter-spacing:.1em;color:#549D50;font-size:1.25em;margin:10px 0 4px;}
.post-body h3{font:Segoe UI, Serif;line-height:1.4em;letter-spacing:.1em;color:#303035;font-size:150%;margin-top:10px;margin-bottom:2px;}
.post-body img{overflow:hidden;border:1px solid #dcd9d9;max-width:100%;padding:5px;box-shadow:0 2px 6px rgba(100,100,100,.3);-moz-box-shadow:0 2px 6px rgba(100,100,100,.3);-webkit-box-shadow:0 2px 6px rgba(100,100,100,.3)}

img{max-width:100%;height:auto}
.video{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden}
.video iframe,.video object,.video embed{position:absolute;top:0;left:0;width:100%;height:100%}

a{color:#00adeb;text-decoration:none}
a:hover{color:#000609}

#sidebar-wrapper{float:right;width:320px;margin:0 10px 0 0}
.sidebar ul{padding:0}
.sidebar li{list-style:none}
.sidebar h2,.sidebar h4{font-size:16px;}
.item-thumbnail{width:72px;height:72px;padding:5px;border:1px solid #eee;box-shadow:0 2px 4px #999}

#footer-wrapper{width:100%;margin:0 auto;border-top:3px double #ccc;padding-top:10px;clear:both}
#footer1{width:33%;float:left;margin:0}
#footer2{width:33%;float:left;margin:0 0 0 5px}
#footer3{width:33%;float:right;margin:0}

.credit{margin-top:20px;border-top:2px solid #ddd}
.credit,.credit a{color:#999}
.credit p{float:left;margin-left:20px}
.credit span{display:block;float:right;margin-right:20px;margin-top:15px;font-size:75%}
.Top{border-bottom:15px solid #000;border-left:15px solid transparent;border-right:15px solid transparent;position:fixed;bottom:0;right:10%;width:0;height:0;z-index:1}

::-webkit-scrollbar{width:15px;background:rgba(0,0,0,.07);}
::-webkit-scrollbar-thumb{background:#790;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;}

@media screen and (max-width: 980px) {
body,#outer-wrapper,#header-wrapper,#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{width:95.725%;margin:0 auto}
#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{display:inline-block;width:100%}
}

@media screen and (max-width: 750px) {
body,#outer-wrapper,#header-wrapper,#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{width:90%;margin:0 auto}
#header-navigation,#content-wrapper,#sidebar-wrapper,#footer-wrapper{display:inline-block;width:100%}
}
]]></b:skin>
<!--:[ END STYLE ]:-->

</head>
<!--:[ END HEADING ]:-->

Bagian keempat theme blogger yaitu  body, outer dan header

<!--:[ START BODY ]:-->
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/>

<!--:[ Start Outer ]:-->
<div id='outer-wrapper'>

<!--:[ Start Header ]:-->
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Smart Theme (Header)' type='Header'/>
</b:section>
</div>
<!--:[ End Header ]:-->

Bagian kelima dari komponen template ialah main, navigasi, content, sidebar, footer

<!--:[ Start Main Wrapper ]:-->
<div id='main-wrapper'>

<!--:[ Start Header Navigation ]:-->
<div id='header-navigation'>
<b:section class='topmenu' id='topmenu' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Menu' type='LinkList'>
<b:includable id='main'>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
</b:widget>
</b:section>
</div>
<!--:[ End Header Navigation ]:-->

<!--:[ Start Content Wrapper ]:-->
<div id='content-wrapper'>
 <b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
 </b:section>
</div>
<!--:[ End Content Wrapper ]:-->

<!--:[ Start Sidebar Wrapper ]:-->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
<div style='clear:both;'/>
<div class='sidebar21' style='float:left;width:42.5%;'>
<b:section class='sidebar' id='sidebar-right-2-1' preferred='yes'/>
</div>
<div class='sidebar22' style='float:right;width:57.5%;'>
<b:section class='sidebar' id='sidebar-right-2-2' preferred='yes'/>
</div>
<div style='clear:both;'/>
<b:section class='sidebar' id='sidebar3' preferred='yes'/>
<div style='clear:both;'/>
</div>
<div class='clear' style='height:40px'/>
<!--:[ End Sidebar Wrapper ]:-->

<!--:[ Start Footer Wrapper ]:-->
<div id='footer-wrapper'>
<div id='footer-bottom' style='text-align: center; padding-top:10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>
<div style='clear:both;'/>
<div id='footer1'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer2'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
<div style='clear:both;'/>
<!--:[ End Footer Wrapper ]:-->

<!--:[ Start Credit Links ]:-->
<div class='credit'>
<p>Copyright &amp;copy; <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl' title='All Rights Reserved'> <data:blog.title/></a></p>
<span>Designed By: <a href='http://fau2i.blogspot.com' title='Fauzi Blog'>Fauzi Blog</a></span>
<div class='clear'/>
</div>
<!--:[ End Credit Links ]:-->

</div>
<!--:[ End Main Wrapper ]:-->

Bagian terakhir dari template tersebut adalah penutup dari div, body dan html

</div>
<!--:[ End Outer ]:-->

<!--:[ START EMBEDDED WIDGET ]:-->
<b:include data='blog' name='google-analytics'/>
<!--:[ END EMBEDDED WIDGET ]:-->
</body>
<!--:[ END BODY ]:-->

</html>

Cara Mempercepat Blog Dengan Lazy Loading

Salahsatu cara mempercepat loading blog adalah dengan menunda penampilan gambar-gambar selama beberapa saat ketika sebuah blog di load oleh browser.

Dengan demikian kerja browser akan menjadi lebih ringan dan halaman blog menjadi lebih cepat terbuka.

Lazy Loading pada blogspot sangat mudah diterapkan, cukup dengan menyisipkan javascript dan jquery maka teknik ini akan dapat bekerja dengan sempurna.

Lazy Loading Blogger

Untuk menggunakan Lazy Loading Images pada blogspot, cukup sisipkan kode berikut tepat diatas </body>:

<!--:[ LAZY LOAD START ]:-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script src='http://mu5lim.googlecode.com/files/lazyload.js' type='text/javascript'/>
<script type='text/javascript'>
      $(function() {
          $(&quot;img&quot;).lazyload({placeholder : &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigfTHarcAVWXIa-3-PXROVEZRr7Jll31Dt3fOOW9RfKQNtjpXE2pKLF_Ne7YtMFaJc8Ik-2XHY2flOGZ8LYVAxjUze-X2C9hiqwsQb2vpFn5eYTtU_SCdNp5Qy07IP_JSjsfqmdvXYJho/s1600/lazybg.png&quot;});
      });
</script>
<!--:[ LAZY LOAD END ]:-->

Cara Membuat Redirect URL

Tutorial cara melakukan redirect url/ pengalihan link pada halaman blog menggunakan teknik html, javascript dan php berikut ini disajikan sebagi dokumentasi bagi saya dan mudah-mudan bermanfaat juga bagi blogger lainnya :)

Adakalanya redirect url atau pengalihan link ini berguna terutama untuk suatu halaman yang tidak lagi aktif maupun error dan bisa juga untuk mengarahkan pengunjung blog kesebuah halaman khusus yang diinginkan.

Dibawah ini dituliskan beberapa cara untuk merubah arah dari link, baik dengan menggunakan HTML Redirect, JAVASCRIPT Redirect dan PHP Redirect.

Teknik mengarahkan link menggunakan HTML; letakkan kode ini diatas </head>

<meta http-equiv="Refresh" content="5; url=http://url_blog_yang_dituju"/>

Teknik mengalihkan url menggunakan Javascript; ; letakkan kode ini diatas </head>

<script type="text/javascript">
window.location = "http://url_blog_yang_dituju"
</script>

atau

<script language="javascript" type="text/javascript">
window.location.href="http://url_blog_yang_dituju?backurl="+window.location.href;
</script>

atau

<script language="javascript">
alert("back");
window.history.back(-1);
</script>

atau

<script language="javascript">
window.navigate("http://url_blog_yang_dituju");
</script>

atau

<script language="JavaScript">
self.location="http://url_blog_yang_dituju";
</script>

atau

<script language="javascript">
alert("Access Violation");
top.location="http://url_blog_yang_dituju";
</script>


Melakukan redirect url dengan php; letakkan kode ini dibagian paling atas dari script php
<?php header( 'Location: http://url_blog_yang_dituju' ) ;?>

Cara Mengganti Text Dan Tombol Navigasi Blogspot

Mempercantik navigasi Next Post (blog-pager-newer-link), Previous Post (blog-pager-older-link) dan Home (home-link) dapat dilakukan dengan merubah teks Navigasi Older Post, Newer Post dan Home atau bisa juga dengan Memberi tombol navigasi older, new post dan home page.

Untuk merubah Navigasi Blogger dengan Text maupun Tombol agar menjadi lebih indah dan menarik, dapat dilakukan dengan menerapkan langkah-langkah berikut ini:

Temukan dengan Ctrl+F

<b:includable id='nextprev'>

Ganti navigasi default blogspot yang ada dibawahnya dengan:

<div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
      <span id='blog-pager-newer-link'>
      <a class='nav-item nav-prev' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'>
        <span class='text'>Next</span></a>
      </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
      <span id='blog-pager-older-link'>
      <a class='nav-item nav-next' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'>
      <span class='text'>Prev</span></a>
      </span>
    </b:if>
    
    <span id='home-link'>
    <a expr:href='data:blog.homepageUrl'><span class='text'>Home</span></a>
    </span>

    <b:if cond='data:mobileLinkUrl'>
      <div class='blog-mobile-link'>
        <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>
      </div>
    </b:if>

  </div>

Beri penggaya dengan CSS, letakkan diatas ]]></b:skin>

#blog-pager #home-link,#blog-pager-newer-link,#blog-pager-older-link{opacity:.3;-moz-transition-property:opacity;-moz-transition-duration:1.5s;-moz-transition-delay:.75s;-webkit-transition-property:opacity;-webkit-transition-duration:1.5s;-webkit-transition-delay:.75s;-o-transition-property:opacity;-o-transition-duration:1.5s;-o-transition-delay:.75s;transition-property:opacity;transition-duration:1.5s;transition-delay:.75s;}#blog-pager #home-link:hover,#blog-pager-newer-link:hover,#blog-pager-older-link:hover{opacity:1;}#blog-pager #home-link,#blog-pager-newer-link,#blog-pager-older-link{width:100px;height:100px;border-bottom:2px solid #eee;background-image:-webkit-linear-gradient(top, #999, #d0d0d0 80%);background-image:-moz-linear-gradient(top, #999, #d0d0d0 80%);background-image:-ms-linear-gradient(top, #999, #d0d0d0 80%);background-image:-o-linear-gradient(top, #999, #d0d0d0 80%);background-image:linear-gradient(top, #999, #d0d0d0 80%);-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;box-shadow:inset rgba(0,0,0,.2) 0 5px 6px;}.text{position:absolute;width:80px;height:52px;left:10px;top:10px;cursor:pointer;font-family:"Lucida Sans";font-weight:bold;font-size:23px;color:#888;text-shadow:0 1px 0 #fff;text-align:center;padding-top:28px;-moz-border-radius:100px;-webkit-border-radius:100px;border-radius:100px;background-image:-webkit-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:-moz-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:-ms-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:-o-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-image:linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100%);background-position:0 6px;background-color:#eee;background-repeat:no-repeat;-webkit-box-shadow:rgba(0,0,0,.4) 0 3px 6px;-moz-box-shadow:rgba(0,0,0,.4) 0 3px 6px;box-shadow:rgba(0,0,0,.4) 0 3px 6px;-webkit-transition:all .1s ease-in;-moz-transition:all .1s ease-in;-ms-transition:all .1s ease-in;-o-transition:all .1s ease-in;transition:all .1s ease-in;opacity:1;}.text:hover{background-position:0 0;-webkit-box-shadow:rgba(0,0,0,.4) 0 3px 8px;-moz-box-shadow:rgba(0,0,0,.4) 0 3px 8px;box-shadow:rgba(0,0,0,.4) 0 3px 8px;}.text:active{width:76px;height:48px;margin:2px 0 0 2px;border-bottom:1px solid #fff;font-size:21px;color:#777;-webkit-box-shadow:inset rgba(0,0,0,.5) 0px 5px 10px;-moz-box-shadow:inset rgba(0,0,0,.5) 0px 5px 10px;box-shadow:inset rgba(0,0,0,.5) 0px 5px 10px;}

Atur posisinya berdasarkan jenis halaman, letakkan kode berikut diatas </head>

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
.nav{z-index:9999;position:fixed;top:35%;}#blog-pager #home-link{position:fixed;left:25px;z-index:99999;bottom:55%;}#blog-pager-newer-link{position:fixed;left:25px;z-index:99999;bottom:35%;}#blog-pager-older-link{position:fixed;left:25px;z-index:99999;bottom:15%;}
</b:if>
</style>
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;index&quot;'>
.nav{z-index:9999;position:fixed;top:35%;}#blog-pager #home-link{position:fixed;left:50%;margin-left:-50px;bottom:0;z-index:99999;}#blog-pager-newer-link{position:fixed;left:25px;z-index:99999;bottom:35%;}#blog-pager-older-link{position:fixed;right:25px;z-index:99999;bottom:35%;}#blog-pager #home-link{opacity:.2;}
</b:if>
</style>

SAVE & FINISH

Cara Membuat Fix Navigasi Menu

Slide Out Fixed Navigasi Menus adalah menu yang tersusun pada sisi blog dengan posisi tetap atau fix. Untuk memasangnya pada blogspot sangat mudah sekali. Copy script berikut dan letakkan pada HTML/JAVASCRIPT GADGET.

Kode yang dibutuhkan adalah:

<!--start navigation fixed menu-->
<style type="text/css">
ul#navigation{position:fixed;margin:0px;padding:0px;top:100px;left:0px;list-style:none;z-index:9999;}
ul#navigation li{width:100px;padding:0;margin:0;}
ul#navigation li a{display:block;margin-left:-2px;width:100px;height:50px;background-color:rgba(0,0,0,.5);background-repeat:no-repeat;background-position:center;border:1px solid #afafaf;-moz-border-radius:0 10px 10px 0px;-webkit-border-bottom-right-radius:10px;-webkit-border-top-right-radius:10px;-khtml-border-bottom-right-radius:10px;-khtml-border-top-right-radius:10px;-moz-box-shadow:0 4px 3px #000;-webkit-box-shadow:0 4px 3px #000;opacity:0.6;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);}
ul#navigation .home a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKioyWF_9XMmzLFBBSTA1mAcyU6v6qrXvlUJGbGx2yB1WvMLIfdg-grYeeESpKeXcZx3s5iYDw9uiKXOa_qVo1FtQmjF7y3XKJea1UA59D8COg8O0SAk9jhgjeU_0SS1zxbaoB6EPDSdy5/s1600/sprite-icons.png);background-position: 25px -100px;}
ul#navigation .dashboard a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKioyWF_9XMmzLFBBSTA1mAcyU6v6qrXvlUJGbGx2yB1WvMLIfdg-grYeeESpKeXcZx3s5iYDw9uiKXOa_qVo1FtQmjF7y3XKJea1UA59D8COg8O0SAk9jhgjeU_0SS1zxbaoB6EPDSdy5/s1600/sprite-icons.png);background-position: 25px -200px;}
ul#navigation .follow a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKioyWF_9XMmzLFBBSTA1mAcyU6v6qrXvlUJGbGx2yB1WvMLIfdg-grYeeESpKeXcZx3s5iYDw9uiKXOa_qVo1FtQmjF7y3XKJea1UA59D8COg8O0SAk9jhgjeU_0SS1zxbaoB6EPDSdy5/s1600/sprite-icons.png);background-position: 25px -0px;}
ul#navigation .link a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKioyWF_9XMmzLFBBSTA1mAcyU6v6qrXvlUJGbGx2yB1WvMLIfdg-grYeeESpKeXcZx3s5iYDw9uiKXOa_qVo1FtQmjF7y3XKJea1UA59D8COg8O0SAk9jhgjeU_0SS1zxbaoB6EPDSdy5/s1600/sprite-icons.png);background-position: 25px -50px;}
ul#navigation .folder a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKioyWF_9XMmzLFBBSTA1mAcyU6v6qrXvlUJGbGx2yB1WvMLIfdg-grYeeESpKeXcZx3s5iYDw9uiKXOa_qVo1FtQmjF7y3XKJea1UA59D8COg8O0SAk9jhgjeU_0SS1zxbaoB6EPDSdy5/s1600/sprite-icons.png);background-position: 25px -150px;}
ul#navigation .category a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKioyWF_9XMmzLFBBSTA1mAcyU6v6qrXvlUJGbGx2yB1WvMLIfdg-grYeeESpKeXcZx3s5iYDw9uiKXOa_qVo1FtQmjF7y3XKJea1UA59D8COg8O0SAk9jhgjeU_0SS1zxbaoB6EPDSdy5/s1600/sprite-icons.png);background-position: 25px -300px;}
ul#navigation .rss a{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKioyWF_9XMmzLFBBSTA1mAcyU6v6qrXvlUJGbGx2yB1WvMLIfdg-grYeeESpKeXcZx3s5iYDw9uiKXOa_qVo1FtQmjF7y3XKJea1UA59D8COg8O0SAk9jhgjeU_0SS1zxbaoB6EPDSdy5/s1600/sprite-icons.png);background-position: 25px -250px;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.3.2.js"></script>
        <ul id="navigation">
            <li class="home"><a href="http://alamat-blog-anda.blogspot.com" title="Home"></a></li>   
            <li class="follow"><a href="http://www.blogger.com/follow-blog.g?blogID=9185008735754037625" title="Follow"></a></li>            
            <li class="link"><a href="http://alamat-blog-anda.blogspot.com/p/links" title="Links"></a></li>
            <li class="folder"><a href="http://alamat-blog-anda.blogspot.com/p/sitemap.html" title="Sitemap"></a></li>
            <li class="category"><a href="http://alamat-blog-anda.blogspot.com/#" title="Archives"></a></li>
            <li class="rss"><a href="http://alamat-blog-anda.blogspot.com/feeds/posts/default" title="RSS Feeds"></a></li>
   <li class="dashboard"><a href="http://blogger.com/home" title="Dashboard"></a></li>
        </ul>
<!--end navigation fixed menu-->
<!--start jquery navigation fixed menu-->
<script type="text/javascript">
$(function(){$('#navigation a').stop().animate({'marginLeft':'-85px'},1000);$('#navigation > li').hover(function(){$('a',$(this)).stop().animate({'marginLeft':'-2px'},200)},function(){$('a',$(this)).stop().animate({'marginLeft':'-85px'},200)})});
</script>
<!--end jquery navigation fixed menu-->

Koleksi Font Family Populer

Koleksi huruf Web Save CSS Fonts Family yang indah penulisan pada blog dan website. Kumpulan huruf berikut dapat dikategorikan sebagai kumpulan huruf yang unik, ada juga kumpulan font tulisan tangan/ handwriting yang tentunya dapat membuat blog menjadi lebih indah dan berfariasi serta unik. :)

Kumpulan huruf blog ini memang layak menyandang gelar A complete collection of CSS Web Save Fonts.

Koleksi Lengkap Dan Contoh Font Family Untuk Blog Dan Website

Sans Serif

Arial

font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
 

Arial Black

font-family: 'Arial Black', 'Arial Bold', Gadget, sans-serif;
  

Arial Narrow

font-family: 'Arial Narrow', Arial, sans-serif;
  

Arial Rounded MT Bold

font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, sans-serif;
  

Avant Garde

font-family: 'Avant Garde', Avantgarde, 'Century Gothic', CenturyGothic, 'AppleGothic', sans-serif;
  

Calibri

font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  

Candara

font-family: Candara, Calibri, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
  

Century Gothic

font-family: 'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
  

Franklin Gothic Medium

font-family: 'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;
  

Futura

font-family: Futura, 'Trebuchet MS', Arial, sans-serif;
  

Geneva

font-family: Geneva, Tahoma, Verdana, sans-serif;
  

Gill Sans

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;
  

Helvetica

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  

Impact

font-family: Impact, Haettenschweiler, 'Franklin Gothic Bold', Charcoal, 'Helvetica Inserat', 'Bitstream Vera Sans Bold', 'Arial Black', sans serif;
  

Lucida Grande

font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Geneva, Verdana, sans-serif;
  

Optima

font-family: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif;
  

Segoe UI

font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;
  

Tahoma

font-family: Tahoma, Verdana, Segoe, sans-serif;
  

Trebuchet MS

font-family: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif;
  

Verdana

font-family: Verdana, Geneva, sans-serif;

Serif

Baskerville

font-family: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif;
  

Big Caslon

font-family: 'Big Caslon', 'Book Antiqua', 'Palatino Linotype', Georgia, serif;
  

Bodoni MT

font-family: 'Bodoni MT', Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif;
  

Book Antiqua

font-family: 'Book Antiqua', Palatino, 'Palatino Linotype', 'Palatino LT STD', Georgia, serif;
  

Calisto MT

font-family: 'Calisto MT', 'Bookman Old Style', Bookman, 'Goudy Old Style', Garamond, 'Hoefler Text', 'Bitstream Charter', Georgia, serif;
  

Cambria

font-family: Cambria, Georgia, serif;
  

Didot

font-family: Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif;
  

Garamond

font-family: Garamond, Baskerville, 'Baskerville Old Face', 'Hoefler Text', 'Times New Roman', serif;
  

Georgia

font-family: Georgia, Times, 'Times New Roman', serif;
  

Goudy Old Style

font-family: 'Goudy Old Style', Garamond, 'Big Caslon', 'Times New Roman', serif;
  

Hoefler

font-family: 'Hoefler Text', 'Baskerville old face', Garamond, 'Times New Roman', serif;
  

Lucida Bright

font-family: 'Lucida Bright', Georgia, serif;
  

Palatino

font-family: Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
  

Perpetua

font-family: Perpetua, Baskerville, 'Big Caslon', 'Palatino Linotype', Palatino, 'URW Palladio L', 'Nimbus Roman No9 L', serif;
  

Rockwell

font-family: Rockwell, 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;
  

Rockwell Extra Bold

font-family: 'Rockwell Extra Bold', 'Rockwell Bold', monospace;
  

Times New Roman

font-family: TimesNewRoman, 'Times New Roman', Times, Baskerville, Georgia, serif;
 

Mono Spaced

Andale Mono

font-family: 'Andale Mono', AndaleMono, monospace;
  

Consolas

font-family: Consolas, monaco, monospace;
  

Courier New

font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
  

Lucida Console

font-family: 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Bitstream Vera Sans Mono', monospace;
  

Lucida Sans Typewriter

font-family: 'Lucida Sans Typewriter', 'Lucida Console', Monaco, 'Bitstream Vera Sans Mono', monospace;
  

Monaco

font-family: Monaco, Consolas, 'Lucida Console', monospace;
  

Fantasy

Copperplate

font-family: Copperplate, 'Copperplate Gothic Light', fantasy;
  

Papyrus

font-family: Papyrus, fantasy;
  

Script

Brush Script MT

font-family: 'Brush Script MT', cursive;

Sumber: CSS Font Stack

Thumbnail Pada Popular Posts Blogger

Popular Posts Blogger tidak menyediakan gambar default pada script widgetnya, maka apabila sebuah artikel yang telah dipublish tidak menyertakan gambar, popular post widget tersebut hanya menampilkan judul saja ataupun excerpt blogger post saja tanpa gambar.

Untuk menampilkan default image pada popular posts widget itu, dapat dilakukan beberapa penambahan pada scriptnya di dalam template.

Cara untuk membuat default image pada widget popular posts blogspot adalah sebagai berikut:

Default Thumbnail For Popular Posts

Temukan:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' itemprop='url'><span itemprop='summary'><data:post.title/></span></a></div>
              <div class='item-snippet'><span itemprop='description'><data:post.snippet/></span></div>
            </div>
            <div style='clear: both;'/>

Ubahlah bagian ke 4 dari Popular Post diatas menjadi:

             <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo'/>
                  </a>
                </div>
    <b:else/>
    <div class='item-thumbnail'>
    <a expr:href='data:post.href' target='_blank'>
     <img border='0' expr:alt='data:title' expr:height='data:thumbnailSize' expr:title='data:title' expr:width='data:thumbnailSize' itemprop='photo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfC8VNfCBAlKK91hkeUPVR2X455ni9gbhGdWzZzzT3jovlGDrsyMDmWF-LdCNRFDBKkD5_Xvmrz0lMMTBmXLibqgLnvy9h2Q91-QjNJ5i5zq7x3-hjElZ2JucmdFHmgzzjPPcdPX6cPew4/'/>
    </a>
    </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' itemprop='url'><span itemprop='summary'><data:post.title/></span></a></div>
              <div class='item-snippet'><span itemprop='description'><data:post.snippet/></span></div>
            </div>
            <div style='clear: both;'/>

sumber : http://www.ajibanda.com

Menampilkan Tombol Quick Edit Post Dan Widget Blogspot

Banyak pengguna blogspot yang ingin menghilangkan atau menghapus quick edit pencil icon di blogger dan tidak sedikit pula yang mencari-cari cara menampilkan quick edit post dan quick edit widget pada blogspot. Kesemuanya tergantung selera :D

Akan tetapi, sering sekali terjadi quick edit pada post dan widget hilang dan sulit sekali mengembalikan quick edit blogger ini. Hilangnya quickedit icon ini disebabkan oleh beberapa hal, diantaranya karena ada penghapusan secara permanen terhadap widget default blogspot; seperti penghapusan navbar ataupun penghapusan komponen penting pada blogger template.

Cara mengembalikannya sangat mudah sekali, cukup dengan memasang kembali template default yang disediakan oleh blogspot dan kemudian pasang kembali template yang diinginkan. Maka dengan cara ini, tombol quick edit yang hilang akan terlihat kembali. :)

Update dikit :D

Langkah 1:
Edit template, dan cari (ctrl+f) <b:includable id='shareButtons' var='post'> , kemudian letakkan script ini diatasnya:

<b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='icon' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' title='icon' width='18'/>
      </a>
    </span>
  </b:if>
</b:includable>

Langkah 2:
Sisipkan script ini dibawah <div class='post-footer-line post-footer-line-1'>

<b:include data='post' name='postQuickEdit'/>

Default NoImage Thumbnail Auto Readmore Blogspot

Banyak dari template blogspot yang menggunakan auto readmore dan thumbnail pada blogspot dengan versi javascript karena dengan kode javascript ini dapat dengan mudah mengatur ukuran gambar dan banyaknya karakter kata.

Namun sepertinya ada yang masih kurang dari script tersebut yaitu, tidak disertakan dengan default gambar; maka apabila seorang penulis artikel memposting tanpa gambar, hanya tulisan sajalah yang tampil sehingga terlihat kurang menarik.

Agar tampilan artikel tanpa gambar itu terlihat lebih menarik, maka dapat dilakukan sedikit modifikasi atau penambahan pada javascript codes.

Untuk membuat Default NoImage Thumbnail Auto Readmore Blogger, kode yang dipergunakan adalah:

Temukan ]]></b:skin> dan letakkan kode ini dibawahnya:

<script type='text/javascript'>summary_noimg=250;summary_img=250;img_thumb_height=250;img_thumb_width=250;img_thumb_nosrc=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2Di4Mk-1Qtv3KzmDryw6_U9FkTWqjQCVBuq9F7bn4mfnpodS1V0ru9ztaleHWswCYFbce-MBE0FLPFSPKkBwIg3u6Y-i9g-DfUwBmqub-nqJhGWCy5ZmbBSaOrv15ceFyIm7lmKVVPBqC/s1600/Muslim-Blog-Default-Thumbnail.jpg&quot;;</script>
<script type='text/javascript'>
 //<![CDATA[
 function removeHtmlTag(strx,chop){ 
  if(strx.indexOf("<")!=-1)
  {
   var s = strx.split("<"); 
   for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){ 
     s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
    }
   } 
   strx =  s.join(""); 
  }
  chop = (chop < strx.length-1) ? chop : strx.length-2; 
  while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
  strx = strx.substring(0,chop-1); 
  return strx+'...'; 
 }
 function createSummaryAndThumb(pID){
  var div = document.getElementById(pID);
  var imgtag = "";
  var img = div.getElementsByTagName("img");
  var summ = summary_noimg;
  // this block of code is used to add default thumbnail to post without images 
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   summ = summary_noimg;
  }
  if(img.length>=1) { 
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
  }  
  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
  div.innerHTML = summary;
 }
 //]]>
</script>

Dan replace <data:post.body/> dengan:

<b:if cond='data:blog.pageType != "static_page"'>
 <b:if cond='data:blog.pageType != "item"'>
  <div expr:id='"summary" + data:post.id'><data:post.body/></div>  
  <script type='text/javascript'>
   createSummaryAndThumb("summary<data:post.id/>");
  </script>  
  <span class='rmlink' style='float:right'>
   <a expr:href='data:post.url'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkSigpm7MtlSHdaBA8doHz5CkcFXdmvkFJ35o4-jiEGmCKJRkkLB_ZGjDyNi7pyY2aIjUDGTmvoT7BpIUtZk7IQKdRFRav6LVv84MyyE4gmpjLNgcpXKthhb9Niifn4YlmGwwIKqRi5Jc/' style='border-style:none;'/> 
    <!-- 
      THE IMG ABOVE IS A "READ MORE" IMAGE, 
      REPLACE THE "SRC" IMAGE 
      OR JUST USE PLAIN TEXT
    -->
   </a>
  </span>
 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

Sumber: Ajibanda.Com

Readmore Dan Thumbnail Blogspot

Auto readmore dan thumbnail pada blogger yang banyak digunakan saat ini adalah versi javascript karena mudah dan fleksibel dalam pengaturan ukuran gambar dan jumlah karakter huruf. Auto readmore dan thumbnail tanpa javascript hanya mampu memberikan ukuran gambar 72px x 72px dan karakter huruf yang singkat sesuai dengan data:post.snippet yang tercantum dalam pendataan blogger.

this picture is taken from: wikipedia

Untuk membuat auto readmore tanpa javascript pada blogger ini, dapat digunakan cara:

Temukan <data:post.body/> dan timpa dengan:

<!-- start excerpt and thumbnail without javascript -->
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.thumbnailUrl'>
            <a expr:href='data:post.url' expr:title='data:post.title' rel='bookmark'><img class='post-thumbnail' style='float:left;margin-right:10px' expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/></a>
    <b:else/>
            <a expr:href='data:post.url' expr:title='data:post.title' rel='bookmark'><img class='post-thumbnail' style='float:left;margin-right:10px' expr:alt='data:post.title' expr:title='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Y3G5M81KwOcwaAupHqdkPy19d5WGTix2NnFC6Zd065xrRPn9uuUFsCbHbUSZhRj4S_tNui6mbA_ZaE9Ie9auwwE7KoGeXCzl6lqrvhFI6TGKs6Pf7CvMSlGiDCyMpUrnbsVMPfJ9o8GF/s1600/no-image-available.jpg' width='72px' height='72px'/></a>
    </b:if>
    <div class='post-snippet'><data:post.snippet/></div>
            <a expr:href='data:post.url' expr:title='data:post.title' rel='bookmark'> Readmore &#187;</a>
    <div style='clear: both;'/>
    </b:if>
    </b:if>
    </b:if>
<!-- end excerpt and thumbnail without javascript -->

Free Fast SEO Friendly Blogspot Template

Free Download Fastest Loading And SEO Friendly For Blogger. This template is desaigned for fast load and seach engine friendly. It is seo optimized with simple snippets but powerfull.

Features:

• 99.9% CSS Styling
• More Than 5 Web Save Fonts
• Heading Optimazed
• SEO Breadcrumbs Snippets
• Related Posts
• Popular Posts By lifebeyondlimits.info
• Threaded Comments Ready
• Hightlight Author In Threaded Comments
• Back To Top Button

Screenshot:

DEMO | DOWNLOAD

Free Premium Blogger Template

Template Premium Blogspot Terbaik ini bersifat gratis yang dibuat oleh Desainer Handal "Iksandi Lojaya". Blogger Theme ini sangat layak sekali menjadi Best Free Premium Blogger For Blogspot Templates karena didesain dengan apik dan rapi tidak luput pula dijejali dengan fitur-fitur yang membuat setiap pengunjung betah berlama-lama pada Latest High Quality Free Premium Blogger Templates ini.

Galauness - Free Premium Elegant Blogger Template

DEMO | DOWNLOAD

PutihPekat - Free Premium Elegant Blogger Template

DEMO | DOWNLOAD

Lugas - Free Premium Gallery Blogger Template

DEMO | DOWNLOAD

Highlight Author Threaded Comments Levels Blogger

Highlight author pada threaded comments dan cara membuat threaded comment bertingkat di blogger atau threaded comments for blogspot saat ini sudah menjadi suatu keharusan guna membedakan posisi setiap komentar, baik antara author blog dengan balasan komentar pengunjung dan begitu juga antar tiap komentar lainnya.

Tentunya banyak tutorial mengenai Bagaimana Cara Membuat Threaded Comment Di Blogspot ataupun panduan Blogger Threaded Comments For Custom Templates dan juga How to Enable Threaded Comments in Blogger (Blogspot) dan yang biasanya dicari oleh pengguna blogspot, yaitu Cara Memberi Highligh Pada Author Blog.

Dan kali ini Saya ingin menggabungkan beberapa diantara tutorial tersebut:

Letakkan kode CSS ini diatas ]]></b:skin>

.comment-block{position:relative;padding:8px;border:1px solid #ddd;border-radius:4px}
.comment-block .icon.blog-author{position:absolute;right:0;bottom:0;background:rgba(232,149,19,0.2) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99Nv4zcvx4xye2tfKNwbXLoxL2FqMthTKWcJw0sGjiGNjUnvuSizEhi0VuWnEPl_V9P_2bSamXyzM25GizpET0BkBFXhOE9kXtYGtt7eypFl6mDSPNqLHT1bkO4HQnJbwiJNPtAyMIGE/s1600/admin2.png) bottom right no-repeat !important;width:100% !important;height:100% !important;margin:0 !important}
.comment-block:hover{background:rgba(139,139,139,0.1);border:1px solid #eee;box-shadow:4px 4px 4px #444}
.comment-block:hover .icon.blog-author{width:60px !important;height:22px !important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99Nv4zcvx4xye2tfKNwbXLoxL2FqMthTKWcJw0sGjiGNjUnvuSizEhi0VuWnEPl_V9P_2bSamXyzM25GizpET0BkBFXhOE9kXtYGtt7eypFl6mDSPNqLHT1bkO4HQnJbwiJNPtAyMIGE/s1600/admin2.png) bottom right no-repeat !important;background-size:60px 22px !important}
sumber: http://blogonol.blogspot.com/2012/06/highlight-author-threaded-comments.html


.comments .thread-toggle{margin-bottom:10px;}
.comments .comment-thread.inline-thread .comment .comment-block{margin-left:52px;}
.comments .comment-thread.inline-thread .comment{margin:0px 0px 5px 30%;background-color:rgba(174,212,251,.7);border:1px solid #333;box-shadow:0 10px 5px -5px #000;padding:10px 15px;color:#222;}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;}
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;}
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;}
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;}
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; }
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; }
sumber: http://hompimpaalaihumgambreng.blogspot.com/2012/05/efek-thread-comment-bertingkat-hanya.html