Donor Ilmu

Follow Email Pop Out Widget Blogger

donorilmu@gmail.com (Donor Ilmu) — Mon, 2 Apr 2012 17:54:00 +0700

Sebenarnya ini adalah sebuah Plugin Untuk Wordpress. Tapi sekarang tersedia untuk Blog Blogger. Widget ini adalah widget Berbasis Jquery dengan efek popout yang bagus dan halus. Anda akan mendapatkan lebih banyak pelanggan email dengan widget ini dan Sangat mudah untuk Instal di Blog Anda.

Seperti widget ini berdasarkan jQuery plugin, Pertama anda harus memiliki Plugin jQuery dalam template Blog Anda.
Langkah ini adalah Diperlukan, Jika Blog anda sudah memiliki plugin ini maka Abaikan Langkah ini.
Jika Blog Anda Tidak memiliki Plugin ini, Instal Plugin jQuery. Tambahkan baris di bawah ini sebelum kode tag </head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Langkah instal script popout masukan 2 kode berikut sebelum tag </head>
<style type="text/css"> /*<![CDATA[*/ #drilmfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;} .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);} .drilmfollowButton {background: #464646;color: #CCC !important;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;} .drilmfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisF-1mvqPUjDMZY6J4GXsoFd7otkBYuRZd0olUmAR8kQyHOX0oI76ZCJoEDNpWAD-Ac2b-jkFz0u0-eAzI33TySwxcerby3a6JM2gR8O98zzc5s3YbLMYOXOMZJJNBvLlgC8TtTFX9_F8G/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;} .drilmfollowButton:hover,.followActive {color: #fff !important;} .drilmfollowButton:hover span,.followActive span {background-position: 0 -37px !important;} .followactive {background-color: #333;} .drilmfollowForm {padding: 15px;} .drilmfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;} .drilmfollowForm p {margin: 0 0 10px;} .drilmfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;} .drilmfollowForm form {text-align: center;} .drilmfollowForm .emailInput:focus {color: #000;border-color: #000;} .drilmfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;} .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;} .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;} .drilmFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;} .drilmFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;} .drilmFollowFooter a:hover {color: #fff;background: none;} /*]]>*/ </style> <script type="text/javascript"> /*<![CDATA[*/ ;(function(drilm){drilm(document).ready(function(){drilm.extend(drilm.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=drilm("#drilmfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);drilm(".drilmfollowButton").click(function(e){if(followBox.hasClass("followOpened")){drilm(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{drilm(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery); /*]]>*/ </script>
<div id="drilmfollowSubscribe" style="display:none;">
    <div class="drilmfollowForm">
        <a class="drilmfollowButton" href="#" title="Follow"><span>Follow</span></a>
        <h3>Follow "<data:blog.title/>"</h3>
        <p>Post gratis Instan langsung masuk ke kotak Email</p>
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=donorilmu', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type="text" class="emailInput" name="email" placeholder="Enter Email Anda..."/>
            <input type="hidden" value="DonorIlmu" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input type="submit" value="Berlanggan" class="emailSubmit"/>
        </form>
        <p class="drilmFollowFooter">
            <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
        </p>
    </div>
</div>
Teks yang berwarna biru anda ganti dengan ID Feedburner anda.
Selanjutnya klik Simpan Template

Kostum 404 Error Pages Untuk Blogger

donorilmu@gmail.com (Donor Ilmu) — Mon, 2 Apr 2012 16:49:00 +0700

Selamat tinggal! Blogger default Error/404 Page yang lama :)
Sekarang Blogger Memberikan Custom Error/404 Not Found Page untuk Blog anda. Pesan Error/404 yang biasanya terlihat di Bar Pesan Status pada Blog yang bisa anda edit dengan style semau anda. Anda dapat menambahkan juga Kustom Error/404 pesan dengan tag HTML atau Bahkan Gambar.

Sesudah

Sebelum

Cara mengubah pesan ini ke sesuatu yang lain dapat di ubah dari Pengaturan Blogger.

Pilihan ini ada di Setelan › Preferensi penelusuran › Pesan Ubahsuaian untuk Laman Tidak Ditemukan masukan script berikut
(anda bisa merubah kata tersebut sesuai selera anda)
<b>404. </b><ins>Oops! Kesalahan.</ins><br/><br/>
URL yang diminta<code>/bks</code> tidak ditemukan di server ini. <br/>
<ins>Itu saja yang kami tahu.</ins>
Klik Simpan Perubahan
Langkah selanjutnya anda pergi ke Template › Edit HTML masukan kode CSS berikut taruh sebelum kode </head>
<b:if cond='data:blog.pageType == "error_page"'> <style type="text/css"> .status-msg-wrap{ background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiciLOkQ5uZJt2kFR9BdFOUtKi5S9tdQEHsuns5ZXhjXZE-taxE4vdOZeJekCP5DzkLLPTjHaywee0euJFYXfQS9_S6IZfZlx5QEcv1l4GCKRkBqRJaHh18p5JC2PzWafDUr7jsHcGpjRw/s1600/404-error.png) no-repeat right; font-size:110%; width:90%; margin:10px auto; position:relative; height: 220px; } .status-msg-border{display:none;} .status-msg-body{ text-align:left; padding:.3em 0; width:100%; position:static; z-index:4 } </style> </b:if>
Jika anda mahir dalam CSS makah akan membuat lebih baik tampilanya
Mengganti Judul Halaman Kesalahan
Secara default judul Page Kesalahan Blogger adalah Judul Blog Anda. Jika Anda ingin mengubahnya ke sesuatu yang lain, Anda dapat Mengedit template Anda dan mengubah kode berikut
<title><data:blog.pageTitle/></title>
Anda ganti dengan kode dibawah ini
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found</title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
</b:if>
Terakir Simpan Template

Seperti yang saya selalu katakan, jika Anda mendapatkan dalam kesulitan, Anda dapat menggunakan formulir komentar, Kontak atau kita Wall Facebook :)

Meta Tag Deskripsi di Blogger

donorilmu@gmail.com (Donor Ilmu) — Tue, 27 Mar 2012 21:07:00 +0700

Blogger telah meluncurkan berbagai fitur SEO dan sekarang menambahkan Meta Tag telah menjadi begitu mudah. Anda dapat melakukannya dengan mudah dari User Interface Blogger tanpa melakukan banyak Mengedit Template atau menarik rambut Anda smpek rontok. Jadi di sini akan dijelaskan cara bagaimana melakukannya.

Buka Setelan › Preferensi penelusuran dan Aktifkan Meta Tag. Di daerah Teks berjumlah 150 karakter berikan gambaran yang akan menggambarkan Blog Anda. Teks ini dapat digunakan oleh Search engine saat halaman home Blog Anda ditampilkan pada Search Engine. Berikut adalah potongan yang telah saya berikan pada blog ini
"Tutorial belajar SEO, Themes dan Template Blog, Membuat Web Situs Wordpress dan Blogger Tutorial dari Donor Ilmu."
Sekarang ketika Anda membuat Posting, Anda dapat mengatur Meta Description dari Sidebar Setelan entri.
Sekarang Anda harus menambahkan beberapa kode untuk Template Blogger Anda. Untuk melakukan itu Masuk ke Template dan Lanjutkan ke Edit HTML Cari <head> dan. Bawahnya sisipkan potongan berikut.
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
Lalu Simpan Template

Download Template Pocong Oom

donorilmu@gmail.com (Donor Ilmu) — Tue, 27 Mar 2012 21:04:00 +0700

Lama saya tidak berbagi template gratis, bisa di bilang template kali ini namanya sangat unik yang identik dengan warna putih yaitu Pocong Oom. Kono katanya template ini mendatangkan vistor dari berbagai mesin pencari.

Yaa! walaaupun template ini sedikit mirip dengan o-om.com (style new) tapi kalau masalah kecepatan saya rasa lebih cepat template Pocong Oom ini, dan bukan itu saja selain berkecepatan tinggi template Pocong Oom ini juga mengunakan fitur Komentar Threaded yang lagi tren sekarang. Berikut demo dan downloadnya

Fitur Template Pocong Oom

Ads Google Adsense Siap
Mesin Pencari CSE
Komentra Threaded
Emotion Onion
Laman Blank
Tombol Share
Auto Post Ringan
Kotak Berlangganan

NB: Jika ada yang ingin dipertanyakan silakan ajukan komentar anda. sebagai kehormatan mendownload mohon pasang bener saya di blog anda

JumpLink Post Tanpa JavaScript

donorilmu@gmail.com (Donor Ilmu) — Fri, 10 Feb 2012 12:14:00 +0700

Jump Link / Read More Tanpa JavaScript

Tentu Anda tahu script read more otomatis bukan? Sejauh ini, kami menggunakan otomatis readmore dilengkapi dengan java script. Jadi, read more yang ber java script tentu saja membuat sedikit pengaruh pada halaman loading blog Anda. Nah sekarang, ada trik blogger baru untuk desain blog Anda, bagaimana membuat ringkasan posting dengan thumbnail tanpa java script. Trik ini saya pelajari dari hasil surfing saya di internet. Karena trik ini hanya menggunakan murni seratus persen kode HMTL dengan sedikit sentuhan css yang dapat mengurangi beban pada halaman blog. Saya akan memberitahu Anda bagaimana cara menggunakannya trik tersebut.

Login di Blogger.com pergi ke Template/Rancangan > Edit HTML (Expand Template Widget)
Cari kode berikut (biar cepat dalam mencari tekan Ctrl+F)
<data:post.body/>
Ganti kode tesebut dengan kode dibawah ini
    <b:if cond='data:blog.pageType == "static_page"'>
            <data:post.body/>
      <b:else/>
      <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:post.snippet'>
          <b:if cond='data:post.thumbnailUrl'>
              <div class='Image thumb'>
                <img expr:src='data:post.thumbnailUrl'/>
              </div>
          </b:if>
            <data:post.snippet/>
    <b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
      <div class='jump-link' style='float:right'>
        <a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>
          <b:else/>
            <data:post.body/>
          </b:if>
      <b:else/>
      <data:post.body/>
      </b:if>
    </b:if>
Langkah berikutnya, Anda perlu menambahkan beberapa kode CSS, yang ditempatkan di atas atau sebelum kode ]]></ b: skin>

.thumb img {
float: left;
margin: 0 10px 10px 0;
}
Terahkir Klik Save Template

Emoticon Untuk Komentar Threaded Blogger

donorilmu@gmail.com (Donor Ilmu) — Mon, 6 Feb 2012 16:19:00 +0700

Emoticon Komentar Threaded

Memang benar berkomentar di sebuah blog tanpa ada expresi diantara sebuah kata membuat komentar seperti tidak hidup pada sebuah blog. Dengan munculnya fitur komentar threaded baru di Blogger maka tutorial kali ini akan membahas bagaimana cara memasukan emoticon pada komentar threaded. Berikut dua emoticon yang bisa di tampilkan pada komentar threaded pada blog Anda.

Emoticon Yahoo

Emoticon Onion (Kucing)

Login ke Blogger.com, pergi ke Template > Edit HTML
Contreng Expand Template Widget, cari kode </body> (biar cepat mencarinya tekan Ctrl+F) masukan kode berikut letakkan diatas kode </body>

Emoticon Yahoo

<b:if cond='data:blog.pageType == "item"'>
<script src='http://donor-ilmu.googlecode.com/files/emoticon.js' type='text/javascript'/>
</b:if>
Emoticon Onion (Kucing)

<b:if cond='data:blog.pageType == "item"'>
<script src='http://donor-ilmu.googlecode.com/files/emoticon2.js' type='text/javascript'/>
</b:if>
Pilih salah satu saja dari kedua script js Emoticon tersebut,
Selanjutnya cari kode
<b:include data='post' name='threaded-comment-form'/>
Jika sudah menemukan taruh kode berikut tepat diatasnya.

Emoticon Yahoo
<div style='width:550px;text-align: center;border: 1px solid #ccc;padding: 2px 2px;margin-top: 15px;font-style:bold;color:#000;font-weight:normal;font-size:10px;'> <b> <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/>:)) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/>;)) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/>;;) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/>:D <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/>;) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/>:p <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/>:(( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/>:) <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/>:( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/>:X <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/>=(( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/>:-o <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/>:-/ <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/>:-* <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/>:| <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/>8-} <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/>:)] <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/>~x( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/>:-t <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/>b-( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/>:-L <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/>x( <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/112.gif' width='28'/>:-p <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/>=)) </b> </div>
Emoticon Onion (Kucing)
<div style='width:550px;text-align: center;border: 1px solid #ccc;padding: 2px 2px;margin-top: 15px;font-style:bold;color:#000;font-weight:normal;font-size:10px;'> <b><img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/70bff581.gif' width='30'/>:)) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/069.gif' width='30'/>;)) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_104_.gif' width='30'/>;;) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_113_.gif' width='30'/>:D <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4412144b.gif' width='30'/>;) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_101_.gif' width='30'/>:p <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/33c4b951.gif' width='30'/>:(( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_059_.gif' width='30'/>:) <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/875328cc.gif' width='30'/>:( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/6f428754.gif' width='30'/>:X <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_087_.gif' width='30'/>=(( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/e111de78.gif' width='30'/>:-o <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/efb50fe2.gif' width='30'/>:-/ <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_106_.gif' width='30'/>:-* <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/023.gif' width='30'/>:| <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/5c745924.gif' width='30'/>8-} <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/037.gif' width='31'/>:)] <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/042.gif' width='30'/>~x( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/87a4e689.gif' width='30'/>:-t <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/047352f3.gif' width='30'/>b-( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/th_116_.gif' width='30'/>:-L <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/4d6161fd.gif' width='30'/>x( <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/d5f02ecd.gif' width='30'/>:-p <img border='0' height='30' src='http://www.cute-factor.com/images/smilies/onion/071.gif' width='30'/>=)) </b> </div>

Langkah terakhir Klik Save Template

Style Komentar Threaded

donorilmu@gmail.com (Donor Ilmu) — Mon, 6 Feb 2012 11:51:00 +0700

Baru kemarin kami berbagi tutorial dan berbagi informasi pada fitur Blogger paling ditunggu-tunggu yaitu sistem komentar threaded (Nested). Hampir 75% dari pengguna blogger lebih suka menggunakan template tidak rasmi dan karena fitur ini tidak bisa begitu saja dilawan, oleh karena itu kita perlu beberapa waktu untuk mengeditnya dengan aman dan menerapkan semua kode yang dibutuhkan untuk membuat fitur ini berfungsi dengan benar. Tutorial di bawah ini adalah cara termudah untuk menambah gaya komentar threaded ke blog blogger Anda. Berikut Screnshot komentar threaded yang akan kita rubah menjadi seperti ini

Screnshot di ambil dari blog DonorIlmu

Login di Blogger.com pergi ke Design/Rancangan > Edit HTML Backup template anda terlebih dahulu selanjutnya Klik "Expand Widget Templates"
Template Anda akan mencakup kode CSS berikut secara otomatis yang dimasukkan oleh blogger.
<b:includable id='threaded_comment_css'>
<style>
.comments {
clear: both;
margin-top: 10px;
margin-bottom: 0px;
line-height: 1em;
}
.comments .comments-content {
font-size: 13px;
margin-bottom: 16px;
}
.comments .comment .comment-actions a {
padding-top: 5px;
padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
list-style-type: none;
padding: 0;
text-align: left;
}
.comments .comments-content .inline-thread {
padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
display: none;
}
.comments .comments-content .comment-replies {
margin-top: 1em;
margin-left: 36px;
}
.comments .comments-content .comment {
margin-bottom:16px;
padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
padding-top:16px;
}
.comments .comments-content .comment:last-child {
border-bottom:0;
padding-bottom:0;
}
.comments .comments-content .comment-body {
position:relative;
}
.comments .comments-content .user {
font-style:normal;
font-weight:bold;
}
.comments .comments-content .icon.blog-author {
width: 18px;
height: 18px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
margin:0 0 8px;
}
.comments .comments-content .comment-content {
text-align:justify;
}
.comments .comments-content .owner-actions {
position:absolute;
right:0;
top:0;
}
.comments .comments-replybox {
border: none;
height: 250px;
width: 100%;
}
.comments .comment-replybox-single {
margin-top: 5px;
margin-left: 48px;
}
.comments .comment-replybox-thread {
margin-top: 5px;
}
.comments .comments-content .loadmore a {
display: block;
padding: 10px 16px;
text-align: center;
}
.comments .thread-toggle {
cursor: pointer;
display: inline-block;
}
.comments .continue {
cursor: pointer;
}
.comments .continue a {
display: block;
padding: 0.5em;
font-weight: bold;
}
.comments .comments-content .loadmore {
cursor: pointer;
max-height: 3em;
margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
max-height: 0px;
opacity: 0;
overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
display: none;
}
.comments .thread-toggle {
display: inline-block;
}
.comments .thread-toggle .thread-arrow {
display: inline-block;
height: 6px;
width: 7px;
overflow: visible;
margin: 0.3em;
padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: 36px;
max-height: 36px;
overflow: hidden;
}
.comments .avatar-image-container img {
width: 36px;
}
.comments .comment-block {
margin-left: 48px;
position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
.comments .comments-content .comment-replies {
margin-left: 0;
}
}
</style>
</b:includable>
Nah kode tersebutlah yang akan kita ganti dengan kode berikut
<b:includable id='threaded_comment_css'> <style> .comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em; } .comments .comments-content { font-size: 13px; margin-bottom: 16px; } .comments .comment .comment-actions a { float:right; display: inline-block; margin-left: 5px; padding: 1px 6px; border-right: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; behavior: url(http://fetchak.com/ie-css3/ie-css3.htc); } .comments .comment .comment-actions a:hover { text-decoration: none !important;; background: #ccc;; background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));; background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);; text-decoration: underline; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; } .comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: left; } .comments .comments-content .inline-thread { padding: 0.5em 1em; } .comments .comments-content .comment-thread { margin: 8px 0px; } .comments .comments-content .comment-thread:empty { display: none; } .comments .comments-content .comment-replies { margin-top: 1em; margin-left: 36px; } .comments .comments-content .comment { margin-bottom:16px; padding-bottom:8px; } .comments .comments-content .comment:first-child { padding-top:16px; } .comments .comments-content .comment:last-child { border-bottom:1px dashed #ccc; padding-bottom:0; } .comments .comments-content .comment-body { position:relative; } .comments .comments-content .user { font-size: 14px; color: #666666 !important; text-decoration:none; } .comments .comments-content .icon.blog-author { background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==); } .comments .comments-content .datetime { font-size: 10px; color: #999; text-decoration:none; } .comments .comments-content .datetime a { float:right; } .comments .comments-content .comment-header { margin:0 0 8px; border: thin solid #E6E6E6; background-color: #dff0fa; padding: 5px; } .comments .comments-content .comment-content { margin:0 0 8px; padding: 5px; border: thin solid #E6E6E6; background-color: #F4F4F4; line-height: 21px; } .comments .comments-content .comment-content { text-align:justify; } .comments .comments-content .owner-actions { position:absolute; right:0; top:0; } .comments .comments-replybox { border: none; height: 250px; width: 100%; } .comments .comment-replybox-single { margin-top: 5px; margin-left: 48px; } .comments .comment-replybox-thread { margin-top: 5px; } .comments .comments-content .loadmore a { display: block; padding: 10px 16px; text-align: center; } .comments .thread-toggle { cursor: pointer; display: inline-block; } .comments .continue { cursor: pointer; border: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; behavior: url(http://fetchak.com/ie-css3/ie-css3.htc); } .comments .continue a { display: block; padding: 0.5em; font-weight: bold; } .comments .continue a:hover { text-decoration: none !important;; background: #ccc;; background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));; background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);; } .comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em; } .comments .comments-content .loadmore.loaded { max-height: 0px; opacity: 0; overflow: hidden; } .comments .thread-chrome.thread-collapsed { display: none; } .comments .thread-toggle { display: inline-block; } .comments .thread-toggle .thread-arrow { display: inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px; } .comments .thread-expanded .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent; } .comments .thread-collapsed .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent; } .comments .avatar-image-container { float: left; width: 36px; max-height: 36px; overflow: hidden; border: 1px solid #DDD; padding:2px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; behavior: url(http://fetchak.com/ie-css3/ie-css3.htc); } .comments .avatar-image-container img { width: 36px; } .comments .comment-block { margin-left: 48px; position: relative; padding: 10px 10px 0px 10px; background: #fcfcfc; border: 1px solid #E4E4E4; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(http://fetchak.com/ie-css3/ie-css3.htc); }/* Responsive styles. */ @media screen and (max-device-width: 480px) { .comments .comments-content .comment-replies { margin-left: 0; } }</style> </b:includable>
Jika anda tidak menemukan kode CSS tersebut maka anda bisa menambahkan kode css berikut yang akan di letakan di bawah ]]></b:skin>
<style> .comments { clear: both; margin-top: 10px; margin-bottom: 0px; line-height: 1em; } .comments .comments-content { font-size: 13px; margin-bottom: 16px; } .comments .comment .comment-actions a { float:right; display: inline-block; margin-left: 5px; padding: 1px 6px; border-right: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; behavior: url(http://fetchak.com/ie-css3/ie-css3.htc); } .comments .comment .comment-actions a:hover { text-decoration: none !important;; background: #ccc;; background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));; background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);; text-decoration: underline; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; border-top-left-radius: 15px; border-top-right-radius: 15px; } .comments .comments-content .comment-thread ol { list-style-type: none; padding: 0; text-align: left; } .comments .comments-content .inline-thread { padding: 0.5em 1em; } .comments .comments-content .comment-thread { margin: 8px 0px; } .comments .comments-content .comment-thread:empty { display: none; } .comments .comments-content .comment-replies { margin-top: 1em; margin-left: 36px; } .comments .comments-content .comment { margin-bottom:16px; padding-bottom:8px; } .comments .comments-content .comment:first-child { padding-top:16px; } .comments .comments-content .comment:last-child { border-bottom:1px dashed #ccc; padding-bottom:0; } .comments .comments-content .comment-body { position:relative; } .comments .comments-content .user { font-size: 14px; color: #666666 !important; text-decoration:none; } .comments .comments-content .icon.blog-author { background-repeat: no-repeat; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==); } .comments .comments-content .datetime { font-size: 10px; color: #999; text-decoration:none; } .comments .comments-content .datetime a { float:right; } .comments .comments-content .comment-header { margin:0 0 8px; border: thin solid #E6E6E6; background-color: #dff0fa; padding: 5px; } .comments .comments-content .comment-content { margin:0 0 8px; padding: 5px; border: thin solid #E6E6E6; background-color: #F4F4F4; line-height: 21px; } .comments .comments-content .comment-content { text-align:justify; } .comments .comments-content .owner-actions { position:absolute; right:0; top:0; } .comments .comments-replybox { border: none; height: 250px; width: 100%; } .comments .comment-replybox-single { margin-top: 5px; margin-left: 48px; } .comments .comment-replybox-thread { margin-top: 5px; } .comments .comments-content .loadmore a { display: block; padding: 10px 16px; text-align: center; } .comments .thread-toggle { cursor: pointer; display: inline-block; } .comments .continue { cursor: pointer; border: 1px solid #C4C4C4; border-top-color: #E4E4E4; border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; behavior: url(http://fetchak.com/ie-css3/ie-css3.htc); } .comments .continue a { display: block; padding: 0.5em; font-weight: bold; } .comments .continue a:hover { text-decoration: none !important;; background: #ccc;; background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));; background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);; } .comments .comments-content .loadmore { cursor: pointer; max-height: 3em; margin-top: 3em; } .comments .comments-content .loadmore.loaded { max-height: 0px; opacity: 0; overflow: hidden; } .comments .thread-chrome.thread-collapsed { display: none; } .comments .thread-toggle { display: inline-block; } .comments .thread-toggle .thread-arrow { display: inline-block; height: 6px; width: 7px; overflow: visible; margin: 0.3em; padding-right: 4px; } .comments .thread-expanded .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent; } .comments .thread-collapsed .thread-arrow { background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAA DEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent; } .comments .avatar-image-container { float: left; width: 36px; max-height: 36px; overflow: hidden; border: 1px solid #DDD; padding:2px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; behavior: url(http://fetchak.com/ie-css3/ie-css3.htc); } .comments .avatar-image-container img { width: 36px; } .comments .comment-block { margin-left: 48px; position: relative; padding: 10px 10px 0px 10px; background: #fcfcfc; border: 1px solid #E4E4E4; overflow: hidden; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; behavior: url(http://fetchak.com/ie-css3/ie-css3.htc); }/* Responsive styles. */ @media screen and (max-device-width: 480px) { .comments .comments-content .comment-replies { margin-left: 0; } } </style>
Langkah terakhir klik Save Template

Bungkus Sepenuhnya Script CSS

donorilmu@gmail.com (Donor Ilmu) — Wed, 25 Jan 2012 10:06:00 +0700

Kompres CSS

Terkejut saya saat open source di sebuah blog dengan platfrom dari blogger. Script CSS nya menghilang? Awala pertama memang sedikit bingung, mungkin kalau di teliti lagi sebenarnya tidak menghilang melainkan diringkas menjadi sebuah link yang ber file (dotCSS) yang akan di pangill dalam sebuah HTML. Seperti di blog saya ini script CSSnya tidak keluar, melainkan saya buat pemangilan link file CSS dalam sebuah HTML. Jika anda ingin membuat pemangilan file CSS ini dalam template anda, Saya sarankan agar anda memback up template anda terlebih dahulu.

Login ke Blogger.com Pergi ke Rancangan/Template > Edit HTML
Potong (Cut) script CSS diantara tengah-tengah kode berikut
<b:skin><![CDATA[ script css (cut) ]]></b:skin>
Paste script tersebut dalam sebuah notpad dan simpan dengan nama style.css (selain nama style juga tidak apa-apa asalkan ada .css)
Upload file style.css tersebut dalam sebuah hosting. Jika anda tidak mempunyai sebuah hosting anda bisa mengunakan Google Sites sebagai hosting anda. klik berikut untuk cara Membuat Hosting Dari Google Site
Setelah anda upload tahap selanjutnya membuat script pemanggil, masi pada halaman Edit HTML
anda ganti kode <b:skin><![CDATA[ ]]></b:skin> dengan kode dibawah ini
<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
<b:if cond='data:blog.pageType == "static_page"'>
<b:skin><![CDATA[ ]]></b:skin>
</b:if>
Teks yang berwana biru anda ganti dengan URL file CSS yang anda copy dari file hosting anda.
Terakir klik Save Template dan lihat pada blog anda apakah script CSSnya sudah menghilang pada open source.

Bagi anda yang mempunyai 2 atau lebih script CSS yang berbeda dan hanya berfungsi pada saat di halaman tertentu MISALNYA seperti kode di bawah ini yang berfungsi hanya di halaman post

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
SCRIPT CSS (cut)
</style>
</b:if>

Cara membungkusnya cukup sederhana ikuti langkah 1-4 dan setelah selesai proses 1-4 sampai proses upload anda ganti kode

<style type='text/css'>
</style>

Dengan kode

<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>

Sehinga menjadi seperti ini

<b:if cond='data:blog.pageType == "item"'>
<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
</b:if>

Teks yang berwana biru anda ganti dengan URL file CSS yang anda copy dari file hosting anda.

Komentar Threaded Untuk Blogger

donorilmu@gmail.com (Donor Ilmu) — Tue, 24 Jan 2012 20:47:00 +0700

Blogger baru saja mengumumkan fitur komentar terbaru yang banyak ditunggu-tunggu "Komentar Threaded Untuk Blogger" dan Anda mungkin telah melihatnya di Blog Anda jika Anda menggunakan Template standar blogger. Jika Anda menggunakan template kustom Anda sendiri, maka Anda akan harus men-tweak template Anda agar komentar threaded muncul. Berikut tampilan Komentar Threaded yang akan terlihat seperti ini

(Screen shot diambil bentuk Blogger Buzz Blog Resmi)

Cara mendapatkan Komentar Threaded?

Pastikan bahwa Anda telah mengaktifkan Feed Komentar
Jika sekarang Anda tidak melihat Komentar Threaded, maka itu berarti bahwa Anda memiliki template yang disesuaikan. Ada berbagai metode untuk memperbaiki hal ini. Namun sebelum melakukan salah satu dari cara ini, alangkah baiknya anda men-download template Anda terlebih dahulu.
Cari kode berikut
<b:include data='post' name='comments'/>
dan ganti dengan kode ini

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
Sekarang Anda mungkin akan melihat tampilan threaded di blog Anda. Jika itu juga tidak membantu. slika kan tingalkan komentar di sini dan kami akan mencoba untuk debug itu bersama-sama :-) Setelah Anda mengaktifkan komentar Threaded , blog Anda akan secara default menampilkan 200 komentar tertua, dan Anda akan melihat link beban lebih yang akan membantu pembaca dalam melihat sisa komentar.

Upload File Di Google Site

donorilmu@gmail.com (Donor Ilmu) — Tue, 24 Jan 2012 16:38:00 +0700

Upload File

Terkadang bingung harus bagaimana dan dimana meng Upload sebuah file seperti CSS, JS, Text dll. Karena memang blog membutukan tempat Upload file, supaya blog tidak membengkak karena adanya kapasitas ukuran (size) maka bisa mempengaruhi besarnya halaman. Untuk itu sebuah Blog dari Blogger tidak lah perlu bingung untuk Upload sebuah file tersebut karena Google Site menyediakan itu semua. Berikut ini adalah langkah-langkah cara membuat google site, upload file, download, dan menggunakan filenya.

Buka Google Site login dengan aku google atau gmail anda jikalau belum punya anda bisa daftar telebih dahulu.
Klik CREATE dan isi semua data tesebut lalu klik CREATE SITE
Membuat halaman tempat file klik New Page yang terletak di kanan atas. Selanjutnya masukan Name Page dan pada Select a template to use anda pilih File Cabinet lalu klik CREATE
Proses selanjutnya meng Upload sebuah file, klik Add File pilih file yang akan di Upload setelah itu klik UPLOAD
Peroses pengupload pun sudah selesai maka sekarang proses cara mengunakan file tersebut kedalam blog anda. disini saya punya 2 kode HTML untuk CSS dan JS yang akan berfungsi memangil file tersebut.

CSS
<link href='URL-FILE-CSS' rel='stylesheet' type='text/css'/>
Java Script
<script src='URL-FILE-CSS' type='text/javascript'/>
Ganti teks yang berwarana biru dengan URL file yang sudah anda upload tadi dengan cara klik kanan pada tulisan Download dan anda pilih opsi Copy Link Location lalu paste. Maka akan menjadi seperti ini

CSS

<link href='https://sites.google.com/site/donorilmu/file/style.css?attredirects=0&d=1' rel='stylesheet' type='text/css'/>

Java Script

<script src='https://sites.google.com/site/donorilmu/file/slide.js?attredirects=0&d=1' type='text/javascript'/>

Pada teks yang berwana merah harus anda hapus. Terakir sekarang bisa anda pergunakan script tersebut pada template anda. SEKIAN

Rekomendasi Slide Out Untuk Blogger

donorilmu@gmail.com (Donor Ilmu) — Tue, 3 Jan 2012 13:56:00 +0700

Rekomendasi Slide

Saya sering melihat Rekomendasi Slide Out di wordpress, banyak juga meraka para fans blog wordpress yang mengunakan plugin ini. Selain para pengujung dapat dengan mudanya menjangkau post blog anda dengan fitur Rekomendasi Post Slide ini. Widget ini juga akan otomatis keluar pada saat anda mengulir kebawah post anda. Saya juga telah membuat beberapa modifikasi potongan sehingga akan dimuat asynchronous tanpa mempengaruhi beban halaman. Pada keluar Slide akan menampilkan posting secara acak dari Blog Anda dan tulisan acak yang akan diambil dari Feed Blog Anda dengan menggunakan Ajax.Demo

Untuk menambahkan widget ke blog Anda, Anda dapat menggunakan installer dibawah ini dengan satu klik.
<div id="bpslidein" style="display:none;"> <div class="help">?</div><div class="expand">+</div> <div class="close">X</div> <p>Direkomendasikan untuk Anda</p> <div id="bpslidein_image"></div> <div id="bpslidein_title">Loading..</div> </div> <script> if(document.location.href.split("/").length==6&&document.location.href.indexOf(".html")!=-1){if(typeof bp_onload_queue=='undefined')var bp_onload_queue=[];if(typeof bp_dom_loaded=='boolean')bp_dom_loaded=false;else var bp_dom_loaded=false;if(typeof bp_async_loader!='function'){function bp_async_loader(src,callback,id){var script=document.createElement('script');script.type="text/javascript";script.async=true;script.src=src;script.id=id;var previous_script=document.getElementById(id);if(previous_script)if(previous_script.readyState=="loaded"||previous_script.readyState=="complete"){callback();return}else{script=previous_script}if(script.onload!=null)previous_callback=script.onload;script.onload=script.onreadystatechange=function(){var newcallback;if(previous_script&&previous_callback)newcallback=function(){previous_callback();callback()};else newcallback=callback;if(bp_dom_loaded){newcallback()}else bp_onload_queue.push(newcallback);script.onload=null;script.onreadystatechange=null};var head=document.getElementsByTagName('head')[0];if(!previous_script)head.appendChild(script)}}if(typeof bp_domLoaded!='function')function bp_domLoaded(callback){bp_dom_loaded=true;var len=bp_onload_queue.length;for(var i=0;i<len;i++){bp_onload_queue[i]()}}bp_domLoaded();bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js",function(){bp_async_loader("http://donor-ilmu.googlecode.com/files/rekomendasi-slide.js",function(){},"bp-out-slide")},"jQueryjs")} </script> <a href="http://donorilmu.blogspot.com/2012/01/rekomendasi-slide-out-untuk-blogger.html" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9w4f42KfxRruLGZoQsX7cFuz9obLjQF7ts4nfhvP_aup-ILxuE_jt45PfpR6PB1Cnw8LhSuXnfwvRRXMh_A99aQEsXWKLAMjXZO0XY4uFSAVxfv5CxfPikgYLgya0_scZ59qS2N2oNyo/I/bloggerplugins.png" alt="Rekomendasi Slide Out Untuk Blogger" /></a>
Menyesuaikan Slide Fitur keluar
End Of Post marker - Slide keluar ketika gulungan pengguna ke sebuah titik tertentu di Blog Anda (bagian bawah halaman secara default) Untuk menandai titik ini, Anda dapat menambahkan elemen HTML di sana. Elemen harus memiliki id bpslidein_place_holder

misalnya: <div id='bpslidein_place_holder'></div> elemen yang akan melakukan pekerjaan. Tempat terbaik untuk menambahkan penanda ini akan berada di akhir posting. Jika Anda ingin melakukannya dengan mudah, Anda dapat menambahkan ini ke template Blogger Anda.

Dalam template Anda Cari kode di bawah ini, (expand the Widget Templates)
<div class='post-footer-line post-footer-line-1'>
atau

<data:post.body/>
Masukan kode dibawah ini letakan di bawah kode yang anda temukan dari kode di atas

<b:if cond='data:blog.pageType == "item"'>
<div style='display:none' id='bpslidein_place_holder'></div>
</b:if>
Klik Simpan Template
Menyesuaikan tampilan dan nuansa dari out Slide
Jelas bisa gaya Slide Fitur Anda pada saat keluar. Tapi sebelum Anda melakukannya, Anda harus menambahkan definisi variabel ke template Anda
<script>var bpslidein_custom_css=true;</script>
Ini harus ditambahkan di suatu tempat di atas kode </head>.
Setelah variabel ini diatur dengan benar, Anda dapat menambahkan definisi CSS sendiri. Anda dapat menambahkan CSS Anda di Perancang Template > Tingkat Lanjut > Tambah CSS

Dan ini adalah Kode set standar definisi Gaya yang diterapkan pada Widget tersebut. Anda dapat memodifikasi mereka dan menggunakannya.
#bpslidein{z-index:5;width:400px;height:100px;padding:10px;background-color:#fff;border-top:3px solid #1616F5;position:fixed;right:-430px;bottom:0;-moz-box-shadow:-2px 0 5px #aaa;-webkit-box-shadow:-2px 0 5px #aaa;box-shadow:-2px 0 5px #aaa;font-family:Arial, Helvetica, sans-serif;} #bpslidein p{font-size:11px;text-transform:uppercase;font-family:Arial,Helvetica,sans-serif;letter-spacing:1px;color:#555;} #bpslidein_title{color:#555;font-weight:700;font-size:16px;margin:10px 20px 10px 0;} #bpslidein a,#bpslidein a:hover,#bpslidein_title{text-decoration:none;color:#1616F5;} #bpslidein .close,#bpslidein .expand,#bpslidein .help{border:2px solid #EEE;cursor:pointer;color:#9A9AA1;width:13px;height:15px;padding:2px 0 0 5px;position:absolute;right:10px;font-size:17px;font-weight:700;font-family:Arial, Helvetica, sans-serif;font-size:12px;} #bpslidein .help{right:35px;} #bpslidein_title,#bpslidein_image{float:left;width:80px;} #bpslidein_title{width:290px;}
Klik Terapkan ke Blog

Download Template Zoom Gallery

donorilmu@gmail.com (Donor Ilmu) — Mon, 12 Dec 2011 12:40:00 +0700

Zoom Gallery

Banyak sekali para bloging mencari template gallery seperti Zoom Template dan Theme4all, Tapi mereka sulit menemukan link downloadnya. Bahkan ada juga yang memperjualbelikan template seperti itu. Memang template Theme4all berbayar tapi sebenarnya template kali ini yang saya sahre bukan Zoom Template New atau Theme4all melainkan versi Situs Template yang kesanya mirip dengan Zoom Template dan Theme4all. Template ini cocok buat anda yang suka sahre Template dan Photo

Posting
dalam script posting template yang harus diterapka code di Edit HTML bukan di ~~Compose~~ anda masukan code dibawah ini. Dan jangan lupa untuk menyeting pemutusan baris Post anda pada Post Options > Gunakan tag <br/>.
<p align="center" > <div class="badge sblogger"></div> <img class="latest_img" src="LINK IMAGE" width="320" height="240"/> </p> <div class="fullpost"> <ul class="postbuttons"> <li><a rel="nofollow" target="_blank" class="livedemo" href="LINK DEMO">Live Demo</a> </li> <li><a rel="nofollow" target="_blank" class="download" href="LINK DOWNLOAD">Download Theme</a></li> </ul> <div class="Table-Post"> <table cellpadding="0" cellspacing="0" class="Table-Post2" width="58%" id="AutoNumber1" height="150"> <tr> <td width="76%" class="Table-Post2" height="25" colspan="2"> <div style="font-size: 17pt; font-weight: bold; padding-bottom: 8px; line-height: 32px; color: rgb(64, 64, 59);">TEMPLATE FEATURES</div> </td> </tr> <tr> <td width="20%" class="Table-Post2" height="25"> Platform Type</td> <td width="56%" class="Table-Post2" height="25">Blogger / Blogspot</td> </tr> <tr> <td width="20%" class="Table-Post2" height="25"> Template Name</td> <td width="56%" class="Table-Post2" height="25"> <b>NAMA TEMPLATE</b></td> </tr> <tr> <td width="20%" class="Table-Post2" height="25"> <span class="cut"> </span>Instructions URL</td> <td width="56%" class="Table-Post2" height="25"> <a rel="nofollow" target="_blank" href="http://NAMABLOG.blogspot.com/2008/09/faqs.html">How to install Blogger Template</a></td> </tr> <tr> <td width="20%" class="Table-Post2" height="25"> Template Author</td> <td width="56%" class="Table-Post2" height="25"> <a rel="nofollow" href="http://NAMABLOG.bogspot.com/search?q=NAMA">NAMA</a> / <a rel="nofollow" target="_blank" href="http://www.URL.com/">URL.com</a> </td> </tr> <tr><td width="20%" class="Table-Post2" height="25">  <span class="cut">Designer</span></td> <td width="56%" class="Table-Post2" height="25"> <a rel="nofollow" target="_blank" href="http://URL.com">http://URL.com</a></td> </tr> <tr> <td width="20%" class="Table-Post2" height="25">  <span class="cut"> Descriptions</span></td> <td width="56%" class="Table-Post2" height="25"> BLA BLA BLA BLA </td> </tr> </table> </div> </div>
atau anda bisa melakukan secara otomatis dengan cara pergi ke Setelan > Format dan pada kotak kolom Template Entri paste lalu Simpan Setelan
Gadget

Google Ads Link dan BookMarking
<div style="float:left; padding-top:2px"> SCRIPT TEKS IKLAN </div> <div style="float:right; font-size:11px;padding-top:0; padding-right:10px"> <a target="blank" rel="nofollow" class="addthis_button" href="http://www.addthis.com/bookmark.php"> <img src="http://cdn2.iconfinder.com/data/icons/c9d/favorites_add.png" width="20" height="20" border="0" title="Bookmark and Share" alt="Share" /></a> </div>
Subscribe Now!
Enter your email address: <div id="topsearch1"> <div id='feed-1'> <form action="http://feedburner.google.com/fb/a/mailverify" style="border:0px solid #ccc;padding:0px;" target="popupwindow" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=zoomgllery', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input value="en_US" name="loc" type="hidden" /><input value="zoomgallery" name="uri" type="hidden" /> <input onblur="if (this.value == "") {this.value = "your mail here..";}" onfocus="if (this.value == "your mail here..") {this.value = ""}" type="text" id="feed-s" name="email" size="20" type="text" value="your mail here.." /> <input src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1pKMYhNMJMBFCZiCa6t247OXX80GGjWH9u_6GRaBc9h8ODtpvVE3ZTXROblPpKNuuMUUa2s4_PiqLpSSs_gf0TkQWrqQKsdVHP7tKjXB9JVnlzrfsaWd1VOh2YC59dslZ2PZ7porKtUU/s200/subscribe.png" style="border: 0pt none ; vertical-align: top; padding-top:1px" type="image" width="16" height="16" /> </form> </div></div> <div style="float:left; padding-top:10px; " ><a rel="nofollow" target="_blank" href="http://feeds2.feedburner.com/zoomgallery"><img alt="" src="http://feeds2.feedburner.com/~fc/donortemplate?bg=FD9303&fg=000000&anim=0" /></a> </div> <div style="float:right; padding-left:0px; padding-top:10px" margin:0 2px> <a target="_blank" rel="nofollow" href="http://feeds2.feedburner.com/zoomgallery"> <img border="0" id="BLOGGER_PHOTO_ID_5346727610586897650" alt="" width="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiT6LOAbyNw0mSzbk66QM-c1nmLRHNP4RitWTQ2YtYsnSl1ksxri6OKbD1SWrGHs652A4vTpJzBzHtuIPFvCuNR9ODK2JqJqtiaQT6HtcrLzD4AWgatg_1M1_tl2O65u2W7nYW0VkCALY/s400/feed.png" height="16" /></a> <a target="_blank" rel="nofollow" href="http://twitter.com/zoomgallery"> <img border="0" id="BLOGGER_PHOTO_ID_5346727886602798002" alt="" width="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0GTudrJ660dxumGoXxO_ML5IHIj2aDwmFbIKsxB-FDoUT19sh0OfztY-_Ue5aHSxxEgucXrtGS7DyQxs_0H_iJGeKxyckNDlo4kObA_nlrLTKuCnapbr3Q2WGb9pFATwGZ3zf-jmO2AY/s400/twitter.png" height="16" /></a> <a target="_blank" rel="nofollow" href="href=http://www.facebook.com/pages/Donor-Ilmu-Tutorial-SEO/295291830487730"> <img border="0" id="BLOGGER_PHOTO_ID_5346727613442898818" alt="" width="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguOd4El32XBjXih27mpcPQHk-Xy0XnS0vNca8rwFbt30STKtW3bXpCtyp8QfwcqvS7Xv1B5kprJbWzIEww2K8TIp-gO_igsFCtosSkRW3FTNwpnVjMXuG5hIAywtIEtbHfKkUfn8mT2oc/s400/facebook.png" height="16" /></a> <a target="_blank" rel="nofollow" href="http://friendfeed.com/zoomgallery"> <img border="0" id="BLOGGER_PHOTO_ID_5346727616766608338" alt="" width="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGNLWJAQA3oF0ilDodDG7Z6gC1nAmtll5A6wHIztMoDvtL-d9IehSgcbOlhgY-VJ7CIO6czJBOeHf_BKLC2ngBTnKqfvA3u331MDjqCfftCq95f6c02uq60vYTyt3JyyDqPiy193Vj56E/s400/friendfeed.png" height="16" /></a> </div>
Ads Bener
<div id="advertisment-block-sidebar"> <div id="bsap_1247056" class="bsap_1247056 bsap"><a href="#" class="ad1 odd" title="Add Your Site" id="bsa_1759113" target="_blank"><img src="http://s3.buysellads.com/1247056/82764-1320885024.gif" alt="Add Your Site" height="125" width="125" /></a><a href="#" class="ad2 even" title="Free Blogger Templates" id="bsa_393203" target="_blank"><img src="http://s3.buysellads.com/1250333/71206-1312344285.gif" alt="Free Blogger Templates" height="125" width="125" /></a><a href="#" class="ad3 odd" title="stock images" id="bsa_1230154" target="_blank"><img src="http://s3.buysellads.com/1261332/80396-1319204674.gif" alt="stock images" height="125" width="125" /></a><a href="http://donorilmu.blogspot.com" class="ad4 even" title="Premium WordPress Themes" id="bsa_681882" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpuprii3mYx9fSFWGkVJ1Knhph6AkEF5gwXVUEyMd1YtazQGnpueSNc0KZ4USoDj6OuzmGg2nkv_3bHUl3Sv3CFgZhKJwtdKNWmOf88DjgJY-9Dn0l2eHhETBurnk-kiR-87MVDKvPLA/s1600/donor.jpg" alt="Premium WordPress Themes" height="125" width="125" /></a><a href="#" class="ad5 odd" title="$7.95/mo SEO Hosting" id="bsa_1374726" target="_blank"><img src="http://s3.buysellads.com/1234915/51838-1298567710.gif" alt="$7.95/mo SEO Hosting" height="125" width="125" /></a><a href="/p/adverise-here.html" title="Advertise Here" class="adhere ad6 even" target="_blank">Advertise Here</a></div> </div>

NB: Jika ada yang ingin dipertanyakan silakan ajukan komentar anda. sebagai kehormatan mendownload mohon pasang bener saya di blog anda

Widget Subscription Box Untuk Blogger

donorilmu@gmail.com (Donor Ilmu) — Thu, 1 Dec 2011 13:26:00 +0700

Sebuah Box Subscription biasanya berisi link ke RSS feed dan Form Email di mana pengunjung dapat mengirimkan Email ID mereka untuk menerima update posting dari blog Anda. Blog tanpa form Subscription tidak masuk akal, karena pelanggan adalah tulang punggung dari setiap blog yang sukses. Orang berlangganan Feed Anda bila Anda hanya mempublikasikan konten yang berkualitas maka para pembaca yang Anda miliki akan semakin kuat Anda dapatkan. Satu hal yang dasar dan paling penting untuk dilakukan adalah untuk menambahkan widget kotak langganan ke blog Anda dan selalu menjaga kotak langganan ke posisi kanan atas atau kiri sidebar Anda untuk menarik orang sebanyak mungkin.


<style> .mbtbar{width: 300px; float: left;} .mbtbar .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;} .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;} .mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;} .mbtbar .subicons a{text-decoration: none; color:#333333;} .mbtbar .subicons a:hover{text-decoration: underline; color:#333333;} .mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNd9S1EftxgH67BoXMyQsKklNn4icwKgJR8Ae-kOHwTS9i4wsKgaQSc1hmFrK_VGUaqxhuFDc4FEr43W9Ds73MK96KtozQGJxH18AFno06gSlCC9JCVPHD_fMJKP-DWVIUvQzTsdqmVYu7/s400/rsssprite.png) no-repeat; background-position: 0px 5px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .googleicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNd9S1EftxgH67BoXMyQsKklNn4icwKgJR8Ae-kOHwTS9i4wsKgaQSc1hmFrK_VGUaqxhuFDc4FEr43W9Ds73MK96KtozQGJxH18AFno06gSlCC9JCVPHD_fMJKP-DWVIUvQzTsdqmVYu7/s400/rsssprite.png) no-repeat; background-position: 0px -37px; min-width: 2px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNd9S1EftxgH67BoXMyQsKklNn4icwKgJR8Ae-kOHwTS9i4wsKgaQSc1hmFrK_VGUaqxhuFDc4FEr43W9Ds73MK96KtozQGJxH18AFno06gSlCC9JCVPHD_fMJKP-DWVIUvQzTsdqmVYu7/s400/rsssprite.png) no-repeat; background-position: 0px -79px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .subicons .twittericon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNd9S1EftxgH67BoXMyQsKklNn4icwKgJR8Ae-kOHwTS9i4wsKgaQSc1hmFrK_VGUaqxhuFDc4FEr43W9Ds73MK96KtozQGJxH18AFno06gSlCC9JCVPHD_fMJKP-DWVIUvQzTsdqmVYu7/s400/rsssprite.png) no-repeat; background-position: 0px -121px; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 10px 0px 30px; margin: 0 0 0 5px;} .mbtbar .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;} .mbtbar .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNJyzxkNFd7BgiAK7byxP5X3wMOXYuIepfVj2dsfBGgMN-IM3cH2VAhFlrqH6c0B5tVbOcCATLZ4UknixTMg9RSoxEgTA8lIN110nhfohXAQPx0QdoFV2ALgz3v9Kq15x4CPgNTHHN6FU/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px; line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; } .mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;} .mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 185px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; text-transform: uppercase; font:bold 12px arial; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} </style> <!--[if IE 7]> <style> .mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; vertical-align: middle; } .mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; } </style> <![endif]--> <div class="mbtbar"><div class="count"><span class="bigcount"><a rel="nofollow" href="http://feeds.feedburner.com/NAMAFEED"><img width="88" style="border:0" alt="" src="http://feeds.feedburner.com/~fc/NAMAFEED?bg=F2F2F2&fg=666&anim=1" height="26"/></a> </span>Learn Free Pro Tricks daily </div> <div class="subicons"> <div class="rssicon"> <a rel="nofollow" href="http://feeds.feedburner.com/NAMAFEED" target="_blank"> RSS</a></div> <div class="googleicon"> <a href="http://plus.google.com/GOOGLEPLUS-ID" rel="author" target="_blank"> G+</a></div> <div class="fbicon">  <a href="https://www.facebook.com/FACEBOOK-ID" target="_blank" rel="nofollow">FB</a></div> <div class="twittericon"> <a href="http://twitter.com/TWITTER-ID" target="_blank" rel="nofollow">Twitter</a></div></div> <div class="emailsub"> <div class="emailicon"><p style=" width:270px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial; padding:0; margin:0;">Receive Quality Tutorials Straight in your    Inbox by submitting your Email ID below.</p></div> <div class="emailupdatesform"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="NAMAFEED" name="uri" type="hidden" /><input value="Submit" class="joinemailupdates" type="submit" /></form></div></div></div>	<style type="text/css"> .subbox{width:305px;border:0 solid #141414;overflow:hidden} .addthis_toolbox{padding:15px 0 5px 0;text-align:center} .addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0} .addthis_toolbox .custom_images a:hover img{opacity:1} .addthis_toolbox .custom_images a img{opacity:0.85} .rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px} .rssbox:hover{border:1px solid #92aed1} .rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .rssbox a:hover{color:#7c8a9b;text-decoration:underline} .emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px} .emailsbox:hover{border:1px solid #92aed1} .emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .emailsbox a:hover{color:#7c8a9b;text-decoration:underline} .twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px} .twitterbox:hover{border:1px solid #92aed1} .twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .twitterbox a:hover{color:#7c8a9b;text-decoration:underline} .facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px} .facebookbox:hover{border:1px solid #92aed1} .facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif} .facebookbox a:hover{color:#7c8a9b;text-decoration:underline} #search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left} #search:hover{border:1px solid #92aed1} #search form{margin:0;padding:0} #search fieldset{margin:0;padding:0;border:none} #search p{margin:0;font-size:85%} #textarea{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% "Tahoma",Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline} input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222} </style> <div class="subbox"> <div id='search' style='display:inline;'> <form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="3" id="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" /> <input type="hidden" value="NAMAFEED" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input id="searchsubmit" type="submit" value="Submit" /> </form> </div> <table><tr> <td><div class="rssbox"> <a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXsrAxrRTGn5TD8pTbfj-uYGoJGIJ1vpeO-gHSF-sosBgxerIUSUWICZ7KjZVdUihhF4lpv-ZAqFNTY-6Ol1XEDcvHWehl_EsTun0CviL2U2tb-tDdKnfHRTle9C88P5aiRobXwfwLmT_T/" alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a> </div></td> <td><div class="emailsbox"> <a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ71AvlNzwMg6KQbKTPkZjF1XCQRr5efRY3STOHaBQ7FJkKfNg9ZyNQrW1jF1KOHx3IP2yRyYpL-c79Qa7r6Z4nnkmxGe2YAr6wJJKQ-dVALk4ZzGUDv97JEWZgjYNiQqK5WNZgaCRoRcJ/" alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a> </div></td> </tr><tr> <td><div class="twitterbox"> <a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWCJ9eSmMBmq_qJZBqRWenRC0znNIQedUtCKbfuZbbkDA_OQO-U3dxnVXpFWqzCD-SLX5vSGDa6AkvrOyNHAI8GKZR5n5dczEojvUE9BD53tQKCQeSgKfuEpbIYBYsuPpDRb0dUL9w2FL2/" alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://twitter.com/TWITTER-USERNAME" target="_blank" rel="nofollow">Twitter</a> </div></td> <td><div class="facebookbox"> <a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLwUJRyyPhtWM3tM1srRid4FF-S0MBAOM6VaxU9iLr4MTAvZaPrA1V_hlebzecjvDLjqqQpnxAgEFFz1Mt05Yp4TqAGKTvIpoEqQ5D4U74wmRHvNbb-tMvmWOcVAq3bQcamEyG1RcKa93z/" alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;" /></a><a href="http://www.facebook.com/FACEBOOK-USERNAME" target="_blank" rel="nofollow">Facebook</a> </div></td> </tr></table> <p style="display:none;" align="center">Widget by <a href="http://www.bloggertipandtrick.net/" target="_blank">Blogger Tips And Tricks</a></p> <div class='addthis_toolbox'> <div class='custom_images'> <a class='addthis_button_twitter'><img alt='twitter' height='32' src='http://2.bp.blogspot.com/_4hkuhiry_2u/tib9fsstv4i/aaaaaaaab90/ljxossnm6je/twitter.png' width='32'/></a> <a class='addthis_button_delicious'><img alt='delicious' height='32' src='http://4.bp.blogspot.com/_4hkuhiry_2u/tib9mh_zqni/aaaaaaaab9e/pahhr5gn6di/delicious.png' width='32'/></a> <a class='addthis_button_facebook'><img alt='facebook' height='32' src='http://2.bp.blogspot.com/_4hkuhiry_2u/tib9nth41ai/aaaaaaaab9u/2rkbr3wblby/facebook.png' width='32'/></a> <a class='addthis_button_digg'><img alt='digg' height='32' src='http://4.bp.blogspot.com/_4hkuhiry_2u/tib9m5a4bzi/aaaaaaaab9m/xowtjnpvepc/digg.png' width='32'/></a> <a class='addthis_button_stumbleupon'><img alt='stumbleupon' height='32' src='http://1.bp.blogspot.com/_4hkuhiry_2u/tib9e_kpo-i/aaaaaaaab9s/1wqjoiz3b_a/stumbleupon.png' width='32'/></a> <a class='addthis_button_favorites'><img alt='favorites' height='32' src='http://2.bp.blogspot.com/_4hkuhiry_2u/tib9ej5rtwi/aaaaaaaab9c/tyvdt6xgalw/favorites.png' width='32'/></a> <a class='addthis_button_more'><img alt='more' height='32' src='http://3.bp.blogspot.com/_4hkuhiry_2u/tib9egd8xsi/aaaaaaaab9k/rzy5eofo2sy/more.png' width='32'/></a> </div> <script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/> </div> </div></script></div></div>

<style> #news-letter{clear:both;padding-top:10px;} .msg-box{float:left;width:50px;height:54px;margin-right:9px;padding-top:5px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5INUtk9j8XauliSMTTqwSixvdHaoOuM_FJKObh_PWMDAllD7UryQtYWSxbeCWt68cPFXRV99vWX5Cvgo5WL0WIApX61mkc5HtJW-ccJpKa792HeiD98GhL1avX6dolk1Y6TrtUI2w-fg/s800/mail-box.png) no-repeat;} .news-headline{position: relative;z-index: 999;font-size: 10px;padding-bottom:10px;font-weight:bold;} </style> <div class="news-headline" color:#333;> Read latest headlines in your favorite news reader </div> <center> <table border="0"> <tr> <td style="padding-right:4px;"> <a href="http://twitter.com/TWITTER-NAMA" target="_blank" title="Follow Me On Twitter"> <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQZ2SQtb0djN_Oh4oVMcWKhW7vMjIDRUoRUhQAieYpnUveLbbuQ3R-I-Cj9ebNabtT6RwJ7c5rStLOD7vnUlsk5B7ZRKghn-0SGftYM3JMGgwZ3Zn6skvBnViVXt81sYQQYEJ2SBU0OTs/s800/twitt.png" /></a> </td> <td style="padding-right:4px;"> <a href="http://feeds.feedburner.com/NAMAFEED" target="_blank" title="Subscribe Via RSS"> <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYocckFkb0norykXhqnMyWM780x4-BqGcXq5d-_jzg5ugu8oW52S7yP9tR5SUvooF8_UFMn3rcJAk8mYbF5_V_LfHilar9fiuermBdRTSCK23WQQFs6E2x2B7mmoCAtmc_FS7zJRIcapY/s800/Feed-icon_128.png" /></a> </td> <td style="padding-right:4px;"> <a href="FACEBOOK-URL" target="_blank" title="Find Us On Facebook"> <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1alYhAKGX4GEnxuEjjYcMHJCnDGtBGTyPEdQ0IQXmv1NrCWbvDmn7O5Op8bhypAmbBxiAVum5HkpKcfi2Y9kP5itygdk5x5ZpNc_d_ZvthDU6QbwicjrFHa9gUdz9ZVfEy_JHB2aWOlc/s800/Facebook_icon.png" /></a> </td> <td style="padding-right:4px;"> <a href="GOOGLE-PLUS-URL" target="_blank" title="Add me on Google+"> <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWtB1jj2UWBzc0RP_HIaEeWSsBraX5xbSwyCjBOG9h-GIzsPMXDe-EsUT9tKbFBT3u3K9CVZHom434P5hyphenhyphenxyV14StPTzGcaxFbORiPz9NCH-xKTVMC6h2UlxJ-p0mSVUqyprjFr3Z0No8/s800/googleplusicon.png" /></a> </td> <td style="padding-right:4px;"> <a href="http://www.stumbleupon.com/share?url=HOMEPAGE-URL" target="_blank" title="Stumble Upon"> <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6IbHrHW4Mw2oV5x0g8u_H7V3FMsZxsroNeb1vcxXUR7WbKZM_hP4TnoqbOPJGPG7D9jsRCrl-NxNDYJsx2MoiYwKwQxgc9d3MF0g3dFzPUAF6UskgKxp9xFh7wfMgv56YKwZ3oMVz8kc/s800/stumbleupon_icon.png" /></a> </td> <td style="padding-right:4px;"> <a href="http://technorati.com/faves?sub=addfavbtn&add=HOMEPAGE-URL" target="_blank" title="Add To Technorati"> <img style="width:25px; height:25px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOxkWcUmyp6j3_6qc72nT3TDLu-wU8gXMLJjDfse3XXXeDfTnk-ZVaxdOYSOGWFNCb9erjlPSQUBjWmC9vPCbttVEoiINZ1BNUK7aV4FAwMD5X0jqo_Hn6qpFFWOMtpr9_RjcU5i-B5yU/s800/Technorati-icon.png" /></a> </td> <td> <td style='padding-top:-2px;'> <a href="http://feeds.feedburner.com/NAMAFEED"><img src="http://feeds.feedburner.com/~fc/NAMAFEED?bg=000000&fg=FFFFFF&anim=1" height="26" width="88" style="border:0; padding-top:5px" alt="Fellow Readers" /></a> </td> </td> </tr> </table> </center> <div id="news-letter"> <span class="msg-box"></span> <b>Sign up for our email news letter</b> <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify"> <p><input type="text" valign="middle" name="email" value="Enter your email address" size="25" maxlength="100" onfocus="this.value = '';" style="width: 140px; height: 21px; font-size: 11px; color: rgb(51, 51, 51);" gtbfieldid="2"/> <input type="hidden" value="NAMAFEED" name="uri"/> <input type="hidden" name="loc" value="en_US"/> <input type="submit" value="Sign Up" id="submit"/> </p> </form> </div>	<style> #subscribe {font-size:14px; color:#999;} .subscribetext {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn28U2Xz-XpxkG_EDhUI_L8sWxFfwq8M-bo5gsNvxhbVdgDJ2p3ftorIEA5zigGfdYkU-7VnRd5b-EBZtEw4AztQsEi54KSwABzT_9z4dgyNh8o03oXcS4PX2XUWc6QdTDDJt3yA-LbOWe/s400/bullet.png) left no-repeat; padding-left:20px; margin-bottom:20px;} .subscriberss {line-height:35px; font-size:18px; border-bottom:1px dotted #CCC; padding-left:5px;} .subtext { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQpkwzk1ky1R3MRtMhco2m5nSBkMvE77EirQ7vkLB-g8MVBRqPnIktFhTqD5xFMT3mLJsm5CCyuwjdeAWih7VLm3j20XtwirrxnqdfOmoLwLjCLIwoPVPORV5UtuYjBLv1y2VFhTG3f8Fj/s400/feed.png) left center no-repeat; padding-left:37px; padding-bottom:5px;} .twitter {line-height:35px; margin-bottom:15px; font-size:18px;border-bottom:1px dotted #CCC;} .twittext { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigvu6GuvMfBO_JIXIl8KMXgg-lTyFjldstVnF_NcDjsSPWBzeRs3e5mTb3tRh-I_XZ9JbIuc0XpCC_Ipl1PYnBr4cCw224DCL3US3yh8ciq3UPJUDwuTYTXaNHw5fodL5Kzx_PJTy1B1L_/s400/twitter.gif) left no-repeat; padding-left:42px;} .subscribemail {margin-bottom:7px; font-size:11px; font-family:Arial, Helvetica, sans-serif;} .subscribeinput{border:1px solid #CCC; width:180px; padding:3px;} .subscribesubmit{ background:#FB9E3D; color:#fff; border:1px solid #FFF; font-family:Arial, Helvetica, sans-serif; padding:3px; width:70px; -moz-border-radius:5px;} .facebook {line-height:35px;font-size:18px;border-bottom:1px dotted #CCC;margin:-10px 0 15px 0;} .facetext { background:url(http://www.longislandcateringhalls.com/i/facebook-icon.png) left no-repeat; padding-left:42px;} </style> <div id='subscribe'> <div class='subscribetext'>Subscribe to our newsletter updates!</div> <div class='subscriberss'><a class='subtext' href='feedburner url here'>Subscribe via RSS feed</a></div> <div class='twitter'><a class='twittext' href='twitter url here'>Follow us on Twitter!</a></div> <div class='facebook'><a class='facetext' href='facebook url here'>Join Us On Facebook !</a></div> <div class='subscribemail'>OR, subscribe via Email</div> <form action='http://www.feedburner.com/fb/a/emailverify' id='subscribeform' method='post' onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=NAMAFEED', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target='popupwindow'> <input gtbfieldid="3" class="subscribeinput" id="sub" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" /> <input type="hidden" value="NAMAFEED" name="uri"/><input type="hidden" name="loc" value="en_US"/> <input class="subscribesubmit" type="submit" value="Sign up" /> </form> </div>

Login ke Blogger.com, pergi ke Template/Rancangan > Tambah Gadget > HTML/JavaScript
Copy salasatu kode di atas dan paste kode tersebut.
yang perlu anda ganti dalam kode script itu adalah NAMAFEED dan link ID Profile seperti Facebook, Twitter, Google Plus dll.
Klik Save/Simpan

Bener Iklan Dengan Style CSS BuySellAds

donorilmu@gmail.com (Donor Ilmu) — Tue, 22 Nov 2011 12:47:00 +0700

Iklan Style BuySellAds

Memper cantik bener iklan dengan style BuySellAds berukuran 125x125 dan 468x60. Kesannya akan sedikit unik dan menarik pengujung untuk melihatnya, anda bisa melihat Demo dan screenshot di samping. Ini tidak mengunakan jQuery atau apapun javascript lain melainkan dari script CSS. Terkadang juga saya sering melihat di setiap Bener Iklan Blog yang berukuran 125px mereka megunakan pemasangan iklan sebagai image, maksudnya seperti screenshot ini.

Baik anda sudah melihat demonya dan apakah saya mengunakan image sebagai link pemasangan? tidak sama sekali dan lihat stylenya bagimana sedikit unik bukan. Langsung ke topik cara penerapan.

Login di Blogger.com, pergi ke Template/Rancangan > Edit HTML
Tekan Ctrl+F cari kode ]]></b:skin> copy kode CSS berikut ini paste diatas kode ]]></b:skin>
/* Ads ---------------------------------------------*/ div.bsap_125 a{width:125px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;float:left;line-height:100%;margin:0 4px 10px 0;} div.bsap_125 img{border:2px solid #ddd;clear:right;padding:5px;} div.bsap_125 a.adhere{color:#666;font-weight:bold;font-size:12px;border:2px solid #ccc;background:#e7e7e7;text-align:center;width:125px;height:125px;line-height:1000%;} div.bsap_125 a.adhere:hover{border:2px solid #999;background:#ddd;color:#333;} html>body div.bsap_125 a.adhere{width:123px;height:123px;} div.bsap_468 a{width:468px;display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;text-align:center;text-decoration:none;overflow:hidden;line-height:100%;margin:0;} div.bsap_468 img{border:0;clear:right;} div.bsap_468 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;width:468px;height:60px;line-height:480%;} div.bsap_468 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;} html>body div.bsap_468 a.adhere{width:466px;height:58px;} .bsap a{text-shadow:1px 1px 1px #111!important;color:#eee!important;overflow:visible!important;-webkit-transition:all .2s ease;-moz-transition:all .2s ease;-o-transition:all .2s ease;border:0 none!important;-webkit-border-top-left-radius:80px;-webkit-border-bottom-right-radius:80px;-moz-border-radius-topleft:80px;-moz-border-radius-bottomright:80px;border-top-left-radius:80px;border-bottom-right-radius:80px;margin:0 10px 10px 0 !important;padding:7px!important;} .bsap a:hover{-webkit-border-top-left-radius:40px;-webkit-border-bottom-right-radius:40px;-moz-border-radius-topleft:40px;-moz-border-radius-bottomright:40px;border-top-left-radius:40px;border-bottom-right-radius:40px;} .bsap a img{border:0 none!important;-webkit-box-shadow:0 0 8px rgba(0,0,0,0.5);-moz-box-shadow:0 0 8px rgba(0,0,0,0.5);box-shadow:0 0 8px rgba(0,0,0,0.5);padding:3px!important;} .bsap .even{margin-right:0!important;} .bsap .ad1{background:#e42b2b!important;} .bsap .ad2{background:#ff8400!important;} .bsap .ad3{background:#a800ff!important;} .bsap .ad4{background:#49a7f3!important;} .bsap .ad5{background:#41d05f!important;} .bsap .ad6{background:#B24700!important;} .bsap .ad7{background:#FFE500!important;} .bsap .ad8{background:#007D47!important;} .bsap .ad9{background:#330000!important;} .bsap .ad10{background:#990000!important;} .bsap .ad11{background:#f70000!important;}
Selanjutnya klik Save Template Belum Berakir!
Pergi ke Elemen Laman > Tambah Gadget > HTML/JavaScript Masukan kode berikut

Untuk Iklan Bener Ukuran 125x125
Bisanya lebi bagus kalau diletakan di sidebar dengan ukuran lebar minimal 300px
<center>
<div id="bsap_125" class="bsap_125 bsap">
<a href="#" class="ad1" title="video screen capture" id="bsa_1451626" target="_blank"><img src="http://s3.buysellads.com/1247056/82764-1320885024.gif" alt="video screen capture" height="125" width="125" /></a>
<a href="#" class="ad2 even" title="Premium plugins for WordPress" target="_blank"><img src="http://s3.buysellads.com/1250333/71206-1312344285.gif" alt="Premium plugins for WordPress" height="125" width="125" /></a>
<a href="http://donorilmu.blogspot.com/" class="ad3" title="DonorIlmu" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSpuprii3mYx9fSFWGkVJ1Knhph6AkEF5gwXVUEyMd1YtazQGnpueSNc0KZ4USoDj6OuzmGg2nkv_3bHUl3Sv3CFgZhKJwtdKNWmOf88DjgJY-9Dn0l2eHhETBurnk-kiR-87MVDKvPLA/s1600/donor.jpg" alt="DonorIlmu" height="125" width="125" /></a>
<a href="#" title="Advertise Here" class="adhere ad4 even" target="_blank">Advertise Here</a>
</div>
</center>
Untuk Iklan Bener Ukuran 468x60
<div id="bsap_468" class="bsap_468 bsap">
<span class="bsap_468 bsap"><a href="#" title="Advertise Here" class="adhere ad1" target="_blank">Advertise Here</a></span>
</div>

-Warna Hijau Link Bener Iklan,
-Warna Oranye Judul Bener Iklan,
-Warna Biru Link Bener Iklan Gambar,
-Warna Kuning Link Pemasangan Iklan,
-Warna Ungu Judul Pemasangan
-Dan yang bergaris bawah seperti ad1,ad2,ad3 dan ad4 ini menujukan background radius berwarna. Misalnya ad1 menujukan warna merah dan ad2 meujukan waran oranye dan seterusnya sampai ad11,
-Kalau class even menujukan posisi iklan di sebelah kanan dan adhere meujukan class Pemasangan Iklan
Langkah terakhir klik Simpan

CSS3 Menu Side Bergaya Vertikal Fixed

donorilmu@gmail.com (Donor Ilmu) — Sun, 20 Nov 2011 23:11:00 +0700

Menu CSS3

Saya telah melihat banyak situs yang memiliki menu navigasi vertikal fixed untuk meletakan link halaman yang terpenting buat mereka. Dalam artikel ini saya memperkenalkan gaya baru CSS3 menu vertikal fixed untuk blog blogger. Menu ini dilengkapi dengan 5 ikon. 5 ikon itu berisi dari Home, About, Services, Portfolio dan Contact us. Tapi Anda bisa mengubah ikon dan teks apapun yang Anda suka. Menu ini dirancang benar-benar menggunakan CSS3 dengan hanya satu gambar dan dapat diterapkan dengan mudah. Demo

Login ke Blogger.com, pergi ke Template/Rancangan > Edit HTML
Tekan Ctrl+F cari kode ]]></b:skin> copy kode CSS dibawah ini paste diatas kode ]]></b:skin>
*{ /* A universal CSS reset */ margin:0; padding:0; } #navigationMenu body{ font-size:14px; color:#666; background:#111 no-repeat; /* CSS3 Radial Gradients */ background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); font-family:Arial, Helvetica, sans-serif; } #navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px; } #navigationMenu span{ /* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* CSS3 Transition: */ -webkit-transition: 0.25s; /*-o-transition: 0.25s;*/ /* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhftyohWDLdJ_pNjcyX0C_TGlFIcKn1WqLCc3651r_aO35keO-oH6vnAI09AKSVu5ghHf12nZrwc1oCzGdArIDGE9xA3jezG6TQzycC-a3NCJPS0ZzvCEZIfF81xrMF8dgHwvg0p3_Ullfg/s1600/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } #navigationMenu a:hover{ text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5; } /* Green Button */ #navigationMenu .home { background-position:0 0;} #navigationMenu .home:hover { background-position:0 -39px;} #navigationMenu .home span{ background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31; } /* Blue Button */ #navigationMenu .about { background-position:-38px 0;} #navigationMenu .about:hover { background-position:-38px -39px;} #navigationMenu .about span{ background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0; } /* Orange Button */ #navigationMenu .services { background-position:-76px 0;} #navigationMenu .services:hover { background-position:-76px -39px;} #navigationMenu .services span{ background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344; } /* Yellow Button */ #navigationMenu .portfolio { background-position:-114px 0;} #navigationMenu .portfolio:hover{ background-position:-114px -39px;} #navigationMenu .portfolio span{ background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b; } /* Purple Button */ #navigationMenu .contact { background-position:-152px 0;} #navigationMenu .contact:hover { background-position:-152px -39px;} #navigationMenu .contact span{ background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6; }
Selanjutnya cari kode </body> copy kode berikut ini paste diatas kode </body>
<div style='position: fixed; top: 40%; left: 0%;'>
<ul id='navigationMenu'>
<li>
<a class='home' href='/'>
<span>Home</span>
</a>
</li>

<li>
<a class='about' href='#'>
<span>About</span>
</a>
</li>

<li>
<a class='services' href='#'>
<span>Services</span>
</a>
</li>

<li>
<a class='portfolio' href='#'>
<span>Portfolio</span>
</a>
</li>

<li>
<a class='contact' href='#'>
<span>Contact us</span>
</a>
</li>
</ul>
</div>
Anda bisa menganti teks biru dengan lnik anda dan merah untuk judul
Langka terahkir klik Save Template

Trik Paksa Klik Iklan

donorilmu@gmail.com (Donor Ilmu) — Thu, 10 Nov 2011 14:23:00 +0700

Klik Iklan

Trik kali ini untuk blog yang jarang di klik iklannya oleh visitor, dan blog yang jarang ada visitor dapat penghasilan dari klik iklannya Demo Tenang saja pengujung tidak akan tergangu setipa hari karena pertama kali seorang mengujungi blog anda dan dia mengklik iklannya maka iklan itu tidak akan di tampilkan selama 7 hari. Selesai selama 7 hari berlangsung iklan itu akan muncul lagi, Dengan begitu anda akan mengasilkan klikan setiap pengujung yang datang.

Login di Blogger.com pergi ke Template/Rancangan > Edit Html
Tekan Ctrl+F cari </head> masukan kode berikut tepat diatas kode </head>
<style type='text/css'>
#topbar{position:absolute;visibility: hidden;width: 500px;z-index: 100;padding:10px;background:#fff; border:1px solid #000;margin:0 auto 10px;float:left;color: #000;text-align: justify;font-size: 12px;font-family: Verdana, serif}
</style>
<script src='http://donor-ilmu.googlecode.com/files/klik-iklan.js' type='text/javascript'></script>
Selanjutnya cari kode <body> masukan kode berikut letakan di bawah <body>
<div id='topbar' style='visibility: hidden; left: 30px; top: 689px;'>
<div style='text-align: center;'>
<b><span class='ads'>Klik Link Dibawah ini Untuk <a href='http://donorilmu.blogspot.com/2011/11/trik-paksa-klik-iklan.html' target='new'>Menutup</a></span></b>
</div>
<div onclick='closebar()'>
<center>
KODE IKLAN ANDA
</center>
</div>
</div>
Ganti teks yang berwarna biru dengan script iklan anda
Klik Save Template sekarang lihat pada blog anda

Download Template Blogger Tune-Up

donorilmu@gmail.com (Donor Ilmu) — Tue, 8 Nov 2011 14:05:00 +0700

Blogger Tune-Up

Template Blogger Tune-Up kariya Hendriono ini memang sangat menakjubkan dan simpel, semuannya mengunakan JavaScript dan jQuery mulai dari Menu, Sidebar, Header, ScrollTo, bahkan dia juga mengunakan file swf untuk background headernya. jarang-jarang saya menemukan file swf untuk header blogger sunggu. Saya rasa dia memang mahir dalam medesain web mengunakan JavaScript. Bahkan 3 blog yang saya temukan di profile Hendriono semuanya mengunakan JavaScript dan dari ke 3 blog itu memilik ciri-ciri khas yang sama yang terletak dari 'background' kenapa tidak Pink saja ya?

Plugin Script dibawah ini yang akan anda masukan di Rancangan > Tambah Gadget > HTML/JavaScript

Mesin Pencari
<form method="get" id="search_form" action="/search"> <div><input class="search_input" value="ketik kemudian tekan enter" name="q" id="s" onfocus="if (this.value == 'ketik kemudian tekan enter') {this.value = '';}" onblur="if (this.value == '') {this.value = 'ketik kemudian tekan enter';}" type="text" /> <input id="searchsubmit" value="Search" type="hidden" /> </div> </form>
Twitter
<ul id="twitter_update_list"></ul> <script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script> <script src="http://twitter.com/statuses/user_timeline/animegricit.json?callback=twitterCallback2&count=8" type="text/javascript"></script>
Terbaru
<script src="http://feeds.feedburner.com/DonorIlmu?format=sigpro" type="text/javascript"></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/DonorIlmu"></a><br />Powered by FeedBurner</p> </noscript>
Komentar
<script src="http://feeds.feedburner.com/blogspot/donor-ilmu?format=sigpro" type="text/javascript"></script><noscript><p>Subscribe to RSS headline updates from: <a href="http://feeds.feedburner.com/blogspot/donor-ilmu"></a></p></noscript>
Terkait

NB: Jika ada yang ingin dipertanyakan silakan ajukan komentar anda. sebagai kehormatan mendownload mohon pasang bener saya di blog anda

Do-Follow Website Social Bookmarking

donorilmu@gmail.com (Donor Ilmu) — Sun, 6 Nov 2011 22:28:00 +0700

Social Bookmarking

Saya tahu sebagian dari Anda membagi posting blog Anda pada top social bookmarking dan situs jaringan sosial. Bookmark posting blog adalah salah satu cara tercepat dan termudah untuk mendapatkan eksposur beberapa posting dan membiarkan orang tahu tentang konten terbaru Anda. Hampir semua blogger mengikuti rutinitas yang sama, yaitu mesahre posting mereka di Twitter dan profil Facebook halaman. Banyak juga yang menambahkan link mereka ke situs-situs bookmark populer lainnya seperti Digg dan Stumble Upon. Tapi apakah Anda tahu Anda akan jauh lebih baik dilayani Bookmarking posting Anda di situs bookmarking lainnya yang sering kurang dikenal?

Top Bookmarking Website menambahkan atribut No-Fllow untuk link share di anggotanya. Hal ini menyebabkan link tidak diindeks oleh mesin pencari terkemuka dan tidak memiliki efek pada Google Page Rank. Jadi pada dasarnya terpisah dari orang-orang yang melihat dan mengklik link itu. Anda tidak akan mendapatkan tingkatan apa-apa di jalan peringkat pencarian. Dengan bookmark pada 20 situs top tercantum di bawah ini, Anda akan mendapatkan link Anda diikuti oleh Google dan mesin pencari lainnya dan peringkat pencarian ditingkatkan begitu juga ranknya.

Top 20 Do-Follow Website Social Bookmarking

Slashdot.org - Slashdot memiliki peringkat halaman Google 9 dan peringkat Alexa dari 1.272.
Reddit.com - Reddit memiliki peringkat halaman Google dari 8 dan Alexa rank dari 244.
Technorati.com - Technorati memiliki Page rank Google 8 dan peringkat Alexa dari 895.
Mixx.com - Mixx memiliki Google Page Rank Dari 8 dan Alexa Rank dari 1.194.
Folkd.com - Folkd memiliki Page rank Google 8 dan peringkat Alexa dari 2.691.
Metafilter.com - Metafilter memiliki Google Page Rank dari 7 dan peringkat Alexa dari 2.309.
Wikio.com - Wikio memiliki Google Page Rank dari 7 dan peringkat Alexa dari 2.793
Current.com - saat ini memiliki Google Page Rank dari 7 dan peringkat Alexa dari 3.749.
Connotea.com - Conntea memiliki Google Page Rank dari 7 dan peringkat Alexa dari 4.628.
Tipd.com - Tipd.com memiliki Google Page Rank dari 7 dan peringkat Alexa dari 12.098.
Clipmarks.com - memiliki Google Page Rank dari 6 dan peringkat Alexa dari 3.524.
dZone.com - Dzone memiliki Google Page Rank dari 6 dan peringkat Alexa dari 2.833.
Buddymarkd - Buddymarks memiliki Google Page Rank dari 6 dan peringkat Alexa dari 5.722.
Sphinn.com - Sphinn memiliki Google Page Rank 6 dari dan peringkat Alexa dari 7.110.
Kirtsy.com - Kirtsy memiliki Google Page Rank dari 6 dan peringkat Alexa dari 8.351.
Kwoff.com - Kwoff memiliki Google Page Rank dari 6 dan peringkat Alexa dari 18.455.
A1-Webmarks.com - A1-Webmarks memiliki Google Page Rank dari 5 dan peringkat Alexa dari 4.929.
Indianpad.com - IndianPad memiliki Google Page Rank dari 5 dan peringkat Alexa dari 7.386.
Designfloat.com - DesignFloat memiliki Google Page Rank dari 5 dan peringkat Alexa dari 6.679.
Spotback.com - SpotBack memiliki Google Page Rank dari 5 dan peringkat Alexa dari 7.703.

Itu dia daftar Top Bookmasrkin Do-Follow, Alangkah baiknya luangkan waktu anda untuk menggunakan beberapa situs-situs di atas dan mendorong pembaca blog Anda untuk berbagi posting Anda dengan membuat link ke mereka. Anda dapat menambahkan Semua Sekaligus Dalam Satu alat bookmark sosial pada blog anda, 5 daftar link terbaik yang menyediakan layananitu.

Semua Sekaligus Dalam Satu Gadget Bookmarking Sosial.

Sedikit Tentang No-Follow

Ini adalah Pernyata'an bagaimana mesin pencari utama melihat link Nofollow:

"Google menyatakan bahwa mesin mereka mengambil" nofollow "secara harfiah dan tidak" mengikuti "link sama sekali. Namun, percobaan yang dilakukan oleh SEO menunjukkan hasil yang bertentangan. Studi ini mengungkapkan bahwa Google tidak mengikuti link tersebut, tetapi tidak indeks terkait-untuk halaman, kecuali hal itu dalam indeks Google sudah untuk alasan lain (seperti lain, non-nofollow link yang mengarah ke halaman). Yahoo! "mengikutinya", tetapi tidak termasuk dari perhitungan peringkat mereka. Bing menghormati "nofollow" dalam hal tidak menghitung link di peringkat mereka, tetapi tidak terbukti apakah atau tidak Bing mengikuti link. Ask.com juga mendukung atribut "

Informasi di atas adalah dari Wikipedia Anda dapat melihat artikel lengkap di sini - Wikipedia No-Follow Pasal

Oke jika Anda tahu situs bookmark peringkat yang lebih tinggi dibandingkan dalam daftar 20 situs Bookmarking diatas, beritahu kami.

Share Button Floating Animasi Jquery

donorilmu@gmail.com (Donor Ilmu) — Sun, 6 Nov 2011 15:00:00 +0700

Share Button

Dalam tutorial ini saya akan memberitahu Anda metode yang dapat digunakan untuk menerapkan widget Share Button ini ke dalam Blogger dengan menggunakan fitur jQuery. Ini akan muncul di luar bagian posting Anda dan saat Anda menggulir halaman, widget ini juga akan tergulir dengan beberapa efek animasi. Kami telah menyediakan delapan warna berbeda bagi Anda agar bisa menyusaikan warna template anda. Kita juga telah mengumpulkan empat Share Button paling populer saat ini. Seperti Facebook, Twitter, Google +1, Stumbleupon dan Digg.

Demo Kiri Demo Kanan

Silver

Merah

Biru

Hitam

Kiri

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
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-bottom:1px solid #808080; border-left:1px solid #808080; border-top:1px solid #808080;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

$window.scroll(function() {
if ($window.scrollTop() &gt; offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

});
</script>
</b:if>

Kanan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: right;
margin-right: 80px;
right:0px;
background:#aaa;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #f2f2f2), color-stop(1, #aaa));background:-moz-linear-gradient(top, #f2f2f2, #aaa);
border-bottom:1px solid #808080; border-right:1px solid #808080; border-top:1px solid #808080;
box-shadow:2px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kiri

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
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-bottom:1px solid #B31919; border-left:1px solid #B31919; border-top:1px solid #B31919;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kanan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: right;
margin-right: 80px;
right:0px;
background:#C12424;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #F54F4F), color-stop(1, #C12424));background:-moz-linear-gradient(top, #F54F4F, #C12424);
border-bottom:1px solid #B31919; border-right:1px solid #B31919; border-top:1px solid #B31919;
box-shadow:2px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kiri

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
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-bottom:1px solid #1E4A8A; border-left:1px solid #1E4A8A; border-top:1px solid #1E4A8A;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kanan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: right;
margin-right: 80px;
right:0px;
background:#295698;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #3980E6), color-stop(1, #295698));background:-moz-linear-gradient(top, #3980E6, #295698);
border-bottom:1px solid #1E4A8A; border-right:1px solid #1E4A8A; border-top:1px solid #1E4A8A;
box-shadow:2px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kiri

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
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-bottom:1px solid #222; border-left:1px solid #222; border-top:1px solid #222;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kanan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: right;
margin-right: 80px;
right:0px;
background:#333;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #656565), color-stop(1, #333));background:-moz-linear-gradient(top, #656565, #333);
border-bottom:1px solid #222; border-right:1px solid #222; border-top:1px solid #222;
box-shadow:2px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Hijau

Oranye

Kunig

Putih

Kiri

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
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-bottom:1px solid #739619; border-left:1px solid #739619; border-top:1px solid #739619;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kanan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: right;
margin-right: 80px;
right:0px;
background:#80A81C;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #A1D423), color-stop(1, #80A81C));background:-moz-linear-gradient(top, #A1D423, #80A81C);
border-bottom:1px solid #739619; border-right:1px solid #739619; border-top:1px solid #739619;
box-shadow:2px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kiri

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
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-bottom:1px solid #B35319; border-left:1px solid #B35319; border-top:1px solid #B35319;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kanan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: right;
margin-right: 80px;
right:0px;
background:#C15F24;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #F58D4F), color-stop(1, #C15F24));background:-moz-linear-gradient(top, #F58D4F, #C15F24);
border-bottom:1px solid #B35319; border-right:1px solid #B35319; border-top:1px solid #B35319;
box-shadow:2px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kiri

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
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-bottom:1px solid #F1E7AC; border-left:1px solid #F1E7AC; border-top:1px solid #F1E7AC;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kanan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: right;
margin-right: 80px;
right:0px;
background:#FFF19D;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #FFF8CA), color-stop(1, #FFF19D));background:-moz-linear-gradient(top, #FFF8CA, #FFF19D);
border-bottom:1px solid #F1E7AC; border-right:1px solid #F1E7AC; border-top:1px solid #F1E7AC;
box-shadow:2px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kiri

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: left;
margin-left: -80px;
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-bottom:1px solid #ccc; border-left:1px solid #ccc; border-top:1px solid #ccc;
box-shadow:-4px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Kanan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#sharebox {
float: right;
margin-right: 80px;
right:0px;
background:#F9F9F9;background:-webkit-gradient(linear, right top, right bottom, color-stop(0, #fff), color-stop(1, #F9F9F9));background:-moz-linear-gradient(top, #fff, #F9F9F9);
border-bottom:1px solid #ccc; border-right:1px solid #ccc; border-top:1px solid #ccc;
box-shadow:2px 2px 5px rgba(0,0,0,0.3);
position: absolute;
-moz-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}
#sharebox .wdt {
float: center;
clear: center;
padding: 5px;
}
</style> 
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

var $sidebar = $(&quot;#sharebox&quot;),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;

});
</script>
</b:if>

Awal pertama yang kita lakukan adalah Login di Blogger.com, Pergi ke Template/Rancangan > Edit HTML (Expand Template Widget)
Tekan Ctrl+F cari kode </head> Copy script Kiri atau Kanan (Pilih salah satu, jangan dipergunakan keduaduanya cukup satu saja) setelah itu paste tepat diatas kode </head>
Selanjutnya cari kode yang mirip seperti dibawah ini
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
Jika anda tidak menmukannya cari saja yang ini
<data:post.body/>
Kalau sudah ketemu masukan kode berikut taruh tepat diatas kode yang anda temukan
<b:if cond='data:blog.pageType == "item"'> <div id='sharebox'> <div class='wdt'> <div id='fb-root'/> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class='fb-like' data-layout='box_count' data-send='false' data-show-faces='false' data-width='50' expr:data-href='data:post.url'/> </div> <div class='wdt'> <a class='twitter-share-button' data-count='vertical' data-via='animegricit' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/> </div> <div class='wdt'>  <g:plusone size='tall'/>  </div> <div class='wdt'> <script src='http://www.stumbleupon.com/hostedbadge.php?s=5'/> </div> <div class='wdt'> <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>  <a class='DiggThisButton DiggMedium'/> </div> </div> </b:if>
Terakhir Klik Save Template dan lihat hasilnya pada halaman posting anda bukan pada halaman home anda.

Jika anda baik dalam CSS anda bisa meruba kode yang ada di dalam script Kiri dan Kanan seperti margin-left: -80; atau margin-right: 80; untuk mengatur jarak jau dekatnya antara posting.

Di script Kiri dan Kanan terdapat juga kode

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

Jika sebelumnya ditemplate Anda telah ditambahkan jquery, maka Anda tidak perlu menambahkannya lagi, hanya memeriksa apakah itu versi yang terbaru atau tidak dan kemudian menggantinya.

Kirim Sitemap Di Yahoo Bing Ask

donorilmu@gmail.com (Donor Ilmu) — Sat, 5 Nov 2011 18:50:00 +0700

Yahoo Bing Ask

Salah satu pertanyaan yang paling diminta oleh newbei adalah "Bagaimana Kirim Sitemap Blog Di Google?". Namun newbi dan bahkan beberapa blogger yang berpengalaman akan lupa upaya untuk mendapatkan Blog mereka terdaftar di tiga mesin pencari utama lainnya yaitu Yahoo, Bing dan Ask. Memang Google adalah orang besar dalam sebuah pencarian. Tetapi Yahoo, Bing dan Ask memiliki basis pengguna setia dan jutaan pengembalian hasil pencarian sehari-hari.

Pada posting kali ini saya akan menunjukkan cara untuk menghasilkan XML sitemap untuk blog Anda dan cara mengirimkannya ke Yahoo, Bing dan Ask. Dengan begitu semua konten blog Anda secara langsung ke setiap mesin pencari akan mencrawl dan terindex. Dalam tutorial ini memiliki terdapat dua bagian, pertama kita akan membuat sitemap XML kemudian kita akan 'Ping' di setiap mesin pencari.

Membuat Sitemap XML Blogger

Ada sejumlah situs yang memungkinkan Anda untuk membuat XML sitemap. Disini saya akan menggunakan xml-sitemaps, Untuk Menghasilkan sitemap, Anda pergi ke www.xml-sitemaps.com
Gulir kebawah pada Starting URL masukan Url Blog Anda. Tidak perlu mengubah bidang lain cukup klik tombol Start langsung.
Sitemap Anda sekarang akan dibuat, mungkin diperlukan sedikit beberapa menit. Setelah selesai Anda akan mendapatkan daftar link yang tersedia, Selanjutnya 'Klik kanan' pada link sitempa.xml dan copy link.

Ping Sitemap Di Search Engine

Setiap mesin pencari memiliki URL Ping yang dapat Anda gunakan. Copy setiap URL di bawah ini ke browser Anda dan ganti SITEMAP-URL dengan Link sitemap Anda lalu Enter untuk menyerahkan.

Yahoo
http://search.yahooapis.com/SiteExplorerService/V1/updateNotification?appid=SitemapWriter&url=SITEMAP-URL?redirect=false
Bing
http://www.bing.com/webmaster/ping.aspx?siteMap=SITEMAP-URL
Ask
http://submissions.ask.com/ping?sitemap=SITEMAP-URL
New Ask
http://submissions.ask.com/ping?sitemap=http://namablog.blogspot.com/sitemap.xml

Catatan - Sitemap URL harus berakhir dalam file XML.

Contoh - http://www.xml-sitemaps.com/download/namablog.blogspot.com/sitemap.xml

Setelah Anda mengirimkan sitemap maka Anda akan mendapatkan pesan konfirmasi submission. Dengan Begitu pengiriman sitemap Selesai. Sekarang postingan blog anda terindex Oleh Yahoo, Bing dan Ask.

Download Template Today

donorilmu@gmail.com (Donor Ilmu) — Fri, 4 Nov 2011 16:48:00 +0700

Template Today

Lagi-lagi Muncul Template Today Buatan Herdiansyah. Template yang bergaya ala Yahoo itu sekarang sudah tersebar luas di seluru Dunia (lebay). Awal pertama Sport Magazine dishare di 4shared sekarang Template Today dishare juga di V-Template dengan di Download secara cuma-cuma alias GRATIS. Oky tanpa perlu basa-basi saya juga mau berbagi template ini kepada anda dengan cuma-cuma plus mendapatkan BONUS Gadget dan sedikit Editan dari saya yang templatenya suda mendukung Fitur Blogger Komentar Style Fantastis.

Anda tahukan cara menaruh script dibawah ini dimana. Yup di Rancangan > Tambah Gadget > HTML/JavaScript

Mesin Pencari
<div style='font:normal 12px arial;padding-left:5px;height:23px;'> <strong><i>Hi, guest<strong></strong></i> ! </strong> welcome to <strong>TEMPLATETODAY.com</strong>. | <a href='#'>About Us</a> | <a href='#'>Contact</a> | <a href='http://www.blogger.com' title='registered now for free account'>Register</a> | <a href='http://www.blogger.com' title='sign in to blogger to share'>Sign In</a></div> <form action=' /search' class='searchform' method='get'> <input class='searchfield' id='q' name='q' onblur='if (this.value == "") {this.value = "";}' onfocus='if (this.value == "") {this.value = ""}' type='text' value=''/> <input class='searchbutton' type='submit' value=''/> </form>
Slide
<div id="gal1" class="img400"> <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqAUOUyuWNdUgYmDYRsZPpu-sQZVnsUIRwd_XnHrpnK8jkHsnEhB4Dl0BHAIuIm6xD8sgKxolOnajw3WrkxiPrUf0SHCxa9hAEZkGNNtTFhOdidVWvPBtITolTH9Cd9ZlOYAsBo8rK-WSo/s1600/Privacy+Policy+of+Template+Today.jpg&cat=1&pid=2107&cache=false" /></div> <div class="min250"> <div style="margin-top:168px;" class="des_4"><strong>PRIVACY POLICY</strong></div> <div class="des_1 font16 c_white"><a href="http://template-today.blogspot.com/2011/01/privacy-policy-of-template-today_30.html"><strong>Read the Privacy Policy Of Template Today and Buy This Template Now</strong></a> </div> </div> </div> <div id="gal2" style="display:none;" class="img400"> <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_0CCNiTwOj3E-tAb4Ku7ERht2faH_Ea97uJ4Qb4qbseHdDbiMzoTW-whETCnXFBL1r7u2FP8dQAnxT2M1KnDj5bpq3v7Z5hNZhL28LpXhisVkV30tYyCYDHTRORPspyqLMVj6azXB4as_/s1600/What+is+a+Blog.jpg&cat=1&pid=2107&cache=false" /></div> <div class="min250"> <div style="margin-top:168px;" class="des_4"><strong>BASIC KNOWLEDGE</strong></div> <div class="des_1 font16 c_white"><a href="http://template-today.blogspot.com/2011/01/basic-knowledge-what-is-blog.html"><strong>Basic knowledge, what is a Blog ?</strong></a> </div> </div> </div> <div id="gal3" style="display:none;" class="img400"> <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFihZhJRAspQ1TAM2iQ7ciToqp5iFgb2gkTBLGaHGtVP62EvohcOt6aUiOU0c5gJcKYtK7L9AoBeA-xhWzCbfp0SxzFUs7i_F-lLBXlvv5FDum8Th9ytGkNUA9ozO9MaIMcWFT6T9Nq_8i/s1600/Lionel+Messi.jpg&cat=1&pid=2107&cache=false" /></div> <div class="min250"> <div style="margin-top:168px;" class="des_4"><strong>SPORT NEWS</strong></div> <div class="des_1 font16 c_white"><a href="http://template-today.blogspot.com/2011/01/lionel-messi-legend-of-future-football.html"><strong>Lionel Messi, the legend of the future football</strong></a> </div> </div> </div> <div id="gal4" style="display:none;" class="img400"> <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZetg5gC2tXTP7hbhIntwqG_qwPxEeC5varJ0xszQXA6Mm_mv4ZrPrQqlT8KD9fixPBAr95D5TfvfIpDm12M2SDWRKL72vDRuWAACgiOsoDzaq7NckZsv8d80oCUBsgitlybBocv1RN__k/s1600/Font+Style.jpg&cat=1&pid=2107&cache=false" /></div> <div class="min250"> <div style="margin-top:168px;" class="des_4"><strong>FONT STYLE</strong></div> <div class="des_1 font16 c_white"><a href="http://template-today.blogspot.com/2011/01/quick-brown-fox.html"><strong>The Quick Brown Fox</strong></a> </div> </div> </div> <div id="gal5" style="display:none;" class="img400"> <div class="h250"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbKGQCJWlMhScUYUX53Mqtl_GRCyfyPUR8MdSzFLEgJKYuVjakizcc0AmAwJFyhPdLq7UUO2Wn8k0hz3myChcz6CQRgokSURXHYodha5IR-EID2X2F9LbkzSDsf4n-IiIbglLvSGRg-Gam/s1600/Google+Office.jpg&cat=1&pid=2107&cache=false" /></div> <div class="min250"> <div style="margin-top:168px;" class="des_4"><strong>MAKE MONEY</strong></div> <div class="des_1 font16 c_white"><a href="http://template-today.blogspot.com/2011/01/monetize-your-site-with-google.html"><strong>Monetize your site with Google Affiliate Network</strong></a> </div> </div> </div> <div style="height:250px; margin-top:-250px;"><div id="galtabs" class="page_hl pd_5"><a href="#" rel="gal1">1</a> <a href="#" rel="gal2">2</a> <a href="#" rel="gal3">3</a> <a href="#" rel="gal4">4</a> <a href="#" rel="gal5">5</a> </div></div><div class="clearit"></div> <div class="clearit pb_10"></div> <script type="text/javascript"> var myheads=new ddtabcontent("galtabs");myheads.setpersist(false);myheads.setselectedClassTarget("link");myheads.init(5000) </script>
Menu Blog
<div id='sidebarnavigation'> <ul> <li class='about'><a href="#"/>About Us</a></li> <li class='contact'><a href="#"/>Contact Us</a></li> <li class='facebook'><a href="#" target="_blank"/> Facebook</a></li> <li class='twitter'><a href="#" target="_blank"/> Twitter</a></li> <li class='email'><a href="#" target="_blank"/> Email</a></li> <li class='video'><a href="#" target="_blank"/> Video</a></li> <li class='music'><a href="#" target="_blank"/> Music</a></li> <li class='download'><a href="#" target="_blank"/> Download</a></li> <li class='data'><a href="#" target="_blank"/> Data</a></li> <li class='rss'><a href="#" target="_blank"/> RSS Feed</a></li> <li><a href='#'>Archieves</a></li> </ul> </div> <div style='font:bold 11px arial;float:right;line-height:1.4em;padding:5px 10px;color:#333;'> <a href='http://template-today.blogspot.com'>More CATEGORIES »</a> </div>
Favorit Saya
<div id='sidebarnavigation'> <ul> <li class='msn'><a href="#"/>Msn</a></li> <li class='yahoo'><a href="#"/>Yahoo</a></li> <li class='blogger'><a href="#" target="_blank"/> Blogger</a></li> <li class='gmail'><a href="#" target="_blank"/> Gmail</a></li> <li class='bing'><a href="#" target="_blank"/> Bing</a></li> </ul> </div> <div style='font:bold 11px arial;float:right;line-height:1.4em;padding:5px 10px;color:#333;'> <a href='http://template-today.blogspot.com'>More FAVORIT »</a> </div>

NB: Jika ada yang ingin dipertanyakan silakan ajukan komentar anda. sebagai keamanan mohon pasang bener saya di blog anda

Jquery Pop-up Berlangganan

donorilmu@gmail.com (Donor Ilmu) — Thu, 3 Nov 2011 23:12:00 +0700

Jquery Pop-Up

Banyak blogger mengatakan bahwa berlangganan sebuah pop-up dengan jquery sangat membantu dalam meningkatkan jumlah subscriber. Jika sesorang mengujungi pertama kali di blog anda lalu mucul sebuah pop-up dan mengklik tombol close maka tidak akan ditampilkan lagi selama 7 hari. Dengan fitur ini, pembaca tidak akan terganggu dengan pop-up setiap kali mengunjungi blog Anda. Setelah 7 hari, pop-up akan menunjukkan lagi untuk mengingatkan pengunjung untuk berlangganan blog Anda.

DEMO

Oky sebelum memulai, alangkah baiknya anda BackUp dulu template anda.

Login Blogger.com, Klik Template > Edit HTML
Tekan Ctrl+F cari kode ]]></b:skin> copy kode berikut letakan tepata di atas kode ]]></b:skin>
/*Subscription Pop Up Css*/ #popupContactClose{ cursor: pointer; text-decoration:none; } #backgroundPopup{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:100%; width:100%; top:0; left:0; background:#000000; border:1px solid #cecece; z-index:1; } #popupContact{ display:none; position:fixed; _position:absolute; /* hack for internet explorer 6*/ height:400px; width:500px; background:#FFFFFF; border:2px solid #cecece; z-index:2; padding:12px; font-size:13px; } #popupContact h1{ text-align:center; color:#6FA5FD; font-size:22px; font-weight:700; border-bottom:1px dotted #D3D3D3; padding-bottom:2px; margin-bottom:20px; } #popupContactClose{ font-size:14px; line-height:14px; right:6px; top:4px; position:absolute; color:#6fa5fd; font-weight:700; display:block; } #cont{text-align:center; color:#3AA6FF; font-family:Arial, Helvetica, sans-serif; width:500px; margin:0 auto;} #cont a{ text-decoration:underline;} #cont h1{ font-family:Georgia; text-transform:uppercase; font-size:22px; font-weight:bold; margin:10px 0 40px;} #cont h2{ font-size:14px; margin:5px 0; text-decoration:blink; border-bottom:1px dashed; color:red;} #cont form{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc6GjJIUWwpwhOCvkoX1TDtIfZ5ijNvHtAKRqPxBj8al3DFNEuV3POTQXZzvmB-PyWPCf9Yv6lSJEz8FqbY7UHgIet0AsPJMYSOIFK6X_44B9KoK1BqK-agX_53jmqFEwPDvV-2LW9pjE/s1600/form-bg.gif') no-repeat; width:306px; height:151px; padding:10px 0 0 70px; margin:0 auto; text-align:left;} #cont form h3{color:#fff; margin:40px 0 10px 10px; padding:0; font-size:22px; font-weight:normal;} .txt-news{ background:#f8f8f8; width:170px; float:left; padding:3px 5px; border:1px solid #e9e9e9; color:#777; height:17px;} .btn-news{ background:#656565; border:1px solid #333; color:#fff; padding:3px 5px;height:26px;} #cont p{ font-size:10px; margin:5px 0; font-weight:bold; color:#000;} #cont h4{ font-size:20px; font-weight:bold; } .big-fb{ background:url() no-repeat; width:66px; height:66px; float:left; margin: 0 30px 0 100px;} .big-tw{ background:url() no-repeat; width:66px; height:66px; float:left; margin: 0 10px;}
Selanjutnya cari </body> letakan kode berikut tepata di atas kode </body>
<div id='popupContact'>
<a id='popupContactClose'><img alt='Close' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5AmSGYPsmmj0WIQGXZW0quMYQTfLpCzQiT4OdKczGw6YrgV2y-DjLtttOo_xLmfxNY63pPYxVaEYHED33ijeiyDjFvh9PPiLcfIWBjX1I91ZgVyoCnYPefdD1vOaMYRXbQ_VWuIjdmfo/s1600/SexyClose.png'/></a>
<div id='cont'>
<h1>CEPETAN BURUAN !!!!!!!! DAN DAPATKAN GRATIS UPDATE HARIAN</h1>
<h2>(Jangan lewatkan posting harian kami dari E-mail Anda)</h2>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=DonorIlmu', 'popupwindow', 'scrollbars=yes,width=500,height=520');return true' target='popupwindow'>
<h3>Ambil Berita Terbaru</h3>
<input class='txt-news' name='email' onblur='if (this.value == '') {this.value = 'Enter alamat email anda';}' onfocus='if (this.value == 'Enter alamat email anda') {this.value = '';}' type='text' value='Enter alamat email anda'/>
<input name='uri' type='hidden' value='DonorIlmu'/>

<input name='loc' type='hidden' value='en_US'/>
<input class='btn-news' type='submit' value='Kirim'/>
<div style='clear: both;'/>
</form>
<p>(Jangan khawatir Layanan didukung oleh Google, kita mengambil privasi dengan sangat serius, Email Anda tidak akan dibagi. Dan Anda dapat berhenti berlangganan setiap saat)</p>
<h2>Periksa update bulanan kami dan <a expr:href='data:blog.homepageUrl'>Penawaran Gratis</a></h2>
<p>(Hosting review, domain gratis, gratis SEO pelatihan, setup Free Website)</p>
<div id='fb-root'/>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class='fb-like' data-send='true' data-show-faces='false' data-width='400' expr:data-href='data:blog.homepageUrl'/>

</div>
</div>
<div id='backgroundPopup'/>

Ganti teks yang berwarna biru dengan link subscription yang didapat dari feedburner misalnya link subscription punya saya "http://feedburner.google.com/fb/a/mailverify?uri=DonorIlmu" cukup anda ganti link ID belakannya saja. Sedangkan uraiannya anda ganti dengan selera anda
Terakhir cari </head> masukan kode berikut tepat diatas kode </head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script> <script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script> <script type="text/javascript"> var popupStatus = 0; //this code will load popup with jQuery magic! function loadPopup(){ //loads popup only if it is disabled if(popupStatus==0){ $("#backgroundPopup").css({ "opacity": "0.7" }); $("#backgroundPopup").fadeIn("slow"); $("#popupContact").fadeIn("slow"); popupStatus = 1; } } //This code will disable popup when click on x! function disablePopup(){ //disables popup only if it is enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; } } //this code will center popup function centerPopup(){ //request data for centering var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; var popupHeight = $("#popupContact").height(); var popupWidth = $("#popupContact").width(); //centering $("#popupContact").css({ "position": "absolute", "top": windowHeight/2-popupHeight/2, "left": windowWidth/2-popupWidth/2 }); //only need force for IE6 $("#backgroundPopup").css({ "height": windowHeight }); } //CONTROLLING EVENTS IN jQuery $(document).ready(function(){ if ($.cookie("anewsletter") != 1) { //centering with css centerPopup(); //load popup loadPopup(); } //CLOSING POPUP //Click the x event! $("#popupContactClose").click(function(){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); }); //Click out event! $("#backgroundPopup").click(function(){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); }); //Press Escape event! $(document).keypress(function(e){ if(e.keyCode==27 && popupStatus==1){ disablePopup(); $.cookie("anewsletter", "1", { expires: 7 }); } }); }); </script>
Script yang bertulisan { expires: 7 } menujukan jumlah nilai hari, dengan mengatur nilai 7 menjadi nilai lain misalnya 6 maka Pop-up akan mucul lagi pada hari ke 6.
Langkah terakhir Klik Save Template

FancyBox Untuk Blogger

donorilmu@gmail.com (Donor Ilmu) — Sun, 30 Oct 2011 13:24:00 +0700

Fancybox Blogger

FancyBox adalah alat untuk menampilkan gambar, konten html dan multi-media dalam "lightbox" bergaya Mac yang mengapung dari halaman web. Ini sangatlah mudah digunakan dan membuat web benar-benar menjadi baik, terutama berhubungan dengan gambar.

Sebelumnya saya sudah perna menjelaskan Mengaktifkan maupun Menonaktifkan lightbox dari platfrom Blogger sendiri. Namun trik kali ini saya mengunuakan lightbox dari Fancybox ini bukan sebagai gambar saja melainkan sebagai Buku Tamu dan Menu Login Blogger. Anda bisa melihat DEMONYA. Oky untuk memulai cara menerapkannya di Blog berikut caranya.

Langka Pertama yang harus dilakukan adalah pergi Login di Blogger.com klik Template/Rancangan > Edit HTML
Cari Kode </head> masukan kode berikut tepat diatas kode </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/> <script src='http://donor-ilmu.googlecode.com/files/fancybox-1.3.4.js' type='text/javascript'/> <link href='http://sites.google.com/site/donorilmu/default/fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/> <script type="text/javascript"> $(document).ready(function() { $("a[imageanchor=1]").fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'titlePosition' : 'over', 'overlayColor' : '#000000', 'overlayOpacity' : 0.9, 'titleFormat' : function(title, currentArray, currentIndex, currentOpts) { return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>'; } }); $("#login").fancybox({ 'titlePosition' : 'inside', 'transitionIn' : 'elastic', 'transitionOut' : 'elastic' }); $("a.fancy").fancybox({ 'width' : '75%', 'height' : '75%', 'autoScale' : false, 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'type' : 'iframe' }); }); </script>
Klik Save Template

Sampai di sini proses pemasangan script Fancybox di template Blogger Anda telah selesai. Langkah selanjutnya adalah penerapan efek pemangil Fancybox dari sebuah link.

Buku Tamu
<a class="fancy" href="ALAMT-BUKU-TAMU">Buku Tamu</a>

Ganti teks biru dengan alamat Buku Tamu anda, Misalnya "http://www5.shoutmix.com/?bandungnuaing"
(Bukan buku tamu saja yang bisa di panggil, anda bisa juga membuat banyak link iframe asalkan diantara link pembuka <a class="fancy" her="...."> terdapat script class="fancy".)
Menu Login Blogger
<a id="login" href="#login1">Login</a>
<div style="display: none;">
<div id="login1" style="width:400px;height:252px;overflow:auto;">
<form action='https://www.google.com/accounts/ServiceLoginAuth' id='gaia_loginform' method='get' onsubmit='return(gaia_onLoginSubmit();'>
<p>
<label>E-mail :<br />
<input type="text" name="Email" id="Email" class="input" value="" size="20" tabindex="4" /></label>
</p>
<p>
<label>Password :<br />
<input type="password" name="Passwd" id="Passwd" class="input" value="" size="20" tabindex="5" /></label>

</p>
<p class="forgetmenot"><label><input id='PersistentCookie' name='PersistentCookie' tabindex='7' type='checkbox' value='1'/> Remember Me</label></p>
<p class="submit">
<input type="submit" class="button-primary" value="Log In" tabindex="6" />
</p>
</form>

Oky sekian untuk keterangan lebih lanjut silakan mampir ke Fancybox.net. Terima kasih, selamat mencoba, dan semoga bermanfaat

Koleksi Style Buku Tamu

donorilmu@gmail.com (Donor Ilmu) — Wed, 26 Oct 2011 17:53:00 +0700

Banyak sekali sekarang Buku Tamu dengan berbagai gaya dan fitur seperti Melayang (kanan, kiri, bawah, atas), Sembunyi, Folting, Tanpa di Klik Terbuka Sendiri? dan masi banyak lagi. Semuanya bagus-bagus, namun dari beberapa Buku Tamu yang saya temukan ini sudah tren di kalangan para blogger.

Floating Kanan

Floating Kiri

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIx_6JRE_AVFvsNEth4oT2347uu6_O8JaoTx9tJy_xjESmca6SrEqav0z4OVH_Q6UQX0bCRO0ogHWJuFLaeUZ8SbTShs2jylFpgZPxFcCZT9RVAFPS_TqiFq9OBAC16JiSndQi4gWznIfe/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

&lt;!-- Ganti ini dengan kode buku tamu kamu --&gt;

<br /> <div class="hc-credit"> <span style="float:left">   </span> <span style="float:right"> <a href="javascript:showHidehcl()"> [close] </a> </span> </div> </div> <div class="hcltab" onclick="showHidehcl()"> </div>   <script type="text/javascript"> var hcl = document.getElementById("hcl"); hcl.style.left = (30-hcl.offsetWidth).toString() + "px"; </script></div>

Flash

Slide

* html .gb_fixed {position:relative;}
#hidden_gb2{display:none; background:transparent; padding:10px; padding-top:10px; border:1px solid #ccc; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; transform:rotate(-5deg); -moz-transform:rotate(-5deg); -webkit-transform:rotate(-5deg); -o-transform:rotate(-5deg)}
#hidden_gb2:hover{background:url("http://i55.tinypic.com/8x1xlt.gif") no-repeat scroll 0 0; background-position:top center; box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -moz-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; -webkit-box-shadow:-1px -1px 1px #666,1px 1px 1px #666,1px 1px 20px #FF1493; transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg)}
</style>
<div class="gb_fixed">
<table cellpadding="0" cellspacing="0" id="hidden_gb2"><tbody>
<tr><td>
<div>
<a href="javascript:void(0)" onclick="gb_showHideGB()"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9JEF3B8zD-5oY422EMP9lhNHqTRvbU4-pgVtWy4ud6L8gx2_Tgcj66KmdLM6e6FqQwUB0NGeTMoTNKJENmPvUQaljJFsgnMnjOgRhf7SguBsA_Do9zFZilC7hYW_eWlvyH1T_EAIiZkX/s1600/CloseButtonHot.bmp" /></a>
</div>

</td></tr>
</tbody></table>
</div>

$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});

});
</script>
<style>
/* ---------------
Simple Slide panel with jQuery
---------------------------------- */
#panel {
height: auto;
background: #f90;
width: auto;
display: none;
padding: 7px;
border: #0C0;
-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-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;
}
.slide {
margin: 0;
padding: 0;
border-top: solid 4px #f90;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrFAi0kpAd9p324V5dACYofzVsRwVtBlndqwgfqzv1UHZHqJ66QW7Q6P1AcOr-yVxI41oTONH_GF7Wyg5D0UYiil03cBemHML-neU2KhaXxhNISSxTIfbAI4HLepiwIrBdqaiYox1_z7g/s1600/btn-slide.png) no-repeat center top;

}
.btn-slide {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvpyLq3J1G9WYTSGAd3KN61qFmx2fWu6rHOHFBkGKK-w4_aE4BrHv0HEwIoeCefYzA6W3WBRRKHl_xdGu6QrVkfUuKY4Fh04yQoKZ3iBnUuINrbF3mqjqMmBMzu-2aURitvfjz2hzUcVg/s1600/white-arrow.gif) no-repeat right -50px;
text-align: center;
width: 144px;
height: 31px;
padding: 10px 10px 0 0;
margin: 0 auto;
display: block;
font: bold 120%/100% Arial, Helvetica, sans-serif;
color: #fff;
text-decoration: none;
}
.active {
background-position: right 12px;
}
</style>

</div>
<p class="slide"><a href="#" class="btn-slide">Buku Tamu</a></p>

Cara memasangnya di blog anda sangatlah mudah cukup ikuti langka berikut

Klik Tambah Gadget, Pilih HTML/JavaScript

Masukan Kodenya, Ganti Script

Dengan Kode Buku Tamu anda, Klik Simpan

Donor Ilmu

Follow Email Pop Out Widget Blogger

Kostum 404 Error Pages Untuk Blogger

Meta Tag Deskripsi di Blogger

Download Template Pocong Oom

Related Posts Slide Out Boxes

JumpLink Post Tanpa JavaScript

Emoticon Untuk Komentar Threaded Blogger

Style Komentar Threaded

Bungkus Sepenuhnya Script CSS

Komentar Threaded Untuk Blogger

Upload File Di Google Site

Rekomendasi Slide Out Untuk Blogger

Download Template Zoom Gallery

Widget Subscription Box Untuk Blogger

Bener Iklan Dengan Style CSS BuySellAds

CSS3 Menu Side Bergaya Vertikal Fixed

Trik Paksa Klik Iklan

Download Template Blogger Tune-Up

Do-Follow Website Social Bookmarking

Top 20 Do-Follow Website Social Bookmarking

Semua Sekaligus Dalam Satu Gadget Bookmarking Sosial.

Share Button Floating Animasi Jquery

Kirim Sitemap Di Yahoo Bing Ask

Membuat Sitemap XML Blogger

Ping Sitemap Di Search Engine

Download Template Today

Jquery Pop-up Berlangganan

FancyBox Untuk Blogger

Koleksi Style Buku Tamu