• Breaking News

    Tuesday, February 7, 2017

    Tips Membuat Breadcrumbs SEO Friendly dengan Font Awesome

    Tips SEO Membuat Breadcrumbs SEO Friendly dengan Font Awesome

    Breadcrumbs SEO Friendly Font Awesome

    Hallo, sobat my-seven7ash. Dalam artikel ini saya ingin membagikan Tips & Trik SEO Membuat Breadcrumbs SEO Friendly dengan Font Awesome. breadcrumbs adalah sebuah navigasi yang terdiri dari , home ( nama blog sobat ), label bacaan dan link title post yang berfungsi untuk mendongkrak artikel kita agar bisa berada di halaman pertama google. 

    Baca Juga

    Sebenarnya tanpa sobat sadari breadcrumbs sudah secara otomatis terpasang di template blog sobat , asalkan template yang sobat gunakan , itu merupakan template yang dibuat pada tahun 2014 keatas , namun tidak semua template di era modern ini , breadcrumbnya terindex , karena sebagian blogger tidak suka dengan breadcrumbs navigasi yang terindex ( termasuk saya ) karena saya memiliki alasan tersendiri untuk memilih breadcrumb yang tidak terindex oleh google search .

    Mungkin sebelumnya sobat sudah memasang breadcrumbs tetapi hasilnya tidak terlihat didalam pencarian Google seolah-olah tidak di index oleh Google, memang membutuhkan waktu yang sangat lama baginya untuk meng-indeks breadcrumbs yang seperti itu bahkan saya sempet dengar blog anda harus ber-pagerank 3 atau lebih. Tetapi sekarang hal itu tidak perlu dipersoalkan lagi meskipun blog anda belum mempunyai pagerank karena navigasi breadcrumbs yang satu ini akan terlihat di mesin pencari Google dengan waktu yang singkat dan semua label blog akan ter-index olehnya. 

    Baca Juga

    Breadcrumbs SEO Friendly Font Awesome
    Cara membuat breadcrumbs ini sama saja dengan breadcrumbs seperti biasanya, hanya saja disini saya tambahkan element font awesome yang letaknya disebelah kiri breadcrumbs, dan kode yang telah saya bagikan dibawah ini telah Valid HTML5,
    1. Login di Blogger
    2. Back up template untuk menghindari kesalahan
    3. Pilih Template
    4. Sebelum membuat breadcrumbs nya silahkan sobat masukkan javascript berikut, javascript berikut adalah script untuk font awesome, jika sebelumnya sobat telah menggunakannya sobat tidak perlu lagi menambahkannya, letakkan javascript berikut di atas kode </head>

    5. <link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

    6. Masukkan CSS berikut diatas ]]></b:skin> atau di <style>

    7. .breadcrumbs{

       background:#ff6c60;


       padding:15px 20px 15px 65px;


       margin-bottom:19px;


       font-size:14px;


       color:#fff;


       border-radius:4px;


       position:relative;


      }


      .breadcrumbs a{


       color:#fddbd8;


       text-decoration:none;


      }


      .breadcrumbs a:hover{


       color:#fff;


       text-decoration:none;


      }


      .breadcrumbs:before {


       content: "\f041";


       font-family:fontAwesome;


       font-size:22px;


       font-style: normal;


       background-color:#e56155;


       color:#fff;


       border-radius:4px 0 0 4px;


       top:0;


       left:0;


       padding:13px 20px;


       position:absolute;


      }

    8. Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :

    9. <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'>

      <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>

      <b:loop values='data:post.labels' var='label'>

        &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></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'/>

    10. Selesai dan save template (jika ada kesalahan atau bagaimana ?, komentar dikolom yang telah disediakan.)


    Penting : apabila sebelumnya sobat telah menggunakan breadcrumbs didalam template sobat, sebaiknya tidak perlu diganti html nya, cukup sobat ganti css nya saja, dan hapus css breadcrumbs sobat sebelumnya dengan css breadcrumbs yang telah saya bagikan diatas tadi.

    Terima Kasih Telah Membaca Artikel : Tips Membuat Breadcrumbs SEO Friendly dengan Font Awesome
    Add a Comment. Read Comment Policy ▼
    Please Note
    - No live link
    - Pergunakan bahasa baku dan tanpa singkatan serta sesuai dengan topik pembahasan
    - Komentar yang relevan akan saya balas dan kunjung balik secara otomatis (tanpa meminta)
    - Tekan "subscribe by email" untuk mengetahui balasan dari saya
    - Untuk mendapatkan BACKLINK, gunakan OpenID. Baca --> Cara mengaktifkan OpenID

    No comments:

    Post a Comment

    + Follow
    Join on this site

    with Google Friend Connect

    COPYRIGHT

    Seluruh artikel atau konten yang ada di blog MY-SEVEN7ASH ini sifatnya adalah Open Source.

    Artinya, Anda boleh mengcopy sebagian artikel yang ada di blog ini, tapi kami mohon untuk tidak melakukan copy paste melalui feeds (xml) karena itu bisa menghancurkan blog ini.

    Mencantumkan sumber atau tidak itu merupakan hak Anda.
    back to top