baca in: April 2014

Membuat posting di homepage warna warni

salam sahabat blogger yang ganteng - ganteng dan cantek, kali ini saya mau share tentang cara bagaimana agar tampilan postingan di halaman depan atau homepage kita bisa berwarna warni. buat sobat blogger yang tertarik dengan tampilan ini dan ingin memasang di blognya agar tampil menarik tanpa mengganti template silahken di coba dan di kreasikan sesuai keinginan masing - masing. dalam share kali ini saya hanya akan memberi trik simplenya menggunakan javascript nanti hasilnya agar lebih bagus bisa sobat sesuaikan sendiri.

pertama, silahkan buka editor template blogger sobat jangan lupa untuk mencegah dan jaga jaga dari adanya kesalahan backup terlebih dahulu template sobat agar nanti lebih mudah untuk mengembalikan seperti semula bila terjadi hal hal yang tidak sesuai langkah.

sekarang mari kita mulai bagaimana caranya, cari kode di bawah ini

<b:includable id='post' var='post'> /* kode tag pembuka */

       .......................
       ......bla bla bla......
       .......................

</b:includable>  /* kode tag penutup */

setelah di temukan silahkan ganti seluruh kode yang terdapat di antara kode di atas dengan kode di bawah ini

<article class='post hentry'>    
<b:if cond='data:blog.pageType == &quot;item&quot;'>       
<b:if cond='data:post.title'>      
<h2 class='post-title entry-title'>      
<b:if cond='data:post.link'>        
<a expr:href='data:post.link'><data:post.title/></a>      
<b:else/>        
<b:if cond='data:post.url'>          
<b:if cond='data:blog.url != data:post.url'>            
<a expr:href='data:post.url'><data:post.title/></a>          
<b:else/>            
<data:post.title/>          
</b:if>        
<b:else/>          
<data:post.title/>        
</b:if>      
</b:if>      
</h2>    
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>      
<b:if cond='data:post.title'>      
<h2 class='post-title entry-title'>      
<b:if cond='data:post.link'>        
<a expr:href='data:post.link'><data:post.title/></a>      
<b:else/>        
<b:if cond='data:post.url'>          
<b:if cond='data:blog.url != data:post.url'>            
<a expr:href='data:post.url'><data:post.title/></a>         
<b:else/>            
<data:post.title/>          
</b:if>        
<b:else/>          
<data:post.title/>        
</b:if>      
</b:if>      
</h2>    
</b:if></b:if>    
<div class='post-header'>    
<div class='post-header-line-1'/>    
</div>    
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>      
<b:if cond='data:blog.pageType != &quot;item&quot;'> 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'> 
<div class='gambar-depan'>   
<b:if cond='data:post.firstImageUrl'>    
<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/></a>   
<b:else/>    
<b:if cond='data:post.thumbnailUrl'>     
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>    
<b:else/>    
<a expr:href='data:post.url' expr:title='data:post.title'><img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyJxn6T3RlghnejEELafD7BimRQMYLEjP3_VSH8EEpLi7z9q-txsb3wST7LdfZRI__7RhVsUn1bQJdbUuEcb-0KUkbZmDirvlkzdj6oGJ2nZp102Zb0pUPYxsQZwU3UtMwr7jgA8ozeqU/s1600/mac.jpg'/></a>    
</b:if>   
</b:if>      
<b:if cond='data:post.labels'>   
<div class='post-label'>                                    
<b:loop values='data:post.labels' var='label'>                           
<a expr:href='data:label.url + &quot;?max-results=9&quot;' rel='tag nofollow'><data:label.name/></a>              
<b:if cond='data:label.isLast != &quot;true&quot;'/>            
</b:loop>                 
</div>   
</b:if>  
</div>
<b:if cond='data:post.title'>      
<h2 class='post-title entry-title'>      
<b:if cond='data:post.link'>        
<a expr:href='data:post.link'><data:post.title/></a>      
<b:else/>       
<b:if cond='data:post.url'>          
<b:if cond='data:blog.url != data:post.url'>            
 <a expr:href='data:post.url'><data:post.title/></a>          
  <b:else/>            
 <data:post.title/>          
</b:if>        
 <b:else/>          
  <data:post.title/>        
</b:if>      
</b:if>      
</h2>    
</b:if>
<div class='post-info'>     
  <div class='post-info-icon admin'>        
    <b:if cond='data:top.showAuthor'>        
      <span class='vcard'>     
        <span class='fn'>           
          <a href='http://www.blogger.com/profile/09882050325461413449' target='_blank'><data:post.author/></a>     
        </span>     
      </span>     
    </b:if>     
</div>     
<div class='post-info-icon jam'>        
<abbr class='updated published' expr:title='data:post.timestampISO8601'>     
<data:post.timestamp/>     
</abbr>     
</div>
<div class='post-info-icon komentar'>           
<b:if cond='data:post.allowComments'>         
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> 
<b:if cond='data:post.numComments == 0'> Belum ada komentar </b:if> 
<b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'> 
<data:post.numComments/> Komentar </b:if>      
</a>      
</b:if>     
</div>  
</div>  
<data:post.snippet/> 
<b:else/>  
<data:post.body/> </b:if><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'>       
<div class='post-info' style='padding:0 0 0 0 !important;margin:-10px 0 20px 0 !important;border-top:none !important;border-bottom:none !important;'>     
<div class='post-info-icon admin'>        
<b:if cond='data:top.showAuthor'>        
<span class='vcard'>     
<span class='fn'>     
<a href='http://www.blogger.com/profile/09882050325461413449' rel='publisher' title='dafin defandaky'>           
<data:post.author/>     
</a>     
</span>     
</span>     
</b:if>     
</div>          
<b:if cond='data:post.labels'>     
<div class='post-info-icon label'>                                        
<b:loop values='data:post.labels' var='label'>                
<a expr:href='data:label.url + &quot;?max-results=5&quot;' rel='tag nofollow'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>                
</b:loop>                   
</div>     
</b:if>     
<b:if cond='data:post.dateHeader'>     
<div class='post-info-icon tanggal'>        
<abbr class='updated published' expr:title='data:post.timestampISO8601'>     
<data:post.dateHeader/>     
</abbr>     
</div>     
</b:if>     
<div class='post-info-icon komentar'>           
<b:if cond='data:post.allowComments'>         
<a expr:onclick='data:post.addCommentOnclick' href='#comment-form'> <b:if cond='data:post.numComments == 0'> Belum ada komentar </b:if> <b:if cond='data:post.numComments == 1'> 1 Komentar </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Komentar </b:if> 
</a> 
</b:if>
</div>
</div>
</b:if>
 <data:post.body/>
</b:if>
 <div style='clear: both;'/> 
  <!-- clear for photos floats -->
   </div>
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>  
 <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'></div>
     <div class='post-footer-line post-footer-line-2'></div>
      <div class='post-footer-line post-footer-line-3'>        
        <span class='post-location'>
        <b:if cond='data:top.showLocation'>
          <b:if cond='data:post.location'>
            <data:postLocationLabel/>
            <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
          </b:if>
        </b:if>
      </span> </div>
    </div>   
  </b:if>
</article>

tambahkan css berikut di template sobat bersama css yang lain

/* post homepage warna warni */
.gambar-depan{
  border:none;
  box-shadow:none;
  width:250px;
  height:175px;
  text-align:center;
  float:left;
  margin:-32px 15px -30px -22px;
  position:relative;
  background:#993333;
}

.gambar-depan img{
  padding:0;
  width:80px;
  height:80px;
  border:8px solid #000;
  border-radius:100px 100px;
  margin-top:33px;
}

.gambar-depan img:hover{
  border:5px solid #333;
  border-radius:100px 100px;
}

.gambar-depan:before{
  content:&quot;&quot;;
  width:0;
  height:0;
  position:absolute;
  top:45%;
  right:0;
  border:7px solid transparent;
  border-color:transparent #fff transparent transparent;
}

.db-merah .gambar-depan {background:#ff0000;}
.db-biru .gambar-depan {background:#0000cc;}
.db-orange .gambar-depan {background:#ff3300;}
.db-kuning .gambar-depan {background:#ffcc00;}
.db-ungu .gambar-depan {background:#660099;}
.db-hijau .gambar-depan {background:#006600;}
.db-coklat .gambar-depan {background:#663300;}
.db-pink .gambar-depan {background:#ff0033;}

.post-label{position:absolute;top:15px;right:0;z-index:99;}
.post-label a{font-family: &#39;Oswald&#39;, Verdana,Sans-serif;text-transform:uppercase;background-color:#0099ff;color:#fff;font-size:10px;display:block;float:left;padding:4px 8px;}
.post-label:first-child a {border-radius:5px 0 0 0}
.post-label a:hover{background:#996600;}
.post-info-icon{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-oH67rByXKDgg1DvqAH-WGdEx5P34iUSo578xcWpZbgy2WtYHDV-d9gLpo4oAUHIX14hUdZsrchHGirt9lY-txAfGHTYF98g3v9kjuIMlC1pZa_pHKymquiwWy9cPnZiitBFs8nGW1dw/s1600/icnall.png);background-repeat:no-repeat;}
.post-info{display:block;margin:5px 0 5px 0px;padding:3px 0;color:#999;line-height:1.6em;border-top:1px dotted #e2e2e2;border-bottom:1px dotted #e2e2e2;font-size:11px;overflow:hidden;}
.post-info a{color:#999;}
.post-info-icon{display:inline-block;float:left;margin:0 12px 0 0;}
.post-info a:hover{color:#000;}
.admin{background-position:0 1px;height:16px;padding:0 0 0 17px;}
.tanggal{background-position:0 -32px;height:16px;padding:0 0 0 17px;}
.jam{background-position:0 -98px;height:16px;padding:0 0 0 17px}
.komentar{background-position:0 -132px;height:16px;padding:0 0 0 17px;}
.label{background-position:0 -166px;height:16px;padding:0 0 0 17px;}

kemudian letakkan kode di bawah ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <style>
      .post h2{
         font-size:19px;
         margin:0px; !important;
         margin-bottom:5px !important;
         font-weight:400;
         line-height:1.4em;
         color:#4a4a4a
      }
      .post{
         font-weight:400;
         font-size:13px;
         border:1px solid #ddd;
         padding-bottom:5px;
         box-shadow: inset 0 -1px 0 rgba(163, 163, 163, 0.8), 0 1px 3px rgba(163, 163, 163, 0.4);
      }
    </style>
  </b:if>
</b:if>

Silahkan anda sesuaikan sendiri css di atas agar sesuai dengan tampilan homepage blog sobat atau keinginan agar terlihat lebih menarik.

langkah terakhir letakkan kode javascript dibaah ini di atas kode </head>

<script type='text/javascript'>
$(window).ready(function(){
  $('.post').each(function(){
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-merah')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-biru')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-orange')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-kuning')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-ungu')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-hijau')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-coklat')}
      else 
    if($(this).find('.post-label a:contains(label-anda)').length){$(this).addClass('db-pink')}
  })
});
</script>

silahkan ubah label-anda dengan label posting blog yang anda inginkan, pastikan label sesuai agar berjalan dengan baik

setelah semua langkah di atas telah di terapkan silahkan simpan perbuhan template yang sudah anda buat dan lihat hasilnya.

Sekian saja share dan trik membuat posting di homepage warna warni, semoga berguna dan bermanfaat...

Membuat efek linknudge pada label blog

Salam sobat blogger, masih senantiasa berbagi untuk sobat semua dan kali ini saya akan share tentang membuat efek linknudge pada label posting blogger. walau pun trik ini sebenarnya dapat di terapkan menggunakan css yang pernah saya tulis disini, namun saya kali ini akan berbagi trik membuat linknudge menggunakan jquery.

buat sobat yang memasang label dengan style biasa atau could bawaan blogger, trik ini bisa di gunakan untuk menambah tampilan label sobat menjadi sedikit lebih unik walaupun tidak begitu canggih :-D...

langsung saja kita mulai bagaimana cara membuat linknudge pada label blog kita:

Pertama, pastikan template sobat sudah terpasang jquery seperti di bawah ini

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

lalu buka editor template blog sobat, jangan lupa untuk berjaga - jaga dari terjadinya kesalahan selalu backup template ketika sedang melakukan perubahan

cari kode tag </head>, gunakan ctrl+f untuk memudahkan pencarian. Kemudian copy kode di bawah ini Dan letakkan di atas kode </head>.

<script type='text/javascript'>
    var dur = 400; // kecepatan efek geser
    $(document).ready(function() {
        $('a.linknudge, .Label ul li a').hover(function() {
            $(this).animate({
                paddingLeft: '25px' // jarak kiri link label
            }, dur);
        }, function() {
            $(this).animate({
                paddingLeft: 0
            }, dur);
        });
    }); // penutup Jquery Script
</script>

Silahkan di sesuaikan yang sudah saya beri keterangan sesuai keinginan anda atau serasi dengan template milik blog sobat

setelah itu simpan template sobat, lalu lihat hasilnya.

trik ini bisa juga di terapkan dalam hal lain, misalnya seperti menu navigasi dan lainnya.

<nav class='menu-db-contoh'>
  <li><a class='linknudge' href='#'>contoh</a></li>
  <li><a class='linknudge' href='#'>contoh</a></li>
  <li><a class='linknudge' href='#'>contoh</a></li>
  <li><a class='linknudge' href='#'>contoh</a></li>
</nav>

tampilan animasi tidak hanya bisa di beri efek jarak kiri tetapi bisa di tambah dengan efek tertentu jadi silahkan di kreasikan sendiri untuk apa saja dan efeknya.

demikian saja share saya kalini ini tentang membuat efek linknudge pada label blog semoga berguna dan bermanfaat...

Cara Membuat Recent Post Blog Warna - Warni

Oke sobat blogger semuanya, kembali lagi nih saya akan bagikan tutorial blog update terbaru pastinya. Kali ini akan saya share tentang cara membuar recent post warna-warni. Cara buatnya sangat mudah kok, mirip-mirip dengan tutorial membuat popular post warna-warni. Dan keuntungannya memasang widget ini tentunya untuk mempromosikan postingan terbaru kita lewat sidebar di samping blog.

Cara Membuat Popular Post Warna-Warni

Pernahkah sobat lihat ada blog yang di bagian sidebarnya ada widget popular post warna-warni. Tertarik bikin yang seperti di blog sobat tidak??. Kalo sobat tertarik maka praktekin aja tutorial dari Oplosanblog kali ini.

Cara Membuat Popular Post Warna-warni
1. Login blogger
2. Masuk ke tab menu Template > Edit HTML
3. Search kode ]]> , kemudian copypastekan kode berikut di atasnya

Cara Mudah Membuat Menu Accordion di Sidebar Blog

Sore sobat Oplosanblog semuanya. Kali ini saya akan memberikan tutorial cara membuat menu accordion yang simple dan mudah tanpa harus Edit HTML. Untuk sumbernya saya dapat dari blognya maskolis. Untuk tampilannya sendiri bagus menurut saya karena bisa memperingkas tampilan blog sobat. Jadi lebih rapi juga. Bagi yang tertarik buat silahkan ikutin tutorial saya di bawah ya.

Cara Mudah Membuat

Cara Membuat Widget Parse HTML di Blogspot

Dalam dunia blogging pasti akan dibutuhkan yang namanya koding. Misal untuk memasang iklan, atau mengubah tampilan template blognya. Kadang kala kode HTML yang ingin dipasangkan akan menjadikan template error/tidak terbaca, supaya kode-kodenya bisa klop dan terbaca maka perlu di parsekan lewat widget yang akan kita buat ini. Untuk tampilannya setelah jadi akan seperti ini nanti :

Cara

Cara Membuat Artikel Terkait di Bawah Postingan dengan Gambar Part II

Melanjutkan postingan saya yang terdahulu tentang cara menampilkan artikel terkait dengan gambar, kali ini tutorialnya mirip-mirip dengan yang dulu itu namun tampilannya berbeda lebih memanjang ke bawah, bukan ke samping. Tentunya lebih enak dilihat lah kalo saya nilai sih. wkwkwk..

Dan disini saya bikin versi part II nya yah karena judulnya sendiri sama dengan postingan yang terdahulu. Jadi

Cara Membuat Artikel Terkait di Bawah Postingan dengan Gambar

Setelah dulu sempat saya posting mengenai cara membuat artikel terkait di bawah postingan yang biasa dan yang menggunakan random post, kali ini Oplosanblog akan membagikan tutorial artikel terkait yang ada gambarnya. Jadi kelihatan menarik kan. Dan tentunya pageview sobat akan ikutan bertambah kalau nantinya dipasang widget ini. Penasaran enggak sobat gimana cara bikinnya, ayuk dah, tanpa

Cara Membuat Random Post di Sidebar Blog

Untuk bantu mempromosikan postingan lama di blog kita salah satunya adalah dengan menampilkan postingan secara acak atau random post. Bisa dipasang di bawah postingan ataupun di bagian sidebar seperti yang akan coba kita praktekan ini. Dan kenapa promosikan postingan lama sangat penting, karena bisa memberikan kesempatan pengunjung untuk mengetahui info-info yang mungkin dulu pernah dishare

Cara Membuat Dropdown Menu atau Pulldown Menu di Postingan Blog

Untuk menghemat tempat di blog, selain menggunakan scroll dan spoiler ada cara lainnya loh. Apa itu? Yakni dengan membuat menu dropdown. Dengan cuma butuh tempat sebaris saja menu ini bisa kita pajang di blog sobat. Dan menurut saya sendiri menu ini termasuk paling ringkas daripada dua fitur lainnya yakni scroll dan spoiler. Bagi yang sudah tidak sabar pengen nyoba praktekin bikin menu

Cara Mengganti Judul Blog dengan Judul Postingan

Untuk meningkatkan SEO di blog kita ataupun untuk meningkatkan traffik pengunjung salah satunya yakni dengan cara mengganti judul blog dengan judul postingan. Karena dengan cara ini dapat membuat blog kita optimal dalam meraih page rank di search engine. Bagi sobat tertarik untuk membuatnya, silahkan ikuti tutorial berikut.

Cara mudah mengganti judul blog dengan judul postingan
1. Pertama

Cara Membuat Widget Label Tampil Jadi 2 Kolom

Bosen dengan tampilan widget label yang memanjang ke bawah sob, pengen tidak kalo widget label tersebut dijadikan 2 atau 3 kolom... Dengan dibuat 2 atau 3 kolom tentunya bisa menghemat tempat di blog sobat. Selain itu juga bisa bikin yang memandang juga enak. Kalo memanjang ke bawah kan harus scroll juga, pasti ribet deh. :D

Oke bagi yang berminat bikin tampilan widget tabel 2 atau 3 kolom