WATU BUDUG: tutorial blog

Home » Posts filed under tutorial blog

Showing posts with label tutorial blog. Show all posts

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

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/.





Posted by
spentura


at
11:10 PM




, 0
comments











Labels:
tutorial blog





Cara Membuat Menu Horizontal Berdasarkan Label







Add caption





Label secara default adalah list item, daftar yang sifatnya vertical dan dibelakang label diikuti angka dari jumlah isi label yang sama. Jika ingin mengelola label menjadi menu yang horizontal, maka dibutuhkan kode CSS yang bisa mengelola tampilan label terlihat mendatar.



Membuat Menu horizontal dengan Label atau kategori - Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Tujuannya untuk memberikan Jalan pintas atau shortcut link ke halaman halaman tertentu sesuai yang di inginkan.



Kebanyakan Menu Horizontal linknya di isi secara manual. Sekarang bagaimana memasukkan label/kategori ke menu horizontal agar link yang di tampilkan bisa otomatis mengikuti label yang ada.

Berikut Langkah-langkahnya:




Login ke Blogger
Pilih Rancangan atau tata letak
Pilih Edit Html
Untuk mengantisipasi hal yang tak di inginkan, Download template dulu dan save di Pc.
Masukkan kode CSS berikut sebelum tag ]]></b:skin>



#menulabel{margin: 0px auto; padding:0; width:100%;background:#045FB4 }

#label{margin: 0px auto; padding: 3px 0; width:1000px;border-bottom:1px solid #000 ; height:20px;background:#045FB4 url() repeat-x top; }

#label ul {float: left; list-style: none; margin: 0px; padding: 0px;}

#label li {float: left; list-style: none; margin: 0px; padding:0 10px;}

#label li a, #label li a:link, #label li a:visited {color: #fff; display: block; margin: 0px; padding: 2px 10px 2px 5px;;font-weight: none;}

#label li a:hover, #label li a:active { color: #fff; margin: 0px; padding: 2px 10px 2px 5px;;text-decoration: underline;font-weight: bold;}
Masukkan Kode Html berikut di atas <div id='outer-wrapper'> atau kode sejenisnya 



<div style='clear:both;'/>

<div id='menulabel'>

<b:section class='label' id='label' maxwidgets='1' showaddelement='no'>

<b:widget id='Label12' locked='false' title='' type='Label'/>

</b:section>

</div>
Terakhir Simpan Template

Setelah Berhasil masih ada satu langkah lagi yaitu menghapus Angka di belakang label agar lebih rapi. Caranya tinggal di klik pengaturan label dan tidak mencentang nomer jumlah per label. Itu saja.



Sebetulnya label bisa dimuat kedalam menu horizontal bergambung dengan menu sebelumnya. Caranya dengan mengelola CSS seperti di tulisan saya sebelumnya: Membuat Menu Drop Down List.

Tapi untuk model yang seperti ini mesti dilakukan secara manual. Meskipun demikian tidak akan sulit dilakukan. Untuk membuat agar menu label bisa bekerja, maka linknya mesti seperti ini:



<a href="/search/label/Variasi Menu">Variasi Menu</a>.


Jika anda membuat seperti ini:



<a href="http://wisencare.blogspot.com/search/label/Variasi Menu">Variasi Menu</a>

tidak akan berhasil. Jadi jika ingin menu lebih indah, menggabungkan kedua cara itu patut dicoba.



Sumber artikel :  http://wisencare.blogspot.com








Posted by
spentura


at
9:39 AM




, 3
comments











Labels:
CssHtml,
tutorial blog








Cara Memasang Widget Twitter Bird di Blogger





Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot





Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget burung twitter terbang ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profile Twitter sobat,

Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini



Pertama-tama silahkan login di Blogger




Klik Layout > Add Gadget > Html/Javascript
Copy paste kode di bawah ini ke kolom Html/javascript




<!-- floating twitter Bird -->

<script type="text/javascript" src="http://bloggerpeer.googlecode.com/files/tripleflap.js"></script>

<script type="text/javascript">

var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLQ84ZVXgVt6K56APKlkDIBuRjPv4fW41yUjeqg6netbhyuWBpVpW0oZ66VlCI1N7V8lx-WAbLgQZlHJSt8r-MeC48nuLGB1VT0POUUBrY1Ak1RJXt_U1EIkeqe6SW49MBiahdmElNrFQ/s1600/burung+twitter+terbang.png";

var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");

var twitterAccount = "http://twitter.com/Username";

var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";

tripleflapInit();

</script>









Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat
Simpan dan lihat hasilnya





Warna Pilihan Burung Terbang Twitter




Untuk membuat warna burung twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan



Warna Kuning




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgt_Xg_mHmJ40EnmZG-599-dMm1aVAzXKLVl9vp_Ifzn-uApOZw85Ui1BpyXjY11z5CUH5S5mND7BI2xg6GhvbENnn2u3eZZ_vE9bJPGf35ILaQ7OEpP5gA-uT5bT9NC8ZoB9vxJFYQuU/s1600/yellow+bird.png

Warna Hitam




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg14nS57N0FS2FPfewgUbmYbV3us57ZzjiZwvzOFkuKP5ERIyQrpkkJthOCqPOjr4bVRpSzJzfvVPguN3xw20lx0n45I3Qz9b1bhCYJ_NSjxW6JDhSKlDqU4XXXsa5hSguKsC645qZP9WU/s1600/black+bird.png

Warna Biru




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjebuRzAq2XxpprZcg6LFLITF6cW2VjV0oHMl9SNzopTjvP3q8DKd9JipqxSI0YoyNo_M1zYuAQzvwYBeTdwKTLiPTwxBsp3PHb5kzBTfpRZE9HxPUiDfYVOus8mPk3Yn4ZLa1Q6RfvPh8/s1600/Blue+bird.png

Warna Coklat




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtUEF_4jPnHe3c8c5Cav-ijM2YpmKMzKiIRMkyrtdGv04yC3pq7UOECNi24dElxqj_971120VX1J1AtX7CeSPtfZsbm0TrLr88DavpnPAc85JaJ2u8LwUVtcDAy7DPKjq8vGtWURiDP7E/s1600/brown+bird.png

Warna Hijau




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkYCq0JZmI5V4cGIhnOof7dGHrvrg5liTN46c2Z-bUIjm_5cidfIuWVuNRMaOiqCXWWrf_cHzpqmDw-h6WYBkSYtzhY2e4CR9ofXaPi0Mv0kArfxA3aQIaC0xiO0gpIEGNWYZNeTIUrSs/s1600/Green+bird.png

Warna Ungu




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Hx7G7yzyE0R4aCVrOqEPJFCauV0qsasbksL3yi2IfT_IBOaslnC8Hjamp7C5XjTG49osr9ulCISec2oeaoF3dpx5y74_pBB0r5Xv7-HYlxwnYldc4C5HpPDiFAHvYmosq94DROyOUlM/s1600/purple+bird.png

Warna Putih




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnVxmIAVEHLwGzLgoUlI249dgRsfx7EX1uCYM5OextLHDMMNIRNn8i8Cn3agGIEtl0P_ksqN33N4wGUm2oaQnfys9Io8ZkEKnfUzFZ6WBe84sKDQ1y9h_raYJF0aACweJ8_nNSofEH5Lw/s1600/white+bird.png

Warna Merah




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDQr4hLoqtmkU241_kXfXAV0RwHTQ168ksRRWiEULF07pyKFiKQ2JXJ0BNIZD41LyiISWQLipBbu_KxonXRqZ73lhotXV2XKJRioGezwF-mUFnjLzAtoETGXdLcojyYFdG_SF1P5hJxy0/s1600/red+bird.png



Dan terakhir jangan lupa disimpan

Good luck Sob..!








Posted by
spentura


at
12:26 PM




, 0
comments











Labels:
tutorial blog








Membuat Recent Post Slider Horizontal Automatic





Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.










Berikut ini adalah  langkah-langkah untuk membuatnya :

Login ke blogger dengan akun Anda
Setelah itu pilih blog yang ingin anda tambahkan slider ini.
Masuk ke template >> Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :






#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}

#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmE3ReH5b2fKnmTAXMmwBppVapHRSrwekhMSLlL5fZB_DzY6R4j9sPfva2-NwRyGJfT5j24rdBtI-RYMdU96lJlxGLoofsFOJ4EBw9OFFZOmCQTI78QICFqxCGvgfsSae2c-IcfeMVxSw/s1600/scroller-bg.png) repeat center}

#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqYYeIq79F45Tz7xE2g3XYx9XX6qNGqs6BkIx6A859ya2W65SfLBRHBJXKRNUqmUyaM6m7RWK2EnnZy3x4cqQlWeBf9-vehtlDV_IHFuaqNdaqGgUvHOBd6jwiEXzEWKJyuqBcjoUqm80/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}

#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipWp90OzUOvUAC2rCaZomKaiQsmslsZhiRV257eSeCUHRsUE2c-zOIhsRq_sLBOlTWimk5My8-bjJ9Ewd2bpak1GuncPtNxn_DvYaPz-mASUx2sIWSiuwWWWM1rHqju2lyEtoCtbz67FE/s1600/prev.png) center}

#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilcbc1-shVlkEaF2cDPKjIrZWjGE-DF6aQrVvOk82yn0kAbAqim9QVrdtxqU4GjG9G9ruV_M6fxJafTLddjd5tG0NgPrB0_PL_6ZVkZ2bjfmQruPFbAdiMH1S8RBXReAuMPe5yMt_Sphs/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}

#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPGWvJz8xDFym93C71e0qx1m6dg5XVKDfuGmNtQNYfQT0ePUQGEMRuZeddnK0lXf2PDf4aXun35lVhtNEV0AimxbYvso4FVLvZrc24SvY97GpSq5fqOgmdPH8ri4g6NZ8vZxHreY2Nmc/s1600/next.png) center}

#carousel ul{width:100000px;position:relative;margin-top:10px}

#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYvmKaTPT13ILQVXJM2iLABV4D3n6tezH20YRS3XWldPQe5IyjG0xwWqd134X-k_rSud77BILBvmXLKvwR9rz4RcBjRUlTC80Lqi2jEeAxj4jh-uWolckc4gNda8Ey7R06fsRT-hUWJIg/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}

#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}

#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}

#carousel ul li a.slider_title:hover{color:#cd1713}

#carousel a img{display:block;background:#fff;margin-top:0}



Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider , silahkan Anda sesuaikan dengan ukuran template Anda.

Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :







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

<script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>



<script type='text/javascript'>

//<![CDATA[

imgr = new Array();

imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLUHYBSLfXyDbdaGTVZKpY78raYXZbmfSeKwzVZGRx3VwwF2nWXWeJNhQiTfRb_O8BFiXEflcbrOLn1LJ44O3ZMgp5RKbwMPyleRqnu6rwv7TwNaQxfQgcQ7OzJ1i1ODEH9hZYjkupfyI/s1600/no+image.jpg";

showRandomImg = true;



aBold = true;



summaryPost = 140;

summaryTitle = 25;



numposts1 = 15;

label1 = "news";



function removeHtmlTag(strx,chop){

var s = strx.split("<");

for(var i=0;i<s.length;i++){

if(s[i].indexOf(">")!=-1){

s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);

}

}



s = s.join("");

s = s.substring(0,chop-1);

return s;

}

function showrecentposts(json) {

j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;

img = new Array();

document.write('<ul>');

for (var i = 0; i < numposts1; i++) {

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var pcm;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}



for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {

pcm = entry.link[k].title.split(" ")[0];

break;

}

}



if ("content" in entry) {

var postcontent = entry.content.$t;}

else

if ("summary" in entry) {

var postcontent = entry.summary.$t;}

else var postcontent = "";

postdate = entry.published.$t;

if(j>imgr.length-1) j=0;

img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var month = [1,2,3,4,5,6,7,8,9,10,11,12];

var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);

var m = postdate.split("-")[1];

var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){

if(parseInt(m)==month[u2]) {

m = month2[u2] ; break;

}

}



var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';


document.write(trtd);

j++;

}

document.write('</ul>');

}

//]]>

</script>


Keterangan :


Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.

Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).




Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :





<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div id='carousel'>

<div id='previous_button'/>

<div class='container'>

<script>


document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>    

<div class='clear'/>

</div>

<div id='next_button'/>

</div>

<script type='text/javascript'>

(function($) {     $(document).ready(function(){

$(&quot;#carousel .container&quot;).jCarouselLite({

    auto:4000,

    scroll: 1,

    speed: 800,    

    visible: 5,

    start: 0,

    circular: true,

    btnPrev: &quot;#previous_button&quot;,

    btnNext: &quot;#next_button&quot;

    });

    })})(jQuery)    

</script>

</b:if> 



Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 



Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.


Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat. 


Source : www.maskolis.com








Posted by
spentura


at
11:55 AM




, 17
comments











Labels:
tutorial blog








Membuat Navigasi Breadcrumb Di Blogger





Artikel saya kali ini akan membahas tentang fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, yang biasa kita kenal dengan nama breadchumb. Pengertian breadcrumb sendiri kurang lebihnya adalah  suatu navigasi  yang berisikan kategori  atau label dari postingan dan bisanya selalu di awali dengan tombol  menuju home (halaman depan blog).   









Pada dasarnya  Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang  memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau  ke halaman depan dengan cepat.  

   

Jadi  simple-nya seperti ini : search  engine selalu membaca label atau tags setiap postingan blog, karena  saat ini google  sudah tidah menggunakan meta tag keyword lagi untuk mengindeks  suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta  description dan label (kategori). Maka dari  itu semakin relevan sebuah label dengan isi postingan (artikel) maka  akan semakin mendapatkan kesempatan tampil di halaman depan google.
     

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :




Seperti biasa anda harus login ke Blogger. 

Langsung tuju  Edit HTML. 
Klik Expand Template  Widget. 
Letakkan kode berikut ini tepat  sebelum  kode ]]></b:skin>         
.breadcrumbs{             

padding:5px 5px 5px 0;             

margin:0;font-size:95%;              

line-height:1.4em;             

border-bottom:4px  double #cadaef}



Setelah itu, cari kode seperti ini :        
<div class='post hentry'>



Letakkan kode berikut ini tepat  setelah kode <div class='post hentry'>


<b:if  cond='data:blog.homepageUrl == data:blog.url'> <b:else/>  <b:if cond='data:blog.pageType == &quot;item&quot;'>  <div class='breadcrumbs'> Browse &#187; <a  expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if  cond='data:post.labels'><b:loop values='data:post.labels'  var='label'> <a expr:href='data:label.url'  rel='tag'><data:label.name/></a> <b:if  cond='data:label.isLast != &quot;true&quot;'> , </b:if>  </b:loop> </b:if> &#187; <data:post.title/>  </div> </b:if> </b:if>

Simpan Template.        




Itu dulu teman-teman penjelasan dari saya, waktu sudah menunjukkan jam 23.41 menit WIB, jadi udah waktunya tidur nih. Besok saya akan lanjutkan kembali dengan tutorial yang lain.


Souce : www.maskolis.com








Posted by
spentura


at
12:00 PM




, 0
comments











Labels:
tutorial blog








Membuat Tab View di Blogspot






Untuk menghemat tempat, tab view menu sangat  efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal  ini pernah ditanyakan oleh anda blogger pada kolom shout  box beberapa minggu yang lalu tentang bagaimana cara membuat  menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya. 



Membuat  menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi  sebaiknya simak baik-baik tutorial ini dan yang paling penting jangan  lupa untuk backup template andaterlebih dahulu. 
   

 Jika setelah jadi nanti lebar  atau tinggi menu tidak sesuai, silahkan anda sesuaikan sendiri dengan  isi dari menu yang anda gunakan. Karena jika tidak mengerti akan jadi  berantakan atau terlihat jelek. Baiklah, sekarang kita menuju pada pokok permasalahan




Pertama tentunya harus login dulu ke Blogger dengan akun anda.         


Tuju Tata Letak.         


Klik Edit HTML.         


Jangan lupa backup template ansa terlebih dahulu dengan  mengklik Download Template Lengkap.         


Kemudian letakkan kode javascript berikut sebelum kode </head>         






<script  type='text/javascript'>            

//<![CDATA[             

function  tabview_aux(TabViewId, id)             

{             

  var  TabView = document.getElementById(TabViewId); 

  //  ----- Tabs ----- 

  var Tabs = TabView.firstChild;             

  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; 

  var Tab = Tabs.firstChild;            

  var i   = 0; 

  do            

  {             

    if (Tab.tagName  == "A")             

    {             

      i++;             

       Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";              

      Tab.className = (i == id) ? "Active" : "";              

      Tab.blur();             

    }             

  }              

  while (Tab = Tab.nextSibling); 

  // -----  Pages ----- 

  var Pages = TabView.firstChild;             

  while (Pages.className != 'Pages') Pages = Pages.nextSibling; 

  var Page = Pages.firstChild;            

  var i    =  0; 

  do            

  {             

    if  (Page.className == 'Page')             

    {             

       i++;             

      if (Pages.offsetHeight) Page.style.height =  (Pages.offsetHeight-2)+"px";             

      Page.style.overflow =  "auto";             

      Page.style.display  = (i == id) ? 'block'  : 'none';             

    }             

  }             

   while (Page = Page.nextSibling);             

} 

//  ----- Functions  ------------------------------------------------------------- 

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId,  id); } 

function tabview_initialize(TabViewId) {  tabview_aux(TabViewId,  1); }            

//]]>             

</script>  



Setelah itu  letakkan kode berikut di atas kode ]]></b:skin>          




div.TabView div.Tabs            

{              

height: 30px;             

overflow: hidden;             

}              

div.TabView div.Tabs a             

{             

float:  left;             

display: block;             

width: 98px; /* Lebar Menu Utama Atas */ 

text-align:  center;            

height: 30px; /* Tinggi  Menu Utama Atas */             

padding-top: 3px;             

vertical-align:  middle;             

border: 1px solid #BDBDBD; /* Warna border Menu Atas */             

border-bottom-width:  0;             

text-decoration: none;             

font-family:  "Verdana", Serif; /* Font Menu Utama Atas */              

font-weight: bold;             

color: #000; /* Warna Font Menu Utama Atas */             

-moz-border-radius-topleft:10px;              

-moz-border-radius-topright:10px;             

}              

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active              

{             

background-color: #E6E6E6; /* Warna background Menu Utama Atas */              

}             

div.TabView div.Pages             

{              

clear: both;             

border: 1px solid #BDBDBD; /* Warna border Kotak Utama */             

overflow:  hidden;             

background-color: #E6E6E6; /* Warna background Kotak Utama */             

}              

div.TabView div.Pages div.Page             

{              

height: 100%;             

padding: 0px;             

overflow:  hidden;             

}             

div.TabView div.Pages  div.Page div.Pad             
{             

padding: 3px 5px;              

}


Kemudian  Simpan Template.        
Langkah  selanjutnya, silahkan anda klik Tata Letak.         
Klik Elemen Halaman dan tambahkan Gadget.          
Pilih yang HTML /  Javascript, dan tambahkan kode berikut kedalamnya.         



<form action="tabview.html" method="get">            

<div  class="TabView" id="TabView">             

<div class="Tabs"  style="width: 300px;">             

<a>Tab 1</a>              

<a>Tab  2</a>               

<a>Tab 3</a>              

</div>             

<div class="Pages" style="width: 300px; height: 250px;">  

<div class="Page">            

<div  class="Pad">             

Tab 1.1 <br  />              

Tab 1.2 <br />               

Tab 1.3  <br />               </div>             

</div>  

<div class="Page">            

<div  class="Pad">             

Tab 2.1 <br  />              

Tab 2.2 <br />               

Tab 2.3  <br />             

</div>             

</div>  

<div class="Page">            

<div  class="Pad">             

Tab 3.1 <br  />              

Tab 3.2 <br />               

Tab 3.3  <br />               </div>             

</div>  

</div>            

</div>             

</form>  

<script type="text/javascript">            

tabview_initialize('TabView');              

</script>


Kemudian Simpan. 

Keterangan  :     




Untuk kode yang berwarna merah adalah lebar dan tinggi menu,  silahkan anda sesuaikan dengan isi.         


Kode  yang berwarna biru silahkan sobat isi  dengan judul - judul dari menu.         


Dan yang berwarna ungu, adalah  isi dari menu. Anda bisa menambahkan link,  gambar, banner, dll. 


Selamat mencoba dan semoga bermanfaat.



Sumber : www.maskolis.com 













Posted by
spentura


at
10:18 AM




, 0
comments











Labels:
tutorial blog








Membuat Recent Post Slider With Thumbnail





Cara Membuat Recent Post Slider With Thumbnail - Hari ini kita akan mempelajari tentang recent post dengan versi thumbnail atau Cara Membuat Recent Post Slider With Thumbnail. 



Recent Post Slider With Thumbnail? Sebelumnya kita harus tahu dulu thumbnails itu apa.

Thumbnails merupakan gambar atau pictures yang terpajang di media-media, contohnya widget yang sekarang kita bahas ini. Gambar yang dihiasi kata-kata dari javascript ini sangat bagus. Anda tidak akan menyesal untuk mencobanya.









Recent post dengan thumbnails ini berbeda dengan artikel terbaru yang hanya menggunakan bullet sebagai penghiasnya. Slideshow kali ini dilengkapi dengan efek marquee/berjalan  yang membuat blog kita semakin cantik. Dengan membuat Slide Show pada halaman blog kita, pengunjung akan lebih mudah lagi untuk menyelusuri daftar isi pada blog yang kita buat.



Tertarik membuatnya? Ikuti langkah berikut di bawah ini.

1. Login ke akun blogger sobat.

2. Lalu klik rancangan - tambah gadget - pilih HTML/Javascript.







3. Lalu masukkan kode di bawah ini di kolom tersebut.


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

<style type="text/css" media="screen">



<!--



#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:355px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:335px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;

border:1px solid #ddd;

}



#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}



.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}



-->

</style>



    <script language='javascript'> 

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;

boxwidth = 300;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 60;

thumbheight = 60;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "Reply(s)";

showPostDate = false;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://daw-xp.blogspot.com/";

limitspy=5

intervalspy=6000

</script>



<div id="spylist">

    <script type='text/javascript'>

//<![CDATA[

 /*

 * Script dikombinasikan dari bloggerstricks.com

 * spy effect dari jqueryfordesigners.com

 * Oleh Abu Farhan (www.abu-farhan.com)

 * Modifikasi oleh daw-xp.blogspot.com

 */

jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return  this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find(">  li:first").height();l.find(">  li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div  class="spyWrapper" />').parent().css({height:h*f});l.find(">  li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function  n(){if(k){var  p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find(">   li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function  showrecentposts(z){document.write('<ul  class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new  Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var  g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var  l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var   l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split("  ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in  w){var r=w.summary.$t}else{var  r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font  color="'+acolor+'">('+f+" "+text+")</font></i>":"";var  q=[1,2,3,4,5,6,7,8,9,10,11,12];var  x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var  u=postdate.split("-")[2].substring(0,2);var  h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var  e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var  n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+"  "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var  v='<li><a href="'+p+'"><img src="'+img[o]+'"  width="'+thumbwidth+'" height="'+thumbheight+'"  class="recent-thumb"/></a><a href="'+p+'"  class="recent-link">'+g+'</a><div  class="spydate">'+n+'</div><div  class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script   src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');  

//]]>

</script>

</div>

boxwidth = 300 adalah lebar widget dalam pixel (px), ganti nilainya sesuai dengan lebar sidebar blog.
text = "Reply(s)" adalah teks di belakang jumlah komentar, ganti Reply(s) sesuai keinginan, misalnya: komentar, comment(s), dll.
numposts = 10; adalah jumlah posting terbaru yg akan di-crawl, ganti nilainya sesuai keinginan.
limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, ganti nilainya sesuai keinginan.
intervalspy=6000 adalah kecepatan scroll / spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.



4. Save widget dan lihat hasilnya. 



Selesai sudah 








Posted by
spentura


at
8:38 PM




, 0
comments











Labels:
tutorial blog




Older Posts

Home




Subscribe to:
Posts (Atom)

WATU BUDUG

TUTORIAL BLOG

COMMENT

Membuat Widget Navigasi Metro UI

Widget Recent Comments Dengan Gaya Message Windows 8

Stylish Recent Post Slider for Blogger with Thumbnails

Cara Membuat Menu Horizontal Berdasarkan Label

Cara Memasang Widget Twitter Bird di Blogger

Warna Pilihan Burung Terbang Twitter

Membuat Recent Post Slider Horizontal Automatic

Membuat Navigasi Breadcrumb Di Blogger

Membuat Tab View di Blogspot

Membuat Recent Post Slider With Thumbnail

MENU TAB

ARTIKEL TERBARU

CHAT

ARCHIEVE

STATISTIK

ADVERTISE

ADVERTISE