Blog Mas-Yudha

Membuat Widget Slide Testimonial Responsive

<a href="http://maseyudha.blogspot.com/2015/01/membuat-widget-slide-testimonial.html" target="_blank">Membuat widget slide testimonial responsive</a> - jika anda memiliki sebuah blog toko online ataupun blog jual jasa dan sejenisnya,mungkin widget yang satu ini perlu anda terapkan di blog anda<br />
<br />
yang dimaksud testimonial disini adalah komentar dari para pelanggan atau pengguna jasa kita tentang kepuasan dalam berbelanja atau menggunakan jasa kita.sehingga dengan begitu akan menambah kepercayaan calon konsumen lainnya untuk berbelanja di blog kita<br />
<br />
dan kali ini saya akan share sebuah widget testimonial yang responsive dengan menggunakan jquery slider,widget ini  ane temukan diblognya mas adhy suryadi,sehingga dapat menampilkan testimonial satu per satu secara slide yang disertai dengan photo klien atau pelanggan<br />
<br />
demonya bisa anda lihat pada screenshot dibawah ini,atau bisa langsung dicoba responsive nya pada kolom demo jsfiddle dibawah dengan menggeser-geser kolomnya<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-YZjqDR2iSVE/VK1WQT5Sd3I/AAAAAAAAB0M/Kjxv10cXZIQ/s1600/testimonial.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="http://4.bp.blogspot.com/-YZjqDR2iSVE/VK1WQT5Sd3I/AAAAAAAAB0M/Kjxv10cXZIQ/s1600/testimonial.gif" width="320" /></a></div>
<br /><div class="whitebuttondemo">

<span class="up">click to view</span></div>
<br />
Nah bagi yang ingin mencobanya silahkan gunakan kode-kode dibawah ini<br />
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css">.testimonials-box{margin:0 auto;color:#FFF}
.bx-wrapper .testimonials-thumbnail{ margin: 0px 0px 15px; }
.bx-wrapper .testimonials-title{ text-align: center;  margin: 25px 15px 3px; font-size: 24px; line-height: 1; }
.bx-wrapper .testimonials-carousel-thumbnail{ max-width: 35%; float: left; margin-right: 10px; }
.bx-wrapper .testimonials-carousel-thumbnail img{ display: block;   margin-right: 10px;width: 100px;}
.bx-wrapper .testimonials-carousel-context{ overflow: hidden; }
.bx-wrapper .testimonials-name{ font-size: 18px; margin-bottom: 10px;margin-top:-3px; font-weight:400;width:95%}
.bx-wrapper span{ font-size: 11px; margin-left:10px; color:#aaa; font-family: Georgia, Arial, Helvetica, sans-serif; font-style:italic; }
.bx-wrapper {position: relative;margin: 0 auto;padding: 0;width:94%;}
.bx-wrapper .slide {padding:0;margin:0;display: block;}
.bx-wrapper .bx-viewport {padding:10px;margin-left:0;z-index:1;width:100%;}
.bx-wrapper .bx-pager,.bx-wrapper .bx-controls-auto {position: absolute;display:none;bottom: -30px;width: 100%;}
.bx-wrapper .bx-loading {min-height: 50px;background: url(http://webdesigntunes.com/tutorial/testimonials/images/bx_loader.gif) center center no-repeat #fff;height: 100%;width: 100%;position: absolute;top: 0;left: 0;z-index: 2000;}
.bx-wrapper .bx-next,.bx-wrapper .bx-prev {display:none}
.bx-wrapper .testimonials-carousel-content p{width:96%;margin:0; font-family: Georgia, Arial, Helvetica, sans-serif; font-style:italic;}
@media screen and (max-width:400px){
.bx-wrapper {width:85%;}
.bx-wrapper .testimonials-carousel-thumbnail{ max-width: 100%; margin:0 15px 10px 0;float:none }
.bx-wrapper .testimonials-carousel-thumbnail img{ width: 100%;height:auto}
}</code></pre>
<br />
jika disimpan pada background yang terang maka rubah <span style="color: red;">colour:#FFF</span> pada kode <span style="color: red;">.testimonial-box{margin:0 auto:color;#FFF}</span><br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">
<script src="http://yourjavascript.com/13912425571/jquery-bxslider-min.js"></script>

//<![CDATA[

$('.testimonials-slider').bxSlider({

slideWidth: 800,

minSlides: 1,

maxSlides: 1,

slideMargin: 32,

auto: true,

autoControls: true

});

//]]>

</script>

</code></pre>
<br />
Kode Javascript disimpan diatas kode <span style="color: red;"></body></span> dan pastikan anda sudah memasang kode Jquery library ditemplate anda,,gunakan Jquery library yang terbaru<br />
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript"><script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></code></pre>
<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"><div class="testimonials-box">

<div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>

<div class="testimonials-carousel-content"><p>PESAN KONSUMEN DI SINI</p></div>

</div>

<div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>

<div class="testimonials-carousel-content"><p>PESAN KONSUMEN DI SINI</p></div>

</div>

<div class="testimonials-name">NAMA KONSUMEN<span>ALAMAT KONSUMEN</span></div>

<div class="testimonials-carousel-content"><p>PESAN KONSUMEN DI SINI</p></div>

</div>

</div></code></pre>
<br />
<br />
Semoga dapat bermanfaat !

Membuat Widget Slide Testimonial Responsive

Membuat widget slide testimonial responsive - jika anda memiliki sebuah blog toko online ataupun blog jual jasa dan sejenisnya,mungkin widg...

+ Baca selengkapnya »

Membuat Halaman Business Card Simple dan Keren

Halaman Bussines Card  adalah Halaman informasi bisnis tentang perusahaan atau individu mengenai Anda. dan kali ini<a href="http://maseyudha.blogspot.com/" target="_blank"> Blog Mas-Yudha</a> akan berbagi artikel tentang html dan css lagi yaitu  <a href="http://maseyudha.blogspot.com/2014/12/membuat-halaman-business-card-simple.html" target="_blank">Membuat Halaman Bussines Card Simpel dan Keren.</a><br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-fz0_5GhKDDc/VJsPAEYZWnI/AAAAAAAABss/DZ1XvM0_xt4/s1600/bisnis%2Bcard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="membuat halaman business card simple dan keren" border="0" height="220" src="http://2.bp.blogspot.com/-fz0_5GhKDDc/VJsPAEYZWnI/AAAAAAAABss/DZ1XvM0_xt4/s1600/bisnis%2Bcard.png" title="business card" width="320" /></a></div>
<br />
<br />
<div class="whitebuttondemo">
<a href="http://jsfiddle.net/MasYudha/g4L6z0mg/1/embedded/result/" target="_blank">Demo</a><br />
<span class="up">click to view</span></div>
 Langsung saja masuk ke pengcodingan CSS dan HTMLnya :
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css"> @import url(http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic,700);

@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900);

@import url(http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css);

::selection {

color: #fff;

background: #2a2b39;

}

::-moz-selection {

color: #fff;

background: #2a2b39;

}

body, html {

font-family: 'Raleway', sans-serif;

background-image: url(http://imgh.us/bg_1.svg);

-webkit-background-size: cover;

-moz-background-size: cover;

background-size: cover;

margin: 0;

padding: 0;

width: 100%;

height: 100%;

overflow: hidden;

z-index: 9;

}

p {

padding: 0;

margin: 0;

display: inline-block;

}

a {

color: #2a2b39;

text-decoration: none;

-moz-transition: all 0.2s ease-in-out;

-o-transition: all 0.2s ease-in-out;

-webkit-transition: all 0.2s ease-in-out;

transition: all 0.2s ease-in-out;

}

a:hover {

color: #6acd79;

}

.bussinesscard {

height: 320px;

width: 427px;

overflow: hidden;

box-shadow: 0px 0px 43px -10px black;

position: absolute;

left: 50%;

top: 50%;

-moz-transform: translate(-50%, -50%);

-ms-transform: translate(-50%, -50%);

-webkit-transform: translate(-50%, -50%);

transform: translate(-50%, -50%);

}

.bussinesscard .flip {

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-webkit-transition: all 0.5s ease;

transition: all 0.5s ease;

}

.bussinesscard .front {

z-index: 11;

width: 100%;

position: absolute;

height: 100%;

background: #fff;

box-shadow: 0px 0px 33px -1px rgba(0, 0, 0, 0.45);

-moz-transform: scale(1, 1);

-ms-transform: scale(1, 1);

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

-moz-transition: all 0.6s ease;

-o-transition: all 0.6s ease;

-webkit-transition: all 0.6s ease;

transition: all 0.6s ease;

}

.bussinesscard .front .top {

height: 50%;

background: #2a2b39;

}

.bussinesscard .front .top:after {

position: absolute;

content: '';

pointer-events: none;

}

.bussinesscard .front .top:after {

left: 50%;

width: 2em;

height: 2em;

-moz-transform: translateX(-50%) rotate(45deg);

-ms-transform: translateX(-50%) rotate(45deg);

-webkit-transform: translateX(-50%) rotate(45deg);

transform: translateX(-50%) rotate(45deg);

bottom: 9em;

z-index: 10;

background: inherit;

}

.bussinesscard .front .top .logo {

display: inline-block;

background: #6acd79;

color: #fff;

z-index: 11;

padding: .16em;

border: 8px solid #fff;

position: relative;

pointer-events: none;

-moz-transform: translateX(-50%);

-ms-transform: translateX(-50%);

-webkit-transform: translateX(-50%);

transform: translateX(-50%);

left: 50%;

margin-top: .4em;

font-size: 4em;

}

.bussinesscard .front .top .logo .fat {

font-weight: 800;

}

.bussinesscard .front .top .logo .skinny {

font-weight: 100;

}

.bussinesscard .front .nametroduction {

margin-top: 2.4em;

-moz-transform: translateY(0);

-ms-transform: translateY(0);

-webkit-transform: translateY(0);

transform: translateY(0);

z-index: 8;

}

.bussinesscard .front .name {

color: #2a2b39;

font-weight: 400;

font-size: 3.2em;

text-align: center;

position: relative;

margin-bottom: .35em;

}

.bussinesscard .front .name:after {

content: '';

position: absolute;

top: 1.3em;

width: 20%;

left: 40%;

right: 40%;

height: 1px;

background: #2a2b39;

}

.bussinesscard .front .introduction {

text-align: center;

color: #2a2b39;

font-family: 'Old Standard TT', serif;

font-style: italic;

}

.bussinesscard .front .contact {

color: #2a2b39;

margin-left: 1.7em;

font-weight: 300;

font-size: 1.6em;

-moz-transform: translateY(400%);

-ms-transform: translateY(400%);

-webkit-transform: translateY(400%);

transform: translateY(400%);

}

.bussinesscard .front .contact span {

color: #2D3244;

font-size: 1.7em;

width: 1.3em;

display: inline-block;

}

.bussinesscard .front .contact a {

position: relative;

bottom: .24em;

}

.bussinesscard .back {

width: 100%;

height: 100%;

background: #fff;

backface-visibility: hidden;

position: absolute;

}

.tooltip {

position: absolute;

left: 1em;

bottom: 1em;

color: #fff;

font-weight: 300;

padding: .4em;

background: #2a2b39;

}

/* HOVER ANIMATIONS */

.front .top .logo, .front .top, .front .top:after, .front .nametroduction, .front .contact {

-moz-transition: 0.7s all ease-in-out;

-o-transition: 0.7s all ease-in-out;

-webkit-transition: 0.7s all ease-in-out;

transition: 0.7s all ease-in-out;

}

.flip:hover .front .top .logo {

margin-top: .28em;

font-size: 1.3em;

border: 3px solid #fff;

margin-left: .15em;

-moz-transform: translateX(0);

-ms-transform: translateX(0);

-webkit-transform: translateX(0);

transform: translateX(0);

left: 0;

}

.flip:hover .front .top {

height: 15%;

}

.flip:hover .front .top:after {

width: 1.5em;

height: 1.5em;

bottom: 16.3em;

}

.flip:hover .front .nametroduction {

-moz-transform: translateY(400%);

-ms-transform: translateY(400%);

-webkit-transform: translateY(400%);

transform: translateY(400%);

}

.flip:hover .front .contact {

-moz-transform: translateY(-52%);

-ms-transform: translateY(-52%);

-webkit-transform: translateY(-52%);

transform: translateY(-52%);
}</code></pre>
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <section class="bussinesscard">
  <div class="flip">
<div class="front">
<div class="top">
<div class="logo">
<span class="fat">Y</span><span class="skinny">D</span></div>
</div>
<div class="nametroduction">
<div class="name">
Yudha dhesockerz</div>
<div class="introduction">
Blogger Newbie Asal Malang</div>
</div>
<div class="contact">
<div class="website">
<span class="ion-earth"></span>
      <a href="#">maseyudha.blogspot.com</a>
     </div>
<div class="twitter">
<span class="ion-social-twitter"></span>
      <a href="#">@yudhadhesockerz</a> 
     </div>
<div class="phone ">
<span class="ion-ios7-telephone"></span> 
      <a href="#">0118 999 7253</a> 
     </div>
<div class="email ">
<span class="ion-paper-airplane"></span>
      <a href="#">yudhadhesockerz@gmail.com</a>
     </div>
</div>
</div>
<div class="back">
</div>

  </div>
</section>
 <section class="tooltip">
  Hover over the card to see the back.

</section>
</code></pre>
<br />
Note:<br />
Ganti "<span style="color: red;">YD</span>" dengan logo anda sendiri<br />
ganti tanda "<span style="color: red;">#</span>" dengan Url<br />
<ul>
</ul>
<br />
Selamat Berkreasi

Membuat Halaman Business Card Simple dan Keren

Halaman Bussines Card adalah Halaman informasi bisnis tentang perusahaan atau individu mengenai Anda. dan kali ini Blog Mas-Yudha akan be...

+ Baca selengkapnya »

Cara Membuat Widget Member Aktif/Top Komentator di Blog

Memasang widget top komentator atau member aktif ini adalah cara kita mengapresiasi pengunjung blog yang sudah "susah payah" mengunjungi dan berkomentar di blog kita. yuk kita lihat penampakannya<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-g8DJGs6tfZU/VJsMLw_JH3I/AAAAAAAABsg/GavEh8BjrqM/s1600/top%2Bkomen.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cara membuat widget top komentator" border="0" height="246" src="http://3.bp.blogspot.com/-g8DJGs6tfZU/VJsMLw_JH3I/AAAAAAAABsg/GavEh8BjrqM/s1600/top%2Bkomen.png" title="top komen" width="320" /></a></div>
<br />
<div class="whitebuttondemo">
<a href="http://maseyudha.blogspot.com/p/top-komentator_25.html" target="_blank">Demo</a><br />
<span class="up">click to view</span></div>
<br />
Nah apakah kalian tertarik dengan  <a href="http://0.0.7.222/12/cara-membuat-widget-member-aktif.html" target="_blank">Cara Membuat Widget Member Aktif/Top Komentator</a> seperti di Blog ini? Jika iya maka silakan simak tutorial berikut :)<br />
<br />
1. Buka akun blogger kalian<br />
2.Widget ini bisa di gunakan pada halaman statis atau pun sebagai widget di  blog anda<br />
3. Digunakan sebagai <button>widget</button> :<br />
-Masuk ke bagian Tata Letak ->> Pilih Add Gadget<br />
-Copy pastekan kode berikut di HTML Box nya<br />
<br />
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css"> <style type="text/css">

.cm-person{margin:3px;position:relative;float:left;width:80px;height:100px;font:10px/10px Lora,Verdana,Arial,Sans-Serif;text-align:center;line-height:10px;padding:10px; border: 1px solid #F6CEE3; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;color:#000;background-color:#fff;box-shadow:inset 0 0 1px black}

.cm-person a.profile-name-link{display:block;width:80px;height:80px;position:absolute;top:10px;left:10px;background-color:#999;color:white;text-decoration:none;font:bold 30px/80px Ubuntu,Tahoma,Verdana,Arial,Sans-Serif;margin:0 0;padding:0 0;display:none}

.cm-person a.profile-name-link.item1{background-color:#BC0000}

.cm-person a.profile-name-link.item2{background-color:#1A00CE}

.cm-person a.profile-name-link.item3{background-color:#39A003}

.cm-person a.profile-name-link.item4{background-color:#8B039D}

.cm-person a.profile-name-link.item5{background-color:#F0C100}

.cm-person a.profile-name-link.item6{background-color:#00D1CB}

.cm-person a.profile-name-link.item7{background-color:#FFEA03}

.post .post-body .cm-person img{background-color:#666;display:block;width:80px;height:80px;padding:0 0;margin:0 0 10px;border:none}

.cm-person:hover{color: #FFF;background-color:#111}

.cm-person:hover a.profile-name-link{display:block}

.comments {display: none;}

</style> </code></pre>
<br />
<br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"> <script type="text/javascript">

//<![CDATA[

var homepage = 'http://www.maseyudha.blogspot.com/',

maxTopCommenters = 77,

minComments = 1,

numDays = 0,

excludeMe = true,

excludeUsers = ["Anonymous", "Admin"],

maxUserNameLength = 42,

txtTopLine = '[image] [user]',

txtNoTopCommenters = 'No top commentators at this time.',

txtAnonymous = '',

sizeAvatar = 80,

cropAvatar = true,

urlNoAvatar = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKUuhdxWnM_-Hl5NwEwWSIe-9ZX7q_LAIEB2S6qdova3yLas_l-_D5186M0_HQ5c8zr64ih2-V9LDzEgR-8LkdIgWMOv6BeimpEJyVDTA_GU6Aan8kMo7pzkAD35ILH3BslWx-deDSZyY/' + sizeAvatar + '/avatar_blue_m_96.png',

urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar,

urlMyProfile = '',

urlMyAvatar = '';

if (!Array.indexOf) {

Array.prototype.indexOf = function (obj) {

for (var i = 0; i < this.length; i++) if (this[i] == obj) return i;

return -1

}

function replaceTopCmtVars(text, item, position) {

if (!item || !item.author) return text;

var author = item.author;

var authorUri = "";

if (author.uri && author.uri.$t != "") authorUri = author.uri.$t;

var avaimg = urlAnoAvatar;

var bloggerprofile = "http://www.blogger.com/profile/";

if (author.gd$image && author.gd$image.src && authorUri.substr(0, bloggerprofile.length) == bloggerprofile) {

avaimg = author.gd$image.src

} else {

var parseurl = document.createElement('a');

if (authorUri != "") {

parseurl.href = authorUri;

avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname

}

if (urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar;

if (avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar;

var newsize = "s" + sizeAvatar;

avaimg = avaimg.replace(/\/s\d\d+-c\//, "/" + newsize + "-c/");

if (cropAvatar) newsize += "-c";

avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/" + newsize + "/");

var authorName = author.name.$t;

if (authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous;

var imgcode = '<div class="cm-person"><img class="top-commenter-avatar" height="' + sizeAvatar + '" width="' + sizeAvatar + '" src="' + avaimg + '" />';

if (authorUri != "") imgcode = '<a href="' + authorUri + '">' + imgcode + '</a>';

if (maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength - 3) + "...";

var authorcode = authorName;

if (authorUri != "") authorcode = '<a class="profile-name-link item' + position + '" href="' + authorUri + '" title="' + position + '. ' + authorName + '">' + item.count + '</a>' + authorName.substring(0, 14) + '</div>';

text = text.replace('[user]', authorcode);

text = text.replace('[image]', imgcode);

text = text.replace('[count]', item.count);

return text

}

var topcommenters = {};

var ndxbase = 1;

function showTopCommenters(json) {

var one_day = 1000 * 60 * 60 * 24;

var today = new Date();

if (urlMyProfile == "") {

var elements = document.getElementsByTagName("*");

var expr = /(^| )profile-link( |$)/;

for (var i = 0; i < elements.length; i++) if (expr.test(elements[i].className)) {

urlMyProfile = elements[i].href;

break

}

for (var i = 0; i < json.feed.entry.length; i++) {

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

if (numDays > 0) {

var datePart = entry.published.$t.match(/\d+/g);

var cmtDate = new Date(datePart[0], datePart[1] - 1, datePart[2], datePart[3], datePart[4], datePart[5]);

var days = Math.ceil((today.getTime() - cmtDate.getTime()) / (one_day));

if (days > numDays) break

}

var authorUri = "";

if (entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t;

if (excludeMe && authorUri != "" && authorUri == urlMyProfile) continue;

var authorName = entry.author[0].name.$t;

if (excludeUsers.indexOf(authorName) != -1) continue;

var hash = entry.author[0].name.$t + "-" + authorUri;

if (topcommenters[hash]) topcommenters[hash].count++;

else {

var commenter = new Object();

commenter.author = entry.author[0];

commenter.count = 1;

topcommenters[hash] = commenter

}

if (json.feed.entry.length > 200) {

ndxbase += 200;

document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&start-index=' + ndxbase + '&alt=json-in-script&callback=showTopCommenters"></' + 'script>');

return

}

var tuplear = [];

for (var key in topcommenters) tuplear.push([key, topcommenters[key]]);

tuplear.sort(function (a, b) {

if (b[1].count - a[1].count) return b[1].count - a[1].count;

return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1

});

var realcount = 0;

for (var i = 0; i < maxTopCommenters && i < tuplear.length; i++) {

var item = tuplear[i][1];

if (item.count < minComments) break;

document.write(replaceTopCmtVars(txtTopLine, item, realcount + 1));

realcount++

}

if (!realcount) document.write(txtNoTopCommenters)

}

document.write('<script type="text/javascript" src="' + homepage + '/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>');

//]]>

</script>  </code></pre>
<br />
-Ganti <button>maseyudha.blogspot.com</button> dengan URL Blog anda. Klik Save jika sudah selesai<br />
<br />
4.Sebagai <button>Halaman Statis</button><br />
-Klik blog yang akan kalian pasangi widget member aktif ini<br />
-Setelah itu buat halaman baru dengan cara pilih Laman -> Laman Kosong<br />
-Gunakan metode HTML bukannya Compose<br />
-Dan pastekan kode diatas lalu Publish<br />
<br />
Mudah sekali bukan <a href="http://0.0.7.222/12/cara-membuat-widget-member-aktif.html" target="_blank">Cara Membuat Widget Member Aktif/Top Komentator KEREN di Blog</a> sampai jumpa di postingan berikutnya :)

Cara Membuat Widget Member Aktif/Top Komentator di Blog

Memasang widget top komentator atau member aktif ini adalah cara kita mengapresiasi pengunjung blog yang sudah "susah payah" mengu...

+ Baca selengkapnya »

Vuma Responsive Blogger Template

<a href="http://maseyudha.blogspot.com/2014/12/vuma-responsive-blogger-template.html" target="_blank">VUMA is a  free Blogger template with Responsive layout and suited for all blog</a>. It's design with simple color combination, clean and modern look, SEO Optimized, and has been built by using some of the most popular current design trends.<br />
<br />
Installing this template is very simple, you just have to upload the xml template file provided to you.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-IrjAMU-IcxI/VJG9c2xCM3I/AAAAAAAABrE/11kIYJrjpos/s1600/Vuma%2B(1).png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="160" src="http://4.bp.blogspot.com/-IrjAMU-IcxI/VJG9c2xCM3I/AAAAAAAABrE/11kIYJrjpos/s1600/Vuma%2B(1).png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-rfQbe66m1OU/VJG9jWSL44I/AAAAAAAABrM/nujwUPEJaX0/s1600/vuma.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://4.bp.blogspot.com/-rfQbe66m1OU/VJG9jWSL44I/AAAAAAAABrM/nujwUPEJaX0/s1600/vuma.png" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="whitebuttondemo">
<a href="http://maseyudha.blogspot.com/p/template-demo.html?url=http://vumademo.blogspot.com/" target="_blank">Demo</a><br />
<span class="up">click to view</span></div>
<br />
<div class="whitebutton">
<a href="http://maseyudha.blogspot.com/p/template-demo.html?url=http://www.datafilehost.com/d/1d140b0b" target="_blank">Download</a><br />
<span class="up">click to begin</span></div>
<br />
FEATURES :<br />
Responsive <br />
<a href="http://ami.responsivedesign.is/" target="_blank">Cek</a><br />
SEO <br />
<a href="http://chkme.com/seo-vumademo.blogspot.com" target="_blank">Cek</a><br />
Custom Threaded Comment<br />
2 Column<br />
White Base Theme Color<br />
Responsive Ads ready<br />
Breadcrumbs<br />
Related Posts with Thumb<br />
Search Box<br />
Share Button<br />
Main Dropdown Menu<br />
Numbered Page Navigation<br />
Top Social Bookmark<br />
Custom 404 Page<br />
Subscribe Box<br />
Facebook Comment<br />
Recent Comment<br />
3 Different Sitemap Style<br />
Back To Top Button<br />
Better Print Page Layout<br />
More...<br />
<br />
Please Don't Remove The Credit Footer, Except "Published By NTemplate" You Can Remove It.<br />
Password : <button>www.realnazumi.blogspot.com</button>

Vuma Responsive Blogger Template

VUMA is a free Blogger template with Responsive layout and suited for all blog . It's design with simple color combination, clean and m...

+ Baca selengkapnya »

Membuat Iklan Teks Seperti Google AdSense

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-HIEU2_YkFzw/VInB97mnpII/AAAAAAAABos/pcFyawmz5L8/s1600/google%2Badsense.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="140" src="http://4.bp.blogspot.com/-HIEU2_YkFzw/VInB97mnpII/AAAAAAAABos/pcFyawmz5L8/s1600/google%2Badsense.png" width="320" /></a></div>
<a href="http://maseyudha.blogspot.com/2014/12/membuat-iklan-teks-seperti-google.html" target="_blank">Blog Mas-Yudha - Google AdSense</a> ? siapa sih yang tidak mengenal google adsense karna sebagian besar para penggemar blogger ataupun dunia internet pasti sudah mengenal salah satu advertising dari google dengan pembayaran yang cukup menarik yaitu dengan US Dollar $ untuk setiap reveralnya.<br />
<br />
Tapi .. kali ini saya tidak akan membahas tentang Google Adsense itu, tapi melainkan adalah iklan teks yang dimodifikasi mirip dengan aklan GA tersebut. kira-kira tampilannya akan seperti ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-x3FXqvZ4V1Y/VInN9rCHBSI/AAAAAAAABo8/FU-79HgPtz4/s1600/iklan.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://1.bp.blogspot.com/-x3FXqvZ4V1Y/VInN9rCHBSI/AAAAAAAABo8/FU-79HgPtz4/s1600/iklan.png" /></a></div>
<br />
<div class="whitebuttondemo">
<a href="http://jsfiddle.net/MasYudha/yerLfLy6/1/embedded/result/" target="_blank">Demo</a><br />
<span class="up">click to view</span></div>
<br />
<b>Berikut langkah-langkah pemasangannya</b> :<br />
simpan kode dibawah ini dan letakkan diatas <button></head></button><br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"><script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/></code></pre>
<br />
lalu simpan script dibawah ini diatas kode <button>]]></b:skin></button> atau <button></style></button><br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css">/* Iklan Teks

----------------------------------------------- */

#iklan-teks {

width:304px;

height:259px;

background-color:white;

position:relative;

overflow:hidden;

margin:0 auto;

}

#iklan-teks h2.iklan-header {

cursor:pointer;

background-color:white;

background-image:none;

font:normal 20px Verdana, Tahoma,Serif;

color:blue;

border-top:1px solid #d8d8d8;

padding:10px;

margin:0 0;

position:relative;

text-transform:none;

letter-spacing:0;

}

#iklan-teks h2.iklan-header:first-child {

border-top:none;

}

#iklan-teks h2.active {

display: none;

}

#iklan-teks h2.iklan-header:before{

content:"";

width:0;

height:0;

position:absolute;

top:20px;

right:15px;

border:5px solid transparent;

border-color:#b2b2b2 transparent transparent;

}

#iklan-teks div {

height:100px;

padding:10px 70px 10px 10px;

font:normal 13px Verdana, Tahoma,Serif;

color:white;

border-top:1px solid #d8d8d8;

}

.judul {

font:normal 20px Verdana, Tahoma,Serif;

color:blue;

margin:0 0 5px 0;

}

a.judul{

font:normal 20px Verdana, Tahoma,Serif !important;

color:blue !important;

text-decoration:none;

display:inline-block;

}

a:hover.judul {

font:normal 20px Verdana, Tahoma,Serif !important;

color:blue;

text-decoration:underline;

}

.isi-iklan a{

font:normal 13px Verdana, Tahoma,Serif;

color:green;

text-decoration:none;

display:block;

margin-bottom:10px;

}

.isi-iklan a:hover{

color:green;

text-decoration:none;

}

.isi {

padding-top:15px;

color:#222;

text-align:left !important;

}

.panah-besar {

background: #4d90fe;

border-radius: 50%;

cursor: pointer;

height: 34px;

float: right;

margin-right: -60px;

margin-top: -40px;

width: 34px;

text-align: center;

line-height: 34px;

}

.panah-besar:hover {

background: #4472bd;

}

.info-icon {

width:15px;

height:15px;

position:absolute;

top:0;

right:0;

cursor:pointer;

}

.info-iklan {

background:#d3d3d3;

width:100px;

height:15px;

border-bottom-left-radius:4px;

position:absolute;

top:0;

right:0;

color:#000;

font:normal 11px Arial,Sans-Serif;

text-align:left;

overflow:hidden;

padding-right:19px;

padding-left:5px;

display:none;

}</code></pre>
<br />
terakhir simpan kode berikut sebagai <button>widget HTML/Javascript</button><br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> <div id="iklan-teks">
    
    <div data-header="Blogger Tutorial" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://maseyudha.blogspot.com' target='_blank'>Blogger Tutorial</a>
            <a href='maseyudha.blogspot.com' target='_blank'>Blog Mas-Yudha</a>
        <span class='isi'>Share about internet, blogging, and seo tips.</span>
            <a class='panah-besar' href='maseyudha.blogspot.com' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cZHFJifESQNNoHwY7BEVBr50FdphsFm0kM6Ggh7sIb1VbA91TpDDs5Sg4f5BIuTdx-oV-kT7v7hyqEzeu7lmW6s931ZKTGvlmY6SgepLpaOaqjXLf2bTt6YyfvjsQKLgslkPlelzESo/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Blog Mas-Yudha</a>
            <span class='isi'>Pasang iklan Anda di sini, Harga Promo
            <a class='panah-besar' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cZHFJifESQNNoHwY7BEVBr50FdphsFm0kM6Ggh7sIb1VbA91TpDDs5Sg4f5BIuTdx-oV-kT7v7hyqEzeu7lmW6s931ZKTGvlmY6SgepLpaOaqjXLf2bTt6YyfvjsQKLgslkPlelzESo/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Blog Mas-Yudha</a>
            <span class='isi'>Pasang iklan Anda di sini, Harga Promo
            <a class='panah-besar' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cZHFJifESQNNoHwY7BEVBr50FdphsFm0kM6Ggh7sIb1VbA91TpDDs5Sg4f5BIuTdx-oV-kT7v7hyqEzeu7lmW6s931ZKTGvlmY6SgepLpaOaqjXLf2bTt6YyfvjsQKLgslkPlelzESo/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'>Blog Mas-Yudha</a>
        <span class='isi'>Pasang iklan Anda di sini, Harga Promo
            <a class='panah-besar' href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4cZHFJifESQNNoHwY7BEVBr50FdphsFm0kM6Ggh7sIb1VbA91TpDDs5Sg4f5BIuTdx-oV-kT7v7hyqEzeu7lmW6s931ZKTGvlmY6SgepLpaOaqjXLf2bTt6YyfvjsQKLgslkPlelzESo/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    
    <span class='info-iklan'>Iklan oleh Yudhadhesockerz</span>
    <span class='info-icon'><a href='http://maseyudha.blogspot.com/p/pasang-iklan.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgODBRBSEzZAGKWjmqqSBFDTlbigEZbHgn2Aemj4mMr5MbZC03tqDkGyEeWqvD81gu1dmIGGQa59QOogutaPDqVvtdaT1bq53PsC9U4Az7qj2lCQfBNq8abzDy_htYx6KYf9QRDUGowpx8/s1600/info-iklan.png'/></a></span>     
</div>
 </code></pre>
terakhir silahkan edit judul dan link sobat<br />
<br />
Sekian !! bagaimana ? jika sobat masih bingung sobat bisa ajukan pertanyaan dikotak komentar dibawah

Membuat Iklan Teks Seperti Google AdSense

Blog Mas-Yudha - Google AdSense ? siapa sih yang tidak mengenal google adsense karna sebagian besar para penggemar blogger ataupun dunia ...

+ Baca selengkapnya »