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