Mursaid Blog

Membuat Widget Latest Update Untuk Blogger

2015-08-09T19:50:00.002+07:00

Latest Update adalah widget yang menampilkan daftar artikel yang terakhir diperbaharui/last update. Widget ini juga berguna memperlihatkan pengunjung untuk memantau artikel mana saja yang sudah diperbaharui.

Menampilakan data - data artikel terkahir diperbaharui atau telah mengalami perbaharuan, jadi nantinya widget ini akan disortir berdasarkan artikel yang terbaru diperbaharui oleh admin blog.

Berikut tutorial Membuat Widget Latest Update Untuk Blogger.

1. Login ke akun Blogger.
2. Masuk ke Dashboard, Template > Edit HTML.
3. Tambahkan CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>.

/*Latest Updated*/
li.update {list-style: none;height:auto;overflow:hidden}
li.update a{font-family:'Oswald',sans-serif;font-size:16px;font-weight:normal;margin:0;}
li.update a:hover{color:#859ce6}
.imgupdate{float:left; margin:0 10px 10px 0}
.imgupdate:hover{opacity:0.7}
.tgl-com {display:block;font-size:16px;margin-top:5px;font-size:16px}

4. Setelah itu Salin dan Letakkan Kode dibawah ini tepat diatas kode </body>.

<script type='text/javascript'>
//<![CDATA[
//Terakhir Diperbaharui by mursaidblog.blogspot.com
function updatedPosts(a){if(document.getElementById("updated-posts")){var e=a.feed.entry,title,img,link,date,content="",o=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"],ct=document.getElementById("updated-posts");for(var i=0;i<5;i++){for(var j=0;j<5;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t,pd=e[i].published.$t.substring(0,10).split("-");if("media$thumbnail"in e[i]){img=e[i].media$thumbnail.url}else{img="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6SVTgfA5XFyQfXuuXBx201Hpkwr8g892sNbN7XxyLac3gKWB95pb7n5YcsYr-mdlDxvLx-_hEWyShf08_PYSuUlF_Nwqwhyphenhyphen8R2n9U5uns6Ex8lx9le3qU1B10PKlkqGEKOQ82gSW3jNfH/s70-c/KM+Icon.png"}content+='<li class="update"><a href="'+link+'" target="_blank" title="'+title+'"><img src="'+img.replace(/\/s72-c/,"/s70-c")+'" class="imgupdate" alt="'+link+'" height="70px" width="70px"/></a>';content+='<strong><a href="'+link+'" target="_blank" title="'+title+'">'+title+'</a></strong><span class="tgl-com" datetime="'+pd.join("-")+'">  '+(pd[2]+" "+o[(parseInt(pd[1],10)-1)]+" "+pd[0])+'</span></li>'}ct.innerHTML=content}}function getScript(url){var s=document.createElement("script");s.type="text/javascript";s.src=url;document.body.appendChild(s)}getScript("http://bedholrohman.blogspot.com/feeds/posts/summary?alt=json-in-script&orderby=updated&max-results=5&callback=updatedPosts");
//]]>
</script>

5. Simpan, lalu masuk ke Tata Letak > Tambah Gadget (HTML/JavaScript).

<ul id="updated-posts"></ul>

6. Masukkan kode dibawah ini.
7. Simpan dan lihat hasilnya.

Keterangan :
- Ganti mursaidblog.blogspot.com dengan link blog anda.

CermatSEO Responsive Blogger Template

2015-04-26T19:56:00.001+07:00

~~LIVE DEMO~~ || DOWNLOAD

FITURE TEMPLATE CermatSEO

100% Responsive
Valid HTML5 ( All Page )
Valid CSS3 ( All Page )
SEO Friendly
Fast Loading
Share Button
Page Navigation
Full Title Tag
Adsense ready
Dropdown Menu
Related Post
Recent Post by Tag
Navigation Menu With Social Icon
And many more.

PENGATURAN TEMPLATE CermatSEO

Anda harus mengatur template ini agar template ini bekerja dengan maksimal. Berikut, beberapa hal yang perlu anda edit agar template ini bekerja dengan maksimal.

1. Ganti ID dan NAMA

Silahkan anda cari kode dibawah ini pada template CermatSEO dan anda ganti sesuai dengan intruksi.

<meta content='ID Google Webmaster Verfikasi' name='google-site-verification'/>
<meta content='ID Bing Verification' name='msvalidate.01'/>
<meta content='ID Alexa Verification' name='alexaVerifyID'/>
<link href='https://plus.google.com/ID Google Plus/posts' rel='publisher'/>
<link href='https://plus.google.com/ID Google Plus/about' rel='author'/>
<link href='https://plus.google.com/ID Google Plus' rel='me'/>
<meta content='Nama Author' name='Author'/>
<meta content='ID Facebook Anda' property='fb:admins'/>

2. Meta TAG
Sebelum memasang Meta Tag pastikan dulu anda sudah mengaktifkan Meta Tag pada Setelan.

Masuk ke akun Blogger.
Masuk ke Dashboard, Pilih Setelan.
Pilih Preferensi Penelusuran.
Kemudian pilih Meta Tag > Ya, lalu isikan Deskripsi tentang blog anda.
Simpan.

3. non-Aktifkan Pengaturan Mobile

Agar template ini responsive anda hanya perlu menon-aktfikan pengaturan mobile, berikut tutorial untuk menon-aktifkan pengaturan mobile.

Masuk ke akun Blogger.
Masuk ke Dashboard, Pilih Template dan klik Icon Gerigi pada Seluler.
Pilih Tidak.
Simpan.

4. Navigasi Menu dan Social Icon

Cari kode dibawah ini dan edit sesuai dengan intruksi yang saya berikan.

<!-- navigation menu with social icon start -->
<nav class='menus'>
<ul class='nav-menus'>
<li><a href='#' title='About'>About</a></li>
<li><a href='#' title='Contact Us'>Contact Us</a></li>
<li><a href='#' title='Privacy Policy'>Privacy Policy</a></li>
<li><a href='#' title='Disclaimer'>Disclaimer</a></li>
</ul>
<!-- social icon list start -->
<div id='social-list'>
<ul class='socmed'>
<li><a class='facebook' href='#' title='Facebook'>Facebook</a></li>
<li><a class='twitter' href='#' title='Twitter'>Twitter</a></li>
<li><a class='plus' href='#' title='Google Plus'>Google Plus</a></li>
<li><a class='pinterest' href='#' title='Linkedin'>Linkedin</a></li>
<li><a class='linkedin' href='#' title='Pinterest'>Pinterest</a></li>
<li><a class='youtube' href='#' title='YouTube'>YouTube</a></li>
<li><a class='rss' href='#' title='RSS Feed'>RSS</a></li>
</ul>
</div>
<!-- social icon list end -->
</nav>
<!-- navigation menu with social icon end -->

5. Dropdown Menu
Cari kode dibawah ini dan edit sesuai dengan intruksi yang saya berikan.

<ul class='nav nav_menu'>
<li><a class='active' href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='/p/about.html'>Static Page</a></li>
<li><a href='#'>With Sub Menu</a>
<ul>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
</ul>

6. Memasang Recent Post by Tag
Pasang widget ini jika anda ingin memasangnya, dan untuk penjelasannya anda akan diberikan intruksi didalam .Rar jika anda sudah mendownload Template ini.

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Sukses?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

7. Validasi HTML5 Widget
Silahkan anda cari kode <b:include name='quickedit'/> pada template CermatSEO dan hapus agar blog anda Validasi HTML5 dan SEO. Kode ini muncul jika anda menambahkan gadget diblog.

[X]WARNING Dilarang keras menghapus Credit Pembuat dan Pendesign Template ini.

Memasang Auto Lightbox Image pada Postingan Blog

2015-02-22T12:06:00.002+07:00

Auto Lightbox ini berfungsi untuk membuat gambar didalam postingan blog jika diklik akan muncul tanda close. Auto Lightbox ini dibuat oleh Rian Nurherdian a.k.aKang Rian yang dibuat untuk mempermudah pengunjung untuk melihat photo tanpa membuka tab baru secara otomatis. Lightbox Image bersifat Responsive (Disaat gambar diklik akan muncul tanda close, gambar yang besar akan menyesuaikan ukurannya sendiri mengikuti Layar!), untuk demo silahkan klik gambar dibawah ini.

Klik Gambar untuk melihat DEMO

Berikut ini adalah cara untuk memasangnya

1. Login ke akun Blogger.

2. Masuk ke Dashboard, Template > Edit HTML.

3. Cari kode </head> dan paste kode dibawah ini tepat diatas kode </head>.

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

4. Jika sudah, pasang CSS dengan meletakan kode dibawah ini tepat diatas kode ]]></b:skin>.

/* AUTO LIGHTBOX IMAGE BLOGGER POST by KangRian.com
=================================================== */
.lighter,.lighter *{-webkit-transition:all 0.4s ease-in-out;-moz-transition:all 0.4s ease-in-out;transition:all 0.4s ease-in-out}
.lighter{position:fixed;top:0;bottom:0;left:0;right:0;z-index:400000;opacity:1}
.lighter.fade{opacity:0}
.lighter.fade .lighter-container{-webkit-transform:scale(0.5);-moz-transform:scale(0.5);-ms-transform:scale(0.5);-o-transform:scale(0.5);transform:scale(0.5)}
.lighter img{width:100%;height:100%}
.lighter .lighter-overlay{background:rgba(0,0,0,0.5);height:100%;width:100%}
.lighter .lighter-container{background:white;position:absolute;z-index:400000;top:50%;left:50%;right:50%;bottom:50%;box-shadow:0 2px 8px rgba(0,0,0,0.5)}
.lighter .lighter-container .lighter-close{top: 0;right: 0;width: 30px;height: 30px;margin: -15px;line-height: 30px;font-size: 16pt;font-family: Helvetica,Arial,serif;}
.lighter .lighter-container .lighter-next{display:none;right:40px;top:50%;width:40px;height:40px;margin:-20px 0;line-height:34px;font-size:32pt;font-family:Times,serif}
.lighter .lighter-container .lighter-prev{display:none;left:40px;top:50%;width:40px;height:40px;margin:-20px;line-height:24pt;font-size:34px;font-family:Times,serif}
.lighter .lighter-container .lighter-next,.lighter .lighter-container .lighter-prev,.lighter .lighter-container .lighter-close{cursor:pointer;position:absolute;z-index:800000;text-align:center;border-radius:40px;color:rgba(255,255,255,0.8);background:rgba(0,0,0,0.2);}
.lighter .lighter-container .lighter-next:hover,.lighter .lighter-container .lighter-prev:hover,.lighter .lighter-container .lighter-close:hover{color:white;text-decoration: none;background:rgba(0,0,0,0.6)}
.lighter .lighter-container .lighter-next:active,.lighter .lighter-container .lighter-prev:active,.lighter .lighter-container .lighter-close:active{color:white;background:rgba(0,0,0,0.6)}
/* ===================================================
END AUTO LIGHTBOX IMAGE BLOGGER POST by KangRian.com */

5. Kemudian letakkan kembali kode dibawah ini tepat diatas kode </body>.

<script>
// tambahan code Javascript agar Auto Lightbox pada area .entry-content
$(&quot;.entry-content img&quot;).parents(&quot;a&quot;).on(&quot;click&quot;,function(a){a.preventDefault();a.stopPropagation();return $(this).lighter()});

// jQuery Lighter Plugin
(function(){var g,h,e,f=function(b,a){return function(){return b.apply(a,arguments)}};g=jQuery;h=(function(){function a(){}a.transitions={webkitTransition:&quot;webkitTransitionEnd&quot;,mozTransition:&quot;mozTransitionEnd&quot;,oTransition:&quot;oTransitionEnd&quot;,transition:&quot;transitionend&quot;};a.transition=function(k){var c,l,d,b;c=k[0];b=this.transitions;for(d in b){l=b[d];if(c.style[d]!=null){return l}}};a.execute=function(d,b){var c;c=this.transition(d);if(c!=null){return d.one(c,b)}else{return b()}};return a})();e=(function(){a.settings={padding:40,dimensions:{width:960,height:540},template:&quot;<div class='lighter fade'>\n  <div class='lighter-container'>\n    <span class='lighter-content'/>\n    <a class='lighter-close'>&#215;</a>\n    <a class='lighter-prev'>&#8249;</a>\n    <a class='lighter-next'>&#8250;</a>\n  </div>\n  <div class='lighter-overlay'/>\n</div>&quot;};a.lighter=function(c,d){var b;if(d==null){d={}}b=c.data(&quot;_lighter&quot;);if(!b){b=new a(c,d);c.data(&quot;_lighter&quot;,b)}return b};a.prototype.$=function(b){return this.$lighter.find(b)};function a(c,b){if(b==null){b={}}this.show=f(this.show,this);this.hide=f(this.hide,this);this.toggle=f(this.toggle,this);this.keyup=f(this.keyup,this);this.align=f(this.align,this);this.resize=f(this.resize,this);this.process=f(this.process,this);this.href=f(this.href,this);this.type=f(this.type,this);this.image=f(this.image,this);this.prev=f(this.prev,this);this.next=f(this.next,this);this.close=f(this.close,this);this.$=f(this.$,this);this.$el=c;if((this.$el.data(&quot;width&quot;)!=null)&amp;&amp;(this.$el.data(&quot;height&quot;)!=null)){if(b.dimensions==null){b.dimensions={width:this.$el.data(&quot;width&quot;),height:this.$el.data(&quot;height&quot;)}}}this.settings=g.extend({},a.settings,b);this.$lighter=g(this.settings.template);this.$overlay=this.$(&quot;.lighter-overlay&quot;);this.$content=this.$(&quot;.lighter-content&quot;);this.$container=this.$(&quot;.lighter-container&quot;);this.$close=this.$(&quot;.lighter-close&quot;);this.$prev=this.$(&quot;.lighter-prev&quot;);this.$next=this.$(&quot;.lighter-next&quot;);this.$body=this.$(&quot;.lighter-body&quot;);this.width=this.settings.dimensions.width;this.height=this.settings.dimensions.height;this.align();this.process()}a.prototype.close=function(b){if(b!=null){b.preventDefault()}if(b!=null){b.stopPropagation()}return this.hide()};a.prototype.next=function(b){if(b!=null){b.preventDefault()}return b!=null?b.stopPropagation():void 0};a.prototype.prev=function(){if(typeof event!==&quot;undefined&quot;&amp;&amp;event!==null){event.preventDefault()}return typeof event!==&quot;undefined&quot;&amp;&amp;event!==null?event.stopPropagation():void 0};a.prototype.image=function(b){return b.match(/\.(jpeg|jpg|jpe|gif|png|bmp)$/i)};a.prototype.type=function(b){if(b==null){b=this.href()}return this.settings.type||(this.image(b)?&quot;image&quot;:void 0)};a.prototype.href=function(){return this.$el.attr(&quot;href&quot;)};a.prototype.process=function(){var j,c,d,b=this;d=this.type(j=this.href());this.$content.html((function(){switch(d){case&quot;image&quot;:return g(&quot;<img/>&quot;).attr({src:j});default:return g(j)}})());switch(d){case&quot;image&quot;:c=new Image();c.src=j;return c.onload=function(){return b.resize(c.width,c.height)}}};a.prototype.resize=function(b,c){this.width=b;this.height=c;return this.align()};a.prototype.align=function(){var d,b,c;b=Math.max((d=this.height)/(g(window).height()-this.settings.padding),(c=this.width)/(g(window).width()-this.settings.padding));if(b&gt;1){d=Math.round(d/b)}if(b&gt;1){c=Math.round(c/b)}return this.$container.css({height:d,width:c,margin:&quot;-&quot;+(d/2)+&quot;px -&quot;+(c/2)+&quot;px&quot;})};a.prototype.keyup=function(b){if(b.target.form!=null){return}if(b.which===27){this.close()}if(b.which===37){this.prev()}if(b.which===39){return this.next()}};a.prototype.toggle=function(b){if(b==null){b=&quot;on&quot;}g(window)[b](&quot;resize&quot;,this.align);g(document)[b](&quot;keyup&quot;,this.keyup);this.$overlay[b](&quot;click&quot;,this.close);this.$close[b](&quot;click&quot;,this.close);this.$next[b](&quot;click&quot;,this.next);return this.$prev[b](&quot;click&quot;,this.prev)};a.prototype.hide=function(){var d,b,c=this;d=function(){return c.toggle(&quot;off&quot;)};b=function(){return c.$lighter.remove()};d();this.$lighter.removeClass(&quot;fade&quot;);this.$lighter.position();this.$lighter.addClass(&quot;fade&quot;);return h.execute(this.$container,b)};a.prototype.show=function(){var d,b,c=this;b=function(){return c.toggle(&quot;on&quot;)};d=function(){return g(document.body).append(c.$lighter)};d();this.$lighter.addClass(&quot;fade&quot;);this.$lighter.position();this.$lighter.removeClass(&quot;fade&quot;);return h.execute(this.$container,b)};return a})();g.fn.extend({lighter:function(a){if(a==null){a={}}return this.each(function(){var b,c,d;b=g(this);d=g.extend({},g.fn.lighter.defaults,typeof a===&quot;object&quot;&amp;&amp;a);c=typeof a===&quot;string&quot;?a:a.action;if(c==null){c=&quot;show&quot;}return e.lighter(b,d)[c]()})}})}).call(this);
</script>

6. Simpan. Selesai deh, tinggal dicek dengan menekkan gambar yang ada didalam postingan blog.

Selamat, sekarang gambar pada postingan blog anda tidak lagi menggunakan Tab Baru dan Auto Lightbox ini tidak akan menambahkan beban untuk blog anda. sumber: Bedhol Rohman

Membuat Widget Recent Post untuk Blog

2015-02-19T21:49:00.002+07:00

Widget Recent Posts adalah widget yang berisi artikel terbaru dari sebuah blog. Widget ini bisa Anda jadikan untuk memberitahukan kepada pengunjung artikel terbaru dari blog Anda. Widget ini lebih simpel karena hanya menampilkan judul artikel saja, jadi tidak berat terhadap blog.

CARA MEMASANG WIDGET RECENT POST UNTUK BLOG

Silakan salin dan simpan kode dibawah ini pada widget blog Anda, pada HTML/JavaScript

<ul id="recent-posts"></ul>
<script>
//<![CDATA[
var homePage = "http://kang-mousir.blogspot.com/",
numPosts = 5;
function recentPosts(a){if(document.getElementById("recent-posts")){var e=a.feed.entry,title,link,content="",ct=document.getElementById("recent-posts");for(var i=0;i<numPosts;i++){for(var j=0;j<numPosts;j++){if(e[i].link[j].rel=="alternate"){link=e[i].link[j].href;break}}var title=e[i].title.$t;content+='<li class="recent-posts"><strong><a href="'+link+'" title="'+title+'" target="_blank">'+title+'</a></strong></li>'}ct.innerHTML=content}}var rcp=document.createElement('script');rcp.src=homePage+'/feeds/posts/summary?alt=json-in-script&orderby=published&max-results='+numPosts+'&callback=recentPosts';document.getElementsByTagName('head')[0].appendChild(rcp);
//]]>
</script>

Demo

Ubah http://kang-mousir.blogspot.com/ dengan link blog anda.

Ubah 5; dengan total berapa artikel yang ingin anda tampilkan.

sumber: Kang-Mousir

Cara Membuat Populer Post Warna-Warni

2015-02-18T21:01:00.000+07:00

Populer Post adalah suatu widget yang menampilkan artikel yang paling populer atau yang paling banyak dilihat oleh pengunjung, jadi saya menyarankan anda untuk merubah warna widget Entri Populer atau Populer Post menjadi menarik karena ada ber-aneka warna. Widget ini juga perlu dipasang diblog anda untuk tetap dilihat oleh banyak orang.

CARA MEMBUAT POPULER POST WARNA WARNI

1. Login ke akun Blogger anda.

2. Masuk ke Dashboard, Template >> Edit HTML.

3. Cari kode ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode ]]></b:skin>.

/*Widget*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin:0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.5em .5em .5em!important;counter-increment:num;position:relative}.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#fff!important}.PopularPosts a:hover{color:#222!important}.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}.PopularPosts ul li:nth-child(1)
{background-color:#f1c40f}.PopularPosts ul li:nth-child(2)
{background-color:#f39c12}.PopularPosts ul li:nth-child(3)
{background-color:#2ecc71}.PopularPosts ul li:nth-child(4)
{background-color:#27ae60}.PopularPosts ul li:nth-child(5)
{background-color:#e67e22}.PopularPosts ul li:nth-child(6)
{background-color:#d35400}.PopularPosts ul li:nth-child(7)
{background-color:#3498db}.PopularPosts ul li:nth-child(8)
{background-color:#2980b9}.PopularPosts ul li:nth-child(9)
{background-color:#ea6153}.PopularPosts ul li:nth-child(10)
{background-color:#c0392b}.cloud-label-widget-content{text-align:left}.label-size{display:block;background:#fff;float:left;margin:0 2px 2px 0;color:#000!important;border:1px solid #ccc;padding:5px}.label-size:hover{border:1px solid #000;color:#000!important}.label-size a:hover{color:#000!important}

4. Simpan.

CARA MEMASANG WIDGET POPULER POST

1. Login ke akun Blogger anda.

2. Masuk ke Dashboard, Tata Letak.

3. Klik Tambah Gadget.

4. Pilih Entri Populer.

5. Lihat yang dikotak merahin, kemudian klik simpan.

Itulah Cara Membuat Populer Post Warna-Warni terimakasih sudah membaca dan mengunjungi blog saya yang satu ini, selamat malam.

Cara Membuat Related Post Dengan Gambar di Blog

2015-02-16T17:02:00.001+07:00

Related Post ini merupakan salah satu widget yang dapat disebut dengan artikel terkait atau postingan terkait. Gunannya widget ini adalah untuk memberitahukan pengunjung artikel - artikel yang ada kaitannya dengan artikel yang dibaca, related post ini hanya menampilkan artikel yang kategori atau label yang sama atau sesuai dengan artikel yang dibaca pengunjung.

Cara Membuat Related Post Dengan Gambar

1. Login ke akun blogger anda.

2. Masuk ke Dashboard, Template >> Edit HTML.

3. Cari kode ]]></b:skin>, kemudian copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin>.

/* ==== Related Post Widget Start ==== */
.related-post {margin:0;padding:0}
.related-post h4{margin:0 0 .5em;font-size:160%;}
.related-post-style-2,
.related-post-style-2 li {margin:0;padding:0;list-style:none;}
.related-post-style-2 li {padding:10px;border-bottom:1px solid #eee;overflow:hidden;}
.related-post-style-2 li:last-child {border-bottom:none}
.related-post-style-2 .related-post-item-thumbnail {width:70px;height:70px;max-width:none;max-height:none;backgroundcolor:transparent;border:none;padding:0;float:left;margin:2px 8px 0 0;}
.related-post-style-2 .related-post-item-title {font-family:'Oswald',sans-serif;font-size:17px;}
.related-post-style-2 .related-post-item-summary {display:block;overflow:hidden}
.related-post-style-2 .related-post-item-more {}
/* ==== Related Post Widget End ==== */

4. Lalu cari lagi kode </article>, kemudian letakkan kode berikut ini tepat dibawah kode </article>.

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='related-post' id='related-post'/>
  <script type='text/javascript'>
  var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
          &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
      </b:loop></b:if>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Artikel Terkait :&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 130,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 70,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script>
  <script src='http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js' type='text/javascript'/>
</b:if>
<!-- Related Post Widget End -->

5. Klik simpan, lihat hasilnya dipostingan blog anda.

Itulah Cara Membuat Related Post Dengan Gambar di Blog anda juga bisa memasangnya tanpa ganbar dan text, tapi tunggu diartikel selanjutnya ya.

Template Blogger Responsive MursaidSEO

2015-02-14T22:10:00.002+07:00

Screenshot Tampilan Template MursaidSEO

Screenshot Tata Letak Template MursaidSEO

DEMO || DOWNLOAD

Template MursaidSEO ini adalah template yang saya edit atau perbaharui dari template yang saya pakai sebelumnya yaitu Template SangSEO, template ini buatan Kang Mousir & pastinya template ini memiliki pengaturan yang sama dengan Template SangSEO. Template ini juga cocok untuk Adsense, Responsive, dan yang lebih penting SEO.

1. Ganti ID dan Nama

Silahkan anda cari kode ini pada template SangSEO dan anda ganti sesuai dengan intruksi yang ada.

<meta content='ID Google Webmaster Verfikasi' name='google-site-verification'/>
<meta content='ID Bing Verification' name='msvalidate.01'/>
<meta content='ID Alexa Verification' name='alexaVerifyID'/>
<link href='https://plus.google.com/ID Google Plus/posts' rel='publisher'/>
<link href='https://plus.google.com/ID Google Plus/about' rel='author'/>
<link href='https://plus.google.com/ID Google Plus' rel='me'/>
<meta content='Nama Author' name='Author'/>
<meta content='ID Facebook Anda' property='fb:admins'/>

Perhatikan kode yang Saya tandai, silahkan anda ganti.

2. Meta Tag
Sebelum memasang Meta Tag pastikan anda sudah mengaktifkan Meta Tag pada Setelan.

Masuk ke Blogger dan pilih Setelan.
Pilih Preferensi Penulusuran.
Kemudian pilih Meta Tag > Deskripsi.
Silahkan anda isi Deskripsi blog yang anda inginkan.
Simpan.

3. non-Aktifkan Pengaturan Mobile

Agar template ini Responsive, anda harus non-Aktifkan Pengaturan Mobile pada Template.

Masuk ke Blogger dan pilih Template.
Klik Icon Gerigi pada Seluler.
Pilih Tidak, Tampilkan template seluler diperangkat seluler.
Simpan.

4. Navigasi Menu dan Social Icon

Silahkan anda cari kode ini pada Template SangSEO dan edit sesuai intruksi yang ada.

<nav class='menus'>
<ul class='nav-menus'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
<div id='social-list'>
<ul class='socmed'>
<li><a class='facebook' href='Link Facebook' title='Facebook'>Facebook</a></li>
<li><a class='twitter' href='Link Twitter' title='Twitter'>Twitter</a></li>
<li><a class='plus' href='Link Google Plus' title='Google Plus'>Google Plus</a></li>
<li><a class='linkedin' href='Link Linkedin' title='Linkedin'>Linkedin</a></li>
<li><a class='pinterest' href='Link Pinterest' title='Pinterest'>Pinterest</a></li>
<li><a class='youtube' href='Link YouTube' title='YouTube'>YouTube</a></li>
<li><a class='rss' href='Link RSS Feed' title='RSS Feed'>RSS</a></li>
</ul>
</div>
</nav>

Perhatikan kode yang sudah Saya tandai, silahkan anda ganti.

5. Dropdown Menu
Silahkan anda cari kode ini pada Template SangSEO dan edit link sesuai keinginan anda.

<a href='#' id='mobilenav'>Select Menu</a>
<ul class='menu' id='menunav'>
<li><a class='home' href='/'>Home</a></li>
<li><a href='http://mursaidblog.blogspot.com/search/label/Belajar SEO'>Belajar SEO</a></li>
<li><a href='http://mursaidblog.blogspot.com/search/label/Tutorial Blogger'>Tutorial Blogger</a></li>
<li><a href='http://mursaidblog.blogspot.com/search/label/Internet'>Internet</a></li>
<li><a href='http://mursaidblog.blogspot.com/search/label/Social Media'>Social Media</a></li>
<li><a href='http://mursaidblog.blogspot.com/search/label/Template Blogger'>Template Blogger</a></li>
<li><a href='#'>Tools</a>
<ul>
<li><a href='http://mursaidblog.blogspot.com/p/parse-kode-html.html'>Parse Kode HTML</a></li>
<li><a href='http://mursaidblog.blogspot.com/p/kode-warna-html.html'>Kode Warna</a></li>
<li><a href='http://responsive-checker-tool.blogspot.com/' target='_blank'>Cek Responsive</a></li>
  </ul>
</li>
</ul>

6. Memasang Recent Post by Tag
Jika anda ingin memasang widget ini, anda harus memasukan kode HTML dibawah ini.

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Sukses?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

KETERANGAN

- Ubah angka 5 untuk mengubah berapa post yang ingin anda tampilkan.

- Ubah var showpostthumbnails = true; menjadi var showpostthumbnails = false; untuk menonaktifkan tampilan gambarnya.

- Ubah var showpostdate = true; menjadi var showpostdate = false; untuk menonaktifkan tampilan tanggalnya.

- Ubah Sukses dengan label apa yang anda ingin tampilkan.

7. Validasi HTML5 Widget

Silakan cari kode <b:include name='quickedit'/> pada template dan hapus agar blog Anda valid HTML5 dan SEO. Kode itu akan muncul ketika menambahkan widget/gadet baru.

8. Memasang Ads di Dalam Postingan & Latest Update
Silahkan anda baca tutorialnya dipost saya sebelumnya yaitu Cara Memasang Iklan di Dalam Postingan Blog dan untuk memasang Widget Latest Update silahkan baca Disini!.

[X] WARNING!!
Dilarang menghapus Credit/Footer pembuat template blog ini.

Itulah Pengaturan untuk blog ini, agar widget dan blog bekerja dengan sempurna, jika anda ingin mengetahui artikel selanjutnya pastikan anda sudah berlangganan untuk blog ini.

Template Blogger Responsive SangSEO

2015-02-13T14:27:00.000+07:00

DEMO || DOWNLOAD

Kali ini saya akan share Template Blogger Responsive SangSEO template ini cocok untuk adsense dan juga responsive, dan yang penting template ini juga SEO. Template ini dibuat oleh KangMousir saya juga sudah memakainya diblog MursaidBlog, coba cek kualitas seo blog ini dibawah.

Kualitas seo blog ini bisa cek di CHKME.Com

Saya telah memakai Template SangSEO baru-baru ini, saya merasakan ada yang berbeda pada blog saya saat memakai template ini, contohnya: menjadi banyak pengunjung, alexa rank turun dengan cepat, dan banyak lagi yang tidak saya bisa jelaskan.

Fitur Template

100% Responsive
Valid HTML5 ( All Page )
Valid CSS3 ( All Page )
Valid Author Rich Snippet
SEO Friendly
User Friendly
Fast Loading
Webmaster Structured Data
Clean Design
HCard Author and Update ( Home Page, Post Page and Satic Page )
Auto Readmore
Breadcrumbs
Related Posts
Cool Threaded Comment
Share Button
Page Navigation
Custom Error Page
Custom Deleted Comment
Custom Navigation In Post Page
Custom Popular Post
Custom Label
Full Title Tag
Ads Ready
Dropdown Menu - new
Search button - new
Back Top Top Button - new
Recent Post By Tag - new
Navigation Menu With Social Icon - new
And more.

PENGATURAN

Setelah anda memakai template blog ini, ada beberapa yang perlu anda edit. Contohnya sebagai berikut:

1. Ganti ID dan Nama

Silahkan anda cari kode ini pada template SangSEO dan anda ganti sesuai dengan intruksi yang ada.

<meta content='ID Google Webmaster Verfikasi' name='google-site-verification'/>
<meta content='ID Bing Verification' name='msvalidate.01'/>
<meta content='ID Alexa Verification' name='alexaVerifyID'/>
<link href='https://plus.google.com/ID Google Plus/posts' rel='publisher'/>
<link href='https://plus.google.com/ID Google Plus/about' rel='author'/>
<link href='https://plus.google.com/ID Google Plus' rel='me'/>
<meta content='Nama Author' name='Author'/>
<meta content='ID Facebook Anda' property='fb:admins'/>

Perhatikan kode yang Saya tandai, silahkan anda ganti.

2. Meta Tag
Sebelum memasang Meta Tag pastikan anda sudah mengaktifkan Meta Tag pada Setelan.

Masuk ke Blogger dan pilih Setelan.
Pilih Preferensi Penulusuran.
Kemudian pilih Meta Tag > Deskripsi.
Silahkan anda isi Deskripsi blog yang anda inginkan.
Simpan.

3. non-Aktifkan Pengaturan Mobile

Agar template ini Responsive, anda harus non-Aktifkan Pengaturan Mobile pada Template.

Masuk ke Blogger dan pilih Template.
Klik Icon Gerigi pada Seluler.
Pilih Tidak, Tampilkan template seluler diperangkat seluler.
Simpan.

4. Navigasi Menu dan Social Icon

Silahkan anda cari kode ini pada Template SangSEO dan edit sesuai intruksi yang ada.

<nav class='menus'>
<ul class='nav-menus'>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact Us</a></li>
<li><a href='#'>Privacy Policy</a></li>
<li><a href='#'>Disclaimer</a></li>
</ul>
<div id='social-list'>
<ul class='socmed'>
<li><a class='facebook' href='Link Facebook' title='Facebook'>Facebook</a></li>
<li><a class='twitter' href='Link Twitter' title='Twitter'>Twitter</a></li>
<li><a class='plus' href='Link Google Plus' title='Google Plus'>Google Plus</a></li>
<li><a class='linkedin' href='Link Linkedin' title='Linkedin'>Linkedin</a></li>
<li><a class='pinterest' href='Link Pinterest' title='Pinterest'>Pinterest</a></li>
<li><a class='youtube' href='Link YouTube' title='YouTube'>YouTube</a></li>
<li><a class='rss' href='Link RSS Feed' title='RSS Feed'>RSS</a></li>
</ul>
</div>
</nav>

Perhatikan kode yang sudah Saya tandai, silahkan anda ganti.

5. Dropdown Menu
Silahkan anda cari kode ini pada Template SangSEO dan edit link sesuai keinginan anda.

<a href='#' id='mobilenav'>Select Menu</a>
<ul class='menu' id='menunav'>
<li><a class='home' href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='/p/about.html'>Static Page</a></li>
<li><a href='#'>With Sub Menu</a>
<ul>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Sub Menu</a>
<ul>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
<li><a href='#'>Sub Menu</a></li>
<li><a href='#'>Sub Menu</a></li>
</ul>
</li>
  <li><a href='/error.html'>Error 404</a></li>
</ul>

6. Memasang Recent Post by Tag
Jika anda ingin memasang widget ini, anda harus memasukan kode HTML dibawah ini.

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = true;</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Sukses?orderby=updated&amp;alt=json-in-script&amp;callback=rcentbytag"></script>

KETERANGAN

- Ubah angka 5 untuk mengubah berapa post yang ingin anda tampilkan.

- Ubah var showpostthumbnails = true; menjadi var showpostthumbnails = false; untuk menonaktifkan tampilan gambarnya.

- Ubah var showpostdate = true; menjadi var showpostdate = false; untuk menonaktifkan tampilan tanggalnya.

- Ubah Sukses dengan label apa yang anda ingin tampilkan.

7. Validasi HTML5 Widget

Silakan cari kode <b:include name='quickedit'/> pada template dan hapus agar blog Anda valid HTML5 dan SEO. Kode itu akan muncul ketika menambahkan widget/gadet baru.

[X] WARNING!!

DILARANG KERAS MENGHAPUS KREDIT PEMBUAT TEMPLATE INI.

Itulah Pengaturan Template SangSEO agar fiture pada template ini benar-benar bekerja dengan sempurna.

Cara Membuat Widget Media Social di Blog

2015-02-11T14:24:00.001+07:00

Widget Media Social adalah widget yang berisi tombol - tombol untuk mengikuti, memfollow, mengelike, bahkan hinggal profile kita bisa ditambahkan dalam widget ini. Contohnya seperti Facebook, Twitter, Google Plus dan Blogger. Widget ini diperlukan pengunjung agar dapat berkomunikasi dengan kita lewat media social dan juga agar tidak berkomunikasi dengan kita lewat blog saja.

Contoh widget media social

Cara Membuat Widget Media Social di Blog

1. Login dan masuk ke blogger anda masing-masing.
2. Masuk ke Template >> Edit HTML.

3. Simpan kode dibawah ini tepat diatas kode </body>.

<script type="text/javascript">
//<![CDATA[
(function(){var fb1=document.createElement('script');fb1.type='text/javascript';fb1.async=true;fb1.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var fb2=document.getElementsByTagName('script')[0];fb2.parentNode.insertBefore(fb1,fb2)})();(function(){var tw1=document.createElement('script');tw1.type='text/javascript';tw1.async=true;tw1.src='http://platform.twitter.com/widgets.js';var tw2=document.getElementsByTagName('script')[0];tw2.parentNode.insertBefore(tw1,tw2)})();(function(){var gp1=document.createElement('script');gp1.type='text/javascript';gp1.async=true;gp1.src='https://apis.google.com/js/plusone.js';var gp2=document.getElementsByTagName('script')[0];gp2.parentNode.insertBefore(gp1,gp2)})();
//]]>
</script>

4. Lalu masuk ke Tata Letak >> Tambah Gadget >> HTML/JavaScript, dan paste kode dibawah ini dikolom yang sudah disediakan.


<div style="background:#7677BF;font-weight:bold;font-size:150%;text-align:center;padding:10px 0;">
<a href="http://www.blogger.com/follow-blog.g?blogID=4010151311182430951" target="_blank" title="Follow this blog"><span style="color:#fff">Join</span> <span style="color:#fff">Now</span></a>
</div>
<div style='background:#fff;margin:0;border:1px solid #ccc;border-bottom:none;border-top:none'>
<div style='background:#fff;margin:0;'>
<div class="fb-like-box" data-href="https://www.facebook.com/1604815239738911" data-colorscheme="light" data-show-faces="false" data-header="true" data-stream="false" data-show-border="false"></div></div>
<div style="background:#fff; border-top:1px solid #ccc;margin:0; padding:5px 0 5px 40px"><a href="https://twitter.com/MursaidBlog" class="twitter-follow-button" data-show-count="true" data-show-screen-name='false' data-lang="id">Ikuti @MursaidBlog</a><div class="g-plusone" data-size="medium" data-count="true" data-width="100" data-href="http://mursaidblog.blogspot.com"></div></div></div>
<div class="g-person" data-href="//plus.google.com/109679809811966845730" data-layout="landscape" data-rel="author"></div>

5. Simpan, dan lihat hasilnya diblog Anda.

KETERANGAN :
- Ganti 4010151311182430951 dengan ID Blog anda.
- Ganti 1604815239738911 dengan ID Fanspage/Halaman anda.
- Ganti 109679809811966845730 dengan ID Google+ Plus anda.
- Ganti MursaidBlog dengan ID Twitter anda.
- Ganti http://mursaidblog.blogspot.com dengan Link Blog anda.

Itulah bagaimana Cara Membuat Widget Media Social di Blog jika warna kurang menyatu dengan blog anda, silahkan bekreasi sendiri dengan mengganti kode warna sesuai keinginan anda. Sumber

Free Download Template Blog Mirip Bagas31.Com

2015-02-10T16:06:00.000+07:00

Template adalah tampilan blog atau website. Pada hari ini saya ingin berbagi kepada anda, saya akan membagikan template blog mirip Bagas31.Com untuk yang sudah memasang template ini diblog pastikan tidak menghapus link atau credit yang ada difooter/bawah. Jika gambar kurang jelas silahkan klik atau kunjungi demonya, silahkan tekan download untuk download template ini.

DEMO || DOWNLOAD

Keterangan :

- Untuk Layout/Tata Letak yang error Baca Cara Memperbaiki Layout yang Error.

- Anda harus melihat dan memperbaiki sendiri.

Cara Memasang Widget Alexa Rank di Blog

2015-02-08T09:28:00.002+07:00

MursaidBlog - Anda harus mengenal dan memahami apa itu alexa dengan membaca artikel sebelumnya yaitu " Mengenal dan Memahami, Apa Itu Alexa ? ". Kali ini saya akan memberikan Widget Alexa Rank dan Cara Memasang Widgetnya, widget juga dapat memperkecil alexa rank blog atau website kita. Berikut ini adalah Cara Memasang Widget Alexa Rank di Blog.

Script Alexa Rank & Contohnya

<a href="http://www.alexa.com/siteinfo/mursaidblog.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/a?url=mursaidblog.blogspot.com" type="text/javascript"></script></a>

<a href="http://www.alexa.com/siteinfo/mursaidblog.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/c?url=mursaidblog.blogspot.com" type="text/javascript"></script></a>

<a href="http://www.alexa.com/siteinfo/mursaidblog.blogspot.com"><script src="http://xslt.alexa.com/site_stats/js/s/b?url=mursaidblog.blogspot.com" type="text/javascript"></script></a>

Keterangan :
- Ganti kode mursaidblog.blogspot.com dengan link blog atau website anda.

Cara Memasang Widget Alexa di Blog

1. Masuk ke dashboard blog anda.

2. Pilih Tata Letak >> Tambah Gadget.

3. Lalu pilih HTML / JavaScript.

4. Masukan script atau kode yang diatas tadi.

5. Klik simpan, lihat hasilnya.

Itulah Cara Memasang Widget Alexa Rank di Blog semoga membantu anda, karena jika ingin mendapatkan widget alexa rank anda harus mengupgrade alexa biasa menjadi premium.

Mengenal dan Memahami, Apa Itu Alexa Rank ?

2015-02-07T18:11:00.002+07:00

Cara Membuat Menu Footer 3 Kolom di Blog

2015-02-05T22:17:00.002+07:00

MursaidBlog - Malam hari ini saya akan memberikan anda tutorial Cara Membuat Menu Footer 3 Kolom di Blog siapa tau ada yang sedang mencari ini, cara ini sangat mudah dan simple. Footer 3 kolom ini sudah saya terapkan sendiri diblog ini MursaidBlog. Footer ini khusus untuk template yang seo, untuk template blog biasa nanti jika saya bisa, saya akan mengupdate diartikel selanjutnya.

Footer ini berguna untuk menambahkan Element, sama seperti dengan sidebar. Bagaimana cara membuatnya, simak tutorial dibawah ini.

Cara Membuat Menu Footer 3 Kolom di Blog

1. Masuk ke Blogger.

2. Masuk ke menu Template >> Edit HTML.

3. Tembahkan kode dibawah ini, tepat diatas kode ]]></b:skin>.

#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
/*=============== Start FOOTER 3 KOLOM ===============*/
#footer-wrapper{background:#242424;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqgEywpxrPyU3ke0S7R7GT_nkobxlX5E2Yckkh8Ah98ZFRV4Di3Py62Zew4DrY1qQtDXBJiF6IQcftuQyVRGTvfp_pzDAFLWqzJ0Zk411_9kbB2rDRnhKp8NOameqGvwV5w6Jc3oqudCIf/s1600/line.png);background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;padding:20px 15px 0;color:#dddddd;}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase;position:relative;color:#eeeeee}
#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
#footer-wrapper li{margin:5px 0;padding:0 0 0 0}
#footer-wrapper a{color:#dddddd}
#footer-wrapper a:hover{color:#ffffff}
/*=============== End FOOTER 3 KOLOM ===============*/

4. Cari kode </body>, lalu paste kode berikut diatas kode </body>.

<footer id="footer-wrapper">
<b:section class='left section' id='left' preferred='yes'>
</b:section>
<b:section class='center section' id='center' preferred='yes'>
</b:section>
<b:section class='right section' id='right' preferred='yes'>
</b:section>
</footer>

5. Save template, lalu cek hasilnya di Tata Letak.

Nanti hasilnya akan menjadi seperti dibawah ini:

Itulah Cara Membuat Menu Footer 3 Kolom di Blog untuk yang menggunakan template blog biasa, nanti saya usahakan untuk membuat tutorialnya.

Download COC Private Server [Unlimited Gems]

2015-02-04T14:01:00.002+07:00

Clash of Clans (COC) adalah Game strategy yang bergenre perang yang berplatform iPhone / iPad / Android. COC bahkan memikat banyak orang dan yang menarik lainnya adalah game ini sudah didownload lebih dari 50Jt pengguna Android diseluruh dunia dan menempatkan game ini sebagai game terpopuler digoogle play store.

Jika anda peminat game ini dan ingin mendownload yang Private Server atau yang sering disebut-sebut CoC Offline, silahkan tekan link download dibawah ini.

Klik Link Download dibawah ini.

[ Link Download CoC Private Server / Offline ]

Cara Install Game di Android

1. Buka gamenya yang beformat .Apk.

2. Lalu pilih Install.

3. Buka Game/Permainannya.

4. dan Rasakan sensainya.

Cara Memasang Iklan di Dalam Postingan Blog

2015-02-03T16:50:00.001+07:00

Memasang Iklan di Dalam Postingan Blog - Hallo~ Sore ini saya akan memberikan anda tutorial Cara Memasang Iklan di Dalam Postingan Blog kenapa harus didalam postingan blog?, karena pengunjung sering melihat postingan kita, makannya itu Hal yang tepat untuk memasang iklan adalah didalam postingan blog.

Jika anda penasaran untuk membuatnya, inilah saat yang tepat untuk anda mencoba memasang iklan anda dipostingan blog anda.

Cara Memasang Iklan di Dalam Postingan Blog

1. Masuk ke Blogger masing-masing

2. Tambahkan kode CSS Berikut diatas kode ]]></b:skin> atau </style>.

/*=============== Start Iklan Google Adsense ===============*/
.ads-top{background:#e5e5e5;width:300px;height:250px;line-height:250px;float:left;margin:0 10px 10px 0;padding:0;text-align:center}
/*=============== End Iklan Google Adsense ===============*/

3. Cari kode <data:post.body/> pada template masing-masing, jika ada 2 pilihan, pilih yang ke-2. Dan Masukan kode berikut ini tepat diatas kode <data:post.body/>.

<div class="ads-top">
Masukkan kode Iklan anda disini.
</div>

4. Simpan dan lihat hasilnya.

Keterangan:
- Jika anda tidak ingin menambah lambat loading blog kode script iklan anda parse terlebih dahulu, Parse kode anda DISINI.
- Khusus untuk template SangSEO KangMousir anda cukup ikuti tutorial diatas, jika anda bukan pengguna template SangSEO pastikan menaru kode di <data:post.body/> yang tepat.
- Ganti "Masukkan kode iklan anda disini" dengan kode iklan punya anda yang berukuran 300x250.

Jenis Artikel yang Mendukung Google Adsense

2015-02-02T17:17:00.000+07:00

Kategori yang Disukai Google Adsense - Sudah berapa kali anda mendaftarkan Adsense dan sudah Berapa kali kah anda ditolak? mungkin alasan pertama Google Adsense menolak situs anda yaitu terletak pada Nama dan Alamat. Yang Kedua Google Adsense menolak karena alasan jumlah artikel situs anda tidak memadai,minimal buatlah 20 artikel yang ber Niche sama. Yang ketiga yaitu Google Adsense akan meninjau artikel sobat,apakah ada yang artikel hasil copy paste. Agar cepat disetujui (approved) sebaiknya situs anda bertema sama alias tidak campur-campur,sebab google akan memilihkan jenis iklan yang relevan bagi anda. Berikut Jenis Artikel yang Mendukung Google Adsense.

Kategori yang Disukai oleh Google Adsense

1. Keuangan Atau Bisnis
Artikel tentang keuangan dan bisnis online dapat membantu anda mendaftarkan ke Google Adsense Full Approve. Dengan syarat-syarat yang sudah saya jelaskan di atas.

2. Kesehatan
Artikel tentang kesehatan ini juga saya memakainya untuk mendaftarkan adsense. Sebab artikel kesehatan banyak yang mudah di cari dan di approve. Dengan Syarat-syarat yang sudah saya jelaskan di atas.

3. Hobi Dan Kesenangan
Untuk tema ini memang sudah tidak asing lagi. Sebab jika kita menulis hobi dan kesenangan,Pihak Google sudah mengetahui jika artikel yang anda buat original. Dengan Syarat-Syarat yang sudah saya jelaskan di atas.

4. Software

Kategori ini banyak dicari orang untuk mendapatkan software premium gratis atau software lainnya.

5. Tutorial Blog dan Belajar SEO

Jika anda memakai niche ini, pastikan membuat artikel yang sedang dicari - cari oleh visitor. MursaidBlog juga menggunakan niche ini karena banyak pemula yang ingin menambah ilmu dari niche ini.

Mungkin dari 5 niche tersebut anda bisa menggunakan atau mempraktekan diblog anda sendiri, intinya jika anda tidak atau jangan sering-sering meng-copy blog. Belajar menghargai karya orang lain.

Cara Berhenti Mengikuti Blog Orang Lain

2015-02-01T20:35:00.000+07:00

MursaidBlog - Saling mengikuti atau menjadi member blog orang adalah hal biasa yang sering dilakukan oleh para pecinta blogger. Dengan mengikuti blog tersebut, kita dapat selalu update mengenai artikel baru ditulis oleh admin blog yang kita ikuti, tapi sering terjadi beberapa hal dalam bertukar followers dengan orang lain.

Contohnya: orang lain ingin mengajak anda saling follow memfollow blog, lalu orang itu menyuruh anda untuk memfollow blog dia duluan, setelah difollow begitu saja dia langsung kabur entah kemana. Nah, jadi anda tidak perlu repot menangai hal ini. Anda tinggal unfollow blog yang anda ikuti dengan cara dibawah ini.

Cara Berhenti Mengikuti Blog Orang Lain

1. Masuk ke blogger.

2. Scrool ke bawah dan klik icon gerigi dikanan atas.

3. Lalu pilih Setelan dan Klik.

4. Pilih akun yang anda pakai untuk mengikuti blog tersebut, contoh saya memakai akun Google.

5. Selanjutnya, klik Berhenti ikuti situs ini dan nanti akan muncul tab baru lalu klik Berhenti Mengikuti.

Sebaiknya gunakan cara ini untuk blog yang sudah jarang update atau orang yang tidak mau follback blog kita saja, jika anda tertarik untuk mencobanya kenapa tidak dicoba sekarang.

Cara Memasang Emoticon di Komentar Blog

2015-02-01T11:54:00.002+07:00

Emoticon adalah sebuah simbol atau kombinasi dari simbol-simbol yang biasanya digunakan untuk menggambarkan ekspresi wajah manusia yang mengandung emosi atau perasaan dalam bentuk pesan atau tulisaseperti contoh emoticon dibawah ini yang sudah saya pasang di blog Mursaid Blog.

Bagaimana cara membuat emoticon seperti di atas ?? simak baik-baik tutorialnya yak
1- Pertama masuk ke blogger kalian masing - masing.
2- Masuk ke Blog yang di pilih terus Klik Template > Edit HTML
3- Letakan kode di bawah ini tepat di atas kode ]]></b:skin>

.emoWrap{ background-color:#fff; border:2px solid#0054BB; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; padding:10px 14px; color:black; font:bold 12px Tahoma,Arial,Sans-Serif; text-align:center}
img.emo, input.emoKey{ display:inline-block; *display:inline; vertical-align:middle}
input.emoKey{ border:1px solid #ccc; background-color:white; font:bold 11px Arial,Sans-Serif; padding:1px 2px; margin:0px 0px 0px 2px; color:black}

4- Setelah itu letakan kembali kode di bawah ini tepat di atas kode </head> atau </body>

<script type='text/javascript'>
//<![CDATA[
var emoRange = "#comments p, div.emoWrap",
putEmoAbove = "iframe#comment-editor",
emoMessage = "Untuk menyisipkan emoticon, beri satu spasi sebelum memasukkan kode.";
//]]>
</script>
<script src='https://sites.google.com/site/blogkangachmad/Emoticon%20Kang-Achmad.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

5- Klik simpan Template, dan lihat hasilnya bagaimana :) keren dan menarik kan.

Sumber : @KangAchmad.blogspot.com

Pengertian Fanspage atau Halaman Facebook

2015-01-30T16:19:00.000+07:00

Fanpage/Halaman adalah sebuah halaman khusus layaknya blog yang menyediakan informasi yang beragam sesuai dengan keinginan pemiliknya, mulai dari perusahaan, pendidikan, layanan, produk fisik, artis, komunitas dan masih banyak lainnya. facebook fanpage dimanfaatkan bagi kalangan tertentu, misalnya pemilik blogger yang ingin mempromosikan artikel atau dagangannya melalui facebook.

Manfaat Fanpage atau Halaman Facebook bagi seorang Blogger ??

Jika fanpage/halaman facebook anda banyak yang menyukai anda bisa mempromosikan artikel anda lewat status difanpage/halaman facebook anda, misalkan ada 200 orang yang menyukai halaman anda, kemungkinan 50% dari orang yang menyukai halaman anda akan melihat atau visit blog anda. Itu akan menambahkan trafic blog anda.

Manfaat Fanpage atau Halaman Facebook bagi Pembisnis Online ??

Jika fanpage/halaman facebook anda banyak yang menyukai anda bisa mempromosikan dagangan anda lewat halaman yang anda kelola, namun anda juga harus bersabar menunggu orang yang akan menyukai halaman anda, jika anda ingin cepat Promosikan halaman anda lewat situs jejaring social contoh: facebook, twitter, instagram, teman, bbm, atau jejaring social lainnya. Apabila sudah banyak yang menyukai halaman anda, anda tinggal mempromosikan produk atau dagangan anda lewat halaman facebook yang anda kelola.

Manfaat Fanpage atau Halaman Facebook yang Tidak Berbisnis Online ??

Apabila anda seorang aktivis kampus atau anda adalah seorang yang senang berjejaring sosial, maka fanpage facebook akan menjadi solusi bagi anda untuk berbagi, memberikan informasi dsb. Jika anda seorang guru, dosen, motivator, jurnalis atau bahkan anda seorang psikiater mungkin halaman fanpage facebook akan sangat bermanfaat bagi anda untuk menjalankan berbagai kegiatan anda.

Bagaimana, jika anda tertarik anda bisa membuat Fanpage atau Halaman Facebook anda sendiri, anda harus mempunyai akun facebook 5 Langkah Membuat Facebook Terbaru 2015.

5 Langkah Membuat Facebook Terbaru 2015

2015-01-29T15:06:00.000+07:00

Facebook adalah sarana sosial yang menghubungkan orang-orang dengan teman dan rekan mereka lainnya yang bekerja, belajar, dan hidup di sekitar mereka. Orang-orang menggunakan Facebook untuk menjaga hubungan dengan teman, bertukar foto tanpa batas, mengirim tautan dan video, dan mengetahui lebih jauh tentang orang-orang yang mereka temui.

Jika anda ingin menggunakan facebook, anda harus mendaftar terlebih dahulu berikut 5 Langkah Membuat Facebook Terbaru 2015.

1. Pertama masuk ke website facebook Klik Disini.
2. Lihat ke arah kanan bawah, dan masukkan data diri anda dikolom yang sudah disediakan.

Nomor 1 isi Nama Depan Anda
Nomor 2 isi Nama Belakang Anda
Nomor 3 isi dengan Alamat Email Anda
Nomor 4 isi kembali alamat Email Anda
Nomor 5 isi dengan Kata Sandi atau Password Facebook Anda
Nomor 6 isi dengan Tanggal lahir anda sesuai dengan tanggal lahir email kalau bisa
Nomor 7 klik Perempuan jika anda perempuan, klik Laki-Laki jiika anda Pria.

Jika sudah anda isi dengan benar, maka akan menjadi seperti dibawah ini dan jika sudah seperti contoh dibawah ini klik Mendaftar.

3. Setelah itu anda akan dialihkan kehalaman berikutnya, lalu klik lewati langkah ini (jika ada langkah 2 dan langkah 3 klik lewati langkah ini,supaya cepat).

4. Jika sudah anda akan masuk secara otomatis ke akun facebook anda, lalu anda akan disuruh mengonfrmasikan alamat email anda.

5. Setelah itu klik oke, dan anda berhasil membuat akun facebook anda.

Bagaimana, mudah bukan membuat facebook segera daftarkan diri anda ke facebook untuk mencari teman-teman atau kerabat anda.

Memasang Tag Alt Pada Gambar

2015-01-28T22:54:00.002+07:00

Tag Alt adalah sebuah tag untuk memudahkan Search Engine dalam menemukan keyword pada sebuah gambar. Tag Alt ini sangat penting untuk optimasi SEO. Untuk itu perlu kita tahu bagaimana Memasang Tag Alt Pada Gambar.

Dibawah ini adalah contoh gambar tanpa tag alt.

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzBBpt-4zWwA8EV59YMn-K9bY_l7wV39SxyOGSzqojghNVjiOF0eTzFcXUAY3-FqvOFZRSekOPZNafzjWk92acwITbj_XiuPK_3e6y6UzO_YccEqHSDS-4VixBWKLpvwbWdVXtxyOwUbE/s72/picture_no_available.png'/>

Selanjutkan kita tambahkan tag alt pada gambar tersebut.

<img alt='Memasang Tag Alt Pada Gambar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzBBpt-4zWwA8EV59YMn-K9bY_l7wV39SxyOGSzqojghNVjiOF0eTzFcXUAY3-FqvOFZRSekOPZNafzjWk92acwITbj_XiuPK_3e6y6UzO_YccEqHSDS-4VixBWKLpvwbWdVXtxyOwUbE/s72/picture_not_available.png'/>

Tag alt yang baik adalah disimpan di depan atau seperti contoh diatas.
sumber : KangMousir

2 Cara Download Video di YouTube Tanpa Software

2015-01-28T17:13:00.000+07:00

MursaidBlog - Ada 2 Cara Download Video di YouTube Tanpa Software yang bisa anda gunakan untuk mendownload video di YouTube dengan mudah, pertama menambahkan kode "ss" dan yang kedua dengan mengunjungi sebuah website untuk mendownload video YouTube.

YouTube adalah salah satu situs web berbagi video secara gratis. Situs ini memungkinkan Anda dapat mengunggah, berbagi dan menonton. YouTube ini merupakan situs web berbagi video paling populer di dunia.

2 Cara Download Video di YouTube Tanpa Software

1. Cara Mudah Download Video di YouTube Tanpa Software

Cara ini lebih cepat dan mudah dipahami oleh anda, karena tips ini sangat simple dan cepat dengan menambahkan kode "ss" pada link yang akan didownload, contoh

https://www.youtube.com/watch?v=NZIvCFi2zoI

Setelah ditambakan kode "ss" jadi seperti dibawah ini

https://www.ssyoutube.com/watch?v=NZIvCFi2zoI

2. Cara Download Video di YouTube Tanpa Software

Cara ini hampir sama seperti diatas karena menggunakan website download yang sama, tips ini untuk memberikan tutorial yang lebih rinci dan walaupun agak lama juga, anda cukup masuk ke website http://en.savefrom.net/ lalu copy URL yang ingin anda download ke kolom yang sudah disediakan diwebsite tersebut

Nah bagaimana dengan 2 Cara Download Video di YouTube Tanpa Software diatas, anda bisa mencobanya sendiri dan memakainya sendiri jika ingin mendownload video, semoga berhasil!.

Pentingnya Tag Alt Pada Gambar

2015-01-27T15:28:00.000+07:00

Setelah menelusuri fungsi dari tag alt pada sebuah gambar, ternyata tag alt sangat penting untuk optimasi SEO. Banyak dari kalangan Blogger yang melupakan untuk menambahkan tag alt pada gambar. Padahal tag alt ini fungsinya sangat penting. Oleh karena itu mari kita bahas seberapa penting tag alt pada sebuah gambar.

Fungsi Tag Alt
Tag Alt ini ibarat sebuah keyword pada sebuah blog. Perlu Anda ketahui, bahwa SEtidak bisa membaca gambar. Mesin Pencari membaca judul dan tag alt pada gambar. Buat tag alt dengan deskripsi singkat, setidaknya mewakili dari gambar tersebut.

Seberapa Penting Untuk Blog
Saya katakan sangat penting. Untuk membuktikannya coba Anda cari gambar di Google Search Image, kemudian buka gambar tersebut terlihat nama gambarnya sama dengan kata kunci yang anda cari. Sama halnya dengan fungsi tag alt. Mesin pencari juga menggunakan kata kunci dimana gambar tersebut di publikasikan pada artikel.

Bagaimana Membuatnya ?
Cara membuat sangat mudah Anda hanya tinggal menambahkan tag alt di depan gambar atau Anda juga bisa menyimaknya pada artikel berikut Memasang Tag Alt Pada Gambar.

Cara Memperbaiki Layout yang Error

2015-01-27T13:52:00.000+07:00

Cara Memperbaiki Tata Letak atau Layout - Jika anda mengalami masalah pada layout/tata letak anda tidak usah bingung, karena kami kali ini akan membagikan tips kepada anda bagaimana Cara Memperbaiki Layout yang Error.

Kenapa bisa terjadi error pada Layout anda, apakah anda tau mengapa ?? mungkin itu karena template anda menggunakan menu Horizontal atau penerapan kode <li>-<ul>, hal ini kemungkinan dapat menyebabkan terjadinya error pada layout anda seperti munculnya titik-titik. Berikut adalah Cara Memperbaiki Layout yang Error.

(Layout yang Error / Sebelum diperbaiki)

Cara Memperbaiki Layout yang Error

1. Masuk ke Blogger anda masing - masing.
2. Masuk ke menu TEMPLATE >> EDIT HTML.
3. Setelah itu masukan CSS ini tepat diatas kode ]]></b:skin>.

body#layout ul {display: none;}

4. Lalu klik simpan template setelah itu, refresh browser dan lihat ke Tata Letak/Layout.

Begitulah Cara Memperbaiki Layout yang Error, semoga berhasil menggunakan tutorial diatas karena saya juga memakai tutorial ini untuk memperbaiki blog saya.

Cara Mudah Download Video di YouTube Tanpa Software

2015-01-26T21:28:00.000+07:00

YouTube adalah sebuah situs web berbagi video untuk dilihat para pengunjung. Situs ini memungkinkan penggunanya mengunggah, menonton, dan berbagi. Karena adanya YouTube anda bisa menonton atau melihat video yang diunggah para pengguna YouTube.

Cara Mudah Download Video di Youtube Tanpa Software sebenarnya cara ini juga sama dengan cara yang sebelumnya yang sudah pernah saya posting Cara Download Video di YouTube Tanpa Software tapi cara berikut ini lebih simple dan lebih cepat, ikuti Langkah berikut ini.

Cara Mudah Download Video di YouTube Tanpa Software

1. Silahkan cari video yang anda ingin download di YouTube.

2. Setelah menemukan video yang anda ingin download, Edit address barnya dengan menambahkan kode "ss".

3. Jika sudah ditambahkan kode "ss" maka hasilnya akan menjadi seperti ini.

4. Langkah selanjutnya, setelah anda edit dan menambahkan kode "ss" anda akan dialihkan ke laman berikutnya lalu klik download seperti contoh dibawah ini.

5. Jika sudah anda download nanti secara otomatis akan terunduh/download dengan sendirinya.

Itulah Cara Mudah Download Video di YouTube Tanpa Software mudah bukan, jika anda tidak mengerti anda bisa menggunakan cara sebelumnya yaitu Cara Download Video di YouTube Tanpa Software tapi tentunya cara ini lebih cepat dan mudah dari cara sebelumnya.