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

 

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):

<style type="text/css">
#topbar{
position:absolute;
visibility: hidden;
width: 350px;
z-index: 100;
padding:5px;
background-color: #FFFFFF;
border: 1px solid #333333;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
margin:0 auto 10px;
float:left;
color: #505050;
text-align: justify;
font-size: 12px;
font-family: Verdana, serif;
filter:alpha(opacity=85);
-moz-opacity:0.85;
opacity:0.85;
}
</style>
<script src="http://ekosusanto.googlecode.com/files/ads_pop_up.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=0
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div align="right"><a href="" onclick="closebar(); return false"><button>Tutup</button></a></div>

<script src="http://kumpulblogger.com/sca.php?b=168329" type="text/javascript"></script>

<font face="arial,sans-serif" color="#83878c" style="line-height: 8px; font-size: 9px; text-decoration:underline;"><a href="http://lisaariyansyah.blogspot.com/" target="_blank">widget by arieadie</a>
</div>

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

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:

<center> <a target="_blank" href="URL ANDA" title="JUDUL BANNER"><img src="URL GAMBAR BANNER ANDA" alt="NAMA BLOG/WEB ANDA" /></a></center>
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

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:

<center> <a target="_blank" href="URL ANDA" title="JUDUL BANNER"><img src="URL GAMBAR BANNER ANDA" alt="NAMA BLOG/WEB ANDA" /></a></center>
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

Modifikasi Popular Post untuk Template Gallery

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 :

1. Login ke Blogger dengan akun Anda
2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
3. 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.
4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
5. 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.
6. 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 == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <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 == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <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/>
               <!-- (4) Show snippets and thumbnails -->
               <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>
7. 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 == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <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 == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <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/>
               <!-- (4) Show snippets and thumbnails -->
               <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>
8. 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

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:

<b:if cond='data:blog.pageType == "item"'> <div style=' width: auto; text-align: left; border: 4px double #0084ce;background: #FFFFFF; padding: 10px; color:#000000; font-weight:bold; margin-left:40px;'> <h3 style='text-align: center;'> <a style='color: #3d85c6;'>Kode Smiley Untuk Komentar </a></h3> <br/> <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaZ__q7SknOtI2rbs_1aRf7F0sqURzqtIw1pGNL20tJgql_Uw4AwAdIKaf4rpEDsqkHj68VfHQNZcKHr0XEYUHdVXSVTuC_QpxCTuAm5vRV6zrU2fEXW3KdsMw43u7BWHdzgK6NQouXegf/s1600/a.gif'/>:a   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3w4nouuZvRebnwHCfV01W84LFuK29ClFULmy1X3OGqf69t9J2TSfyoeFM3FHg3ZCdc9RqVplYEgfH9uhk8AWy_bcSLm_GoTJtcFVP4vyqd2zIPmn_ANvyRX6Wu5-V7XFN06WHiTovvMbh/s1600/b.gif'/>:b   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNhovZSlJeXOLYvIBuSaFLARngcx_T_j1lwgge3-LUhEW-FyR8gJ54tthZl2oQKvbWXYuNNv83aW5s0UeJLmwkWedVL6NvSYs5ViUwvqhrMlSYluRzlB3kRiDef-4LEyAvrOBtMC7tAIUe/s1600/c.gif'/>:c   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYQs7ohdwsDT9lcJrGA1DULGEP408oR7kyubJArAPY2Pu2dgwPztZGi-LwYwkZwJGka1Otg13Os5tyo7qDqfL0MDuQ01Lt3O8J0NJ3X7hjg6BGsI3qQ0G8OAmBNZVleURsKoNdkkVfb0pc/s1600/d.gif'/>:d   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1o5WAgcx8PwXA0J3JFaGCNfT38nvDmEzoqfbE4eUNxhRm7o_bX9DV5C5TpVksE10pOKEyQGYC3GEYQRb3ToPIIEOlRT56osf3z2GvTMVfu7G00A1nPNGxescksGKsHw9NjrA9dikUVQ-f/s1600/e.gif'/>:e   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5kfYpadMzHZijbt57Z2y-EyCK20bE7O9BEKX06r-6Ptnvt00oPDODkD37gOJ80c0234Dq_CI-rG4NR9LjHQWmJwrOPNx69ObE6vESkr16Kj8Jc7nDzPiXzD65S_vSeb4bmRvE3xJvVJ9b/s1600/f.gif'/>:f   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixqEbaVHJOKYCAfsCSVTsIhtBMdlmebIiP7BJV6VdaFzAexk7so9Nr74lVgl88w1SUm8CptDQ7rRuKcOob4VlO8u1FGoh4mcYs4076UCRECB5ZnzpE0mlPVO37YpZPQlVmHEwjsRfsRfWU/s1600/g.gif'/>:g   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMlGDi7fth8rk5EajZMA8IA6n_jGf0_0rknWTRrbu4ErnRA6lR2bpSClWrd-Po5rv8oLqARlufWMNe_Uba9NK6-QhHW7GZ7dCJ8uLivRTp-B3hYRyEPH-z72cCgRIo8D3ukMQnnABdBEYN/s1600/h.gif'/>:h   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU7R4GGSbOau4vjRNV6s1LyjB_GKf8O5h6aR6FWAoyGX8Hd9SJA8Uvj690yabXxDq7IfXBPb9R69PhY0sZPl3P9Scr6_G-lAYwLIHJXYLcPVcsKiCjdjQ7-qP2InMQX669EdB7t0HlLaxG/s1600/i.gif'/>:i   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvUORCdQmP1cCNYxnBFpTZiSDW8-F8K7t8NA3M9cAsx4F-xORW793jI6wqjENjldZBS__XyOPWy_vb5JY58eC4ANMuAA_MTwq0LnWhW9oAR9mh25cWXX0ezhsnmM00h6Vl1wUv8wkV78ss/s1600/j.gif'/>:j   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyuz_1M3rYnU7ZesVwn6INDAcqacCPy1cVJbX2Up79UQ9Yb7bT78J8ErMEXE7FZXAWT0v2t0-vXpkiKhT_rko1eAhmSk8HtlPTEBDhkmp-DblRMe3y6pQEGHLALx5EHp-2j9I9Az87DBPH/s1600/k.gif'/>:k   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPDpFfx7dutwxbe9Sf9UYWsqx-nbMUJrlQgruXf7THm-RDVQAiVdVcJpP1-6ygCMIzhLQqgmV2rDZlilRY-cDTnZ9lHrd_ny3fSPvmvycz_moPkIu2GDykqPJ-X_KEtAzM5YWGxe3r4l60/s1600/l.gif'/>:l   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ7E9BSscULrbbrbF9L29dZb5uGIfC9tHpHP812r8XWaVAw2-MWel6SuttvupC8l-cMTWa8j29CmXIItKllnoWuePt-t8vsEVvIIw0GopP7ilOj9WYoT5Hyuqn1yegvhDD7n3UpGWkEx09/s1600/m.gif'/>:m   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-WG-lRGLd2FprwsA8p5TKfJpJVpeO3hmOU4ZfXs_bKAlp2j5h_187mIX043SGcdTgK1rbd4Pl2c__5XZDwkvKYkDikxFoE0-sU4_UyhhKBlGWobZRD_QRkNlcBVaE8hH3shSZqCDCV1os/s1600/n.gif'/>:n   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDWaxGHkH_CWi32Hk7AH50i1aN2Rne9-YYaKM5AFg36FeQkIsCGiL1THLHA713ppiZU47zLXOV9T2guANXrrkaT-_NeUeZ_7IbvqBI9zcDhU5Yk-okIcWzNlM4VeOg0f1ahxUR0LsQpJ5/s1600/o.gif'/>:o   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVwyS8BYCO9nCMK0i_KwmeHtf9j4TvzS7P0hv7L0WK22kh9hrvAPH1YAy3EwQ61V455_6oP6cIKo85fkchWPKP8Rs24bpotnB3phonVybd5UoJGwN_-tKi-FW-5zcGK4CXMYOAqhw5cAg8/s1600/p.gif'/>:p   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaEQxXNSm2-PSI4XOcS5Xe7eMKBdlfWgQL7T_fKiJS08-Vqa_OL1DxyZoB6Qm0J9gfNGy01wjK_VpZjv2UjDLwkJa5pLCYa3RyowSF3GRDs1yDQrOtKD8i-PJFNW3YnYayJj3VSklEOko2/s1600/q.gif'/>:q   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtvhbkbsgvNr3F7QY7OfnZArptsoKm8ZWELPAd7ZXR10HFev22Zmi37s-BlQNBNbG-_0M9-UwLirWOZa_oFLluxLg3APfwEPB-WzKcpFdB0XjcqGMJl44SKmTuzL3wW9zcofwHlL2z-HW2/s1600/r.gif'/>:r   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUqPT2ZWV7Z-YBj8oyH4jJ_PzDY3rDqTNeiDN5WlqZ9nOZfVRGhBjfr5UGkFmhpxTxXEK5FdEGbXCwJAyujyf7NXX2XkZrBevzqrrUlddqeDjh_kfDyXdL9oJsCIj9GKwjpNZjaq4DBaDg/s1600/s.gif'/>:s   <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSC5gCBP5kFd34v0ovV4SWAJdJitsy8lyDXM2z9v1uiuwTsfrr6HTTbVglHorRU_nSXeep6Ns3hrVeOfaPJKM6xQLOTfgne-Ks52F3-XloqoOcQSg2F-bk3JuqJ9fYCTTI8-rbOdE6uh1n/s1600/t.gif'/>:t   <div style='text-align: right;'> <a href='http://lisaariyansyah.blogspot.com/2013/07/kumpulan-gambar-emoticon-lucu-onion.html' title='Cara Membuat Emoticon Smiley untuk dipasang di komentar Blog' style='color: #1e7ab7; font-size: x-small;' target='_blank'> Dapatkan smiley ini!</a></div> </div> </b:if>

• 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:

<script src='http://umanibn-code.googlecode.com/files/smiley_komentar_blogger.js' type='text/javascript' />

• 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

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"><img border="0" src="http://4.bp.blogspot.com/- PV2D4Ya7PcA/Ud4XAQEip1I/AAAAAAAAA4s/eFyzgGLDqAw/s320/Petasan.gif" title="Click to get more." /></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

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

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 :

1. Login ke Blogger
2. Masuk ke Tata Letak / Rancangan
3. Tambah Gadget, Lalu pilih HTML / Javascript
4. 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

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 == &quot;item&quot;'> 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 != &quot;true&quot;'>|</b:if>
</b:loop> yang lainnya.</b:if></b:if></div>

• Simpan template.

Selamat mencoba dan salam sukses !

Menambahkan Elemen Baru di Bawah Header

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 :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Klik tab Edit HTML.
4. Klik Tulisan Download Template Lengkap untuk berjaga-jaga.
5. 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
6. 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>
7. 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
8. Klik tombol Simpan Template. Tunggu beberapa saat sampai template anda tersimpan.
9. Klik tab Elemen Halaman. dan struktur layout anda akan menjadi seperti ini.
   
   
10. Sekarang sobat sudah mempunyai elemen yang langsung persis di bawah header, silahkan tambahkan elemen yang  inginkan.
11. 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

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

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

1. Login ke Blogger dengan ID Anda 
2. Klik Tata Letak 
3. Klik tab Edit HTML 
4. Download dahulu template sobat dengan mengklik Download Template Lengkap 
5. Kemudian klik button Expand Template Widget dan cari kode yg seperti ini :
   
   <b:section class='sidebar' id='sidebar' preferred='yes'>
6. 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(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;250&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
   // uncomment next line to enable transparency
   //so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
   so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
   so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
   so.addVariable(&quot;distr&quot;, &quot;true&quot;);
   so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
   so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
   so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
   so.write(&quot;flashcontent&quot;);
   </script>
   <b:include name='quickedit'/>
   </div>
   </b:includable>
   </b:widget>
7. 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