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'/>