Blog Mas-Yudha: Widget

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

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 »

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 »

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 »

Cara Membuat Icon Social Share dengan Tooltip

<span class="up">click to begin</span>

</div>
Malam ini saya akan berbagi kepada sobat bagaimana cara  menambahkan satu lagi Icon Social Share untuk blog sobat. Icon Social Share ini sedikit berbeda karena memiliki <a href="http://maseyudha.blogspot.com/2014/12/cara-membuat-icon-social-share-dengan.html" target="_blank">efek hover tooltip</a> di dalamnya. Widget ini terbuat dari CSS murni tanpa menggunakan gambar atau JavaScript.<br />
<br />
Konsep di balik widget ini cukup sederhana. Ada empat Icon Social Share di mana sobat dapat menambahkan URL yang sobat inginkan sendiri. Orang dapat melihat tooltip muncul dengan bantuan transisi dan transformasi CSS. Ikon-ikon ini benar-benar eye-catching dan memiliki tampilan yang menarik.<br />
<br />
Menambahkan HTML / CSS di Template sobat.<br />
<br />
Untuk menambahkan widget ini terlebih dahulu masuk ke Blogger → Tata Letak → Tambah Widget → HTML / JavaScript dan paste kode dalam kotak di bawah.<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"><div class="container">

<li>

<span class="tooltip">Follow</span>

</a>

</li>

<li>

<span class="tooltip">Circle us</span>

</a>

</li>

<li>

</a>

</li>

<li>

<span class="tooltip">Subscribe</span>

</a>

</li>

</ul>

</div></code></pre>
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css"><style>

@charset "utf-8";

@import url(http://weloveiconfonts.com/api/?family=zocial);

/* zocial */

[class*="zocial-"]:before {

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

}

/* ---------- GENERAL ---------- */

a { text-decoration: none; }

ul {

list-style: none;

margin: 0;

padding: 0;

}

.clearfix { *zoom: 1; }

.clearfix:before, .clearfix:after {

content: "";

display: table; }

.clearfix:after { clear: both; }

.container {

display: block;

height: 64px;

position: relative;

width: 256px;

}

/* ---------- Action Bar ---------- */

.action-bar li {

float: left;

}

.action-bar a {

-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);

box-shadow: inset 0 -2px rgba(0, 0, 0, .5);

color: #e7e7e7;

display: block;

font-size: 32px;

height: 64px;

line-height: 64px;

position: relative;

text-align: center;

-webkit-transition: background .3s;

-moz-transition: background .3s;

-ms-transition: background .3s;

-o-transition: background .3s;

transition: background .3s;

width: 64px;

}

.action-bar a:hover .tooltip {

margin-top: 16px;

opacity: 1;

}

.tooltip {

border-radius: 3px;

font-size: 14px;

height: 28px;

left: 50%;

line-height: 28px;

margin: 0 0 0 -50px;

opacity: 0;

position: absolute;

top: 100%;

-webkit-transition: margin-top .3s, opacity .3s;

-moz-transition: margin-top .3s, opacity .3s;

-ms-transition: margin-top .3s, opacity .3s;

-o-transition: margin-top .3s, opacity .3s;

transition: margin-top .3s, opacity .3s;

width: 100px;

}

.tooltip:before {

content: "";

height: 8px;

left: 50%;

margin: -4px 0 0 -4px;

position: absolute;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

width: 8px;

}

.like,

.like .tooltip,

.like .tooltip:before { background: #65B1F8; }

.like:hover { background: #65B1F8; }

.favourite,

.favourite .tooltip,

.favourite .tooltip:before { background: #c93037; }

.favourite:hover { background: #b02b32; }

.comment,

.comment .tooltip,

.comment .tooltip:before { background: #43438e; }

.comment:hover { background: #393978; }

.share,

.share .tooltip,

.share .tooltip:before { background: #FF8000; }

.share:hover { background: #FF8000; }

</style></code></pre>
<br />
Ganti <button>USERNAME</button> pada code html dengan URL yang sobat inginkan dan <button>BLOG-SOBAT</button> dengan URL blog yang di tuju<br />
<br />
Selamat Mencoba

Cara Membuat Icon Social Share dengan Tooltip

Demo click to begin Malam ini saya akan berbagi kepada sobat bagaimana cara menambahkan satu lagi Icon Social Share untu...

+ Baca selengkapnya »

Cara Mudah Membuat Widget Daftar Isi (Plus Scroll) di Blog

<a href="http://maseyudha.blogspot.com/2014/11/cara-mudah-membuat-widget-daftar-isi.html" target="_blank"> Cara Mudah Membuat widget Daftar Isi (Plus Scroll) di Blog</a> –  kali ini saya akan berbagi bagaimana cara membuat daftar isi atau daftar artikel/post di sidebar blog. Keunggulan dari widget daftar isi ini adalah adanya scroll bar, yang membuat tampilan daftar isi ini menjadi lebih rapi. Tentu saja, dengan adanya widget ini, pengunjung dapat dengan mudah menjelajahi isi blog Anda, termasuk membuka – buka posting lama, dan efeknya page view blog akan meningkat.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/--cBX4mDTE3I/VFUKTDxfYyI/AAAAAAAABb0/DMMtoM-CDDI/s1600/daftar%2Bisi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://3.bp.blogspot.com/--cBX4mDTE3I/VFUKTDxfYyI/AAAAAAAABb0/DMMtoM-CDDI/s1600/daftar%2Bisi.png" width="286" /></a></div>
Oke, langsung saja. Berikut ini cara memasang / membuat daftar isi (plus scroll) di blog.<br />
1.    Login ke akun Blogger Anda, lalu klik Tata Letak -> Tambahkan Gadget -> HTML Javascript.<br />
2.    Pastekan script berikut, dan isikan judul sesuai dengan keinginan Anda pada kolom Judul.<br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"> <div style="border: 0px solid rgb(0, 0, 0); height: 300px; overflow: auto;">

</script>

var numposts = 1000;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

var standardstyling = true;

var shownumposts = true;

</script>

</script></div>

<a href="http://maseyudha.blogspot.com" style="color: black;" target="_blank">Tips SEO + Blog</a></div></code></pre>
3.    Terakhir, klik Simpan, dan lihat hasilnya.

Selamat mencoba! jangan lupa untuk meninggalkan komentar pada kolom komentar. Terima kasih, dan salam Blogger!

Cara Mudah Membuat Widget Daftar Isi (Plus Scroll) di Blog

Cara Mudah Membuat widget Daftar Isi (Plus Scroll) di Blog – kali ini saya akan berbagi bagaimana cara membuat daftar isi atau daftar art...

+ Baca selengkapnya »

Widget Artikel Terbaru Super Ringan

<a href="http://maseyudha.blogspot.com/2014/10/widget-artikel-terbaru-atau-sering.html" target="_blank">Widget Artikel Terbaru</a> atau sering disebut juga <a href="http://maseyudha.blogspot.com/">Recent Post</a> adalah widget yang menampilkan postingan kita yang baru, yah namanya saja artikel terbaru masak mau menampilkan posting yang lama. :P<br />
Sebenarnya saya juga pernah share artikel yang serupa yaitu mengenai Recent Post dengan menu navigasi, namun sepertinya widget tersebut sedikit berat untuk dipasang pada blog, dan kalau yang ini sudah sangat pasti responsive.<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-adnkmU2Rcy8/VE5fCy1gZXI/AAAAAAAABZw/2zHxC9vx_m0/s1600/artikel-terbaru.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-adnkmU2Rcy8/VE5fCy1gZXI/AAAAAAAABZw/2zHxC9vx_m0/s1600/artikel-terbaru.png" width="274" /></a></div>
<br />
<span style="font-size: large;"><b>Cara Memasang Widget Artikel Terbaru</b></span><br />
1. Masuk ke Tata Letak => add gadget => HTML/JavaScript.<br />
2. Copy semua kode dibawah ini ke kolom yang tersedia, beri judul terserah saja. :)<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css"><style type='text/css' scoped='scoped'>

#recent-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}

</style></code></pre>
<br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"><div id='recent-posts'>
<script type='text/javaScript'>

var rcp_numposts=5;

var rcp_snippet_length=150;

var rcp_info='yes';

var rcp_comment='Comments';

var rcp_disable='T?t Nh?n xét';

</script>

</div></code></pre>
<br />
3.Simpan Template.

Widget Artikel Terbaru Super Ringan

Widget Artikel Terbaru atau sering disebut juga Recent Post adalah widget yang menampilkan postingan kita yang baru, yah namanya saja arti...

+ Baca selengkapnya »