Blog Mas-Yudha: JAVASCRIPT

Tampilkan postingan dengan label JAVASCRIPT. 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 »

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

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 »