| 5 Efek Foto Menggunakan jQuery & CSS Posted: 05 May 2013 08:16 AM PDT Hampir semua blogger selalu menggunakan gambar pada setiap postingan mereka dan memang salah satu yang membuat postingan tersebut terlihat rapi dan menarik yakni dengan menambahkan image / gambar ke dalamnya. Tetapi kadang gambar yang ditampilkan tidak mempunyai efek apa-apa alias standard sehingga terkesan kaku dan kurang menarik.
Nah, dari hal tersebut di atas, maka pada kesempatan kali ini saya akan berbagi tentang bagaimana cara menambahkan 5 buah efek dengan menggunakan jQuery dan beberapa potong CSS kedalam template serta bagaimana cara penggunaannya. Untuk live demonya sendiri, silahkan sobat klik link di bawah ini dan jika sudah terbuka, silahkan sorot pada image dan lihat sendiri efeknya.
Bagaimana, menarik bukan? Untuk pemasangan kode dan cara penggunaannya sendiri, berikut tutorial singkatnya : - Seperti biasa, login ke blogger terlebih dahulu.
- Pilih Template » Edit HTML » Proceed
- Copy CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>
.adipoli-wrapper{position:relative;display:inline-block;margin:auto}
.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}
.adipoli-box{display:block;position:absolute;z-index:0}
.post img{border:0!important;margin:0!important;padding:0!important}
.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0} - Selanjutnya copy Script di bawah ini dan pastekan tepat di atas tag penutup </head>
<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>
<script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/>
<script type='text/javascript'>
/*<![CDATA[*/
jQuery(function($pice){
$pice('.effect1').adipoli({
'startEffect' : 'normal',
'hoverEffect' : 'popout'
});
$pice('.effect2').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'sliceDown'
});
$pice('.effect3').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRandom'
});
$pice('.effect4').adipoli({
'startEffect' : 'overlay',
'hoverEffect' : 'foldLeft'
});
$pice('.effect5').adipoli({
'startEffect' : 'transparent',
'hoverEffect' : 'boxRainGrowReverse'
});
});
/*]]>*/
</script> - Simpan template.
- Selanjutnya, untuk menerapkannya pada postingan blog, berikut caranya :
Pada saat selesai mengupload gambar ke dalam postingan, pilih HTML kemudian cari kode gambar tersebut dan tambahkan attribut class="effect1" sampai class="effect1" untuk kategory efek yang ingin ditampilkan. Berikut contohnya : Ketika membuka HTML pada postingan, biasanya kode anchor untuk gambar akan terlihat seperti di bawah ini : <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmznp3LE2PvgTjLD2-Ds-pkLdvJy60fj2Y811RSH5ADWbbs0wvZCX2SaUWw_XE8gJ20XCmwAJRcpOXSouNoDhpaMH7pT2LX2w2BDTiIYqK1sozmIO2sOTx0Yvh4nJIjAcfVYRRFtrQ2a8/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmznp3LE2PvgTjLD2-Ds-pkLdvJy60fj2Y811RSH5ADWbbs0wvZCX2SaUWw_XE8gJ20XCmwAJRcpOXSouNoDhpaMH7pT2LX2w2BDTiIYqK1sozmIO2sOTx0Yvh4nJIjAcfVYRRFtrQ2a8/s1600/naruto.jpg" /></a> Nah untuk menambahkan efek pada gambar tersebut, berikut caranya : <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmznp3LE2PvgTjLD2-Ds-pkLdvJy60fj2Y811RSH5ADWbbs0wvZCX2SaUWw_XE8gJ20XCmwAJRcpOXSouNoDhpaMH7pT2LX2w2BDTiIYqK1sozmIO2sOTx0Yvh4nJIjAcfVYRRFtrQ2a8/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="effect1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmmznp3LE2PvgTjLD2-Ds-pkLdvJy60fj2Y811RSH5ADWbbs0wvZCX2SaUWw_XE8gJ20XCmwAJRcpOXSouNoDhpaMH7pT2LX2w2BDTiIYqK1sozmIO2sOTx0Yvh4nJIjAcfVYRRFtrQ2a8/s1600/naruto.jpg" /></a> class="effect1" adalah kategory image dengan efek zoom pada saat gambar tersentuh oleh pointer mouse. Ganti kode tersebut dengan effect yang lain (class="effect1" sampai dengan class="effect5").  |
| Meta Tag SEO Friendly Valid HTML5 Posted: 05 May 2013 08:08 AM PDT Pembahasan kali ini yakni mengenai Meta Tag SEO (Search Engine Optimization) Friendly. Meta tag yang SEO Friendly pada blog sangat signifikan dan penting. Contoh kecilnya yakni pada postingan-postingan yang sudah anda publikasikan, apakah sudah terindex oleh search engine atau belum? Nah, Meta tag yang SEO Friendly inilah yang nantinya akan membantu agar postingan yang sudah di publikasikan bisa diindeks oleh search engine.
Berikut penjelasan tentang Cara Bagaimana Memasang Meta tag SEO Friendly pada Template :
- Login ke blogger
- Pilih Rancangan » Edit HTML
- Cari <b:include data='blog' name='all-head-content'/> (Gunakan Ctrl+F). Jika sudah ketemu, hapus semua kode di bawahnya sampai <b:skin>< |
| Artikel Terkait [Related Post] Dengan Image Thumbnail Posted: 05 May 2013 08:12 AM PDT Artikel Terkait atau juga disebut Related Articles / Post sering kita jumpai di bawah postingan, baik itu postingan pada blogger maupun website yang berfungsi untuk menampilkan artikel-artikel lain yang berkaitan label postingan.
Artikel Terkait yang akan saya bahas pada kesempatan ini adalah artikel terkait dengan Image Thumbnail yang judul postingannya terdapat ditengah-tengah gambar pada saat tersentuh pointer mouse atau biasa disebut "hover"
Cara Memasang Ke Blog - Login ke akun Blogger anda
- Pilih Template » Edit HTML » Proceed » Centang Expand Template Widget
- Copy kode CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>
#related{background:#F0F2F5; border:1px solid #aaa;margin:0 0px 5px;padding:10px;width:97%}
ul#related-posts{font:bold 11px Arial;list-style:none;text-transform:none;margin:10px 0;padding:0}
.related-posts{font-weight:400;width:100%;}
.related-posts p{font:bold 14px Arial;margin:0}
ul#related-posts li{float:left;height:auto;list-style-type:none;margin:0 5px;padding:2px 1px}
*html ul.rp#related-posts li{margin:0 13px}
ul#related-posts li a{-moz-box-shadow:0 1px 2px rgba(0,0,0,0.15);border:2px solid #aaa;display:block;height:72px;position:relative;width:72px;color:#fff;text-decoration:none;text-shadow:0 1px 0 #000;font:11px Arial}
ul#related-posts li .overlay{height:66px;line-height:16px;position:absolute;width:66px;z-index:10;padding:6px 0 0 6px}
ul#related-posts li a:hover .overlay{background:#000;display:block!important;opacity:0.7}
ul#related-posts li img{bottom:0;padding:0!important}
ul#related-posts li a:hover{-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25)}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block} - Jangan simpan template anda dulu, tetapi lanjutkan dengan mencari tag <data:post.body/> dan jika sudah ketemu, copy kode HTML & JavaScript dibawah dan pastekan tepat di bawah tag <data:post.body/> tersebut.
<b:if cond='data:blog.pageType == "item"'>
<div class='clearfix' id='related'>
<div class='related-posts'>
<p>Related Articles</p>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_-bqTk77j2lTltAZfxmyqUsbdmLoWNmWxN1iqMRoNL926bfk9Xonl6vWL7ZplJB-gzZX6gu2irJhtGgL27UnNR40SUlVGIgqNvRxfIE8PP2i34K4PaQEmXw80KSOvtd04p6uLunY1sZw/s1600/no+image.jpg";
var maxresults=7;
</script>
<script src='http://yourjavascript.com/1198561349/relatedimg.js' type='text/javascript'/>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=7"' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div>
</b:if> Catatan...!!! Jika di dalam template anda sudah terdapat fitur readmore, maka tempatkan kode HTML & JS tersebut di atas di bawah <data:post.body/> yang kedua atau jika blog anda sudah memilik Social Bookmark AddThis, maka tempatkan kode di atas tepat dibawahnya. - Terakhir, simpan template anda dan lihat hasilnya...!!!
Butuh Bantuan ? Jika anda punya masalah atau tidak mengerti tentang pemasangan Artikel Terkait tersebut di atas, silahkan anda tinggalkan komentar.  |
| Tombol Efek Transitional Hover dengan CSS Untuk Blogger Posted: 05 May 2013 08:07 AM PDT Button Transitional Hover adalah sebuah tombol yang berisikan link atau tidak pada blog baik itu tombol download, informasi, live demo maupun yang lainnya dengan efek hover atau bergerak pada saat tersentuh pointer mouse.
Tombol Transitional Hover ini sendiri adalah hasil dari modifikasi CSS3 dan tanpa ada tambahan Javascript maupun jQuery sehingga tidak mempengaruhi load time blog. Nah untuk melihat demo atau contohnya, silahkan mengklik link live demo di bawah.
Cara memasang dan menggunakan tombol transitional - Login ke Blogger
- Pada dashboard, pilih Template » Edit HTML
- Copy kode di bawah ini dan pastekan tepat di atas/sebelum tag ]]</skin>
#button .icon {
background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
display:block;
color:#212121;
float:none;
height:80px;
width: 80px;
line-height:80px;
margin:10px auto 0;
padding-top:1px;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-ms-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-moz-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-o-transition:width .25s ease-in-out,
background-color .25s ease-in-out;
transition:width .25s ease-in-out,
background-color .25s ease-in-out;
-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;
box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;
}
#button a span {
display:none;
}
#button:hover a span {
display:inline;
}
#button a span {
font-size:1.4em;
}
#button:hover .icon {
width:420px;
}
#button .demo {
background-position:0 -80px;
}
#button .info {
background-position:0 -160px;
}
#button .download {
background-position:0 0;
} Nah, untuk memasangnya pada postingan blog, pilih HTML (samping kanan compose) pada saat membuat postingan/artikel terbaru dan masukkan salah satu kode pemanggil di bawah ini : Button Download <div id="button">
<a href="#" class="icon demo"><span>Lihat Demo</span></a>
</div> Button Live Demo <div id="button">
<a href="#" class="icon download"><span>Lihat Demo</span></a>
</div> Button Info <div id="button">
<a href="#" class="icon info"><span>Lihat Demo</span></a>
</div> Keterangan : Ganti tanda # (pagar) dengan URL tujuan - Selanjutnya pilih pratinjau atau publikasikan untuk melihat hasilnya.
Rekomendasi Terbaik! - Cara Membuat Tombol Keren [Cool Button] untuk Blogger
- 4 Tombol CSS3 Animasi Unik dan Menarik Untuk Blogger
Semoga bermanfaat and Happy Nice Blogging...!!!  |
.png "5 Efek Foto dengan jQuery & CSS pada Blog")
![Artikel Terkait [Related Post] Dengan Image Thumbnail](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzzabq8i1LF9EhHgmPvvLC4hMzgL7PzjTVsSVjXIpoMLCje2YnJ9KJWIPpxR4FRATzDxX4YHBNMAbh-yYBX95iuoBTl5QNCEohF_AQCPUQ2JhfBtLCRkTmYB1CP5fZ06JpVrWxNqCW0Mz0/s640/lsc-artikel-terkait.PNG "Artikel Terkait [Related Post] Dengan Image Thumbnail")
Posting Komentar