Cara Pasang Gambar Animasi di Blog (Script Animasi Kartun)

                                           بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ 

Cara Pasangnya :>

* Login ke blogger kawan

* Lalu klik Desain pada Tampilan Baru & kalo kawan pake tampilan lama Klik Rancangan

lalu klik page element atau tata letak.

* setelah itu klik tambah gadget atau add gadget.lalu klik edit .

* pilih edit HTML / JAVA SCRIPT

* Lalu masukkan kode script animasi yang kawan pilih

misal yang ini

* kodenya dibawah ini. kalo kawan pasang nantinya jadi di bagian kiri bawah , kalo kawan mau edit jd di kanan bawah tinggal edit di scriptnya ang tulisan left ganti jadi right.

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href=" www.zengbogel.blogspot.com " target="_blank"><img border="0" src="http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/KibaAkamaru.gif " title="lihat lebih banyak animasi naruto bergerak". alt="kumpulan animasi naruto bergerak gif" /></a><small><center><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank">Animasi Naruto</a></center></small></div>

* Disini aku kumpulin kode script untuk animasi, dapet dari mana .. pasti dari copy punya orang ya... hehehe.. iya.

Otre di bawah ini ada pilihan animasi yang aku ambil acak dari blog2 teman.

Naruto

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href=" www.zengbogel.blogspot.com " target="_blank"><img border="0" src=" http://i446.photobucket.com/albums/qq182/kisot06/Akatsuki%20gif/KisameWater.gif" title="lihat lebih banyak animasi naruto bergerak." /></a><small><center><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank">Animasi Naruto</a></center></small></div>

naruto 2

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href=" www.zengbogel.blogspot.com " target="_blank"><img border="0" src=" http://i446.photobucket.com/albums/qq182/kisot06/Naruto1%20gif/JiraiyaSummoned.gif" title="lihat lebih banyak animasi naruto bergerak". alt="kumpulan animasi naruto bergerak gif" /></a><small><center><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank">Animasi Naruto</a></center></small></div>

Naruto 3

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href=" www.zengbogel.blogspot.com " target="_blank"><img border="0" src=" http://th280.photobucket.com/albums/kk197/chanhonglok/naruto/th_gif.gif" title="lihat lebih banyak animasi naruto bergerak". alt="kumpulan animasi naruto bergerak gif" /></a><small><center><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank">Widget Animasi</a></center></small></div>

helikopter

<div style="position: fixed; bottom: 0px; left: 10px;width:130px;height:160px;"><a href=" www.zengbogel.blogspot.com " target="_blank"><img border="0" src=" http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="lihat lebih banyak animasi helikopter". alt="kumpulan animasi naruto bergerak gif" /></a><small><center><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank">Animasi Helikopter</a></center></small></div>

peri cinta

<div style="position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;"><a href=" www.zengbogel.blogspot.com " target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020236.gif" title="Animasi bergerak" alt="animasi cartoon dan naruto serta onepiece yang bergerak atau gif"/></a><small><center><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank">Animasi Bergerak</a></center></small></div>

segini dulu ya... semoga bermanfaat . kalo kawan mau pasang animasi2 yang lain langsung aja searching di mbah google . kata kuncinya kode script animasi blog . atau yang mirip dengan kata kunci ini..

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                                         

Cara Membuat Scroll Bar Keren Pada Blogspot

بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ

Halo sobat blogger. Kali ini saya mau berbagi tutorial mengenan Cara memasang Scroll Bar keren pada blogspot. Apa sih itu scroll bar? Scroll bar kalo artian saya yaitu seperti tombol yang berfungsi untuk menaik nurunkan suatu suatu layar pada komputer kalian. Namun fungsi tombol tersebut biasanya berdesainkan default dari windowsnya ketika kalian membuka suatu web. Nah pada kali ini saya akan memberikan triknya agar scroll barnya bisa kita desain (Bewarna gitu deh hahaha =)) ).

Masih bingung apa itu Scroll Bar ?? -__-. Nih saya kasih gambarnya

SONZBLOG ScrollBar

Oke lanjut ke cara pasang:

1. Login ke akun Blogger kalian.

2. Pilih Tab menu Template.

3. Klik menu Edit HTML.

4. Cari code </b:skin> , Lalu pastekan code dibawah ini tepat diatas code </b:skin>

::-webkit-scrollbar {height:12px;background: #DEDEDE;}
::-webkit-scrollbar-thumb {background-color: #8A2A2A;border:3px solid #FFFFFF;}
::-webkit-scrollbar-thumb:hover{background: #AC0202;}
::-webkit-scrollbar-thumb:active{background: #BC0404;}

5. Silahkan edit pada code bewarna biru. Ganti dengan code warna modifikasi kalian.
6. Simpan.

Silahkan dicoba dan selamat berkreasi.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

Cara Membuat Teks atau Gambar Bergerak Pada Blog Atau Web Site.

                                               بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِ 

Biar tidak bosan sekarang aku posting yang lain . yaitu

cara membuat teks atau gambar bergerak. 

Langsung saja yuk...

Inti dari tulisan bergerak kode scripnya hanya dengan menambahkan marquee ditulisnya seperti ini

Teks bergerak

Marquee yang standard bergerak dari kanan ke kiri,untuk mengubahnya maka kawan bisa tambahin kode dibawah ini ;


bgcolor=warna latar belakang
direction=arah gerakan (left,right,up.down)
behavior=karekter pergerakan (scroll,slide,alternate)
scroll(teks berputar)
slide(teks bergerak sekali dan berhenti)
alternate(teks bergerak dari kiri ke kanan dan berpatah balik)
Title=perkataan muncul semasa mouse berada di atas teks
Scrollamount=meletak kecepatan gerakan
Scrolldelay=mengatur tempoh masa
Loop=mengatur jumlah

misal untuk mengubah arah arah kawan bisa memasukkan kode di bawah ini ;
Dari arah kiri ke kanan

jalannya ke kanan

Kalo yang ini untuk membuat gerakan arah kekanan dan kekiri secara berulang

bolak balik kanan kiri

kalo mause di tempelkan maka berhenti deh 

kalo mause ditempelkan maka berhenti deh

Jika ingin buat turun atau naik gantikan direction="down" atau "up"
dari atas ke bawah dengan background warna

dari atas ke bawah dengan background warna


Teks dengan background warna dari kanan ke kiri.

dari kanan ke kiri



Kalo untuk merubah warna pada backgroun ganti aja by colornya langsung pake nama warna atau pake kode warna, bingung buat kdode warnanya klik aja ini Kode Warna Buat Blog

Kalo untuk merubah warnabackgroundnya, Klik Disini Cara Membuat Animasi Pada Blog

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                                         

Bagaimana Agar Judul Blog Berubah Menjadi Judul Postingan Pada Search Engine

Sebenernya merubah judul Blog dengan judul postingan Adalah sedikit bagian dari SEO (Search Engine Optimization)..Mengoptimalkan Judul postingan sangat dianjurkan untuk mendapatkan posisi terbaik dalam search engine. Jika sebelum anda merubah judul Blog dengan judul postingan "keyword" atau judul Dari postingan blog kamu ada Di belakang judul Blog maka setelah Anda Merubah Judul Blog dengan Judul Postingan Yang tampil di hasil pencarian "keyword" atau judul postingan anda berada di depan. Karena itu Merubah Judul Blog dengan Judul Postingan Sangat baik Untuk SEO (Search Engine Optimization). Para pakar SEO Juga menyatakan Cara ini membuat Search engine lebih Friendly Terhadap Blog Kita. Ikuti Cara Merubah Judul Blog dengan Judul Postingan Berikut ini :

1.Kawan log in dulu ke blog kawan punya.

2.Kalo Udah Cari kode berikut ini :

Biasanya Ada Di atas . atau untuk lebih mudah gunakan Tombol F3

3.Kalo udah ketemu ganti kode tadi dengan kode berikut :

4.Setelah Selesai Langsung Simpan Tamplate.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                                      

Mengganti Older Post Dengan Angka , Memindahkan Halaman Lama Ke Halaman Baru

             Sudah Banyak sekali sampai - sampai bingung mau baca yang mana, yah disimpen aja deh satu tips and trik blog yang satu ini, sumbernya dari banyak blog jadi bingung nih yah sumbernya dari master - master blog aja deh.
             Untuk mengganti older post dengan angka , berikut caranya :
1. kawan masuk / log in dulu ke blog kawan.
2. Langsung aja kawan menuju ke tamplate lalu edit HTML dan lanjutkan.
3.cari kode script di ini  . kalo sudah ketemu copy kode script di bawah ini sebelum kode . 

4. lalu cari kode , kalo sudah ketemu copy kode dibawah ini lalu paste kan sebelum kode  . 

   Selesai dan lihat sendiri hasilnya, sumber dari master - master blog.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                                       

Cek Kecepatan Loading Blog

Langsung saja, Seperti judul diatas. untuk save and share kali ini tenteng bagaimana mengecek kecepatan loading blog. gunanya buat apa. ya paling gak kita tau berapa kecepatan loading blog kita. jadi orang yang berkunjung ke blog kita gak kelamaan menunggu loading. kalo lama ya nanti gak pada mau balik lagi... Monggo sing ajeng ngecek langsung dimasukkuan alamatnya : Masukkan Alamat Blog/Web Max 10 Url:  Sekian saja ya.. kalo ada manfaatnya ya monggo diambil bila mana gak ada diabaikan saja. anda bebas berkomentar, yang penting sopan.. hehehehehehe..... Semoga tutorial singkat ini bisa bermanfaat... 8 Saudara

Cara Membuat Menu Drop Down Atau Menu Bertingkat Pada Blog Atau Website

Cara Membuat Menu Drop Down Atau Menu Bertingkat Pada Blog Atau Website

 

     Untuk Mempermudah pembaca memilih artikel yang sesuai suatu blog atau website hampir dipastikan membutuhkan rancangan yang seperti ini. hanya saja desainnya berbeda - beda. tergantung si pemilik blog / website. Cara membuat menu drop down atau menu bertingkat Pada Blog Atau Website sebagai berikut :

*. kawan login dulu di akun blog kawan

*. Pilih tamplate lalu klik edit HTML dan lanjutkan

*. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

*. Kawan cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

Klik show untuk melihat kode script

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsUlJljtLp1uSKKotOeIUfRGAUVra8p02Ql42NGI_QK09rAC5PeQf0LDSWl9dYBOYiSAYsCRz4nAs3pjbHXdDWNgcUJNKHukuyoNL5pG11iXnsAUe14o4ZufH5FqTg-fXweVV3DOucRH8/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:35px;margin:0 auto}
.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieTJsL_nJQv6KcfjYJscP0UtD77FEnryI4pNx-uk6JOhmrb7LJ_s6eV6elldgFmvNtE_UNtxqZMWadMhPWN-JOjqDJ4nZyGxGHAMxbSPIQGyLYl8ldzrTuQwpVuY1RZNDO5-joF_8h-A0/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

Selanjutnya kawan cari kode berikut:

• <header>  : untuk menempatkan menu di atas nama blog
• </header> : untuk menempatkan menu di bawah nama blog

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>

Klik show untuk melihat kode script 

<div id='menuwrapperpic'>

<div id='menuwrapper'>

<ul id='menubar'>

<li><a href='http://barokahdesain.blogspot.com' target='new'>Home</a></li>

<li><a class='trigger'>Minuman</a>

<li><a href='http://barokahdesain.blogspot.com/2012/08/cara-maembuat-mocktail-minuman-squash.html' target='new'>Yellow Elixir Myspace</a></li>

<li><a href='http://barokahdesain.blogspot.com/2012/11/resep-resep-minuman-mocktail-fruit-puch.html' target='new'>Fruit Punch</a></li>

</ul>

</li>

<li><a href='http://barokahdesain.blogspot.com/2012/11/cara-membuat-mocktail-kumpulan-resep.html' target='new'>Lemon Squash</a></li>

<li><a class='trigger'>Ngeblog</a>

<ul>

<li><a href='http://barokahdesain.blogspot.com/2012/11/membuat-banner-animasi-untuk-iklan.html' target='new'>Cara Membuat Banner animasi</a></li>

<li class='hr'/>

<li><a href='http://barokahdesain.blogspot.com/2012/08/cara-membuat-teks-bergerak-pada-blog.html' target='new'>Membuat Teks Bergerak</a></li>

<li class='hr'/>

<li><a href='http://barokahdesain.blogspot.com/2012/08/cara-pasang-gambar-animasi-di-blog.html' target='new'>Pasang Animasi Blog</a></li>

<li class='hr'/>

</ul>

</li>

<li><a class='trigger'>Save And Share</a>

<ul>

<li><a href='http://barokahdesain.blogspot.com/2012/07/desain-ruangan-minimalis-dengan-warna.html' target='new'>Desain warna putih</a></li>

<li class='hr'/>

<li><a href='http://barokahdesain.blogspot.com/2012/06/membuat-material-3d-max-v-ray.html' target='new'>Membuat material 3d max</a></li>

<li class='hr'/>

<li><a href='http://barokahdesain.blogspot.com/2012/08/membuat-efek-tulisan-pada-photoshop.html' target='new'>Membuat efek pada tulisan</a></li>

<li class='hr'/>

</ul>

</li>

</ul>
<div class='menusearch'>

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

<form action='http:/barokahdesain.blogspot.com/search' method='get' target=''>

<input name='sitesearch' style='display:none;' value='http://barokahdesain.blogspot.com'/>

<input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJxGmURUeAsfamN-gCMSBd41pMwl_CiBWQEdoq5Cz_19d1ufJNou55tgXiJmsnSqSt5o_zQbx9Sx2gwv1HvGBRqxfguJoILZOoEiQrFwmrI1GrNEUFHmXGPnWnManVWmCSd0bnke1MtnQ/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiL4k5RbOQpKSz1z2KsLZOMYMylvOTxCMo5Gk0qejwApg1ySTqDsQ10RvYC4vhxseq_CQcyEQYuF_oBMDwHuqYACRIWGX7AI1a7Q9ROG5zt_TV44rELTTjN-T-6tUNm0IcSF0G8E8S7nco/s1600/bg_search.gif' type='image' value='Search'/>

</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

Keterangan:

1. Kode berwarna orange adalah Url tujuan, silakan kawan ganti dengan Url pada blog kawan
2. Kode berwarna biru adalah kalimat yang tampil pada menu drop down, Silakan kawan sesuaikan.

Demikianlah Cara Membuat Menu Drop Down Atau Menu Bertingkat Pada Blog Atau Website, Terima kasih dan semoga bermanfaat.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                                  

Cara Membuat Gambar Berputar 360 derajat pada semua postingan Blog atau Pada Gambar Tertentu Atau dengan Berputar sambil Zoom

          Cara Membuat Gambar Berputar 360 derajat pada semua postingan  Blog atau Pada  Gambar Tertentu Atau dengan Berputar sambil Zoom , Ada beberapa cara membuat gambar pada blog berputar 360 derajat. kalo master blog pasti udah ga asing sama yang beginian, kalo buat saya masih newbi jadinya masih perlu untuk belajar. sambil belajar sambil diposting yuk... mari...

• Membuat Gambar Berputar 360 derajat di seluruh postingan 

1. pertama login ke blog kawan 

2. masuk ke halaman template

3. Selanjutnya, klik Edit HTML,lalu lanjutkan, 

4. cari kode ]]></b:skin> (gunakan Ctrl + F) atau ( Gunakan F3 ).

5. kemudian tambahkan kode berikut di atas kode ]]></b:skin>

Klik show untuk melihat kode script

   

.post img{-webkit-transition: all .4s ease-out;

-moz-transition: all .4s ease-out;

-o-transition: all .4s ease-out;}

.post img:hover {-o-transform: scale(1.2) rotate(360deg) translate(0px);

-moz-transform: scale(1.2) rotate(360deg) translate(0px);

-webkit-transform: scale(1.2) rotate(360deg) translate(0px);

-o-transition: all 1.5s ease;

-moz-transition: all 1.5s ease;

-webkit-transition: all 1.5s ease;}

6. simpan template sobat. dan lihat hasilnya, 

• Membuat Gambar Berputar 360 derajat Pada Gambar Tertentu Saja

1. pertama login ke blog kawan 

2. Copy kode Script Berikut 

Klik show untuk melihat kode script

Mempercantik Tampilan Blog Dengan Menambahkan Iframe

         Tips And Trik Blog , Mempercantik Tampilan Blog Dengan Menambahkan Iframe, Belajar Tentang Iframe. Belajar Tentang bagaimana mengadit iframe , Tips And Trik blog ada banyak sekali . tinggal bagaimana kreatifitas kita untuk merubah Tampilan dari sebuah blog . salah satunya dengan menambahkan kolom yang isinya bisa berupa gambar atau yang lainnya misal untuk mempermudah pengunjung menemukan apa yang dicari
          secara singkat penulisannya ini :

iframe.... isi dari iframe ..../iframe

          Untuk Mengeditnya bisa dengan menambahkan :

• ALIGN: Untuk mengatur posisi
• WIDTH: Mengatur lebar IFRAME
• HEIGHT: Untuk mengatur tinggi dari iframe
• FRAMEBORDER: Untuk memberi garis pembatas
• SCROLLING :Untuk memberi atau tidak memberi scrolling pada iframe
• SRC : alamat sumber yang ingin di tampilkan pada iframe

        Sebagai gambarannya misal kita membuat iframe dengan lebar sebesar 250 pixel, dan tinggi sebesar 500 pixel.

          1. IFRAME dengan garis pembatas,

Klik show untuk melihat kode script

<iframe align="center" frameborder="50" src="http://www.barokahdesain.blogspot.com/" width="250" height="500" scrolling="no"> </iframe>

    1. IFRAME Tanpa garis pembatas,

Klik show untuk melihat kode script

<iframe align="center" frameborder="0" src="http://www.barokahdesain.blogspot.com/" width="250" height="500" scrolling="auto"> </iframe>

              Sampai disini dulu Tips And Trik blog. Kawan bisa merubah sesuai dengan keinginan. Untuk mempercantik blog ternyata tidak begitu susah juga ya... Dengan iframe kita bisa berkreasi lebih banyak lagi.. terima kasih . semoga bermanfaat..

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                                         

Cara Mempercantik atau Merubah Tampilan Blog dengan Mengedit Background

                   Tips And Trik Kali ini tentang Cara Merubah Background blog. Dulu bingung bagaimana sih cara merubah background blog , Yah dari berbagai sumber aku pelajari satu persatu ketemu nih yang pas sama blogku .Kalo background membuat blog Kawan tidak enak di lihat oleh pengunjung atau kawan ingin sesuatu tampilan baru di blog kawan salah satunya ya dengan merubah background blog. Yuk,,,... Mari... Langsung saja ke TKP. 
               Untuk mengganti warna background blog begini caranya : :

1. Login ke blogger dengan akun sobat
2. Masuk ke halaman Template
3. Klik Edit HTML lalu klik Lanjutkan
4. Cari kode yang mirip seperti ini menggunakan Ctrl + F atau F3

Klik show untuk melihat kode script

body {

background: #FFFFFF;

font-family:arial;

font-size:13px;

width:100%

}

Pada kode #FFFFFF adalah kode warna background blog sobat. Pada setiap template blog, background tidaklah sama. Jadi, perhatikan warna kode setelah tulisan Background. 

5. Ganti kode #FFFFFF dengan kode warna lainnya. 
6. Jika sobat ingin mengganti warna background blog dengan gambar, ganti kode #FFFFFF menjadi seperti ini :

Klik show untuk melihat kode script

 body {
background:url(http://i1355.photobucket.com/albums/q718/slametiswanto/m-1.jpg) repeat;
font-family:arial;
font-size:13px;
width:100%
}

Cara Mengetahui HTML, Java script Blog atau Website

Topiknya cara mengetahui HTML , java script suatu blog atau website. mau ngopy ya.. jawabanku ya iya biar ga susah nulis - nulis HTML, kan tinggal ngedit aja .. hehehe. Mumpung lagi libur ga kemana mana, posting terus.

waktu belum tau seringnya aku copy pake klik kanan pada tulisan atau gambar atau video pada blog atau website lalu pilih periksa elemen. Misalnya kaya gambar dibawah ini

setelah klik periksa elemen lalu muncul jendela di bagian bawah layar. trus klik kanan yang baris menyala. contohnya gambar yang ini :

setelah klik kanan pilih edit HTML. nah itulah HTML dari gambar google di atas. tinggal copy edit lalu pasang gambar yang kawan punya. lah kalo buat yang gampangnya. stelah sekian lama, berpusing pusing ria bersama mbah google ada artikel nih sumbernya dari

http://blog.ahmadrifai.net/.

Caranya aku tulis juga disini biar kalo lupa bisa buat ngingetin. kalo kawan mau bisa juga buat belajar. caranya gampang dan simple tinggal :

1. Buka halaman web atau blog yang mau dibaca HTML nya.

2. tekan control + tombol u secara bersamaan,

3. jreng keluar deh bahasa pemrogramannya..

4. selesai... selamat mencoba.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                                      

Mengatasi Duplikasi Deskripsi Meta

Duplikasi deskripsi meta pernah di alami hampir setiap blog, hal ini terjadi karena Google menemui deskripsi yang sama pada setiap halaman yg di crawl oleh Google spider pada laman blog, contoh :

Pada gambar diatas terdapat deskripsi yang sama, baik itu pada Homepage, halaman, maupun postingan, hal ini tentu tidak baik buat SEO, karena deskripsi yg sama dapat merusak relevansi pencarian, dan Google menganggapnya sebagai duplikasi konten, oleh sebab itu hal tersebut perlu kita perbaiki. Jika sobat belum tahu cara mengetahui duplikat konten silakan baca Cara Mengetahui Duplikat Konten.

Untuk memperbaiki masalah tersebut, langkah yang saya lakukan adalah sebagai berikut :

• Login ke akun blogger
• Klik pada Template.
• Selanjutnya, klik Edit HTML dan klik Proceed / Lanjutkan.
• Beri tanda centang pada Expand Template Widget.
• Pada kode
  
  <meta content='Deskripsi'  name='description'/>
  <meta content='keyword1, keyword2, keyword3, ...' name='keywords'/>
  Sedikit saya tambah kode menjadi :
  
  <b:if cond='data:blog.url == data:blog.homepageUrl'>
  <meta content='Deskripsi'  name='description'/>
  <meta content='keyword1, keyword2, keyword3, ...' name='keywords'/>
  </b:if>
  Dengan begini meta description & meta keywords di tampilkan hanya untuk halaman utama (homepage).
• Terakhir klik Simpan Template.

Selain masalah diatas Duplikasi deskripsi meta juga bisa terjadi pada fungsi arsip, karna dalam sebuah arsip terdapat berbagai link dalam satu content , hal ini kadang juga di anggap sebagai duplikat konten oleh google.

Jika Sobat mengalami masalah ini Sobat cukup mematikan fungsi arsip, caranya dengan menambahkan kode berikut dibawah kode <head> :

<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex' name='robots'/></b:if>

Sekian dulu postingan kali ini, semoga bisa membantu Sobat yang ingin Mengatasi Duplikasi deskripsi meta.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

Baca juga pelajaran ngeblog lainnya

• Belajar Ngeblog di BLOG 1000+ Follower 2000+ Like
• Mudahnya Membuat Hujan Salju di Blog
• Memberi Scroll pada Label di Blog
• Cara Membuat Jump Menu atau Dropdown Menu
• Membuat Teks yang Berputar Mengelilingi Cursor
• Cara Memasang Facebook Recommendation Box
• Cara Membuat Zoom Effect pada Gambar di Blog
• Mengatasi Lupa Alamat Email Untuk Masuk Blogger
• Memelihara Hewan di Blog
• Membuat Thread Comments di Blogspot

Membuat Slide Recent Post

Banyak cara untuk menampilkan recent post atau postingan terbaru. Di blog ini saja ada banyak tutorial atau pelajaran yang membahas tentang recent post. Coba ketik saja di search box "recent post".

Sekarang kita akan belajar menampilkan recent post lebih menarik lagi. Kita membuat slide recent post, yang akan disertai thumbnail, judul terbaru, tanggal dipublish dan jumlah komentar. Ya karena slide, berarti terus bergerak dan bergantian. Widget slide recent post ini cocok dipasang di sidebar.


Cara Membuat Slide Recent Post
1. Login ke blogger
2. Pilih Rancangan kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>
<script language='JavaScript'>
imgr = new Array();
imgr[0] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[1] = "http://i1037.photobucket.com/albums/a452/thing_wu/Thing/women/2q1bhc3.jpg";
imgr[2] = "http://i1044.photobucket.com/albums/b443/akropolis_album/antarktis/125model6-1.jpg";
imgr[3] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
imgr[4] = "http://i777.photobucket.com/albums/yy55/terate/th_New.jpg";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://8-saudara.blogspot.com/";
limitspy=4
intervalspy=4000
</script>

<div id="spylist">
<script src='http://scriptabufarhan.googlecode.com/svn/trunk/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Sebelum kita Simpan, berikut ini yang bisa kita ubah:

• 220 dan 208 adalah lebar widget.
•  numposts = 10; adalah banyaknya postingan yg ingin kita tampilkan
• Ganti http://8-saudara.blogspot.com/ dengan URL blog kita sendiri.

5. Simpan jika sudah selesai.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                                         

Baca juga pelajaran ngeblog lainnya

• Belajar Ngeblog di BLOG 1000+ Follower 2000+ Like
• Mudahnya Membuat Hujan Salju di Blog
• Memberi Scroll pada Label di Blog
• Cara Membuat Jump Menu atau Dropdown Menu
• Membuat Teks yang Berputar Mengelilingi Cursor
• Cara Memasang Facebook Recommendation Box
• Cara Membuat Zoom Effect pada Gambar di Blog
• Mengatasi Lupa Alamat Email Untuk Masuk Blogger
• Memelihara Hewan di Blog
• Membuat Thread Comments di Blogspot

Membuat dan Memasang Facebook Fan Page di Blog

Facebook adalah salah satu jejaring sosial media yang paling banyak di gunakan oleh orang banyak di dunia ini. Jadi tidak heran banyak para pelaku bisnis online yang menggunakan  situs jejaring facebook untuk mempromosikan blog atau barang dagangannya agar lebih dikenal oleh banyak orang.

Jika anda mempunyai sebuah fan page facebook yang mempunyai jumlah like atau suka kurang dari yang diharapkan, anda bisa mencoba memasang plugin fan page facebook di blog kesayangan anda. Dengan ini orang lain akan lebih mudah untuk melakukan like atau suka terhadap fan page anda tanpa terlebih dahulu harus membuka halaman fan pagenya.

Sebaliknya, Jika anda mempunyai blog yang sepinya minta ampun. Anda bisa melakukan promosi dengan cara yang sama, yaitu dengan memasang plugin fans page facebook di blog saudara. Dengan melakukan ini di harapkan pengunjung blog meningkat dan makin banyak orang yang mengenal blog saudara sehingga membuat reputasi blog semakin baik.

Membuat Fans Page Facebook

Tapi sebelumnya, anda harus terlebih dahulu sudah memiliki sebuah fan page facebook. Jika belum punya dan belum tahu cara membuatnya, silahkan ikuti langkah-langkah di bawah ini:

• Buka akun facebook anda
• Kunjungi halaman berikut ini http://www.facebook.com/pages/create.php
• Pilih Jenis Halaman yang anda inginkan, kemudian akan muncul pilihan kateori dati jenis halaman yang anda pilih, dan jangan lupa isikan nama fans page pada kolom sesudah kategori
• Jangan lupa juga beri centang pada Saya Setuju Dengan Ketentuan Halaman Facebook
• Klik Mulai atau Start
• Setelah itu anda akan diminta untuk mengisi beberapa langkah mengenai fans page yang anda buat seperti deskripsi singkat, foto profil, dan link website.(anda juga bisa melewati langkah-langkah tersebut)
• Untuk selanjutnya anda bisa memperbaharui fans page yang sudah anda buat, seperti menambahkan alamat, situs web, dan lain-lainnya. 

Cara Membuat dan Memasang Facebook Like Box di Blog atau Website

Setelah fans page yang anda buat sudah jadi, kini saatnya untuk memasangnya di blog atau web milik anda. Ikuti panduan sederhana di bawah ini:

• Masih dalam keadaan login dengan facebook
• Pergi ke  http://developers.facebook.com/docs/reference/plugins/like-box/
• Kemudian akan muncul tampilan seperti gambar di bawah ini

Cara Setting Facebook Like Box :

- Facebook Page url: url Facebook Page anda

- Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget.

- Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.

- Show Faces: Centang untuk menampilkan foto profil likers.

- Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.

- Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.

- Show header: Centang jika ingin menampilkan tulisan header "Find Us on Facebook".

Lihat preview tampilan di sebelah kanan form tersebut.

• Jika settingan sudah dirasa beres dan sesuai selera, silahkan klik Get Code
• Kemudian akan muncul pop up window seperti gambar di bawah ini

Klik Gambar Untuk Memperbesar dan memperjelas

• Di sana anda akan melihat 2 kode HTML yang terpisah, dan penempatan kedua kode tersebut berbeda.

Bagaimana Penempatan Kodenya?

• Login dengan akun blog saudara
• Pilih menu TEMPLATE => EDI HTML
• Backup data terlebih dahulu jika memang diperlukan
• Cari kode 
• Klik kursor pada kolom EDIT HTML, kemudian tekan F3 atau Ctrl+F untuk mempermudah pencarian kode.
• Simpan kode pertama tepat di bawah kode <body>

• Klik simpan template
• Lalu masuk ke menu TATA LETAK=> Tambah Gadget => HTML/Javascript
• Masukan kode kedua pada kotak HTML/Javascript
• Simpan

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara

                                       

Membuat Gambar Membesar saat disentuh Cursor

Mungkin sebagian Blogger sering melihat gambar yang menjadi besar apabila tersentuh cursor. Dalam dunia blogging fitur seperti ini sering disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects. Fitur yang satu ini lumayan banyak di senangi para blogger walaupun sebenarnya dengan memasang Image Zoom Effects ini di blog dapat menggangu pengunjung yang sedang membaca postingan kita.

Postingan ini saya buat untuk melengkapi Tutorial di blog ini, buat sobat yang ingin memasangnya silakan Anda ikuti tutorial dibawah ini.

Cara Membuat Gambar Membesar Saat disentuh Cursor :

• Masuk ke akun blogger sobat.
• Pilih Template > Edit HTML.
• Ceklis / Centang Expand Widget Template.
• Cari kode ]]></b:skin> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
• Kalau sudah ketemu, letakkan kode berikut tepat di atas kode ]]></b:skin>
  
  .post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }
  .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
• Terakhir klik Simpan Template. Sekarang lihat hasilnya di blog Sobat.

Semoga tutorial singkat ini bisa bermanfaat...

8 Saudara