Featurity

Pure Css3 Image Slider For Blogger

2013-08-18T06:50:00.001-07:00

Pure Css3 Image Slider For Blogger - Tambah lagi nih satu koleksi Image Slider untuk memperindah dan mempercantik Blogger . Jika sebelumnya saya sudah share tentang Nivo slider yang Oke punya , kali ini kita akan bermain hanya dengan Css3 untuk membuat Image slider keren di Blog . Untuk tampilan akhirnya bisa anda lihat dibawah ini .

Demo

Untuk membuatnya silahkan ikuti petunjuk penggunaan dibawah ini .

1. Go to Blogger Dashboard > Layout >
2. Add a HTML/Javascript Gadget
3. Copy the code below and paste on it.

<style type="text/css" media="screen">
.container {
margin: 0 auto;
overflow: hidden;
width: 700px;
}
#content-slider {
height: 335px;
width: 100%;
}
#slider {
background: none repeat scroll 0 0 #000000;
border: 5px solid #FFFFFF;
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
height: 320px;
margin: 10px auto;
overflow: visible;
position: relative;
width: 680px;
}
#mask {
height: 320px;
overflow: hidden;
}
#slider ul {
margin:0;
padding:0;
position:relative;
}
#slider li {
width:680px;
height:320px;
position:absolute;
top:-325px;
list-style:none;
}
#slider li.firstanimation {
-moz-animation:cycle 25s linear infinite; -webkit-animation:cycle 25s linear infinite; }
#slider li.secondanimation {
-moz-animation:cycletwo 25s linear infinite;
-webkit-animation:cycletwo 25s linear infinite; }
#slider li.thirdanimation {
-moz-animation:cyclethree 25s linear infinite;
-webkit-animation:cyclethree 25s linear infinite; }
#slider li.fourthanimation {
-moz-animation:cyclefour 25s linear infinite;
-webkit-animation:cyclefour 25s linear infinite; }
#slider li.fifthanimation {
-moz-animation:cyclefive 25s linear infinite;
-webkit-animation:cyclefive 25s linear infinite; }
#slider .tooltip {
background:rgba(0,0,0,0.7);
width:300px;
height:60px;
position:relative;
bottom:75px;
left:-320px;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}
#slider .tooltip h1 {
color:#fff;
font-size:24px;
font-weight:300;
line-height:60px;
padding:0 0 0 20px;
}
#slider li#first:hover .tooltip,
#slider li#second:hover .tooltip,
#slider li#third:hover .tooltip,
#slider li#fourth:hover .tooltip,
#slider li#fifth:hover .tooltip {
left:0px;
}
/* PROGRESS BAR */
.progress-bar {
position:relative;
top:-5px;
width:680px;
height:5px;
background:#000;
-moz-animation:fullexpand 25s ease-out infinite;
-webkit-animation:fullexpand 25s ease-out infinite;
}
/* ANIMATION */
@-moz-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-moz-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
@-webkit-keyframes cycle {
0% { top:0px; }
4% { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:325px; opacity:0; z-index:0; }
21% { top:-325px; opacity:0; z-index:-1; }
50% { top:-325px; opacity:0; z-index:-1; }
92% { top:-325px; opacity:0; z-index:0; }
96% { top:-325px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@-webkit-keyframes cycletwo {
0% { top:-325px; opacity:0; }
16% { top:-325px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:325px; opacity:0; z-index:0; }
41% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
0% { top:-325px; opacity:0; }
36% { top:-325px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:325px; opacity:0; z-index:0; }
61% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
0% { top:-325px; opacity:0; }
56% { top:-325px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:325px; opacity:0; z-index:0; }
81% { top:-325px; opacity:0; z-index:-1; }
100%{ top:-325px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
0% { top:-325px; opacity:0; }
76% { top:-325px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:325px; opacity:0; z-index:0; }
}
/* ANIMATION BAR */
@-moz-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } }
@-webkit-keyframes fullexpand {
0%, 20%, 40%, 60%, 80%, 100% { width:0%; opacity:0; }
4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.7; }
17%, 37%, 57%, 77%, 97% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; } }
</style>
<div class="container">
<div id="content-slider">
<div id="slider">
<div id="mask">
<ul>
<li id="first" class="firstanimation">
<a href="http://dimpost.com">
<img src="http://project.dimpost.com/image-slider/images/img_1.jpg" alt="Cougar"/>
</a>
<div class="tooltip">
<h1>Cougar</h1>
</div>
</li>
<li id="second" class="secondanimation">
<a href="#">
<img src="http://project.dimpost.com/image-slider/images/img_2.jpg" alt="Lions"/>
</a>
<div class="tooltip">
<h1>Lions</h1>
</div>
</li>

<li id="third" class="thirdanimation">
<a href="#">
<img src="http://project.dimpost.com/image-slider/images/img_3.jpg" alt="Snowalker"/>
</a>
<div class="tooltip">
<h1>Snowalker</h1>
</div>
</li>

<li id="fourth" class="fourthanimation">
<a href="#">
<img src="http://project.dimpost.com/image-slider/images/img_4.jpg" alt="Howling"/>
</a>
<div class="tooltip">
<h1>Howling</h1>
</div>
</li>

<li id="fifth" class="fifthanimation">
<a href="#">
<img src="http://project.dimpost.com/image-slider/images/img_5.jpg" alt="Sunbathing"/>
</a>
<div class="tooltip">
<h1>Sunbathing</h1>
</div>
</li>
</ul>
</div>
<div class="progress-bar"></div>
</div>
</div>
</div>

Simpan dan lihat hasilnya .

Jika ada yang ingin ditanyakan , silahkan berikan komentar anda .
Okeh , semoga post tentag Pure Css3 Image Slider For Blogger ini bermanfaat dan memberikan jawaban atas pencarian anda tentang image lider dan cara membuat gallery blog .

Nivo Slider For Blogger Easily

2013-08-18T06:28:00.001-07:00

Kali ini saya masih akan share tentang Slider Image yang berfungsi sebagai pemajang gambar fitur di blogger dan juga akan mempercatik blog anda . yang akan kita bahas kali ini adalah Nivo slider yang atraktif dan keren abis untuk dipasang di blog .

Lihat tampilannya dibawah ini ;

Demo

Untuk membuatnya juga cukup mudah , silahkan ikuti panduannya dibawah ini .

Login Blogger
Layout
Add Gadget
Html/JavaScript
Paste kode dibawah ini

<style type="text/css"/>
/* dimpost.com - Basic Style */
body{
background: transparent;
font:15px/2 'Adobe Caslon Pro', Georgia, Serif;
margin:0;
padding:0;
}
a{outline:0 none}
#pagewrap{
margin:10px auto;
padding:0;
position:relative;
height:400px;
width: 640px;
}
#slidewrap{position:absolute;}
#slider {
border-color: #c0c0c0;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 10px 10px 30px;
box-shadow: 0 0 3px #2F2F2F;
height: 280px;
margin: 10px;
position: relative;
width: 600px;
}
#slider images{
position:absolute;
top:0px;
left:0px;
display:none;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider images {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
.nivo-directionNav{display:none!important}
.nivo-html-caption {
display:none;
}
.nivo-caption{
position:absolute;
right:20px;
text-align:center;
top:130px;
width:192px;
z-index:60;
}
.nivo-caption p{margin:0}
.nivo-caption .title{font-style:italic}
.nivo-controlNav {
bottom: -23px;
display: block;
height: 15px;
left: 204px;
position: absolute;
text-align: center;
width: 192px;
z-index: 51;
opacity: 0.6;
}
.nivo-controlNav a{
background:transparent url(http://project.dimpost.com/image-slider/images/button.png) no-repeat center center;
display:inline-block;
height:14px;
width:14px;
text-indent:-9999px;
cursor:pointer;
}
.nivo-controlNav .active{
background:transparent url(http://project.dimpost.com/image-slider/images/button_active.png); }
</style>
<script src="http://project.dimpost.com/image-slider/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="http://project.dimpost.com/image-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

<div id="pagewrap">
<div id="slidewrap">
<div id="slider">
<a href="#" target="_blank"><img alt="" title="#caption1" src="http://project.dimpost.com/image-slider/images/sample0.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption2" src="http://project.dimpost.com/image-slider/images/sample1.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption3" src="http://project.dimpost.com/image-slider/images/sample2.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption4" src="http://project.dimpost.com/image-slider/images/sample3.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption5" src="http://project.dimpost.com/image-slider/images/sample4.jpg" /></a>
<a href="#" target="_blank"><img alt="" title="#caption6" src="http://project.dimpost.com/image-slider/images/sample5.jpg" /></a>
</div>
</div>
</div>

Warna merah adalah link tujuan dan url dari gambar yang ditampilkan , silahkan diganti dengan milik anda sendiri .

Simpan template dan silahkan lihat hasilnya .

Sekian Posting Nivo Slider For Blogger Easily kali ini dan semoga bermanfaat .

Attractive Photo Slide With Thumbnail For Blogger

2013-08-18T05:59:00.000-07:00

Attractive Photo Slide With Thumbnail For Blogger - Kali ini saya akan posting satu Slider foto yang atraktif dan cantik untuk di pasan di blog . Slider kali ini kita akan mengunakan Javascript dan juga Css pastinyaunuk tampilan dan kinerja yang optimal dan cantik . Seperti apa hasil nya ? Anda bisa melihat screenshotnya dibawah ini .

Dan untuk demonya silahkan klik Demo .

Demo

Ingin membuatnya ? Silahkan ikuti caranya dibawah ini :

Login Blogger
Layout
Add Gadget
Html JavaScipt
Kemudian pastekan kode ini di dalam area HTML tersebut .

<style type="text/css">
.slider-box {
background: none repeat scroll 0 0 #FAFAFA;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 3px #333333;
margin: 0 auto;
width: 675px;
overflow: hidden;
}
#slider-wrapper {
margin: 0 auto;
padding: 10px;
}
#jslider-container {
border: 2px solid #FFFFFF;
max-width: 550px;
position: relative;
text-align: left;
z-index: 90;
}
</style>
<link href="http://project.dimpost.com/image-slider/wowslider/css/wow-slider.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div class="slider-box">
<div id="slider-wrapper">
<div id="jslider-container">
<div class="jslider_images">
<ul>
<li><a href="http://dimpost.com">
<img src="http://1.bp.blogspot.com/-8PTU1PEcmLI/Uc2n85UpHUI/AAAAAAAAB4k/j6NY9ZqIyRY/s550/sample1.jpg" title="Sunset"/>
</a>A boat with beautiful sunset.</li>
<li><a href="#">
<img src="http://2.bp.blogspot.com/--GmwV2nAsUQ/Uc2oEd7wNBI/AAAAAAAAB40/ETmQqqlBgvk/s550/sample2.jpg" title="Rainbow"/>
</a></li>
<li><a href="#">
<img src="http://1.bp.blogspot.com/-6g4P9qoMRmI/Uc2oOy08cOI/AAAAAAAAB48/XZ09I9967yU/s550/sample3.jpg" title="True Nature"/>
</a>Tree in field with blue sky.</li>
<li><a href="#">
<img src="http://4.bp.blogspot.com/-gHD47bEFHb8/Uc2oBkNydjI/AAAAAAAAB4s/pT6e5eMXCCc/s550/sample4.jpg" title="Sunrise""/>
</a>Amaizing sunrise moment</li>
<li><a href="#">
<img src="http://4.bp.blogspot.com/-_Fl22hwvf4g/Uc2oRuUPfOI/AAAAAAAAB5M/-paJ0C3ecTw/s550/sample5.jpg" title="CAR in HDR Nature"/>
</a></li>
<li><a href="#">
<img src="http://3.bp.blogspot.com/-cOF07FfXZ0I/Uc2oQ5cFN2I/AAAAAAAAB5E/RTzFpK-6oMM/s550/sample6.jpg" title="Sunshine"/>
</a></li>
</ul>
</div>

<div class="jslider_thumbs">
<div>
<a href="#" title="Sunset"><img src="http://1.bp.blogspot.com/-EV9QJIgCZVs/Uc2sZ302fAI/AAAAAAAAB5c/aw2ncIBTWPI/s85/sample1.jpg"/></a>
<a href="#" title="Rainbow"><img src="http://4.bp.blogspot.com/-ScQ2WF7eUb4/Uc2saKrS2_I/AAAAAAAAB5g/QacTeCtKU-c/s85/sample2.jpg"/></a>
<a href="#" title="True Nature"><img src="http://1.bp.blogspot.com/-zQzvkfDsyzg/Uc2sbpceU3I/AAAAAAAAB5s/PN7wNSrydbM/s85/sample3.jpg"/></a>
<a href="#" title="Sunrise"><img src="http://3.bp.blogspot.com/-R4gOTYCU9dQ/Uc2sbxFqTqI/AAAAAAAAB50/ESHZD7VlnXY/s85/sample4.jpg"/></a>
<a href="#" title="CAR in HDR Nature"><img src="http://1.bp.blogspot.com/-b5dbnH0-dMg/Uc2scRDvV4I/AAAAAAAAB54/4P9RYqtJdDM/s85/sample5.jpg"/></a>
<a href="#" title="Sunshine"><img src="http://3.bp.blogspot.com/-L8rLW2XCv7I/Uc2sdkpcx8I/AAAAAAAAB6E/uRfT9gYb5rM/s85/sample6.jpg"/></a>
</div>
</div>

</div>
</div>
</div>
<script type="text/javascript" src="http://dimpost.googlecode.com/files/wow-slider.js"></script>

Simpan dan lihat hasilnya .

Silahkan ubah gambar yang ada di slide tersebut dengan gambar milik anda sendiri .

Thats it . mungkin itu saja posting Attractive Photo Slide With Thumbnail For Blogger kali ini dan semoga bermanfaat .

Red UI Design Psd Download

2013-08-17T17:53:00.000-07:00

Red UI Design Psd Download - Sekedar berbagi gratisan saja buat para webdeveloper atau yang lagi hoby mendesain web atau juga blog . Kali ini ada interface design yang lumayan buat dipake di blog anda . Lihat saja gambarnya dibawah ini .

Mantab kan ....

Font yang digunakan:

Untuk font berukuran besar menggunakan Fredoka ( Google Font )
Sedangkan body text menggunakan Open sans ( Google Font )

Download saja Font nya di Google .

Untuk file Psd nya bisa anda download melalui link dibawah ini .

Download Red UI Interface

Oke , sepertinya itu saja yang bisa dibagi kali ini . Tunggu freebies menarik lainnya yah haha . jangan lupa di koment .... kalo mau lihat lebih banyak lagi bisa langsung ke sumbernya saja juga bisa di http://belajarwebdesign.com .

Membuat Breadcrumbs Sederhana Dengan Css

2013-08-17T17:40:00.000-07:00

Membuat Breadcrumbs Sederhana Dengan Css - Sebenarnya saya agak sedikit bingung mau isi blog ini dengan materi apa . Tapi melihat desain dari template blog ini memang sepertinya sangat cocok untuk mempost tutorial Blog , meskipun padahal saya sudah punya blog yang spesial buat tutorial blog . tapi tidak apa-apa lah kalau ini saja yang bakal lebih dikembangkan .

ya , sesuai dengan namanya yang saya sendiri juga tidak tau apa artinya , yang penting ada kata fiturnya , dan dalam hal ini fitur blog pun layak toh untuk diangkat hehe .

oke , tidak usah berpanjang lebar , kali ini kita akan membuat Breadcrumb sederhana .
Sebelumnya saya mau tanya dulu , ada yang belum tau apa itu breadcrumbs ?

Begini , breadcrumbs itu adalah navigasi atau bisa dikatakan peta situs yang memudahkan pengunjung blog untuk kembali ke halaman sebelumnya atau masuk ke halaman terkait posting yang tengah dibaca . Dan katanya fungsi utama dari breadcrumbs ini adalah untuk mencegah penunjung tersesat di dalam blog kita .

Oke, sekarang kita belajar untuk membuat Breadcrumbs sederhana dengan css .

Breadcrumbs yang akan kita buat nanti bentuknya akan seperti gambar dibawah ini .

Kita akan menempatkan sebuah tanda panah pada masing-masing link kecuali halaman aktif . maksudnya adalah nanti icon panah akan kita tempatkan pada akhir setiap link , sementara halaman aktif tidak memiliki tanda panah .

Langsung ke caranya .

Kode HTML

<html>
<head>
<title>Membuat Breadcrumb (Navigasi) sederhana dengan CSS | BelajarWebdesign.com</title>
</head>
<body>
<div class="bungkusan">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Webdesign</a></li>
<li>Inspiration</li>
</ul>
</div>
</body>
</html>

Kode Css

body {margin: o; padding: 200px 0; text-align: center; background: #f89927;}
.bungkusan {
width: 500px;
height: 60px;
background: url(bg.jpg) repeat-x;
margin: 0 auto;
font-size: 24px;
font-family: arial;
color: #afafaf;
}
ul {
list-style: none;
}
li {
float: left;
line-height: 60px;
margin-right: 10px;
col
}
li a {
color: #a2a2a2;
text-decoration: none;
background: url(panah.png) center right no-repeat;
padding-right: 30px;
}
li a:hover {
color: #666;
}

Pada metode kali ini kita tidakmenggunakan Box background yang pada umumnya berbentuk kotak atau Elips , melainkan menggunakan background image yang diletakkan di sebelah kanan link .

Untuk hasilnya silahkan lihat disini saja .

Gimana ? Cukup mudah ?

Posting kali ini hanya contoh Membuat Breadcrumbs Sederhana Dengan Css , sementara untuk penerapan ke Blogger mungkin akan dibahas lain waktu .

Menghapus Tulisan Tampilkan Semua Posting Dengan Label

2013-08-17T16:56:00.003-07:00

Menghapus Tulisan Tampilkan Semua Posting Dengan Label - Pada artikel kali ini saya akan membahas mengenai Tips dan Trik seputar Blogging . Ya, rasanya ada yang kurang saja jika tidak memposting masalah ini .

Dulu saya pikir menghapus tulisan tampilkan semua posting dengan label pada Blogspot itu sangat mudah dan simpel , tapi ternyata saya salah haha . Melainkan jauh lebih mudah dari yang saya bayangkan .
Iyalah , orang tutorialnya saja banyak sekali ko .

Sebenarnya apa sih Tulisan Tampilkan semua posting dengan label itu ?

Hal ini selalu ada di setiap template blogger karena ini memang sudah tertanam di server Blogger ( mungkin ) . Namanya adalah status-message .

Jika anda membuat blog baru atau memasang template blog baru biasanya tulisan tampilkan posting dengan label ini akan muncul setiap kali anda membuka halaman label pada blog anda .
memang sih hal ini tidak berdampak terlalu buruk karena tidak akan merusak fungsional dari blog anda , tapi biasanya rasanya bakal risih dan tidak nyaman .

Lalu timbullah keinginan untuk membuangnya . Nah itu yang akan kita bahas kali ini .
Sebenarnya ada 3 cara yang bisa digunakan untuk menghapus tulisan tampilkan semua posting dengan label ini , yang hampir semuanya sama .
hal itu karena setiap template memiliki tata pengkodean yang berbeda sehingga kadang apa yang ada di tutor tidak berfungsi dengan baik . Tapi disini saya yakin trik yang saya bagikan ini berfungsi dengan baik .

Untuk cara menghapus tulisan tampilkan semua posting dengan lebel adalah sebagai berikut :
Login ke Blog
Buka bagian template
Cari kode ]]></b:skin>
Kemudian letakkan kode dibawah ini tepat diatasnya

.status-msg-wrap{ display:none}

Simpan template .

Jika cara diatas tidak berfungsi karena template anda bandel , maka lakukan cara yang kedua .
Langkahnya sama seperti cara pertama , hanya saja kita akan menambahkan 2 kode lagi seperti dibawah ini.

.status-msg-body{ display:none}
.status-msg-border{ display:none}

Jadi kode terakhir yang kita tambahkan adalah seperti dibawah ini .

.status-msg-wrap{ display:none}
.status-msg-body{ display:none}
.status-msg-border{ display:none}

Simpan kembali template anda dan lihat halaman label .

Jika cara kedua masih belum berfungsi juga , maka kita akan mengunakan cara terakhir dan paling jitu . Perhatikan
langkahnya sama seperti cara diatas , yakni kita akan bermain script di dalam edit HTML template .
Cari kode seperti dibawah ini .

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>

Ketik saja status-message saat mencari agar lebih mudah .

Jika sudah ketemu , ganti dengan script dibawah ini

<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div style='clear: both;'/>
</b:if>
</b:includable>

Kemudian simpan , dan cek kembali hasilnya .

Oke , mungkin begitu saja cara menghapus tulisan tampilkan semua posting dengan label pada blogspot yang semoga dapat membantu memecahkan masalah anda terkait dengan kegiatan blogging anda . Oke , semoga bermanfaat .

Apa Perlu Memiliki Blog ?

2013-08-17T09:02:00.000-07:00

Apa Perlu Memiliki Blog ? - Apa perlu kita memiliki sebuah blog atau bahkan lebih ? Ternyata tidak sedikit loh orang yang masih menanyakan hal ini ,entah melalui forum ataupun hanya dalam hati . Kenapa bisa begitu ? Karena tidak semua orang tau Potensi Online marketing itu sebesar apa .

Saya sering ditertawakan dan bahkan dilecehkan secara sosial saat saya cerita soal Blog yang mungkin membuat mereka bingung bahkan tidak tau dan sama sekali tidak tertarik . Apalagi saat saya bicarakan masalah SEO . Mungkin yang ada di benak mereka "Ngomong apaan si ni orang" .

Yah , saya akui memang itu mengesankan sekali . Lalu kembali ke pertanyaan yang sering mereka pertanyakan itu "Apa perlunya memiliki Blog?" .

Saya sudah sempat share di salah satu postingan terdahlu saya di salah satu blog saya yang lain yang bisa anda temukan disini , dan saya tidak akan membahasnya lagi . Yang disini akan kita bahas adalah mengenai potensi dan misal atau permisalan dari memiliki Blog yang tidak terpajang dalam postingan saya sebelumnya .

Bayangkan saja jika kita memiliki usaha atau semisal Toko . Mungkin secara konvensional kita akan dengan senang hati menjaga Toko dari pagi sampai sore atau bahkan malam , mengerahkan semua keluarga atau jika toko sudah besar membayar karyawan . Semua orang mampir ke Toko kita dan membeli kebutuhan mereka dengan harga yang sudah ditentukan .

Setiap hari kita membuka toko dengan sepenuh hati dan melayani orang-orang sekitar toko . Atau jika sudah lumayan terkenal maka seluruh orang di daerah tersebut akan belanja ke toko kita . Mungkin jumlah penduduk daerah kita ada 5000 orang yang selalu datang setiap hari dan tidak pernah libur untuk datang ke toko kita .

Namun coba bayangkan jika kita juga memiliki Toko di Dunia Online . Tidak hanya orang di daerah kita yang akan datang dan membeli barang di toko kita melainkan orang dari seluruh dunia tanpa terkecuali . karena sekarang Internet sudah masuk ke setiap belahan dunia .

Bayangkan saja jika 5000 orang dari setiap negara mampir ke Toko online kita dan membeli barang yang mereka butuhkan ... Waah mantap kan ?

Terus lagi jika misal kita buka bengkel , paling berapa orang yang mau mampir . Iya kalau bengkel kita resmi dan maknyus service-annya , mungkin bakal ada 100 orang perhari yang datang . lah kalau kita buka bengkel Online juga ? Pasti bakal lebih luas jangkauannya . Dalam hal ini Media online berguna untuk hal promosi dan iklan agar jangkauan bengkel lebih luas dan sudah barang tentu konsumen akan bertambah . Apalagi jika layanan bengkel kita memuaskan .

Sekarang ini sudah banyak sekali toko atau restoran yang memanfaatkan media online untuk menjajakkan dagangannya dan sudah terbukti omset mereka bertambah .

Jika kita tidak punya usaha nyata semisal toko seperti tadi diatas , kita tetap saja bisa jualan online dengan cara menjadi Reseller atau Afiliater dari sebuah perusahaan . Kita tidak punya barang dagangan , tapi bisa berjualan online dan sudah pasti ada keuntungan dari setiap transaksinya .

Beberapa waktu lalu saya dengar kabar bahwa ada seorang bloger yang menjadi reseller dan berhasil menjual hingga menembus angka 100 jutaan . Padahal yang dijual terkesan sepele loh , yakni tempat sampah . Begitu besar kan potensinya ... ?

Yah , itu lah mengapa kita perlu memiliki Blog atau kalau perlu Website biar benar-benar profesional dan tidak asal-asalan .

Banyak loh orang-orang kita yang sukses hanya karena menggeluti usaha di blog , bahkan blog yang gratisan .

Mungkin bagi kebanyakan orang hal itu tidak masuk akal dan terkesan mngada-ngada , mana ada orang tidak capek tapi dapat duit banyak ?
Loh , prinsip kerja keras kan sudah berakhir di tahun 2008 , sekarang prinsipnya adalah kerja cerdas . anda setuju ?

The First met

2013-08-17T03:39:00.000-07:00

Untuk mengawali rumah baru ini pertama saya akan mengucap syukur atas rahmat Tuhan yang begitu baik untuk kita semua . Dan disini , Rumah baru ini semoga apa yang kita lakukan bersama akan menjadi lebih berkah dan bermanfaat .

Saya juga tidak lupa untuk berterimakasih kepada semua orang yang selama ini telah mendukung saya atas apa yang saya lakukan dan kerjakan selama ini , dan semoga amal baik kalian semua diterima oleh Tuhan .

Di awal posting ini saya juga akan mengenalkan sedikit mengenai apa saja yang akan anda temui di blog sederhana ini .

Sesuai dengan nama Blog ini yang tercipta begitu saja dan tanpa sengaja , Featurity yang saya sendiri tidak begitu yakin dengan arti dan makna sesungguhnya . Namun saya sebagai pendiri dan pembuat nama ini tentu memiliki arti tersendiri .

Ya, semua fitur yang ada di bumi hahah atau minimal yang ada di internet yang bisa kita gunakan dan akan lebih bermanfaat . Mungkin itu saja yang akan saya share di dalam Blog ini dan semoga saja semua hal yang saya berikan bisa menjadi manfaat bagi banyak orang termasuk anda .

Oke , mungkin itu saja introducing dari saya dan nantikan semua post dan artikel menarik yang dapat anda baca disini .