Membuat Widget Navigasi Metro UI

Tips Widget Unik Navigasi Metro UI - Untuk widget unik kali ini saya khususkan bagi para pengguna template blog Metro UI ala windows 8, seperti artikel widget social media unik maka saya persembahkan buat anda untuk widget navigasi unik metro. Dimana navigasi ini memang di design untuk memberikan warna yang berbeda pada tampilan blog yang bernuansa Metro UI.

• DEMO

Untuk langkah - langkahnya sebagai berikut :

Masuk Edit Template >> Dan Copas kode dibawah ini sebelum kode ]]></b:skin>

.samsury-metronav { font-family:sans-serif;
 text-decoration:none;
 width:960px;
 margin:auto;
}
@media screen and (max-width:960px) {
 .samsury-metronav {
 width:100%;
 }
}

.SamsuryMetroMenu {
 position:relative;
}
.samsury-nav {
 position:absolute;
 width:100%;
 z-index:999;
 display:none;
}
.samsury-ctrlbar {
 width:100%;
 height:48px;
}
.samsury-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 display:inline-block;
 text-align:center;
}
.samsury-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;
 opacity:0.5;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
 filter: alpha(opacity=50) !important; }
.samsury-ctrlitem:hover {
 opacity:0.8;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; }
.samsury-activectrlitem {
 opacity:1 !important;
 -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; }
.samsury-controlitems {
 width:960px;
 margin:auto;
}
.samsury-controlitem {
 height:48px;
 cursor:pointer;
}
.samsury-closenav {
 float:left;
}
.samsury-movenext {
 float:right;
}
.samsury-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .samsury-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .samsury-movenext {
  position:absolute;
  z-index:9999;
  right:0;
  top:0;
 }
 .samsury-controlitems {
  width:100%;
 }
 .samsury-itemholder {
  width:100%;
 }
 }
.samsury-centerblock {
 display:inline-block;
}
.samsury-item {
 display:none;
}
.samsury-showitem {
 margin:5px;
 float:left;
 display:none;
}

.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
 display:block;
}
.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}

.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
.tile-bt-large a {
 display:block;
 text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}

.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
 display:block;
}
.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.tile-bt-extralarge:active {
 opacity:0.5;
}

.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red
.shadow-white:hover {
 box-shadow:0px 0px 6px 3px #fff;
 -webkit-box-shadow:0px 0px 6px 3px #fff;
 -moz-box-shadow:0px 0px 6px 3px #fff;
 -o-box-shadow:0px 0px 6px 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -moz-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;
 -ms-box-shadow:0px 0px 6px 3px #38D1F7;
}
.shadow-green:hover {
 box-shadow:0px 0px 6px 3px #AACA37;
 -webkit-box-shadow:0px 0px 6px 3px #AACA37;
 -moz-box-shadow:0px 0px 6px 3px #AACA37;
 -o-box-shadow:0px 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -webkit-box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;
 -o-box-shadow:0px 0px 6px 3px #E81750;
 -ms-box-shadow:0px 0px 6px 3px #E81750;
}
.shadow-black:hover {
 box-shadow:0px 0px 6px 3px #444;
 -webkit-box-shadow:0px 0px 6px 3px #444;
 -moz-box-shadow:0px 0px 6px 3px #444;
 -o-box-shadow:0px 0px 6px 3px #444;
 -ms-box-shadow:0px 0px 6px 3px #444;
}

.solid-blue { background:#00BBE2; }
.solid-blue-2 { background:#2C84EE; }
.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.solid-red-2 { background:#E81750; }
.solid-pink { background:#FF539B; }
.solid-purple { background:#D02090; }
.solid-orange { background:#FB8F02; }
.solid-orange-2 { background:#FF6600; }
.solid-orange-3 { background:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green { background:#67B239; }
.solid-green-2 {background:#96BF01; }
.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.solid-gold { background:#FEE9AE; }
.solid-yellow { background:#F7D100; }
.solid-black { background:#000; }
.solid-smoke { background:#F5F5F5; }

.clearspace { clear: both; }
.floatleft { float:left; }
.floatright { float:right; }
.none { display: none !important; width:0px !important; }
.light-text {
 color:#fff;
}
.dark-text {
 color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%);
 background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3)));
 background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%);
 background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
 background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
 background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%);
}
.margin-5 { margin:5px; }

Selanjutnya pergi ke Dashboard >> Layout >> Add Gadget >> HTML/Javascript dan Masukkan kode dibawah ini :

<div class="samsury-metronav">

<div data-navid="samsury-nav" class="tile-bt-extralarge solid-orange shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuOIJmantNhvhRErpZ0Q12t3fmrpVCHCr2LOa48QaPjar3Ua8RPuVTMmW0QQa-AOdljmI4FAK5DsP-IBFq7QMPOXy_-39b4iDB0vzi3poJD2oPpPGtaltMYnp1HwbB3lUufankZtH5hRc/s1600/Samsury+Home.png" alt="" />
<span class="light-text">Home</span>
</a>
</div>

<div data-navid="samsury-nav" class="tile-bt-large solid-coral shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge1JSfcdFOi5Q5e4asqqKtxQWhXRF2ncTd4eR6iKyKrQQTGTbb-_dLjqIqWzhcwtXBl6WmpiLDEuTSHmmtSsl8ylmgQs0pFCkzg7ZCRmvfpYQ6mL897NxfKdWkYBJ7EORLV3e1A9rpAlg/s1600/Samsury+About+us.png" alt="" />
<span class="light-text">About Us</span>
</a>
</div>

<div data-navid="samsury-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE6_LrITv2LQqvjhtRNpGGKMcbAYIuaROnojdFw0qPmMaXxBbQwtXHgocm8cH3nDPlJqtmZa5S8h2KNbofiaq7WYnPql8jtXwgLF87D7Km3As40o0sTY-oSYAoaD7habVGul_UOV2RAqA/s1600/Samsury+Rss.png" alt="" />
<span class="light-text">Rss Feeds</span>
</a>
</div>

 <div data-navid="samsury-nav" class="tile-bt-large solid-purple shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHfgIPMYER_Vz3ywvGnsGP8NDzUYdew6vm6N0hPQqR2iP_fgRJvTUmBuDnlDOXOEIXiOsgY6N2WdzsB58hujCHPSialg5zY6VZ9qMhM5gyuuZeXfTiEa79duYwmyRstAQNuxUfgUKS7r4/s1600/Samsury+Search.png" alt="" />
<span class="light-text">Search</span>
</a>
</div>
 
 <div data-navid="samsury-nav2" class="tile-bt solid-green shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8FXskEHkPjHslGTK9KrRpWTIi8bOHrg8Bzu-kD3Qqf3saQzlaRHW62WJwv9VI5avN-Z52xa9oG4tL6vNAcr2bvbVU4sF7rbGAK1YoN7nv6DNf7sVC9_kBjCSRGvZjMQIw1t-MmHdXkeo/s1600/Samsury+Mail.png" alt="" />
<span class="light-text">Contact Me</span>
</a>
</div>
 
<div data-navid="samsury-nav2" class="tile-bt solid-yellow shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9QZEzHcMaQr0txvYvbFIFwlPpeb8b3HDPdsG1gPC0xNAnWXCtHVtlNtJ3ipEZRN0QosBzuCfNewwpmMKEBJHeZFb9gSmeSifj4OjDS2QXv32unipj3-k5tus3nvjkF-yZUKquK7xzm78/s1600/Samsury+help.png" alt="" />
 <span class="light-text">Help</span>
</a>
 </div>
 
<div data-navid="samsury-nav2" class="tile-bt solid-red shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhPUM_-Pay9RXIn8NwTijWVeJM5DrDy5nvFGQmi9i8rJsAKvUJq0zKASFNzW1CQ6w-Dt5gpfG1SAPiHdJe6-icLK9pMiDbCTUy7x61VPoH6EkDgevwVFRUxVCrHbxu4PYFKRydNEjyvUQ/s1600/Samsury+Youtube.png" alt="" />
<span class="light-text">You Tube</span>
</a>
</div>
 
<div data-navid="samsury-nav2" class="tile-bt solid-darkblue shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRpcFmOKbAMFbaSZ4cvvVClG9iClh0q0HUtHeDSkU4PwQdg0OloozW0VM3zV6hF1mcxZxZms0NRZ-2FgIjoI33fGaDimA0QmkgMWEEsQtIfL2JJNEHoJIq9diByxnk6zUSv8h9m166p1Q/s1600/Samsury+Facebook.png" alt="" />
<span class="light-text">Facebook</span>
</a>
</div>
 
<div data-navid="samsury-nav" class="tile-bt-large solid-blue shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirrRhmmJSSY7GtCRrywQ1k6N4_k7bxYh2kqvhY3d-GkG89b8AgV_FhsiUTeV2s-JxELCUcNmfySrZSIb_iyraN0wo-qIc34cVTLm0CgR518q3Ya7WpVEZdnWW6IcYF92rcPwtNfj_haBQ/s1600/Samsury+Photo.png" alt="" />
<span class="light-text">Photos</span>
</a>
</div>
 
<div data-navid="samsury-nav2" class="tile-bt solid-olive shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPuQY0g9F4f_s9ml01th4LhG3LtCyeIILW5dTnI6iW1F7_2RlCZxGNhUNUruETBKF2v3FEbwXzlxy9LOcvAqQhjchGN-e1dAZxskNPmGjDhLpmqb9IftYoMFlBYChRmjqE3yxXorwTOGA/s1600/Samsury+Music.png" alt="" />
<span class="light-text">Music</span>
</a>
 </div>
 
<div data-navid="samsury-nav" class="tile-bt-large solid-blue-2 shadow-black margin-5 floatleft SamsuryMetroMenu">
<a href="###" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUFsFde7y0ERTQO4nIPYeUdvPA2DExznB81hbwzbQE0jcFLHJk1xqIT5nUWwpAsELrV8diVZZMeEhLUfKfPhsue5mR8T89DITWKESBAFkPnBf8ozOeRZPA1pkxzp6wLRxQUOIC4yL82do/s1600/Samsury+Sites.png" alt="" />
<span class="light-text">Samsury Sites</span>
</a>
</div></div>

Ganti ### warna merah sesuai URL data blog anda. Anda juga bisa mengubah warna icon yang akan di tampilkan dan sesuaikan dengan warna pada CSS kode diatas

Demikian tips widget unik metro window semoga bermanfaat, happy blogging.

source : samsury-sites.blogspot.com/2013/10/tips-widget-unik-navigasi-metro-ui.html

Widget Recent Comments Dengan Gaya Message Windows 8

Windows 8 resmi dirilis pada akhir Oktober lalu dan membuat dunia menggelegar. dan untuk saat ini saya kan memberikan widget Recent Comments bergaya Message Windows 8, Widget ini menurut saya sangat keren, widget ini menggunakan CSS dan JavaScript. Langsung saja Lihat cara Memasang Widget Recent Comments dengan gaya Message Windows 8.

Langkah 1 : Tambahkan kode berikut sebelum tag ]]> </ b:> skin dalam template Anda.

#rc-avatar-plus ul{border:1px solid #bbb;background:#fff!important;padding:10px!important;word-wrap:break-word}
#rc-avatar-plus li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 10px!important;list-style-type:none!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{padding:0!important;width:100%}
#rc-avatar-plus h4{margin:5px 0!important}
#rc-avatar-plus a{position:relative;width:70%;padding:5px}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#fff!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:10px;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus .rc-author a{background:#8b0094}
#rc-avatar-plus .rc-author a:after{left:-10px;border-top:10px solid #8b0094;border-left:10px solid transparent}
#rc-avatar-plus .rc-admin a{background:#1eadfe}
#rc-avatar-plus .rc-admin a:after{right:-10px;border-top:10px solid #1eadfe;border-right:10px solid transparent}

Langkah 2: Tambahkan 1 widget HTML / Javascript di mana Anda ingin menampilkan Recent Comments . Mengedit teks dan paste kode berikut ke dalam konten dan pilih SIMPAN .

<div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';
nc=4;
length_name=30;
length_content=90;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioCFVuOgCuHwp38lTkJh5iyu0WU7HsGJ1f8nr5KtEL0ydqpOV-wVAWV7-W47rSFzM0NHo8SSrmysNqwZQZL_SbQJrMthYkQkpWJTajKHisCujXesa2DyBSt4NaR41hwVKCPanGi9en4JI/s90/no-avatar.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>

Anda telah berhasil Memasang Widget Recent Comments dengan gaya Message Windows 8. 

source : http://mas-basir.blogspot.com/2013/06/widget-recent-comments-dengan-gaya.html

Metro Blogger Template with 4 column footer

Metro is a free blogger template custom design with 1 Right Sidebar, 2 Column, Ads Ready, Blogger, Blue, Custom Navbar, Fixed, Gray, Page Number, Responsive, and now you can download Metro blogger template for free  in All About Blogspot Templates.

Template Author  :   Ozynetwork
Designer     :  Ozynetwork.com
     
Metro blogger Template- A Unique Stylish Blogger Template. Two Column Metro Style template with 4 column footer. Highly Customized Navigation and sidebar menus. Author Box with Related posts and subscription box.

Almost everything from head to toe is customized and we haven’t left a single item in customization. Some of the features are very impressive like Metro Style Navigation Menu, Metro Style Post titles and Metro Social Subscription widget. This is a free of cost template but in order to thanks the Author you must keep the credit link.

DEMOVIEW   |    DOWNLOAD

What More Metro Blogger Template?

Beside these fantastic features, Blogger Metro blogger Template has many other exciting features which you will definitely like. After reviewing the features, we will now take a look over the customization part.

Installation
1) Open Your Blogger dashboard and click on  template and Edit Html.
2) Now open the file we provided it to you and copy all the data from that file and paste it there.
3) Save your template and the installation process in over.

Navigation
1) Click on Template >> Edit Html.
2) Press CTRL+F and search for

<div class='mblmetromenu'>

3) Edit the Menus and Put the links.

Author Box1) Click on Template >> Edit HTML
2) Press CTRL+F and search for

<div class='auth-panel'>

3) Edit the Author panel and you are done.

Meta Tags1) Press CTRL+F and search for

<!--meta tags-->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title>Mtro|A stylish blogger template</title>

2) Edit the Keywords, Meta Description and Title for your blog and you are done!

source : http://redaksiexpo2012.blogspot.com/2013/10/metro-blogger-template-with-4-column.html

Stylish Recent Post Slider for Blogger with Thumbnails

Recent post slider is used to increase your web traffic and attract your viewers. This recent post slider is a best way to help viewers to find more post's. This widget is made by CSS and Javascript which is not affect any load time in your blog. Please follow the below instruction to get this amazing slider in your blog.

Step 1:

Go to Blogger---> Layout ---> Click "Add a Gadget" link ---> Add HTML/Javascript Box.(refer below screenshot)

Step 2:

Now paste the following below code in HTML/Javascript Box.

<link href="http://www.tisunservices.com/jsandcss/recentpostwidget/recentpostwidget.css" rel="stylesheet" type="text/css">

<div style="width: 250px; height: 370px;" class="slider-rotator" id="slider-rotator"><div style="display: none;" class="slider-item"><div class="image-wrapper"><img alt="How to Accept Donation Online Using Paypal?" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4oE_FUHhYEjiAdPL8fH64FHMz2xIZpEAR9tPRmxtD5xSpDyZqLru4PQRhA59Myww_CFw0OLpdoPIAapX1HTnIlxA0QoaNWkgkJFQdoS7oqqv1tB0pPddQJcXFTEbk4Usq-ErAGBaMgan5/s250-c/How+to+Accept+Donation+Online+Using+Paypal+welcome+screen.jpg" style="width:250px;height:250px"></div><div class="detail-wrapper"><h4><a title="How to Accept Donation Online Using Paypal?" href="http://www.aqtalks.com/2014/01/how-to-accept-donation-online-using-paypal.html">How to Accept Donation Online Using Paypal?</a></h4><p>

You can accept donation easily at online using paypal, Pay…</p></div></div><div style="display: none;" class="slider-item"><div class="image-wrapper"><img alt="Top Self-Made Video Youtube Millionaire - Jenna Marbles" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghOo8GLDXZSqbhwryqMeZErhZNBUR-RYK08HRUuENNzAJyhX9czEtqr6YrPasE9GX1rc_sWI2RKdmw1hnKs9hh5IXwACYRu1eGdV3JWcKLov1MxLiGCVJdbb8FjZPhWn-uBmGIzH9DiBb0/s250-c/Top+Self-Made+Video+Youtube+Millionaire+-+Jenna+Marbles+welcome+screen.jpg" style="width:250px;height:250px"></div><div class="detail-wrapper"><h4><a title="Top Self-Made Video Youtube Millionaire - Jenna Marbles" href="http://www.aqtalks.com/2013/12/top-self-made-video-youtube-millionaire.html">Top Self-Made Video Youtube Millionaire - Jenna Marbles</a></h4><p>

Youtube is one of the biggest videos mall, and you can als…</p></div></div><div style="display: none;" class="slider-item"><div class="image-wrapper"><img alt="Top 3 Adsense Earners in the World, 2013!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl798pIY4D_BXk8gl5Bp6JT-90y_i-ml0MHE2LvWIlGT2Wj07wl-s_SMwIIhhP4dtO48gWtXwegmiuxtFl5kqtRKFmI38HPXA1gvwBuONUnWq2GEbvkYeWVti6j-JI_SOgmkDerqhc9Smo/s250-c/Top+3+Adsense+Earners+in+the+World,+2013+welcome+screen.jpeg" style="width:250px;height:250px"></div><div class="detail-wrapper"><h4><a title="Top 3 Adsense Earners in the World, 2013!" href="http://www.aqtalks.com/2013/12/top-3-adsense-earners-in-world-2013.html">Top 3 Adsense Earners in the World, 2013!</a></h4><p>

Now a days Google Adsense is the main and biggest income …</p></div></div><div style="display: block; opacity: 0.253636;" class="slider-item"><div class="image-wrapper"><img alt="'Grand Theft Auto: San Andreas' Game For Android Released on Dec 20, 2013!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjeInAmDE95yq8jBU9x8v9Nx2FF7zAdwr-put8CCEyucx8d72mIl1bk_x9kXFIDut-EQwwxFM2tofggqdv7jXvMPPnux0yHDXxME85mQPlmAGMxEs4ZUNnv6PCAK80dMdXSk4NymaOvm3P/s250-c/Grand+Theft+Auto+San+Andreas+Released+on+Dec+20+2013+8.jpeg" style="width:250px;height:250px"></div><div class="detail-wrapper"><h4><a title="'Grand Theft Auto: San Andreas' Game For Android Released on Dec 20, 2013!" href="http://www.aqtalks.com/2013/12/grand-theft-auto-san-andreas-released-on-dec-20-2013.html">'Grand Theft Auto: San Andreas' Game For Android Released on Dec 20, 2013!</a></h4><p>

In previous post we discuss about a "Rockstar" annonsement…</p></div></div><div style="display: none;" class="slider-item"><div class="image-wrapper"><img alt="How to Run Android Mobile Apps on Windows/Mac PC's?" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLO7Kx58jmgWhxhxnhS7eLHhQoYjBmXceTAe8XmsslDCAnGgxWuEKgzl21nB8isU1t49fq80lJdObKNCPwLsvQTubAt7i1__Wh5s7PDd4cVtqZz1F56_1DFG_qDap2xn31zENVybdJDEUT/s250-c/How+to+Use+Android+Mobile+Apps+on+Windows+PC+2.jpg" style="width:250px;height:250px"></div><div class="detail-wrapper"><h4><a title="How to Run Android Mobile Apps on Windows/Mac PC's?" href="http://www.aqtalks.com/2013/12/how-to-run-android-mobile-apps-on-pc.html">How to Run Android Mobile Apps on Windows/Mac PC's?</a></h4><p>

You can run android mobile apps or google play store mobi…</p></div></div></div><div class="slider-rotator-nav"><span class="rotator-advancer"><a href="#prev"><</a></span><span class="rotator-num"><a href="#slide-0" class="">1</a><a href="#slide-1" class="">2</a><a href="#slide-2" class="">3</a><a href="#slide-3" class="current">4</a><a href="#slide-4" class="">5</a></span><span class="rotator-advancer"><a href="#next">></a></span></div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script src="http://www.tisunservices.com/jsandcss/recentpostwidget/recentpostwidget.js" type="text/javascript"></script>

<script type="text/javascript">

makeSlider({

    url: "http://www.aqtalks.com" // Add your blog URL

});

</script>

Note: Replace your blog URL on http://www.aqtalks.com/.