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

Widescreen HD Aidil Fitri Wallpapers

Wallpaper Idul Fitri berukuran lebar dan high defenition dengan ukuran 1280 x 1024 dan ukuran 1600 x 1000 sangat cocok sekali menghias background LCD dan Laptop Anda :)

For more Ketupat Aidil Fitri Dengan Motif Islami images with best resolution, please visit:
The Creativity Window
JYPPE A. QUIDORES
Graphic Designer for Retailers &
Visual Merchandising Specialist
www.the-creativity-window.com

Ketupat Aidil Fitri Dengan Motif Islami

Koleksi Ketupat Lebaran 2012 dan Syawal 1433 H dengan motif Islami yang indah dan menarik. Ketupat dengan motif dan desain unik ini dapat Anda download dan pergunakan dengan menyertakan nama desainer atau pembuatnya JpQuidores "desainer handal dari Philipine.

For more Ketupat Aidil Fitri Dengan Motif Islami images with best resolution, please visit:
The Creativity Window
JYPPE A. QUIDORES
Graphic Designer for Retailers &
Visual Merchandising Specialist
www.the-creativity-window.com

Ketupat Idul Firti 2012 - 1433 H

Gambar dan foto Ketupat Aidil Fitri 1433 H dikemas dengan begitu apik dan disajikan gratis bagi setiap peminatnya :)

Gambar dan foto Ketupat Lebaran 2012 berukuran besar ini, dibuat oleh JpQuidores dan dishare pada Wikimedia.Org juga pada The-Creativity-Window.Com

For more Ketupat Idul Firti 2012 - 1433 H images with best resolution, please visit:
The Creativity Window
JYPPE A. QUIDORES
Graphic Designer for Retailers &
Visual Merchandising Specialist
www.the-creativity-window.com

Kartu Ucapan Selamat Hari Raya Aidil Fitri 2012

Kartu Ucapan Lebaran 1433 H - 2012 yang begitu indah dan menawan. Koleksi dan kumpulan gambar indah syawal dan Kartu Ucapan Selamat Hari Raya Aidil Fitri 2012 didesain dengan nyaris sempurna oleh Jpquidores owner dan seniman grafis http://the-creativity-window.com.

For more Kartu Ucapan Selamat Hari Raya Aidil Fitri 2012 images with best resolution, please visit:
The Creativity Window
JYPPE A. QUIDORES
Graphic Designer for Retailers &
Visual Merchandising Specialist
www.the-creativity-window.com

Wallpaper Hari Raya Idul Fitri 2012

Kumpulan Wallpaper Indah Syawal 2012/ 1433 H yang bagus sekali untuk dijadikan sebagai background kartu ucapan lebaran. Wallpaper-wallpaper Lebaran 2012 ini dikumpulkan dari berbagai blog dan website lain dan dishare secara gratis untuk Anda :)

Wallpaper Dan Background Aku Islam

Koleksi Gambar, Wallpaper Dan Background Islami dengan tema Aku Bangga Menjadi Islam yang didesain begitu indah dan elegant. Wallpaper Islami dapat dimanfaatkan sebagai background dengan tema religius I Am Proud To Be A Muslim khas Islam. Dikumpulkan dari DeviantArt.

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

Wallpaper Islami Berwarna Biru

Koleksi wallpaper Islami yang indah berwarna biru bertuliskan lafazh kalimah syahadat. Dirancang dengan sangat indah dan elegan oleh seorang desainer grafis muslim. Gambar ini bersumber dari deviantart.

Wallpaper Islami 1024x768

Wallpaper Islami 1152x864

Wallpaper Islami 1280x800

Wallpaper Islami 1280x1024

Wallpaper Islami 1440x900

Wallpaper Islami 1600x1200

Wallpaper Islami 1680x1050

Gambar Butiran Salju

Gambar butiran salju yang dalam bahasa lainnya disebut snowflakes terlihat begitu sejuk dan menyegarkan dan dapat dipotong atau dipilah menjadi background untuk berbagai kebutuhan.

Wallpaper Air - Water Wallpapers

Wallpaper Indah dengan gambar air yang dalam bahasa inggrisnya Water Wallpapers sangat indah sekali dan sejuk dipandang mata. Saya kira wallpaper ini bagus sekali sebagai bahan untuk relaksasi :)