Memasang Facebook Page dan Follow Twitter di Bawah Posting Blog

Pada beberapa post terdahulu Julak sourie pernah membuat tutorial tentang cara memasang like facebook, tweet, tombol plus one di bawah postingan, selain itu ada juga tombol share melayang. Agak berbeda dengan itu, kali ini Julak akan share cara menambahkan like facebook page dan follow twitter di posting blog. 

Perbedaannya adalah jika pengunjung mengeklik tombol like, maka secara otomatis mereka akan menyukai halaman facebook blog kita, dengan catatan pada saat itu mereka sedang login di akun facebook. Sedangkan tombol suka biasa tidak, dan hanya menyukai postingan tertentu saja. Demikian pula tombol twitter, pengunjung otomatis akan memfollow akun twitter kita, yang jika tombol biasa hanya sekedar men "tweet" artikel kita. Sebuah nilai lebih saya kira jika diterapkan di blog sobat.

Mau tahu caranya? Silakan ikuti tutorial berikut ini

Memasang Facebook Page dan Follow Twitter di Bawah Posting Blog

Cara memasangnya 

1. Masuk ke dasbor blogger > Template > Edit HMTL > Lanjutkan > centang expand template

2. Cari Kode <data:post.body/> atau <div class='post-footer-line post-footer-line-1'> 

3. Kemudian pasang kode  di bawah ini tepat dibawah kode <data:post.body/> atau sebelum <div class='post-footer-line post-footer-line-1'>  (pilih salah satu saja)

Klik Pilih Semua Kode untuk Mencopy Kode

    <!-- Tombol Like Halaman Facebook  Twitter Follow by super-gaptek.com-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='margin:5px 0px 65px 0px; padding:10px; float:none; width:590px;'>
    <div style='margin:0px 0px 0px 0px; padding:0px; float:left; width:265px; border-right:1px solid #ddd;'><!-- Facebook Like button start --><iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fcaramembuatblogspot&amp;width=265&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false' style='border:none; overflow:hidden; width:265px; height:62px;'/></div><div style='margin:10px 30px 0px 0px; padding:0px; float:right; width:250px;'><!-- Twitter follow button start --><a class='twitter-follow-button' data-show-screen-name='false' href='http://twitter.com/supergaptech'>Follow @supergaptech</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=&quot;//platform.twitter.com/widgets.js&quot;;fjs.parentNode.insertBefore(js,fjs);}}(document,&quot;script&quot;,&quot;twitter-wjs&quot;);</script><!-- Twitter follow button end --></div></div></b:if>

4. Ganti caramembuatblogspot dengan username facebook sobat dan supergaptech dengan username akun twitter kamu


Untuk Live Demonya bisa dibuka Disini

Bagaimana sobat udah jadi? silakan tambahkan halaman facebook dan follow twitter di postingan blog .

Cara Membuat Share Button Like, Tweet, Google +1 Melayang di Sisi Kiri Blog

Lagi-lagi "Tombol Berbagi", hehehe, Yups, Mengapa saya suka banget posting artikel seperti ini sama sobat, karena tombol bagikan seperti like facebook dan tweet cukup ampuh dalam mendongkrak popularitas dan kunjungan ke blog kita. Apalagi buat newbie blogger, takutnya keseleo belajar SEO, hehehe.

 
Langsung Saja ya....
Masuk ke akun Blogger >  Tata letak > Tambah Gadget > HTML/Javascript, kemudian masukkan kode di bawah ini;

<!-- share button melayang sisi kiri start--><br /><br /><style type="text/css"> #sharebutton {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} #sharebutton .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;} .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style><br /><br /><div id='sharebutton' title="Get this from blogbelajar2.blogspot.com"><br /><div class='sbutton' id='fb'><br /><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script><br /><br /></div><br /><div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script><br /><br /></div><br /><div class='sbutton' id='su'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script><br /></div><div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><br /><a class="DiggThisButton DiggMedium"></a><br /></div><br /><div class='sbutton' id='gplusone'><br /><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /><br /><g:plusone size="tall"></g:plusone><br /><br /></div><br /><div style="clear: both;font-size: 8px;text-align:center;">Get<a href="http://www.super-gaptek.com/2012/03/cara-membuat-share-button-like-tweet.html">widget</a></div><!-- Do not remove this link --><br /><br /></div><br /><!-- share button melayang sisi kiri End –>

Sobat bisa membuang kode yang berwarna merah jika mau. Untuk demonya silakan lihat di sini

Membuat Like Facebook, Twitter, Google+1 di Postingan Blog

Membuat, Memasang dan Menambahkan Like Facebook, Tweet, Google+1 di Postingan Blog.

Share button / tombol berbagi seperti facebook like, tweet dan Google+1 merupakan salah satu aspek penunjang dalam meningkatkan traffic kunjungan ke blog kita. Apalagi blogger pemula seperti Saya yang masih Nol Besar pemahamannya tentang SEO, mungkin hanya mimpi untuk menjadi nomor 1 di pencarian google. Maka dari itu kita bisa maksimalkan traffic kunjungan blog kita lewat social bookmarking seperti facebook dan twitter.

Langsung saja ya gak usah basa basi lagi dah, hehehe....

1. Masuk ke akun blogger Anda/ dasbor
2. Klik Menu template > Edit HTML> centang Expand Template Widget. Jangan lupa untuk memback up template sobat dengan cara mendownloadnya.
3. Masukkan dulu kode di bawah ini tepat di atas kode </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

kode ini adalah kode javascript untuk memunculkan tombol Google+1, jika kode tersebut sudah ada, maka  tidak perlu dimasukkan lagi.

4. Kemudian Copy kode di bawah ini ;

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<table border='0'><tbody><tr>
    <td><a class='twitter-share-button' data-count='horizontal' data-via='supergaptech' href='https://twitter.com/share'>Tweet</a><script src='//platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=85&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:85px; height:22px;'/></td>
<td><!-- script begin here -->
<script src='http://www.lintas.me/assets/scripts/widget_v2.js?uid=4f49908afb8252a83a003d79' type='text/javascript'/>
<script type='text/javascript'>
lintasme.init(&#39;right&#39;); // options : left, top, bottom, right
</script>
<!-- End script --></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td>
</tr></tbody></table>
    </b:if>

Ganti kode twitter supergaptech dengan nama akun twitter sobat. Sobat juga bisa menghapus kode berwarna biru, jika mau. Widget tersebut adalah kode javascript untuk web directory lintas.me

5. Masukkan kode di atas pada kode-kode ini:

• jika ingin memasang share button di bawah postingan blog cari kode berikut, dan masukkan kode tadi, tepat dibawahnya kode ini.

 <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'/>
          </div>

• Jika ingin memasang share button diatas postingan / di bawah judul postingan, masukkan tepat di bawahnya kode berikut,

 <div class='post-header'>
            <div class='post-header-line-1'/>
          </div>

Kemudian klik pratinjau terlebih dahulu, jika tidak error berarti share button sudah terpasang di blog.  Klik Simpan Template. Share button ini akan ditampilkan di halaman posting bukan di menu utama / homepage. Oleh karena coba buka salah satu postingan blog sobat untuk melihatnya apakah sudah bekerja dengan baik.

Oke, Bagaimana... sudah terpasang? Jika belum bisa, Julak siap membantu. Selamat Berblogging mania, hehehe. Salam Blogger. Jangan lupa di share, hehehe...

Cara Membuat Tombo Like, Share dan Twitter di Sisi Blog

Cara Membuat Share and Like Facebook dan Twitter Melayang di Sisi Kanan Blog - Untuk meningkatkan lalu lintas kunjungan ke blog kita, selain upaya optimasi SEO , perlu juga kiranya kita mengintegrasikan blog kita dengan media jejaring sosial populer seperti facebook dan twitter.

Jika kita meremehkan "kekuatan" share button / tombol berbagi ini, sama saja kita menyiakan-nyiakan peluang untuk menambah kunjungan ke blog kita.

Jika pada posting sebelumnya kita membuat share button di bawah posting, pada tutorial kali ini, Julak mau berbagi sama temen-temen bagaimana membuat salah satu widget share button melayang di sisi kanan blog. Widget kali ini dilengkapi tombol suka dan share Facebook, Tweet, Digg, stumble Upon dan Google +1 termasuk perhitungannya alias berapa banyak pengunjung yang membagikannya. Cara pembuatannya sangat mudah, karena tidak perlu mengedit CSS atau menambahkan kode HTML di template.

1. Langkah pertama masuk ke akun blogger > Dasbor, > klik design/rancangan > Tata Letak

2. Klik Tambah Gadget, di bagian sidebar.

3. Pilih HTML/Javascript, kemudian masukkan kode di bawah ini:

<!--Widget Share like FB tweet google plus digg Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>

<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>

<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 8px;text-align:center;"><a href="http://www.super-gaptek.com/2012/02/cara-membuat-blog-di-blogspot.html" target="blank"><font color="blue">Cara Membuat<font></font></font></a></div></div>

<!--Widget Share like FB tweet google plus digg  Button Melayang End-->

5. Simpan widget dan preview Blog Anda

Jika Anda sudah memiliki tombol google + di atas atau di bawah posting Anda, kemungkinan widget tersebut tidak muncul. Silakan hapus kode berwarna merah jika sobat mau menghapusnya, karena mungkin bisa mempercepat loading blog.

Jika Anda menggunakan template gelap / dark template, Silakan Anda dapat mencoba kode di bawah ini:

<!--Widget Share Button Melayang Start-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Bagikan ke teman anda">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/><div style="clear: both;font-size: 8px;text-align:center;"><a href="http://www.super-gaptek.com/2012/02/cara-membuat-blog-di-blogspot.html" target="blank"><font color="white">Cara Membuat<font></font></font></a></div></div>

<!--Widget Share Button Melayang End-->

Pengaturan lihat kode-kode warna merah:

• angka 15% mengatur letak tinggi posisi share button dr sisi bawah blog, silakan dikurangi jika posisinya ingin diturunkan
• angka 10 pixel adalah posisi dari tepi paling kanan blog, ditambah jika sobat ingin mengetengahkan.
• sedangkan border: 1px solid black, adalah ukuran ketebalan batas kotak share button dan warna batas/garis share button itu sendiri.

Bagaimana...? Selamat Mencoba, jangan lupa di like yaa... hehehe

Cara Memasang Tombol Like Facebook di Blogspot

Cara Memasang / Menambahkan tombol like / suka facebook di blog, merupakan salah satu cara mengoptimalkan postingan blog agar lebih mudah disebarkan, ini berbeda dengan tombol "share" atau bagikan. Ada keunggulan jika kita memasang tombol like facebok dibanding memasang tombol share di blog. Jika seseorang akan membagikan postingan blog kita tentu membutuhkan beberapa proses yang lebih lama dibanding jika hanya meng klik tombol like / suka.

Nah, pada kesempatan kali ini, ane mau berbagi sama temen-temen yang pengen tau cara memasukkan tombol like facebook di blognya. Yuk Mareeee....

1. Login ke akun blog Anda, klik Rancangan > Edit HTML

2. Ingat download dulu template Anda agar jika terjadi kesalahan kita bisa upload kembali.

3. Centang kotak Expand Template widget

4. Cari kode  <body> kemudian masukkan masukkan kode di bawah ini tepat di bawah kode  <body> tadi

 <div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

5. Temukan kode <data:post.body/> kemudian masukkan kode ini di bawahnya.

<div class="fb-like" data-href="URL" data-send="true" data-width="450" data-show-faces="true"></div>

Jangan lupa untuk mengganti nama blog Anda yang ditandai dengan warna merah. Angka 450 menunjukkan lebar ukuran tombol like (seperti gbr di bawah) :

6. Klik pratinjau dahulu, jika berhasil Kemudian simpan template Anda.

7. Jika belum berhasil cari kode-kode yang seperti berikut  contoh berikut:

<div class='postauthor'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
          <span class='fn'><data:post.author/></span>
        </b:if>

kemudian masukkan kode pada langkah 5 di bawah atau di atasnya kode pada nomor 7.

Oke, Selamat Mencoba

Artikel Terkait Lainnya;

Cara Membuat Share Button Tombol Berbagi Efek Berputar

Saat ini banyak widget  share button/tombol berbagi telah dirilis untuk Blogger.  Hal ini cukup membantu Anda untuk membuat blog Anda bersosialisasi dan mendapatkan lebih banyak traffic. Menambahkan tombol bookmark sosial adalah cara yang keren untuk mendapatkan lebih banyak pembaca dan pemirsa yang ditargetkan.

Tombol berbagi yang Ane bagi sekarang cukup keren, ketika pointer mouse diarahkan ke tombol tersebut ia akan memutar 360 derajat.

Share Button Efek Berputar

Berikut adalah cara untuk menambahkan tombol berbagi dengan efek berputar ke blog Blogger Anda:

1.    Login ke blogger> Desain> Edit HTML> Expand Widget Templates. Cari kode berikut pada template Anda: (ctrl + f)

<data:post.body/>

2.    Tepat di bawahnya tambahkan kode berikut ini: 

<b:if cond='data:blog.pageType == "item"'>
<div class='spinning_icons'>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank' title='Twitter'>Twitter</a>
<a class='delicious' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Delicious'>Delicious</a>
<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Digg'>Digg</a>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Facebook'>Facebook</a>
<a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/refer.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank' title='Stumbleupon'>Stumbleupon</a>
<a class='rss' href='http://feeds.feedburner.com/blogbelajar2' target='_blank' title='RSS'>RSS</a>
</div>
</b:if>

3.    Ganti  http://feeds.feedburner.com/blogbelajar2 dengan username feedburner Anda, kemudian cari kode ini:

]]></b:skin>

4.    Tepat di atas kode tersebut di atas tambahkan kode di bawah ini:

.spinning_icons a{
    width:48px;
    height:48px;
    display:inline-block;
    text-indent:-9999em;
    background-position:0 0;
    background-repeat:no-repeat;
    z-index:2000;
    overflow:hidden;
}
.twitter{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx2EyRpeH4nbz89s85rnIz0RzIxvU3WiftaV5hfI_XltkuflzyDP7EBvqqMVW16qSj9VB4ykWixFgJVcKtzinayHY26EIhBV_4N7HInAo7OV-ZCoETO9G-gm-jBAWiO_ln7H6WteiRa3Q/s1600/twitter_32.png'); }
.delicious{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZXW1RuFNwb9CYXICYCvJ61NfvJ2AtvTeKaOl2LNVyV6_GnW8seyxEtOl-nTH_GT6Im2E7EIeA4y3DklOl99IWsavvswmTJSpcZ8DIdVffeTcyQBeK2rItC04dSAGMyCQe3sjxr5LJw4/s1600/delicious_32.png'); }
.digg{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6tQiWKgoh9JAw5R4_c3372XB60ET4Tm6YRkjW4aHImwktrpgPXfx9j1Rzbqm7f__ELHnrb576tCGJsE8r6FYWricvM3Png-x1SULlZiYHHjx_JrbF3UmsiUjostmDV8tBCEPStUbC_0g/s1600/digg_32.png'); }
.facebook{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrfjOBaI3GV32g0CfYVzYYeBGCnI9MI9PWfRjkiDP366hAGMByj3SrNf5UPTQqdCAK2iz-65ALZnJhyphenhyphenw03LbVZ5e6cHsQKC3l2W_1Q1up5bGcohqK7thorIb1_WZZqUgfFKmmc_mvsOMM/s1600/facebook_32.png'); }
.rss{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0_shSiKgZ3Nb0fRpDxVHDITZ6hvFO1F-J5JVY7XMRPKy6OPltjtdZi5Wb7ey7UsU4vl_zQf2Yla5k2RnItZ6GyxhEDVbq9cLUe0SUURxkltHXSd3ykrA0KZIOvtXGTqAfikPofIx20DE/s1600/rss_32.png'); }
.stumbleupon{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4UiaJRhU-yITZfKo8pPN1iJGrSZVZgU4k0zhzy5dkuJklA0luuMAsK6VUbIz04H1TqXLYMBlwWjZXvw4eWZZY9JuIRfM_iKPzSVGBtIcxVanDX5cWEzI4Ltg6qu6ml25rSGKi79-H_9Y/s1600/stumbleupon_32.png'); }
.spinning_icons a:hover{
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    transition: transform 0.2s ease-out;
    -webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

Untuk demonya silakan sobat buka di sini

5.    Sebelum  menyimpan klik pratinjau dulu, jika error berarti ada kesalahan. Jika bagus simpan template dan tombol berbagi  dengan efek berputar Anda sudah jadi. Selamat Mencoba.