Metro Mini Responsive Blogger Template

Masih berhubungan dengan template blog gaya metro dan widget uniknya, kali ini saya akan mencoba memberikan contoh template blog hasil modifikasi yang tentunya masih bernuansa metro. Untuk kelebihan template ini sudah didukung responsive design portable untuk semua perangkat browser internet.

Fitur Metro Mini Responsive Template

1. Responsive Design di http://www.responsinator.com
2. Minimalis design yang bernuansa metro walaupun belum secara keseluruhan.
3. Desain 2 kolom dengan sidebar disebelah kanan
4. Kecepatan Loading Blog di Pagespeed Insight 84 % dan GTmetrix 94 % Yslow 84 %
5. Share dan related post di bawah postingan blog.
6. Thread komentar

• PREVIEW

• DOWNLOAD

Anda tinggal mengganti semua ID pada metatag, dan tanda # pada menu navigasi dengan URL BLOG ANDA

Demikian sedikit informasi template blog metro kali semoga bermanfaat. Happy Blogging

Related Post Tooltip Gaya Metro Style

Menerapkan gaya template blog metro windows ke dalam template blog rasanya tidak akan ada habis - habisnya untuk dibahas. Seiring berkembangnya trend didunia blogging makin banyak pula ide - ide yang mereka kembangkan dengan sedikit meniru gaya blog Metro UI/ metro style mulai dari widget unik, template dan sebagainya. Dan untuk kali ini saya akan berbagi tips blog membuat related post efek tooltip dengan model metro style. Untuk tampilanya anda bisa melihat pada blog ini.

Untuk langkah - langkah pemasangan di blog adalah sebagai berikut :

Masuk ke Edit Template dan masukkan kode CSS di bawah ini sebelum kode [[</b:skin> 

.related-post .post-thumbnail {
 z-index: 1;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 0;
 display: block;
 border-right: 1px solid #fff;
 border-bottom: 1px solid #fff;
 -webkit-box-shadow: inset 2px 2px 5px #444;
 -moz-box-shadow: inset 2px 2px 5px #444;
 box-shadow: inset 2px 2px 5px #555;
}
.related-post {
 float: left;
 position: relative;
 width: 98px;
 height: 98px;
 margin: 0 10px 10px 0;
 background: #F6F6F6;
 }
.related-post .related-post-title {
 display: none;
 float: left;
 background: #000;
 color: #fff;
 text-shadow: none;
 font-weight: bold;
 padding: 10px;
 position: absolute;
 top: -20px;
 left: 40px;
 z-index: 2;
 width: 200px;
 -webkit-box-shadow: 0 0 2px #444;
 -moz-box-shadow: 0 0 2px #444;
 box-shadow: 0 0 2px #444;
}
.related-post:hover .related-post-title {display: block;}

Kemudian masukkan kode dibawah ini sebelum kode <div class='post-footer'> atau <data:post.body/>

<div id='related-posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1jXcjzxUnd5y0C4ulYNK1BZELEReI7MtHFBAgyzcooYYwcuCEtnyquF5YHlL-wrtlmhPJ8lrfCW1490dvJSPCyvTGaEkXL9edR3faGU3emZKrXFWBotKI0wzBUIXGI9dOqtDUfcaGcy2V/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};
//]]></script>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:if>
</div>
<div class='clear'/>

Terakhir Save template dan lihat hasilnya.

Gunakan trial error untuk menempatkan java scriptnya di bawah <data:post.body/> karena ada banyak untuk kode ini dan setiap template bisa saja berbeda

Demikian tips blog kali ini semoga bisa membantu dan bermanfaat.
Salam Blogger

Blogify Responsive Template Metro Windows

Memperkenalkan template blog responsive bergaya metro windows namanya Blogify Template, dan untuk saat ini template blogify masih Premium dengan harga $16. Untuk tahap percobaan kita bisa menginstallnya secara  Free Version.

Fitur Responsive Blogify Template

1. Sesuai namanya template ini sudah didesain Responsive dan mendukung untuk semua perangkat browser.

2. Desain 1 colom dengan widget auto hide dibagian Header dan Footer.

3. Semua script sudah dirangkum dalam eksternal script untuk mempercepat loading blog

4. Warna yang dinamis sesuai slogan template bergaya metro style.

5. Efek scroll yang halus dan menakjubkan .

6. Template ini memiliki kotak berlangganan yang dirancang secara profesional , Anda hanya perlu mengubah url pencarian pada NEWSLETTER.

• PREVIEW

• DOWNLOAD

Anda tidak diperbolehkan edit pada bagian Footer karena disini terletak link kredit si pembuat template, jika anda merubah sedikit saja pada bagian footer maka anda akan langsung direct ke http://www.templateify.com

Demikian sekilas tentang Responsive Blogify Template, jika anda berminat bisa mencobanya untuk mengetahui lebih jauh template ini.
Happy Blogging

Widget Daftar Link Dengan CSS Efek

Masih seputar widget unik dengan menggunakan sedikit efek CSS agar tampilannya lebih menarik, widget ini bisa kita gunakan untuk daftar link misalnya Exchange Link. Dengan warna yang lebih berani dan stylish mungkin bisa juga anda terapkan pada template blog metro.

• DEMO

Untuk pemasangan di blog cukup masuk Layout >> Add Gadget >> HTML/Javascript dan masukkan kode dibawah ini :

<style scoped="scoped" type="text/css">
#vn-link {
    margin: 0;
    padding: 0;
    font-family: Verdana, Helvetica, Arial, sans-serif;
}
#vn-link {
    width: 360px;
}
#vn-link ul {
    list-style: none;
    text-indent: 0px;
}
#vn-link li {
    margin-top: 0px;
    border-bottom: 2px solid #555;
}
#vn-link a {
    font-family:Verdana, Geneva, sans-serif;
    font-size: 12px;
    font-weight:bold;
    font-variant: inherit;
    text-transform:uppercase;
    padding: 0px;
    color:#fafafa;
    display: block;
    padding: 13px 50px;
    height: 16px;
    line-height: 16px;
    text-decoration: none;
    background: #FF6347;
    text-shadow: 1px 1px 1px #111;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}
#vn-link a:hover {
    background: #1E90FF;
    font-size: 14px;
    padding: 13px 60px;
    -webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    -ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
    transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
 
}
#vn-link a:visited {
    background:#FF6347;  
}
#vn-link a:active {
    background:#FF6347;  
}
</style>

<br />
<div id="vn-link">
<ul>
<li><a href="#">VIRLYZ NYZAM A</a></li>
<li><a href="#">VIRLYZ NYZAM B</a></li>
<li><a href="#">VIRLYZ NYZAM C</a></li>
<li><a href="#">VIRLYZ NYZAM D</a></li>
<li><a href="#">VIRLYZ NYZAM E</a></li>
<li><a href="#">VIRLYZ NYZAM F</a></li>
</ul>
</div>

Anda cukup mengganti tanda # dengan URL blog yang ingin anda tampilkan, angka 360 px adalah lebar widget sesuaikan dengan sidebar blog anda

Demikian tips membuat widget unik daftar link dengan efek CSS, semoga bermanfaat.

Menu Breadcrumb Metro Style

Menu Breadcrumb Metro Style - Menu navigasi breadcrumb ini berfungsi untuk mempermudah para pembaca / pengunjung untuk menelusuri seluruh isi dari sebuah blog. Setiap blog yang pernah kita kunjungi pasti terdapat navigasi breadcrumb yang berada diatas title  post, mulai dari design sederhana sampai yang keren - keren / unik. Terkait dengan menu navigasi ini saya akan berbagi tips membuat Navigasi Breadcrumb yang bergaya metro style. Mungkin menu ini akan lebih cocok bagi mereka yang menggunakan template blog metro, seperti menu navigasi metro ui. Untuk tampilannya silakan lihat demonya dibawah ini :

• DEMO

Langsung kita lanjutkan ke cara pemasangan di blog, masuk Edit HTML >> Expand Template ( Tekan CTRL+A, CTRL+C, DEL, CTRL+V ). kemudian masukkan kode css dibawah ini sebelum kode [[ </b:skin>

#vn-brcmb{
  background: #02ab68;
  width:620px;
  margin-left:20px;
  border-width: 1px;
  font-family:&#39;Oswald&#39;, Arial, Helvetica, sans-serif;
  margin-top:40px;
  text-transform: uppercase;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
}
#vn-brcmb  li{
  float: left;
}
#vn-brcmb  a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ff8c00;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);
}
#vn-brcmb  li:first-child a{
  padding-left: 1em;
}
#vn-brcmb  a:hover{
  background: #ff8c00;
}
#vn-brcmb  a::after,
#vn-brcmb  a::before{
  content: &quot;&quot;;
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}
#vn-brcmb a::after{
  z-index: 2;
  border-left-color: #ddd;
}
#vn-brcmb  a::before{
  border-left-color: #ccc;
  right: -1.1em;
  z-index: 1;
}
#vn-brcmb  a:hover::after{
  border-left-color: #ff8c00;
}
#vn-brcmb  .current,
#vn-brcmb  .current:hover{
  font-weight: bold;
  background: none;
}
#vn-brcmb  .current::after,
#vn-brcmb .current::before{
  content: normal;
}
ul{
  margin: 0;
  padding: 0;
  list-style: none;
}
#vn-brcmb .current,
#vn-brcmb .current:hover{
  font-weight: normal;
  background: none;
}
#vn-brcmb .current::after,
#vn-brcmb .current::before{
  content: normal; 
}

Setelah itu cari kode <div class='blog-posts hfeed'>
Dan masukkan kode dibawahnya:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<ul id='vn-brcmb'>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<b:else/>
</b:if><li><a class='current'><data:post.title/></a></li>
</b:loop>
</ul>
<b:else/>
</b:if></b:if>

Jika anda sebelumnya sudah memakai navigasi breadcrumb sebaiknya anda hapus terlebih dulu, agar tidak menjadi 2. Mulailah dengan kata " breadcrumb " untuk menemukan kode tersebut baik CSS maupun pemanggil breadcrumbnya

Demikian semoga bermanfaat, happy blogging.

Template Blog Gaya Metro Style

Template Blog Gaya Metro Style - Banyak sekali para blogger yang mendesign tampilan blog yang mereka sayangi agar tampil beda, menarik, unik dan keren tentunya. Seperti misalnya template blog metro style yang lagi ngetren untuk saat ini, seiring berkembangannya windows 8 yang diterapkan dalam blogger.

Dan sebagai contoh designnya seperti dibawah ini :

1. Flat Mag Blogger Template

• PREVIEW

• DOWNLOAD

2. Max Mag Blogger Template

• PREVIEW

• DOWNLOAD

Template blog diatas hanyalah sebagai gambaran gaya blogger masa kini, dan sekaligus untuk koleksi pada blog ini. Enjoy Blogging..!!!

Widget Unik Social Media Efek Animasi

Widget Unik Social Media Efek Animasi - Kembali lagi menghadirkan sesuatu yang baru dan fresh seputar widget unik sosial media untuk blog. Dan tampilan untuk kali ini sangat cocok sekali buat anda para blogger yang menggunakan template blog bergaya metro style, sebagai contoh templatenya bisa anda download disini. Dengan menambahkan sedikit efek animasi model scroll membuat widget ini akan terasa unik dan cantik untuk sebuah blog. Sebagai gambaranya silakan klik link demo dibawah ini :

• DEMO

Untuk cara pemasangannya masih seperti biasa dengan masuk ke Layout >> Add Gadget >> HTML/Javascript >> Dan masukkan kode dibawah ini :

<style type="text/css" scoped="scoped">
.vn-sos-anime {
margin:0 auto;
padding:0px;
text-decoration: none;
}
.vn-sos-anime ul li {
list-style-type: none;
border-bottom:none;
margin:0 auto;
background: none;
padding:0px;
line-height: 0!important;
}
.vn-sos-anime li a {
margin:5px 3px 0px 0px !important;
padding:0px;
width:50px;
height:50px;
text-indent:-99999px;
float:left;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.vn-sos-anime li a.facebook1 {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px 0px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.facebook1:hover {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -73px;
}
.vn-sos-anime li a.twitter1 {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -127px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.twitter1:hover {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -204px;
}
.vn-sos-anime li a.google-p1 {
background:#a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -254px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.google-p1:hover {
background: #a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -330px;
}
.vn-sos-anime li a.rss1 {
background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -381px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.rss1:hover {
background: #ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -454px;
}
.vn-sos-anime li a.pinit1 {
background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -508px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.pinit1:hover {
background: #cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -580px;
}
.vn-sos-anime li a.linkdin1 {
background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -635px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.vn-sos-anime li a.linkdin1:hover {
background: #1698e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgztXjUpSzg7D__nJmgtAGQf3qQKQvHTVNgc2ot6byTR5cj4zBdHVwRNu_fNY4vAakCgeqG0VE6_q-EvgzO3bu83Qdvotai3u1CX0kImxyHUTKmfQLBIoCbkJCbPpjr08QdrYGILQMMH-qw/s1600/social_sprites.png) no-repeat 0px -711px;
}
</style>

<div class="vn-sos-anime">
<ul>
<li><a class="facebook1" href="#" rel="nofollow" target="_blank" title="Facebook"></a></li>
<li><a class="twitter1" href="#" rel="nofollow" target="_blank" title="Twitter"></a></li>
<li><a class="google-p1" href="#" rel="nofollow" target="_blank" title="Google Plus"></a></li>
<li><a class="rss1" href="#" rel="nofollow" target="_blaank" title="RSS Feed"></a></li>
<li><a class="pinit1" href="#" rel="nofollow" target="_blank" title="Pinterest"></a></li>
<li><a class="linkdin1" href="#" rel="nofollow" target="_blank" title="Linkedin"></a></li>
</ul>
</div>

Ganti tanda # dengan URL sesuai data blog anda

Semoga dengan tampilan yang cantik dan menarik seperti ini akan memacu semangat kita untuk terus berinspirasi dan menulis artikel yang bermanfaat buat para pemaca di dunia maya. Akhirnya demikianlah tips widget unik untuk blog kali ini dan Salam Blogger

Modifikasi Widget Label Ala Metro Style

Modifikasi Widget Label Ala Metro Style - Sesuai thema yang kita bahas sebelumnya  tentang template blog metro, dan widget unik metro style disini saya juga akan memberikan tips blog sederhana untuk modifikasi widget label default blogger ke gaya blog metro ui style. Untuk caranya sangat sederhana dan simple sekali hanya dengan menambahkan sedikit kode css ke dalam template blog. Caranya copy kode css dibawah ini sebelum kode ]]></b:skin>

CSS CODE

.Label a{
padding-left:10px;
background:#007f74;
padding:0 10px;
color:#fff!important;
height:26px;
line-height:26px;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:1px;
margin-top:1px;
font-size:13px; }
.Label a:hover{
background:#ff8c00;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: px;
}

Silakan ganti warna background # 007f74 dan #ff8c00 untuk hover backgroundnya sesuai selera anda, kode css diatas hanyalah contoh sederhana saja. Dan untuk modifikasi pengembangan silakan anda berkreasi sendiri agar tampilan lebih maksimal. Anda juga bisa memilih untuk tampilan labelnya yaitu Cloud dan List pada edit widget label. Untuk demonya bisa anda lihat label pada blog ini

Contoh kode CSS pengembangannya seperti dibawah ini :

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #007f74;
border-radius: 3px;
float:left;text-decoration:none;font-size:10px;color:#666;}

.label-size:hover {
border:1px solid #ff8c00;
text-decoration: none;-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.label-size a {text-transform: uppercase;float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}

Demikian sedikit tips sederhana widget unik untuk metro style, semoga bermanfaat dan Happy Blogging

Widget Unik Social Metro Efek Zoom

Widget Unik Social Metro Efek Zoom - Kurang afdol jika sebuah blog yang keren namun tidak terpasang widget social media, karena biar bagaimanapun kehadiran social media sangat berpengaruh bagi popularitas sebuah blog. Masih berkaitan tentang widget unik khususnya bagi mereka para blogger yang menggunakan template blog metro, yaitu membuat widget social media ala metro dengan efek zoom.

Untuk tampilannya seperti dibawah ini :

• DEMO

Selanjutnya untuk cara pemasangannya :

Masuk ke Layout >> Add Gadget >> HTML/Javascript dan masukkan kode dibawah ini :

<style type="text/css" scoped="scoped">
.vn-metrozoom {list-style-type:none;margin:0;padding:0;}
.vn-metrozoom li{display:inline;width: 60px;height:60px;}
.vn-metrozoom li img{width: 40px;height: 40px;border:0;margin-right: 4px;-webkit-transition:-webkit-transform 0.1s ease-in;-o-transition:-o-transform 0.1s ease-in}
.vn-metrozoom li img:hover{-moz-transform:scale(1.8);-webkit-transform:scale(1.8);-o-transform:scale(1.8);}
</style>

     <ul class="vn-metrozoom">
<li><a href="#"><img src="http://i.imgur.com/6AI7jNU.png" title="Facebook"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/qWbojzO.png" title="Twitter"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/g8dACcy.png" title="Google +"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/WOWCE5P.png" title="Youtube"/></a></li>
<li><a href="#"><img src="http://i.imgur.com/SgONHEw.png" title="RSS Feed"/></a></li>
</ul>

Ganti tanda # warna merah dengan URL data blog anda

Demikian tips widget unik kali ini, dan semoga tetep bermanfaat.
Happy Blogging