Design, Tutorial and Tips Trik Blogger | Lostsector

- on 07.33

Design, Tutorial and Tips Trik Blogger | Lostsector

5 Efek Foto Menggunakan jQuery & CSS
Meta Tag SEO Friendly Valid HTML5
Artikel Terkait [Related Post] Dengan Image Thumbnail
Tombol Efek Transitional Hover dengan CSS Untuk Blogger

Posted: 05 May 2013 08:16 AM PDT

5 Efek Foto dengan jQuery & CSS pada Blog

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.

LIVE DEMO

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/AVvXsEjfDawlN7nt9jy1uQSU_5m7zTtzWjbiWV6CURoagZStn5D-tq8d0syIa9Yg4utfHaTQsEIkQw3Dp7OWYelWNuxyLJ0oF2E6UqTUAmGUkjc6aRc6sHqPzNo7sgIttp_SNdXt7g7M9pjXWS7c/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfDawlN7nt9jy1uQSU_5m7zTtzWjbiWV6CURoagZStn5D-tq8d0syIa9Yg4utfHaTQsEIkQw3Dp7OWYelWNuxyLJ0oF2E6UqTUAmGUkjc6aRc6sHqPzNo7sgIttp_SNdXt7g7M9pjXWS7c/s1600/naruto.jpg" /></a>

Nah untuk menambahkan efek pada gambar tersebut, berikut caranya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfDawlN7nt9jy1uQSU_5m7zTtzWjbiWV6CURoagZStn5D-tq8d0syIa9Yg4utfHaTQsEIkQw3Dp7OWYelWNuxyLJ0oF2E6UqTUAmGUkjc6aRc6sHqPzNo7sgIttp_SNdXt7g7M9pjXWS7c/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/AVvXsEjfDawlN7nt9jy1uQSU_5m7zTtzWjbiWV6CURoagZStn5D-tq8d0syIa9Yg4utfHaTQsEIkQw3Dp7OWYelWNuxyLJ0oF2E6UqTUAmGUkjc6aRc6sHqPzNo7sgIttp_SNdXt7g7M9pjXWS7c/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><![CDATA[ dan masukkan meta tag di bawah ini :

<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | Your Blog Description</title>
</b:if>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Your Blog Description here!' name='description'/>
<meta content='Your Keywords here!' name='keywords'/>
<meta content='Author Name here!' name='Author'/>
<meta content='general' name='rating'/>
<meta content='all' name='robots'/>
<meta content='index, follow' name='robots'/>
<meta content='id' name='geo.country'/>
<meta content='1 days' name='revisit-after'/>
<meta content='Indonesia' name='geo.placename'/>
</b:if>

Keterangan :

'Your Blog Description here!' = Ganti dengan deskripsi singkat mengenai blog/web anda
'Your Keywords here!' = Ganti dengan keywords anda
'Author Name here!' = Silahkan ganti dengan nama anda

Simpan template dan rasakan perbedaannya.

Oh ya, buat para Master SEO, mohon dikoreksi jika Meta Tag SEO Friendly di atas jika masih terdapat kekeliruan. Sebelum dan sesudahnya, saya ucapkan terima kasih...!!!

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"

Artikel Terkait [Related Post] Dengan Image Thumbnail

LIHAT DEMO

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/AVvXsEhOcFKjUL8T_AMnJJMqtxKtWeligaMOcJcsztbiCOlYYb6JAkL_MkI2fXeNEHvN0yC0MPQnKxUupHBo8w1lK5YFMUDLA844YQlu-3uNCPNGHNrav-J_GEcjZpjMG5AmLv4zmqbDNagsgKw/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

CSS3 Buttons With Transitional Hover Untuk Blogger

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.

LIVE DEMO

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;
}

Simpan template.

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