Cara Menghapus Blog Secara Permanen | INFO PC : Tutorial Blogspot

Tampilkan postingan dengan label Tutorial Blogspot. Tampilkan semua postingan

Kamis, 10 Mei 2012

Google Kembali Berbaik Hati

http://pege17.files.wordpress.com/2009/07/bloggerindonesia1.jpg?w=297&h=300

Google Kembali Berbaik Hati - Postingan Kali ini lbs blog tidak membahas tip n trik blogspot, seo, rahasia google panda, blog dofollow atau yang lainnya. Postingan kali ini saya tulis hanya untuk mengeluarkan sesuatu yang ada dalam pikiran saya.

Akhir-akhir ini saya kurang memperhatikan blog ini, hal ini disebabkan kerana banyak masalah pribadi yang membuat saya tidak bisa konsentrasi dalam segala hal. Masalah yang sedang saya hadapi sangatlah berat, sehingga minat untuk update blog ini sedikit terganggu. Tapi ternyata hati tidak bisa bohong, saya mulai kangen untuk mengelola blog ini lagi.

Satu per satu postingan, komentar, trafik dan posisi serp mulai saya cek.
Hasil yang saya dapatkan masih tetap sama, artikel Daftar Blog Dofollow Indonesia 2012 Pagerank Tinggi masih tetap menjadi yang terbaik. Dengan beberapa keyword, artikel Daftar Blog Dofollow Indonesia 2012 Pagerank Tinggi masih mendominasi posisi serp.Terkadang ada pula dengan keyword tertentu, yang mulcul di posisi 3 besar semua artikel dari lbs blog ini.

Selain itu ada kejutan yang datang dari google. Alhamdulillah postingan kontes seo yang berjudul Keretaminiku.Com Produsen Kereta Mini Mainan di Indonesia terindex kembali di search engine google. Padahal seperti yang tertulis di postingan Dampak Buruk Google Panda Mulai Menyerang , postingan yang berjudul Keretaminiku.Com Produsen Kereta Mini Mainan di Indonesia hilang dari Search Engine google.

Katakutan dalam mengikuti kontes seo sidikit berkurang, sebelumnya saya takut mengikuti kontes seo lagi. Karena saat mengikuti kontes seo, ada bebrapa artikel yang hilang pada hasil pencarian google.

Mungkin google panda mulai tidak suka dengan kontes SEO atau memang google lagi pusing mikir pacarnya. :)

Tapi biarlah yang penting sekarang sudah kembali normal, kembali lagi saya ingin melakukan percobaan dengan ikut serta pada kontes seo berjudul FasaPay Layanan Pembayaran Online Indonesia Cepat dan Aman. Mudah-mudahan mendapatkan hasil yang memuaskan...

Mungkin cuma ini yang ingin saya sampaikan pada kesempatan ini. Maaf jika postingan ini tidak terlalu penting, postingan berjudul Google Kembali Berbaik Hati yang sedang anda baca hanya curhatan dari admin lbs blog. :) jadi harap dimaklumi. Mungkin postingan selanjutnya bisa fokus kembali.

Go Blogger ! ! !

Kamis, 12 April 2012

Cara Membuat Recent Post Bergerak Di Blogspot

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7dS69nJ6CeTknvMcH9KEUM9sDICLAYuL8ODxiEMJFUBSRvzp6jDE93y5xZvilMl6KTTVDN09KWlUk-zIst8K1hCeq8kj-S04WHlLzxxW4_0yZmEJPRK2HwQiX2do6kR4p0sn5TZKP9DDy/s400/catssss.jpg

Cara Membuat Recent Post Terbaru di Blogspot - Tutorial kali ini lbs blog akan membahas bagaimana cara membuat artikel terbaru atau recent post pada blogspot. Artikel terbaru atau recent post adalah kumpulan link yang berisikan artikel-artikel terbaru atau bisa juga didefinisikan sebagai sebuah widget yang menampilkan posting/artikel terbaru. Banyak tutorial yang membahas bagaimana cara membuat recent post / widget artikel terbaru, salah satu nya adalah artikel terbaru lbs blog yang berjudul Cara Membuat Widget Artikel Terbaru atau Recent Post Terbaru di Blogspot. Tutorial recent post yang sedang anda baca ini adalah Recent post yang bergerak/slide yang berisikan thumbnail/gambar dan cuplikan-cuplikan artikel sobat blogger.

Cara Membuat Recent Post / Artikel Terbaru Bergerak Pada Blogspot:

1. Login ke Dasbor blogspot.

2. Pilih Rancangan

3. Klik Tambah Gadget pada bagian blog yang ingin di tambah Recent Post.

4. Kemudian Pilih HTML/JavaScript

5 Isi Judul Sesuka anda, Copy dan letakkan kode dibawah ini kedalamnya

<center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 0;
</script> <script src="http://septian-lbs-2012.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt">
</script> </ul>
</center>

6. Ganti tulisan yang berwarna merah dengan nama blog yang sobat gunakan.

7. Simpan dan Lihat hasilnya.

Semoga Artikel Cara Membuat Widget Recent Post / Artikel Terbaru Bergerak Pada Blogspot Bisa bermanfaat untuk sobat blogger semua..

Selamat Mencoba & Happy Blogging

Dapatkan BackLink dari Lbs Blog

Selasa, 03 April 2012

Cara Membuat Arikel Terkait (Related Post Thumbnail)

Cara Membuat Arikel Terkait (Related Post Thumbnail) – Artikel terkait atau Related post adalah Kumpulan link yang berkaitan dengan artikel yang sedang dibaca. Kebanyakan Artikel terkait atau Related post letaknya berada dibawah postingan, karena posisi inilah yang paling strategis. Ada 3 jenis modifikasi dari Artikel terkait atau Related post : yang pertama Artikel terkait atau Related post gambar dan judul, kedua Artikel terkait atau Related post berisikan judul saja dan yang ketiga Artikel terkait atau Related post dengan gambar saja.

Namun pada postingan kali ini yang akan dibahas adalah Modifikasi yang pertama yaitu Cara Membuat Arikel Terkait (Related Post Thumbnail).

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKBxTJ-0hjzM0zWIUkfZHGPYlbbQmsG09QiYhQDe8aJDL-fgSoG961X3MHIaT2B-NI_wF0VmpDZWYE-akTG2YdJMLNNqp0e80ZX5vUaibVWO5mgKltCGTpiPoMxNmdgy3Ylhjr4JZaOeM/s1600/Artikel+Terkait.gif

Cara Membuat Arikel Terkait (Related Post Thumbnail) :

1.    Download Template terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan

2.    Cari kode </Head> (Gunakan CTRL+F untuk mempercepat pencarian)

3.    Letakkan kode Dibawah ini tepat diatas kode </Head>

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

4. Cari salah satu kode <div class='post-footer-line post-footer-line-1'> atau kode ini <p class='post-footer-line post-footer-line-1'>

5. Jika sudah ditemukan, Copy dan Letakkan kode dibawah ini tepat diatasnya

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl="<data:post.url/>";
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

6. Simpan dan lihat hasilnya

Catatan :
var maxresults=5; ganti angka 5 untuk jumlah yang akan ditampilkan
var relatedpoststitle="Related Posts"; ganti related posts untuk judul yang ingin anda tampilkan

Selamat Mencoba & Happy Blogging.

Anda sedang membaca : Cara Membuat Arikel Terkait (Related Post Thumbnail)

Jumat, 10 Februari 2012

Cara Membuat Floating Socialmedia Shared blogspot

Cara Membuat Floating Socialmedia Shared blogspot - Ini adalah pembaruan dari tutorial Cara Membuat Floating Socialmedia Shared blogspot yang beredar di internet. Biasanya pada socialmedia shared versi lama terdapat Stumbleupon dan Digg. Pada versi baru ini sengaja dihapus dan diganti dengan Google +1 & Linkedln. socialmedia share memang sangat pupoler karena webmasters atau bloggers bisa mendapat trafik tambahan dari social network tersebut. Cara pemasangan Floating Socialmedia Shared pun cukup mudah, sobat blogger bisa memasangnya dengan cara yang sederhana.

Langkah-langkah : Membuat Floating Socialmedia Shared blogspot

Langakah 1
Login ke Dasbor blogspot

Langkah 2
Pilih Rancangan & Edit HTML jangan lupa centang Expand Widget Template.

(Download Template Sobat terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan)

Langkah 3
Salin kode dibawah ini dan letakkan diatas kode </body> (Gunakan CTRL F untuk mempercepat pencarian)

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Simpan Template

Langkah 4
Masuk Elemen Laman > Tambah Gadget

Langkah 5
Pilih HTML/JavaScript dan masukkan salah 1 kode dibawah ini :

Social media shared Silver code

<style>#floatingbuttons{background:#aaa;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);border:1px solid #808080;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://septian-lbs-2012.blogspot.com/2012/02/cara-membuat-floating-socialmedia.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div>

Social media shared Red code

<style>#floatingbuttons{background:#C12424;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);border:1px solid #B31919;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://septian-lbs-2012.blogspot.com/2012/02/cara-membuat-floating-socialmedia.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div>

Social media shared Blue code

<style>#floatingbuttons{background:#295698;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #3980E6), color-stop(1, #295698));background:-moz-linear-gradient(top, #3980E6, #295698);border:1px solid #1E4A8A;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://septian-lbs-2012.blogspot.com/2012/02/cara-membuat-floating-socialmedia.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div>

Social media shared Black code

<style>#floatingbuttons{background:#333;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #656565), color-stop(1, #333));background:-moz-linear-gradient(top, #656565, #333);border:1px solid #222;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://septian-lbs-2012.blogspot.com/2012/02/cara-membuat-floating-socialmedia.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div>

Social media shared Green code

<style>#floatingbuttons{background:#80A81C;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #A1D423), color-stop(1, #80A81C));background:-moz-linear-gradient(top, #A1D423, #80A81C);border:1px solid #739619;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://septian-lbs-2012.blogspot.com/2012/02/cara-membuat-floating-socialmedia.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div>

Social media shared Orange code

<style>#floatingbuttons{background:#C15F24;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #F58D4F), color-stop(1, #C15F24));background:-moz-linear-gradient(top, #F58D4F, #C15F24);border:1px solid #B35319;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#fff;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://septian-lbs-2012.blogspot.com/2012/02/cara-membuat-floating-socialmedia.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div>

Social media shared Yellow code

<style>#floatingbuttons{background:#FFF19D;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF8CA), color-stop(1, #FFF19D));background:-moz-linear-gradient(top, #FFF8CA, #FFF19D);border:1px solid #F1E7AC;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#fff;background:none;text-decoration:underline;}</style><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://septian-lbs-2012.blogspot.com/2012/02/cara-membuat-floating-socialmedia.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div>

Social media shared White code

<style>#floatingbuttons{background:#F9F9F9;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);border:1px solid #ccc;float:left;padding:0 0 3px 0;position:fixed;bottom:15%;left:0;z-index:10;border-radius:0 5px 5px 0;box-shadow:2px 2px 5px rgba(0,0,0,0.3);} #floatingbuttons .floatbutton{float:left;clear:both;margin:5px 4px 0 4px;} .addbuttons{clear:both;text-align:center;padding-top:5px;} .addbuttons a span.getfloat, .addbuttons a span.sharebuttons{color:#000;background:none;font-family:arial, sans-serif;display:block;font-size:9px;font-weight:bold;text-decoration:none;line-height:11px;} .addbuttons a:hover span{color:#000;background:none;text-decoration:underline;}</style><div id='floatingbuttons' title="Share this post!"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><script type="text/javascript"> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><div class='floatbutton' id='facebook'><fb:like layout="box_count" show_faces="false" font=""></fb:like></div><div class='floatbutton' id='google+1'><g:plusone size="tall"></g:plusone></div><div class='floatbutton' id='twitter'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a></div><div class='floatbutton' id='linkedin'><script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script></div><div class="addbuttons"><a href="http://septian-lbs-2012.blogspot.com/2012/02/cara-membuat-floating-socialmedia.html" title="Add floating social media share buttons to your blog!"><span class="getfloat">Get floating</span><div style="clear:both"></div><span class="sharebuttons">share buttons</span></a> </div> </div>

Simpan dan Lihat hasilnya

Selamat mencoba dan Happy Blogging

Kamis, 09 Februari 2012

Cara Menambah Fungsi Rating Pada Postingan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjj1Nm1bPqGe9SukM_jEZkUHHiiQSZBwZ8EzAfYb4dBCfRgUjhWCpS3svg3te1zKPWG_SiDCct1dduLK0wsNfLlWMi1gpwXuOTS7EsQF7Qe4PzLYfD-3E0NJlqf_QDoHHeokaIeYfGtqpk/s1600/Rating+pada+blogspot.jpg

Cara Menambah Fungsi Rating Pada Postingan - Mungkin sobat blogger sudah pernah melihat suatu blog memiliki fungsi rating disetiap postnya. Dengan adanya fungsi rating, para pengunjung bisa menilai postingan yang sobat blogger buat.

Contohnya seperti yang di bawah ini :

Apakah sobat tertarik membuat nya ? jika tertarik silahkan di lanjutkan

Langkah-langkah : Cara Menambah Fungsi Rating Pada Postingan

Langkah 1
Login ke Dasbor sobat

Langkah 2
Plih Rancangan & Edit HTML jangan lupa centang Widget Template (Download Template sobat terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan)

Langkah 3
Cari kode (gunakan CTRL F untuk mempercepat pencarian)

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

Langkah 4
Tambahkan kode berikut tepat dibawahnya

<script language='JavaScript'>var OB_platformType = 1; var OB_demoMode = false;var OB_langJS ='http://widgets.outbrain.com/lang_en.js';</script><script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

Maka susunannya akan menjadi seperti ini

<b:include data='post' name='postQuickEdit'/>
</span>
</div>
<script language='JavaScript'>var OB_platformType = 1; var OB_demoMode = false;var OB_langJS ='http://widgets.outbrain.com/lang_en.js';</script><script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>

Simpan dan Lihat Hasilnya

Sekarang pengunjung bisa menilai seberapa baikkah postingan blog sobat blogger.

Selamat mencoba, Happy Blogging

Mempercantik Blockquote blogspot (CSS)

Mempercantik Blockquote blogspot (CSS) - Assalamualaikum.. Sobat blogger. Pada postingan kali ini kita akan Ngobrolin Cara mempercantik tampilan blockquote blogspot.
Bisa dibilang Inilah salah satu metode dari ribuan hingga jutaan cara untuk memperindah/mempercantik tampilan blog yang sobat miliki.

hehe ~~lebay~~

Sebenarnya Ada banyak variasi untuk mempercantik Blockquote, tapi untuk kali ini. Saya akan memberi tahu sobat blogger bagaimana cara membuat tampilan blockquote .

OK sobat, Langsung saja disimak Cara Mempercantik Blockquote Blogspot :

Langkah-langkah : Cara mempercantik blockquote blogspot

Langkah 1

Langkah 2
Pilih Rancangan & Edit HTML jangan lupa centang Expand Widget Template.

(Download Template Sobat terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan)

Langkah 3
Temukan Salah satu dari kode dibawah ini :

.post blockquote
. . . . . . dst
}

.post blockquote
......... dst
}
.post blockquote:hover
......... dst
}
.post blockquote p
......... dst
}

blockquote
. . . . . . dst
}

Setiap template memiliki kode yang berbeda, jadi silahkan sobat mencarinya. Gunakan CTRL + F untuk memudahkan mencari.

Langkah 4
Ganti kode diatas dengan kode dibawah ini :

.post blockquote {
background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }
.post blockquote:hover {
background:#FFFFFF url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0
}
.post blockquote p {
margin:.75em 5;
background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;
padding:20px;
background-position:bottom right;
}

Warnanya bisa disesuaikan dengan keinginan sobat blogger.

SIMPAN dan Lihat Hasilnya

Cukup mudah bukan ?

buruan dicoba. untuk cara mempercantik blockquote lainnya tunggu postingan selanjutnya saja.

Cara menambah 2 kolom di bawah Posting

Cara menambah 2 kolom di bawah Posting - Selamat datang kembali di septian-lbs-2012.blogspot.com. Pada kesempatan ini saya akan menjelsakan tutorial blogspot lagi tentang cara membuat kolom di bawah postingan blog. Cara menambah 2 kolom dibawah posting bisa dibililang sangat mudah. jika soabt blogger tertarik.
Berikut langkah - langkahnya:

Langkah-langkah : Cara menambah 2 kolom di bawah Posting

Langkah 1
Login ke Dasbor sobat

Langkah 2
Plih Rancangan & Edit HTML jangan lupa centang Widget Template

(Download Template sobat terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan)

Langkah 3
Cari Kode ]]></b:skin>

Langkah 4
Letakkan kode dibawah ini di atas kode ]]></b:skin>

#related{background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqMhRymjP4wFlA7KkH_n60Khk_SdvocFrzLrf8DG_4EsM4ogBN7B646GsLKhjHRgyAeqRtRrqOP0pIqeXfM8AGYnVfsxDCW6Z1ALKqTzGJAAej7R076WS-vr8suGssgQLk-87ORxkiKLQ/) 45% 0 repeat-y;border:1px solid #ddd;color:#000;margin:0 0 10px;padding:15px}
#related .related-posts{font-weight:400;width:53%;float:right}
#related .related-posts p{margin:0}
#related .related-posts h3,#related .related-posts h2,#related .related-posts h1{font-size:12pt;letter-spacing:0;margin:0}
#related .related-posts ol{font-weight:400;margin:2px 0 0}
#related .subscribe{width:43%;float:left;color:#000}
#related .subscribe p.intro{font-weight:400}
#related .subscribe p.feed{margin-bottom:10px;font-weight:700;padding-left:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8hOYu400krfLtSgvYbVZOznGCpBhgdXsptGtAX9QNX22hakczel7YVLoHuHKNTv8CYaf6v4bGxZqHYt8gxtvkR63LxdNqOiC44Xw4ketNRogWPQWa1V-knfdlTk2NSBL-3zjNz0S6x3o/) 0 50% no-repeat;vertical-align:middle}
#related .subscribe form{margin:0;padding:0}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}

Langkah 5
Cari kode di bawah

<data:post.body/>

Langkah 6
Letakkan kode di bawah ini tepat setelah kode <data:post.body/>:

<div class='clearfix' id='related'>
<div class='subscribe'>
<p class='feed'>
<a href='http://disini letakkan Link Feed anda/feeds/posts/default'>Berlangganan via RSS Feed</a></p><p class='intro'>disini letakkan kode Form Berlangganan Anda</p></div>
<div class='related-posts'>disini letakan kode Related Post Anda</div></div>

NB: Jika sudah memasang auto readmore, letekan setelah kode <data:post.body/> yang ke 2

Simpan dan Lihat Hasilnya

Cara Membuat Widget Page Loading Time

Kali ini kita akan membuat script Page Loading Time. Page Loading Time atau Waktu Pemuatan Halaman merupakan perangkat bantu untuk mengetahui waktu yang dibutuhkan untuk memanggil keseluruhan halaman dari suatu halaman situs atau blog. Dengan widget ini kita bisa mengetahui kecepatan load halaman blog, ini akan memicu pengelola blog untuk mengoptimasi blognya agar lebih cepat. Langkah-langkah untuk mengoptimasi blog akan dibahas pada artikel berikutnya. Satuan yang akan digunakan adalah milidetik jadi jika anda ingin menggunakan satuan waktu menit kira-kira bagaimana ya? Mari kita coba memasang script page loading time.

Memasang Script Page Loading Time

Langkah 1
Login ke Blogger

Langkah 2
Masuk ke "Rancangan - Edit HTML"

Langkah 3
Cari kode dibawah ini:

</head>

Langkah 4
Masukan (copy paste) kode dibawah ini diatas kode pada langkah 3:

<script type='text/javascript'>//<![CDATA[
var now = new Date();
window.onload = function() {
document.getElementById("waktuload").style.display = "block";
document.getElementById("milidetik").innerHTML = (new Date()).getTime() - now.getTime();
}
//]]></script>

Langkah 5
Cari kode dibawah ini:

<body>

Langkah 6
Kemudian ganti dengan kode <body> dengan kode dibawah ini:

<body id="waktuload">

Langkah 7
Tempatkan kode dibawah ini dimana saja sesuai dengan keinginan anda

Loading time <span id='milidetik'/> ms

Perhatian : Kode diatas akan menampilkan waktu pemuatan halaman yang sedang anda lihat.

Langkah 8
Simpan template dan preview blog anda....

Selamat mencoba dan semoga berhasil. Happy Blogging :)

Threaded Comments Elegant Blogspot

Threaded Comments Elegant Blogspot - Threaded Comments atau komentar bertingkat memang sedang menjadi hot topik untuk merubah tampilan default komentar blogspot. Modifikasi Threated comment pun mulai bermunculan, sahingga banyak pilihan untuk dicoaba. Salah 1 nya seperti gambar diatas. Jika sobat blogger tertarik, silahkan ikuti cara membuat Threaded Comments Elegant Blogspot dibawah ini :

Langkah-langkah : Cara membuat Threaded Comments Elegant Blogspot

Langkah 1
Login ke Dasbor sobat.

Langkah 2

Pilih Rancangan > Edit HTML > jangan lupa centang Expand Widget Template.

(Download Template Sobat terlebih dahulu untuk berjaga-jaga jika terjadi kesalahan)

Langkah 3

Cari kode </b:skin> (Gunakan CTRL+F untuk mencarinya)

Langkah 4

Letakkan kode dibawah ini tepat diatas kode </b:skin>

.comment-wrap {clear: both;margin-bottom: 10px;float: right;width: 100%;}
.comment-head {margin: 0;width: 70px;float: left;}
.comment-avatar {margin: 0; float: left; vertical-align: middle;border: 1px solid #DDD;padding: 3px;background: white;width: 35px;height: 35px;}
.comment-reply {padding-top: 5px;}
.comment-reply a {
float:left;
border-top: 1px solid #828282;
background: #303436;
background: -webkit-gradient(linear, left top, left bottom, from(#636566), to(#303436));
background: -moz-linear-gradient(top, #636566, #303436);
padding: 5.5px 11px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 15px;
text-decoration: none;
vertical-align: middle;
}
.comment-reply a:hover {border-top-color: #494d4f;
background: #494d4f;
color: #ccc;}
.comment-entry
{
position: relative;
width: 100%;
margin-bottom: 40px;
margin-left: 65px;
background: #ddd;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 2em 1.5em;
color: rgba(0,0,0, .8);
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
}
.comment-entry:before, .comment-entry:after
{
z-index: -1;
position: absolute;
content: "";
bottom: 15px;
left: 10px;
width: 50%;
top: 80%;
background: rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 0 15px 10px rgba(0,0,0, 0.7);
-moz-box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7);
-webkit-transform: rotate(-3deg);
-moz-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
transform: rotate(-3deg);
}
.comment-entry:after
{
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
right: 10px;
left: auto;
}
.comment-arrow {display: block;width: 9px;height: 18px;background: url(http://2.bp.blogspot.com/-ZptHUP9mfW0/Tu-rQm3zoUI/AAAAAAAABTs/pyXUaMMWJgU/s1600/comment-arrow.gif) no-repeat;position: absolute;margin-left: -25px;}
.comment-info {margin-bottom: 5px;}
.comment-name {font-weight: bold;font-size: 14px;float: left;}
.comment-date {font-size: 12px;float: right;font-style: italic;color: #000; }
.comment-entry p {margin: 0;font-size: 15px;color: #666; margin-bottom: 10px; line-height:170%; }
.comment-pagenavi {font-size: 10px;text-transform: uppercase;color: #666;text-shadow: 1px 1px white;font-weight: bold;}
.comment-pagenavi a {color: #666;text-decoration: none;padding:10px;}
.comment-pagenavi a:hover {text-decoration: underline;}
.comment-pagenavi span {color: #888;background: white;padding: 4px;border: 1px solid #E0E0E0;}
.comment-delete (display: block;)

Langkah 5
Cari kode <b:includable id='comments' var='post'> Sampai </b:includable>

Langkah 6
Ganti semua kode diantara kode diatas dengan kode dibawah ini :

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments > 0'>
<b:if cond='data:post.numComments == 1'>
<span id='comment-total'>1</span> comment
<b:else/>
<span id='comment-total'><data:post.numComments/></span> comments
</b:if>
</b:if>
</h4>

<div id='comment-reply_css'></div>

<div class='comment-pagenavi' id='comment-page'></div>

<div id='comment-block'>
<b:loop values='data:post.comments' var='comment'>
<b:if cond='data:comment.isDeleted'>
<b:else/>

<div expr:id='data:comment.anchorName'>
<div class='comment-wrap'>
<a expr:name='data:comment.anchorName'/>
<div class='comment-head'>
<div class='comment-avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
</div>
<div class='comment-reply'>
<a expr:href='"https://www.blogger.com/comment.g?blogID=8912498603889145817&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
</div>
</div>
<div class='comment-entry'>
<span class='comment-arrow'></span>
<div class='comment-info'>
<div class='comment-name'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
<data:comment.author/>
</a>
<b:else/>
<b><data:comment.author/></b>
</b:if>
</div>
<div class='comment-date'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<div class='clear'/>
</div>

<p><data:comment.body/></p>
</div>
</div>
</div>
</b:if>
</b:loop>
</div>
<div class='comment-pagenavi' id='comment-page_copy'></div>
<script type="text/JavaScript">
</script>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</b:if>
</div>

Simpan dan Lihat hasilnya

Jika langkah-langkah di atas diikuti dengan benar, maka hasilnya akan terlihat. Jangan Lupa untuk hapus kode css komentar default.

Selamat mencoba Happy blogging