About

Tukeran Link Dan Banner

Agan" semua sudah tau kan manfaat tukeran link.? Sebagian besar para webmaster mengatakan bahwa manfaat tukar link (link exchange), sangat penting sekali, dan memiliki banyak keuntungan atau manfaat, diantaranya.

Search

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Rabu, 25 Januari 2012

Cara membuat menu CSS ( Red Glossy )



Selamat malam sobat blogger semua, pada malam ini saya akan share tutorial blogger yaitu Cara membuat menu CSS ( Red Glossy ),  ok biar gak kebanyakan basa basi, silahkan lihat contohnya dibwah ini :









Bagaimana? menarik bukan?  Jika anda tertarik silahkan ikutin langkah berikut :


  1. Pergi ke blogger > desain
  2. Pilih HTML / Javascript widget
  3. Kemudian Masukan kode dibwah ini

<style> .mbt-red-grey-menu{ border:5px solid #cd0000; padding:0; clear:both; } .mbt-red-grey-menu{ margin:0px; padding: 0; float: left; font: bold 13px Arial; width: 100%; overflow: hidden; margin-bottom: 1em; border: 1px solid #625e00; border-width: 1px 0; background: black url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw22QDhnuvN9k4UbYb-tIkfwr34gkgA-0yBf-j7B4txmXP39kyaBA1_8sL-wmLehrWR_pTOTbCQQqRC3fwxri9CXhNGL_dvjj8NZ3AEtdYDMCDmydntJbO_9PQDCQ7MMqwv706orHgYCY/s400/blockdefault.gif) center center repeat-x; } .mbt-red-grey-menu li{ display: inline; } .mbt-red-grey-menu li a{ float: left; color: #fff; padding: 9px 11px; text-decoration: none; border-right: 1px solid white; } .mbt-red-grey-menu li a:visited{ color: #fff; } .mbt-red-grey-menu li a:hover, .mbt-red-grey-menu li a.selected{ color: #fff; background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4cdudGxOLoANFSqpxFZFXj_X50jriXdfUrbIxv9VqzgmE5gdVLxFbxUWcKfOvHQ8PzSfjmP4E0zon-OrzFhuH90XuPfakF0ZNy2qQVFpaTPA8lKk9KLWZ82UWuPmLNF-7MkAqc19hw2Q/s400/blockactive.gif) center center repeat-x; } </style>
<ul  class="mbt-red-grey-menu"> <li><a href="#">Home</a></li> <li><a href="#" >About Us </a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Sitemap</a></li></ul>
 4. Terakhir Jangan lupa save! Selesai


NB : kode # berwarna kuning silahkan ganti sesuai dengan link anda!

Cara Hapus Komentar Blogger Threaded?


Anda dapat mengamati bahwa kita telah digulung kembali ulir komentar dari blog kita.Satu-satunya alasan adalah bahwa karena fitur ini masih baru karena itu melibatkanbeberapa bug. Masalah terbesar yang hampir semua blog blogspot hadapi dengan komentar berulir adalah bahwa ketika Anda mengklik link pos, pengguna dibawa ke bagian bawah halaman di mana kotak komentar ada. Dengan kata lain, setelah mengklik URLposting, mengontrol membawa Anda ke kotak komentar yang agak tersisa di atas. Hal inidilakukan Pendapatan AdSense dan tampilan halaman. Jika Anda santai menggunakan sistem komentar baru maka Anda hanya dapat mengabaikan tutorial ini, tetapi jika Anda berpikir bahwa Anda akan menambahkan kembali fitur komentar berulir setelah semua bugdikeluarkan oleh Tim Blogger maka Anda dapat mengikuti langkah mudah di bawah ini untuk berbagi menyingkirkan fitur baru ini.


*****************************************************************************
*****************************************************************************

Untuk tiga alasan sederhana:

Fitur ini baru dan bug mengambil pengguna ke bagian bawah halaman itu mempengaruhitampilan halaman dan karenanya pendapatan
Saya memberikan jawaban yang sama untuk pertanyaan diulang diminta. Pembaca harusmencari komentar admin dan sering tidak bisa mengamati jawaban sudah dipostingdengan demikian mereka akan mengajukan pertanyaan yang sama lagi. Sehingga menimbulkan kebingungan dan pertanyaan diulang.
Mengapa kita masih seperti gaya lama?

Kita bisa menjawab semua pembaca dengan jawaban tunggal sehingga menjaga hal-hal sederhana dan bersih
Pembaca dapat dengan mudah membedakan antara pengunjung dan komentar penulis
Tidak ada script tambahan efek persentase keseluruhan waktu buka.
Meningkatkan tampilan halaman

Apakah ini berarti bahwa fitur ini adalah semua-buang waktu?

Tentu saja tidak! Kami akan menginstal mereka kembali setelah menyelesaikan semua blogger bug terkait dengan hal itu dan membuatnya lebih dioptimalkan.

Kita tidak bisa menyesuaikan Komentar Threaded?

Anda dapat melakukan semua yang Anda inginkan. Saya sedikit sibuk hari ini dan perlu waktu untuk melihat ke dalam pengkodean baru. Kami akan berbagi banyak tema baru dan desain untuk menambahkan terlihat menarik segar untuk gaya ini threaded. Kita masih perlu menulis tutorial tentang cara untuk membedakan antara pengunjung dan gayapenulis komentar, bagaimana untuk menyesuaikan bentuk komentar baru, menyesuaikan tombol menjawab dan menghapus dan bagaimana untuk menambahkan teks di ataskotak komentar dll

Apakah Anda menghapusnya juga?

Jika Anda merasa bahwa Anda dapat pergi bersama dengan masalah-masalah saat ini dan yang pembaca Anda menikmati tampilan baru dan yang penghasilan AdSense Andadan tampilan halaman yang tidak besar dilakukan maka Anda pasti harus tetap. Anda pasti dapat mengharapkan blogger untuk memecahkan masalah Langsung-ke-bawahsegera. Tetapi jika Anda sedang mencari solusi yang cepat kemudian mencoba tutorialhari ini disajikan hanya untuk Anda.



  1. Pergi Untuk Blogger> Desain> Edit HTML
  2. Back up template anda
  3. Centang "Expand Template Widget"
  4. Pencarian untuk ini:

<b:if cond='data:post.showThreadedComments'>             <b:include data='post' name='threaded_comments'/>           <b:else/>             <b:include data='post' name='comments'/>           </b:if>         </b:if>         <b:if cond='data:blog.pageType == &quot;item&quot;'>           <b:if cond='data:post.showThreadedComments'>             <b:include data='post' name='threaded_comments'/>           <b:else/>             <b:include data='post' name='comments'/>           </b:if>         </b:if>

Anda akan menemukan kode ini dua kali dan menggantinya dua kali dengan kode berikut:

 <b:include data='post' name='comments'/>           </b:if>                <b:if cond='data:blog.pageType == &quot;item&quot;'>                      <b:include data='post' name='comments'/>                </b:if>

 5. Simpan template Anda
 6. Selesai!


Kunjungi blog Anda untuk melihat semuanya kembali normal. Anda wont melihat halamanmelompat ke kotak komentar dan posting akan beban karena mereka biasanya digunakanuntuk melakukan. Halaman Anda pandangan dan Tayangan halaman AdSense akanmeningkat lagi.

Senin, 23 Januari 2012

Recent Posts Widget dengan Thumbnails

Selamat malam sahabat blogger se'Indonesia, pada malam yang baik ini, saya akan berbagi tutorial blog yaitu Recent Posts Widget dengan Thumbnails. script ini berbeda dari recent post dari yang sebelumnya, kelebihannya yaitu pada samping kiri posting berisi emage thumbail. kira" seperti gambar disamping ini,,  gimana? anda tertarik? biar gak bnyak basa basi kita langsung aja menuju TKP "pasang Posts Widget dengan Thumbnails"



Langkah - Langkah :
  1. Login ke blogger anda.
  2. Masuk ke Rancangan > Elemen Laman
  3. Lalu tambah Gadget
  4. Lalu copy/paste script dibawah ini.  
<div id='bp_recent'></div><div class='bp_footer'><small><a id='bp_recent_link' target='_blank' href='http://www.bloggerplugins.org/2011/09/recent-posts-thumbnails-blogger-widget.html?utm_src=bp_recent' style='padding: 1px 0px 0px 19px;text-decoration:none;'><img src='http://image.bloggerplugins.org/blogger-widgets.png' alt='recent posts with thumbnails for blogger' style='border:none' /></a>Powered By <a href='http://www.bloggerplugins.org/?utm_src=bp_recent' target='_blank' title='blogger widgets'>Blogger Widgets</a></small></div>
<script style='text/javascript' src='http://blogergadgets.googlecode.com/svn/trunk/recentposts.js'></script>
<script style='text/javascript'>
var numberOfPosts = 5;
var showPostDate = true;
var showSummary = true;
var summaryLength = 200;
var titleLength = 100;
var showCommentCount = true;
var showThumbs = true;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'More';
</script>
   5. Terakhir Simpan Template.

JIKA INGIN COPAZ JANGAN LUPA ISI SUMBER! SALAM BLOGGER

Sabtu, 21 Januari 2012

Cara Membuat Link Bergerak Dengan jQuery





Berikut langkah-langkahnya:


1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: </head> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>





6. Sekarang simpanlah template sobat.


Penting:
Bila di blog sobat sudah ada file.js untuk kode:
http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
Maka sobat tidak perlu lagi memasang file.js tersebut.




7. Cara memasang di link sobat cukup tambahkan kode class "linknudge" untuk link sobat

8. Selesai!

Cara Membuat Halaman Maintenance Pada Blogspot

Cara membuat Halaman Maintenance Pada Blogspot
Oke, silahkan lihat demonya. Cara membuatnya-pun cukup mudah, hanya menggunakan kode CSS, pasti mudah dan gak ribet !! bila sobat memasang kode maintenance-nya, maka akan muncul creenshot seperti disamping ini:



 

Bila tertarik untuk membuat Halaman Maintenance Pada Blogspot, silahkan ikuti langkah-langkah berikut:


1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>

html { height: 100%; background: url(http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) no-repeat center 50%; margin: 0; } body { display: none; }

6. Jangan lupa Simpan Template.


Sip, sampai disini sobat udah bisa membuat Halaman Maintenance Pada Blogspot, melihat kode diatas jelaslah sangat simpel dan mudah dimengerti tentunya.
Silahkah ganti link image diatas (http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) sesuai dengan kreasi sobat.


source : kode-blogger

Rabu, 18 Januari 2012

Pasang Related Post di Blogger


Tahap - Tahap :
  1. Pergi ke Layout> Edit HTML di Dashboard Blogger Anda.
  2. Back up Template yang ada sebelum membuat perubahan!
  3. Pastikan untuk mencentang "Expand Template Widget".
  4. Cari code  </ head>.
  5. Tambahkan kode berikut sebelum code </ head>.  
 <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPhtuDc1kzpkiN3fvvl2bRdpdX-D4dhD5T-w000hz_ZuSSqcj8jfrHf-Ny9jp1Mw-ZtHBJ7rr5elJtnHeXir1jIDYYp0fuOqMISbWNWXiWffsd-Y5tpWoz9X-O4A78VGOGBaJkjRMnbEs/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/1019141247/reladepost.js' type='text/javascript'/>
  
     6. Sekarang mencari <data:post.body/>. Dalam beberapa template kode ini mungkin terlihat seperti        ini  <div class='post-body> atau <data:post.body/>

     7. Tambahkan kode berikut persis di bawah kode tadi.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
NB : Ganti kode '5' di atas menyesuaikan bnyak post yg muncul

    8. Sekarang Simpan Template Anda dan Anda selesai!

  SELAMAT BERKREASI, DUDAYAKAN KOMENTAR

Senin, 16 Januari 2012

Chatbox Slide Vertikal Di Blog

Mumpung saya sempet posting di net, kali ini saya akan share tips mempercanting blog anda, yaitu memasang Chatbox ala jQuery vaertikal di blog, kira" tampilannya seperti gambar di samping kanan..
Gimana?  agan tertarik, 

Untuk memasang chatbox slide vertikal dengan jQuery ini sangat mudah, anda tinggal menambahkan kode-kode HTML yang nanti akan saya uraikan secara lengkap dan jelas...  yoi, kalo gitu langsung aja..
sbelumnya jgn lupa LIKE THIS YO ^_^









Tahap - tahap :

  1. Login ke Blogger dengan akun anda.
  2. Kemudian pilih Rancangan >> Edit HTML
  3. Seperti biasa klik Download Template Lengkap biar aman
  4. Jangan lupa centang Expand Template Widget
  5. Selanjutnya cari kode ]]>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]> tersebut:
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}.panel p{color:#ccc;margin:0 0 15px;padding:0}.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}.colleft{float:left;width:130px;line-height:22px}.colright{float:right;width:130px;line-height:22px}a:focus{outline:none}.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}



6.Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>


7. Selanjutnya, Masukan kode Javascript berikut dibawah script jQuery tadi:

<script type="text/javascript">$(document).ready(function(){$(".trigger").click(function(){$(".panel").toggle("fast");$(this).toggleClass("active");return false;});});</script>


9. Kemudian cari lagi kode berikut ini <body>
10. Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya
<div class="panel">



Taruh Code Script Cbox Anda Disini


</div><a class="trigger" href="">ChatBox</a>
11. Save Template anda, SELESAI



Selamat berkreasi dan jangan lupa komentar, SALAM BLOGGER

Sabtu, 14 Januari 2012

JQuery Menu Lavalamp navigation



Langkah-langkahnya :
1. Login blogger
2. Rancangan, Edit Html, Cari kode ]]> :
3. Dan Simpan kode berikut diatasnya :


/* ---------------lavaLamp With Image---------------------------------- */.lavaLampWithImage {position: relative;height: 29px;width: 421px;background:-moz-linear-gradient(left, #ff6900, #ff9700, #ff6900, #ff9700, #ff6900); no-repeat top;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;padding: 15px;margin: 10px 0;overflow: hidden;}.lavaLampWithImage li {float: left;list-style: none;}.lavaLampWithImage li.back {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKiNYKirgiROh1z01cf_SGU1c3rLy-mcLZJPQx6e09-arYtATMWeQhKONQz0L6ZCzSv5Ki-74riqxcM1oHsv9IkALty4MaIX4eNkvCRChaib8DRu3wT8fW-jo6XfPqRY2caqfmbWZc-bs/s1600/lava.gif") no-repeat right -30px;width: 9px; height: 30px;z-index: 8;position: absolute;}.lavaLampWithImage li.back .left {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKiNYKirgiROh1z01cf_SGU1c3rLy-mcLZJPQx6e09-arYtATMWeQhKONQz0L6ZCzSv5Ki-74riqxcM1oHsv9IkALty4MaIX4eNkvCRChaib8DRu3wT8fW-jo6XfPqRY2caqfmbWZc-bs/s1600/lava.gif") no-repeat top left;height: 30px;margin-right: 9px; /* 7px is the width of the rounded shape */}.lavaLampWithImage li a {font: bold 14px arial;text-decoration: none;color: #fff;outline: none;text-align: center;top: 7px;text-transform: uppercase;letter-spacing: 0;z-index: 10;display: block;float: left;height: 30px;position: relative;overflow: hidden;margin: auto 10px;}.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {border: none;}
4. Simpan java script berikut tepat diatas kode </head>

<script src='http://japarus.xtgem.com/blogspot/jquery.easing.min.js' type='text/javascript'/><script src='http://japarus.xtgem.com/blogspot/jquery-1.1.3.1.min.js' type='text/javascript'/><script src='http://japarus.xtgem.com/blogspot/jquery.lavalamp.min.js' type='text/javascript'/><script type='text/javascript'>$(function() {$(&quot;#1&quot;).lavaLamp({fx: &quot;backout&quot;,speed: 700,click: function(event, menuItem) {return false;}});});</script>
5. Cari kode berikut (ctrl+F untuk mempermudah pencarian) :

<div id='header-wrapper'><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='test (Header)' type='Header'/></b:section></div>

ini kalau mau posisi nya di bawah header ..
kalau mau posisinya seperti punya saya di atas cari kode ini <div id='top-wrap'>

6. jika sudah ketemu simpan kode beikut dibawah kode yang dicari tadi :

<ul class="lavaLampWithImage" id="1"><li><a href="#">Home</a></li><li><a href="#">Plant a tree</a></li><li><a href="#">Travel</a></li><li><a href="#">Ride an elephant</a></li></ul>


SELESAI. selamat berkreasi! jangan lupa komentar ^_^

Selasa, 13 September 2011

Cara memasang widget I Love Indo. di blog




Untuk mebudayakan Bloger Indonesia, mari kita pasang widget I love Indonesia di blog anda.!!
ok, kalo minat silahkan cop nie code.!!


<script language="JavaScript" src="http://adabisnis.com/js/widget.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://lh6.googleusercontent.com/_9W8681AXnyo/TWS8zq3XKFI/AAAAAAAAAL8/VNes2sF4baw/iluvindonesia.png")</script>


Untuk blogspot, paste kode di atas dengan cara :
Tata letak > tambah gadget > tambahkan HTML/Javascript > Paste kode di atas di konten, tanpa judul.


sumber : http://adabisnis.com/memasang-widget-i-love-indonesia/

Senin, 02 Mei 2011

Membuat Drop Cap

Drop cap adalah tampilan tulisan seperti di koran,untuk itu kita perlu menambahkan sricpt di blog.. tpi tidak usah kawatir dengan ribet, sekarang trick yang ini sekarang beda, Dengan cara yang sudah di-"upgrade", tidak perlu lagi menambahkan kode HTML tersebut. Kamu cukup membuat post seperti biasa dan post kamu akan tampil dengan dropcap seperti di koran.



Caranya:
  1. Masuk ke account Blogger kamu, kemudian klik "Layout" - "Edit HTML",
  2. Cari kode
    .post-body {
    xxxxxxxxxx;
    xxxxxxxxxx;
    }
  3. Kemudian tambahkan di bawahnya kode
    .post-body p.dropcap:first-letter {
    font-size:3em;
    float:left;
    margin-right:5px;
    vertical-align:text-top;
    }
  4. Untuk mengatur ukuran DropCap-nya ubah font-size-nya jadi 2.5em, 2em, atau nilai-nilai yang lain, 
  5.  Kemudian cari lagi kode
    <data:post.body/>
  6. Kalau di kode tersebut tidak diapit oleh kode <p> dan </p>, tambahkan kode tersebut sehingga menjadi
    <p class='dropcap'> <data:post.body/> </p>
  7. Dan kalau kode <data:post.body/> sudah diapit oleh kode <p> dan </p>, cukup tambahkan kode class='dropcap' sehingga jadi seperti kode di atas,
  8. Klik "Save Template" kalau sudah selesai,
  9. dan sekarang semua post kamu akan terlihat seperti di koran! :D
Semoga bermanfaat, dan jangan lua koment ya...

Membuat Recent Post Khusus untuk Label

Kali ini saya akan membahas tentang cara membuat Recent Post khusus untuk sebuah label. Sebenarnya widget untuk recent post sudah saya bahas di artikel sebelumnya, widget tersebut untuk semua label, tapi bisa difilter untuk menampilkan label tertentu.
Kali ini akan benar-benar hanya menampilkan 1 label tertentu.

Caranya:
  1. Masuk ke account Blogger kamu, pilih "Layout" - "Page Elements",
  2. Tambahkan Gadget baru dengan mengklik "Add a Gadget",
  3. Pilih gadget "Feed",
  4. Kemudian pada kolom Feed URL, isi dengan:
    http://blogkamu.blogspot.com/feeds/posts/default/-/labelkamu
  5. Ganti blogkamu dengan alamat blog kamu, dan ganti juga labelkamu dengan label yang ingin kamu tampilkan.
    Ingat bahwa URL adalah case-sensitive, jadi perhatikan huruf besar-kecilnya label kamu.
  6. Klik "Continue" kalau sudah selesai.
Semoga bermanfaat! :D

Membuat Protected Post di Blogspot

Agan, sudah baca artikel saya sebelumnya, kan tentang Cheat didalam blog?? Mungkin banyak yang bertanya-tanya, untuk apa sih sebenarnya cheat di blog itu?
Awalnya saya juga membuatnya hanya untuk iseng-iseng, tidak tahu pemanfaatannya. Tapi setelah dipikir-pikir, ternyata cheat itu bisa dipakai untuk membuat protected post, yaitu post yang tidak dapat dibaca kecuali jika memasukkan cheat tersebut.
Hampir sama dengan wordpress, tapi yang ini bukan dalam bentuk password, melainkan dalam bentuk cheat.
Mau tau caranya? Silakan masukkan cheat yang sama dari Cheat didalam blog untuk membaca lanjutan artikel ini.

Minggu, 01 Mei 2011

Pasang Iklan yang melayang di blog

Floating Ads sendiri bisa menjadi sangat mengganggu pengunjung apabila pemasangannya terlalu berlebihan dan peletakkannya tidak memperhatikan segi keindahan blog. Ditambah lagi apabila floating ads menutupi artikel dan tidak disertai oleh tombol Close. Hal ini bisa mengganggu para pengunjung yang membaca artikel anda.

Disini saya akan sharing cara memasang floating ads Atau Iklan Yang Melayang di Atas Blog dengan sangat simple dan mudah.

1. Langsung saja masuk ke dasbor blogger anda.
2. Menuju ke Rancangan>Elemen Laman
3. Tambahkan sebuah gadget baru yaitu "HTML/Javascript"
4. Copy dan paste script code di bawah ini kedalam form yang muncul.

<style type="text/css">
#topbar{
position:absolute;
left:0px;
border: 0px red;
padding: 0px;
background-color: transparent;
height: 30pxwidth: 30px;
visibility: hidden;
z-index: +1000;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 5 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "fromtop"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
 barheight=document.getElementById("topbar").offsetHeight
 var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
 var d = document;
 function ml(id){
  var el=d.getElementById(id);
  if (!persistclose || persistclose && get_cookie("remainclosed")=="")
  el.style.visibility="visible"
  if(d.layers)el.style=el;
  el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
  el.x = startX;
  if (verticalpos=="fromtop")
  el.y = startY;
  else{
  el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
  el.y -= startY;
  }
  return el;
 }
 window.stayTopLeft=function(){
  if (verticalpos=="fromtop"){
  var pY = ns ? pageYOffset : iecompattest().scrollTop;
  ftlObj.y += (pY + startY - ftlObj.y)/8;
  }
  else{
  var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
  ftlObj.y += (pY - startY - ftlObj.y)/8;
  }
  ftlObj.sP(ftlObj.x, ftlObj.y);
  setTimeout("stayTopLeft()", 10);
 }
 ftlObj = ml("topbar");
 stayTopLeft();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<div class="clear"></div>
<div id="topbar">
<u style="color: blue;"><blink><b>
<div style="text-align:right">
<a style="color: black(255, 0, 0); font-weight: bold; font-style: italic;" href="" onclick="closebar(); return false"><span>CLOSE</span></a></div></b></blink></u>
Script Code Iklan Anda Disini
<left><table style="width: 700px; height: 50px;" border="0"><tbody><tr><td style="vertical-align: top;">
<center>
</center>
<p></p><p></p></td></tr></tbody></table></left></iframe></center></div>

Keterangan:

  1. Kode berwarna Merah pada script code diatas adalah ukuran iklan anda. Anda bisa sesuaikan sendiri.
  2. Kode berwarna Biru adalah posisi floating ads anda (sesuai sumbu X, dan Y)
  3. Teks CLOSE berwarna Hijau adalah teks link yang nantinya berfungsi sebagai tombol untuk menghilangkan iklan anda dari blog. Anda bisa menggantinya dengan teks lain semisal: Keluar, X, Exit, atau apapun.
  4. Angka 700 berwarna Ungu adalah luas bidang iklan anda. Anda bisa sesuaikan sendiri.
  5. Ganti tulisan Script Code Iklan Anda Disini Dengan script code iklan anda.
Simpan semua perubahan dan lihat hasilnya.

Sedikit saran dari saya adalah, jaga kenyamanan pengunjung dengan meletakkan floating ads ini pada posisi yang tepat. Anda bisa meletakkannya ditempat yang jelas tapi tidak menutupi artikel anda. Dan jangan berlebihan memasang iklan dalam floating ads ini. Selamat mencoba...

Jumat, 29 April 2011

Pasang Tombol Follow Twitter Statis Melayang di blog

 Wah,, halo sahabat bloger seIndonesia, berhubungan saya ada waktu kali ini saya akan bagi2 tips memasang button follow twitter di blog, ini berfungsi untuk meningkatkan SEO blog aagan jika masih penasaran ini saya ada SCnya : 





1. Login ke dasbor
2. Ke Edit HTML
3. Cari kode </body>, lalu masukkan kode dibawah diatas kode </body> tadi:


<!-- twitter follow badge by go2web20 -->
<script src='http://files.go2web20.net/twitterbadge/1.0/badge.js' type='text/javascript'></script><script type='text/javascript' charset='utf-8'><!--
tfb.account = 'blogdarmal';
tfb.label = 'follow-me';
tfb.color = '#35ccff';
tfb.side = 'l';
tfb.top = 136;
tfb.showbadge();
--></script>
<!-- end of twitter follow badge -->

Keterangan : code yang berwarna merah bisa dirubah seuai dgn selera agan...

 
tfb.account = isi dengan username anda di twitter
tfb.label = "Jangan dirubah"(ga perlu dirubah, biarkan saja)
tfb.color = warna tombol, bila perlu ganti sesuai keinginan
tfb.side = mau dikiri atau kanan, kanan=R . kiri= L
tfb.top = jarak tombol dari atas

4. Terakhir Save, dan Lihat hasilnya.. :)


Semalamat mencoba, dan jgn lupa komentar agan...... 

Menampilkan Total Post dan Total Komentar



Sesuai namanya, Total Posts dan Total Comments ini fungsinya untuk menampilkan jumlah seluruh posting dan komentar yang ada dalam sebuah blog.
contohnya seperti ini :
TOTAL POST

Total Posts : 59

CODE TOTAL COMMENTS


Total Comments : 66


Cara Membuatnya, silahkan anda copy script dibawah ini :
TOTAL POSTING

<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

TOTAL KOMENTAR

<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>
KETERANGAN : Warna Biru Jangan Lupa diganti dengan Alamat URL Blog ANDA 
 Sumber : http://andresahanblogku.blogspot.com/

Blogger templates