Tampilkan postingan dengan label Blogging. Tampilkan semua postingan
Tampilkan postingan dengan label Blogging. Tampilkan semua postingan
0

Memasang Navigasi Breadcrumb SEO Valid HTML5

Senin, 04 November 2013
Memasang Navigasi Breadcrumb SEO Valid HTML5 Navigasi breadcrumb adalah sebuah navigasi atau penunjuk halaman yang umumnya berfungsi untuk membantu memberikan informasi kepada  si pembaca tentang di artikel mana dan di menu apa si pembaca berada. bagi sobat yang tertarik untuk memasang navigasi breadcrumb di blog sobat, silahkan Baca Artikel Ini Sampe Tuntas. Dan keuntungan Memakai Breadcrumb Ini Blog Akan lebih SEO Dan Akan Cepat Terindex oleh mesin Pencari Seperti Google Dsb





Berikut caranya:

1. Log in ke akun blog sobat.
2. Klik Rancangan---> Edit HTML --> Klik Download template lengkap
4. Letakkan kode berikut di atas kode ]]></b:skin>. ( gunakan F3 untuk memudahkan pencarian)

.breadcrumbs{padding:5px 5px 5px 0;margin:0;font-size: 90%;line-height:1.4em;border-bottom:1px solid black;}

5. Kemudian sobat cari kode seperti ini: <b:includable id='post' var='post'>

6. Pastekan kode berikut tepat di bawahnya.

<b:if cond='data:blog.homepageUrl == data:blog.url'><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><div class='breadcrumbs'>You are Here &gt; <a expr:href='data:blog.homepageUrl'>Home</a> &gt;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if></b:loop></b:if> &gt; <data:post.title/></div></b:if></b:if>

7. Yang terakhir sobat tinggal simpan template dan lihat hasilnya.

Sekian Artikel Saya Yang berjudul Memasang Navigasi Breadcrumb SEO Valid HTML5 , Semoga Bermanfaat, jangan Lupa Klik Tombol G+ Dibawah Ini, Dan Iklannya Ya.. :D
0

Membuat Loading Blog keren Dan Responsive

Sabtu, 26 Oktober 2013

Cara Membuat Efek Loading Keren di Blog
Halo Sob Posting tentang Blogging Lagi nih ane, Sekarang Ane Mau Kasih Tutor Untuk membuat Loading Blog Keren banget gan... Dan Lumayan Responsive..

Cara Membuat Efek Loading di Blog - Waktu loading pada blog memang cukup menganggu bagi para pengunjung. Dan sayangnya, hal itu tidak bisa sepenuhnya dihindari oleh para blogger. Salah satu untuk mengurangi titik jenuh visitor dalam menunggu loading tersebut adalah membuat Efek Loading yang keren. 

Kelebihan memakai Loading Blog Ini Adalah:
  • Blog Akan Terasa Cepat , (hanya terasa saja tapi itu sama aja dengan tanpa loading cuman sperti)
  • Blog jadi Keren 
  • dll
Dan Untuk membuatnya, silahkan Sahabat Ridwan Hex ikuti langkah-langkah sederhana berikut ini :

Langkah 1 : Tambahkan jQuery pada blog sobat. Simpan kode di bawah ini sebelum </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 
Apabila template sobat sudah memiliki jQuery, lewati langkah ini. Harap diperhatikan, tidak boleh ada script jQuery lebih dari satu. 
Langkah 2 : Tambahkan CSS. Simpan CSS ini di atas ]]></b:skin> 
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7KtClXaJnIxVtrS7i5qIDAYgON9FlM6aHvlrSmnabUwyR-CN2Wjln4HXZYkg5vTWV4vx7LyrhGABu0yGL1pJA2S2h46EFBnDYqBhC0y4KL8FPpiz1ni2UAk8g40yIqwMx53oA_kKQorM/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}
Untuk merubah warna sesuai dengan blog sobat, silahkan edit warna dan gambar pada kode.
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7KtClXaJnIxVtrS7i5qIDAYgON9FlM6aHvlrSmnabUwyR-CN2Wjln4HXZYkg5vTWV4vx7LyrhGABu0yGL1pJA2S2h46EFBnDYqBhC0y4KL8FPpiz1ni2UAk8g40yIqwMx53oA_kKQorM/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
Langkah 3 : Tambahkan JavaScript. Tambahkan kode JavaScript ini di atas </body>
<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader">Loading...</div>');
$(window).on("beforeunload", function() {
    $('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
 Simpan template...dan SELESAI

Sekian Artikel Saya tentang Membuat Loading Blog keren Dan Responsive.Semoga bermanfaat.
0

Template Blogger Sevida Free Premium template SEO Dan Valid HTML5

Template Blogger Sevida Free Premium template SEO Dan Valid HTML5, Halo Sob Sekarang Saya akan  Berbagi template Lagi nih Sob. Template PremiumzTemplate Blogger Sevida Free Premium template SEO Dan Valid HTML5. Template ini sangat dicari dan digemari oleh para blogger karena template ini template premium Jadi Hanya sebagaian orang saja yang memakai template ini, tapi tennang saja sob, Saya bagikan template Premium ini Secara Gratis tis tis tis

Sevida Template

DemoDownloads


Beberapa kelebihan Atau Fitur Template Ini ,, Waw Banayk bangets..
  • Responsive Design
  • Auto Featured Post from JSON (Slideshow)
  • Manual Featured Post Work with Image Widget(Slideshow) New
  • Support Advance Editor
  • Lightweight Auto read-more support third party image and youtube (option make it slideshow) New
  • Ajax load more post
  • Ajax Page Navigation New *
  • Cool blogger threaded comment (Support Google+ Comment)
  • JSON Search Result *
  • Lightweight Summary (option make it slideshow)
  • Two View Mode (List and Grid) width Cookies
  • Recent Comment Widget *
  • News Ticker Widget *
  • Related Post Widget *
  • Recent Post by Labels (3 Post Type (Slider, Vertical, Horizontal) support Random) New *
  • Optimize SEO
  • Archive Page *
  • Emoticon
  • Dropdown Menu
  • Top Social Icon
  • Custom Error 404 Page
  • Support RTL Language New
  • Social Share Plugin (Addthis) New
  • Compatible with major browsers (IE8+,Mozilla,Chrome,Safari)
  • Professional admin layout, help you easy work with blog layout.
Sekian Artikel Saya Tentang Template Blogger Sevida Free Premium template SEO Dan Valid HTML5. Semoga bermnafaat bagi Sahabat Ridwan Hex Semua.
1

Template Geekiesm Pro Seo Friendly Dan Valid HTML5

Selamat Datang Sob Di Blog Sederhana Ane Sekarang Saya Akan Sharetemplate Super keren Elgan dan Juga Valid HML5.

Geekiesm blogger templates


Beberapa fitur/kelebihan template ini:
  •     SEO Ready pastinya
  •     Desain sederhana saja
  •     Loading lumayan cepet
  •     Sudah Auto readmore
  •     Ada Artikel Terkait
  •     Tombol share juga
  •     Widget news ticker
  •     Pagination
  •     Dan lainnya
Ini Spesifikasi Template Nya :
  • Nama template Geekiesm
  • Dibuat Pada Tgl : 19 September 2013
  • Lisensi : Creativecommons
  • Platfrom : BLogspot/Blogger
  • Author : Aumkar Thakur
 Sekian Artikel Saya Tentang Template Geekiesm Pro Seo Friendly Dan Valid HTML5 Ini Semoga Bermnafaat.
0

Template SEO Fast Valid HTML5 CSS3 Ditambah versi Mobile

Template SEO
Halo Sob , Post Tentang Template Lagi Nih settelah kemarin share template red Devilz Buatan Ane Sendiri dan Woles Blogger Template milik Mas Sugeng Sekarang Saya Akan Share template Template SEO Fast Valid HTML5 CSS3 Ditambah versi Mobile Yang Saya dapatkan dari karaokebatak.blogspot.com. 

Template SEO ini Sangat SEO Frendly ringan loading dengan tampilan elegan dan rapi. Setelah melakukan pengujian dengan beberapa blog termasuk blog saya ini, template SEO frendly saya berfungsi maksimal membuat trafik blog saya semakin hari semakin meningkat. Tidak hanya SEO frendly, template keren :D ini juga memiliki tampilan seluler atau mobile view yang lumayan bagus dengan menu navigasi, popular post dan kategori label terlihat pada tampilan mobile/seluler.

Screenshoot Tampilan Seluler (Versi Mobile)
Template Blogger SEO Ready Dengan Tampilan Seluler



Template blogger SEO ini beberapa kelebihan Berikut :
  1. Meta Tag Deskripsi dan Meta Tag Keyword yang dinamis
  2. Breadcrumbs : breadcrumbs terindeks oleh google.
  3. Auto Readmore : Readmore otomatis ini tidak mengganggu atau berpengaruh pada laman blog.
  4. Artikel Terkait atau Related Post : Artikel terkait merupakan salah satu syarat penting agar template benar-benar SEO frendly. Artikel terkait pada template ini disertai dengan thumbnail atau gambar kecil yang membuat blog semakin menarik.
  5. Permalink Tag dibawah postingan.
  6. Share Facebook, Twitter dan Google Plus dibawah postingan
  7. Loading ringan dan cepat.
  8. Template ini bisa 2 Kolom bisa juga 3 kolom
  9. Threaded Comment (komentar bertingkat)
Jika tertarik silahkan download template blogger SEO ready dengan tampilan seluler ini dan pasang di blogmu.


Sekian Artikel Saya Tentang Template SEO Fast Valid HTML5 CSS3 Ditambah versi Mobile , Semoga Bermanfaat. jangan Lupa tinggalkan Komentarnya Ya.
0

Mengganti ScrollBar Blog dengan lebih Keren

Senin, 21 Oktober 2013
Assalamualaikum Wr.Wb
Setelah Kemarin Saya Berikan Turorial Untuk membuat Like Box Valid HTML5 Dan SEO Friendly.
Dan Share template Buatan Saya Sendiri yang Keren Dan SEO Friendly.Sekarang Saya Akan kasih Anda Tutorial untuk membuat Atau Mengganti Scroll Bar Blog Keren.

Menampilkan scrollbar yang berbeda, baik itu warna, ukuran dan bentuk, kalian cukup copy paste kode css scrollbar dibawah ini dan letakan diatas kode ]]></b:skin>, dalam beberapa template penempatan css scrollbar ini tidak berjalan dengan baik jika diletakan diatas kode ]]></b:skin> Jadi jika Pada Template Anda Tidak Terjadi Perubahan Apapun Ubah Tempat Kodenya Menjadi Dibawah <b:skin><![CDATA[

Dan Ini Kodenya :

/* Ridwanz Hex Scroll Bar CSS */
::-webkit-scrollbar {
width: 10px;
background: #cc3000;
-webkit-border-radius:10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #000000;
-webkit-border-radius:10px;
border-radius: 10px;
}

Dengan menggunakan kode tersebut akan menghasilkan scrollbar seperti terlihat pada kanan layar kotak scroll Blog Saya.

Untuk menyesuaikan Warna scroll dengan warna dasar blog, kalian bisa merubah pada bagian 

  • background dengan merubah kode warnanya yang Berwarna Hijau, 
  • ukuran pada kode width 10px Ganti Sesuka Hati kalian, 
  • dan bentuk pada kode border-radius 10px.
Sekian Artikel Saya Tentang Merubah Scroll bar.Blog Keren. Semoga Bermanfaat.

0

Membuat Like Box Facebook Valid HTML5 SEO

Membuat Like box Valid HTML5 sangatlah mudah. Tutor ini saya dapatkan dari blog kang Kudehen shabatkudhen.com. Namun disini saya ingin share barangkali ada yang membutuhkan gituh sama seperti saya ini yang pengen blognya Vallid HTML 5 terus. Baiklah langsung saja Ke Step By Stepnya :

Ridwan Hex Blog


1. Login ke akun blogger sobat.
2. Pilih Tata Letak
3. Pilih HTML/Javascript
4. Copy kode dibawah ini lalu pastekan ke kotak yang tersedia.


<script type="text/javascript">
document.write('<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fhex.blog&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23f7f7f7&amp;stream=false&amp;header=false&amp;appId=134154613417459" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:245px;width: 100%;background: transparent;" allowtransparency="true"></iframe>');
</script>


5. Save

Catatan : Ganti tulisan yang berwarna kuning dengan username atau id FP sobat.

* Agar valid HTML5 berikut caranya :
1. Pergi ke edit template.
2. Plih edit html
3. cari kode <b:include name='quickedit'/> yg ada pada widget yg tlah sobat tambahkan tadi.
4. Setelah ketemu,hapus kode tersebut.
5. Save and selesai..
0

Template Red Devilz Mirip Fast Magazine SEO Valid HTML5 Fast

Minggu, 20 Oktober 2013
Red Devilz Template Faster SEO Ready Valid HTML5 .  Selamat Datang Sob Di Blog Sederhana Ane Sekarang Ane mau Share Template Mirip Fsat Magazine Milik Mas-Sugeng Tapi Yang Mirip Hanya Navigasi Top Dan Navigasi Bawah Headernya Aja Kok .

Red Devilz Template

Template ini Buatan Ane Sendiri, Dan Dibagikan Kepada kalian Semua Dengan Suka Rela Alias gratis.. Free..
Tapi Apabila Ada yang ingin Donasii. Kirim Aja ke 082320290750 :D Ngarep :)..Dan Setelah Kemarin Ane Sahre Woles Blogger Template Milik Mas Sugeng.. Dan Blue template SEo Valid HTML5








Beberapa fitur/kelebihan template ini:

  •     SEO Ready pastinya
  •     Desain sederhana saja
  •     Loading lumayan cepet
  •     Sudah Auto readmore
  •     Ada Artikel Terkait
  •     Tombol share juga
  •     Widget news ticker
  •     Pagination
  •     Dan lainnya

Cara Setting Template Ini:

Sekian Artikel saya Tentang Template Red Devilz Mirip Fast Magazine Template SEO Valid HTML5 Fast Semoga Bermnafaat
0

Blue SEO Template Blogger Valid HTML5

Kamis, 17 Oktober 2013
Halo Sob Setelah Kemarin Share Woles Template Blogger Milik Mas-Sugeng Yang Mirip Sama Template Premium Fast magazine. Sekarang Ane Mau Sahre Template Gratis lagi Yang SEO Friendly Pastinya. .
Namnya Blue SEO Template Blogger.
Ini Penampakannya Gan


blue template seo

Features:
    • Responsive Layout 
    • Ads Ready?
    • 2 Columns Layout
    • 3 Columns Footer
    • Professional
    • One Right Side-bar
    • Works with All Browsers
    • Beautiful Header
    • Gray 
    • Blue
    • Stunning Appearance
    • dll.

      Details Template  :

      Platform                           Blogger / Blogspot

      Release Date:                   7 , October 2013

      Template Name                Blue Seo Blogger Template

      Template Author               http://lovelybloggingtricks.blogspot.com

      Designer                           Muhammad Abdul Basit


      Tags :    blue seo free blogger template, blue seo Template free download for blogger, free blue blogger templates, freemium blogger template gallery, templates for blogger, templates-blogger, templates for blog, blogspot templates, blog templates, templates for blog, templates para blogspot, blog templates for blogspot, web design, webdesign, website templates, xml, themes, designs, free templates, layouts, blog theme. premium themes, free template downloads 
      0

      Woles Blogger Template Super SEO Fast

      Selamat Datang Sob saekrang ane mau share Template Gratisan Yang Lumayan Keren Namanya Woles Template :D nama Nya Unik Dan Menarik.

      Woles Blogger Template
      Woles Free Blogger Template
      Beberapa fitur/kelebihan template ini:

      •     SEO Ready pastinya
      •     Desain sederhana saja
      •     Loading lumayan cepet
      •     Sudah Auto readmore
      •     Ada Artikel Terkait
      •     Tombol share juga
      •     Widget news ticker
      •     Pagination
      •     Dan lainnya

      Cara Setting Template Ini:

      Ada  beberapa penyesuaian yang perlu dilakukan pada template ini agar fitur-fitur pada template ini bisa berjalan dengan normal. Di antarnya adalah

      1.Setting Menu Navigasinya


      Masuk ke dashboard > pilih blog sobat > Template > Edit HTML. Setelah itu cari kode ini:
      <ul  
      <li><a href="/">Home</a></li> <li><a href="#">News</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li></ul>
      Silakan sobat ganti tanda # (tanda pagar) dengan URL yang ingin sobat tuju. 


      2.Widget Breaking News
      Masuk Edit Html

      http://wolestemplate.blogspot.com/feeds/posts/default

      dan ganti yang berwarna merah sesuai dengan alamat blog sobat.

      3.  Lain-Lain

      Masuk ke dashboard > pilih blog sobat > Template > Edit HTML. Setelah itu cari dan ganti YOUR-FACEBOOK-ID  dengan ID facebook milik sobat.
        0

        Menu Dropdown Keren Mirip Template Fast Magazine + Search

        Minggu, 13 Oktober 2013
        Membuat Menu Dropdown Keren Mirip Template Fast Magazine, Meskipun udah Banyak Yang share menu Dropdown Keren yang lainnya Tapi ane tetep share aja deh Nih Menu Dropdown Mirip Template Yang Mantep Yang Udah Terkenal Se Antero Blogger :D

        Menu Dropdown Keren Ini Mirip Banget Sama Menu navigasi Template Fast Magazine Mas Sugeng. .
        Penampakannya Seperti Dibawah Ini :


        Jika Anda Tertarik Langsung Ke Step Nya Aja..

        1.Masuk Ke Akun Blogger Sobat.> Pilih Menu Template Dan Edit HTML

        2.Cari Kode ]]></b:skin> Dan Copast Code Berikut. Simpat Tepat Di Atas Kode ]]></b:skin>



        Lihat Kode Paling Atas Dibawah  /*  Menu Navigasi Ridwan Hex Blog  */
        Ada Code #navigation { height:38px;width:990px; Ganti  Kode Berwarna Merah Sesuai Lebar Template Sobat, Bila Terlalu Panjang Tinggal Ganti Saja 990 Menjadi Berapalah Lebih Kecil

        3.Jika Pada Template Anda Sudah Ada Menu Navigasi Nya Anda Tinggal Ganti Saja Code Menu Navigasi Anda Dengan Kode Berikut Ini.Atau Cari Kode.

        header>  : untuk menempatkan menu di atas nama blog
        /header> : untuk menempatkan menu di bawah nama blog

        • Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode</header>



        4.Ganti # , Menu , Dan Sub Menu .Sesuai Keinginan Anda.

        5.Simpan Template Sobat...

        Bila Masih Belum Mengerti Tinggalkan Komentar Dibawah.

        Sekian Arikel Saya Tentang Menu Dropdown Keren Mirip Template Fast Magazine + Search mirip Mas-Sugeng.Semoga Bermanfaat ..