Tips Membuat Social Media Unik

Pada tips blog ini saya masih akan melanjutkan artikel sebelumnya tentang cara membuat widget social media untuk blog, yang tentunya ga kalah menarik dan unik dengan pembahasan sebelumnya. Untuk widget social media ini memang saya khususkan buat template yang lagi ngetren saat ini yaitu Template Metro.
  Template - template tersebut memang didesign mengikuti era perkembangan windows 8 dengan tampilan timelinenya, tentunya dengan warna yang berani alias ngejreng.

Berikut widget social media unik ala Metro UI

1. Widget Social Media Efek Flip ( Berputar Balik )


Untuk pemasangannya seperti memasang widget biasanya dan ga perlu repot -repot untuk edit HTML tinggal Masuk Dashboard >> Add Gadget >> HTML/Javascript >> Dan Copas Kode dibawah ini :

<style type="text/css">
#malik-mubeng{ width:400px;}
ul.malik-mubeng{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.malik-mubeng li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: -px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.malik-mubeng li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.malik-mubeng li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.malik-mubeng li a img{
border-width: 0;
}
ul.malik-mubeng li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.malik-mubeng li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
</style><br />
<div id="malik-mubeng">
<ul class="malik-mubeng">
<li><a href="http://www.pinterest.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUyjGYsE2aytJDlnGPcP5f76rI7RMyn7nKEJMsE71vlUSRVYxHSWlTQSgvbO3wIA4HR5INTw97UPujoAjGx6nfoW2ggD6mLYXUg2aEEKWunKt5-bYu9qOFZDqT1pSCMxG1G6kBq-Bkzw/s1600/Samsury-pinterest.gif" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiOXaXfWG99YyYe9V6wQ36mYtoCX3y5gJU0PBI9VjrFcvc2givEUhZ__-4lpAnXNeiDroWFp-mH1qzeC4TRVQjnb5m0v_0JLt0sxw9NttrxTo2u6jWP1WPu9gevmeF7KeQU9AKmVCyhRA/s1600/Samsury-facebook.gif" title="Facebook" /></a></li>
<li><a href="https://plus.google.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihLlcfkjjQ_ST7uyPJtbWltjbjq9rzr13mEQwhlFfUqdCC0Jvq2gq00uq0-ZdHINxsPBxiK5_u4xW1GUw9f2jJxhoLYqU6w5lrNVkU-4UAj4wG_v7OhSJ6Bp_kqd6JI1oYi75E4SqhGPY/s1600/Samsury-google+.gif" title="Google +" /></a></li>
<li><a href="http://www.twitter.com"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzkg2fiDcKyupEbqF74mn3sKC7OXnw58rdHhD6msVIcp2NkpRT8Ka3KfoNWTdcwxAJlr2m2fuMTuAm2BaBLR3gJIJKy7MXAdf1XZyah8lDCfDM_inGSWu6fmAFOGQ3-CDRtIewfcfeJQs/s1600/Samsury-Twitter.gif" title="Add to Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIdM4bGnCdTx69MqFmxi3gLN-GX8hgWeDyyDwL18KONuk5QZKRM0grtf9fP8SneshApBOAYICJMP5VKxDdfAjCotFYplOhCYwjMCqgFKE5XVOTWVcbwnYtPlVei406la-JuoVpIAlmk8/s1600/samsury-rss.gif" title="Add RSS Feed" /></a></li>
</ul>
</div>

2. Widget Social Media Efek Drop Down


Copas Kode dibawah ini :

<style type="text/css">
#munggah-mudun-icon{ width:400px;}
ul.munggah-mudun-icon{
margin:0;
padding:0;
list-style:none;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
ul.munggah-mudun-icon li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: -px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.munggah-mudun-icon li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
ul.munggah-mudun-icon li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}
ul.munggah-mudun-icon li a img{
border-width: 0;
}
ul.munggah-mudun-icon li:hover a{
-webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);
}
ul.munggah-mudun-icon li:hover a span{
-webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);
}
</style><br />
<div id="munggah-mudun-icon">
<ul class="munggah-mudun-icon">
<li><a href="http://www.pinterest.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmUyjGYsE2aytJDlnGPcP5f76rI7RMyn7nKEJMsE71vlUSRVYxHSWlTQSgvbO3wIA4HR5INTw97UPujoAjGx6nfoW2ggD6mLYXUg2aEEKWunKt5-bYu9qOFZDqT1pSCMxG1G6kBq-Bkzw/s1600/Samsury-pinterest.gif" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiOXaXfWG99YyYe9V6wQ36mYtoCX3y5gJU0PBI9VjrFcvc2givEUhZ__-4lpAnXNeiDroWFp-mH1qzeC4TRVQjnb5m0v_0JLt0sxw9NttrxTo2u6jWP1WPu9gevmeF7KeQU9AKmVCyhRA/s1600/Samsury-facebook.gif" title="Facebook" /></a></li>
<li><a href="https://plus.google.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihLlcfkjjQ_ST7uyPJtbWltjbjq9rzr13mEQwhlFfUqdCC0Jvq2gq00uq0-ZdHINxsPBxiK5_u4xW1GUw9f2jJxhoLYqU6w5lrNVkU-4UAj4wG_v7OhSJ6Bp_kqd6JI1oYi75E4SqhGPY/s1600/Samsury-google+.gif" title="Google +" /></a></li>
<li><a href="http://www.twitter.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzkg2fiDcKyupEbqF74mn3sKC7OXnw58rdHhD6msVIcp2NkpRT8Ka3KfoNWTdcwxAJlr2m2fuMTuAm2BaBLR3gJIJKy7MXAdf1XZyah8lDCfDM_inGSWu6fmAFOGQ3-CDRtIewfcfeJQs/s1600/Samsury-Twitter.gif" title="Twitter" /></a></li>
<li><a href="http://feeds.feedburner.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUIdM4bGnCdTx69MqFmxi3gLN-GX8hgWeDyyDwL18KONuk5QZKRM0grtf9fP8SneshApBOAYICJMP5VKxDdfAjCotFYplOhCYwjMCqgFKE5XVOTWVcbwnYtPlVei406la-JuoVpIAlmk8/s1600/samsury-rss.gif" title="RSS Feed" /></a></li>
</ul>
</div>

Silahkan Ganti Tulisan Cetak tebal sesuai URL anda

Demikianlah sedikit tips sederhana blog yang saya berikan semoga bermanfaat.

Bagikan ke :

Facebook Google+ Twitter Digg Technorati Reddit