Cara Membuat Gambar Header Berputar Saat Disentuh Cursor

      
Cara Membuat Gambar Header Berputar Saat Disentuh Cursor - Bagi sebagian atau keseluruhan blogger, template blog yang cantik tentu menjadi kepusan tersendiri, entah untuk menggaet visitor atau hanya sekedar mempercantik blog. Banyak sekali tutorial blog khusunya blogspot yang berterbangan di internet seperti halnya Memasang Like Box Facebook pada Blog, Tombol Share Melayang, memasang Google Custom Search Engine, dan lain-lain. Namun pada kali ini saya akan membahas tentang cara membuat header berputar saat disentuh mouse.

Cara ini cukup simple, karena tutorial yang saya berikan tidak terlalu susah. Tahapan membuat header berputar saat disentuh cursor (Mouse) juga bisa dilakukan oleh seorang yang baru terjun ke dunia Blogging. Sebagai contohnya silahkan arahkan cursor mouse anda menuju ke header atau seperti gambar dibawah ini:

Sebelumnya, anda harus menyiapkan sebuah gambar / logo untuk dipasang pada header blog anda. Jika header blog anda sudah terpasang logo, tinggalkan saja langkah ini untuk membuat header berputar saat disentuh cursor.

Pertama, buka edit template. Caranya: Login ke blogger.com kemudian pilih Template >> Edit Template, beri tanda centang pada "Expand Template Widget". Demi keamanan template anda jika terjadi galat, silahkan back up template terlebih dahulu. Cari kode ]]></b:skin> dan letakkan kode berikut ini tepat diatas kode tersebut.

#header a img:hover { -moz-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(-360deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transition: all 600ms ease-in-out; -moz-transition: all 600ms ease-in-out; -ms-transition: all 600ms ease-in-out;-o-transition: all 600ms ease-in-out; transition: all 600ms ease-in-out; }

Sebelum disave, sebaiknya pratinjau terlebih dahulu apakah terjadi masalah atau tidak, jika template tidak mengalami masalah, klik simpan. Demikian tutorial membuat gambar header bergerak saat disentuh cursor.

Cara Membuat Foto Profile Di blog Berputar Saat Tersentuh Mouse

                   
Hay Para Visitor blog ini :D !!
udh lama ya ? admin gk post hahaah karna admin udh agak bosen ngeblog :3 haahah tpi skarang admin akan post Cara Membuat Foto Profile Di blog Berputar Saat Tersentuh mouse seperti gambar di samping :D klik aja klo kurang jelar gambar nya :) dan baca juga postingan admin kemaren oke Sekarang Admin akan Share Tutorial Cara Membuat Foto Profile Di blog Berputar Saat Tersentuh mouse Perhatikan Baik-Baik kwkwkwwk
TUTOTIAL :
1 LOGIN BLOGGER
2 masuk ke rancangan
3 klik EDIT HTML
4 Paste kan CSS du bawah ini di atas kode ]]></b:skin>

/* Profile berputar by X-T */
.profile-img{border: 8px double #aaa; border-radius: 4px; box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #0c00f7;
-moz-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #0c00f7;
-webkit-box-shadow: 1px 1px 1px #555, -1px -1px 1px #555, 0 0 8px #0c00f7;
-o-transition: margin-left 1.5s ease-in 2s, margin-top 1.5s 2.5s, -o-transform 1.5s ease-out 1s, opacity 2s ease-in;
-moz-transition: margin 1.5s ease-in 2s, -moz-transform 1.5s ease-out 1s, opacity 2s ease-in; -webkit-transition:margin 1.5s ease-in 2s, -webkit-transform 1.5s ease-out 1s, opacity 2s ease-in; background:transparent; float:left; margin:0 10px 5px 0; padding:0}
.profile-img:hover { opacity: 1.0; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-box-shadow: 1px 1px 1px #33F, -1px -1px 1px #33F, 0 0 16px #33F; margin: 40px 0px 20px 10px; -o-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -moz-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -webkit-transform: rotate(1460deg) scale(1.8) translate(35px, 10px); -o-transition: margin-left 1.5s ease-in 0.1s, margin-top 1.0s, -o-transform 2.5s ease-out 1.4s, opacity 1s ease-in 1s; -moz-transition: margin 1.5s ease-in 0.1s, -moz-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s; -webkit-transition: margin 1.5s ease-in 0.1s, -webkit-transform 1.0s ease-out 1.4s, opacity 1s ease-in 1s;}
.profile-data{color:red; margin:0; padding:0; letter-spacing:.1em; font-weight:bold}
.profile-datablock{margin:0}
.profile-textblock{margin:5px 0}
.profile-link{color:blue; font-size:12px; letter-spacing:.1em}

5 . Simpan dan lihat hasil nya arahkan mouse ke foto profile blog kamu :)

Cara Mudah Membuat Widget Bergerak Di Blog

                              
Untuk Bergerak Bolak Balik

a. Kanan-Kiri

<marquee behavior='alternate' align='center' direction='right' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script widget/gadget disini</marquee>

b. Atas-Bawah

<marquee behavior='alternate' align='center' direction='up' height='400px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script widget/gadget disini</marquee>

Untuk Bergerak Terus Menerus Satu Arah

a. Dari Kanan ke Kiri (arah bisa diganti menjadi right)
<marquee behavior='scroll' align='center' direction='left' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script widget/gadget disini</marquee>

b. Dari Bawah ke Atas (arah bisa diganti menjadi down)
<marquee behavior='scroll' align='center' direction='up' height='400px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script widget/gadget disini</marquee>

Sekian .. Semoga berguna dan bermanfaat.

Judul/Title blog secara default, berada dalam keadaan statik. Namun, kita bisa memberikan efek pada judul blog kita dengan kode JavaScript, sehingga bisa bergerak dari kanan ke kiri.

 Mari kita buat :

• Dari dashboard >> Design >> Add a gadget >> Html/Javascript 
• Copy dan paste code berikut di HTML/Javascript :

<script language=javascript>
msg = "Test Blog ...Test Blog ...";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0,

pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>

Note: Ganti 'Test Blog ...Test Blog ...' dengan teks yang diinginkan.

• Save/Simpan, dan lihat hasilnya.

Semoga manfaat ... - See more at: http://www.masasha.net/2012/03/cara-membuat-judul-blog-bergerak.html?showComment=1358349394890#sthash.1fouMLzs.dpuf

Judul/Title blog secara default, berada dalam keadaan statik. Namun, kita bisa memberikan efek pada judul blog kita dengan kode JavaScript, sehingga bisa bergerak dari kanan ke kiri.

 Mari kita buat :

• Dari dashboard >> Design >> Add a gadget >> Html/Javascript 
• Copy dan paste code berikut di HTML/Javascript :

<script language=javascript>
msg = "Test Blog ...Test Blog ...";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0,

pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>

Note: Ganti 'Test Blog ...Test Blog ...' dengan teks yang diinginkan.

• Save/Simpan, dan lihat hasilnya.

Semoga manfaat ... - See more at: http://www.masasha.net/2012/03/cara-membuat-judul-blog-bergerak.html?showComment=1358349394890#sthash.1fouMLzs.dpuf

tutorial memasang widget sharing button keren V.2

Setelah Tadi saya share widget sharing button bentuk telur sekarang saya akan share tutorial memasang widget sharing button *gak tau apa yah namanya* . langsung ajah kita liat Screenshootnya , dibawah ini *jika dilihat secara teliti mirip illuminati juga yah*

gimana tertarikkah anda wahau sobat blogger ?

jika tertarik berikut cara cara memasang widget share button di blog:

1.masuk ke blog sobat

2.ke tata letak

3.tambah gadget

4.pilih HTML/javascript

5.copy code share button di bawah ini :

<!-- Start Shareaholic Sassy Bookmarks HTML-->
<div class='shr_ss shr_publisher'>
</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>
<!-- End Shareaholic Sassy Bookmarks script -->

6.pastekan code Share button tadi 

7.simpan dan lihat hasilnya

dan jangan lupa tinggalkan komentar !!

TUTORIAL CARA MEMBUAT WIDGET SHARE BUTTON BENTUK TELUR

hallo s0bat d48 udah lama gak share Tips N Trik Blogger , Sekarang Saya Akan Memposting "" udah gak pake lama lagi , langsung Aja baca Tutorialnya !

1.masuk ke blog sobat

2.Ke template->edit HTML->centang Expand widget template

3.Tekan CTRL+F lalu cari kode </head>

4.setelah sobat menemukan kode tsb,copy code di bawah ini dan pastekan di bawah kode </head>

<!-- Start Egg Share by http://dark-48.blogspot.com/search/label/Tutorial%20Blogger--><script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/><!-- End Egg Share by http://dark-48.blogspot.com/search/label/Tutorial%20Blogger -->

5.lalu cari kode </body> setelah itu copy code di bawah ini dan pastekan di atas kode </body>

<!-- Start Egg Share by http://dark-48.blogspot.com/search/label/Tutorial%20Blogger--><div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;], {title:&#39; <data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script><noscript><a href=" http://lisaariyansyah.blogspot.com/">Blogger Gadgets</a></noscript><!-- End Egg Share By http://dark-48.blogspot.com/search/label/Tutorial%20Blogger -->

6.simpan dan lihat hasilnya !!!

Pasang Bookmark Share Button Keren (Tooltip) Bag.2

                 
Pada Kesempatan kali ini saya ingin memberikan Tutorial 'Pasang Bookmark Share Bag.2', dimana pada postingan saya sebelumnya prnah juga membrikan tutorial 'Pasang Bookmark Bentuk Hati'.

Untuk demonya sobat bisa klik gambar dibawah ini: dan sobat perhatikan bagian bawah sebelah kiri.

OKE, jika jika sobat tertarik memasangnya silahkan ikuti langkah berikut :

1. Login Ke Akun Blog Sobat

2. Pilih Rancangan/Tata Letak.

3. Lalu Letakkan Kode Berikut diatas kode </body> .

<!-- Start Shareaholic Sassy Bookmarks HTML


http://lisaariyansyah.blogspot.com/ -->


<div class='shr_ss shr_publisher'>


</div>


<script type='text/javascript'>


var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};


</script>


<script type='text/javascript'>


(function() {


var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;


sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";


var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);


})();


</script><small><a href='http://lisaariyansyah.blogspot.com/'></a>


<a href='http://lisaariyansyah.blogspot.com/'></a></small>


<!-- http://lisaariyansyah.blogspot.com/


End Shareaholic Sassy Bookmarks HTML -->

4. Privew dl, jika tdk terjadi kesalahan, baru Simpan template... ;)

Cara Pasang Bookmark Share Button Keren

Pada Kesempatan kali ini saya ingin memberikan Tutorial 'Pasang Bookmark Share Bag.2', dimana pada postingan saya sebelumnya prnah juga membrikan tutorial 'Pasang Bookmark Bentuk Hati'.

Untuk demonya sobat bisa klik gambar dibawah ini: dan sobat perhatikan bagian bawah sebelah kiri.

OKE, jika jika sobat tertarik memasangnya silahkan ikuti langkah berikut :

1. Login Ke Akun Blog Sobat

2. Pilih Rancangan/Tata Letak.

3. Lalu Letakkan Kode Berikut diatas kode </body> .

<!-- Start Shareaholic Sassy Bookmarks HTML


http://lisaariyansyah.blogspot.com/ -->


<div class='shr_ss shr_publisher'>


</div>


<script type='text/javascript'>


var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};


</script>


<script type='text/javascript'>


(function() {


var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;


sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";


var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);


})();


</script><small><a href='http://lisaariyansyah.blogspot.com/'></a>


<a href='http://lisaariyansyah.blogspot.com/'></a></small>


<!-- http://lisaariyansyah.blogspot.com/


End Shareaholic Sassy Bookmarks HTML -->

4. Privew dl, jika tdk terjadi kesalahan, baru Simpan template... ;)