bloger sejati

tombol share dibawah postingan

noreply@blogger.com (Anonymous) — Fri, 21 Feb 2014 08:53:00 +0000

diatas kode skin

/*addthis_toolbox
----------------------------------------------- */
.addthis_toolbox { width:150px; position:relative; background-color:white;float:right;padding-right:0px;margin-top:-1px;}
.addthis2_toolbox2 { width:150px; position:relative; background-color:darkgreen; padding:10px 15px; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }
.addthis2_toolbox2 .addthis-tooltip ,.addthis_toolbox .addthis-tooltip { display:block; width:140px; padding:10px 15px; position:absolute; bottom:100%; left:30px; z-index:77; margin-bottom:40px; background-color:black; font:bold 12px 'Trebuchet MS',Arial,Sans-Serif; color:white; text-align:center; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; opacity:0; visibility:hidden; -webkit-transition:all 0.26s ease-out; -moz-transition:all 0.26s ease-out; -ms-transition:all 0.26s ease-out; -o-transition:all 0.26s ease-out; transition:all 0.26s ease-out; }
.addthis2_toolbox2 .addthis-tooltip:before,.addthis_toolbox .addthis-tooltip:before { content:""; width:0px; height:0px; border:7px solid transparent; border-top-color:black; position:absolute; top:100%; left:15px; }
.addthis2_toolbox2 .addthis-tooltip:before,.addthis_toolbox:hover .addthis-tooltip { visibility:visible; opacity:1; margin-bottom:20px; }

dibawah data post body

<b:if cond='data:blog.pageType == "item"'>
<div style='background:#fff;border-bottom:1px solid #d0d0d0;padding:10px 0;margin:13px 0px 8px 0px;width:100%;float:left;height:20px;'>
<div style='float:right;padding-right:10px;'>
<div class='addthis_toolbox addthis_default_style '>
<a class='addthis_button_preferred_1'/>
    <a class='addthis_button_preferred_2'/>
    <a class='addthis_button_preferred_3'/>
    <a class='addthis_button_preferred_4'/>
    <a class='addthis_button_compact'/>
    <a class='addthis_counter addthis_bubble_style'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js#pubid=4rifin' type='text/javascript'/></div>
<div style='float:right;padding:2px 10px 0px 0px;font:normal 12px Arial;color:#666'>
<strong>Share this article</strong> :

</div>
</div>
</b:if>

tombol menu dan tombol share serta tombol search dibawah header

noreply@blogger.com (Anonymous) — Fri, 21 Feb 2014 02:37:00 +0000

masukkan kode ini diatas kode skin

/* Menu Horizontal Bottom
---------------------------------------------*/
.menubottompic {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAJFlgiDO_ZzAPBR-8T29u0dykmIYYr_PM0LcV7xS-evqXawuzvltrvO7JiYRMyDNUzkrNn8SKiPNkLdYkONSU87nyWvNZeHHWwUHwP_c3BGeB2VO_5aQUDmVUhyRfujax_Vl0AT3tTVfo/s0/bottommenu.png) repeat-x top left;width:962px;margin:0 auto;padding:0 auto;height:42px;border-bottom:1px solid #A6A6A6;border-top:3px solid #FF8000}
.bottomsearch{width:300px;float:right;margin:0 auto;padding:0 auto;}
.menubottom {width:660px;float:left;height:20px;margin:0 auto;padding:14px 0;}
.menubottom ul {margin: 0;padding-left:0px;color:#fff;list-style-type: none;font:bold 12px Arial,sans-serif;text-shadow:0 1px 0 #000}
.menubottom li{display: inline; margin: 0;}
.menubottom li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGqOPUJDkqXhyphenhyphenNDOBorpxUL6PLRXEFOOyUwJERKT_B5KG5jEkmwLDHOLSeVyhTJH8JUSg_hFQUPE9ZHXvPNx4a5rCx-Jq0dQfbr10Uwg3Ph1eUw8rVL27NKy77599n7L7Fy-zVZ7HOeul2/s0/horiz-menu-div.png) no-repeat center right;float: left;display: block;padding:3px 8px;color:#F2F2F2;line-height: 1.2em;}
.menubottom li a:visited{color:#F2F2F2;}
.menubottom li a:hover {color:#FACD49;text-decoration:none;}

tombol menu dan tombol share serta tombol search dibawah header

<div class='clear'> </div>
<div class='menubottompic'>
<div class='menubottom'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUWjWbFhTOkoX0QSnmoW2ovFvzzemEM5PjyYIaUAEYRCD5WccfIuFLNBe70Kr-wC11KqMYRVnaq66hri3Yt-YvJBI1TQRgzdyhFhJqOkpvqoPsYSsBa0jfc1CtEYRb-oquLl_9te9inJCE/s0/home_bg.png' style='padding:0px;'/> Home</a></li>

<li><a href='#' title='Comments RSS'>Comments RSS</a></li>
<li><a href='#'>Link</a></li>
<li><a href='#'>Link</a></li>
<div style='float:center;text-align:right;padding:0px;padding-right:50px;margin-top:-3px'>
<a class='toptop' href='http://twitter.com/YOUR_USERNAME'><img alt='Twitter' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEFQ9icopqM0UGYZKjS6iEwysbO_Hap6adM6rZDt54TdDoxkyf9aVYM5o1AXUYOBfKWKWHM_6pdq_AajwEzkhn-VkhSe9QPzVgVgT3qBe7KWHfZloUsX_Ns2M94CVL74s-L-2zUInDGn_y/s0/twitter-icon.png' width='30'/></a>
<a class='toptop' href='http://facebook.com/YOUR_USERNAME'><img alt='Facebook' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaPIpu0iHp9PBzdqH_FxX4zHxFqf_3W5vXdR7h9ERHRSD7GhL5jdds61Xnfop0rl95EW9cndEbH5cQ28g7h_CQkOGOh0L3fKamQEVNW_A5G-5ETZr3n9Kpjj9Istu4SrWxM7nxLp_6JlTZ/s0/facebook-icon.png' width='30'/></a>
<a class='toptop' expr:href='data:blog.homepageUrl + "feeds/posts/default"'><img alt='Feedburner' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMUKYyoplXVl7VsLrqWRK32wA86IQ5iadzV5fiABVDnLHJuxM7JSzpX5BbCOyubV0Xk_zrXEKvufhSugfCT-1sumSzJ9bnLMkI4A1yisFov0gmCyXizjOYN72Kw8RCZZujulj6LYWVheX2/s0/rss-icon.png' width='30'/></a>
<a class='toptop' href='http://plus.google.com/'><img alt='Google +1' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzqjsyFA8oas6gOjEb57iCm_kmIBC9WQ_h-1jTKe7OoMxTfYAHLyHI93RlOGjnBX0Py-YKsysRVbwDEFmTHk7zl7VSaAQ6maQWn0tHyH15QbmnlZOlJz8NdeCL3QovoqcSTYYAlcIgbppQ/s0/gplus-icon.png' width='30'/></a>
<a class='toptop' href='link-edit-youtube'><img alt='youtube' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgycTA7vMi-PbJ8qeyA_ZTZqZlMXu-qKxh4Rn9JOhKTw3A0p82wmKFAii7nOpa-ZBCKrUAiCQBBExMkkTgdHvzodkQIKnNLwBOURFRRuN8TFHT83TZ3FcXkAQxzoJJSSE5p2ijTXZ9qOwY_/s0/youtube-icon.png' width='30'/></a>
<a class='toptop' href='http://flickr.com/YOUR_USERNAME'><img alt='flickr' height='30' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGgGcey5gWLRk_8NIUOFlIdUZrIhkX9U-hgEAUBZP8Ri8Q-Y4F2MAWWDXwgKAuGiam64Qiy416_0yx_2subAjZoY8VXFiRx5qywWM3EpuzuXDUGXCRnu9CfhCeUU9-3ccaxuMLyHqOR4XE/s0/flickr-icon.png' width='30'/></a></div>
</ul>
</div>
<div class='bottomsearch'>
<div style='float:right;padding:12px 15px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
<input name='sitesearch' style='display:none;' value='http://creatingwebsite-maskolis.blogspot.com'/>
<input id='search-box' name='q' onblur='if(this.value=='')this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value='';' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_2P2-UvBK2TCcUTwDbMwI1P4cjQRETPv1DkkhDCnaD-iEU_7QkoLpiPJtDX5jlSBMrYMFdLAhKRl8X1lkw88PrHtEZQj6CcSCXk7wl735WBl84GQO743gUdHWhCPBb0YO6WSEsITIYfcD/s0/bg_field.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNSLLQyWg1noKvebh7pbbscajMoOYspaK4NHl5MEuR4rXHtY9meVuoh4QXEkCchhVVdbFBPfyiRif9NIjOyrimwmXgt6hJmrEJgZgiYI31pSW6pPq-EbMEpdSGgMi-aaTzv309GgBv1IJP/s0/bg_search.gif' type='image' value='Search'/>

</form>
</div>

</div>
<div style='clear:both;'/>
</div>

Membuat Facebook Like Box dan Comment Responsive

noreply@blogger.com (Anonymous) — Fri, 21 Feb 2014 01:51:00 +0000

Facebook merupakan social media yang memiliki jumlah pengguna yang sangat banyak. Di Indonesia saja 47% dari pengguna internet memiliki akun facebook. Selain social media facebook juga memberikan banyak tools bagi pengguna blog. Diantaranya fasilita seperti facebook like box, facebook button, facebook comment.
Nah bagi anda pengguna facebook dan juga memasang facebook like box atau pun facebook comment diblog anda mungkin tertarik dengan tips yang satu ini. Tipsnya yang saya berikan ini yaitu bagaimana membuat keduanya menjadi responsive. Hal ini sangat cocok bagi anda pengguna template yang responsive.
Dari hasil pencarian dan percobaan yang saya lakukan saya menemukan dua metode untuk menjadikannya responsive. Yaitu dengan cara menggunakan CSS dan dengan cara jQuery. Nah bagi anda yang tertarik bisa mengikuti cara berikut.

Metode CSS

Metode dengan menggunakan CSS dapat dilakukan dengan menambahkan kode CSS berikut kedalam template blogspot anda:

Facebook Like Box

.fb-like-box, .fb-like-box span, .fb-like-box iframe[style] {
width: 100% !important;
}

Facebook Comment Box

.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}

Metode jQuery

Metode yang satu ini terbilang lebih rumit karena harus menggunakan jQuery. Sehingga untuk menerapkannya setidaknya blog anda telah ada jQuery librarynya.
Pada umumnya jika anda membuat facebook like dan juga facebook comment (HTML5) akan ada dua kotak untuk dicopy kodenya.
Kode yang pertama adalah kode javascriptnya atau disebut dengan JavaScript SDK. Kode ini sebaiknya hanya satu kali diletakkan. Dan dianjurkan diletakkan setelah tag <body>. Kalau tidak salah bentuk kodenya seperti ini:

<div id="fb-root"></div>
<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&appId=ID Aplikasi Facebook Anda";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>

Maksud dari kode ini yaitu akan mencari tag script yang pertama dan meletakkan kode script dengan id facebook-jssdk setelahnya. Sehingga kode seperti diatas dapat diganti dengan kode berikut dan meletakkannya setelah tag <body>.

<div id="fb-root"></div>
<script id="facebook-jssdk" src="http://connect.facebook.net/en_US/all.js#xfbml=1&amp;appId=ID Aplikasi Facebook Anda"></script>

Facebook Like Box

Kode yang kedua dari FB like box akan seperti ini:

<div class="fb-like-box" data-href="URL Facebook Page Anda" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>

Kode diatas adalah tempat dimunculkannya like box. Nilai default like box (profile,stream, dan header muncul). Untuk merubahnya silahkan ganti dengan nilai true diganti dengan false. Misal ingin menghilangkan headernya maka dirubah menjadi data-header="false".
Karena kita akan membuat menjadi responsive maka harus ditambahkan sedikit kode html dan juga jQuery seperti ini.

<div id="container-likefb" style="width:100%;">
  <div class="fb-like-box" data-href="URL Facebook Page Anda" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
</div>
<script type="text/javascript">
$(window).bind("load resize", function(){    
  var container_width = $('#container-likefb').width();    
    $('#container-likefb').html('<div class="fb-like-box" ' + 
    'data-href="URL Facebook Page Anda"' +
    ' data-width="' + container_width + '" data-show-faces="true" ' +
    'data-stream="true" data-header="true"></div>');
    FB.XFBML.parse( );    
}); 
</script>

Facebook Comment

Seperti halnya pada like box, pada FB comment bentuk kode keduanya kurang lebih seperti ini (untuk blogger):

<div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10'></div>

Hampir sama yang kita lakukan pada like box, tapi pada fb comment ada sedikit tambahan kode Javascript. Sehingga kodenya akan seperti ini.

<div id="container-commentfb" style="width:100%;">
  <div class='fb-comments' expr:data-href='data:post.url' data-width='470' data-num-posts='10' ></div>
</div>
<script type="text/javascript">
//<![CDATA[
$(window).bind("load resize", function(){   
  var url = location.protocol+'//'+location.host+location.pathname;
  var containercm_width = $('#container-commentfb').width();    
    $('#container-commentfb').html('<div class="fb-comments" ' + 
    'data-href="'+url+'"' +
    ' data-width="' + containercm_width + '" data-num-posts="10"></div>');
    FB.XFBML.parse( );    
}); 
//]]>
</script>

Sekian.
Semoga dapat membantu serta dimengerti.
Sukses selalu bagi anda.

Cara Membuat Wadah Iklan Muncul Tiba - tiba / Membuat Iklan Melayang Di Blog

noreply@blogger.com (Anonymous) — Fri, 26 Jul 2013 10:53:00 +0000

Cara Membuat Wadah Iklan Muncul Tiba - tiba - Membuat Iklan Melayang Di Blog

Bingungkan?? awalnya aku juga bingung...tapi lama - lama pati sobat mengerti.

Fungsinya sangat penting sekali terutama blog yang memasang iklan, baik dari adsense google maupun dari kumpul blogger dan sebagainya.

Dengan ditambahkannya JavaScript pada Wadah Iklan ini kita akan dapat mengoptimalkan penghasilan blog melalui adsense atau pay per klik.
Langkah-langkahn nya sebagai berikut:

1. Login ke Blogger

2. Masuk ke "Tata Letak - Elemen Laman"

3. Klik "Tambah Gadget Baru" dengan tipe "HTML/JavaScript"

4. Masukan kode dibawah ini pada bagian konten (tanpa judul gadget):

1. Width: 350px; ubah angkanya untuk mengatur lebar wadah;
2. FFFFFF adalah warna background
3. 1px solid #333333 adalah jenis dan warna border..
4. Ganti kode yang berwarna merah dengan script iklan milik sobat.

Mendapatkan Iklan dari MadAdsMedia

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 04:14:00 +0000

KUMPULAN ADSEN BLOGSPOT - Mendapatkan Iklan dari MadAdsMedia. Anda ingin memasang iklan di dalam blog anda? Tentu itu adalah keinginan kita bukan. Salah satu penyedia iklan dengan sistem CPM telah hadir kehadapan anda. Kita bisa memanfaatkan situs tersebut untuk menambah penghasilan kita.

Mendapatkan Iklan dari MadAdsMedia
Apa itu MadAds Media.
MadAds Media (www.MadAdsMedia.com) adalah jaringan periklanan yang menyediakan penerbit dengan CPM industri tinggi.

Saat ini MadAds Media Publisher Network sekarang terbuka untuk umum. Silahkan baca disini informasi lengkap mengenai MadAds Media.

Syarat dan Ketentuan

Anda tentunya memiliki sebuah blog atau situs.
Lakukanlah pendaftaran / registrasi ke situs MadAds Media http://madadsmedia.com/registration/.
Dalam waktu 1 - 2 hari, maka pengajuan pendaftaran anda akan dibalas.

Penghasilan Yang di Dapatkan
Untuk saat ini saya belum bisa memberikan gambaran mengenai penghasilan yang kita dapatkan. Karena saya masih baru menggunakannya. Untuk mendapatkan penghasilan hampir sama dengan situs-situs penyedia iklan lainnya. Yang penting mencoba sebagai PUBLISHER iklan.

Beberapa hari yang lalu saya mendaftarkan blog ini, baru hari ini (6 Mei 2013) saya buka email dan disetujui oleh MadAds Media. Langsung deh saya pasang iklannya.

Cara Kerja
Setelah pengajuan / pendaftaran / register anda lakukan, maka anda akan dikirimi email disetujui atau tidak. Bila aplikasi anda disetujui, maka anda bisa langsung memasang iklan yang diberikan berupa script bersamaan dengan email yang dikirim, atau bisa juga anda masuk kembali ke situs MadAds Media dan memilih jenis-jenis iklan yang anda ingin pasang.

Gampang bukan, coba deh untuk Mendapatkan Iklan dari MadAdsMedia, semoga bisa memberikan penghasilan tambahan bagi para blogger sejati. Demikian tulisan singkat di atas, semoga bermanfaat. Salam. [Kumpulan Adsen Blogspot]

undefined

Cara Membuat Banner Keren Blog/Web Sendiri

Sebuah banner fungsinya adalah untuk memberi informasi dengan media visual kepada setiap orang yang melihatnya. Mungkin sebagian orang ada juga yang menggunakan banner dengan fungsi lain seperti alat penggosok gigi dipagi hari atau sebagai alat penggaruk punggung, tapi itu tidaklah penting. Karena sekarang kita akan belajar bagaimana cara membuat banner untuk blog atau website yang unik dan elegan.

Contoh Banner yang sudah jadi bisa diliat DISINI
Artkel lainnya >> Cara Membuat Postingan SEO | Cara Membuat Twitter Box Follower di BLOG | Daftar Kode Warna HTML

1. Buat foto atau gambar dangan menggunakan Photoshop, Corel Draw, Paint dll. Pake sapu lidi juga bisa.

2. Upload image tersebut. Contohnya pake picasaweb.google.com atau yang lainnya. Pokoknya image tersebut harus masuk internet biar keren.

Kemudian simpan baik-baik URL gambarnya, kalo perlu dihapalin tiap hurup URLnya.

3. Copy kode HTML di bawah ini:

Ganti tulisan URL ANDA dengan URL tujuan Anda, bila baner tersebut ada yang klik.
Ganti JUDUL BANNER sekehendak Anda.
Ganti URL GAMBAR BANNER ANDA dengan URL image Anda yang sudah di upload tadi.
Ganti NAMA BLOG/WEB ANDA dengan nama blog/website Anda.

4. Masukan kode tersebut pada sela-sela kehimpitan blog Anda sekalian. Pake HTML/JAVASCRIPT.
Contoh Banner yang sudah jadi bisa diliat DISINI

Selain cara yang menyusahkan dan melelahkan seperti tutorial diatas. Anda juga bisa membuat Banner keren dengan cara yang lain. Tuhan memberikan jalan yang lebih mudah kepada hambanya dengan mengutus orang-orang yang terpilih untuk membuat layanan pembuat BANNER gratis. Silahkan Anda menuju TKPnya :

Contoh Banner yang sudah jadi bisa diliat DISINI

Banner berformat .GIV

http://www.cooltext.com
http://www.loogix.com
http://www.createagif.net
http://gickr.com
http://picasion.com
www.3dtextmaker.com/
www.flamingtext.com/

Banner berformat .FLASH

http://www.flashbannernow.com
http://www.quickbanner.com
http://www.flash-banner-maker-online.com
http://www.123-banner.com
http://bannersabc.com
www.bannersketch.com/
www.bannerfans.com/
www.banner4five.com/
www.effectgenerator.com/
www.flashvortex.com/

Setelah membuat 2 cara sekaligus diatas, sekarang adalah waktunya dimana Anda sendiri yang harus memutuskan. Mau pake cara kuno tapi berkesan dan membanggakan atau mau pake jasa orang lain. Sekian. Terimakasih

Contoh Banner yang sudah jadi bisa diliat DISINI
Artkel lainnya >> Cara Membuat Tombol Share Melayang di BLOG | Cara Membuat Kolom Tukar Link di BLOG | Cara Membuat Recent Post di BLOG - See more at: http://lavonex.blogspot.com/2013/04/cara-membuat-banner-keren-blogweb.html#sthash.6vv2wm0m.dpuf

undefined

Cara Membuat Banner Keren Blog/Web Sendiri

Contoh Banner yang sudah jadi bisa diliat DISINI
Artkel lainnya >> Cara Membuat Postingan SEO | Cara Membuat Twitter Box Follower di BLOG | Daftar Kode Warna HTML

1. Buat foto atau gambar dangan menggunakan Photoshop, Corel Draw, Paint dll. Pake sapu lidi juga bisa.

2. Upload image tersebut. Contohnya pake picasaweb.google.com atau yang lainnya. Pokoknya image tersebut harus masuk internet biar keren.

Kemudian simpan baik-baik URL gambarnya, kalo perlu dihapalin tiap hurup URLnya.

3. Copy kode HTML di bawah ini:

Banner berformat .GIV

http://www.cooltext.com
http://www.loogix.com
http://www.createagif.net
http://gickr.com
http://picasion.com
www.3dtextmaker.com/
www.flamingtext.com/

Banner berformat .FLASH

Modifikasi Popular Post untuk Template Gallery

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 03:00:00 +0000

Saya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :

Login ke Blogger dengan akun Anda
Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
Lalu masukkan kode berikut ini diatas ]]></b:skin> :

.PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

.PopularPosts ul{padding:5px 0}

.PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

.PopularPosts .item-content{position:relative;float:left;margin:0}

.PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

.PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

.PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

.PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :

Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Setelah ketemu, ganti dengan kode berikut ini :

<b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Terakhir, save templates lihat hasilnya.

Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat

Kumpulan Gambar Emoticon Lucu Onion Head untuk komentar blog

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 02:13:00 +0000

Hai sobat Uman??? wah semangat neh karena sekarang ada postingan bagus tentang membuat emoticon di komentar blog. :)

Sebelumnya udah tau kan apa itu emoticon? ya, gambar yang menampilkan emosi atau suasana hati seseorang yang ditampilkan di komentar ataupun chatting dsb. hehe

Nah, sudah pada dipasang belum emoticon-nya di blog kamu? kalo belum, berikut akan saya share salah satu emoticon yang bernama Onion Head atau bahasa indo-nya Kepala Bawang. hehe karena emang gambar kartun-nya berbentuk bawang :D

Okey, kita langsung saja ke TKP, cekibroott ...

Pertama cari kode <div class='post-footer-line post-footer-line-3'> atau <p class='post-footer-line post-footer-line-3'> di Kode HTML blog kamu, biasanya ada di dekat html bagian lompat ke widget Blog1, kemudian expand dan post nya di-expand juga. hehe, emang agak sulit untuk edit html di blogger versi terbaru :D Pokoknya untuk sekarang gitu dulu deh, nanti juga ngerti :p

Setelah ketemu kodenya, cari kode berikut dibawahnya:

</div>
</b:inclidable>

Kemudian Copy-Paste kode dibawah ini tepat ditengahnya:

- Seperti ini sob:
</div>
disini paste kodenya
</b:inclidable>

- Dan ini kodenya yang harus di Copy dan di-Paste di tengah kode diatas:

Nah, setelah selesai di-Paste, cari dulu kode </body> Biasanya ada di bagian paling bawah Kode HTML-nya.
Setelah ketemu, Copy-Paste kode berikut tepat diatasnya:

Langkah terakhir klik Simpan Template. Selesai :)

Jika, langkah-langkah diatas dilakukan dengan benar, sudah pasti hasilnya akan benar pula sesuai yang diharapkan. Terimakasih dan selamat mencoba ya sobat :)

Cara Membuat Animasi Gambar GIF di samping blogspot

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 02:08:00 +0000

Ahem, kembali posting nih sob, hehe. Kebetulan tadi kepikir ingin pasang animasi di samping blog nih gara-gara setelah memenangkan permainan standard windows 7 yaitu Spider Solitaire melihat animasi petasan yang bagus, hehe. Animasi gif nya bisa dilihat diatas ya :)

Saya mengambil animasinya menggunakan software perekam layar yang cukup bagus yaitu BlackBerry FlashBack, hasilnya cukup bagus kan? :)

Namun dalam postingan kali ini ane cuma ingin berbagi pengalaman saja bukan untuk share tips atau trik memasang animasi di blog ya, hehe.

Eh bercanda deh, soalnya ini sekalian aja ada cara yang mudah untuk memasang animasi di samping blog ini, yaitu dengan cara sbb:

Login ke blogger kamu
Copy kode berikut, dengan klik tombol Highlight All, Kemudian tekan CTRL+C di keyboard:

<style type="text/css"> #gbman{ position:fixed; bottom:0px; right:10px; z-index:+1000; } * html #gbman{position:relative;} .gbmancontent{ float:center; border:2px solid #000000; background:#ffffff; padding:10px; } </style> <script type="text/javascript">function showHideGBman(){ var gbman = document.getElementById("gbman"); var wman = gbman.offsetWidth; gbman.opened ? moveGBman(0, 30-wman) : moveGBman(20-wman, 0); gbman.opened = !gbman.opened; } function moveGBman(xman0, xfman){ var gbman = document.getElementById("gbman"); var dxman = Math.abs(xman0-xfman) > 10 ? 5 : 1; var dirman = xfman>xman0 ? 1 : -1; var xman = xman0 + dxman * dirman; gbman.style.top = xman.toString() + "px"; if(xman0!=xfman){setTimeout("moveGBman("+xman+", "+xfman+")", 10);} }</script> <div id="gbman"> <div class="gbmantab" onclick="showHideGBman()"> </div> <div class="gbmancontent"> <div style="text-align:right"> <a href="javascript:showHideGBman()"> [Tutup 2x]</a> </div> <blink>Selamat Berpuasa ya sobat, Semoga puasanya lancar :)<br />Marhaban yaa Ramadhan !!!</blink> <center> <a href="http://coretan-uman.blogspot.com/2013/07/hasil-gambar-gif-dari-blackberry.html" target="_blank"></a> </center> <p style=" margin-right:35px; font-size:10px;" > Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://coretan- uman.blogspot.com/">Coretan Uman</a> and <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://coretan-uman.blogspot.com/2013/07/hasil-gambar- gif-dari-blackberry.html">Get This Widget</a></p> <script type="text/javascript"> var gbman = document.getElementById("gbman"); gbman.style.center = (30-gbman.offsetWidth).toString() + "px"; </script></div> </div>

Kemudian buka Tata Letak di blogger kamu dan tambah gadget HTML, Paste-kan kode yang dicopy tadi, tekan Simpan.
Selesai !!!
Selamat mencoba :)

Tips: Anda bisa mengganti gambar animasi gif nya dengan mengganti url: http://4.bp.blogspot.com/-PV2D4Ya7PcA/Ud4XAQEip1I/AAAAAAAAA4s/eFyzgGLDqAw/s320/Petasan.gif dengan url gambar gif kamu yang baru.

Jika ingin mengganti posisi gambarnya, bisa dengan mengubah kode berikut:

<div style="position: fixed; bottom: 0px; right: 10px; blablabla........
Ganti Kode berwarna merah dengan kode dibawah ini.
*>> fixed; bottom: 0px; right: << berarti berada di bawah kanan blog.
*>> fixed; bottom: 0px; left: << berarti berada di bawah kiri blog.
*>> fixed; top: 0px; right: << berarti berada di atas kanan blog.
*>> fixed; top: 0px; left: << berarti berada di atas kiri blog.

Sekian Tips trik cara untuk memasang animasi gif di samping blogspot dengan mudah :) Semoga berhasil !!!

Cara Membuat Spoiler Versi Keren

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 02:04:00 +0000

Oke sob, kemaren udah janji kan mau bikin postingan tentang Cara Membuat Spoiler versi keren-nya di artikel sebelumnya: Cara Membuat Spoiler Sederhana :) Nah sekarang kita langsung ke TKP aja. Ini dia langkah-langkah mudah-nya:

Pertama login ke blogger
Masuk ke Edit HTML
Cari kode ]]></b:skin>
Copy Paste kode berikut tepat diatas kode ]]></b:skin>

.spoiler{background:#f9f9f9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_4EAqP1a4Oh6R2rcq2XLmIRDSstDzvo6DXNgJJlxlML5cl8U3NfEDPoFFZwFxYwkr3iMQZxSl6glWlVbhjrXNPnQjzt4NgpNM5iVFg-c7VF4I9MXJ7WE-CXQZLtZqfABpghqSpcYRmcYD/h120/gradient2.php.png) repeat-x;border:1px solid #ddd;padding:3px}.spoirel{font-family:arial;font-size:12px;color:#555;margin-bottom:0;font-weight:bold;text-align:left}

Klik Simpan Template
Kemudian Jika ingin membuat spoiler di widget, maka buka Tata Letak/Layout Blogger,
Klik Tambah Gadget, klik Tambah HTML/Javascript
Kemudian Copy Paste kode berikut:

<div class="spoiler"> <div class="spoirel">Judul Widget Anda<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = 'TUTUP'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Masukan Kode Widget Anda</div> </div> </div>

Ganti Teks yang berwarna diatas sesuai yang anda inginkan.
Jika ingin membuat spoiler lagi, tinggal copy paste kode diatas, tidak perlu edit html lagi :)

Selamat Mencoba, dan Semoga bermanfaat :)

Cara Membuat Efek Telur Ceplok di Blog

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 01:55:00 +0000

Efek Telur Ceplok

Kebetulan karena ada waktu memposting artikel kali ini saya akan memberikan tips bagaimana cara membuat efek telur ceplok. Efek ini cukup mengganggu penampilan blog, tapi kalau ingin mencobanya gak ada salahnya.

Berikut Cara Membuatnya :

Login ke Blogger
Masuk ke Tata Letak / Rancangan
Tambah Gadget, Lalu pilih HTML / Javascript
Masukan Kode Berikut Ini :

<script language="javascript"> nd_mode="eggs"; nd_vAlign="bottom"; nd_hAlign="right"; nd_vMargin="10"; nd_hMargin="10"; nd_target="_blank"; </script> <script language="javascript" src="http://blogtrikdantips-blogspot.googlecode.com/files/efektelur.js"></script>

5. Simpan.

Efek telur ini sangatlah ringan dan tidak mempengaruhi loading blog sobat, jika tertarik silahkan pasang widget keren ini.

Cara Membuat Permalink di Bawah Postingan

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 01:51:00 +0000

Permalink

Fungsi dari Permalink ini adalah untuk meningkatkan kualitas SEO Blog kita dan selain itu juga dapat menghindari para copaser agar tidak Meng-copy paste sembarangan, tetapi dengan memasang sumbernya. Pengen tahu Cara Membuat Permalink di Bawah Postingan? silahkan ikuti langkah - langkahnya dibawah ini.

Screenshoot :

Berikut Cara Membuatnya :

Login ke Akun Blogger
Masuk ke Dashboard, Pilih Edit HTML
Centang pada "Expand Template Widget"
Cari kode <data:post.body/>
Lalu letakan kode dibawah ini tepat dibawah kode <data:post.body/>

<div style='border: 1px solid #dfdfdf; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color: #f5f5f5; text-align: left;'><b:if cond='data:blog.pageType == "item"'> Sobat sedang membaca artikel tentang <strong><u><a expr:href='data:post.url'><data:blog.pageName/></a></u></strong>. Silahkan baca artikel <strong><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></strong> Tentang <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<strong><a expr:href='data:label.url' rel='tag'><data:label.name/></a></strong>
<b:if cond='data:label.isLast != "true"'>|</b:if>
</b:loop> yang lainnya.</b:if></b:if></div>

Simpan template.

Selamat mencoba dan salam sukses !

Menambahkan Elemen Baru di Bawah Header

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 01:48:00 +0000

Pertama-tama, sebelum kita mempelajari lebih jauh tentang menambahkan elemen baru di bawah header, kita harus tahu dulu apa sih header itu? Header adalah informasi awal atau data yang berguna untuk kategorisasi atau transmisi tujuan utama sebuah blog. Header merupakan unsur yang paling penting dalam sebuah template karena setiap pengunjung yang datang ke blog Anda pertama kali yang dilihat adalah headernya. Contohnya bisa sobat lihat pada gambar berikut ini ...

Untuk membuat kolom baru tidaklah sesulit yang anda bayangkan, anda hanya cukup menambahkan sedikit kode css serta HTML kedalam kode template anda. Mau tahu caranya? silahkan ikuti langkah berikut :

Login ke blogger dengan ID anda.
Klik Rancangan.
Klik tab Edit HTML.
Klik Tulisan Download Template Lengkap untuk berjaga-jaga.
Copy kode berikut, lalu paste di atas kode ]]></b:skin>

%23under_header%7B%0Amargin%3A10px%200%3B%0Apadding%3A1%25%3B%0Awidth%3A98%25%3B%0A%7D
Cari kode yang mirip dengan kode di bawah ini :

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>
</b:section>
</div>
Copy kode berikut lalu paste persis di bawah kode tadi :

%23under_header%7B%0Amargin%3A10px%200%3B%0Apadding%3A1%25%3B%0Awidth%3A98%25%3B%0A%7D
Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda tersimpan.
Klik tab Elemen Halaman. dan struktur layout anda akan menjadi seperti ini.
Sekarang sobat sudah mempunyai elemen yang langsung persis di bawah header, silahkan tambahkan elemen yang inginkan.
Selesai.

Kode-kode di atas Saya encrypt. Walaupun sedikit membingungkan dan aneh di mata sobat tetapi tetap berhasil jika dicoba. Silahkan dicoba .

Cara Mengganti Style Font Blog

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 01:44:00 +0000

Sobat blogger pasti pernah mengganti / mengutak-atik font di post editor. Namun kali ini berbeda, kita akan mempelajari bagaimana caranya mengganti style font di blog. Kita bisa mengganti font yang ada di header, title, dll.

Mengganti font ada dua cara, yaitu :

Pertama, dengan metode kode CSS yang kita akan menggunakan font yang bisa kita pilih.

Kedua, dengan metode Cufon yaitu metode yang menggunakan jenis fontnya bisa kita upload dan kreasikan sendiri. Kita akan membahas metode ini pada artikel selanjutnya, jadi harap bersabar.

Berikut tutorial dengan menggunakan metode CSS.

1. Login akun blogger kamu.

2. Masuk ke Rancangan > Edit HTML.

3. Lalu cari kode CSS body {

Sobat blogger tinggal ganti jenis text/font (font-family, font-size, letter-spacing, word-spacing, line-height). Biasanya kita kesulitan untuk mengatur font-family, font-size, letter-spacing, word-spacing, line-height yang tepat buat blog kita . Oleh karena itu, Saya sudah menyiapkan beberapa alat bantu untuk font di bawah ini.

Nah gampang kan ? tinggal pilih, generate lalu copy code nya ke dalam body {

Misal :

body {
background:#E7E2DA
font-family: "Lucida Console", Monospace;
font-size: 11px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;
}

Nah begitulah hasilnya.

NB:
font-family: "Lucida Console", Monospace;

font-size: 11px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

Untuk Mengatur Font antar judul blog dan judul posting, sobat blogger bisa cari css h1{ untuk judul blog dan h3{ untuk judul posting .

Seperti di atas, sobat blogger tinggal masukin css kode fontnya,
Misal :

h3{
font-size:28px;
text-align:center;
font-family: Comic Sans MS;
}

Mudahkan? Silahkan Anda berkreasi sendiri.

Cara Membuat Label Cloud Putar - Cloud Blogumus

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 01:37:00 +0000

Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template. Saat ini model atau bentuk label ada 3, label umum atau yang biasa (standard), label cloud, dan label cloud berputar. Yang akan kita bahas sekarang adalah memasang label cloud berputar di blog.

Label cloud berputar ini terlihat lebih menarik karena gerakannya yang dinamis sehingga dapat menarik perhatian para pengunjung blog kita dan label cloud ini gerakannya juga mengikuti cursor.

Sebenarnya untuk membuat label cloud berputar ini membutuhkan kode HTML yang lumayan agak panjang dan sobat harus menambahkannya pada template Anda, jadi mengedit template, ada baiknya backup terlebih dahulu template Anda.

I. Langkah Pertama

Login ke Blogger dengan ID Anda
Klik Tata Letak
Klik tab Edit HTML
Download dahulu template sobat dengan mengklik Download Template Lengkap
Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :
<b:section class='sidebar' id='sidebar' preferred='yes'>
Copy kode berikut ini setelah kode diatas :
<b:widget id='Label99' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "250", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Kemudian Simpan Template.

II. Langkah Kedua

Mengubah lebar dan tinggi kolom serta warna background
Angka "240" adalah lebar kolom
Angka "300" adalah tinggi kolom
Sedangkan #ffffff adalah kode untuk backgroud
Merubah warna font
so.addVariable("tcolor", "0x333333");
Merubah ukuran font
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");

Jika dalam membuat label cloud ini tidak berfungsi, silahkan Anda ganti label text menjadi label cloud. Perhatikan gambar dibawah ini :

Semoga bermanfaat :D

Cara Mengganti Kursor (Panah) Mouse Di Blog

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 01:33:00 +0000

Gambar kursor yang disediakan situs penyedia gambar ini http://www.totallyfreecursors.com/ banyak sekali, jadi kita tinggal memilih sesuai selera aja. Untuk cara memasang gambar kursor ini di blog, kita harus menambahkan sedikit saja kode CSS supaya bisa dipasang pada template. Dibawah ini ada beberapa sample gambar untuk kursor yang saya ambil berikut URL alamat kursor tersebut.

URL : http://downloads.totallyfreecursors.com/thumbnails/monkey-ani.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/aliendance.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/tail2.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/banana1.gif

URL : http://downloads.totallyfreecursors.com/thumbnails/bullseye-ani.gif

Cara mengganti gambar kursor di blog :

1. Login ke dashboard Blogger sobat.

2. Pilih Rancangan > Edit HTML, centang Expand widget template.

3. Carilah kode </head> pada template anda dengan menggunakan Ctrl F.

4. Copy kode CSS dibawah ini dan letakkan tepat diatas kode </head> .

<style type='text/css'> HTML,BODY{cursor: url("http://downloads.totallyfreecursors.com/thumbnails/sweden.gif"), auto;} </style>

5. Simpan template anda dan lihat perubahan pada gambar kursor

6. Jika sobat ingin mengganti gambar kursor dengan gambar yang lain, sobat tinggal ganti URL gambar yang berwarna merah dengan URL gambar pada sample diatas atau sobat bisa langsung browsing sendiri ke TKP di http://www.totallyfreecursors.com/

Cara Membuat Text Box Di blog

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 01:31:00 +0000

Text box area biasanya digunakan untuk memasang kode-kode HTML yang dimaksudkan supaya bisa dicopy oleh pengunjung.

Untuk membuat text box area anda hanya membuat kode dibawah ini lalu silahkan pasang di gadget yang anda ingin kan

Seperti biasa cara pasangnya Login Blogger–>Layout–>Add Gadget–>HTML/Javascript–>Lalu isikan kode2nya–>Save

Kode Untuk text box area tanpa tombol Highligh sebagai berikut:

<p align=”center”><textarea name=”code” rows=”3″ cols=”40″> Isi text anda atau kode2 HTML</textarea></p>

Silahkan ganti angka “rows” yang merupakan tinggi kolom dan “cols” yang merupakan lebar kolom sesuai keinginan anda

Cara Memasang Screen Loading di Blog

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 01:26:00 +0000

Cara Memasang Screen Loading di Blogger - Salah satu Gaya yang sering di gemari para blogger untuk memper cantik tampilan blogger yaitu dengan Cara Memasang Screen Loading di Blogger. cara ini adalah salah satu cara untuk memper indah blog seperti Website.

Salah satu manfaat memasang Screen Loading di Blogger yaitu pengunjung blog tidak akan bisa melihat proses Loading tampilan blog, Jadi pengunjung langsung melihat Tampilan blog yang sudah utuh tampa harus melihat Loading tampilan blog anda.

Yang harus anda lakukan adalah :

1. Login Ke Akun Blogger sobat

2. Klik Rancangan > Edit HTML.

3. Cari kode ]]></b:skin> , Untuk mempermudah mencari silahkan gunakan CTRL+F.

4.Jika sudah ketemu letakan Kode HTML di bawah ini persis di atas kode ]]></b:skin>

.QOverlay {
    background-color: #000000;
    z-index: 9999;
}

.QLoader {
    background-color: #CCCCCC;
    height: 1px;
}

.QAmt {
    color:#FF530D;
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
}

5. Selanjutnya cari </head>, taruh kode di bawah ini persis di atas kode </head>

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://idub.007sites.com/donor_ilmu/queryLoaderpre.js' type='text/javascript'/>

6. Berikutnya Cari </body>, taruh kode di bawah ini di atasnya kode </body>

<script>
QueryLoader.selectorPreload = "body";
QueryLoader.init();
</script>

7. Save

Oke , Lihat Blog dan lihat perubahannya.

Cara Menambahkan Recent Posts + Comment Dengan Javascript

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 01:25:00 +0000

Cara Menambahkan Recent Posts + Comment Dengan Javascript - Biasanya kebanyakan dari sobat blogger membuat recent posts dan recent comment pasti menggunakan fasilitas dari gadget blogger. Cara itu memang mudah dan simple, tapi sobat tidak akan bisa membuat lebih dari 5 dengan menggunakan fasilitas blogger, makanya dengan javascript ini dimudahkan untuk membuat recent posts + recent comment ini.

Selain itu, kamu juga bisa menambahkan recent posts / recent comment ini pada tabview widget kamu. Dibanding cara pertama (menggunakan Gadget Blogger), cara kedua ini memiliki kelebihan dimana jumlah judul posting atau komentar dapat diatur sekehendak kita (bisa lebih dari 5). Untuk menggunakannya kamu bisa mengikuti langkah-langkah berikut:

Login ke akun blogger kamu
Masuk ke tab rancangan, elemen laman
Setelah masuk ke Elemen Halaman, klik Tambah Gadget.
Setelah itu pilih HTML/JavaScript untuk ditambahkan, seperti nampak pada gambar berikut:
Kemudian masukkan script berikut dan ubah NamaBlogKamu dengan nama blog kamu sendiri:

Kode untuk Recent Posts:

var numposts = 10;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

var standardstyling = true;

</script>

Keterangan variabel:
- numposts = 10; artinya 10 posting yang ditampilkan (maksimal 25 posting)

- showpostdate = false; artinya tanggal posting tidak ditampilkan (kalo mau ditampilkan false-nya ganti dengan true).
- showpostsummary = false; artinya ringkasan posting tidak ditampilkan.
- numchars = 100; artinya banyaknya karakter (huruf) untuk ringkasan posting yang ditampilkan adalah 100 huruf.
- standardstyling = true; artinya menggunakan type standard.

Jika ternyata tidak muncul bullets pada setiap judul Recent Posts kamu (karena setiap template selalu berbeda), maka tambahkan perintah <ul> pada script terakhir dan ditutup dengan </ul> (lihat contoh pada script Recent Comments yang kedua).

Kode untuk Recent Comments:

var numcomments = 10;

var showcommentdate = true;

var showposttitle = true;

var numchars = 100;

var standardstyling = true;

</script>

Keterangan variabel:
var numcomments = 10; artinya 10 komentar yang ditampilkan.
var showcommentdate = true; artinya tanggal komentar ditampilkan.
var showposttitle = true; artinya menampilkan judul posting yang dikomentari.
var numchars = 100; artinya banyaknya karakter (huruf) komentar yang ditampilkan adalah 100 huruf.

Jika Recent Comments kamu ingin menggunakan bullets, seperti pada Recent Comments pada blog ini, gunakan script berikut:

var numcomments = 10;

var showcommentdate = true;

var showposttitle = true;

var numchars = 100;

var standardstyling = true;

</script>

Setelah memasukkan kode script dan melakukan editing variabel yang disesuaikan dengan keinginan kamu. Lakukan Preview (Pratinjau) untuk melihat hasilnya. Jika sudah OK, simpan hasil kerjaan kamu. Sekian dulu postingan saya mengenai membuat recent posts + recent comment, semoga bagi kamu yang ingin membuat recent comment bisa terbantu dengan postingan ini.

Nah, selesai dah. Selamat mencoba.....

Cara Membuat Spoiler di Blog/Forum

noreply@blogger.com (Anonymous) — Tue, 23 Jul 2013 01:22:00 +0000

Pada pembahasan kali ini kita akan membahas tentang membuat spoiler di blog/forum. Spoiler kebanyakan digunakan untuk meringankan load konten agar tidak terlalu berat.
Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler

Anda sudah sering lihat Spoiler di kaskus atau forum-forum untuk nyembunyikan gambar, link dan konten lainnya. Spoiler ada dua yaitu untuk forum misalnya kaskus dan satunya lagi untuk dipergunakan di blog/web. Keduanya memiliki kode yang berbeda.

• Spoiler Forum misalnya di KASKUS:
[spoiler=judul spoiler]isi spoiler[/spoiler]

Ganti tulisan yang berwarna hijau sesuai judul dan isi spoiler yang anda kehendaki.

• Spoiler untuk blog/web:
Menyembunyikan konten tertentu dari sebuah halaman blog/website diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Begitupun dalam software forum semacam vBulletin, Spoiler pasti banyak digunakan.

Berikut kode yang bisa digunakan dalam membuat spoiler di blog :

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tentang bla..bla.bla.. </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

isi spoiler...

</div></div></div></div>

Kode HTML diatas akan memberikan hasil

Cara menambahkan Widget User Online di blog

noreply@blogger.com (Anonymous) — Mon, 22 Jul 2013 20:42:00 +0000

Sebelumnya saya akan jelaskan dulu tentang Whos Amung Us, Whos Amung Us adalah widget untuk mengetahui User atau pengunjung pada suatu blog yang sedang Online atau berkunjung ke blog kita, selain itu Whos Amung Us berguna untuk mendeteksi Artikel yang di Copy Paste oleh pengunjung dalam 24 jam, Oke langsung saja kelapangan untuk Membuat User Online Di Blog Dengan Whos Amung Us....

Ok, hari ini mau posting tentang Tutorial Blog yaitu tentang Cara Membuat User Online Di Blog, Pokoknya ini beguna banget deh bagi rekan-rekan yang sering ngbloging biar tau berapa jumlah pengunjung di blog ya, yang saya mau share sekarang Cara Membuat User Online lewat Whos Amung Us, langsung aja kita ikutin Tutorianya di bawah ini

Langkah-langkahnya sebagai berikut :

1. Login Ke Blogger sobat

2. Klik Rancangan

3. Lalu Klik Elemen Laman

4. Klik Tambah Gadget

5. Pilih HTML/Java Script

6. Masukan Kode dibawah ini

7. Simpan dan Lihat Hasilnya :D

Modifikasi Tampilan Read more

noreply@blogger.com (Anonymous) — Mon, 22 Jul 2013 20:40:00 +0000

Pada pembahasan kali ini akan mempelajari tentang bagaimana caranya customization / modifikasi tampilan read more di homepage blog. Kita bisa merubah segala sesuatu yang kita inginkan sesuai selera kita.

Disini saya hanya akan berbagi sedikit yang diperlukan tentang code HTMLnya, selain dari itu silahkan sobat blogger kreasikan sendiri. Walaupun sudah ada fungsi Insert jump break pada post editor untuk melakukan fungsi auto read more, namun itu hanya akan berfungsi pada templates pendukung langsung dari blogger dan kemungkinan tidak akan mendukung dari templates lain.

Sebelumnya Saya harus berterima kasih kepada Kang Rohman karena telah memberikan ilmu pengetahuannya dan sharing sehingga kami bisa. Nah sekarang ikuti tutorial berikut tentang bagaimana cara modifikasi tampilan read more.

Sebagai dasar pengetahuan, kode read more blogger adalah seperti ini :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>

Dengan mengetahui kode dasarnya, maka tentu saja kita dapat membuat berbagai kreasi.

* Agar read more tampil di sebelah kanan

Secara default " Read more " akan tampil di sebelah kiri. Jika anda berkeinginan agar read more tampil di sebelah kanan, anda bisa menambahkan kode tambahan seperti ini :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>

<div style='float:right;padding:10px 0px 5px 0px'>

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

</div>

</div>
</b:if>

Atau jika anda lebih suka memasang pada CSS, bisa seperti ini ;

Simpan ini di atas kode ]]></b:skin>

.readmore { float:right;padding: 10px 0px 5px 0px; }

dan pasang ini di bagian body nya ;

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class='readmore'>

<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>

</div>

</div>
</b:if>

* Agar Read more ditampilkan tebal

Agar tampilan "Read more »" atau " Read more » " bisa tampil dengan huruf tebal, anda cukup menambahkan kode <strong>Read more »</strong> atau <b>Read more » </b>. Contoh :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<strong><a expr:href='data:post.url + "#more"'><data:post.jumpText/></a> </strong>
</div>
</b:if>

* Agar Read more tampil plus Judul Posting

Tulisan read more anda bisa tampil bersama dengan tulisan judul posting anda, contoh kodenya bisa seperti ini :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><data:post.jumpText/> → 
<data:post.title/></a>
</div>
</b:if>

* Agar Read more diganti dengan banner

Apabila anda menganggap tampilan huruf kurang menarik, anda bisa menggantinya dengan dengan tombol atau banner, misal banner seperti ini :

Format kodenya seperti ini ;

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src='URLgambarmu' alt='read more'/></a>

</div>
</b:if>

Contoh nyata seperti ini :

<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAOZnzTHxhbKxDdWtab3SOAmMxsBAfZEtavF0JX7BcdRqFJ8cR1j1_6BAJXG1eUG0-FCglJHDqYLuXM4kHCrXY92EmOsE-8-dJNnm8hdDzX5PDaDiXCpGdf41QI0VU2JRVOuPLx6hA5ao/[1].png' alt='read more'/></a>

</div>

</b:if>

Dan anda bisa menciptakan puluhan atau bahkan ratusan kreasi untuk tampilan read more ini agar blog anda tampil menarik.

Masih pusing dimana menempatkan hasil kreasi read more mu? berikut gambaran langkah-langkahnya :

1. Silahkan login ke blogger dengan ID anda.
2. Klik Tata Letak.
3. Klik tab Edit HTML.
4. Beri tanda centang pada kotak kecil di sampil tulisan " Expand Template Widget "

5. Carilah kode yang mirip seperti Ini :

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> 
</div>

6. Silahkan ganti kode di atas dengan hasil kreasimu seperti yang di contohkan kang rohman tadi di atas.
7. Klik tombol SIMPAN TEMPLATE
8. Selesai.

Cara show/hide Facebook Fan Page di Blog

noreply@blogger.com (Anonymous) — Mon, 22 Jul 2013 20:39:00 +0000

Bagi blogger yang mempunyai facebook fanpage sendiri, adalah biasa untuk meletakkan fanpage tersebut di blog. Biasa untuk letakkan di sidebar blog, untuk kali ini admin akan tunjukkan pula cara untuk sembunyikan facebook fan page ditepi blog anda

Langkah - langkah sembunyikan Fb fan page adalah seperti di bawah.

Langkah 1:

i. Dari dashboard > design > edit HTML

ii. Menggunakan fungsi find, (ctrl + F), cari kod </head>

iii. Copy dan paste kod di bawah SEBELUM kod </head>

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

cth:

Note: Jika blog anda sudah mempunyai kode di atas, abaikan langkah 1, langsung saja ke langkah 2.

iv. Setelah selesai klik Save Template

Langkah 2:

i. Dari dashboard > design > page element > add a gadget > HTML/javascript

ii. Copy dan paste kod di bawah dalam ruangan HTML/javascript yang anda telah buka

<script type="text/javascript">
//
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=URL PAGE ANDA&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://synasmedseo.blogspot.com/2012/02/cara-menyembunyikan-facebook-fan-page.html">Tutorial Here</a></span></div></div>

Note: Gantikan dengan "URL PAGE ANDA"

Menambahkan Random Posts Widget

noreply@blogger.com (Anonymous) — Mon, 22 Jul 2013 20:37:00 +0000

Sebelumnya Saya pernah sharing cara menambahkan recent posts dengan javascript. Namun kali ini kita akan mempelajari cara menambahkan random posts widget. Random posts sangat berbeda sekali dengan recent posts. Recent posts hanya menampilkan artikel terbaru yang tentunya dimuat hanya artikel baru tsb, sedangkan random posts akan memuat artikel yang acak, dan menampilkan artikel yang baru maupun lama serta artikelnya akan sirih berganti dan bisa menimbulkan pageviews yang tinggi.

Contohnya bisa sobat lihat pada gambar di bawah ini.

Berikut ini adalah script untuk menampilkan postingan secara acak di blogspot , script ini saya peroleh dari

Catatan:
Angka 5 pada numofpost=5 adalah jumlah postingan yang akan ditampilkan secara acak ,bisa diganti dengan kebutuhan anda.

Prosedur yang harus anda lakukan:
1. Login ke blogger
Pilih Tata Letak , Elemen Halaman , Tambah Gadget ,pilih HTML/Javascript
Masukkan kode javascript di atas ke dalam gadget HTML /Javascript.

Cara Membuat dan Memasang Shoutbox di Blog

noreply@blogger.com (Anonymous) — Mon, 22 Jul 2013 20:35:00 +0000

Shoutbox atau yang lebih dikenal dengan nama buku tamu ini telah digunakan oleh puluhan bahkan ratusan ribu blogger dunia untuk digunakan sebagai jejaring sosial hangat untuk berkomunikasi sesama blogger.

Selain itu, shoutbox ini juga digunakan untuk request sesuatu kepada sang admin ataupun untuk mengkritik bagaimana blog ini, bagaimana blog itu, dan sebagainya. Kan sudah ada kolom komentar? Buat apa susah-susah bikin shoutbox, malah bikin berat aja. Sobat pasti bertanya-tanya tentang itu. Memang kolom komentar juga dibuat dari sononya, tapi hanya untuk req atau koment terhadap artikel yang di komentarin tsb, kalo dia kritik di artikel yang bukan seharusnya, kita juga yang pusing kan.

Nah sobat blogger wajib gunain ni shoutbox. Ga terlalu berat kok buat di pasang di blog, memang kita harus perlu juga memerhatikan berat blog. Tapi shoutbox ini perlu juga lho untuk sobat lain yang ingin menyampaikan saran dan kritiknya.

Cara membuat shoutbox di blog :

1. Buka situs http://www.shoutmix.com kemudian pada halaman website tersebut anda klik CREATE YOUR SHOUTBOX NOW. Seperti pada gambar dibawah ini.

2. Setelah itu anda akan dibawa ke halaman pendaftaran seperti dibawah ini, dimana pada halaman tersebut anda harus mengisi semua data yang diperlukan dengan benar.

3. setelah anda mengisi data-data anda pada halaman pendaftaran tadi, kemudian anda akan diminta untuk memilih style ataupun bentuk tampilan shoutbox yang akan anda pasang pada blog anda nantinya. Seperti pada gambar dibawah ini.

4. Setelah anda pilih salah satu style shoutbox seperti pada gambar di atas dan setelah anda mengisi kode verifikasinya juga maka proses pembuatan account shoutbox anda telah selesai. Dan anda sudah bisa memasang shoutbox dengan style yang anda pilih tadi pada blog anda.

Cara memasang shoutbox di blog :

Login to BloGGeR : Tulis User Name atau Alamat email kemudian tulis Password (sandi) sampeyan.
Dashboard (Dasbor) :Sampeyan akan di hantarkan ke halaman Dasboard. KLIK link "Layout (Tata Letak)".
Page Element (Elemen Laman) : Di halaman ini akan terlihat "blok-blok" desain blog kita. Terlihat ada beberapa elemen penyusun blog (Atas, tengah, samping kanan atau kiri dan bagian bawah). KLIK "Tambah Gadget" (dalam box garis terputus-putus), yang terletak di bagian samping kanan atau kiri (Sidebar).
HTML/Javascript : Setelah beberapa saat akan terlihat sebuah window baru yang di dalamnya terlihat beberapa jenis widget yang bisa di tambahkan ke blog sampeyan. Tarik halaman lebih ke bawah dan temukan box penambahan widget yang bertuliskan "HTML/Javascript". KLIK tepat di teks "HTML/Javascript" dan tunggu hingga muncul box tempat kode html nantinya di simpan.
Paste Kode Shouthbox : Box HTML/Javascript seperti di atas adalah tempat menyimpan kode css, javascript atau kode html. Copy kode shoutbox yang sampeyan dapatkan kemudian paste-kan di sini.
SAVE/Simpan KLIK "SAVE/Simpan". Setelah proses penyimpanan selesai, lihatlah shoutbox sampeyan dengan membuka blog.

Contoh Kode html shoutbox (dari --> www.shoutmix.com) :

<!-- Begin ShoutMix - http://www.shoutmix.com -->

<iframe title="Garyu78" src="http://www5.shoutmix.com/?Garyu78"

width="200" height="350"

frameborder="0" scrolling="auto">

<a href="http://www5.shoutmix.com/?Garyu78">View shoutbox</a>

</iframe><br /><br />

<!-- End ShoutMix -->

Beberapa situs penyedia shootbox gratis :

http://www.shoutmix.com
Setelah tiba di Shouthmix.com, teruskan KLIK "Create Shouthbox" (perlu registrasi).
http://www.freeshoutbox.net
Lanjutkan dengan mengisi kolom registrasi.
http://oggix.com
KLIK "Register" di ujung kanan-atas, kemudian Kembali KLIK "Register" (kanan-atas). Bila mau sekali KLIK "Register", KLIK saja di sini.
http://www.myshoutbox.com
KLIK link "JOIN NOW!" (di kolom sebelah kiri), kemudian lakukan registrasi. Tampilan shoutbox lumayan cantik!
http://www.sbox.ws
Silahkan langsung isi kolom registrasi.
http://www.shout-box.com
KLIK "SignUp" untuk registrasi.
http://www.yellbox.com
Langsung lakukan "Registrasi".
http://shoutbox.widget.me
Langsung ambil "kode html shoutbox" tanpa proses registrasi.
http://www.shoutbox.us
KLIK "JOIN NOW!" untuk dapatkan widget shoutbox.
http://site.bumpin.com/.
http://free-shoutbox.net.
Setelah terbuka halaman shoutbox.net, KLIK "Register Here"

cara membuat javascript image loader for blog.

noreply@blogger.com (Anonymous) — Mon, 22 Jul 2013 20:34:00 +0000

Pada kesempatan kali ini, saya akan berbagai tentang cara membuat javascript image loader for blog.

Javascript loading atau biasa dikenal juga sebagai javascript pre-loading dan javascript image loader, sebenarnya adalah sebuah fungsi yang tak jauh berbeda. Kesemuanya digunakan untuk menandai proses loading website atau blog. Dengan memanfaatkan fungsi seperti ini, ketika sebuah blog dibuka, maka akan ditampilkan gambar/image atau teks yang memberi pertanda bahwa blog sedang dalam proses loading/membuka. Sesuai dengan namanya, Javascript DIV loader ini memang didesain dengan memanfaatkan kode/elemen DIV di dalam javascripnya, yang difungsikan untuk membentuk konfigurasi penataan dan tampilan gambar/image serta teks.

Untuk membuat dan memasangnya di blog juga teramat mudah karena hanya kita melakukan pada rancangan edit HTML saja.

Untuk membuatnya silahkan ikuti langkah berikut ini.

1. Login ke akun blogger sobat.
2. Lalu masuk ke Rancangan > Edit HTML.
3. Kopy kode di bawah ini lalu pasang di bawah kode <head>:

<script src='http://tc.comze.com/js/preloadpage.js' type='text/javascript'/>

4. Setelah itu cari kode <body>, lalu ganti dengan kode berikut:

<body onLoad='waitPreloadPage();'>
<div id='prepage' style='position: fixed; _position: absolute; top: 0px; right: 0px; clip: inherit; _top: expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-offsetHeight); _left: expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth-offsetWidth); width: 100%; height: 100%; background-color: #000; padding: 0px; border: 0px; text-align: center; filter: alpha(opacity=75); -moz-opacity: .75; opacity: .75; font-family: verdana; font-weight: bold; color: #ccc;'>
<center><p style='margin-top: 250px;'><img src='http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/CircleGreenBlackLoader.gif' style='border: 1px solid #555; padding: 2px;'/><br/>Tunggu Beberapa Saat lagi...</p></center><div class='Created by_synasmedseo'>Copyright 2012 <span class='esm4'>synasmedseo.blogspot.com</span> - All rights reserved
</div>
</div>

:::Keterangan :
- Untuk tulisan yang Bercetak berwarna merah, dapat sobat ganti sesuka hati anda ..
- dan teks yang berwarna orange, sobat bisa ganti dengan URL gambar sobat sendiri.

5. Save template, dan lihat hasilnya.

Berikut langsung kami sediakan gambar-gambar untuk status loading blog sobat:

http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/ajax-loader_thumb.gif

http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/CircleGreenBlackLoader.gif

http://i1216.photobucket.com/albums/dd361/Garyu70/Blog/ajax-loader.gif

Note: Untuk sobat yang menggunakan fasilitas ini di blognya, tolong jangan dihilangkan ya nama blog dari sini. Sebenarnya Saya cukup lama mengedit ini untuk agar jadi. Mohon pengertiannya.