Firman Blog: Tutorial Blogger

Memasang Author Rich Snippet di Blog

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://firmansyahnuralifrohman.blogspot.com/2014/04/memasang-author-rich-snippet-di-blog.html" target="_blank">Memasang Author Rich Snippet di Blog</a> - </b>Sebenarnya tutorial ini sudah banyak di share oleh sahabat blogger dengan judul Menampilkan Photo Author Blog di Hasil Pencarian. Akan tetapi dari sekian banyak tutorial, ada yang benar dan ada juga yang hanya copy paste, tanpa cek dan ricek kebenarannya.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJtktaPQ9rsGieebcrvTLQy7F8FkjShm4qahmfrjz1fbCKgdCUXoX7g9lsA-fdrDF1Er-JCoEOUMYdb9SAiV2Lvi9gNdmLbN0W6jqZ47RtNSVG6se2TSdcSZRZjqycEZY9E3uW42H_lwjT/s1600/Author+Rich+Snippet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="91" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJtktaPQ9rsGieebcrvTLQy7F8FkjShm4qahmfrjz1fbCKgdCUXoX7g9lsA-fdrDF1Er-JCoEOUMYdb9SAiV2Lvi9gNdmLbN0W6jqZ47RtNSVG6se2TSdcSZRZjqycEZY9E3uW42H_lwjT/s1600/Author+Rich+Snippet.png" width="400" /></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<span style="font-family: Arial, Helvetica, sans-serif;">Penggunaan Author snippet ini akan berpengaruh dalam SERP. Dengan memasang Author Snippet artinya mengklaim kepemilikan blog dengan akun Google+. Google+ merupakan jejaring sosial milik Google, dengan meklaim kepemilikan blog, maka akan bertambah kepercayaan google terhadap blog tersebut dan akan menampilkan avatar kita pada pencarian Google.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;">Untuk Menambahkan Author Rich Snippet di blog, silakan ikuti langkah berikut :</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;">Langkah 1</span></h3>
<span style="font-family: Arial, Helvetica, sans-serif;">Simpan kode ini di bawah <span style="color: red;"><b><head></b></span></span><br />
<pre><code>
<link href='https://plus.google.com/KODE/URL' rel='author'/>
</code></pre>
<br />
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;">Langkah 2</span></h3>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">1. Masuk ke Pengaturan Akun :<a href="https://www.google.com/settings/account" rel="nofollow" target="_blank">https://www.google.com/settings/account</a> </span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">2. Klik Edit Profil</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeGwTg283Lf2Ay-olGcBRGNjeoOwzMXXXolhuiFwTjM0gYoV5sDStyfoeyc_jJYPotN-M8hongTSOp8LDyCKGXMKx3WxXo5xkkigs1I3GHbPmMu-Ial546F17blx6REJlZcaX1eWLpJIs0/s1600/Setting+Author+Rich+Snippet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="120" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeGwTg283Lf2Ay-olGcBRGNjeoOwzMXXXolhuiFwTjM0gYoV5sDStyfoeyc_jJYPotN-M8hongTSOp8LDyCKGXMKx3WxXo5xkkigs1I3GHbPmMu-Ial546F17blx6REJlZcaX1eWLpJIs0/s1600/Setting+Author+Rich+Snippet.png" width="320" /></a></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">3. Scroll ke bawah, Klik edit "kontributor di"</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLEAvqtNiftQO3ohY8qL1HE5Jtp-C3RFpL4Rh3a5okS1tqD4t6DNdQJEeNNfvr_vB-ttuwlNaMKmR6JzfjMRIPjMlOzRdDhA-RUa1jZidRQeabqxrGt_z_-tlZCydIHQ-Fo_28UiJPOvDd/s1600/Setting+Author+Rich+Snippet+G+.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLEAvqtNiftQO3ohY8qL1HE5Jtp-C3RFpL4Rh3a5okS1tqD4t6DNdQJEeNNfvr_vB-ttuwlNaMKmR6JzfjMRIPjMlOzRdDhA-RUa1jZidRQeabqxrGt_z_-tlZCydIHQ-Fo_28UiJPOvDd/s1600/Setting+Author+Rich+Snippet+G+.png" width="261" /></a></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">4. Kemudian Klik simpan</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Sekian Tutorial dari saya, semoga bermanfaat bagi anda semua, bila ada pertanyaan mengenai "Memasang Author Rich Snippet di Blog" silakan di ajukan (misalnya : dalam mengikuti tutorial ini ada yang gagal - gagal terus), baca semua artikel blog ini di <a href="http://firmansyahnuralifrohman.blogspot.com/p/blog-page_10.html" target="_blank">Sitemap</a></span></div>
<div>
<br /></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;">Happy Blogging....</span></div>

Memasang Author Rich Snippet di Blog

Memasang Author Rich Snippet di Blog - Sebenarnya tutorial ini sudah banyak di share oleh sahabat blogger dengan judul Menampilkan Photo A...

Cara Membuat Top Komentar Dengan Avatar

Unknown 7 Tutorial Blogger 5:25:00 PM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Top Komentar Dengan Avatar - </b>Bagaimana menurutmu bila blog banyak yang komentar dan dengan itu kita wajib membalas ke ikhlasannya dengan membuat Top Komentar di Blog, lagi pula Gadget Top Komentar ini berfungsi sebagai alat kita siapa yang rajin komentar di blog anda dan siapa yang rajin melihat blog anda.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3i66ycBe2DfN0gWup2lFbTAvG3ua-JFjmwo54QVUapuenIm7-8Mj_XQ7d_GQ9In1FNDiSmB6FuqfXTNFGFpRdI-2UjYPnpSDYmG8nhL2VCuWQJOZ4SYP7G0onqmKHelxeoqrrRRHQgGij/s1600/cara-membuat-top-komentar-blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Top Komentar Dengan Avatar" border="0" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3i66ycBe2DfN0gWup2lFbTAvG3ua-JFjmwo54QVUapuenIm7-8Mj_XQ7d_GQ9In1FNDiSmB6FuqfXTNFGFpRdI-2UjYPnpSDYmG8nhL2VCuWQJOZ4SYP7G0onqmKHelxeoqrrRRHQgGij/s1600/cara-membuat-top-komentar-blog.png" title="Cara Membuat Top Komentar Dengan Avatar" width="320" /></a></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<h4><span style="font-family: Arial, Helvetica, sans-serif;">Cara Pasang :</span></h4><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Masuk ke blogger.com</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Tata Letak</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Add a Gadget</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">HTML/JavaScript</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Lalu copy kode di bawah ini dan pastekan di kotak HTML/JavaScript</span></li>
</ul><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<br />
<pre><code><style type="text/css">
    .top-commenter-line {margin: 3px 0;}
    .top-commenter-line .profile-name-link {padding-left:0;}
    .top-commenter-avatar {vertical-align:middle;}
    </style><br />
<script type="text/javascript">
    // CONFIG:
    var maxTopCommenters = 5;   // how big a list of top commentators
    var minComments = 1;        // how many comments must top commentator have at least
    var numDays = 30;            // from how many days (ex. 30), or 0 from "all the time"
    var excludeMe = true;       // true: exclude my own comments
    var excludeUsers = ["Firmansyah Nuralif rohman", "someotherusertoexclude"];     // exclude these usernames
    var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
    //
    var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
    var txtNoTopCommenters = 'No top commentators at this time.';
    var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
    //
    var sizeAvatar = 20;
    var cropAvatar = true;
    //
    var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVBfhPGUGKesHVVtaDeY-7NtWHPK8t_EpVMu6Cpix2xwF_8syZCKwxjkepU_YAw_ZrYUvn0N9BttaqbsFnUF_cuBJUeNE71B8BB5219pSFFCNo2sD66Dh1P4D41Gy-V5x7k3qSH8lckxQ/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
    var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
    var urlMyProfile = ''; // set if you have no profile gadget on page
    var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
    // config end
    // for old IEs & IE modes:
    if(!Array.indexOf) {
     Array.prototype.indexOf=function(obj) {
      for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
      return -1;
    }}
    function replaceTopCmtVars(text, item, position)
    {
      if(!item || !item.author) return text;
      var author = item.author;
  
      var authorUri = "";
      if(author.uri && author.uri.$t != "")
        authorUri = author.uri.$t;
  
      var avaimg = urlAnoAvatar;
      var bloggerprofile = "http://www.blogger.com/profile/";
      if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
        avaimg = author.gd$image.src;
      else {
        var parseurl = document.createElement('a');
        if(authorUri != "") {
          parseurl.href = authorUri;
          avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
        }
      }
      if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
        avaimg = urlMyAvatar;
      if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
        avaimg = urlNoAvatar;
      var newsize="s"+sizeAvatar;
      avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
      if(cropAvatar) newsize+="-c";
      avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/");
  
      var authorName = author.name.$t;
      if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
        authorName = txtAnonymous;
      var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
      if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>';
  
      if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
        authorName = authorName.substr(0, maxUserNameLength-3) + "...";
      var authorcode = authorName;
      if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>';
  
      text = text.replace('[user]', authorcode);
      text = text.replace('[image]', imgcode);
      text = text.replace('[#]', position);
      text = text.replace('[count]', item.count);
      return text;
    }
  
    var topcommenters = {};
    var ndxbase = 1;
    function showTopCommenters(json) {
      var one_day=1000*60*60*24;
      var today = new Date();
  
      if(urlMyProfile == "") {
        var elements = document.getElementsByTagName("*");
        var expr = /(^| )profile-link( |$)/;
        for(var i=0 ; i<elements.length ; i++)
          if(expr.test(elements[i].className)) {
            urlMyProfile = elements[i].href;
            break;
          }
      }
  
      for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
        var entry = json.feed.entry[i];
        if(numDays > 0) {
          var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
          var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]);
  
          //Calculate difference btw the two dates, and convert to days
          var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
          if(days > numDays) break;
        }
        var authorUri = "";
        if(entry.author[0].uri && entry.author[0].uri.$t != "")
          authorUri = entry.author[0].uri.$t;
  
        if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
          continue;
        var authorName = entry.author[0].name.$t;
        if(excludeUsers.indexOf(authorName) != -1)
          continue;
  
        var hash=entry.author[0].name.$t + "-" + authorUri;
        if(topcommenters[hash])
          topcommenters[hash].count++;
        else {
          var commenter = new Object();
          commenter.author = entry.author[0];
          commenter.count = 1;
          topcommenters[hash] = commenter;
        }
      }
      if(json.feed.entry.length == 200) {
        ndxbase += 200;
        document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
        return;
      }
  
      // convert object to array of tuples
      var tuplear = [];
      for(var key in topcommenters) tuplear.push([key, topcommenters[key]]);
  
      tuplear.sort(function(a, b) {
        if(b[1].count-a[1].count)
            return b[1].count-a[1].count;
        return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
      });
  
      // list top topcommenters:
      var realcount = 0;
      for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
        var item = tuplear[i][1];
        if(item.count < minComments)
            break;
        document.write('<di'+'v class="top-commenter-line">');
        document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
        document.write('</d'+'iv>');
        realcount++;
      }
      if(!realcount)
        document.write(txtNoTopCommenters);
    }
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>
</code></pre><br />
<br />
<ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Kemudian Klik Simpan</span></li>
</ul><blockquote class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Note : </b>Ganti <b>Firmansyah Nuralif rohman </b>dengan nama G+ anda</span></blockquote><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Sekian Tutorial <b><a href="http://cara%20membuat%20top%20komentar%20dengan%20avatar/" target="_blank">Cara Membuat Top Komentar Dengan Avatar</a> </b>Semoga bermanfaat bagi anda</span>

Cara Membuat Top Komentar Dengan Avatar

Cara Membuat Top Komentar Dengan Avatar - Bagaimana menurutmu bila blog banyak yang komentar dan dengan itu kita wajib membalas ke ikhlasann...

Cara Memasang Title Tag SEO Friendly

Unknown 2 Tutorial Blogger 3:47:00 PM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Modifikasi Title Tag SEO Friendly -</b> Masih melanjutkan postingan saya sebelumnya mengenai <b><a href="http://firmansyahnuralifrohman.blogspot.com/2014/03/cara-memasang-meta-tag-seo-friendly.html" target="_blank">Cara Memasang Meta Tag SEO Friendly</a>, </b>kali ini saya ingin sedikit berbagi tutorial tentang bagaimana cara memodifikasi Title Tag Blog menjadi lebih SEO Friendly.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0bmS3nfE0yo1elNuUtLBiOpX4lBPwydYIRhvJTZ8RF_x0Dr7TncrsHFp3egx4xpXZ3wh7JTYLS0sNrf9O8AQvtGetG6KI9VldzeZSlp_6VuoQ1mPkc3VU04EB6rrYeBJwZzZFOmO_2Jq/s1600/cara-memasang-title-tag-blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Title Tag SEO Friendly" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjq0bmS3nfE0yo1elNuUtLBiOpX4lBPwydYIRhvJTZ8RF_x0Dr7TncrsHFp3egx4xpXZ3wh7JTYLS0sNrf9O8AQvtGetG6KI9VldzeZSlp_6VuoQ1mPkc3VU04EB6rrYeBJwZzZFOmO_2Jq/s1600/cara-memasang-title-tag-blog.png" title="Cara Memasang Title Tag SEO Friendly" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;"><br />
</div><h4 style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Cara Pemasangan Title Tag Blog :</span></h4><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Masuk ke blogger.com</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Template</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Edit HTMl</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">cari kode <span style="color: blue;"><title><data:blog.pageTitle/></title></span> setelah itu hapus dan ganti dengan code dibawah ini :</span></li>
</ul><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<pre><code>
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> | <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
</code></pre><br />
<blockquote class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Note : </b>Jika sobat menggunakan template yang bukan dari Blogger, maka biasanya struktur title di template sobat udah dimodifikasi, jadi lebih baik dibiarkan saja. dan untuk template dengan title tag kurang kumplit bisa di tambah dengan title tag di atas.</span> </blockquote><span style="font-family: Arial, Helvetica, sans-serif;">Sekian Tutorial <b><a href="http://firmansyahnuralifrohman.blogspot.com/2014/03/cara-memasang-title-tag-seo-friendly.html" target="_blank">Cara Memasang Title Tag SEO Friendly</a></b>, semoga artikel ini bermanfaat untuk anda semua. bila ada kebingungan silakan berkomentar.</span><br />

Cara Memasang Title Tag SEO Friendly

Modifikasi Title Tag SEO Friendly - Masih melanjutkan postingan saya sebelumnya mengenai Cara Memasang Meta Tag SEO Friendly , kali ini say...

Cara Memasang Meta Tag SEO Friendly

Unknown 9 Tutorial Blogger 4:48:00 PM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Meta Tag SEO Friendly Untuk Blogger - </b><a href="http://firmansyahnuralifrohman.blogspot.com/2014/03/cara-memasang-meta-tag-seo-friendly.html" target="_blank">Meta Tag</a> adalah kode / script untuk mempermudah mesin pencari / search engine untuk menemukan blog yang bersagkutan dengan konten yang di cari visitor (menurut versi <b>Firman Blog</b>), jika anda belum mengerti cara pemasangannya bisa rangkum tutorial di bawah ini.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWk32FIwfBLVUBgtGJKgi7P5z7F8TdxK5lVK0cn8ZFXAvFsgo0DPINgj2IJb61ptwpOsghnX8NXED13aUCUFxB9JKkNEx2haJPG9rsiWiuqYOKiHGlIQiBe_zORMrdPv9IPsjJtr5al5T3/s1600/cara-memasang-meta-tag-blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasang Meta Tag SEO Friendly" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWk32FIwfBLVUBgtGJKgi7P5z7F8TdxK5lVK0cn8ZFXAvFsgo0DPINgj2IJb61ptwpOsghnX8NXED13aUCUFxB9JKkNEx2haJPG9rsiWiuqYOKiHGlIQiBe_zORMrdPv9IPsjJtr5al5T3/s1600/cara-memasang-meta-tag-blog.jpg" title="Cara Memasang Meta Tag SEO Friendly" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><h4 style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Cara Pasang Meta Tag SEO :</span></h4><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Login ke blogger.com</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Klik Template</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Pilih Edit HTML</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Cari Kode <head>, dan letakan kode di bawah ini di bawah <head></span></li>
</ul><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div></div><pre><code><meta charset='utf-8'/>
<link href='http://nama-blog.blogspot.com' rel='canonical'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'> <title><data:blog.pageTitle/> DESKRIPSI SINGKAT BLOG </title> <b:else/><title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<meta content='Description Blog Anda' name='description'/>
<meta content='keyword1,keyword2,keyword3' name='keywords'/>
<meta content='index, follow' name='robots'/>
<meta content='ID Google+' name='google-site-verification'/>
<meta content='Kode Verifikasi Bing' name='msvalidate.01'/>
<meta content='Kode Verifikasi Alexa' name='alexaVerifyID'/>
<meta content='2 days' name='revisit-after'/>
<meta content='general' name='rating'/>
<meta content='id' name='geo.country'/>
<meta content='Indonesia' name='geo.placename'/>
<meta content='Nama Author' name='author'/>
<meta content='all' name='Slurp'/>
<meta content='width=device-width' name='viewport'/>
<link href='http://nama-blog.blogspot.com/favicon.ico' rel='icon' type='image/x-icon'/>
<link href='http://nama-blog.blogspot.com/atom.xml' rel='alternate' title='Atom' type='application/atom+xml'/>
<link href='http://nama-blog.blogspot.com/feeds/posts/default' rel='alternate' title='RSS Feeds' type='application/atom+xml'/>
<link href='http://draft.blogger.com/openid-server.g' rel='openid.server'/>
<link href='http://nama-blog.blogspot.com' rel='openid.delegate'/>
</code></pre><br />
<br />
<ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Kemudian klik Simpan</span></li>
</ul><div><blockquote class="tr_bq"><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Ganti </span><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">nama-blog.blogspot.com</span><span style="font-family: Arial, Helvetica, sans-serif;"> dengan blog anda</span></li>
</ol><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Ganti <span style="color: blue;">DESKRIPSI SINGKAT BLOG</span> dengan Deskripsi Singkat blog anda</span></li>
</ol><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Ganti <span style="color: blue;">Description Blog Anda</span> dengan Deskripsi blog anda</span></li>
</ol><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Ganti <span style="color: blue;">keyword1,keyword2,keyword3</span> dengan Keyword blog anda</span></li>
</ol><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Ganti <span style="color: blue;">ID Google+ </span>dengan ID G+ anda</span></li>
</ol><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Ganti <span style="color: blue;">Kode Verifikasi Bing</span> dengan kode vertivikasi Bing anda</span></li>
</ol><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Ganti <span style="color: blue;">Kode Verifikasi Alexa</span> dengan kode vertivikasi alexa anda</span></li>
</ol><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Ganti <span style="color: blue;">Nama Author</span> dengan Nama G+ anda</span></li>
</ol></blockquote></div><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Sekian Tutorial <b>Cara Memasang Meta Tag SEO Friendly, </b>Jangan lupa meninggalkan komentar</span>

Cara Memasang Meta Tag SEO Friendly

Meta Tag SEO Friendly Untuk Blogger - Meta Tag adalah kode / script untuk mempermudah mesin pencari / search engine untuk menemukan blog ya...

Cara Membuat Button Keren di Blog

Unknown 0 Tutorial Blogger 11:16:00 AM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://firmansyahnuralifrohman.blogspot.com/2014/03/cara-membuat-button-keren-di-blog.html" target="_blank">Cara Membuat Button Keren di Blog</a> - </b>Halo sobat blogger semua, sekarang <b>Firman Blog</b> akan membagikan <b>Cara Membuat Button Keren di Blog.</b> Button ini sering di gunakan untuk blog Template, Games, dll. Cara membuatnya juga mudah dan tidak ribet.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTKkyqYo61xaBQg2CldSJtEJjg2gCitxDbm7dvniCCvvRGYPZNpQmr_d_lGYTbao2zx9IGILHK_qQh0rfhBJb31QVUgRTeRORsIpwxhvvHnOCPyxD6FmpzYA7Oi8Pbb4BWQv3CfL923TT/s1600/cara-membuat-button-keren-di-blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Button Keren di Blog" border="0" height="227" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmTKkyqYo61xaBQg2CldSJtEJjg2gCitxDbm7dvniCCvvRGYPZNpQmr_d_lGYTbao2zx9IGILHK_qQh0rfhBJb31QVUgRTeRORsIpwxhvvHnOCPyxD6FmpzYA7Oi8Pbb4BWQv3CfL923TT/s1600/cara-membuat-button-keren-di-blog.png" title="Cara Membuat Button Keren di Blog" width="400" /></a></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;">Cara Membuat Button Keren di Blog :</span></h3><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Silakan masukan CSS dibawah ini di atas <b><span style="color: red;">]]></b:skin></span> </b></span></li>
</ul><div><span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></div></div><pre><code>.button
{       
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
  
.button:hover
{
background-color: #eee;       
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}
  
.button:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
  
.button:focus
{
outline: 0;
background: #fafafa;
}   
  
.button:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;       
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;   
pointer-events: none; 
}

/* Buttons and inputs */

button.button, input.button
{
cursor: pointer;
overflow: visible; /* removes extra side spacing in IE */
}

/* removes extra inner spacing in Firefox */
 button::-moz-focus-inner
{
border: 0;
padding: 0;
}

/* If line-height can't be modified, then fix Firefox spacing with padding */
input::-moz-focus-inner
{
padding: .4em;
}
/* The disabled styles */
.button[disabled], .button[disabled]:hover, .button.disabled, .button.disabled:hover
{
background: #eee;
color: #aaa;
border-color: #aaa;
cursor: default;
text-shadow: none;
position: static;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; 
}
  
/* Hexadecimal entities for the icons */
  
.add:before
{
content: "\271A";
}
  
.edit:before
{
content: "\270E";       
}
  
.delete:before
{
content: "\2718";       
}
  
.save:before
{
content: "\2714";       
}
  
.email:before
{
content: "\2709";       
}
  
.like:before
{
content: "\2764";       
}
  
.next:before
{
content: "\279C";
}
  
.star:before
{
content: "\2605";
}
  
.spark:before
{
content: "\2737";
}
  
.play:before
{
content: "\25B6";
}
/* Social media buttons */
.tw, .fb,
.tw:hover, .fb:hover
{
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(top, rgba(255,255,255,.5), rgba(255,255,255,0));
}
.tw, .tw:focus
{
background-color: #88E1E6;
}

.fb, .fb:focus
{
background-color: #3C5A98;
color: #fff; 
text-shadow: 0 1px 0 rgba(0,0,0,.4); 
}
.tw:hover
{
background-color: #b1f0f3;
}

.fb:hover
{
background-color: #879bc3;
}

.tw:before
{
content: "t";
background: #91cfd3;
background: rgba(0,0,0,.1); 
color: #fff;
font-family: verdana;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
  
.fb:before
{
content: "f";
background: #4467ac;
background: rgba(0,0,0,.1); 
color: #fff;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}</code></pre><br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;">Cara Menggunakannya :</span></h3><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Kode ini bisa digunakan di : Postingan, HTML, dll, dan cara penggunaannya cukup mudah kita tinggal meletakan kode dibawah ini di tempat yang kita inginkan.</span></li>
</ul><div><pre class="code"><code><a class="button" href="http://firmansyahnuralifrohman.blogspot.com/">Button</a>
<a class="button add" href="http://firmansyahnuralifrohman.blogspot.com/">Add</a>
<a class="button edit" href="http://firmansyahnuralifrohman.blogspot.com/">Edit</a>
<a class="button delete" href="http://firmansyahnuralifrohman.blogspot.com/">Delete</a>
<a class="button save" href="http://firmansyahnuralifrohman.blogspot.com/">Save</a>
<a class="button email" href="http://firmansyahnuralifrohman.blogspot.com/">Send email</a>
<a class="button like" href="http://firmansyahnuralifrohman.blogspot.com/">Like</a>
<a class="button next" href="http://firmansyahnuralifrohman.blogspot.com/">Next</a>
<a class="button star" href="http://firmansyahnuralifrohman.blogspot.com/">Favourite</a>
<a class="button spark" href="http://firmansyahnuralifrohman.blogspot.com/">Spark</a>
<a class="button play" href="http://firmansyahnuralifrohman.blogspot.com/">Play</a>
<a class="button tw" href="http://firmansyahnuralifrohman.blogspot.com/">Follow me</a>
<a class="button fb" href="http://firmansyahnuralifrohman.blogspot.com/">Become a fan</a>
</code></pre></div></div><br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;">Demo :</span></h3><div><a class="button" href="http://firmansyahnuralifrohman.blogspot.com/">Button</a><br />
<a class="button add" href="http://firmansyahnuralifrohman.blogspot.com/">Add</a><br />
<a class="button edit" href="http://firmansyahnuralifrohman.blogspot.com/">Edit</a><br />
<a class="button delete" href="http://firmansyahnuralifrohman.blogspot.com/">Delete</a><br />
<a class="button save" href="http://firmansyahnuralifrohman.blogspot.com/">Save</a><br />
<a class="button email" href="http://firmansyahnuralifrohman.blogspot.com/">Send email</a><br />
<a class="button like" href="http://firmansyahnuralifrohman.blogspot.com/">Like</a><br />
<a class="button next" href="http://firmansyahnuralifrohman.blogspot.com/">Next</a><br />
<a class="button star" href="http://firmansyahnuralifrohman.blogspot.com/">Favourite</a><br />
<a class="button spark" href="http://firmansyahnuralifrohman.blogspot.com/">Spark</a><br />
<a class="button play" href="http://firmansyahnuralifrohman.blogspot.com/">Play</a><br />
<a class="button tw" href="http://firmansyahnuralifrohman.blogspot.com/">Follow me</a><br />
<a class="button fb" href="http://firmansyahnuralifrohman.blogspot.com/">Become a fan</a><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><blockquote class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Bila anda terbantu oleh artikel ini silakan tekan berbagi, join this site dan comment.</b></span></blockquote><style type="text/css">
.button
{       
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
  
.button:hover
{
background-color: #eee;       
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}
  
.button:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
  
.button:focus
{
outline: 0;
background: #fafafa;
}   
  
.button:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;       
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;   
pointer-events: none; 
}

/* Buttons and inputs */

button.button, input.button
{
cursor: pointer;
overflow: visible; /* removes extra side spacing in IE */
}

/* removes extra inner spacing in Firefox */
 button::-moz-focus-inner
{
border: 0;
padding: 0;
}

.fb, .fb:focus
{
background-color: #3C5A98;
color: #fff; 
text-shadow: 0 1px 0 rgba(0,0,0,.4); 
}
.tw:hover
{
background-color: #b1f0f3;
}

.fb:hover
{
background-color: #879bc3;
}

Cara Membuat Button Keren di Blog

Cara Membuat Button Keren di Blog - Halo sobat blogger semua, sekarang Firman Blog akan membagikan Cara Membuat Button Keren di Blog. But...

SyntaxHighlighter Untuk Blogger

Unknown 3 Tutorial Blogger 4:21:00 PM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b><a href="http://firmansyahnuralifrohman.blogspot.com/2014/03/syntaxhighlighter-untuk-blogger.html" target="_blank">Highlight.js Untuk Blogger</a> - </b>kali ini saya akan meneruskan <a href="http://firmansyahnuralifrohman.blogspot.com/2014/03/mengenal-tag-pre.html" target="_blank">mengenai tag pre</a> dan cara pembuatannya. Syntax Highlighter ini berguna untuk memberi warna yang berbeda pada kode atau tulisan didalamnya (sesuai Standart)</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><span style="font-family: Arial, Helvetica, sans-serif;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHS8Wheex7Y6z41ZSyBnVuXOX4etVJQWFNRwbxLE-wLGXcacsb0eHXLrsNuKA3q6QUwQuW4qBgc92aQlt-yE2a_CPYoq58W84ulVSV2r_nIMHXQsXAehvniS0V5GNLVymvR1ZAaYF_76M/s1600/pre-tag.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHS8Wheex7Y6z41ZSyBnVuXOX4etVJQWFNRwbxLE-wLGXcacsb0eHXLrsNuKA3q6QUwQuW4qBgc92aQlt-yE2a_CPYoq58W84ulVSV2r_nIMHXQsXAehvniS0V5GNLVymvR1ZAaYF_76M/s1600/pre-tag.png" /></a></span></div><div class="separator" style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><h3 style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Cara Membuat SyntaxHighlighter :</span></h3><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Simpan JavaScript ini di atas </head></span></li>
</ul></div><br />
<pre data-codetype="HTML"><code><script src="https://googledrive.com/host/0B5vUusFulDiYRG5nNEV0bFZjQUk/">
    <script>
      pre.initHighlightingOnLoad();
    </script>
    </code></pre><br />
<br />
<ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Pilih CSS</span></li>
</ul><div><span style="font-family: Arial, Helvetica, sans-serif;">Banyak pilihan CSS, silakan lihat demonya dulu <a href="http://softwaremaniacs.org/media/soft/highlight/test.html" rel="nofollow" target="_blank">DISINI</a></span></div><div><span style="font-family: Arial, Helvetica, sans-serif;">Untuk pilihan CSS, sobat bisa ambil <a href="https://github.com/isagalaev/highlight.js/tree/master/src/styles" rel="nofollow" target="_blank">DISINI</a></span></div><div><br />
</div><div><span style="font-family: Arial, Helvetica, sans-serif;">Simpan CSS tersebut diatas<span style="color: red;"> ]]></b:skin></span>, atau sobat bisa menggunakan CSS yang saya ambil dari GitHub.</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: red;"><br />
</span></span></div><br />
<pre data-codetype="CSS"><code>/*
Original style from softwaremaniacs.org (c) Ivan Sagalaev <maniac oftwaremaniacs.org="">
*/
pre code {
  display: block; padding: 0.5em;
  background: #F0F0F0;
}
pre code,
pre .subst,
pre .tag .title,
pre .lisp .title,
pre .clojure .built_in,
pre .nginx .title {
  color: black;
}
pre .string,
pre .title,
pre .constant,
pre .parent,
pre .tag .value,
pre .rules .value,
pre .rules .value .number,
pre .preprocessor,
pre .haml .symbol,
pre .ruby .symbol,
pre .ruby .symbol .string,
pre .aggregate,
pre .template_tag,
pre .django .variable,
pre .smalltalk .class,
pre .addition,
pre .flow,
pre .stream,
pre .bash .variable,
pre .apache .tag,
pre .apache .cbracket,
pre .tex .command,
pre .tex .special,
pre .erlang_repl .function_or_atom,
pre .asciidoc .header,
pre .markdown .header,
pre .coffeescript .attribute {
  color: #800;
}
pre .comment,
pre .annotation,
pre .template_comment,
pre .diff .header,
pre .chunk,
pre .asciidoc .blockquote,
pre .markdown .blockquote {
  color: #888;
}
pre .number,
pre .date,
pre .regexp,
pre .literal,
pre .hexcolor,
pre .smalltalk .symbol,
pre .smalltalk .char,
pre .go .constant,
pre .change,
pre .lasso .variable,
pre .asciidoc .bullet,
pre .markdown .bullet,
pre .asciidoc .link_url,
pre .markdown .link_url {
  color: #080;
}
pre .label,
pre .javadoc,
pre .ruby .string,
pre .decorator,
pre .filter .argument,
pre .localvars,
pre .array,
pre .attr_selector,
pre .important,
pre .pseudo,
pre .pi,
pre .haml .bullet,
pre .doctype,
pre .deletion,
pre .envvar,
pre .shebang,
pre .apache .sqbracket,
pre .nginx .built_in,
pre .tex .formula,
pre .erlang_repl .reserved,
pre .prompt,
pre .asciidoc .link_label,
pre .markdown .link_label,
pre .vhdl .attribute,
pre .clojure .attribute,
pre .asciidoc .attribute,
pre .lasso .attribute,
pre .coffeescript .property {
  color: #88F
}
pre .keyword,
pre .id,
pre .title,
pre .built_in,
pre .aggregate,
pre .css .tag,
pre .javadoctag,
pre .phpdoc,
pre .yardoctag,
pre .smalltalk .class,
pre .winutils,
pre .bash .variable,
pre .apache .tag,
pre .go .typename,
pre .tex .command,
pre .asciidoc .strong,
pre .markdown .strong,
pre .request,
pre .status {
  font-weight: bold;
}
pre .asciidoc .emphasis,
pre .markdown .emphasis {
  font-style: italic;
}
pre .nginx .built_in {
  font-weight: normal;
}
pre .coffeescript .javascript,
pre .javascript .xml,
pre .lasso .markup,
pre .tex .formula,
pre .xml .javascript,
pre .xml .vbscript,
pre .xml .css,
pre .xml .cdata {
  opacity: 0.5;
}</code></pre><br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;">Cara Penggunaan :</span></h3><pre class="JScript" name="code"><span style="font-family: inherit;"><pre><code>...kode HTML, CSS, JavaSript di sini..</code></pre></span></pre><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<blockquote class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Update : ganti hjfl menjadi pre pada CSSnya</b></span></blockquote>

SyntaxHighlighter Untuk Blogger

Highlight.js Untuk Blogger - kali ini saya akan meneruskan mengenai tag pre dan cara pembuatannya. Syntax Highlighter ini berguna untuk me...

Mengenal Tag Pre

Unknown 0 Tutorial Blogger 3:48:00 PM

tes3
<div class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;"><b>Mengenal Tag Pre - </b><a href="http://firmansyahnuralifrohman.blogspot.com/2014/03/mengenal-tag-pre.html" target="_blank">Pre Tag</a>, saya ajak sobat mengenal lebih jauh apa itu tag <span style="color: red;">pre</span></span></div><span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: red;"><br />
</span></span> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHS8Wheex7Y6z41ZSyBnVuXOX4etVJQWFNRwbxLE-wLGXcacsb0eHXLrsNuKA3q6QUwQuW4qBgc92aQlt-yE2a_CPYoq58W84ulVSV2r_nIMHXQsXAehvniS0V5GNLVymvR1ZAaYF_76M/s1600/pre-tag.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Tag Pre di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHS8Wheex7Y6z41ZSyBnVuXOX4etVJQWFNRwbxLE-wLGXcacsb0eHXLrsNuKA3q6QUwQuW4qBgc92aQlt-yE2a_CPYoq58W84ulVSV2r_nIMHXQsXAehvniS0V5GNLVymvR1ZAaYF_76M/s1600/pre-tag.png" title="Mengenal Tag Pre" /></a></div><br />
<blockquote class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;">PRE artinya pre-formatted atau secara mudahnya, apabila text ditulis dalam tag <span style="color: red;">pre </span>maka hasilnya akan sama dengan apa yang kita tulis, baik dalam jarak (white space, line break, atau tab.)</span></blockquote><span style="font-family: Arial, Helvetica, sans-serif;">Apabila pada penulisan menggunakan mode HTML, kemudian membuat spasi yang jauh, maka hasilnya akan tetap seperti biasa. </span><span style="font-family: Arial, Helvetica, sans-serif;">Berbeda dengan tab </span><span style="color: red; font-family: Arial, Helvetica, sans-serif;">pre</span><span style="font-family: Arial, Helvetica, sans-serif;">, spasi akan tetap.</span> <span style="font-family: Arial, Helvetica, sans-serif;"> </span> <span style="font-family: Arial, Helvetica, sans-serif;">Untuk lebih memahaminya coba sobat copy code ini pada postingan (mode HTML) </span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<pre><code><pre>ini     adalah contoh  tag pre    coba      tulis      seperti  ini diblog sobat</pre>
ini     adalah contoh  tag pre    coba      tulis      seperti  ini diblog sobat</code></pre><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><span style="font-family: Arial, Helvetica, sans-serif;">kemudian lihat hasilnya di mode Compose, maka akan ada perbedaan yang mencolok antara keduanya. Dengan menggunakan tag <span style="color: red;">pre</span>, spasi akan di pertahankan, berbeda dengan penggunaan <span style="color: red;">p</span>, hasilnya akan <i>lurus</i> atau <i>berjejer kebawah.</i></span><br />
<br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;"><u>pre</u> dan blockquote</span></h3><div><span style="font-family: Arial, Helvetica, sans-serif;">Banyak yang menggunakan <span style="color: red;">blockquote</span> untuk berbagai kode, <b>Pengertian blockquote :</b></span></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span></div><blockquote class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;">Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya, agar tidak terlewatkan oleh pembaca.</span></blockquote><span style="font-family: Arial, Helvetica, sans-serif;">Kalau melihat pengertian <span style="color: red;">blockquote</span>, tentunya kurang pas untuk berbagai kode, secara bahasa pun sudah dimengerti <span style="color: red;">blockquote</span> merupakan 'blok kutipan'. menurut saya sah - sah saja menggunakan <span style="color: red;">blockquote</span> sebagai tempat kode.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;">Kelebihan tag pre dibanding blockquote</span></h3><h4><span style="font-family: Arial, Helvetica, sans-serif;"><b>1. Struktur HTML lebih difahami, </b>lihat gambar :</span></h4><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoXHzczqFoUOWMkWr7hG75puQhp0_am2y1pLmKo2c2ocJZhXaTUFd9QY2-oaFozQ_yUZA5N_Y5rVhwS0SQYWGDDMYoGsRN7-7rK0O5xmJ0J_olnILPYT3T1RiReVVvh_xAbFg-nAfzo-U/s1600/pre-dan-blockquote.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Kelebihan tag pre dibanding blockquote" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoXHzczqFoUOWMkWr7hG75puQhp0_am2y1pLmKo2c2ocJZhXaTUFd9QY2-oaFozQ_yUZA5N_Y5rVhwS0SQYWGDDMYoGsRN7-7rK0O5xmJ0J_olnILPYT3T1RiReVVvh_xAbFg-nAfzo-U/s1600/pre-dan-blockquote.png" title="Kelebihan tag pre dibanding blockquote" /></a></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;">Lihat yang saya tandai dengan <i>garis merah</i>, jelas mana pembuka dan penutup. Bandingkan dengan gambar dibawahnya yang menggunakan blockquote, rada susah untuk memahami struktur HTMLnya.</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><h4><span style="font-family: Arial, Helvetica, sans-serif;"><b>2. Standart huruf menggunakan monospace</b></span></h4><div><span style="font-family: Arial, Helvetica, sans-serif;">artinya tanpa CSS pun tag pre akan mempunyai huruf monospac, dimana huruf "W" akan sama dengan huruf "s" atau lainnya dalam segi ukuran.</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><h4><span style="font-family: Arial, Helvetica, sans-serif;">3. Bisa disisipi Syntax Highlighter <span style="font-weight: normal;">(kode warna - warni)</span></span></h4><div><span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;"> Pewarnaan kode ini, bukan hanya mengejar nilai estetika (enak dilihat), tapi dengan pembedaan warna akan mudah memahami, mana JavaScript, mana CSS, mana HTML, mana tag pembuka, penutup, command, string, dll.<br />
</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;"><br />
</span></span> <br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;">Bagaiman Cara Menulis Kode dengan Tag PRE?</span></span></h3></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;">Untuk penulisan standart seperti ini,</span></span></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;"><br />
</span></span></div><pre><code>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;"><pre></span></span><span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;">isikode</span></span><span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;"></pre></span></span></code></pre><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;">apabila menggunakan syntax highlighter, ada beberapa tambahan seperti : </span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-weight: normal;"><br />
</span></span> <br />
<pre><code><pre>isikode</pre>
apabila menggunakan syntax highlighter, ada beberapa tambahan seperti :

<pre><code>isi kode</code></pre>
atau
<pre lang="css">isi kode</code></pre>
dan lain-lain
</code></pre><span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;">Tag Pre Details </span></h3><h4><span style="font-family: Arial, Helvetica, sans-serif;">1. Browser Support :</span></h4><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Netscape 2,3,4,6,7 dst</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Chrome 1, dst</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Firefox 1, dst</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Internet Exploler 2,3,4,5,6 dst</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Opera 3,4,5,6,7,8 dst</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Safari 1 dst</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">WebTV / MSNTV</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">HTML 3.2, 4.0</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">XHTML 1.0</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">XHTML Text Module, XHTML Legacy Module</span></li>
</ul><h4><span style="font-family: Arial, Helvetica, sans-serif;">2. Atribut :</span></h4></div><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">aign (optional)</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">class (optional)</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">dir (optional)</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">id (optional)</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">lang (optional)</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">onclick (optional)</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">ondblclick (optional)</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">onkeydown (optional)</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">onkeypress (optional)</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">onkeyup (optional)</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">style</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">title</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">dll</span></li>
</ul><h4><span style="font-family: Arial, Helvetica, sans-serif;">Contents :</span></h4></div><div><span style="font-family: Arial, Helvetica, sans-serif;">Beberapa tag yang vaild dengan tag pre,</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;">tag : a,abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, i, iframe, img, input, kbd, label, map, object, q, s, samp, script, select, small, span, strike, strong, sub, sup, textarea, tt, u, var</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><h4><span style="font-family: Arial, Helvetica, sans-serif;">Valid Context :</span></h4><div><span style="font-family: Arial, Helvetica, sans-serif;">blockquote, body, button, center, dd, div, fieldset, form, iframe, li, noframes, noscript, object, td, th.</span></div><div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><blockquote class="tr_bq"><span style="font-family: Arial, Helvetica, sans-serif;">Sumber : www.blog.kangismet.net</span></blockquote>

Mengenal Tag Pre

Mengenal Tag Pre - Pre Tag , saya ajak sobat mengenal lebih jauh apa itu tag pre PRE artinya pre-formatted atau secara mudahnya, apabila...

Cara Merubah Tampilan Scrollbar dengan jQuery

Unknown 2 Tutorial Blogger 3:54:00 PM

tes3
<b><span style="font-family: Arial, Helvetica, sans-serif;">Cara Merubah Scroll bar Blog - </span></b><span style="font-family: Arial, Helvetica, sans-serif;">Scrollbar merupakan bagian yang paling sering terlihat oleh pengunjung blog dan kali ini <b>Firman Blog </b>akan membagikan sedikit Tutorial cara membuat scrooll bar dengan tampilan persen.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi360yYhdRvdQqyneqJmUlxnVVclOzWHyg_kR1tIkg8iAajhHfi6Pwqwvq9d7KhkV63OlSgLBArlmGv-8ANTSbgwYueaHqPXCTyFdWmIXJDfHVQNg1lknZ2aXHhggg_th0_li6L5u28NxnB/s1600/Cara+Merubah+Tampilan+Scroll+bar+dengan+jQuery.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Merubah Tampilan Scroll bar dengan jQuery" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi360yYhdRvdQqyneqJmUlxnVVclOzWHyg_kR1tIkg8iAajhHfi6Pwqwvq9d7KhkV63OlSgLBArlmGv-8ANTSbgwYueaHqPXCTyFdWmIXJDfHVQNg1lknZ2aXHhggg_th0_li6L5u28NxnB/s1600/Cara+Merubah+Tampilan+Scroll+bar+dengan+jQuery.jpg" title="Cara Merubah Tampilan Scroll bar dengan jQuery" /></a></div><h3><span style="font-family: Arial, Helvetica, sans-serif;">Cara Pasang :</span></h3><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Masuk ke Blogger</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Template > Edit HTML</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">simpan kode dibawah ini di atas<b><span style="color: red;"> ]]></b:skin></span></b></span></li>
</ul><div><span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<pre><code>#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: " ";
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}</code></pre></div></div><br />
<br />
<ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Simpan kode ini dibawah <b><span style="color: red;"></head></span></b></span></li>
</ul><br />
<pre><code><div id='scroll'></div></code></pre><br />
<br />
<ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Simpan kode ini diatas <b><span style="color: red;"></body></span></b></span></li>
</ul><br />
<pre><code><script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
       distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
    $('#scroll')
        .css('top', distance)
        .text(' (' + Math.round(progress * 100) + '%)')
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $('#scroll').fadeOut();
    }, 1500);
});
//]]>
</script></code></pre><br />
<br />
<ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Klik simpan</span></li>
</ul><div><span style="font-family: Arial, Helvetica, sans-serif;">Sekian Tutorial <b>Cara Merubah Tampilan Scrollbar dengan jQuery, </b>semoga berguna bagi anda semua, jangan lupa commentnya</span></div>

Cara Merubah Tampilan Scrollbar dengan jQuery

Cara Merubah Scroll bar Blog - Scrollbar merupakan bagian yang paling sering terlihat oleh pengunjung blog dan kali ini Firman Blog akan me...

Cara Membuat Tombol Demo dan Download di Blog

Unknown 0 Tutorial Blogger 2:53:00 PM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Tombol Demo dan Download di Blog - </b>banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah banyak dibagikan. Kali ini <b>Firman Blog</b> akan membuat tutorial cara membuat tombol demo dan download.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxXte3_cvDiRd3nbxAwW4FrX8CEJvHk0VWpZTCZFz0WV6dkXc_2DrkzaBEeZqX1OnZ4vg-1G6dj8u76w4XXCVwjSNVXIIV5TzPm5MElOhSb_kbBOpoy6Ei2s-T4eEAESZqKW6ARDA80vo5/s1600/demo_download_button.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Membuat Tombol Demo dan Download" border="0" height="160" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxXte3_cvDiRd3nbxAwW4FrX8CEJvHk0VWpZTCZFz0WV6dkXc_2DrkzaBEeZqX1OnZ4vg-1G6dj8u76w4XXCVwjSNVXIIV5TzPm5MElOhSb_kbBOpoy6Ei2s-T4eEAESZqKW6ARDA80vo5/s1600/demo_download_button.png" title="Membuat Tombol Demo dan Download" width="200" /></a></div>
<h3>
<span style="font-family: Arial, Helvetica, sans-serif;">Cara Membuatnya :</span></h3>
<div>
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Tambahkan kode di bawah ini di atas <b><span style="color: red;">]]></b:skin></span></b></span></li>
</ul>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<pre class="Css" name="code">/* -- Button --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }</pre>
</div>
<br />
<br />
<ul>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode HTML)</span></li>
</ul>
<br />
<pre class="JScript" name="code"><div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://firmansyahnuralifrohman.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://firmansyahnuralifrohman.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>
</pre>
<br />
<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://firmansyahnuralifrohman.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://firmansyahnuralifrohman.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear">
</div>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">Sekian Tutorial dari <b>Firman Blog</b> jangan lupa untuk berkomentar,</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"> </span> <span style="font-family: Arial, Helvetica, sans-serif;">bila ingin mendapatkan updatean artikel dari <b>Firman Blog</b> bisa klik "Join this site"</span></div>
<div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
<style type="text/css">
/* -- Button --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
</style>

Cara Membuat Tombol Demo dan Download di Blog

Cara Membuat Tombol Demo dan Download di Blog - banyak tutorial cara membuat tombol "Demo" dan "Download" yang sudah ban...

Cara Membuat Label Cloud Keren di Blog

Unknown 2 Tutorial Blogger 2:25:00 PM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Label Cloud Keren di Blog - </b>Tag Label dibagi menjadi 2 yaitu tipe List dan Cloud. Widget ini juga sangat berguna untuk mempermudah pengunjung blog untuk menemukan artikel yang dicari.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJ6wHUHszdxlZvP0TJnBzys5nPTjY9I1wFz_iFI87QjUeoyIneUnkY0UB8Cb15zRFYIk6MMnOWa7dLCUYW5VTwIL4ioxRXmzrgHJDBsUmRKJBpPmHs4W_QhHDvCeA9fOHZeOdsTNQWvrm/s1600/cara-membuat-label-cloud.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Label Cloud Keren di Blog" border="0" height="173" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAJ6wHUHszdxlZvP0TJnBzys5nPTjY9I1wFz_iFI87QjUeoyIneUnkY0UB8Cb15zRFYIk6MMnOWa7dLCUYW5VTwIL4ioxRXmzrgHJDBsUmRKJBpPmHs4W_QhHDvCeA9fOHZeOdsTNQWvrm/s1600/cara-membuat-label-cloud.PNG" title="Cara Membuat Label Cloud Keren di Blog" width="320" /></a></div><h3><span style="font-family: Arial, Helvetica, sans-serif;">Cara Membuat :</span></h3><div><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Login ke Blogger dulu.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Template</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Edit HTML</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Cari kode <b><span style="color: red;">]]></b:skin></span>, </b>dan letakan kode dibawah ini tepat di<b>atas</b>nya </span></li>
</ol><br />
<pre name="code" class="Css">/*-----Labels Cloud----*/ .label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:10px; color:#666; } .label-size:hover { border:1px solid #B20000; text-decoration: none; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .label-size a { text-transform: uppercase; float:left; text-decoration: none; } .label-size a:hover { text-decoration: none; }</pre><br />
<span style="font-family: Arial, Helvetica, sans-serif;">dan tinggal klik <b>simpan</b> </span><br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;">Cara Pasang :</span></h3></div><div><ul><li><span style="font-family: Arial, Helvetica, sans-serif;">Login ke Blogger</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Tata Letak</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Add a Gadget > Labels</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Ganti "List" menjadi "Cloud"</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Dan klik save</span></li>
</ul><div><span style="font-family: Arial, Helvetica, sans-serif;">Sekian Tutorial dari <b>Firman Blog </b>jangan lupa untuk berkomentar,</span></div></div><div><span style="font-family: Arial, Helvetica, sans-serif;">bila ingin mendapatkan updatean artikel dari <b>Firman Blog </b>bisa klik "Join this site"</span></div>

Cara Membuat Label Cloud Keren di Blog

Cara Membuat Label Cloud Keren di Blog - Tag Label dibagi menjadi 2 yaitu tipe List dan Cloud. Widget ini juga sangat berguna untuk mempermu...

Cara Membuat Chat Box Di Blog

Unknown 6 Tutorial Blogger 5:47:00 PM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Chat Box Di Blog - </b>sekarang <b>Firman Blog </b>akan membagikan Widget Chat Box keren ala Kang Ismet, widget ini dirancang untuk menambah fasilitas chat pada blog.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg11xfcgW_1NUNAFRoF1iUy69XKUJexoU1doMNgFNRgoL_iPHzC80vTI8NbS4NjnroOc_2HLMmVMKEOQaxDi_0K93nwCBIiAbfXeFFbDNVtI5TkLI-zRTG9qj24bc7X0u-794TFfPeDT4RK/s1600/Cara-Membuat-Chat-Box-Di-Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg11xfcgW_1NUNAFRoF1iUy69XKUJexoU1doMNgFNRgoL_iPHzC80vTI8NbS4NjnroOc_2HLMmVMKEOQaxDi_0K93nwCBIiAbfXeFFbDNVtI5TkLI-zRTG9qj24bc7X0u-794TFfPeDT4RK/s1600/Cara-Membuat-Chat-Box-Di-Blog.png" /></span></a></div><h3 style="clear: both; text-align: left;"><span style="font-family: Arial, Helvetica, sans-serif;">Cara Membuat Chat Box Di Blog</span></h3><div><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Masuk ke <a href="https://www.blogger.com/" rel="nofollow" target="_blank">Blogger</a>.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Pilih Tata Letak > Add Widget > Pilih HTML/JavaScript.</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Dan copy kode di bawah ini dan pastekan di HTML/JavaScript.</span></li>
</ol><div><span style="font-family: Arial, Helvetica, sans-serif;"></span><br />
<pre name="code" class="Css"><style scoped="" type="text/css">
#kangischat{
background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnsc47aXJtPqcfkLQcdHOMtDEZ67KCyeVzgZYbWAF0y8sEXKkseVHli7dhBuem5JmRmmFVzhLgWr3bzMysOq4JmC6jxmUdP9Z0xfP0H1Ci3DNc6CRPvDlTT6aUkHFqxzRZv6o3KdXoe5c/s1600/chatbg2.png)repeat-x top;
text-align:left;
color:#333;
font-family:Arial, Sans-serif;
box-shadow: 0 0 5px 1px #bbb;
padding:12px 11px 10px;
}
#kangischat a {
color:#80bc00;
}
.chatdalem {
background:white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxa-s2ns7FIBoKKsJm8wMVy4Moh5EmJhVSh1u21boVnNyia-x7CmjCRvPGP2Q8GvYNYBMQsrpi4oX69WflmSUYUx6ggPh2hVCEqe5mezwC5MbahS_lS5PG2ayNYUKrlj9SqVmXtmM4i_8/s1600/shoutmix-loader.gif)no-repeat 50% 40%;
position: relative;
margin-top:17px
}
#bukachat {
background:#80bc00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjskIY_LlEYhhWcQy2jKRYi6jwAIbv4cuP1mNDZw1BF4qLz1rZ0X2wEYY0le0lckC-1s2nYMu0daTqO-V1LGPdHbUAN5CreEdqMS8dDRN8RRtp1WpM4p2TJzLiq6tD08Nv5uhkzzfjmhAk/s1600/ngobrol.png)no-repeat 10px 50%;
color:white;
padding:10px 10px 10px 45px;
font-family:Oswald, Arial;
font-size:130%;
text-transform:uppercase;
height:25px;
line-height:25px;
cursor:pointer;
box-shadow: 0 0 5px 1px #bbb;
display:none;
}
#tutupchat {
background:#80bc00 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjskIY_LlEYhhWcQy2jKRYi6jwAIbv4cuP1mNDZw1BF4qLz1rZ0X2wEYY0le0lckC-1s2nYMu0daTqO-V1LGPdHbUAN5CreEdqMS8dDRN8RRtp1WpM4p2TJzLiq6tD08Nv5uhkzzfjmhAk/s1600/ngobrol.png)no-repeat 10px 50%;
color:white;
padding:10px 10px 10px 45px;
font-family:Oswald, Arial;
font-size:130%;
text-transform:uppercase;
height:25px;
line-height:25px;
box-shadow: 0 0 5px 1px #bbb;
cursor:pointer;
}
</style>
</pre><br />
<pre name="code" class="JScript"><div id="bukachat" style="display: none;">
Buka Obrolan</div>
<div id="tutupchat" style="display: block;">
Tutup Obrolan</div>
<div id="kangischat" style="display: block;">
<span style="margin-left: 6px;">Mau request? silakan <a href="http://sht.mx/firmanblog">disini</a></span>
<div class="chatdalem">
<center>

<iframe frameborder="0" height="480" id="shoutmix_firmanblog" scrolling="auto" src="http://sht.mx/firmanblog" width="auto">
<a href="http://sht.mx/firmanblog">ShoutMix Live Chat</a>
</iframe>
</center>
</div>
</div>
<script type="text/javascript">
$('#bukachat').click(function() {
    $('#kangischat').show(500);
    $('#bukachat').hide();
    $('#tutupchat').show();
});
$('#tutupchat').click(function() {
    $('#kangischat').hide(500);
    $('#bukachat').show();
    $('#tutupchat').hide();
});
</script></pre></div><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Kemudian klik Simpan Sekian tutorial dari saya semoga bermanfaat.</span></li>
</ol></div>

Cara Membuat Chat Box Di Blog

Cara Membuat Chat Box Di Blog - sekarang Firman Blog akan membagikan Widget Chat Box keren ala Kang Ismet, widget ini dirancang untuk menamb...

Cara Membuat Recent Post Berdasarkan Label di Blog

Unknown 2 Tutorial Blogger 3:09:00 PM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Recent Post Berdasarkan Label di Blog -</b> Recent Post by label ini banyak digunakan para blogger khususnya indonesia. Tutorial ini sering dicari di berbagai search engine oleh para desainer newbie maupun mastah.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5hc0LAX0MQ7v9qGDgU-vWxdTgvBEB0wb6nPOIE6bNuGioLh8UMztuYJ_FkgnR6IeWPQJPECJLePgSVv9CAa25Lxt5OKaYYTv226y4IA1AFt4vgTzxWpcoqTms9vA7WxmkZC-itL_HFUM/s1600/Recent-Post-By-Label.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL5hc0LAX0MQ7v9qGDgU-vWxdTgvBEB0wb6nPOIE6bNuGioLh8UMztuYJ_FkgnR6IeWPQJPECJLePgSVv9CAa25Lxt5OKaYYTv226y4IA1AFt4vgTzxWpcoqTms9vA7WxmkZC-itL_HFUM/s1600/Recent-Post-By-Label.png" /></span></a></div><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<h3><span style="font-family: Arial, Helvetica, sans-serif;">Cara Membuat Recent Post Berdasarkan Label di Blog</span></h3><div><ol><li><span style="font-family: Arial, Helvetica, sans-serif;">Masuk ke <a href="https://www.blogger.com/" rel="nofollow" target="_blank">Blogger</a></span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Pilih Tata Letak > Add Gadget > Pilih HTMl/JavaScript</span></li>
<li><span style="font-family: Arial, Helvetica, sans-serif;">Salin script dibawah ini dan letakan di dalam HTMl/JavaScriptnya</span></li>
</ol></div><pre name="code" class="JScript"><script type='text/javascript'>var numposts = 4;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 40;</script>
<script type="text/javascript" src="/feeds/posts/default/-/label kalian?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></pre><span style="font-family: Arial, Helvetica, sans-serif;"><br />
Ganti : <span style="color: red;">label kalian</span> dengan label anda (Template, Software),  var numposts = <span style="color: red;">4 </span>(artinya post yang ditapilkan berjumlah 4), setelah itu klik <b>simpan</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Semoga post  <b>Cara Membuat Recent Post Berdasarkan Label di Blog </b>bisa membantu memecahkan masalah anda, jangan lupa comment, follow, join this blog, share</span>

Cara Membuat Recent Post Berdasarkan Label di Blog

Cara Membuat Recent Post Berdasarkan Label di Blog - Recent Post by label ini banyak digunakan para blogger khususnya indonesia. Tutorial i...

Membuat Halaman Demo Di Blog/Blogger

Unknown 7 Tutorial Blogger 5:24:00 PM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Membuat Halaman Demo Di Blog/Blogger - </b>Sehubung kemarin ada yang tanya ( Bagaimana Cara Membuat Halaman Demo Di Blog )<b> </b>dan kali ini <b>Firman Blog </b>akan membagikan <b><a href="http://firmansyahnuralifrohman.blogspot.com/search/label/Tutorial%20Blogger" rel="nofollow" target="_blank">Tutorial Blogger</a> Membuat Halaman Demo Dengan Toolbar Di Blog.</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span> <br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5qIoyEC_83agtbII7fCzGBtZPOhACJT8dxQBCSeqBbA-M2FGHB_q-BeNH2Aaz5FHhSJV7_NMvWxhY7Jsh5EFUtpSxXRiBtO-R2LPJwJ2qwheni5vIXceDU1FjyZ_5jIhz4Z84Z-sWSaPd/s1600/Membuat+Halaman+Demo+Di+Blog+-+Firman+Blog.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5qIoyEC_83agtbII7fCzGBtZPOhACJT8dxQBCSeqBbA-M2FGHB_q-BeNH2Aaz5FHhSJV7_NMvWxhY7Jsh5EFUtpSxXRiBtO-R2LPJwJ2qwheni5vIXceDU1FjyZ_5jIhz4Z84Z-sWSaPd/s1600/Membuat+Halaman+Demo+Di+Blog+-+Firman+Blog.JPG" width="320" /></a></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span> <span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span> <span style="font-family: Arial, Helvetica, sans-serif;">Halaman Demo ini sebenarnya udah banyak di temukan di berbagai website seperti di BTemplate, ZoomTemplate, ThemeForest, dll..</span><br />
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Pembuatannya : </b></span><br />
<b style="font-family: Arial, Helvetica, sans-serif;">1. Buat Halaman Statis dengan judul Demo atau Demo Template.</b><br />
<b style="font-family: Arial, Helvetica, sans-serif;"><br />
</b> <b style="font-family: Arial, Helvetica, sans-serif;">2. Masuk Ke Template > Edit HTML, Simpan Kode CSS Di Atas <span style="color: red;">]]></b:skin> </span>Atau <span style="color: red;"></style></span></b><br />
<b style="font-family: Arial, Helvetica, sans-serif;"><span style="color: red;"><br />
</span></b> <br />
<div>
</div>
<div style="border: 1px solid #999999; height: 230px; overflow: auto; padding: 10px; width: 600px;">
#view {<br />
padding: 0;<br />
margin: 0;<br />
border: 0;<br />
position: fixed;<br />
top: 50px;<br />
left: 0;<br />
right: 0;<br />
bottom: 0;<br />
width: 100%;<br />
height: 93%;<br />
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZinvDyGhmoQsUdySqqJRsmmKARS49StgsQtknO94qSdaKL15gm_f0OO-TKr5r4WBiHVw_rp29AT2EWTMK4ypFwPlMHcHVlUWmDt8q-NywN55IG-WHZ9mNbBVhC3w11PTSQvQgbY__ARU/s1600/loader.gif)no-repeat center center;<br />
transition:all .4s ease-out;<br />
}<br />
#tab-demo {<br />
width:100%;<br />
height:50px;<br />
top:0;<br />
left: 0;<br />
background:#222;<br />
color:white;<br />
font:normal 13px Arial, sans-serif;<br />
z-index:99999;<br />
position:fixed;<br />
}<br />
.closebutton {<br />
background:#66af33 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9xF2iBAWe0ouvz_SX1FokwVhNLpyOsluyB4GEiqtLcO7-J0PRhu9-AQr4I_V3QuhOX6nCT7iB-gzpjNPwk1ECBJCdICvo1LNYN80ZZfKHqXDwGhKZ2uqKK1yZwrk8fhdLzoXFcofJH28/s1600/close.png)no-repeat 15px 50%;<br />
text-align:center;<br />
height:50px;<br />
padding:0px 20px 0px 50px;<br />
position:fixed;<br />
top:0;<br />
right:0;<br />
line-height:50px;<br />
cursor:pointer;<br />
color:white;<br />
}<br />
a.closebutton {color:white;text-decoration:none;}<br />
.closebutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9xF2iBAWe0ouvz_SX1FokwVhNLpyOsluyB4GEiqtLcO7-J0PRhu9-AQr4I_V3QuhOX6nCT7iB-gzpjNPwk1ECBJCdICvo1LNYN80ZZfKHqXDwGhKZ2uqKK1yZwrk8fhdLzoXFcofJH28/s1600/close.png)no-repeat 15px 50%}<br />
.dlbutton:hover {background:#579c26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQer2KXFA8a2EwU76W1rj6wWxdxFyVbJmBqZh95Ahq5o9aRJ2LObIeaVT9UYs1tAJh-X2UO2aE62hcL58XimlbUkLLh2Qvpsv-xhY62lg9tyLJ0a7M0qHsiUe7OReYyM_mksYbhvwOgHk/s1600/download.png)no-repeat 15px 50%}<br />
.dlbutton, a.dlbutton {<br />
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQer2KXFA8a2EwU76W1rj6wWxdxFyVbJmBqZh95Ahq5o9aRJ2LObIeaVT9UYs1tAJh-X2UO2aE62hcL58XimlbUkLLh2Qvpsv-xhY62lg9tyLJ0a7M0qHsiUe7OReYyM_mksYbhvwOgHk/s1600/download.png)no-repeat 15px 50%;<br />
text-align:center;<br />
height:50px;<br />
padding:0px 20px 0px 55px;<br />
position:fixed;<br />
top:0;<br />
right:158px;<br />
line-height:50px;<br />
cursor:pointer;<br />
color:white;<br />
text-decoration:none;<br />
}<br />
.demologo, a.demologo {<br />
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhlXPrsKYTc-wW_B9PIn6q4VlIAZq9-ARGqnv2-PpkGnsqeQyI70t3fYLWaJxiZ2AXLCVGN9AEEMTRtTLX-e7VcM3x_cBjskEpaPqz3Haf5Y_clFQR_pUZVk0b7LJbNGItuXxanlfT8ZA/s1600/ki-logo.png)no-repeat left center;<br />
padding-left:55px;<br />
font-size:17px;<br />
font-weight:normal;<br />
font-family:Oswald, Arial, Sans-serif;<br />
text-transform:uppercase;<br />
line-height:50px;<br />
left:15px;<br />
position:fixed;<br />
color:white;<br />
text-decoration:none;<br />
}</div>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>3. Simpan kode ini tepat dibawah <span style="color: red;"><body></span></b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b><span style="color: red;"><br />
</span></b></span> <br />
<div style="border: 1px solid #999999; height: 50px; overflow: auto; padding: 10px; width: 600px;">
<b:if cond='data:blog.url != &quot;<span style="color: red;">http://firmansyahnuralifrohman.blogspot.com/p/template-demo.html</span>&quot;'></div>
<br />
Ganti <span style="color: red;">http://firmansyahnuralifrohman.blogspot.com/p/template-demo.html </span>dengan url yang udah di buat tadi.<br />
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>4. Simpan kode ini tepat di atas <span style="color: red;"></body></span></b></span><br />
<br />
<div style="border: 1px solid #999999; height: 230px; overflow: auto; padding: 10px; width: 600px;">
</b:if><br />
<br />
<b:if cond='data:blog.url == &quot;<span style="color: red;">http://firmansyahnuralifrohman.blogspot.com/p/template-demo.html</span>&quot;'><br />
<script type='text/javascript'><br />
//<![CDATA[<br />
function getQueryVariable(variable) {<br />
    var query = window.location.search.substring(1);<br />
    var vars = query.split("&");<br />
    for (var i = 0; i < vars.length; i++) {<br />
        var pair = vars[i].split("=");<br />
        if (pair[0] == variable) {<br />
            return pair[1];<br />
        }<br />
    }<br />
    return (false);<br />
}<br />
window.onload = function() {<br />
 var url  = getQueryVariable("url");<br />
 var download  = getQueryVariable("download")<br />
 document.getElementById('view').src = url;<br />
 document.getElementById('dl').href = download;<br />
};<br />
//]]><br />
</script><br />
<br />
<div id='tab-demo'><br />
<a class='demologo' href='http://blog.kangismet.net'>KI Template Demo</a><br />
<a class='dlbutton' href='' id='dl'>Download</a><br />
<a class='closebutton' href='javascript:void(0)' onclick='document.getElementById(&apos;tab-demo&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;view&apos;).style.top=&apos;0&apos;;document.getElementById(&apos;view&apos;).style.height=&apos;100%&apos;'>Remove Frame</a><br />
</div><br />
<iframe id='view'/><br />
<style><br />
body {<br />
background:white;<br />
}<br />
</style><br />
</b:if></div>
<br />
Ganti <span style="color: red;">http://firmansyahnuralifrohman.blogspot.com/p/template-demo.html</span><span style="color: red;">  </span>dengan url yang sudah di buat tadi.<br />
<br />
<span style="font-family: Arial, Helvetica, sans-serif; font-size: large;"><b>Format Penulisan :</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Untuk pemanggilan URL Template Dan Link Download, Gunakan Format Ini </b></span><br />
<br />
<br />
<div style="border: 1px solid #999999; height: 50px; overflow: auto; padding: 10px; width: 600px;">
http://blogsobat.blogspot.com/p/demo.html?url=URL Demo disini&download=URL Download di sini</div>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Untuk Lebih jelasnya silakan lihat demonya :</b></span><br />
<span class="SRB"><a class="red" href="http://firmansyahnuralifrohman.blogspot.com/p/demo_28.html?url=http://fastestmagz-bt.blogspot.com/&download=http://www.4shared.com/document/Jdc1iU1Gba/Fastest_Magz_V3.html" rel="nofollow" target="_blank"> Demo</a></span>

Membuat Halaman Demo Di Blog/Blogger

Membuat Halaman Demo Di Blog/Blogger - Sehubung kemarin ada yang tanya ( Bagaimana Cara Membuat Halaman Demo Di Blog ) dan kali ini Firman...

Cara Membuat Photoshop Online Di Blog

Unknown 7 News, Script, Tips, Tutorial Blogger 3:15:00 PM

tes3
<div style="text-align: center;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">How to Make 'Photoshop Online' In Blog - Cara Membuat "Photoshop Online" Di Blog</span></b><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyD4aFcL83FOsYNBVKaLZ6nO8lw-EiHmUl6mK3s-Yjc3q4xrvX29BheJRf_m_GQvVZ46GvfVBZckGfvWI_4bE0XUvYMIgU5TUP4m3nBNVpRxzeNO_bn5-LXBQ4GbN9pUViBFXapnJ2_jvW/s1600/Photoshop+Online+-+Firman+blog.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyD4aFcL83FOsYNBVKaLZ6nO8lw-EiHmUl6mK3s-Yjc3q4xrvX29BheJRf_m_GQvVZ46GvfVBZckGfvWI_4bE0XUvYMIgU5TUP4m3nBNVpRxzeNO_bn5-LXBQ4GbN9pUViBFXapnJ2_jvW/s1600/Photoshop+Online+-+Firman+blog.JPG" width="400" /></a></div>
<b><span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></b></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Ya, sekarang saya akan membagikan tutorial <b>Cara Membuat "Photoshop Online" Di Blog,</b></span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">Sebelum itu kita harus mengetahui <b>Dampaknya :</b></span></div>
<div style="text-align: left;">
<ol>
<li><b style="font-family: Arial, Helvetica, sans-serif;">Dampak Positif</b></li>
</ol>
</div>
<div style="text-align: left;">
<ul>
<li><b style="font-family: Arial, Helvetica, sans-serif;">Blog menjadi proffesional.</b></li>
<li><b style="font-family: Arial, Helvetica, sans-serif;">Image editor untuk pengunjung blog anda.</b></li>
<li><b style="font-family: Arial, Helvetica, sans-serif;">dll</b></li>
</ul>
</div>
<div style="text-align: left;">
<ol>
<li><b style="font-family: Arial, Helvetica, sans-serif;"><b>Dampak Negatif</b></b></li>
</ol>
</div>
<div style="text-align: left;">
<ul>
<li><b style="font-family: Arial, Helvetica, sans-serif;">Menurut saya tidak ada dampak negatifnya kenapa </b><span style="color: blue; font-family: Arial, Helvetica, sans-serif;">(?)</span></li>
</ul>
</div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: blue;"><br />
</span></span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: blue; font-size: large;"><b>Langkah - Langkah Pembuatan :</b></span></span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: blue;"><b><br />
</b></span></span></div>
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>1. <span style="color: orange;">Masuk www.blogger.com, Pages, New Page, Blank Page, HTML</span> atau </b></span><b style="font-family: Arial, Helvetica, sans-serif;"><span style="color: lime;">Masuk www.blogger.com, Klik tombol pensil di atas sendiri</span></b><b style="font-family: Arial, Helvetica, sans-serif;">   dan masukan script <span style="color: red;">dibawah ini</span> di lembar kerja tersebut :</b></div>
<br />
<div style="background-color: #82cafa; border: 3px #5f200e double; padding: 10px; text-align: left;">
<div color:="" red="" style="overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; width: &lt;span style=;"><br />
<div dir="ltr" style="text-align: left;" trbidi="on"><br />
<i><strike><b><br />
</b></strike></i> <iframe frameborder="0" height="560" id="pixlr" src="http://pixlr.com/editor/" type="text/html" width="800"></iframe><i><strike><b><br />
</b></strike></i> <i><strike><b><br />
</b></strike></i></div><br />
<br />
<br />
</div></div>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>2. Pilih tombol Publish</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span> <span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span> <span style="font-family: Arial, Helvetica, sans-serif;"><b>Note :</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span> <span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: blue;">(?) </span><b>: Karena saya sudah mencobanya dan photoshop online itu tidak mengurangi : Cepat Loading, SEO Blog</b></span><br />
<br />
<div style="background-color: orange; border: 3px #5f200e double; padding: 10px; text-align: left;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Text Orange : Itu Cara Membuat Photoshop Online Di Halaman Blog</span></b></div>
<br />
<div style="background-color: lime; border: 3px #5f200e double; padding: 10px; text-align: left;">
<b><span style="font-family: Arial, Helvetica, sans-serif;">Text Hijau : Itu Cara Membuat Photoshop Online Di Postingan Blog</span></b></div>

Cara Membuat Photoshop Online Di Blog

How to Make 'Photoshop Online' In Blog - Cara Membuat "Photoshop Online" Di Blog Ya, sekarang saya akan membagikan t...

Cara Bikin Fanpage Facebook Di Blog

Unknown 7 Script, Tutorial Blogger 12:12:00 PM

tes3
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Firman Blog</b> - Mengapa saya beri judul <a href="http://firmansyahnuralifrohman.blogspot.com/2013/12/cara-bikin-fanpage-facebook-di-blog.html" target="_blank"><b><span style="color: red;">"Cara Membuat FanpageFacebook Di Blog"</span></b> </a>karena, sekarang saya mau membagikan tutorial <b><span style="color: red;">"Cara Membuat Fanpage Facebook Di Blog"</span></b>, langsung aja kita ke TKP.</span><br />
<span style="background-color: white; color: lime; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24.46875px;"><b>-------------------------------------------------------------------------------------------------------------------------</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>1) </b>Tutorial Pertama <b>Cara Bikin Fanspage FB Dan Pasang Like Box Di Blog"</b></span><br />
<span style="background-color: white; color: lime; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24.46875px;"><b>-------------------------------------------------------------------------------------------------------------------------</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b><br />
</b></span> <span style="font-family: Arial, Helvetica, sans-serif;"><b style="background-color: white; line-height: 18px; margin: 0px; padding: 0px; text-align: justify;">Pada bagian artikel ini, ada 2 bagian yang di bahas, yaitu :</b><br style="background-color: white; line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; line-height: 18px; text-align: justify;">1. Cara Bikin Fanpage</span><br style="background-color: white; line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; line-height: 18px; text-align: justify;">2. Cara Pasang Widget Like box di Blog </span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 18px; text-align: justify;"><br />
</span></span> <b style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">Cara Bikin Fanpage :</b><span style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;"></span><br />
<div style="border: 2px solid rgb(0, 0, 255); font-family: 'Open Sans', sans-serif; font-size: 14px; height: 120px; line-height: 19.59375px; overflow: auto; padding: 15px; text-align: justify;">
<div style="font-family: 'Times New Roman'; font-size: medium; line-height: normal; text-align: start;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif; line-height: 18px; text-align: justify;">Ok deh, langsung aja dan untuk memulai jangan lupa login ke akun facebook masing-masing :</span></div>
<div style="border: 3px dotted rgb(255, 153, 0); font-family: 'Times New Roman'; font-size: medium; line-height: 20px; margin: 0px; padding: 5px;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><span style="margin: 0px; padding: 0px;"><span style="color: red; margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;">Untuk Cara Bikin / membuat Fanpage</b></span> </span>langsung saja masuk sini :<span style="margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;"><a href="http://www.facebook.com/pages/create.php" rel="nofollow" style="color: #0441c8; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">http://www.facebook.com/pages/create.php</a></b></span> Muncul tampilan seperti di bawah ini. Pilih salah satu yang paling menggambarkan tema bisnis atau group anda.</span></div>
<div style="font-family: 'Times New Roman'; font-size: medium; line-height: normal; text-align: start;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><br style="line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /></span></div>
<div class="separator" style="clear: both; font-family: 'Times New Roman'; font-size: medium; line-height: 18px; padding: 0px; text-align: center;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><img border="0" height="267" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_wirK2y2Y8t6vEBisYq5EV7oy_rs_h_iyUvF0N0yXDDy4an0ukoWoPKt9HGPjeoZDeMuhuIGILkjDkkhT73L74CudD-aNbLji60CwiVzJQzMcqWp3g_WDnLJ4yp4ATbzCv9gzWJDE16Fs/s400/Bikin+fanpage+1.JPG" style="border: 0px; margin: 0px; padding: 0px;" width="400" /></span></div>
<div style="font-family: 'Times New Roman'; font-size: medium; line-height: normal; text-align: start;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><span style="line-height: 18px; text-align: justify;">Selanjutnya, muncul tampilan form seperti di bawa ini : </span><b style="line-height: 18px; margin: 0px; padding: 0px; text-align: justify;">Upload profile picture</b><span style="line-height: 18px; text-align: justify;"> dll,</span><b style="line-height: 18px; margin: 0px; padding: 0px; text-align: justify;"> </b><span style="line-height: 18px; text-align: justify;">tapi proses ini bisa di skip dan bisa di updated belakangan</span></span></div>
<div class="separator" style="clear: both; font-family: 'Times New Roman'; font-size: medium; line-height: 18px; padding: 0px; text-align: center;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><img border="0" height="235" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYy2W-kSM8cBDA25pgGGymEqQcMz9Uussl5sY971L7qB3IbcVSm1_BULWDRa-LbfUI05qAFCwREY-Kz8Qu4ppRy5ViIis_mBDt8kwxaRBZCFBOsT-P1PgMjz6DiB5Y6RJr0wJ9804tQ473/s400/Bikin+fanpage+2.JPG" style="border: 0px; margin: 0px; padding: 0px;" width="400" /></span></div>
<div style="font-family: 'Times New Roman'; font-size: medium; line-height: normal; text-align: start;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><br style="line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><span style="line-height: 18px; text-align: justify;">Ok, skip dulu dan lanjut proses sampai sistem menampilkan halaman penyelesaian akhir seperti tampilan screenshot di bawah ini :</span></span></div>
<div class="separator" style="clear: both; font-family: 'Times New Roman'; font-size: medium; line-height: 18px; padding: 0px; text-align: center;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><img border="0" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimkrw5dhyKUu31jG1Myev9yadH-OuDs5UvcDfflLZslhuqCrNnad21QSfDNwNOnGVlex0gu28PFkhuiGByTV9-2QWKX7UODAwjbTrOLw20iaRUqzoYglZbF99ulKAwzXB9WfHE_u4qCihR/s400/Bikin+fanpage+3.JPG" style="border: 0px; margin: 0px; padding: 0px;" width="400" /></span></div>
<div style="font-family: 'Times New Roman'; font-size: medium; line-height: normal; text-align: start;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif;"><br style="line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><span style="line-height: 18px; text-align: justify;">Sampai disini, artinya pembuatan sebuah fanpage udah selesai dengan alamat URL :</span><b style="line-height: 18px; margin: 0px; padding: 0px; text-align: justify;"><u style="margin: 0px; padding: 0px;">http://www.facebook.com/pages/<span style="color: red; margin: 0px; padding: 0px;">nama fan page</span>/<span style="color: red; margin: 0px; padding: 0px;">kode fanpage</span></u></b><span style="line-height: 18px; text-align: justify;"> atau</span><br style="line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><b style="line-height: 18px; margin: 0px; padding: 0px; text-align: justify;"><u style="margin: 0px; padding: 0px;">http://www.facebook.com/<span style="color: red; margin: 0px; padding: 0px;">nama fan page</span></u></b><span style="line-height: 18px; text-align: justify;"> </span><br style="line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><br style="line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><span style="line-height: 18px; text-align: justify;">Proses berikutnya tinggal updated :</span></span></div>
<ol style="font-family: 'Times New Roman'; font-size: medium; line-height: 18px; margin: 0px; padding: 10px 0px;">
<li style="margin: 0px 0px 0px 35px; padding: 0px; position: relative;"><span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">Add profile picture</span></li>
<li style="margin: 0px 0px 0px 35px; padding: 0px; position: relative;"><span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">Add Cover buat header</span></li>
<li style="margin: 0px 0px 0px 35px; padding: 0px; position: relative;"><span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">Setting untuk admin</span></li>
<li style="margin: 0px 0px 0px 35px; padding: 0px; position: relative;"><span style="background-color: white; font-family: Arial, Helvetica, sans-serif;">Dan langkah berikutnya adalah menarik member atau orang lain untuk nge-like fan page kita</span></li>
</ol>
<div style="font-family: 'Times New Roman'; font-size: medium; line-height: normal; text-align: start;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 18px; text-align: justify;">Salah satu cara efektif, mungkin dengan cara pasang Fanpage kita di Blog, untuk fitur ini di namakan LIKE BOX. Jadi pengunjung blog bisa melakukan "LIKE" dari Like Box yang di pasang di blog milik sobat.</span></span></div>
</div>
<br />
<b style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">Pasang widget Like Box di Blog :</b><br />
<div style="border: 2px solid rgb(0, 0, 255); font-family: 'Open Sans', sans-serif; font-size: 14px; height: 120px; line-height: 19.59375px; overflow: auto; padding: 15px; text-align: justify;">
<div style="font-family: 'Times New Roman'; font-size: medium; line-height: normal; text-align: start;">
<div style="background-color: #fcf8c0; border: 3px dotted rgb(255, 153, 0); line-height: 18px; margin: 0px; padding: 5px; text-align: justify;">
<div style="color: red; margin: 0px; padding: 0px;">
<span style="margin: 0px; padding: 0px;"><b style="margin: 0px; padding: 0px;"><span style="font-family: Arial, Helvetica, sans-serif;">Pasang widget Like Box di blog :</span></b></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;">Untuk membuat widget like box sama mudahnya dengan bikin FP Facebook, silahkan sobat klik link ini : <b style="margin: 0px; padding: 0px;"><a href="http://developers.facebook.com/docs/plugins" rel="nofollow" style="color: #0441c8; margin: 0px; outline: none; padding: 0px; text-decoration: none;" target="_blank">http://developers.facebook.com/docs/plugins</a></b></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br style="background-color: white; line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; line-height: 18px; text-align: justify;">Dari pilihan aplikasi yang tampil, </span><b style="background-color: white; line-height: 18px; margin: 0px; padding: 0px; text-align: justify;">pilih Like Box</b><span style="background-color: white; line-height: 18px; text-align: justify;">, seperti gambar berikut :</span></span><br />
<div class="separator" style="background-color: white; clear: both; line-height: 18px; padding: 0px; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="53" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyuFOZYNDDEqF0rS9CfEmWfoit06HJhFZO1qrLtf-NLQV2QenDagjmK4yI5vsWs6C3CN_F_-Au8plwPg2wg9VTfyO8U8_1uvOBr3yfSXL-8o3DXCStTEjzIz_S_g2yynMqbEFyiv56EaJ/s400/Bikin+fanpage+4.JPG" style="border: 0px; margin: 0px; padding: 0px;" width="400" /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br style="background-color: white; line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; line-height: 18px; text-align: justify;">Selanjutnya sampai di form pengisian data seperti gambar di bawah :</span></span><br />
<div class="separator" style="background-color: white; clear: both; line-height: 18px; padding: 0px; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="385" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwqBO9Qxp0QQx9Gh8U7Yxi5yO8sOf4XlI17X9rMIsExLOuxcAOzoVbxByjjenyHtCrsQyxxbWQA9zQddhkULbnC8x5C3yW46oYPfk2nrspvHpmP5qiJDyF2IG2nBjsP3ctc48_qtdx2ZdF/s400/Bikin+fanpage+5.JPG" style="border: 0px; margin: 0px; padding: 0px;" width="400" /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br style="background-color: white; line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; line-height: 18px; text-align: justify;"> Perhatikan gambar di atas :</span></span><br />
<ol style="background-color: white; line-height: 18px; margin: 0px; padding: 10px 0px; text-align: justify;">
<li style="margin: 0px 0px 0px 35px; padding: 0px; position: relative;"><span style="font-family: Arial, Helvetica, sans-serif;"><b style="margin: 0px; padding: 0px;">Facebook Page URL</b> : Di isi dengan link fanpage sobat yg udah di bikin diatas</span></li>
<li style="margin: 0px 0px 0px 35px; padding: 0px; position: relative;"><span style="font-family: Arial, Helvetica, sans-serif;"><b style="margin: 0px; padding: 0px;">Width & Height</b> : adalah ukuran lebar dan tinggi, bisa di atur-atur sesuai dengan ukuran sidebar blog</span></li>
<li style="margin: 0px 0px 0px 35px; padding: 0px; position: relative;"><span style="font-family: Arial, Helvetica, sans-serif;"><b style="margin: 0px; padding: 0px;">Color Scheme</b> : Untuk menyesuaikan dengan backgroung blog milik sobat. Kalau backgroundnya terang, sebaiknya pilih <b style="margin: 0px; padding: 0px;">light </b>saja</span></li>
<li style="margin: 0px 0px 0px 35px; padding: 0px; position: relative;"><span style="font-family: Arial, Helvetica, sans-serif;">Selebihnya bisa di coba-coba sendiri, silahkan di test dengan melihat hasil preview di sampingnya.</span></li>
<li style="margin: 0px 0px 0px 35px; padding: 0px; position: relative;"><span style="font-family: Arial, Helvetica, sans-serif;">Langkah terakhir, Klik <b style="margin: 0px; padding: 0px;">Get Code</b>. Kode inilah yang nanti di pasang di widget blog</span></li>
</ol>
<span style="font-family: Arial, Helvetica, sans-serif;"><b style="background-color: white; line-height: 18px; margin: 0px; padding: 0px; text-align: justify;"><span style="margin: 0px; padding: 0px;">Gimana Cara mengambil Code-nya kemudian di pasang di Blog?</span></b><br style="background-color: white; line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; line-height: 18px; text-align: justify;">Dari membaca komentar - komentar dari pengunjung, rupanya masih banyak kendala yah?, sebetulnya cukup mudah. Pada saat klik Get Code, kita di hadapkan pada pilihan mau format :</span></span><br />
<blockquote class="tr_bq" style="background-color: white; border-left-color: rgb(221, 221, 221); border-left-style: solid; border-left-width: 5px; font-style: italic; line-height: 18px; margin: 10px 20px; padding: 0px 0px 0px 7px; text-align: justify;">
<span style="font-family: Arial, Helvetica, sans-serif;">1. HTML5<br style="line-height: 12px; margin: 0px; padding: 0px;" />2. XFBML<br style="line-height: 12px; margin: 0px; padding: 0px;" />3. IFRAME<br style="line-height: 12px; margin: 0px; padding: 0px;" />4. URL</span></blockquote>
<span style="font-family: Arial, Helvetica, sans-serif;"><br style="background-color: white; line-height: 12px; margin: 0px; padding: 0px; text-align: justify;" /><span style="background-color: white; line-height: 18px; text-align: justify;">Dari 4 pilihan itu kebanyakan orang ambil </span><u style="background-color: white; line-height: 18px; margin: 0px; padding: 0px; text-align: justify;">HTML5 </u><span style="background-color: white; line-height: 18px; text-align: justify;">atau </span><u style="background-color: white; line-height: 18px; margin: 0px; padding: 0px; text-align: justify;">IFRAME</u><span style="background-color: white; line-height: 18px; text-align: justify;">, Namun saya lebih suka memakai kode HTML5. Kenapa?, karena script yang di bungkus IFRAME kurang bagus buat SEO. Kalau blog kita di test di http://chkme.com kode IFRAME akan mengurangi penilaian SEO blog milik kita:). Untuk itu pakai yg pilihan Tab HTML5 saja. Perhatikan gambar di bawah :</span></span><br />
<div class="separator" style="background-color: white; clear: both; line-height: 18px; padding: 0px; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="284" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVb9NWpPb9qDBRC039wSNSP7bDViqqfYyyTKdRITB26NfDmhMV6g1ggQQ83MVJwdcM1D92zigDoPf3hwddF59bCXIaWAaeXxbpmEKKCcSaWcT9PmmIJXvTeGGUC9keVZtpgvoHBQbvg5PC/s400/01+Facebook.PNG" style="border: 0px; margin: 0px; padding: 0px;" width="400" /> </span></div>
<div class="separator" style="background-color: white; clear: both; line-height: 18px; padding: 0px; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br style="line-height: 12px; margin: 0px; padding: 0px;" /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 18px; text-align: justify;">2 bagian script di atas jadikan satu dan Copas ke Widget atau bagian blog yg ingin di tampilkan FP tersebut. Kalau ingin tampil di Sidebar, copas apa adanya saja seperti script asli pada saat kita Get Code.</span></span></div>
</div>
<br />
<span style="background-color: white; color: lime; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24.46875px;"><b>-------------------------------------------------------------------------------------------------------------------------</b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>2) </b>Tutorial Kedua <b>"Cara Bikin Fanspage Facebook Melayang Di Blog"</b></span><br />
<span style="background-color: white; color: lime; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 24.46875px;"><b>-------------------------------------------------------------------------------------------------------------------------</b></span><br />
<div style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">
Jika anda ingin memasang facebook fan page anda melayang di blog, saudara dapat mengikuti langkah-langkah di bawah ini. Namun jika anda ingin memasang facebook fan page yang standar atau yang lazim di gunakan oleh banyak orang. Anda bisa membaca artikel saya sebelumnya </div>
<div style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">
<br /></div>
<div style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">
Di sini saya akan memberikan dua script fan page melayang yang berbeda, jadi anda hanya harus memilih salah satu script saja untuk dipasang di blog anda.  dan untuk melihat hasilnya anda bisa mencoba scriptnya satu persatu.</div>
<div style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">
<ul>
<li>Login dengan akun blogger saudara</li>
<li>Masuk ke menu TATA LETAK</li>
<li>Klik Tambah Gadget => HTML/Javascript</li>
<li>Silahkan masukan salah satu script di bawah ini</li>
</ul>
</div>
<div style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">
<b>Script Fan Page Melayang Yang Pertama . . .</b></div>
<div class="separator" style="background-color: white; clear: both; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: center;">
</div>
<div style="background-color: #f2f2f2; border: 2px solid rgb(0, 0, 255); font-family: 'Open Sans', sans-serif; font-size: 14px; height: 120px; line-height: 19.59375px; overflow: auto; padding: 15px; text-align: justify;">
    <style type="text/css"><br />
    #topbar{position:absolute; padding-left:260px; background-color: transparancy; width: 300px;<br />
    visibility: hidden;z-index: 100; }<br />
    </style><br />
    <script type="text/javascript"><br />
    var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session<br />
    var startX = 30 //set x offset of bar in pixels<br />
    var startY = 5 //set y offset of bar in pixels<br />
    var verticalpos="fromtop" //enter "fromtop" or "frombottom"<br />
    function iecompattest(){<br />
    return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body<br />
    }<br />
    function get_cookie(Name) {<br />
<br />
    var search = Name + "="<br />
    var returnvalue = "";<br />
    if (document.cookie.length > 0) {<br />
    offset = document.cookie.indexOf(search)<br />
    if (offset != -1) {<br />
    offset += search.length<br />
    end = document.cookie.indexOf(";", offset);<br />
    if (end == -1) end = document.cookie.length;<br />
  returnvalue=unescape(document.cookie.substring(offset, end))<br />
    }<br />
    }<br />
    return returnvalue;<br />
    }<br />
    function closebar(){<br />
    if (persistclose)<br />
    document.cookie="remainclosed=1"<br />
    document.getElementById("topbar").style.visibility="hidden"<br />
    }<br />
    function staticbar(){<br />
     barheight=document.getElementById("topbar").offsetHeight<br />
     var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;<br />
     var d = document;<br />
     function ml(id){<br />
      var el=d.getElementById(id);<br />
      if (!persistclose || persistclose && get_cookie("remainclosed")=="")<br />
      el.style.visibility="visible"<br />
      if(d.layers)el.style=el;<br />
      el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};<br />
      el.x = startX;<br />
      if (verticalpos=="fromtop")<br />
      el.y = startY;<br />
      else{<br />
      el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;<br />
      el.y -= startY;<br />
      }<br />
      return el;<br />
     }<br />
     window.stayTopLeft=function(){<br />
      if (verticalpos=="fromtop"){<br />
      var pY = ns ? pageYOffset : iecompattest().scrollTop;<br />
      ftlObj.y += (pY + startY - ftlObj.y)/8;<br />
      }<br />
      else{<br />
      var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;<br />
      ftlObj.y += (pY - startY - ftlObj.y)/8;<br />
      }<br />
      ftlObj.sP(ftlObj.x, ftlObj.y);<br />
      setTimeout("stayTopLeft()", 10);<br />
     }<br />
     ftlObj = ml("topbar");<br />
     stayTopLeft();<br />
    }<br />
    if (window.addEventListener)<br />
    window.addEventListener("load", staticbar, false)<br />
    else if (window.attachEvent)<br />
    window.attachEvent("onload", staticbar)<br />
    else if (document.getElementById)<br />
    window.onload=staticbar<br />
    </script><br />
    <br /><br />
    <div class="clear"><br />
    </div><br />
    <div id="topbar"><br />
    <div style="text-align: right;"><br />
    <a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVJFbOR2z5zWOK4CngSPlQ939bqwh5wm-kZc5qkeJVucT1DD3BpJuTvCWR18fZnc8PKrF70F0OzW8kn-PeIIGHm7XwtOR4jI-7AUq9B1hHDcXvNJYHxlg4YVGBqFMQ8admN-cvdBK4WCfB/s1600/close3.png" /></a></div><br />
    <center><br />
    <div style="background: #fff;"><br />
    <div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="<span style="color: red;"><b>https://www.facebook.com/pages/Blognya-Ilmu/147008725448902</b></span>" width="250" show_faces="true" border_color="" stream="false" header="true"></fb:like-box><br />
    </div><br />
    </center><br />
    </div></div>
<br style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;" />
<b style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">Script Fan Page Melayang Yang Kedua . . . </b><span style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;"></span><br />
<div style="background-color: #f2f2f2; border: 2px solid rgb(0, 0, 255); font-family: 'Open Sans', sans-serif; font-size: 14px; height: 120px; line-height: 19.59375px; overflow: auto; padding: 15px; text-align: justify;">
 <style type="text/css"><br />
        #topbar{position:absolute;padding-left:-100px;background-color: transparancy;width: 300px;visibility: hidden;z-index: 200;}<br />
        </style><br />
        <script type="text/javascript"><br />
        var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session<br />
        var startX = 25 //set x offset of bar in pixels<br />
        var startY = 25 //set y offset of bar in pixels<br />
        var verticalpos="fromtop" //enter "fromtop" or "frombottom"<br />
        function iecompattest(){<br />
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}<br />
        function get_cookie(Name) {<br />
        var search = Name + "="<br />
        var returnvalue = "";<br />
        if (document.cookie.length > 0) {<br />
        offset = document.cookie.indexOf(search)<br />
        if (offset != -1) {<br />
        offset += search.length<br />
        end = document.cookie.indexOf(";", offset);<br />
        if (end == -1) end = document.cookie.length;<br />
returnvalue=unescape(document.cookie.substring(offset, end))}}<br />
        return returnvalue;}<br />
        function closebar(){<br />
        if (persistclose)<br />
        document.cookie="remainclosed=1"<br />
document.getElementById("topbar").style.visibility="hidden"}<br />
        function staticbar(){<br />
barheight=document.getElementById("topbar").offsetHeight<br />
        var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;<br />
        var d = document;<br />
        function ml(id){<br />
        var el=d.getElementById(id);<br />
        if (!persistclose || persistclose && get_cookie("remainclosed")=="")<br />
        el.style.visibility="visible"<br />
        if(d.layers)el.style=el;<br />
        el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};<br />
        el.x = startX;<br />
        if (verticalpos=="fromtop")<br />
        el.y = startY;<br />
        else{<br />
        el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;<br />
        el.y -= startY;}<br />
        return el;}<br />
        window.stayTopLeft=function(){<br />
        if (verticalpos=="fromtop"){<br />
        var pY = ns ? pageYOffset : iecompattest().scrollTop;<br />
        ftlObj.y += (pY + startY - ftlObj.y)/8;}<br />
        else{<br />
        var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;<br />
        ftlObj.y += (pY - startY - ftlObj.y)/8;}<br />
        ftlObj.sP(ftlObj.x, ftlObj.y);<br />
        setTimeout("stayTopLeft()", 10);}<br />
        ftlObj = ml("topbar");<br />
        stayTopLeft();}<br />
        if (window.addEventListener)<br />
        window.addEventListener("load", staticbar, false)<br />
        else if (window.attachEvent)<br />
        window.attachEvent("onload", staticbar)<br />
        else if (document.getElementById)<br />
        window.onload=staticbar<br />
        </script><br />
        <br /><br />
        <div class="clear"><br />
        </div><br />
        <div id="topbar"><br />
        <div style="text-align: right;"><br />
        <a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVJFbOR2z5zWOK4CngSPlQ939bqwh5wm-kZc5qkeJVucT1DD3BpJuTvCWR18fZnc8PKrF70F0OzW8kn-PeIIGHm7XwtOR4jI-7AUq9B1hHDcXvNJYHxlg4YVGBqFMQ8admN-cvdBK4WCfB/s1600/close3.png" /></a></div><br />
        <center><br />
        <div style="background: #fff;"><br />
      <b>  <span style="color: blue;"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBlognya-Ilmu%2F147008725448902%3Fref%3Dhl&amp;width=300&amp;height=290&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;border_color&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:290px;" allowtransparency="true"></iframe></span></b><br />
        </div><br />
        </center><br />
        </div></div>
<br style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;" />
<blink style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">Catatan :</blink><br />
<ul style="background-color: white; font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 19.59375px; text-align: justify;">
<li>Ganti yang berwarana <b><span style="color: red;">merah</span></b> dengan url fan page saudara.</li>
<li>Kode berwarna <span style="color: blue;"><b>Biru</b></span>, ganti dengan script fan page facebook saudara.</li>
</ul>
<div style="text-align: justify;">
<span style="font-family: Open Sans, sans-serif;"><span style="font-size: 14px; line-height: 19.59375px;">Trimakasih Telah Membaca <b><a href="http://www.blogger.com/data.post.url" target="_blank">"Cara Bikin Fanpage Facebook Di Blog"</a></b></span></span></div>

Cara Bikin Fanpage Facebook Di Blog

Firman Blog - Mengapa saya beri judul "Cara Membuat FanpageFacebook Di Blog" karena, sekarang saya mau membagikan tutorial "...