Blog Mas-Yudha: Tutorial

Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

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 Menampilkan Demo Jsfiddle Di Postingan Agar SEO Dan Valid HTML5

Jsfiddle adalah salah satu web yang menyediakan editor kode baik kode javascript, css, atau html untuk membentuk sebuah elemen blog atau website. Dengan kata lain bisa dijadikan sebagai sarana pengujian atau demo yang sedang kita buat.<br />
<br />
Dan hasilnya bisa kita tampilkan juga di postingan blog dengan mengambil kode embednya. <a href="http://maseyudha.blogspot.com/2014/12/cara-menampilkan-demo-jsfiddle-di.html" target="_blank">Kode embed dari jsfiddle menggunakan iframe</a>.<br />
<br />
Namun seperti telah kita ketahui bahwa iframe ini akan mengurangi skor SEO blog dan bisa dicek di Chkme. Juga ada beberapa kode yang menyebabkan error di validasi HTML5. Untuk itu agar kode embed jsfiddle ini bisa SEO Friendly dan valid HTML5, maka perlu sedikit perubahan pada kode embednya.<br />
<br />
Biasanya kode embed dari Jsfiddle untuk disimpan di postingan akan tampak seperti di bawah ini.<br />
<br />
<pre><code><iframe width="100%" height="300" src="http://jsfiddle.net/MasYudha/wtcgeetg/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe></code></pre>
<br />
<br />
Silahkan ganti kode iframe dengan embed, hilangkan % (persen) pada width dan ganti angkanya dengan yang Anda kehendaki misalnya disesuaikan dengan lebar daerah postingan (tanpa memakai satuan px), dan ganti kode allowfullscreen="allowfullscreen" frameborder="0" dengan kode / (garis miring), juga hapus kode </iframe>. Sehingga penampakannya akan seperti di bawah ini.<br />
<br />
<br />
<pre><code><embed width="600" height="300" src="http://jsfiddle.net/MasYudha/wtcgeetg/embedded/</code>" /></pre>
<br />
<br />
Dan perlu diperhatikan, jika akan mempublikasikan postingannya harus dalam posisi HTML bukan Compose, karena jika dipublikasikan dalam keadaan Compose maka secara otomatis kode di atas akan berubah dan menjadi tidak valid di HTML5. perubahan yang terjadi yang menyebabkan error HTML5 seperti di bawah ini.<br />
<br />
<pre><code><embed width="600" height="300" src="http://jsfiddle.net/MasYudha/wtcgeetg/embedded/</code>" ></embed></pre>
<br />
<br />
Kode / (garis miring) yang ada di ujung akan menghilang dan diganti dengan kode </embed> di akhir kode, nah kode itulah yang akhirnya menyebabkan menjadi error lagi di HTML5.<br />
<br />
Sebagai contoh, di bawah ini adalah demo result dari Jsfiddle yang sudah valid HTML5 dan tentunya SEO Friendly yang menampilkan tab javascript, css, html, dan result dengan kode di bawah ini.<br />
<embed height="300" src="http://jsfiddle.net/MasYudha/wtcgeetg/embedded/" width="600"></embed>

<br />
<br />
<br />
Demo result hanya menampilkan tab dengan hanya result-nya saja.<br />
<embed height="300" src="http://jsfiddle.net/MasYudha/wtcgeetg/embedded/result/" width="600"></embed>

<br />
<br />
<br />
Semoga bisa dimengerti dan bermanfaat...

Cara Menampilkan Demo Jsfiddle Di Postingan Agar SEO Dan Valid HTML5

Jsfiddle adalah salah satu web yang menyediakan editor kode baik kode javascript, css, atau html untuk membentuk sebuah elemen blog atau web...

+ Baca selengkapnya »

Membuat Efek Loading Blog dengan CSS dan JQUERY

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<a href="http://maseyudha.blogspot.com/2014/12/membuat-efek-loading-blog-dengan-css.html" target="_blank">Membuat Efek Loading Blog Dengan Css </a>- Pasti sobat semua sudah tau apa itu efek loading blog itu, degan memasang loading di blog sobat dapat membuat blog menjadi elegan dang menambah daya tarik blog sobat. Sebelum memasang efek pada blog sobat harus memperhatikan ukuran ukuran animasi loading karena jangan sampai karena memasang loading blog akan berdampak akan blog sobat akan lambat. oleh karena itu sebelum memasang loading blog sobat harus mengkompres gambar animasi loading blog agar ukuran nya menjadi kecil dan tidak akan melambatkan blog sobat nanti nya. Bila sobat tertarik memasang nya efek loading blog di blog sobat  mari simak dan ikuti tutorial dibawah ini dan ada beberapa efek loading blog yang dapat sobat pilih:<br />
<br />
1. Masuk ke blogger<br />
2. Masuk ke menu Template - Edit HTML<br />
3. Cari kode <button>]]></b:skin></button> atau <button></style></button> dan copy kode di bawah ini  tepat di atas nya<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css">/* CSS Loading Page */

#page-loader {position:fixed!important;position:absolute;top:0;right:0;bottom:0;

left:0;z-index:9999;background:#fff url('http://2.bp.blogspot.com/-kIrasdB82T0/U6eA_bnDmlI/AAAAAAAADzw/UUio00Tw4gM/s1600/Loader2.gif') no-repeat 50% 50%;color:#fcfcfc;padding:1em 1.2em;display:none;}</code></pre>
<br />
4. Cari kode <button></body></button> dan copykan kode di bawah ini tepat di atasnya<br />
<br />
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript"><script type='text/javascript'>

//<![CDATA[

$(document.body).append('<div id="page-loader">Loading...</div>');

$(window).on("beforeunload", function() {

$('#page-loader').fadeIn(1000).delay(9000).fadeOut(1000);

});

//]]>

</script></code></pre>
<br />
5. Simpan Template<br />
<br />
<br />
<div style="text-align: center;">
<b>Beberapa Kumpulan Efek Animasi Loading Blog</b><br />
<b><br /></b>
<br />
<div class="separator" style="clear: both; text-align: center;">
<b><a href="http://3.bp.blogspot.com/-XOrasW36Jpc/VIRL7Uxoi7I/AAAAAAAABnA/zpJ06OWz0Ak/s1600/Loader1.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-XOrasW36Jpc/VIRL7Uxoi7I/AAAAAAAABnA/zpJ06OWz0Ak/s1600/Loader1.gif" /></a></b></div>
</div>
</div>
<br />
<button>http://3.bp.blogspot.com/-XOrasW36Jpc/VIRL7Uxoi7I/AAAAAAAABnA/zpJ06OWz0Ak/s1600/Loader1.gif</button></div>
<br />
<div style="text-align: center;">
<a href="http://2.bp.blogspot.com/-tH1uPb217Fw/VIRMcyMl0sI/AAAAAAAABnI/5t9zBMX6aj8/s1600/Loader2.gif" imageanchor="1"><img border="0" src="http://2.bp.blogspot.com/-tH1uPb217Fw/VIRMcyMl0sI/AAAAAAAABnI/5t9zBMX6aj8/s320/Loader2.gif" /></a>
</div>
</div>
<br />
<button>http://2.bp.blogspot.com/-tH1uPb217Fw/VIRMcyMl0sI/AAAAAAAABnI/5t9zBMX6aj8/s1600/Loader2.gif</button>
<br />
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-f1yeSFlXTJ0/VIRM0JN7aNI/AAAAAAAABnQ/ozL3vlrlejw/s1600/Loader3.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://3.bp.blogspot.com/-f1yeSFlXTJ0/VIRM0JN7aNI/AAAAAAAABnQ/ozL3vlrlejw/s320/Loader3.gif" /></a></div>
</div>
<br />
<button>http://3.bp.blogspot.com/-f1yeSFlXTJ0/VIRM0JN7aNI/AAAAAAAABnQ/ozL3vlrlejw/s1600/Loader3.gif</button></div>

Membuat Efek Loading Blog dengan CSS dan JQUERY

Membuat Efek Loading Blog Dengan Css - Pasti sobat semua sudah tau apa itu efek loading blog itu, degan memasang loading di blog sobat ...

+ 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 »

Membuat Tombol Demo dan Download Keren

<a href="http://maseyudha.blogspot.com/2014/12/membuat-tombol-demo-dan-download-keren.html" target="_blank">Cara membuat Tombol Demo dan Download Keren</a> - Kali ini saya akan berbagi tips bagaimana Cara Memasang Tombol/Button Demo ataupun Download seperti yang digunakan blog ini, Cukup mudah kok,,anda hanya perlu menambahkan kode CSS dan HTML di bawah ini :<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-M8Z82oNbVY4/VHygdlolDMI/AAAAAAAABjU/eeh1h2hdSx4/s1600/Simple%2BButton%2BDemo%2Bdan%2BDownload.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="169" src="http://1.bp.blogspot.com/-M8Z82oNbVY4/VHygdlolDMI/AAAAAAAABjU/eeh1h2hdSx4/s1600/Simple%2BButton%2BDemo%2Bdan%2BDownload.png" width="320" /></a></div>
<br />
Sebelumnya anda sudah memasang font awesome pada template, jika belum silahkan tambahkan link dibawah ini sebelum <button></head></button><br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> 
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/></code></pre>
<br />
Buka Template > Edit HTML > Terapkan kode di bawah ini sebelum <button></style></button><br />
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css"> 
.whitebutton {

margin: 20px auto;

padding: 20px 0;

width: 200px;

}

.whitebutton a {

background: #fff;

color: #666;

display: block;

font-size: 17px;

font-weight: 700;

font-family: 'Arial',Verdana,sans-serif;

height: 50px;

line-height: 50px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

width: 200px;

position: relative;

z-index: 2;

}

.whitebutton a:before {

content: '\f019';

font-family: FontAwesome;

font-weight: normal;

padding: 8px;

margin-left: -12px;

margin-right: 6px;

}

.whitebutton span {

background: #444;

color: #fff;

display: block;

font-size: 12px;

font-family: 'Arial', Verdana,sans-serif;

height: 40px;

line-height: 40px;

text-align: center;

width: 200px;

z-index: 1;

text-transform: uppercase;

font-weight: bold;

}

.whitebutton .up {

background: #e25734;

margin: -25px auto;

opacity: 0;

border-radius: 0 0 5px 5px;

transform: translate(0,-50px);

transition: 350ms;

}

.whitebutton .down {

margin: -30px auto;

opacity: 0;

border-radius: 5px 5px 0 0;

transform: translate(0,-50px);

transition: 350ms;

}

.whitebutton .down:before {

content:'\f14a';

font-family: FontAwesome;

font-weight: normal;

margin-right: 6px;

color: #aaa;

}

.whitebutton:hover .up {

opacity: 1;

transform: translate(0,0);

}

.whitebutton:hover .down {

opacity: 1;

transform: translate(0,-90px);

}

.whitebuttondemo {

margin: 20px auto;

padding: 20px 0;

width: 200px;

}

.whitebuttondemo a {

background: #e25734;

color: #fff;

display: block;

font-size: 17px;

font-weight: 700;

font-family:'Arial',Verdana,sans-serif;

height: 50px;

line-height: 50px;

text-align: center;

text-decoration: none;

text-transform: uppercase;

width: 200px;

position: relative;

z-index: 2;

transition: 350ms;

}

.whitebuttondemo a:before {

content:'\f002';

font-family: FontAwesome;

font-weight: normal;

padding: 8px;

margin-left: -12px;

margin-right: 6px;

}

.whitebuttondemo a:hover {

color: #fff;

}

.whitebuttondemo span {

background: #444;

color: #fff;

display: block;

font-size: 12px;

font-family: 'Arial', Verdana,sans-serif;

height: 40px;

line-height: 40px;

text-align: center;

width: 200px;

z-index: 1;

text-transform: uppercase;

font-weight: bold;

}

.whitebuttondemo .up {

background: #444;

margin: -25px auto;

opacity: 0;

border-radius: 0 0 5px 5px;

transform: translate(0,-50px);

transition: 350ms;

}

.whitebuttondemo:hover .up {

opacity: 1;

transform: translate(0,0);

}</code></pre>
<br />
<br />
<br />
1. Bagi yang menggunakan <button>Gunakan tag <br></button><br />
<br />
Terapkan HTML berikut di postingan pada tab <button>HTML</button> (bukan compose)<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> 
<div class="whitebuttondemo">

<span class="up">click to view</span></div>

<br>

<a href="#" target="_blank">Download</a><br>

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

<span class="down">1.6MB .rar</span></div></code></pre>
<br />
2. Bagi yang menggunakan <button>Tekan "Enter" untuk baris baru</button><br />
<br />
Terapkan HTML berikut di postingan pada tab <button>HTML </button>(bukan compose)<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"> 
<div class="whitebuttondemo">

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

</div>

<a href="#">Download</a>

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

</div></code></pre>
<br />
Kemudian isikan link tautan anda pada kode yang saya tandai "#", selesai.<br />
<br />
<div style="text-align: center;">
<b>Hasilnya akan tampil seperti di bawah ini</b></div>
<div class="whitebuttondemo">
<a href="https://www.blogger.com/blogger.g?blogID=3535554213633977957#" target="_blank">Demo</a><br />
<span class="up">click untuk Melihat</span></div>
<br />
<div class="whitebutton">
<a href="https://www.blogger.com/blogger.g?blogID=3535554213633977957#" target="_blank">Download</a><br />
<span class="up">click untuk Mulai</span><br />
<span class="down">5.3MB .rar</span></div>
Cukup mudah bukan, silahkan dikreasikan kembali dan selamat mencoba.

Membuat Tombol Demo dan Download Keren

Cara membuat Tombol Demo dan Download Keren - Kali ini saya akan berbagi tips bagaimana Cara Memasang Tombol/Button Demo ataupun Download s...

+ Baca selengkapnya »

Membuat Fixed Tiny Nav di Blogspot

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-OTfSLDs5T3s/VHyUYXwIHPI/AAAAAAAABjE/mJyjZHibqzM/s1600/Fixed%2BTiny%2BNav.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="http://3.bp.blogspot.com/-OTfSLDs5T3s/VHyUYXwIHPI/AAAAAAAABjE/mJyjZHibqzM/s1600/Fixed%2BTiny%2BNav.png" width="320" /></a></div>
<a href="http://maseyudha.blogspot.com/2014/12/membuat-fixed-tiny-nav-buat-blog.html" target="_blank">Membuat Fixed Tiny Nav di Blogspot</a> ~  Kali ini saya akan memberikan Tutorial Cara membuat Fixed Tiny Nav ( Menu Navigasi Kecil Yang Mengikuti Scroll ) Menu ini Simple Kecil tapi keren, mungkin ada sobat blogger yang ingin blognya keren tapi Simple, yaa menu ini cocok di pasang di blog yang ingin Simple.<br />
<br />
Menu ini saya dapat dari Blog <a href="http://twistedshape.blogspot.com/" target="_blank">Twisted Shape</a>, Admin aslinya adalah Arlina Fitriyani dengan blognya yang keren yaitu <a href="http://arlinadesign.blogspot.com/" target="_blank">Arlina Design</a>.<br />
<br />
<div class="whitebuttondemo">
<a href="http://jsfiddle.net/MasYudha/mejs3rdp/4/embedded/result/" target="_blank">Demo</a><br />
<span class="up">click to view</span></div>
<br />
<br />
Jika sobat ingin Memasang Menu Simple dan keren ini, silahkan ikuti tutorial di bawah ini.<br />
<br />
Pertama sobat masuk ke Blogger > Template > Edit HTML<br />
<br />
Masukan CSS dibawah ini tepat diatas <button></b:skin></button> atau <button></style></button><br />
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css">
/* CSS Simple Menu */

.unstyled-list {

padding: 0;

}

.unstyled-list li {

list-style: none;

margin: 0;

padding: 0;

}

.nav-menu {

position: absolute;

right: 0;

top: 0;

min-width: 140px;

opacity: 0;

backface-visibility: hidden;

transform: translate3d(0,20px,0);

visibility: hidden;

box-shadow: 0 3px 8px -3px rgba(0,0,0,0.2);

transition: all .2s ease, visibility 0s linear;

}

.nav {

position: fixed;

top: 5%;

right: 2%;

z-index: 102;

}

.nav.active .fa-bars {

opacity: 0;

}

.nav.active .fa-times {

opacity: 1;

color: #fff;

background: #f56954;

}

.nav.active .nav-menu {

opacity: 1;

transform: translate3d(0,50px,0);

visibility: visible;

transition-delay: 0s;

}

.menu-btn {

display: block;

width: 40px;

height: 40px;

color: #fff;

background-color: rgba(0,0,0,0.2);

transition: all .2s ease;

text-align: center;

position: relative;

z-index: 1;

}

.menu-btn .fa {

position: absolute;

top: 0;

right: 0;

font-size: 24px;

line-height: 40px;

width: 40px;

vertical-align: middle;

transition: opacity .1s linear;

}

.menu-btn .fa-bars {

opacity: 1;

color: #fff;

}

.menu-btn .fa-times {

opacity: 0;

}

.menu-btn:hover {

background-color: #f56954;

color: #fff;

}

.nav-item-link {

display: block;

font-size: 13px;

color: #999;

padding: 15px;

background-color: #fff;

transition: all .2s ease;

border-bottom: 1px solid #e9e9e9;

}

.nav-item:last-child .nav-item-link {

border-bottom: none;

}

.nav-item .nav-item-link i.fa.fa-home,.nav-item .nav-item-link i.fa.fa-paper-plane,.nav-item .nav-item-link i.fa.fa-list-alt,.nav-item .nav-item-link i.fa.fa-coffee {

margin-right: 10px;

}

.nav-item-link:hover {

background-color: #fcfcfc;

}

a.nav-item-link:hover {

color: #1497ec;

}

.unstyled-list:before {

bottom: 100%;

right: 10%;

border: solid transparent;

content: '';

height: 0;

width: 0;

position: absolute;

pointer-events: none;

border-color: rgba(255,255,255,0);

border-bottom-color: #f56954;

border-width: 8px;

margin-left: -8px;

}

.nav-item:first-child .nav-item-link {

border-top: 3px solid #f56954;

}

a.nav-item-link {

text-decoration: none;

font-family: inherit;

}
</code></pre>
Lalu Masukan <button>HTML</button> dibawah ini di tempat yang sobat inginkan.

</a>

<a class='nav-item-link' href='#'>About</a>

</li>

<a class='nav-item-link' href='#'>Articles</a>

</li>

</li>

<a class='nav-item-link' href='#'>Contact</a>

</li>

</ul>

</nav></code></pre>
Lalu Masukan <button>JQUERY </button>dibawah ini tepat diatas <button></body></button>

(function() {

window.Menu = (function() {

Menu.init = function() {

return $('[data-menu]').each(function(idx, el) {

return new Menu($(el));

});

};

function Menu($el) {

this.nav = $el;

this.menubtn = $('.menu-btn', this.nav);

this.menubtn.on('click', (function(_this) {

return function(ev) {

_this.nav.toggleClass('active');

return false;

};

})(this));

}

return Menu;

})();

$(function() {

if ($('[data-menu]').length) {

return Menu.init();

}

});

}).call(this);

</script></code></pre>
Langkah Terakhir Simpan Template.<br />
<br />
 Semoga Tutorial Ini Bermanfaat...

Membuat Fixed Tiny Nav di Blogspot

Membuat Fixed Tiny Nav di Blogspot ~ Kali ini saya akan memberikan Tutorial Cara membuat Fixed Tiny Nav ( Menu Navigasi Kecil Yang Mengi...

+ Baca selengkapnya »

Memasang Prism Syntax Highlighter di Blogger

<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-J3r1kBuZ2Ao/VHmMDKa1HuI/AAAAAAAABi0/9LJLiVawtAo/s1600/Memasang%2BPrism%2BSyntax%2BHighlighter%2Bdi%2BBlogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="314" src="http://3.bp.blogspot.com/-J3r1kBuZ2Ao/VHmMDKa1HuI/AAAAAAAABi0/9LJLiVawtAo/s1600/Memasang%2BPrism%2BSyntax%2BHighlighter%2Bdi%2BBlogger.png" width="320" /></a></div>
<a href="http://maseyudha.blogspot.com/2014/11/memasang-prism-syntax-highlighter-di.html" target="_blank">Memasang Prism Syntax Highlighter di Blogger</a> - Bagi Anda yang sering berbagi tutorial tentunya sudah tidak asing lagi dengan istilah Syntax Highlighter.<br />
<br />
Syntax Highlighter ini pertama kali saya lihat di blog Arlina design Tempatnya Berbagi Template dan Tips Seputar Blogger dan kini saya telah menerapkan kode tersebut sebagai fitur pendukung blog ini.<br />
<br />
Ok langsung saja, silahkan buka Blogger > Template > Edit HTML > Kemudian salin dan terapkan kode di bawah ini sebelum <button></style></button><br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css">/* CSS Prism Syntax Highlighter */
pre {
    padding: 50px 10px 10px 10px;
    margin: .5em 0;
    white-space: pre;
    word-wrap: break-word;
    overflow: auto;
    background-color: #2c323c;
    position: relative;
    border-radius: 4px;
    max-height: 500px;
}

pre::before {
    font-size: 16px;
    content: attr(title);
    position: absolute;
    top: 0;
    background-color: #eee;
    padding: 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: block;
    margin: 0 0 15px 0;
    font-weight: bold;
}

pre::after {
    content: 'Double click to selection';
    padding: 2px 10px;
    width: auto;
    height: auto;
    position: absolute;
    right: 8px;
    top: 8px;
    color: #fff;
    line-height: 20px;
    transition: all 0.3s ease-in-out;
}

pre:hover::after {
    opacity: 0;
    top: -8px;
    visibility: visible;
}

code {
    font-family: Consolas,Monaco,'
    Andale Mono','Courier New',Courier,Monospace;
    line-height: 16px;
    color: #88a9ad;
    background-color: transparent;
    padding: 1px 2px;
    font-size: 12px;
}

pre code {
    display: block;
    background: none;
    border: none;
    color: #e9e9e9;
    direction: ltr;
    text-align: left;
    word-spacing: normal;
    padding: 0 0;
    font-weight: bold;
}

code .token.punctuation {
    color: #ccc;
}

pre code .token.punctuation {
    color: #fafafa;
}

code .token.comment,code .token.prolog,code .token.doctype,code .token.cdata {
    color: #777;
}

code .namespace {
    opacity: .8;
}

code .token.property,code .token.tag,code .token.boolean,code .token.number {
    color: #e5dc56;
}

code .token.selector,code .token.attr-name,code .token.string {
    color: #88a9ad;
}

pre code .token.selector,pre code .token.attr-name {
    color: #fafafa;
}

pre code .token.string {
    color: #40ee46;
}

code .token.entity,code .token.url,pre .language-css .token.string,pre .style .token.string {
    color: #ccc;
}

code .token.operator {
    color: #1887dd;
}

code .token.atrule,code .token.attr-value {
    color: #009999;
}

pre code .token.atrule,pre code .token.attr-value {
    color: #1baeb0;
}

code .token.keyword {
    color: #e13200;
    font-style: italic;
}

code .token.comment {
    font-style: italic;
}

code .token.regex {
    color: #ccc;
}

code .token.important {
    font-weight: bold;
}

code .token.entity {
    cursor: help;
}

pre mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

pre code mark {
    background-color: #ea4f4e!important;
    color: #fff!important;
    padding: 2px;
    border-radius: 2px;
}

.comments pre {
    padding: 10px 10px 15px 10px;
    background: #2c323c;
}

.comments pre::before {
    content: 'Code';
    font-size: 13px;
    position: relative;
    top: 0;
    background-color: #f56954;
    padding: 3px 10px;
    left: 0;
    right: 0;
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    margin: 0 0 10px 0;
    font-weight: bold;
    border-radius: 4px;
    border: none;
}

.comments pre::after {
    font-size: 11px;
}

.comments pre code {
    color: #eee;
}

.comments pre.line-numbers {
    padding-left: 10px;
}

pre.line-numbers {
    position: relative;
    padding-left: 3.0em;
    counter-reset: linenumber;
}

pre.line-numbers > code {
    position: relative;
}

.line-numbers .line-numbers-rows {
    height: 100%;
    position: absolute;
    pointer-events: none;
    top: 0;
    font-size: 100%;
    left: -3.5em;
    width: 3em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    padding: 0;
}

.line-numbers-rows > span {
    pointer-events: none;
    display: block;
    counter-increment: linenumber;
}

.line-numbers-rows > span:before {
    content: counter(linenumber);
    color: #999;
    display: block;
    padding-right: 0.8em;
    text-align: right;
    transition: 350ms;
}

pre[data-codetype='CSSku']:before {
    background-color: #00a1d6;
}

pre[data-codetype='HTMLku']:before {
    background-color: #3cc888;
}

pre[data-codetype='JavaScriptku']:before {
    background-color: #75d6d0;
}

pre[data-codetype='JQueryku']:before {
    background-color: #e5b460;
}</code></pre>
<br />
Setelah itu simpan 3 kode di bawah ini tepat sebelum <button></body></button> atau <button></head></button><br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript"><script src='https://arlina-design.googlecode.com/svn/prism.js' type='text/javascript'/></code></pre>
<br />
<br />
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript"><script>

$('pre').attr('class', 'line-numbers');

Prism.hooks.add("after-highlight",function(e){var t=e.element.parentNode;if(!t||!/pre/i.test(t.nodeName)||t.className.indexOf("line-numbers")===-1){return}var n=1+e.code.split("\n").length;var r;lines=new Array(n);lines=lines.join("<span></span>");r=document.createElement("span");r.className="line-numbers-rows";r.innerHTML=lines;if(t.hasAttribute("data-start")){t.style.counterReset="linenumber "+(parseInt(t.getAttribute("data-start"),10)-1)}e.element.appendChild(r)})

</script></code></pre>
<br />
<br />
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript">
<script type='text/javascript'>

var pres = document.getElementsByTagName(&quot;pre&quot;);

for (var i = 0; i &lt; pres.length; i++) {

pres[i].addEventListener(&quot;dblclick&quot;, function () {

var selection = getSelection();

var range = document.createRange();

range.selectNodeContents(this);

selection.removeAllRanges();

selection.addRange(range);

}, false);

}

</script></code></pre>
<br />
<br />
Simpan template.<br />
<br />
<br />
Selanjutnya saat Anda membuat post baru, terapkan kode pemanggil di bawah ini pada postingan (Tab HTML)<br />
<br />
<pre data-codetype="HTMLku" title="HTML"><code class="language-markup"><pre title="HTML" data-codetype ="HTMLku"><code class="language-markup"> ... kode HTML (yang sudah di`escape`) di sini ... </code></pre>

<pre title="Javascript" data-codetype ="JavaScriptku"><code class="language-javascript"> ... kode JavaScript di sini ... </code></pre>

<pre title="jQuery" data-codetype ="JQueryku"><code class="language-javascript"> ... kode jQuery di sini ... </code></pre></code></pre>
<span style="font-size: x-small;">source : http://arlinadesign.blogspot.com/2014/11/memasang-prism-syntax-highlighter-di-blogger.html</span>

Memasang Prism Syntax Highlighter di Blogger

Memasang Prism Syntax Highlighter di Blogger - Bagi Anda yang sering berbagi tutorial tentunya sudah tidak asing lagi dengan istilah Synt...

+ Baca selengkapnya »

Cara Membuat Random Post Bergerak Ala Mas-Yudha

Kali ini saya akan share tentang<a href="http://maseyudha.blogspot.com/2014/10/cara-membuat-random-post-bergerak-ala.html" target="_blank"> cara membuat random post bergerak</a> pada sidebar blog Sobat,,dengan menambahkan Widget Random Post tentu saja akan memudahkan pengunjung untuk menemukan Artikel kita,,terlebih lagi kalau widget tersebut dibuat bergerak tentunya akan semakin menarik untuk dilihat Contohnya seperti dibawah ini<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/-qnGkQbyuy3k/VEKXuCxlg7I/AAAAAAAABUM/hvPLEnfnEko/s1600/random.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://1.bp.blogspot.com/-qnGkQbyuy3k/VEKXuCxlg7I/AAAAAAAABUM/hvPLEnfnEko/s1600/random.png" width="308" /></a></div>
<br />
<b>Langkah-langkah membuat random post bergerak :</b><br />
<br />
<ol>
<li>Login ke blogger</li>
<li>Pilih Rancangan kemudian Tambah Gadget</li>
<li>Pilih HTML/JavaScript</li>
<li>Masukan Semua kode HTML dibawah</li>
</ol>
<br />
<pre data-codetype="CSSku" title="CSS"><code class="language-css">
<div style="margin-bottom: 15px;">

#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}

#rp_plus_img ul{list-style-type:none;margin:0;padding:0}

#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}

#rp_plus_img li{height:70px;padding:1px;list-style:none;}

#rp_plus_img a{color:#3366ff;}

#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:14px;}

#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}

#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}

</style></code></pre>
<br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

var speed = <span style="background-color: blue;">450</span>;

var pause = <span style="background-color: red;">4000</span>;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

var numposts = <span style="background-color: magenta;">30</span>;

var numchars = 60;

</script>

</ul>

</div></code></pre>
Catatan :<br />
<br />
*. Kode <button>var speed</button> adalah kecepatan untuk berpindahnya post ke post lain, sobat bisa ganti nomornya sesuai dengan keinginan sobat.<br />
*. Kode <button>var Pause</button> adalah waktu berhentinya post/di pause.., sama seperti diatas sobat bisa merubahnya sesuai dengan keinginan sobat.<br />
*. Kode <button>var numposts</button> adalah jumlah post yang akan di tampilkan di recent post. sobat bisa mengubahnya sesuka hati..<br />
<br />
5.Kemudian tinggal di save dan sobat lihat hasilnya..

Cara Membuat Random Post Bergerak Ala Mas-Yudha

Kali ini saya akan share tentang cara membuat random post bergerak pada sidebar blog Sobat,,dengan menambahkan Widget Random Post tentu sa...

+ Baca selengkapnya »

Cara Membuat Sitemap SEO Keren di Blog

<a href="http://maseyudha.blogspot.com/2014/10/cara-membuat-sitemap-seo-keren-di-blog.html" target="_blank">Cara membuat daftar isi / Sitemap Keren</a>- Mengoptimasi blog dapat dilakukan dengan banyak cara, salah satunya adalah dengan membuat Sitemap / daftar isi pada blog. Membuat daftar isi merupakan salah satu metode optimasi yang bersifat on-page.<br />
<br />
Fungsi daftar isi adalah untuk memudahkan pengunjung menelusuri semua konten yang ada pada blog kita secara mudah. Selain itu, sitemap juga akan terbaca oleh spider search, sehingga peluang untuk mendapatkan banyak pengunjung terbuka lebar.<br />
<br />
Cara membuat sitemap sebenarnya cukup beragam. Jika Anda menggunakan blog platform Blogger/Blogspot, sebagian besar sitemap dibuat dengan menggunakan kode Javascript. Membuat sitemap menggunakan Javascript memang lebih mudah dan cepat. Dan jika Anda pengguna platform Wordpress (self hosted), maka Anda cukup menggunakan plugin untuk membuat sebuah daftar isi/sitemap.<br />
<br />
<br />
<div style="text-align: center;">
Penampakannya</div>
<div style="text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-C5MKku3pEjw/VDf7ySbFmvI/AAAAAAAABQA/4QeKzw73qGQ/s1600/sitemap.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="http://2.bp.blogspot.com/-C5MKku3pEjw/VDf7ySbFmvI/AAAAAAAABQA/4QeKzw73qGQ/s1600/sitemap.png" width="287" /></a></div>
<br />
<div style="text-align: center;">
<button><a href="http://maseyudha.blogspot.com/p/template-demo.html?url=http://maseyudha.blogspot.com/p/blog-page.html">DEMO</a></button></div>
<br />
Berikut ini adalah cara untuk membuat Sitemap di Blogger/Blogspot menggunakan Code Javascript.<br />
<br />
1. Silahkan Copy Code di bawah ini<br />
<pre data-codetype="JQueryku" title="jQuery"><code class="language-javascript"><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script></code></pre>
<br />
<pre data-codetype="JavaScriptku" title="Javascript"><code class="language-javascript">
<span style="color: blue;">

var accToc = true;

</script>

Cara Membuat Sitemap SEO Keren di Blog

Cara membuat daftar isi / Sitemap Keren - Mengoptimasi blog dapat dilakukan dengan banyak cara, salah satunya adalah dengan membuat Sitemap ...

+ Baca selengkapnya »

Kata Kunci Untuk Mencari Blog Zombie

<a href="http://maseyudha.blogspot.com/2014/09/kata-kunci-untuk-mencari-blog-zombie.html" target="_blank">Blog zombie</a> adalah blog yang sudah dihapus dan ingin di hidupkan lagi. Alasan blog tersebut dibangkitkan karena memiliki PageRank yang tinggi, umur blog yang sudah tua dan lainnya sebagainya. Nah, untuk memanfaatkan blog zombie Anda bisa menggunakan KATA KUNCI dibawah ini.<br />
<br />
<div style="text-align: center;">
<img alt="Blog Zombie" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5qwJ7D5iVMeSubtFz1rX6AEbNctMCyYCKnFwFSvJNQ69QYlR-E0FbuFLoMRuWpJMlf2CMweIsJVMQn4e9-5yXdbOXM8P8qTmZPyFOe4nEaPQXi0YEY-LgbtUh8IyWxcOczKmrOv2YfnE/s1600/blog-zombie.jpg" /></div>
<b>Blog Zombie</b><br />
site:blogger.com/profile "kata kunci"<br />
site:blogger.com/profile admin = "kata kunci"<br />
site:blogger.com/profile keyword "kata kunci"<br />
site:blogger.com/profile keyword Location: "negara"<br />
site:blogger.com/profile keyword On blogger since "bulan dan tahun"<br />
site:blogger.com/profile keyword Gander: "jenis kelamain"<br />
<br />
<b>Contoh penerapannya</b><br />
<br />
site:blogger.com/profile "Internet Marketing"<br />
site:blogger.com/profile admin = "Internet Marketing"<br />
site:blogger.com/profile keyword "Internet Marketing"<br />
site:blogger.com/profile keyword Location: "Indonesia"<br />
site:blogger.com/profile keyword On blogger since "July 2014"<br />
site:blogger.com/profile keyword Gander: "Male"<br />
<br />
Selamat Berburu Blog Zombie!

Kata Kunci Untuk Mencari Blog Zombie

Blog zombie adalah blog yang sudah dihapus dan ingin di hidupkan lagi. Alasan blog tersebut dibangkitkan karena memiliki PageRank yang ting...

+ Baca selengkapnya »

Cara mendapatkan link in dari alexa

<div style="text-align: center;">
</div>
Selamat pagi sobat, semoga masih dalam keadaan sehat dan bersemangat, kali ini Ane mau berbagi tentang Bagaimana <a href="http://maseyudha.blogspot.com/2014/09/trik-mendapatkan-link-in-dari-alexa.html" target="_blank">Cara Mendapatkan Link In dari Alexa.</a><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjB9nu509UNQ2uINatrLivw1b9DBZCULJKMuSQmVlgj168vrYgRBNdtteXcUlDgShtMaR18j3kDfLzDkSSsIbaIsW151rouTE9RpMRiDuk8GcKBg8VuHETFKUpNhZ3bkhUZFAnLWDryV4/s1600/alexa-rank+copy.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Paling Cepat Mendapatkan Link In Di Alexa" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjB9nu509UNQ2uINatrLivw1b9DBZCULJKMuSQmVlgj168vrYgRBNdtteXcUlDgShtMaR18j3kDfLzDkSSsIbaIsW151rouTE9RpMRiDuk8GcKBg8VuHETFKUpNhZ3bkhUZFAnLWDryV4/s1600/alexa-rank+copy.jpg" /></a></div>
<br />
Setelah mondar mandir cari sana kemari akhirnya dapat juga cara ampuh mendapatkan link in dari penyedia Page Rank terbesar di dunia maya yaitu Alexa. Baiklah sobat sekalian tidak banyak bicara lagi silahkan menerapkan cara-cara di bawah ini.<br />
<br />
Pertama buatlah sebuah postingan yang baik dan original, lalu sediakan tempat untuk berbagi Link kepada teman-teman sobat.<br />
Langkah selanjutnya copy Link yang ada di bawah ini dengan syarat sobat harus menghilangkan atau menghapus link yang pertama, (disini adalah Bloggers.com), buatlah link yang kedua menjadi yang pertama, yang ketiga menjadi yang kedua, yang ke empat menjadi yang ke tiga dan seterusnya sampai pada link yang terakhir.<br />
<br />
<br />
<ol>
<li><a href="http://mypagerank.net/">Mypagerank</a></li>
<li><a href="http://pun.bz/">Mywapblog</a></li>
<li><a href="http://okezone.com/">Okezone</a></li>
<li><a href="http://www.masterptcsite.com/">masterptcsite</a></li>
<li><a dofollow="" href="http://maseyudha.blogspot.com/" rel="" title="mas-yudha|All About Internet ">Blog Mas-Yudha</a>
</li>
<li><a href="http://goglingstudio.blogspot.com/">Gogling Studio</a>
</li>
<li><a href="http://backlink100.blogspot.com/">BackLink100</a></li>
<li><a href="http://dupawangi10.blogspot.com/">Dupa Wangi</a></li>
<li><a href="http://www.topbacklink.co.vu/">Top Backlink</a></li>
<li><a href="https://www.blogger.com/URL%20BLOG%20ANDA">NAMA BLOG ANDA</a></li>
</ol>
<br />
<br />
Langkah yang harus sobat cermati yaitu menambahkan Link yang paling terakhir dengan link blog/website sobat, seperti yang saya tulis di atas, disitu saya cantumkan link blog saya, dan nanti setelah sobat copas maka link saya akan menaik di nomor 9 dan seterusnya. Seperti di bawah ini.<br />
<br />
<br />
<ol>
<li><a href="http://pun.bz/">Mywapblog</a></li>
<li><a href="http://okezone.com/">Okezone</a></li>
<li><a href="http://www.masterptcsite.com/">masterptcsite</a></li>
<li><a dofollow="" href="http://maseyudha.blogspot.com/" rel="" title="mas-yudha|All About Internet ">Blog Mas-Yudha</a>
</li>
<li><a href="http://goglingstudio.blogspot.com/" title="GoGling Studio| Jus Share it">Gogling Studio</a>
</li>
<li><a href="http://backlink100.blogspot.com/">BackLink100</a></li>
<li><a href="http://dupawangi10.blogspot.com/">Dupa Wangi</a></li>
<li><a href="http://www.topbacklink.co.vu/">Top Backlink</a></li>
<li><a href="https://www.blogger.com/URL%20BLOG%20ANDA">NAMA BLOG ANDA</a></li>
</ol>
<br />
<span style="color: red;">Keterangan :</span><br />
Jika sobat bisa mencari atau mendapatkan 5 teman saja yang ingin mengikuti langkah-langkah di atas maka perhitungannya akan seperti di bawah ini.<br />
<br />
<br />
Posisi 10,jumlah backlink = 1<br />
Posisi 9, jumlah backlink = 5<br />
Posisi 8, jumlah backlink = 25<br />
Posisi 7, jumlah backlink = 125<br />
Posisi 6, jumlah backlink = 625<br />
Posisi 5, jumlah backlink = 3.125<br />
Posisi 4, jumlah backlink = 15.625<br />
Posisi 3, jumlah backlink = 78.125<br />
Posisi 2, jumlah backilnk = 390.625<br />
Posisi 1, jumlah backlink = 1.953.125<br />
<br />
Dan nama dari alamat blog sobat juga bisa diubah sesuai dengan kata "Mendapatkan Link" yang sobat inginkan yang dapat menarik perhatian untuk di klik. Dari segi SEO anda sudah mendapatkan 1.953.125 backlink dan efeknya jika pengunjung mengklik link anda maka anda akan mendapat trafik atau pengunjung tambahan yang luar biasa.<br />
<br />
Bagaimana sobat blogger sekalian??? tertarik dengan artikel di atas, silahkan praktekkan dan lihat hasilnya kedepan, semoga cara ini bisa terus berkembang dan menjadi ladang Page Rank buat kita semuanya Amin....<br />
Sekian postingan yang bisa saya buat semoga bermanfaat dan selamat mencoba.