Tutorial Blogger kali ini adalah tutorial cara pasang animasi burung twitter terbang melayang di blog, sebenarnya cara membuat / pasang burung twitter terbang ini sudah banyak ditulis oleh teman-teman blogger lainnya, dan ini mudah (asal kita tahu caranya).
Walaupun tutorial cara pasang animasi burung twitter terbang ini sudah banyak ditulis oleh blogger lain, tapi tidak ada salahnya kan jika saya tuliskan lagi di blog ini, siapa tahu ada pengunjung blog ini berminat ingin memasang burung twitter terbang di blog nya juga, namun belum tahu cara membuatnya.
Ok deh, saya rasa tidak perlu panjang lebar.
Cara Pasang Burung Twitter Terbang
Untuk memasang animasi burung twitter terbang di blog kamu silakan ikuti langkah-langkah berikut:
Login ke blogger
Klik menu Tata Letak
Klik Tambah Gadget, pilih gadget Html/JavaScript
Masukkan script animasi burung twitter terbang di dalam nya (script saya sertakan di bawah)
Simpan & Selesai
Berikut script animasi burung twitter terbang yang harus kamu pasang:
<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script> <script type="text/javascript"> var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDHHchSTvrgf-veRQMMdAzr_yRrHNuAmKGiU-r9KHEgUDmsXdUyMWqjxK5_TB_oBktf51WG0qA08GMGnvzp40_G0rdUC8-xW1DuWi3QyR-iio02TzwzpeW-y1rNQ96DJi9Jn06o8pL5Y8/s1600/burung+twitter+terbang.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/AkunTwitterKamu"; var tweetThisText = "Twitter - UserID"; tripleflapInit(); </script>
Keterangan
Silakan ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDHHchSTvrgf-veRQMMdAzr_yRrHNuAmKGiU-r9KHEgUDmsXdUyMWqjxK5_TB_oBktf51WG0qA08GMGnvzp40_G0rdUC8-xW1DuWi3QyR-iio02TzwzpeW-y1rNQ96DJi9Jn06o8pL5Y8/s1600/burung+twitter+terbang.png dengan warna burung yang kamu inginkan (pilihan warna burung saya sertakan di bawah) dan jika tidak kamu ganti maka burung twitter nya berwarna biru muda. Ganti http://twitter.com/AkunTwitterKamu dengan alamat twitter kamu
Berikut beberapa pilihan warna burung twitter yang bisa kamu pilih Burung Twitter Warna Kuning
Nah itulah beberapa warna burung twitter terbang yang bisa kamu gunakan. Sebaiknya hati-hati dalam mengganti alamat akun twitter dan warna burung, karena jika ada kode yang terhapus secara tidak sengaja saat kita menggantinya maka kemungkinan burung terbang tidak terlihat.
Selamat mencoba pasang burung twitter terbang di blog kamu, semoga bermanfaat dan semoga berhasil.
Cara Membuat Tulisan Mengikuti Kursor di Blog- Cara/trik mudah membuat tulisan bergerak mengikuti arah cursor di blogataucara agar tulisan bisa mengikuti cursor di blogataucara menjadikan tulisan mengikuti pergerakan cursor pada blog.
Hallo sobat semua.. Apa kabar kalian hari ini? Saya harap kalian sehat dan baik-baik saja :) Baiklah, pada kesempatan yang baik ini, Blogaul akan kembali posting artikel-artikel seputar tips trik blogging dan SEO untuk sobat semua. Dan kali ini mengenai cara mengatur/mengedit tulisan agar mengikuti kursor di blog. Setelah sebelumnya saya juga membahas tutorial mengenai modifikasi blog di bagian cursor yaitu artikel mengenaicara mengganti kursor penunjuk di blog, maka di kesempatan ini saya akan berbagi artikel seru lainnya. Mungkin sudah banyak sekali blogger yang membahas tutorial ini, tapi tidak apa-apa, saya pun akan mencoba menshare nya dengan cara yang berbeda karena tentunya sudah saya olah menggunakan bahasa saya sendiri. Sobat pasti nya sudah tau kan maksud dari tutorial ini? Sudah donk :) Jadi saya tinggal menjelaskan bagaimana cara membuatnya. Menurut saya, tujuan dari pembuatan ini hanyalah untuk mempercantik tampilan blog dan membuatnya terlihat berbeda dari yang lainnya. Baiklah, bagi yang tertarik ingin membuatnya, berikut ini langkah-langkah trik membuat teks/tulisan mengikuti gerakan cursor di blog:
1. Masuk ke dashbor blog sobat. 2. Klik Tata Letak >> Tambah Gadget >> Pilih HTML/Java Script. 3. Copy code berikut ke dalam box HTML/Java Script tadi
// Pesanmu di sini, bahasa sundanya yaitu "Pesan anjeun di dieu.." hehehe... (QUOTED STRING) var msg = "TULISAN YANG INGIN DITAMPILKAN";
// Set font's style size for calculating dimensions // Set to number of desired pixels font size (decimal and negative numbers not allowed) var size = 25;
// Set both to 1 for plain circle, set one of them to 2 for oval // Other numbers & decimals can have interesting effects, keep these low (0 to 3) var circleY = 0.75; var circleX = 2;
// The larger this divisor, the smaller the spaces between letters // (decimals allowed, not negative numbers) var letter_spacing = 5;
// The larger this multiplier, the bigger the circle/oval // (decimals allowed, not negative numbers, some rounding is applied) var diameter = 10;
// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed) var rotation = 0.2;
// This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers) var speed = 0.3;
// BERHENTI NGEDITNYA..! Parantos cicing di dieu! Ulah diteraskeun..! //
if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement :
Cara membuat tulisan berjalan mengikuti cursor pada blog adalah salah satu dari trick mempercantik Blog, karna bisanya kalau cursornya ada tulisan yang mengikuti nya itu akan membuat pengunjung betah, tahu gak kenapa ??
karna memungkinkan pengunjung untuk memainkan cursor pada blog yang ada tulisan yang menikuti nya #jhahahaaa pengalaman heheheee
untuk melihat seperti apa sih Cara membuat tulisan berjalan mengikuti cursor pada blog, bisa anda lihat Demonya , klik tombol DEMO
oke sudah liatkan ??
saya tau pasti dalam fikiran anda terhadap saya begini "ini pemilik blog banyak basa basinya lama banget bikin gue kesel"
hehheee bener gak ??
ya udah kalau emang begitu kita langsung sajah masuk ke tutorialnya
Login ke Blogger (Dasboard)
KLIK Rancangan/Design
kemudian menuju Elemen Laman
Klik add Gadget
pilih HTML/javascript
copy paste script di bawah ini
simpan/save
untuk melihat script klik tombol SHOW di bawah ini
<script type='text/javascript'> //<![CDATA[ ;(function(){ // Your message here (QUOTED STRING) var msg = "Ahmad Bj Blogs"; /* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */ // Set font's style size for calculating dimensions // Set to number of desired pixels font size (decimal and negative numbers not allowed) var size =20; // Set both to 1 for plain circle, set one of them to 2 for oval // Other numbers & decimals can have interesting effects, keep these low (0 to 3) var circleY = 0.75; var circleX = 2; // The larger this divisor, the smaller the spaces between letters // (decimals allowed, not negative numbers) var letter_spacing = 5; // The larger this multiplier, the bigger the circle/oval // (decimals allowed, not negative numbers, some rounding is applied) var diameter = 15; // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed) var rotation = 0.3; // This is not the rotation speed, its the reaction speed, keep low! // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers) var speed = 0.2; ////////////////////// Stop Editing ////////////////////// if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){ e = e || window.event; ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioning if(init.nopy){ o.style.top = (b || document.body).scrollTop + 'px'; o.style.left = (b || document.body).scrollLeft + 'px'; }; currStep -= rotation; for (var d, i = n; i > -1; --i){ // makes the circle d = document.getElementById('iemsg' + i).style; d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px'; d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px'; }; }, drag = function(){ // makes the resistance y[0] = Y[0] += (ymouse - Y[0]) * speed; x[0] = X[0] += (xmouse - 20 - X[0]) * speed; for (var i = n; i > 0; --i){ y[i] = Y[i] += (y[i-1] - Y[i]) * speed; x[i] = X[i] += (x[i-1] - X[i]) * speed; }; makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arrays if(!isNaN(window.pageYOffset)){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; } else init.nopy = true; for (var d, i = n; i > -1; --i){ d = document.createElement('div'); d.id = 'iemsg' + i; d.style.height = d.style.width = a + 'px'; d.appendChild(document.createTextNode(msg[i])); oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0; }; o.appendChild(oi); document.body.appendChild(o); setInterval(drag, 25); }, ascroll = function(){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){ window.addEventListener('load', init, false); document.addEventListener('mouseover', mouse, false); document.addEventListener('mousemove', mouse, false); if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){ window.attachEvent('onload', init); document.attachEvent('onmousemove', mouse); }; })(); //]]> </script>
Catatan: *ganti tulisan Ahmad Bj Blogs dengan tulisan yang anda inginkan
oke sobat semoga blog ente semua semakin cantik, sebaik baiknya pengunjung adalah pengunjung yang selalu memberikan komentar pada artikel yang di bacanya, coment ya nanti saya kunjungi balik
Cara Mudah Membuat Rich Snippet atau Bintang Lima. Rich snippet adalah sebuah bintang lima yang berada di bawah judul posting di hasil pencarian google. yang biasanya diikuti kata diulas oleh adalah salah satu rich snippet yang paling mudah untuk dibuat. Rich snippet ini tidak akan mempengaruhi ranking dari artikel anda. Hanya saja tampilan bintang lima tersebut bisa membuat artikel anda terlihat mencolok dan mengundang orang untuk mengklik.
Jika anda belum tahu apa yang dimaksud dengan Rich Snippet, bisa baca di artikel Apa yang dimaksud Rich Snippet? Rich Snippet yang akan dibahas kali ini adalah type Review atauUlasan.
Aturan Penggunaan Rich Snippet Bintang 5 Review (Review)
Pada saat anda menggunakan markup HTM Review bintang lima ini, maka Google menginginkan agar halaman tersebut benar-benar hanya membahas satu produk secara spesifik. Anda tidak bisa memberikan banyak review atau ulasan yang berbeda dalam satu halaman. Jadi satu halaman hanya boleh ada satu markup review.
Google tidak memberi support pada review produk atau layanan dewasa. Jadi jika blog anda berisikan cerita dewasa, atau konten pornografi, maka kemungkinan Google tidak akan menampilkan hasil markup anda pada snippet hasil pencarian.
Jika Markup Review ini diberikan untuk ulasan satu orang saja, maka nama yang memberi ulasan haruslah valid, dan tidak menggunakan karakter yang tidak diizinkan. Contoh nama yang tidak diizinkan adalah "Diskon 50%"
Dengan menggunakan Rich Snippet Review Bintang 5 ini, maka hasil pencarian anda akan terlihat seperti pada gambar di bawah ini....
Cara Membuat Rich Snippet Bintang 5 (Review)
Untuk membuat Rich Snippet bintang 5 ini, silahkan lakukan prosedur sederhana berikut:
Masuk ke dalam menu Template blog anda.
Pilih Edit HTML dan lanjutkan, setelah itu centang Expand Widget Template.
Gunakan Ctrl f pada browser anda untuk mencari kode <data:post.body/>
Tepat di bawah kode <data:post.body/> masukkan kode berikut
<b:if cond='data:blog.pageType == "item"'> <div style='margin-top: 30px; font-size: 11px; color:#777;'> <div itemscope='' itemtype='http://data-vocabulary.org/Review'> <center>Judul: <span itemprop='itemreviewed'><data:post.title/></span>; Ditulis oleh <span itemprop='reviewer'><data:post.author/></span>; Rating Blog: <span itemprop='rating'>5</span> dari 5</center> </div> </div> </b:if>
Jika sudah memasukkan kode ini, klik Simpan Template
Silahkan lakukan pengujian, apakah pemasangan kode ini berhasil. Untuk pengujian ikuti prosedur berikut ini:
Pada halaman tersebut masukkan URL salah satu artikel anda ke dalam kotak yang bertuliskan "Enter a web page URL to see how it may appear in search results"
Jika sudah memasukkan URL artikel silahkan klik tombol Preview
Alat ini akan segera menampilkan contoh tampilan hasil pencarian blog anda di Google (lihat di bagian bawah halaman)
Nah sekarang jika anda sudah melihat tampilan Rich Snippet yang disertai tanda bintang lima itu berarti pemasangan kode markup yang anda lakukan sudah berhasil.
setelah lama berusaha mencari widget-widget animasi lucubergerak dan menarik dari berbagai situs untuk anda dalam memasang animasi di sudut atau pojok blog dan membuat tampilan blog anda semakin segar dengan adanya animasi yang bergerak di sudut blog, akhirnya ketemu juga widget-widget yang lucu dan unik yang pastinya bergerak atau berformat gif ,pada kumpulan widget animasi bergerak ini anda bisa membuat animasi bergerak di pojok blog anda, mungkin di antara kalian ada juga yang senang dengan animasi - animasi lucu yang bergerak ini untuk di pasang di sudut blog kalian. tapi tentu saja di setiap situs-situs tersebut tidak semua animasi bergerak sama oleh karena itu dalam postingan kali ini saya akan memberikan kumpulan postingan animasi bergerak yang lucu dan gokil dari berbagai situs yang telah saya kunjungi .silakan kalian kalau mau copas kode-kode script berikut di blog kalian .
sebelum kalian meng copas kode kode tersebut .. sebaiknya kalian mengikuti tutorial cara memasang animasi pada blog berikut ini . untuk memasang widget widget animasi bergerak seperti naruto dan onepiece pada blog kalian ..( tepatnya animasi- animasi bergerak tersebut akan ada di sudut pojok bawah pada blog kalian ).dan kalian dapat merubah lokasi penempatannya/ukuran gambarnya sesuai dengan tempat/ukuran favorit anda .!!!
News Flash !!! mau pelihara hamster kaya gini di blog ??? klikdisini catatan !!! coba anda klik pada kotak hamster di atas !!! bagaimana ??? kerenkan
lanjut ke tutorial pasang animasi naruto onepiece dll di sudut blog
adapun langkah-langkah dalam memasang widget animasi bergerak yaitu :
masuk atau login ke blog kalian
klik tata letak
Lalu klik tambah gadget / add gadget , setelah di klik akan muncul banyak pilihan ..
pilih HTML/JAVA SCRIPT
lalu copy pastekan script-script berikut ini ( sebaiknya jangan di beri judul )
script di bawah ini telah di setting sedimikian rupa agar animasi tersebut ada tepat di pojok kiri bawah blog . jika kalian tidak mau animasi tersebut berada di pojok kiri bawah blog kalian .. silakan kalian hapus atau edit kembali script yang berwarna hijau pada contoh di bawah ini setelah gambar animasi ..
Animasi Helikopter Gif
silakan copas :
<div style="position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;"><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank"><img border="0" src="http://content.sweetim.com/sim/cpie/emoticons/00020389.gif" title="widget animasi lucu bergerak atau gif" alt="animasi bergerak naruto dan onepiece"/></a><small><center><a href="http://zengbogel.blogspot.com/2011/11/cara-pasang-animasi-lucu-pada-blog.html" target="_blank">animasi bergerak helikopter</a></center></small></div>
setelah itu simpan !!!
Ketentuan catatan
=>untuk mengedit animasi apa yang kalian ingin gunakan silakan edit "Tulisan berwarna biru "( ubah alamat animasi favorit yang anda suka)
=> untuk mengedit tinggi animasi silakan edit : "hegiht : 130px" ( angka dapat kalian atur sesuai dengan kebutuhan)
=> untuk mengedit panjang gambar : "width : 110px" ( angka dapat kalian atur sesuai dengan kebutuhan)=>untuk mengedit/ mengatur lokasi sesuai kebutuhan misal animasi bergerak ini dapat di
buat agar tidak ada di pojok/sudut blog . melainkan diam / berada pada posisi
yang kalian ingin kan , jika kalian tertarik untuk mengeditnya .silakan kalian edit "position : fixed ; bottom:0px;left:10px" position fixed : maksudnya adalah posisi animasi akan selalu bergerak . jika andaingi posisi animasi tersebut hanya diam pada satu posisi maka silakan hapus position : fixed ini bottom : 0px : maksud bottom 0px ini adalah jarak antara animasi dengan sisi bawah .
jika kalian ingin membuat animasi tersebut tidak berada di bawah ,misalkan kalian ingin animasi berada di atas silakan kalian editbottommenjadi topleft : 10px : maksud left :10px ini adalah jarak antara animasi dengan sisi kiri . jika kalian ingin membuat animasi tersebut tidak berada di kiri,misalkan kalian ingin animasi berada di kanan silakan kalian editleft menjadi right.
saran ..!!!!
jika anda ingin mengedit animasi menjadi di kanan dan di atas sebaiknya edit saja seperti ini"position : fixed ; top:0px;right:10px"
nahhh , sekarang coba kalian lihat hasilnya ..prok ..prok ..prok ..jadi apa !!!!
adapun script widget animasi yang lainnya dan bisa anda letakan di pojok blog dan banyak lagi yang telah saya temukan di mbah google , lihat di bawah ini : (cara membuat nimasi bergerak di pojok blog kalian ).
tinggal copy paste'in saja yaa .:
