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