Berbeda dengan postingan saya sebelumnya yang selalu menampilkan tutorial blog ataupun tips dan trik ngeblog. Kali ini saya ingin berbagi design template dari beberapa website yang saya ambil secara acak dan mungkin bisa menjadikan inspirasi buat sobat yang hobi mendesign ataupun membuat template. Ada 20 design web cantik yang bisa sobat jadikan referensi dalam membuat atau mempercantik blog/website sobat. Berikut design webnya, semoga bermanfaat.
Menanggapi dan melihat pertanyaan sobat Fachry pada postingan widget sharing is sexy, dengan tampilan widget yang muncul pada halaman depan blog. Seharusnya widget tersebut munculnya pada halaman postingan atau setelah read more di klik. Ada sedikit kode yang harus sobat ketahui untuk meletakkan widget, ingin di letakkan pada halaman depan blog saja atau hanya ingin meletakkan widget pada halaman postingan. 2 kode ini saya rasa mutlak wajib sobat mengerti fungsinya, buat yang belum mengerti berikut HTML-nya.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
LETAK WIDGET
</b:if>
Meletakkan widget hanya pada halaman postingan (post page)
<b:if cond='data:blog.pageType == "item"'>
LETAK WIDGET
</b:if>
Pada kasus yang dialami sobat Fachry adalah widget sharing is sexy muncul pada halaman depan blog, padahal seharusnya widget tersebut hanya muncul pada halaman postingan. Untuk itu kode yang digunakan adalah kode yang nomor 2. Sehingga kode lengkapnya untuk widget sharing is sexy tersebut adalah :
<b:if cond='data:blog.pageType == "item"'>
<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-ID' title='Subscribe to RSS'/></li>
<li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>
</ul>
<span class='sexy-rightside'/>
</div>
</b:if>
Saya hanya memberikan 2 kode yang wajib sobat ketahui, sebenarnya masih ada beberapa kode lagi untuk peletakkan widget-widget di blog. Semoga bermanfaat !
Template Information
| Name | Scopsore |
| Type | Blogger Template |
| Properties | Blue. gray, 2 Columns, right sidebar |
| Include | Avatar mybloglog, related posts |
Untuk mempercantik tampilan blog atau desktop pada komputer sobat, dibawah ini ada beberapa icon cantik dan menarik yang dapat sobat download secara gratis. Sobat juga bisa menggunakan pada apilkasi blog atau web, dengan kualitas gambar yang bagus icon-icon ini bisa menjadi pilihan buat mengisi beberapa bagian di komputer sobat atau paling tidak sebagai koleksi.
Selamat mendownload dan semoga bisa menambah koleksi icon sobat.
Menanggapi pertanyaan sobat ISS pada postingan widget sharing is sexy yang menanyakan perihal seputar pemasangan widget lintas berita di blog. Kebetulan saya belum pernah membahas masalah ini, dan sebenarnya widget lintas berita ini pernah saya pasang di blog ini karena beberapa hal saya hilangkan. Seperti kita ketahui, lintas berita merupakan situs portal tempat orang mempromosikan web atau blog mereka.
Hampir semua blogger menggunakan fasilitas lintas berita sebagai media untuk promosi blog atau istilah kasarnya menjadi benalu di lintas berita, dengan total ribuan halaman/pages yang terindex di google. Dengan begitu blog kita jadi ikut terkenal dan setidaknya mendapat cipratan traffic dari lintas berita. Untuk mempermudah dalam submit berita atau artikel blog, widget lintas berita ini mungkin bisa menjadi alternatif.
Cara pasangnya sangat mudah, coba perhatikan langkah-langkahnya berikut ini.
#lintas-berita {
background:#ECE0F8;
border:1px solid #cccdcd;
margin:15px 0px 10px 0px;
padding:10px;
color:#000;
font-weight:normal;
}
.lintaskiri {
float:left;
margin:0px 15px 0px 0px;
width:380px;
}
.lintaskanan {
text-align:center;
}
<div class='clearfix' id='lintas-berita'>
<div class='lintaskiri'>
Jika menurut sobat artikel ini bermanfaat, silahkan vote ke <strong>Lintas Berita</strong> agar artikel ini bisa di baca oleh orang lain.
</div>
<div class='lintaskanan'>
<script type='text/javascript'>lb_skin = 'mode2'; </script>
<script src='http://www.lintasberita.com/widget_vote/lintasberita.js' type='text/javascript'/>
<noscript>Powered by www.lintasberita.com visit <a href='http://www.lintasberita.com'>Lintas Berita</a></noscript>
</div>
</div>
Perhatikan kode css yang berwarna merah, kode tersebut adalah lebar untuk widget sebelah kiri (widget untuk tulisan) harap disesuaikan dengan lebar template. Jika widget lintas berita muncul pada halaman depan blog, maka tambahkan kode
<b:if cond='data:blog.pageType == "item"'>
diantara kode yang berwarna hijau dan tutup dengan kode
</b:if>
Semoga berhasil.
Jika ingin punya blog populer, buatlah konten yang menarik. Namun apakah itu sudah cukup untuk membuat blog kita jadi populer. Tentu dengan pemasangan meta tag yang mumpuni dan keyword yang relevan akan sangat membantu kita dalam meningkatkan traffic blog. Satu cara yang juga tidak boleh kita lupakan begitu saja adalah peran situs-situs social bookmark yang saat ini menjadi alternatif lain para blogger untuk mempromosikan blog mereka.
Dengan mensubmit artikel-artikel kita ke situs social bookmark akan memungkinkan kita mendatangkan banyak pengunjung. Untuk melakukan itu, kita memerlukan fasilitas cepat dalam mensubmit artikel kita, salah satu contoh dengan memasang widget atau button social bookmark di blog kita. Hal ini sudah pernah saya bahas sebelumnya pada postingan membuat widget share di blog. Sama dengan yang lalu hanya saja kali ini penerapannya lebih mudah dan dengan button yang lebih besar.
Untuk memasangnya sangat mudah, silahkan ikuti langkah-langkahnya berikut ini.
<div style='clear:both; '>
<div style='width:60px; float:left;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<div style='width:60px; float:left;'>
<script badgetype='square' src='http://d.yimg.com/ds/badge2.js' type='text/javascript'><data:post.url/></script>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Stumble' src='http://lh4.ggpht.com/_7Y9pl24WpQY/S9xSmUeCjGI/AAAAAAAADpY/PwTpE9ERS0U/stumble_thumb%5B1%5D.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Delicious' src='http://lh3.ggpht.com/_7Y9pl24WpQY/S9xSe2evJhI/AAAAAAAADpI/u2d3FXmIcCQ/delicious_thumb%5B1%5D.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='nofollow' target='_blank'><img alt='Technorati' src='http://lh5.ggpht.com/_7Y9pl24WpQY/S9xSo_MlhMI/AAAAAAAADpg/iFnP2vmL_D4/technorati_thumb%5B1%5D.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='nofollow' target='_blank'><img alt='Twitter' src='http://lh4.ggpht.com/_7Y9pl24WpQY/S9xSb_SokmI/AAAAAAAADpA/7BuK9F8-_NY/twitter_thumb%5B1%5D.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank'><img alt='Facebook' src='http://lh5.ggpht.com/_7Y9pl24WpQY/S9xSi2qVdTI/AAAAAAAADpQ/mZXQ8JqJlnI/facebook_thumb%5B1%5D.gif' style='padding:0;margin:0;border:none;'/></a>
</div>
<div style='width:65px; float:left;'> <a expr:href='"http://www.reddit.com/submit?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://lh6.ggpht.com/_7Y9pl24WpQY/S9xStOwxCcI/AAAAAAAADpo/2U6vbGMS6GM/Reddit-icon_thumb%5B16%5D.png' style='padding:0;margin:0;border:none;'/></a>
</div>
</div>
Semoga berhasil dan banyak mendatangkan pengunjung.
Tutorial memasang comment count memang sudah sering kita jumpai di berbagai tutorial blog, namun tidak ada salahnya kita bahas sama-sama. Kemarin lusa ada sobat blogger yang menanyakan tentang hal ini lewat facebook, dan kebetulan saya belum pernah menulis tutorial ini. Comment count atau comment bubble atau lebih mudahnya adalah kotak kecil yang berisi jumlah komentar dalam setiap postingan. Biasanya comment count pada umumnya terletak dibagian kanan atas postingan. Berikut tutorial singkatnya.
.comment-count {
background:url(http://lh6.ggpht.com/_7Y9pl24WpQY/S_AGNIqF3nI/AAAAAAAAD4A/3onsvK0-jmA/1274007079_speech_bubble_48_thumb%5B3%5D.png) no-repeat;
float: right;
font-family: maiandra gd, arial;
font-size: 10px;
text-align: center;
width: 28px;
height: 28px;
margin-top: -5px;
margin-right: 2px;
padding-top: 5px;
}
<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'><b:if cond='data:blog.url == data:blog.homepageUrl'>
<span class='comment-count'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if>
</b:if>
</span>
</b:if><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>
Yang harus diperhatikan adalah margin-top:-5px dan padding-top:5px, karena itulah yang akan menentukan letak tinggi rendahnya widget comment count ini. Silahkan diatur sesuai template sobat, karena setiap template mempunyai karakter yang berbeda-beda.
Semoga berhasil.
 |  |
Template Information
| Name | JooGoo Green |
| Type | Blogger Template |
| Properties | Green, white, 2 columns, right sidebar, xml |
