Cara Membuat Navigasi Breadcrumb Bergaya Ala Triangle

Cara Membuat Navigasi Breadcrumb Bergaya Ala Triangle

Breadcrumb merupakan salah satu fitur blog yang yang cukup penting. Dan tentunya, Navigasi Breadcrumb sudah lumrah anda ketahui selama berkecimpung dan membangun blog di dunia blogger. Untuk kali ini, sebuah tips Cara Membuat Navigasi Breadcrumb Bergaya Ala Triangle. Selain fungsi, juga mempunyai tampilan yang keren, menarik, dan elegant. 

Sebelumnya, sedikit gambaran breadcrumb untuk blog/web, yakni, merupakan salah satu bentuk navigasi yang diciptakan guna mempermudah siapapun untuk kemudian bisa melacak posisi atau asal sebuah dokumen (halaman). Saat ini, peran breadcrumb dalam sebuah blog atau website sudah dianggap penting, itu sebabnya banyak orang meyakini bahwasanya breadcrumb bisa dimanfaatkan sebagai alat jitu dalam mencapai SEO yang lebih baik.

Dan ternyata, breadcrumb berpenampilan ‘wah’ ternyata bisa diciptakan dengan CSS murni. Asumsikan saja jika kita ingin menyisipkan sentuhan menarik seperti panah kecil pada setiap sisi breadcrumb sekaligus membubuhi efek hover berwarna ke dalamnya. Belum lagi jika kita tambahkan pointer event untuk menyempurnakan hasilnya. Tentu ini akan terkesan ‘highly usable interface’. Dan dengan begitu, penampilan breadcrumb akan terlihat lebih unik dan memiliki ciri khas tersendiri.

Baiklah, untuk mewujudkan membuat  Navigasi Breadcrumb Bergaya Ala Triangle  dengan CSS murni, silahkan simak langkah-langkahnya dan jujur tips ini saya dapat dari : http://topspot-official.blogspot.com.

Berikut  Demo Navigasi Breadcrumb Bergaya Ala Triangle 

Dan berikut langkah sedehana memasang Navigasi Breadcrumb Bergaya Ala Triangle  dengan CSS murni di blog anda.

 Code CSS: 

.breadcrumb { margin:5px 0!important; list-style: none; overflow: hidden; font-size: 10px; } .breadcrumb li { padding:0!important; float: left; } .breadcrumb li a { color: white; text-decoration: none; padding: 10px 0 10px 50px; background: brown; background: hsla(34,85%,35%,1); position: relative; display: block; float: left; } .breadcrumb li a:after { content: ” “; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid hsla(34,85%,35%,1); position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb li a:before { content: ” “; display: block; width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadcrumb li:first-child a { padding-left: 10px; } .breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); } .breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); } .breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); } .breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); } .breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); } .breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); } .breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); } .breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); } .breadcrumb li:last-child a { color: black; pointer-events: none; cursor: default; } .breadcrumb li a:hover { background: hsla(34,85%,25%,1); } .breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }

Untuk membuat panah kecil seperti bentuk segitiga/triangle sebagai dekorasi nya, kita akan menggunakan elemen :after. Lebih jelasnya, anda harus menelusuri kode  .breadcrumb li a:after {  pada script di atas. Elemen tersebut sekaligus berfungsi untuk menyeleksi bagian-bagian yang dikenali sebagai list. Disinilah kita akan mulai memahami bahwasanya ketika dilakukan penyeleksian, maka pada saat itulah muncul sebuah batasan tertentu yang mana akan ditunjukkan dengan indikasi seperti tanda panah kecil berbentuk segitiga. Ingin menggunakan nya? Salin script tersebut di atas kode  ]]></b:skin>  pada template anda. Setelah selesai, ikuti langkah kedua.

 Code HTML Markup:  

<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;’> <ul class=’breadcrumb’><li><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a></li><li><a><data:blog.pageName/></a></li></ul> <b:else/> <b:if cond=’data:blog.pageType == &quot;item&quot;’> <b:loop values=’data:posts’ var=’post’> <b:if cond=’data:post.labels’> <ul class=’breadcrumb’ xmlns:v=’http://rdf.data-vocabulary.org/#’> <li typeof=’v:Breadcrumb’><a expr:href=’data:blog.homepageUrl’ property=’v:title’ rel=’v:url’>Home</a></li> <b:loop values=’data:post.labels’ var=’label’> <li typeof=’v:Breadcrumb’><a expr:href=’data:label.url’ property=’v:title’ rel=’v:url’><data:label.name/></a></li> </b:loop> <li><a><data:post.title/></a></li> </ul> <b:else/> <ul class=’breadcrumb’><li><a expr:href=’data:blog.homepageUrl’ rel=’tag’>Home</a></li><li><a>Unlabelled</a></li> <li><a><data:post.title/></a></li></ul> </b:if> </b:loop> <b:else/> <b:if cond=’data:blog.pageType == &quot;archive&quot;’> <ul class=’breadcrumb’> <li><a expr:href=’data:blog.homepageUrl’>Home</a></li><li><a>Archives for <data:blog.pageName/></a></li> </ul> <b:else/> <b:if cond=’data:blog.pageType == &quot;index&quot;’> <ul class=’breadcrumb’> <b:if cond=’data:blog.pageName == &quot;&quot;’> <li><a expr:href=’data:blog.homepageUrl’>Home</a></li><li><a>All posts</a></li> <b:else/> <li><a expr:href=’data:blog.homepageUrl’>Home</a></li><li><a>Posts filed under <data:blog.pageName/></a></li> </b:if> </ul> </b:if> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id=’main’ var=’top’> <b:include data=’posts’ name=’breadcrumb’/>

Inilah struktur dasar dari keseluruhan script pembentuk. Bagian ini sudah dilengkapi class yang disebut dengan breadcrumb. Script pada bagian ini bisa anda salin ke dalam template blog anda. Caranya masuk ke edit html > kemudian cari kode  <b:includable id=’main’ var=’top’>  > lalu gantikan kode tersebut dengan script di atas. Amati hasilnya!

  Catatan Tambahan  

  • Anda masih bisa meng-kustomisasi gaya navigasi breadcrumb di atas sesuai keinginan anda. Adapun elemen-elemen yang masih bisa dikreasikan, diantaranya; warna, bentuk, dan font.
  • Demo lainnya yang sejenis bisa anda dapatkan pada tautan ini : SEOdexing dan http://fiddle.jshell.net/danielbenny/.

Cara Membuat Widget Google+ Valid HTML5

Cara Membuat Widget Google+ Valid HTML5
Valid HTML5

Tidak semua widget blogger Valid HTML5. Salah satunya seperti widget penting Google plus. Padahal, bagi kebanyakan blogger saat ini, validasi THML template blog sudah mulai dianggap penting. Untuk itu, maka perlu dilakukan modifikasi template agar Valid HTML5.

Bagi anda yang mau blognya Valid HTML5 tapi widget Google+ yang membuat blog anda tidak valid, nah solusinya dapat dilakukan melalui langkah-langkah sederhana berikut ini :

  •     Pertama, login ke akun blogger
  •     Klik “Tata Letak”
  •     Kemudian “Tambah Gadget”
  •     Pilih “HTML / Javascript”
  •     Lalu copy javascript dibawah ini :

<!– Place this tag where you want the +1 button to render. –> <div class=”g-plusone” data-size=”medium”></div> <!– Place this tag after the last +1 button tag. –> <script type=”text/javascript”>   window.___gcfg = {lang: ‘id’};   (function() {     var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;     po.src = ‘https://apis.google.com/js/plusone.js’;     var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);   })(); </script>

  •     Kemudian letakan/paste kode diatas kedalam kotak isian “HTML/Javascript”.
  •     Lalu simpan.

Demikian langkah sederhana yang dapat dilakukan agar template blog Valid HTML5

Cara membuat Responsive Image untuk Blogger Template Blogspot

Cara membuat Responsive Image untuk Blogger Template Blogspot
Cara membuat Responsive Image untuk Blogger Template Blogspot

Responsive Image Tricks For Blogger | Artikel ini adalah tips tentang cara mengubah semua gambar yang ada di blog menjadi responsive. Karena, pada beberapa template blog responsive sendiri terkadang image/gambar sering belum ikut tersentuh responsive desain. Apalagi template yang tidak responsive, sudah pasti itu.

Sehingga, gampar pendukung postingan yang ditampilkan pada gadget seperti Tab, Handphone, atau lainnya, sering terpotong atau tidak terlihat semua. Dan jelas hal ini sangat menggangu tampilan. Untuk itu, kita perlu sedikit memodifikasi template dengan melakukan beberapa editing code HTML pada blog.

Kita langsung saja ke pembahasan inti; DEMO Responsive Image

Pertama, login blogger terus edit HTML.

Lalu cari kode :

]]></b:skin>

Dan tambahkan kode css dibawah ini diatasnya:

img {
display: block;
max-width:100%;
height:auto;
width:auto9;} 

Setelah itu cari kode:

</head>

dan tambahkan javascript dibawah ini diatas kode tersebut:

<script type=’text/javascript’>
      /*<![CDATA[*/

    var cwResImg = function () {
  var cwBpArry = [1382, 992, 768, 480], //Image breakpoint arrays
      currIndex,
      cwResImgVal = Math.max(screen.width,screen.height),
      hdpi = window.devicePixelRatio > 1 ? window.devicePixelRatio : 1,
      rwdImgId = “rwdimg-“+Math.floor(Math.random()*1000),
      tpl='<img src=”{src}” alt=”{alt}” title=”{title}” id=”{rwdImgId}” {attributes}>’;

  cwBpArry.push(cwResImgVal);
  cwBpArry.sort(function(a,b){return a-b});

  if(Array.prototype.indexOf){
      currIndex = cwBpArry.indexOf(cwResImgVal) + 1;
  }else{
      for(var i in cwBpArry){
          if(cwBpArry[i] === cwResImgVal){
              currIndex = parseInt(i)+1;
          }
      }       
  }

  cwBpArry[currIndex] = cwBpArry[currIndex] || cwBpArry[currIndex-1];

  var imgWid = Math.max.apply(Math, cwBpArry) <= cwBpArry[currIndex] ? cwBpArry[currIndex-2] : cwBpArry[currIndex];

  return {
      imgWid : imgWid,
      hdpi: hdpi,
      id:rwdImgId,
      rwdImg:function(arg){
         
          var src = arg.src || arguments[0] || ”,
              src = src.replace(//sd*//, ‘/s’+imgWid * hdpi+’/’), //picasa image size replacing (s340 to device width)
              title = arg.title || arg.alt || arguments[1] || ”,
              alt = arg.alt || arg.title || arguments[2] || arguments[1] || ”,
              attributes = arg.attr || arguments[3] || ”,
              img = tpl.replace(‘{src}’,src).replace(‘{title}’,title).replace(‘{alt}’,alt).replace(‘{rwdImgId}’,rwdImgId).replace(‘{attributes}’,attributes);
              document.write(img)
      }
  };
}()
/*]]>*/</script>

setelah itu cari kode

</body>

dan tambahkan script dibawah ini di atasnya (ini digunakan untuk mengatasi terjadinya fallback jika javascript tidak support di peramban)

<noscript>
  <img src=”http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s720/Webpagetest-IE8-Octopress-Default-waterfall.png” alt=”Responsive images test”/>
</noscript>
<script>
  cwResImg.rwdImg(“http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png”, ‘Responsive images text script’);

  —or—-

  cwResImg.rwdImg({src:’http://lh6.googleusercontent.com/-nI33VLdtmFo/UN9MmPN6bHI/AAAAAAAAFEE/1uJBJ7-plEs/s450/Webpagetest-IE8-Octopress-Default-waterfall.png’, alt:’Responsive images text script’, title:’Responsive images text script’});
</script>

Demikian Cara membuat Responsive Image untuk Blogger Template Blogspot. Terimakasih atas kunjungannya dan semoga bermanfaat.

credits : http://decodize.com/html/simple-responsive-image-technique/

Cara Menghapus Tulisan Tampilkan Posting dengan Label

Menghapus Tulisan Tampilkan Posting dengan Label – Ketika kita meng-klik salah satu label pada blog, biasanya di atas blog akan muncul tulisan ‘Tampikan posting dengan label …..Tampilkan semua posting’. Contohnya seperti pada gambar di bawah ini:

           Tampilkan Posting dengan Label Blogger News. Tampilkan Semua Posting      

Cara Menghapus Tulisan Tampilkan Posting dengan LabelSebagian besar diantara kita mungkin ada yang enjoy saja dan tidak merasa bermasalah dengan tulisan tersebut. Tapi, mungkin walau pun sedikit, beberapa penggila tampilan blog indah, merasa sangat terganggu dengan tulisan tersebut. Mereka ingin, blog tampil clean dan presisi. Tidak ada embel-embel yang mengganggu. 
Nah, jika anda termasuk dalam kategori para blogger yang sedikit tersebut dan ingin menghilangkan tulisan tampilkan posting diatas label tersebut. Atau lebih tepatnya menyembunyikan tampilan tersebut sangat mudah.
Berikut langkahnya: 
1. Login ke Blogger.
2. Masuk ke Template ► Edit HTML
3. Simpan kode ini di atas ]]></b:skin>

.status-msg-wrap{display:none}

4. Simpan Template.

Untuk mencobanya, silahkan klik salah satu label pada blog sobat… Semoga bermanfaat… 

Cara Membuat Persentase pada Scrollbar

Cara Membuat Persentase pada ScrollbarMembuat Persentase pada Scrollbar – Pertama kali saya melihat style persentase scrollbar pada blog, saat berkunjung pada blog milik Kang Ismet. Terlihat keren dan unik. Itu menurut saya..

Memang, persentase scrollbar style ini bukan fitur penting bagi sebuah blog. Namun dapat memperindah tampilannya. Tergatung selera masing-masing. Dan, tidak ada salahnya untuk mencoba menerapkan persentase pada scrollbar ini.

Fungsinya, dengan menambahkan persentase, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll, apabila sampai bawah di scroll maka akan menjadi 100%.

Untuk membuatnya silahkan ikuti langkah-langkah sederhana berikut ini:

Langkah 1 : Seperti biasa masuk ke Template dan Edit HTML. Simpan kode ini di atas ]]></b:skin> 

Saran, biasakan untuk membackup template sebelum melakukan editing pada template blog. Gunanya untuk menghindari hal-hal yang tidak diinginkan jika terdapat kesalahan dalam editing template.
#scroll {
  display: none;
  position: fixed;
  top: 0;
  right: 20px;
  z-index: 500;
  padding: 3px 8px;
  background-color: #2187e7;
  color: #fff;
  border-radius: 3px;
}
#scroll:after {
  content: ” “;
  position: absolute;
  top: 50%;
  right: -8px;
  height: 0;
  width: 0;
  margin-top: -4px;
  border: 4px solid transparent;
  border-left-color: #2187e7;
}

Langkah 2 : Simpan kode ini di bawah </head>

<div id=’scroll’></div>

Langkah 3 : Simpan JavaScript ini di atas </body>

<script type=’text/javascript’>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
   var viewportHeight = $(this).height(),
       scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
       progress = $(this).scrollTop() / ($(document).height() – viewportHeight),
       distance = progress * (viewportHeight – scrollbarHeight) + scrollbarHeight / 2 – $(‘#scroll’).height() / 2;
    $(‘#scroll’)
        .css(‘top’, distance)
        .text(‘ (‘ + Math.round(progress * 100) + ‘%)’)
        .fadeIn(100);
    if (scrollTimer !== null) {
        clearTimeout(scrollTimer);
    }
    scrollTimer = setTimeout(function() {
        $(‘#scroll’).fadeOut();
    }, 1500);
});
//]]>
</script>

Simpan Template. Selamat… Jika langkah-langkah yang anda lakukan tidak salah maka blog anda seharusnya sudah ada persentase di samping scrollbar. 

Cara Membuat Efek Loading Keren di Blog

Cara Membuat Efek Loading Keren di Blog
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. 

Mungkin anda juga sering melihat efek loading di beberapa blog. Menurut saya efek tersebut selain sedikit menghilangkan rasa jenuh menunggu juga akan menambah cantik penampilan blog.

Untuk membuatnya, silahkan 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(‘http://4.bp.blogspot.com/-4_hdi8Ph8fE/UYUz5HumQ7I/AAAAAAAAEBE/6KV17KP4RQg/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(‘http://4.bp.blogspot.com/-4_hdi8Ph8fE/UYUz5HumQ7I/AAAAAAAAEBE/6KV17KP4RQg/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