Monday, July 23, 2012

Cara Membuat/Memasang Widget Social Bookmark (Hover Effect)

Cara Membuat/Memasang Widget Social Bookmark (Hover Effect) - Masih dengan saya dengan postingan terbaru kali ini, tentunya yang berkategorikan Widget. Allhamdullilah dengan kesempatan yang bermanfaat ini saya dapat update di ANVITY Blog | Internet Learning. Widget yang akan saya bahas kali ini adalah widget Social Sharing/Bookmarking dengan gaya "Hover Effect". Mungkin judul (title of post) kali ini cukup panjang, tetapi tidak masalah. :D

- kembali ke laptop -


Widget sosial bookmark/sharing dengan gaya Popular Gray-scale/Color di blog/web. Maksudnya adalah ketika pointer/mouse ke salah satu icon di widget tersebut yang sebelumnya bewarna Abu-abu menjadi berwarna sesuai warna icon. Widget social yang saya berikan ini menurut saya cukup cool (baca: keren/indah) dengan dengan CSS3 dan jQuery. Widget ini sudah saya gunakan sejak lama karena saya suka sekali dengan widget ini. Maka dari itulah saya posting artikel ini. Untuk demo widgetnya silahkan lihat di halaman postingan bagian bawah blog ini.
Well, tanpa panjang lebar silahkan ikuti langkah-langkah dibawah ini.
1. Pastikan sahabat sudah login ke akun Blogger.
2. Masuk ke bagian "Template" pada Dashboard
3. Pilih (klik) "Edit HTML"
4. Cari kode ]]><b:skin> (Gunakan Ctrl+F)
5. Letakan kode CCS dibawah ini tepat dibawah kode ]]></b:skin>
#anvity-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#anvity-share ul li {display: inline;background:none;margin:0;padding:0;}
#anvity-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('http://4.bp.blogspot.com/-94xCOZSsMhI/Td9Cglmov5I/AAAAAAAAA4M/0kADSqbjdek/s1600/way2blogging-share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#anvity-share ul li a.twitter    {background-position: -0px -0px;   }
#anvity-share ul li a.twitter:hover {background-position: -0px -33px;  }
#anvity-share ul li a.facebook   {background-position: -32px -0px;  }
#anvity-share ul li a.facebook:hover {background-position: -32px -33px; }
#anvity-share ul li a.stumbleupon  {background-position: -64px -0px;  }
#anvity-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#anvity-share ul li a.digg    {background-position: -192px -0px; }
#anvity-share ul li a.digg:hover  {background-position: -192px -33px;}
#anvity-share ul li a.reddit   {background-position: -160px -0px; }
#anvity-share ul li a.reddit:hover  {background-position: -160px -33px;}
#anvity-share ul li a.google   {background-position: -128px -0px; }
#anvity-share ul li a.google:hover  {background-position: -128px -33px;}
#anvity-share ul li a.del-icio-us  {background-position: -480px -0px; }
#anvity-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#anvity-share ul li a.mixx    {background-position: -96px -0px;  }
#anvity-share ul li a.mixx:hover  {background-position: -96px -33px; }
#anvity-share ul li a.technorati  {background-position: -416px -0px; }
#anvity-share ul li a.technorati:hover {background-position: -416px -33px;}
#anvity-share ul li a.linkin   {background-position: -256px -0px; }
#anvity-share ul li a.linkin:hover  {background-position: -256px -33px;}
#anvity-share ul li a.yahoobuzz  {background-position: -448px -0px; }
#anvity-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#anvity-share ul li a.myspace   {background-position: -512px -0px; }
#anvity-share ul li a.myspace:hover {background-position: -512px -33px;}
#anvity-share ul li a.more    {background-position: -576px -0px; }
#anvity-share ul li a.more:hover  {background-position: -576px -33px;}
6. Centang "Expand Widget Template" dan kemudian cari kode <data:post.body/> (Gunakan Ctrl+F)
7. Letakan kode dibawah ini tepat dibawah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='anvity-share'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>
8. Save Template. Done!

Solusi untuk pencarian kode <data:post.body/>


Biasanya kode <data:post.body/> terdapat 3 buah, bahkan di HTML Template Blog ini sampai 4. So, untuk menyelesaikan masalah penemuan kode tersebut, silahkan letakan saja di salah satu ketiga kode berikut. Lebih bagus coba terlebih dahulu yang pertama dan lihat hasilnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer'>

Enjoy and Happy Blogging!

Tuesday, July 3, 2012

Cara Memasang Widget Google Translate Gambar Bendera

Cara Memasang Widget Google Translate Gambar Bendera - Seperti pada judul (title tag) pada blog ini, "Blogspot Tutorial". Ya! pada kesempatan kali ini sangat tidak jauh berbeda dengan kalimat pada judul blog ini. So, yang akan dibahas adalah widget pada blog.

- kembali ke laptop -

Apa itu Google Translate (Sejarahnya)?

Google Terjemahan adalah layanan yang disediakan oleh Google Inc. untuk menerjemahkan bagian teks atau halaman web dalam satu bahasa ke bahasa lain. Untuk beberapa bahasa, pengguna diminta untuk memberikan terjemahan alternatif, seperti untuk istilah teknis, yang akan dimasukkan untuk pembaruan dalam proses penerjemahan selanjutnya. Tidak seperti layanan terjemahan lain seperti Babel Fish dan AOL yang menggunakan SYSTRAN, Google menggunakan perangkat lunak terjemahan sendiri.

Google Terjemahan seperti alat terjemahan otomatis lain, memiliki beberapa keterbatasan. Meskipun dapat membantu pembaca untuk memahami isi umum dari teks bahasa asing, tetapi biasanya tidak memberikan terjemahan yang akurat.

Google melakukan penerjemahkan dengan pendekatan yang disebut penerjemahan berdasar statistik. Penerjemahan demikian merupakan hasil penelitian Franz-Josef Och yang telah memenangkan kontes DARPA untuk kecepatan mesin terjemahan pada tahun 2003. Sekarang Och menjadi kepala departemen mesin penerjemah Google.


Adapun langkah-langkah memasangnya sebagai berikut.
1. Pastikan sahabat sudah login ke akun Blogger.
2. Masuk ke tab Rancangan/Layout.
3. Klik Add a Gadget.
4. Kemudian pilih HTML/Javascript.
5. Salinlah script (kode) Google Translate dibawah ini.
<!-- Google Translate with language image by anvity.com -->
<style>
.google_translate img {filter:alpha(opacity=100);-moz-opacity: 1.0;opacity: 1.0;border:0}
.google_translate:hover img {filter:alpha(opacity=30);-moz-opacity: 0.30;opacity: 0.30;border:0}
.google_translatextra:hover img {filter:alpha(opacity=0.30);-moz-opacity: 0.30;opacity: 0.30;border:0}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwjycGEnLI/AAAAAAAAA1o/7p6S3-tipsA/English_thumb%5B3%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj1AdOWZI/AAAAAAAAA1w/lWUkGNrOFYo/French_thumb%5B5%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwj4Ab0NaI/AAAAAAAAA14/3H56LPKtijA/German_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj8KhadjI/AAAAAAAAA2A/GNyl8VBie3o/Spain_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="http://lh3.ggpht.com/_pt7i0nbIOCY/SWwj-14HeyI/AAAAAAAAA2I/TN52dIqkO9Q/Italian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkBmKewNI/AAAAAAAAA2Q/43NEAnyNo1I/Dutch_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<br /><br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkESa-0pI/AAAAAAAAA2Y/i0X4cKgxq3g/Russian_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkG0osjzI/AAAAAAAAA2g/_kM2A16R_Ho/Portuguese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkJ6RBJAI/AAAAAAAAA2o/lpsTh893J3k/Japanese_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="http://lh4.ggpht.com/_pt7i0nbIOCY/SWwkMouNMKI/AAAAAAAAA2w/L5l6J-Hh8XA/Korean_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="http://lh5.ggpht.com/_pt7i0nbIOCY/SWwkPdkvXBI/AAAAAAAAA24/A1LSG1lcuac/Arabic_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="http://lh6.ggpht.com/_pt7i0nbIOCY/SWwkSgrv4ZI/AAAAAAAAA3A/jQqZ1l6avts/Chinese-Simplified_thumb%5B1%5D.png?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div>
<!-- Google Translate with language image End -->
6. Klik Save Gadget. Done!

Semoga tutorial diatas terperinci dan dapat dipahami sekaligus bermanfaat bagi sahabat ANVITY Blog | Internet Learning.

Sunday, July 1, 2012

Video Animasi Keren/Menarik: Animator VS Animation II- Part 2

Video Animasi Keren/Menarik: Animator VS Animation II- Part 2 - Seperti janji saya pada postingan sebelumnya, yaitu Episode/Part pertama pada video animasi ini. Kali ini saya akan melanjutkan video menarik tersebut (Part 2).

Okey! Tanpa panjang lebar, karena ini hanyalah sebuat video, jadi tidak ada yang diperbincangkan disini. Tidak seperti artikel mengenai tutorial atau tips. Berikut cuplikannya.
 
The animator, looking for a challenge, decides to make the stick figure harder to beat. Little does he know exactly how much power he is giving to the little guy. Long live The Chosen One!
Jangan kemana-mana, karena masih ada kelanjutan ceritanya. Episode (part) selanjutnya akan saya publikasikan pada posting selanjutnya di ANVITY Blog | Internet Learning. Enjoy!