Cara Membuat Breadcrumbs SEO Friendly Terbaru 2015

07:26 0
Cara Membuat Breadcrumbs SEO Friendly Terbaru 2015 - Selamat datang kembali sobat blogger, Oke kali ini mimin akan membahas tentang breadcrumbs atau navigasi. Tentunya sudah sangat banyak tutorial yang bertebaran di google, nah kali ini mimin mau menjelaskan cara membuat breadcrumbs yang SEO friendly dan semua label terindeks oleh Search Engine.



Home>Label1>Label2>Label3>Hinggal Label akhir

Cara Membuat Breadcrumbs SEO Friendly Terbaru 2015
1. Masuk ke Blogger

  • Masuk Dashboard
  • Pilih Template
  • Klik Edit HTML
2. Salin / Copy kode CSS dibawah dan tempel / pastekan tepat diatas kode ]]></b:skin>: 

/* Breadcrumbs SEO Bloggerisn */ 
.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:20px;margin-top:0px;font-size:11px;color:#5B5B5B;border-bottom:1px dotted #bbb;}
3. Setelah cari kode <b:includable id='main' var='top'> lalu ganti dengan kode dibawah :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
&#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
&#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>
4.Selanjutnya Simpan / Save Template Sobat

Untuk mengeceknya silahkan sobat kunjungi :

http://www.google.com/webmasters/tools/richsnippets

Untuk mencoba apakah tampil beberapa label, copy postingan Sobat yang memakan banyak label. dan klik Pratinjau. Kalau sudah berhasil, berarti breadcrumbs telah terpasang dengan baik.

http://bloggerisn.blogspot.com/2015/06/cara-membuat-breadcrumbs-seo-friendly.html

Cara Memasang Multi Tab Sidebar Widget

04:00 12
Cara Memasang Multi Tab Sidebar Widget - Yups itulah yang akan kita bahas kali ini. Mungkin sobat sering melihat widget ini di terapkan pada web-web, Nah salah satu manfaat widget ini adalah, meminimalkan penggunakan widget pada sidebar sobat, dengan menggunakan multi tab ini, sobat akan lebih menghemat penempatan widget pada blog sobat. Tentunya juga akan meningkatkan profesionalitas blog sobat.


Oke langsung saja, berikut cara penerapannya.

Cara Memasang Multi Tab Sidebar Widget :
1. Login ke Blogger.
  • Klik Dashboard.
  • Pilih Template.
  • Klik Edit HTML.
2. Salin / Copy kode CSS dibawah tepat diatas kode ]]></b:skin> atau </style>.
/* Multi Tab Widget */
.multitab-section{background:#fff;text-transform:uppercase;width:100%}
.multitab-widget{list-style:none;margin:0 0 10px;padding:0}
.multitab-widget li{list-style:none;padding:0;margin:0;float:left}
.multitab-widget li a{background:#22a1c4;color:#fff;display:block;padding:15px;font-size:13px;text-decoration:none}
.multitab-tab{border:0;width:33.3%;text-align:center}
.multitab-section h2,.multitab-section h3,.multitab-section h4,.multitab-section h5,.multitab-section h6 {display:none;}
.multitab-widget li a.multitab-widget-current{padding-bottom:20px;margin-top:-10px;background:#fff;color:#444;text-decoration:none;border-top:5px solid #22a1c4;font-size:14px;text-transform:capitalize}
3. Selanjutnya Salin / Copy kode jQuery dibawah ini tepat diatas kode </body>.
<script type='text/javascript'>
//<![CDATA[
// Multi tab widget
jQuery(document).ready(function($){ $(".multitab-widget-content-widget-id").hide(); $("ul.multitab-widget-content-tabs-id li:first a").addClass("multitab-widget-current").show(); $(".multitab-widget-content-widget-id:first").show(); $("ul.multitab-widget-content-tabs-id li a").click(function() { $("ul.multitab-widget-content-tabs-id li a").removeClass("multitab-widget-current a"); $(this).addClass("multitab-widget-current"); $(".multitab-widget-content-widget-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); });
//]]>
</script>
4. Kemudian Salin / Copy kode HTML dibawah ini tepat dibawah kode <div id='sidebar-wrapper'>.
<div class='multitab-section'>
<ul class='multitab-widget multitab-widget-content-tabs-id'>
<li class='multitab-tab'><a href='#multicolumn-widget-id1'>Popular</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id2'>Tags</a></li>
<li class='multitab-tab'><a href='#multicolumn-widget-id3'>Archive</a></li>
</ul>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id1'>
<b:section class='sidebar' id='sidebartab1' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id2'>
<b:section class='sidebar' id='sidebartab2' preferred='yes'/>
</div>
<div class='multitab-widget-content multitab-widget-content-widget-id' id='multicolumn-widget-id3'>
<b:section class='sidebar' id='sidebartab3' preferred='yes'/>
</div>
</div>
.
5. Ganti judul widget yang telah Saya beri tanda pada kode diatas dengan widget yang ingin sobat pasang.

6. Terakhir adalah Simpan/Save template sobat, dan lihat hasilnya.

Nah itulah sobat blogger, Cara memasang Multi tab sidebar widget pada blog sobat, selamat menerapkan, semoga berhasil. dadah :D.

Source : http://arlinadesign.blogspot.com/2015/05/cara-memasang-multi-tab-sidebar-widget.html

http://bloggerisn.blogspot.com/2015/05/cara-memasang-multi-tab-sidebar-widget.html

Memasang Back To Top Smooth di Blog

05:04 4
Memasang Back To Top Smooth di Blog - Jika Sobat mencari di search engine, pastilah sudah banyak sekali tutorial cara pemasangan back to top di blog. Nah kali ini Saya akan membahas tutorial bagaimana cara memasang back to top yang smooth pada blog Sobat.


Fungsi back to top sendiri yaitu memudahkan pengunjung blog sobat saat mengscroll ke atas pada blog sobat, jika dengan menggunakan back to top, hanya dengan 1x klik, halaman langsung kembali keatas.

CATATAN!:
Template Sobat harus telah terpasang Font Awesome, jika belum silahkan baca Cara Memasang dan Menggunakan Font Awesome di Blog. Jika template sobat telah terpasang back to top sebelumnya, maka silahkan sobat hapus terlebih dahulu.

Memasang Back To Top Smooth di Blog :
1. Buka Blogger
  • Masuk Dashboard.
  • Klik Template.
  • Pilih Edit HTML.
2. Salin/Copy code CSS dibawah ini tepat diatas ]]></b:skin> atau </style>.

/* Smooth Back To Top Bloggerisn */
.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3. Lalu Salin/Copy code jQuery dan HTML dibawah ini tepat sebelum kode </body>.
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>
4. Setelah itu Simpan/Save Template dan lihat hasilnya.

Bagaimana, cukup mudah bukan dalam memasang back to top smooth di blog? Oke sekian tutorial yang bisa saya berikan, kurang lebihnya mohon maaf. Salam Blogger Indonesia.

http://bloggerisn.blogspot.com/2015/05/memasang-back-to-top-smooth-di-blog.html

Memasang Widget Email Subcribe Keren di Blog 2015

05:57 4
Memasang Widget Email Subcribe Keren di Blog 2015 - Oke sahabat blogger, setelah sebelumnya Saya telah membahasa Cara Termudah pasang like box fanspage facebook di blog, kali ini adalah Email subcribe.


Widget ini biasanya di gunakan para pengunjung blog sobat yang tertarik dengan artikel sobat dan berlangganan artikel sobat. Yups, mereka akan berlangganan artikel sobat memalui email dimana jika sobat menulis dan mempublish artikel baru, dengan otomatis mereka akan mendapatkan updatean terbaru dari artikel sobat

Cara Memasang Widget Subcribe di blog.
1. Buka Blogger
  • Klik Dashboard.
  • Pilih Tata Letak/Layout.
  • Pilih tempat dimana sobat akan meletakan widgetnya.
  • klik Add a Gadget.
  • dan pilih HTML/JavaScript.
  • Salin/Copy Kode dibawah, lalu pastekan pada box content widget HTML/JavaScript
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,400,300,600,700' rel='stylesheet' type='text/css'/>
<div id='byard-emailsubsocial'>
              <div class='heading'>
               Sign Up in Seconds
              </div>
                 <p>Sign up with your email address to receive hot updates straight in your inbox.</p>
             <div class='emailsub'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Bloggerisn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               <input type='text' name='name' placeholder='Your Name' />
               <input type='text' name='email' placeholder='Your Email' />
               <input type="hidden" value="Bloggerisn" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>
                        <input value="Sign Up Now!" class="button" type="submit" />
              </form>
             </div><p id='credits'>Powered By : <a href='http://bloggerisn.blogspot.com'>Bloggerisn</a></p>
             </div>
 <style type='text/css'>
     #byard-emailsubsocial {
      width: 100%;
      height: 330px;
     }
     #byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 26px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
     }
   #byard-emailsubsocial p {
    font-family: open sans;
    font-size: 13px;
    color: rgb(170, 170, 170);
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #byard-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #byard-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    font-family: open sans;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #byard-emailsubsocial .emailsub input:focus {
    border-color:#F4836A;
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }
   #byard-emailsubsocial .emailsub .button {
    background: #3498db;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #2980b9;
    transition:background .4s linear;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
    cursor:pointer;
   }
   #byard-emailsubsocial .emailsub .button:hover{
    background: #DD7761;
   }#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}
     </style>

CATATAN!:
Ganti tulisan Bloggerisn dengan alamat Username Feedburner Sobat.

2. Klik Simpan/Save.
3. Lalu Simpan setelan.

Jika sudah sobat bisa melihat blog sobat :D oke sekian cara pemasangan widget email subcribe keren di blog 2015, sampai jumpa di lain artikel ya sob

http://bloggerisn.blogspot.com/2015/05/memasang-widget-email-subcribe-keren-di.html

Responsive Multi Dropdown Menu

02:32 0
Bloggerisn - Responsive Multi Dropdown Menu. Hai sobat Blogger, kembali lagi dengan Saya yang selalu menemani dunia blogging sobat :D. Oka kali ini saya akan memberikan tutorial tentang Drop Down, sebenarnya banyak sekali tutorial yang membahas tentang dropdown, aplagi seperti drop download responsive yang akan kita bahas kali ini.


Oke, yang pertama kita butuhkan pertama-tama adalah kerangka HTML, oke berikut adalah kerangka dropdown HTML yang dibuat oleh mba Arlina Fitriyani. Tempatkan sesuai keinginan Sobat.

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a>    
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a></li>
   <li><a href="#">Sub-Menu 3</a></li>
   <li><a href="#">Sub-Menu 4</a></li>
   <li><a href="#">Sub-Menu 5</a></li>   
   </ul>
   </li>
  <li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
    <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
     <li><a href="#">Sub-Menu 3</a>
    <ul>
    <li><a href="#">Sub Sub-Menu 1</a></li>
    <li><a href="#">Sub Sub-Menu 2</a></li>
 <li><a href="#">Sub Sub-Menu 3</a></li>
    <li><a href="#">Sub Sub-Menu 4</a></li>
 <li><a href="#">Sub Sub-Menu 5</a></li> 
    </ul>
   </li>
   </ul>
  </li>
  <li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
  <li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
  <li><a  href="#"><i class="fa fa-exclamation-triangle"></i> DISCLAIMER</a></li>
  </ul>
  </nav>



Menu diatas adalah masih tampilah HTML belum kita berikan CSS untuk tampilan dan fungsi yang lebih baik. Berikut kode CSS dan jQuery yang sudah diatur untuk menyesuaikan kerangka Dropdown HTML diatas.

Untuk CSS sobat dapat menyisipkannya tepat di atas kode ]]></b:skin> atau </style>.

/* CSS Responsive Dropdown Bloggerisn */
nav {
    display: block;
    margin-top: 100px;
    background: #374147;
}

.menu {
    display: block;
}

.menu li {
    display: inline-block;
    position: relative;
    z-index: 100;
}

.menu li:first-child {
    margin-left: 0;
}

.menu li a {
    font-weight: 600;
    text-decoration: none;
    padding: 20px 15px;
    display: block;
    color: #fff;
    transition: all 0.2s ease-in-out 0s;
}

.menu li a:hover,.menu li:hover>a {
    color: #fff;
    background: #9ca3da;
}

.menu ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    padding: 0;
    width: 150px;
    position: absolute;
    left: 0px;
    background: #fff;
    z-index: 99;
    transform: translate(0,20px);
    transition: all 0.2s ease-out;
}

.menu ul:after {
    bottom: 100%;
    left: 20%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-color: #fff;
    border-width: 6px;
    margin-left: -6px;
}

.menu ul li {
    display: block;
    float: none;
    background: none;
    margin: 0;
    padding: 0;
}

.menu ul li a {
    font-size: 12px;
    font-weight: normal;
    display: block;
    color: #797979;
    background: #fff;
}

.menu ul li a:hover,.menu ul li:hover>a {
    background: #9ca3da;
    color: #fff;
}

.menu li:hover>ul {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.menu ul ul {
    left: 149px;
    top: 0px;
    visibility: hidden;
    opacity: 0;
    transform: translate(20px,20px);
    transition: all 0.2s ease-out;
}

.menu ul ul:after {
    left: -6px;
    top: 10%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 6px;
    margin-top: -6px;
}

.menu li>ul ul:hover {
    visibility: visible;
    opacity: 1;
    transform: translate(0,0);
}

.responsive-menu {
    display: none;
    width: 100%;
    padding: 20px 15px;
    background: #374147;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
}

.responsive-menu:hover {
    background: #374147;
    color: #fff;
    text-decoration: none;
}

a.homer {
    background: #9ca3da;
}

@media (min-width: 768px) and (max-width: 979px) {
    .mainWrap {
        width: 768px;
    }

    .menu ul {
        top: 37px;
    }

    .menu li a {
        font-size: 12px;
    }

    a.homer {
        background: #374147;
    }
}

@media (max-width: 767px) {
    .mainWrap {
        width: auto;
        padding: 50px 20px;
    }

    .menu {
        display: none;
    }

    .responsive-menu {
        display: block;
        margin-top: 100px;
    }

    nav {
        margin: 0;
        background: none;
    }

    .menu li {
        display: block;
        margin: 0;
    }

    .menu li a {
        background: #fff;
        color: #797979;
    }

    .menu li a:hover,.menu li:hover>a {
        background: #9ca3da;
        color: #fff;
    }

    .menu ul {
        visibility: hidden;
        opacity: 0;
        top: 0;
        left: 0;
        width: 100%;
        transform: initial;
    }

    .menu li:hover>ul {
        visibility: visible;
        opacity: 1;
        position: relative;
        transform: initial;
    }

    .menu ul ul {
        left: 0;
        transform: initial;
    }

    .menu li>ul ul:hover {
        transform: initial;
    }
}

@media (max-width: 480px) {
}

@media (max-width: 320px) {
}

Sedangkan untuk jQuery sobat bisa meletakannya tepat diatas kode </body>.
$(document).ready(function(){ 
 var touch  = $('#resp-menu');
 var menu  = $('.menu');
 
 $(touch).on('click', function(e) {
  e.preventDefault();
  menu.slideToggle();
 });
 
 $(window).resize(function(){
  var w = $(window).width();
  if(w > 767 && menu.is(':hidden')) {
   menu.removeAttr('style');
  }
 });
 
});

Setelah semua di jadikan satu, maka hasilnya seperti dibawah ini :


Nah gimana sobat, keren dan responsive kan?. Oke sekian tutorial kali ini, see you :D

http://bloggerisn.blogspot.com/2015/05/responsive-multi-dropdown-menu.html

Cara Termudah Pasang Like Box Facebook di Blog

19:05 14
Cara Termudah Pasang Like Box Facebook di Blog - Hai sahabat Blogger, kembali lagi berjumpa dengan mimin disini. Oke kali ini mimin akan memberikan tutorial bagaimana cara memasang like box facebook atau penggemar facebook dengan cara yang sangat mudah.


Oke berikut cara termudah untuk memasang like box panspage facebook di web/blog sobat.

CATATAN!:
Pastikan Sobat telah memiliki akun facebook
Pastikan Sobat telah memiliki Facebook Fanspage
Namun jika sobat telah memiliki keduanya, abaikan info diatas.
Tahap 1 : Mendapatkan Kode Fanspage like box.

1. Pertama silahkan sobat login ke akun facebook sobat, lalu kunjungi Facebook Plugin.

2. Setalah masuk di dalah facebook plugin, silahkan sobat liat penjelasan dari gambar dibawah ini :

Silahkan sobat sesuaikan :

1. Masukan URL Facebook Fanspage Sobat.
2. Ukuran lebar widget yang akan dipasang di blog sobat.
3. Ukuran tinggi widget yang akan dipasang di blog sobat.
4. Fitur tambahan untuk widget like box sobat.
5. Preview/Demo like box widget sobat.
3. Setelah pengaturan selesai, silahkan Klik Get Code untuk mendapatkan kode widget like box.

4. Salin/Copy kode script widget fanspage like box.


Tahap 2 : Penerapan Fanspage like box pada blog

1. Buka Blogger Sobat
  • Pilih Dashboard.
  • Klik Tata Letak.
  • Pilih dimana letak sobat ingin menaruh widget fanspage like box lalu Tambah Gadget.
  • Setelah keluar jendela baru, pilih HTML/JavaScript
  • Lalu Tempel/Pastekan kode yang telah sobat salin/copy sebelumnya.
  • Klik Simpan.
  • Lalu Pilih Simpan setelan.
2. Sekarang silahkan sobat coba lihat blog sobat dan cari dimana letak fanspage like box yang telah sobat taruh. Selesai.

Bagaimana? benar-benar cara termudah bukan ? nah itulah sob cara termudah pasang like box facebook di blog, semoga membantu dan bermanfaat ya sob. salam blogger.

http://bloggerisn.blogspot.com/2015/05/cara-termudah-pasang-like-box-facebook-di-blog.html

Cara Claim/Vertifikasi Blog di Situs Alexa Terbaru Mei 2015

16:26 0
Cara Claim/Vertifikasi Blog di Situs Alexa Terbaru Mei 2015 - Siapa yang tidak situs yang satu ini, Saya yakin disekian banyak blogger 80% Mengetahui situs ini. Banyak yang bilang cara claim atau vertifikasi blog di situs alexa itu berbayar, TIDAK BENAR! claim atau vertifikasi disitus alexa iru gratis kok, mau tau bagaimana caranya? simak baik-baik ya.

Tahap 1 : Pendaftaran.

1. Silahkan masuk terlebih dahulu kesitus www.alexa.com. Jika sobat sudah memiliki akun silahkan "Sign In", jika sobat belum memiliki akun silahkan klik "Create an Account".

2. Jika sobat mendaftar baru silahkan masukan email sobat dan cek email sobat, apakah sudah dapat pesan dari alexa.

3. Oke Saya pikir sobat sudah mempunyai akun. Setelah itu silahkan sobat Sign In pada www.alexa.com.

4. Setelah masuk dengan akun Sobat, untuk meng-claim situs blog kita silahkan menuju kesini www.alexa.com/siteowners/claim.
5. Masukan URL blog Sobat di kotak yang telah disediakan kemiduan Klik "Continue".


6. Sekarang ada 3 Metode yang bisa sobat lakukan untuk meng-claim blog sobat. Saya sarankan gunakan Metode Nomor 2, karna lebih mudah untuk diterapkan.


7. Klik metode 2, lalu salin code yang telah disediakan. lalu beralih kelangkah berikutnya, dan JANGAN CLOSE! halaman alexa ini.


Tahap 2 : Memasang Kode Vertifikasi Alexa di Blog.

1. Buka dan Masuk ke akun Blogger Sobat.
  • Klik Dashboard.
  • Pilih Template.
  • Klik Edit HTML.
2. Lalu, Tempelkan code yang telah sobat copy sebelumnya tepat dibawah kode <head>
INFO!:
Untuk memudahkan pencarian kode <head> silahkan tekan bersamaan "CTRL+F" lalu tuliskan pada kotak search adalah <head>

3. Lalu "Simpan / Save Template".
4. Terakhir adalah, Sobat kembali ke situs alexa, kemudian klik tombol "Verify my ID". 

 
5. Jika berhasil, sobat akan mendapatkan tulisan "Your site is successfully claimed".

Nah, sekarang Website/Blog Sobat sudah terclaim dalam situs alexa. Semoga cara diatas dapat membantu dan bermanfaat bagi sobat. Oke, itulah artikel tentang Cara Claim/Vertifikasi Blog di Situs Alexa Terbaru Mei 2015.
http://bloggerisn.blogspot.com/2015/05/cara-claim-vertifikasi-blog-di-situs-alexa.html
Subscribe to: Comments (Atom)