blogger-nesia

4 Jenis Komentator Dari Blogging

Unknown 0 blogging tips, css, komentar, tutorial blog 14.17

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVKU7ijr8MwfcnmwbtqNJkwSW4Okmk0_eat2visPdHisVHls2k7P4vscDS-AwH4a2PbROPecbt04dEXHaEBiF8tNboLRimNF6Zy8BGJe1zx8alb4YHGpMd-ezLyWeE3oLs_y9YqdrtIHc/s1600/komen.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="4 Jenis Komentator Dari Blogging" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVKU7ijr8MwfcnmwbtqNJkwSW4Okmk0_eat2visPdHisVHls2k7P4vscDS-AwH4a2PbROPecbt04dEXHaEBiF8tNboLRimNF6Zy8BGJe1zx8alb4YHGpMd-ezLyWeE3oLs_y9YqdrtIHc/s1600/komen.jpg" title="4 Jenis Komentator Dari Blogging" /></a>Komentar dan Blogging sungguh tak bisa dipisahkan karena setiap kali kita melakukan aktivitas blogging kita pasti memposting sesuatu di blog kita untuk dibaca para pengunjung nantinya, sehingga di dalam postingan itu biasanya terdapat komentar-komentar yang biasanya berisi kritik,saran, dan bahkan pujian. 
Sayang seribu sayang,modern ini banyak sekali orang yang berkomentar sangat aneh tentu saja ini akibat mereka  yang berpikiran bahwa " Tidak perlu membaca yang penting komen ". 
 
Mengapa kita harus berkomentar di blog orang lain ? karena banyak sekali blogger profesional yang mengatakan  “Leave comments on other blogs”  Tapi Mengapa harus dengan berkomentar ? jawabannya  karena simpel dan semua orang bisa melakukannya. Tapi kita tetap harus menjaga tata krama dalam berkomentar, hal ini salah satu poin yang sudah saya bahas di postingan sebelumnya. 
Read More: <a href="http://blogger-nesia.blogspot.com/2014/01/tata-cara-berkomentar-yang-baik.html" rel="nofollow" target="_blank">Tata Cara Berkomentar Yang Baik Dan Benar</a> 
 
 
 
Ada satu jenis Komentator yang paling tidak disenangi yaitu spammer,dia memposting komen sebanyak-banyaknya dengan pesan yang sama dan alhasil hanya menjadi <strike>sampah </strike> di blog kita. Jadi apa yang harus segera kita lakukan  ? kita sebagai blogger harus menyadari bahwa hal yang kita lakukan salah dan mulai sekarang menjadi real-value commentator alias komentator yang berharga bagi pemilik blog yang komentari. Jika kita berkomentar dengan komentar yang tidak bermutu komentar anda tidak akan ditampilkan oleh sang pemilik blog. 
Read More : <a href="http://blogger-nesia.blogspot.com/2014/01/cara-mengatasi-spam-pada-blog.html" rel="nofollow" target="_blank">Cara Mengatasi Spam Pada Blog</a> 
 
Ok cukup dengan komentar saya diatas, semoga dengan membaca postingan ini anda dan saya juga bisa menjadi blogger dengan komentar-komentar bermutu ke depannya 
 
<div id="intro">
 
<table><tbody>
<tr>
<td><div class=" intro0">
<a href="http://blogger-nesia.blogspot.com/2014/02/4-jenis-komentator-dari-blogging.html" rel="nofollow">INTRO </a></div>
</td><td><div class=" intro1">
<a href="http://blogger-nesia.blogspot.com/p/1-spammer.html" rel="nofollow">1 </a></div>
</td>
<td><div class=" intro1">
<a href="http://blogger-nesia.blogspot.com/p/2backlink-hunter.html" rel="nofollow">2</a></div>
</td>
<td><div class=" intro1">
<a href="http://blogger-nesia.blogspot.com/p/3backlink-hunter.html" rel="nofollow">3 </a></div>
</td>
<td><div class=" intro1">
<a href="http://blogger-nesia.blogspot.com/p/4.html" rel="nofollow">4 </a></div>
</td>
<td><div class=" intro1">
<a href="http://blogger-nesia.blogspot.com/p/1-spammer.html" rel="nofollow">>> </a></div>
</td>
</tr>
</tbody></table>
</div>

4 Jenis Komentator Dari Blogging

Komentar dan Blogging sungguh tak bisa dipisahkan karena setiap kali kita melakukan aktivitas blogging kita pasti memposting sesuatu di blog...

Baca selengkapnya »

Cara Mengubah Warna di Blogspot

Unknown 0 blogging tips, css, tutorial blog 22.26

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhinOLzdAMexlH_w7gwmvDn8Y8nQi-Y8jFcFtLDvOSivG8ZEQ5wVl4puhDpIeuZMETVOtHzG7p5wKcZgAXNhDN46d4C0icHsl1aCIT345RG48ziveliXMZcMuwGPBU9GUkRl3RpUIJHaJ5y/s1600/warna.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Mengubah Warna di Blogspot" border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhinOLzdAMexlH_w7gwmvDn8Y8nQi-Y8jFcFtLDvOSivG8ZEQ5wVl4puhDpIeuZMETVOtHzG7p5wKcZgAXNhDN46d4C0icHsl1aCIT345RG48ziveliXMZcMuwGPBU9GUkRl3RpUIJHaJ5y/s1600/warna.jpg" title="Cara Mengubah Warna di Blogspot" width="320" /></a></div>
Jika anda adalah seseorang yang sering berutak-atik dengan yang namanya kode atau bahkan adalah adalah seorang " desainer " template  maka salah satu aspek yang harus diperhatikan adalah pemilihan warna template. Pemilihan warna template tidak hanya melulu tentang background template anda namun juga tentang warna widget yang akan dipakai bahkan sampai pemilihan warna font yang akan digunakan apakah bisa dibaca dengan jelas atau justru warnanya tertimpa background blog. 
 
 
 
Walaupun nampak simpel namun aspek ini sangat berpengaruh dengan banyaknya pengunjung  karena warna sangat berpengaruh dalam memberikan kenyamanan bagi pengunjung. Contoh kongkritnya saja adalah warna biru yang banyak digunakan berbagai social media seperti facebook, twitter, dan instagram karena menurut penelitian warna biru bisa menghilangkan stress. 
 
Lalu bagaimana caranya mengubah warna di blogspot ? ada 2 kode  berbeda yang bisa dipakai yaitu dengan menggunakan Hexadimal  dan juga menggunakan RGB. 
 
 
 
<h4>
1. RGB</h4>
RGB adalah singkatan dari Red(merah) ,Green (hijau ) , Blue ( iru ). Secara singkat warna RGB merupakan gabungan/perpaduan ketiga warna tersebut ,contohnya ketika menginginkan kode berwarna merah maka kita akan menggunakan kode : RGB(255,0,0). Kita menggunakan angka 0 pada kode tersebut untuk memunculkan warna merah sempurna dengan menghilangkan/meniadakan warna biru dan hijau. 
DEMO. Untuk contoh penggunaan kode warna RGB ini anda bisa melihat kodenya seperti berikut 
 
<div style="margin: 2px; text-align: center;">
<div class="smallfont" style="margin-bottom: 2px;">
 
 <input class="BD_spoler" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP CODE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'CODE CSS'; }" style="font-size: large; margin: 0px; padding: 0px; text-align: center; width: 150px;" type="button" value="CODE CSS" />
 </div>
<div class="alt2" style="background-color: #ebebeb; border: 1px inset; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin: 0px; padding: 4px;">
<div style="display: none; padding: 0 10px; text-align: left;">
.div { 
    background: solid rgb(255,0,0); 
}</div>
</div>
</div>
 
 
 
 
<h4>
2.Hexadecimal</h4>
hexadecimal color atau yang biasa disingkat HEX ini Sebenarnya hexadecimal juga menggunakan format RGB, hanya saja kode hexadecimal disingkat menjadi kombinasi 6 angka dan huruf yang diawali dengan tanda #, ada pula kode hexadecimal yang hanya mengandung 3 kombinasi angka dan huruf yaitu #fff ( Putih ) dan #000( HItam ). 
 
kode warna HEX lebih sering digunakan karena lebih mudah dihapal dan jika anda tidak mengetahui kodenya anda cukup menggunakan bahasa inggris kodenya seperti color :  red; maka kode tersebut sudah cukup untuk memberikan warna pada template anda. Untuk contoh penggunaan kode warna RGB ini anda bisa melihat kodenya seperti berikut 
Hexadecimal
 
<div style="margin: 2px; text-align: center;">
<div class="smallfont" style="margin-bottom: 2px;">
 
 <input class="BD_spoler" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'TUTUP CODE'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'CODE CSS'; }" style="font-size: large; margin: 0px; padding: 0px; text-align: center; width: 150px;" type="button" value="CODE CSS" />
 </div>
<div class="alt2" style="background-color: #ebebeb; border: 1px inset; font-family: 'Courier New', Courier, monospace; font-size: 12px; margin: 0px; padding: 4px;">
<div style="display: none; padding: 0 10px; text-align: left;">
.BloggerSpiceB2T {text-align:center;margin-top:20px;color: #333 }</div>
</div>
</div>

Cara Mengubah Warna di Blogspot

Jika anda adalah seseorang yang sering berutak-atik dengan yang namanya kode atau bahkan adalah adalah seorang " desainer " temp...

Baca selengkapnya »

Cara Membuat Tombol Back To Top Ala Kang Ismet

Unknown 7 back to top, sticky widget, tutorial blog 19.33

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkLWyJCwZhXz8FoXKtUGgf9WONk4DFaWHuYSOT8WVw2ETc1jwvcXGw1dZK4vBBzBxTyia7sVeMYjfWi8EFu6HM_VptAJP8PDIN-mpQqMcgTvPVgoisq6_w7LREYFaaHo9dlNQlwmNW8Mej/s1600/panah.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img alt="Cara Membuat Tombol Back To Top Ala Kang Ismet" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkLWyJCwZhXz8FoXKtUGgf9WONk4DFaWHuYSOT8WVw2ETc1jwvcXGw1dZK4vBBzBxTyia7sVeMYjfWi8EFu6HM_VptAJP8PDIN-mpQqMcgTvPVgoisq6_w7LREYFaaHo9dlNQlwmNW8Mej/s1600/panah.png" title="Cara Membuat Tombol Back To Top Ala Kang Ismet" /></a>Banyak sekali hal yang keren bisa kita dapatkan dari seorang " master " atau orang yang lebih hebat dari kita. Salah satunya tampilan blognya, sebenarnya awalnya saya ragu untuk memposting tutorial ini namun sekarang saya sudah cukup yakin karena kang ismet sudah menshare template " droidpluss " yang menggunakan tombol back to top ini. ( Demo : <a href="http://droidpluss.blogspot.com/%C2%A0" rel="nofollow" target="_blank">klik disini</a> | Untuk postingan berikutnya akan saya share template tersebut ) 
 
Memang banyak sekali tombol back to top yang anda gunakan, namun menurut saya tombol ini memiliki " kharisma " yang lain karena dengan menggunakan bentuk budar (bukan kotak, yang biasanya digunakan ) maka orang akan tertarik untuk kembali ke bagian atas blog anda dan mencoba menggunakan menu horizontal anda untuk dengan mudah bernavigasi. 
 
 
<div class="BStitle">
cara pemasangan di blog</div>
 
 
<ul>
<li>Step 1  Buka blogger.com lalu pilih blog  anda</li>
<li>Step 2  Pilih template lalu edit html</li>
<li>Step 3  Cari kode ]]></b:skin> dengan mengklik   <key>CTRL</key> +<key>F</key> </li>
<li>Step 4  Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi</li>
</ul>
<blockquote class="tr_bq">
#BounceToTop {background:#5c6c7e;text-align:center;position:fixed;bottom:10px;right:10px;cursor:pointer;width:40px;height:40px;border-radius:1000px;padding:5px;display:none;transition:all .3s ease-out;} #BounceToTop:hover {background:#2a3542;} #BounceToTop:before {content:""; position:absolute; bottom:18px; right:14px; width:0; height:0; border-style:solid; border-width:0 11px 16px 12px; border-color:transparent transparent #fff transparent; line-height:0;} #BounceToTop:after {content:""; position:absolute; bottom:18px; right:15px; width:0; height:0; border-style:solid; border-width:0 10px 14px 11px; border- 
color:transparent transparent #5c6c7e transparent; line-height:0;transition:all .3s ease-out;} #BounceToTop:hover:after {border-color:transparent transparent #2a3542 transparent;}</blockquote>
 
<ul>
<li>Step 5  Cari kode </head> dengan mengklik   <key>CTRL</key> +<key>F</key> </li>
<li>Step 6  Copy kode berikut lalu pastekan pada diatas kode </head>  tadi</li>
</ul>
<blockquote class="tr_bq">
<script type='text/javascript'> $(function() { $(window).scroll(function() { if($(this).scrollTop()&gt;100) { $(&#39;#BounceToTop&#39;).slideDown(200); } else { $(&#39;#BounceToTop&#39;).slideUp(300); } }); $(&#39;#BounceToTop&#39;).click(function() { $(&#39;body,html&#39;).animate({scrollTop:0},800) .animate({scrollTop:25},200) .animate({scrollTop:0},150) .animate({scrollTop:10},100) .animate({scrollTop:0},50); }); }); </script></blockquote>
 
<ul>
<li>Step 7  masih di atas kode </head> tadi pastekan kode berikut</li>
</ul>
<blockquote class="tr_bq">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/></blockquote>
<div class="tips">
Jika jquery plugin sudah ada di blog anda ( versi berapapun ) maka lewati langkah ini
</div>
 
<ul>
<li>Step 8  Kembali ke menu samping bloggger, Pilih tata letak</li>
<li>Step 9  Buka pilihan gadget lalu HTML/Javascript</li>
<li>Step 10  Copy kode berikut lalu pastekan pada HTML/Javascript tadi</li>
</ul>
<blockquote class="tr_bq">
<style type='text/css' scoped='scoped'> #BounceToTop{position:fixed; bottom:0px; right:3px; cursor:pointer;display:none} </style> <div id="BounceToTop" style="display: block;"></div></blockquote>
 
<ul>
<li>Step 11  Simpan lalu cek bog anda untuk melihat hasilnya</li>
</ul>
Jika anda berpikir widget back to top  ini kurang sesuai dengan tampilan blog anda,jangan khawatir kami sudah menyediakan beragam widget back to top lainnya( <a href="http://blogger-nesia.blogspot.com/search/label/back%20to%20top" rel="nofollow" target="_blank">Klik Disini</a> ) 
 
 
jika ada yang ingin agan tanyakan  silahkan berkomentar/mengcontact saya di fb yang bisa anda lihat urlnya di bagian contact us.assalamualaikum wr.wb.

Cara Membuat Tombol Back To Top Ala Kang Ismet

Banyak sekali hal yang keren bisa kita dapatkan dari seorang " master " atau orang yang lebih hebat dari kita. Salah satunya tampi...

Baca selengkapnya »

Cara Membuat Label Dengan Bounce Counter Di Blogspot

Unknown 2 css, label, tutorial blog, widget 11.59

<div class="tr_bq">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTh7uPBYkW27LgkrjMmbi33_djfojn8NvCglzWxC7keEyN2od8Dqv0nMPplbaEfnibky1WdBV4Yvm3G78cGec4LwV4uGF4Bzq5bsi1NY19MWyMVqj5k7NtqaJWqQYZRWC9UGOsHAEwfb2-/s1600/contoh+label.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img alt="Cara Membuat Label Dengan Bounce Counter Di Blogspot" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTh7uPBYkW27LgkrjMmbi33_djfojn8NvCglzWxC7keEyN2od8Dqv0nMPplbaEfnibky1WdBV4Yvm3G78cGec4LwV4uGF4Bzq5bsi1NY19MWyMVqj5k7NtqaJWqQYZRWC9UGOsHAEwfb2-/s1600/contoh+label.png" title="Cara Membuat Label Dengan Bounce Counter Di Blogspot" /></a> 
 
Banyak sekali berbagai jenis bentuk label yang bisa ada pakai di blog anda, namun karena hampir 100% pengguna blog menggunakan label maka bentuk label yang berbeda akan sulit ditemui. Untuk menghasilkan label yang berbeda maka widget berikut ini akan kita tambahkan efek hover, efek tooltips dan efek transition cubic-bezier.</div>
 
Widget ini dasarnya berwarna hitam,namun jika anda memiliki blog dengan background putih anda bisa dengan mudah mengubah warna dasarnya dengan menggunakan kode hexa color. Jika anda ingin melihat demonya anda bisa lihat pada bagian label( kanan ) blog ini. 
 
Jika anda belum memasang label apapun di blog anda maka anda harus memasangnya terlebih dahulu dengan membuka tutorial berikut 
 
 
<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: center;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 100px;" type="button" value="Buka" /> </div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div class="BStitle">
cara pemasangan label di blog</div>
 
 
<ul>
<li>Step 1  Buka blogger.com lalu pilih blog  anda</li>
<li>Step 2  Pilih tata letak</li>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5zM2GTMybrn4Rh-vzh7piCD3pAmMngnW_dAq9PxgQ0xRKyobAWJlY7QhdzIihC37FsWgAqSnTWXzAj8UV5IzCoO34PDd3Sq0X1Opnij0EOBo0i8AVGwUS1VHKRObxoj8_Cbe815Tl4dK/s1600/pasang-label-cara3.jpg" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5zM2GTMybrn4Rh-vzh7piCD3pAmMngnW_dAq9PxgQ0xRKyobAWJlY7QhdzIihC37FsWgAqSnTWXzAj8UV5IzCoO34PDd3Sq0X1Opnij0EOBo0i8AVGwUS1VHKRObxoj8_Cbe815Tl4dK/s1600/pasang-label-cara3.jpg" /></a>
<li>Step 3  Selanjutnya pilih tambahkan widget</li>
<li>Step 4  Pilihlan option label seperti gambar berikut ini </li>
</ul>
<div>
 </div>
<ul>
<li>Step 5  pastikan anda memilih bentuk daftar ,bukannya memilih opsi cloud</li>
<li>Step 6  Selanjutnya pastikan bila anda mencentang kolom tampilkan jumlah entri per label</li>
</ul>
</div>
</div>
</div>
 
 
<div class="info">
Jika anda sudah memasang label di blog anda maka lewati tutorial singkat diatas
</div>
 
 
 
Setelah anda memiliki widget label di blog anda maka sekarang anda harus mengubah tampilan widget standar menjadi widget label yang menggunakan bounce counter, dengan mengikuti petunjuk berikut 
 
 
<div class="BStitle">
cara pemasangan di blog</div>
 
 
<ul>
<li>Step 1  Buka blogger.com lalu pilih blog  anda</li>
<li>Step 2  Pilih template lalu edit html</li>
<li>Step 3  Cari kode yang mirip dengan <b:widget id='Label1' locked='false' title='Label' type='Label'> <b:includable id='main'> </li>
<li>Step 4  Setelah anda menemukan kode yang mirip tersebut maka hapuslah kode yang ada diantara <b:widget id='Label1' locked='false' title='Label' type='Label'> <b:includable id='main'>  dengan </b:includable></b:widget>   . Sehingga menjadi seperti berikut</li>
</ul>
<blockquote>
<b:widget id='Label1' locked='false' title='Label' type='Label'> <b:includable id='main'>
 
 hapus semua pada bagian ini.
 
 
 </b:includable> </b:widget></blockquote>
 
<ul>
<li>Step 5  Selanjutnya ganti bagian yang dihapus tersebut dengan kode berikut</li>
</ul>
 
 
<blockquote class="tr_bq">
<b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> <b:if cond='data:display == &quot;list&quot;'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> <b:if cond='data:showFreqNumbers'> <data:label.count/> Artikel </b:if> </b:if> </li> </b:loop> </ul> <b:else/> <b:loop values='data:labels' var='label'> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a> </b:if> <b:if cond='data:showFreqNumbers'> (<data:label.count/>) </b:if> </b:loop> </b:if> </div></blockquote>
 
 
<ul>
<li>Step 6  Saat ini kode tersebut sudah selesai sekarang, kita akan mengubah tampilan cssnya. Cari kode ]]></b:skin> selanjutnya pastekan css berikut diatasnya</li>
</ul>
 
<blockquote class="tr_bq">
.sidebar ul li { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFF5RHEIAziwAMc6eZKc-AQdg_1FXf31MsRGdKp_U8O9E32umq2J9-rvsgoxUp_nd5fz91TXk6PYNujBSWEswH4gakh-ti7WM4dztZa7GRQxv8VZYNchR86P4WPXyS-7WIDp-Wtzv6gij8/s1600/icon-new-window.png) no-repeat left center; list-style-type:none; margin:0 0 5px; padding-left:20px; transition:padding 0.26s ease; -moz-transition:padding 0.26s ease; -webkit-transition:padding 0.26s ease; } .sidebar ul li:hover { padding-left:23px; } .sidebar ul li:hover span.label-count { opacity:0.5; margin-left:10px; } span.label-count { background:#000; border-radius:0 10px 10px 0; -moz-border-radius:0 10px 10px 0; -webkit-border-radius:0 10px 10px 0; color:#FFF; height:auto; margin-left:50px; opacity:0; position:relative; 
text-align:center; width:auto; padding:2px 8px; transition:all 0.3s cubic-bezier(1,2,0,0) 0s; -moz-transition:all 0.3s cubic-bezier(1,2,0,0) 0s; -webkit-transition:all 0.3s cubic-bezier(1,2,0,0) 0s; } span.label-count:before { content:""; width:0; height:0; position:absolute; right:100%; top:0; border-width:10px; border-style:solid; border-color:transparent black transparent transparent; }</blockquote>
 
<ul>
<li>Step 7  Simpan lalu cek bog anda untuk melihat hasilnya</li>
</ul>
Jika menurut anda artikel ini cukup sulit untuk dipahami, anda bisa membaca penjelasan lainnya dari sumber berikut <a href="http://under-88.blogspot.com/2012/08/css3-count-label-blogger.html#axzz2sXTPmOnU" rel="nofollow" target="_blank">Sumber</a>

Cara Membuat Label Dengan Bounce Counter Di Blogspot

Banyak sekali berbagai jenis bentuk label yang bisa ada pakai di blog anda, namun karena hampir 100% pengguna blog menggunakan label maka...

Baca selengkapnya »

Tombol Facebook Slide Out Share Di Blog

Unknown 16 css, Facebook, seo, share, socmed, tutorial blog, widget 20.46

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqxqFjcBzT3fkDOBJnwzqMcBTCQTVfkuCmpbMOAXffOHkOc3r1Y2n3PesIQAo0CM79qmivUY0q6fZ-gf1AJlsVJbjXhkhlPNjbnakmk8_agkj9C2AxFNWqakiFiaXGBTgZJDQ6Qtq3D1H3/s1600/share.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img alt="Tombol Facebook Slide Out Share Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqxqFjcBzT3fkDOBJnwzqMcBTCQTVfkuCmpbMOAXffOHkOc3r1Y2n3PesIQAo0CM79qmivUY0q6fZ-gf1AJlsVJbjXhkhlPNjbnakmk8_agkj9C2AxFNWqakiFiaXGBTgZJDQ6Qtq3D1H3/s1600/share.png" title="Tombol Facebook Slide Out Share Di Blog" /></a> 
Media sosial memang menjadi senjata ampuh dalam meningkatkan jumlah pengunjung yang datang ke blog kita, beberapa sosial media yang terkenal adalah twitter, pinterest, google+ , dan yang akan kita bahas kali ini adalah media sosial kepemilikan Mark Zuckerberg. Salah satu cara yang paling umum adalah membuat sebuah fanspage di facebook untuk mempromosikan blog anda. ( Baca juga : <a href="http://blogger-nesia.blogspot.com/2013/09/cara-membuat-fanspage-di-facebook.html" rel="nofollow" target="_blank">Cara Membuat Fanspage Di Facebook</a> ) 
 
Lalu jika kita sudah memiliki sebuah fanspage di facebook, apa yang harus kita lakukan ?  pertama  kita harus memiliki audience atau penonton yang melihat isi dari blog kita di facebok, tapi bagaimana cara mendapatkannya ? anda bisa membaca artikel berikut : <a href="http://blogger-nesia.blogspot.com/2013/09/cara-mengembangkan-fanspage.html" rel="nofollow" target="_blank">Cara Mengembangkan Fanspage</a>. selanjutnya adalah membagikan postingan anda ke facebook atau ke fanspage anda,dan widget ini cukup penting bila anda ingin membagikan postingan anda. 
 
 
 
Mengapa anda harus memasang widget Facebook Slide Out Share ini ? karena widget ini memiliki banyak  fitur seperti 
-Dibuat dengan css3 dengan trasisi yang keren 
-support semua brwosers 
atraktif dan elegan 
-hanya muncul pada halaman posting 
-dan masih banyak lagi 
 
<div class="separator" style="clear: both; text-align: center;">
<a class="demo" href="http://infolerss.blogspot.com/" rel="nofollow" target="_blank">Demo</a>
</div>
 
 
<div class="BStitle">
cara pemasangan di blog</div>
 
 
<ul>
<li>Step 1  Buka blogger.com lalu pilih blog  anda</li>
<li>Step 2  Pilih tata letak</li>
<li>Step 3  Buka pilihkan gadget lalu HTML/Javascript</li>
<li>Step 4  Copy kode berikut lalu pastekan pada HTML/Javascript tadi</li>
</ul>
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == "item"'><style>#fixed-share {background: none repeat scroll 0 0 #4C6699;border-bottom: 3px solid #30476F;bottom: 60px;box-shadow: 0 8px 8px #888888;font-family: Arial;font-size: 16px;padding: 15px 30px 15px 15px;position: fixed;right: -147px;text-align: left;text-transform: uppercase;transition: all 1s ease 0s;z-index: 10;}#fixed-share:hover {right: 0}#fixed-share:hover > #share-box {right: 147px}#share-box {background: none repeat scroll 0 0 #4C6699;bottom: 72px;box-shadow: 0 8px 8px #888888;height: 40px;position: fixed;right: 1px;text-align: center;transition: all 1s ease 0s;width: 40px;}</style> <div id="fixed-share"> <div id="share-box"><img src="http://s10.postimg.org/s1a8ghl6t/Fb_Logo.png" /></div>Support Us <script>(function(d){ var js, id ='facebook-jssdk'; if (d.getElementById(id)) {return;} js =d.createElement('script'); js.id = id; js.async = true; js.src ="//connect.facebook.net/en_US/all.js#xfbml=1";d.getElementsByTagName('head')[0].appendChild(js);}(document));</script>  <fb:share-button expr:href='data:post.url'type='button_count'/> </fb:share-button></div></b:if></blockquote>
Step 5  Simpan lalu cek bog anda untuk melihat hasilnya
 
 
itu adalah salah satu cara untuk mempromosikan blog anda di facebook dengan melakukan share postingan anda. masih banyak widget sosial media facebook dan tips untuk bisa mengembangkan blog anda melalui facebook, semuanya bisa anda baca di <a href="http://blogger-nesia.blogspot.com/search/label/Facebook" rel="nofollow" target="_blank">sini</a> 
 
 
Sekian dan wassalamualaikum wr.wb. 
<div class="separator" style="clear: both; text-align: center;">
 </div>

Tombol Facebook Slide Out Share Di Blog

Media sosial memang menjadi senjata ampuh dalam meningkatkan jumlah pengunjung yang datang ke blog kita, beberapa sosial media yang terkena...

Baca selengkapnya »

Breadcrumbs Valid HTML5 SEO Friendly

Unknown 4 breadcrumbs, tutorial blog, widget 19.02

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjTdxjuI3GZgQ7J02N7lIvXt5nDsR8GNez_3EXs00vb5pTQViqIJlZI3tWUUUK384CD6CibjDyZRoPZlwMsTlBDC2klpef-CKFcTJSPVM1Dqz_8dOGtru91yV2HerFSNTEIt2sX3-PX8Q/s1600/Cara+Membuat+Breadcrumbs+SEO+Friendly+dan+Valid+HTML5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Breadcrumbs Valid HTML5 SEO Friendly" border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyjTdxjuI3GZgQ7J02N7lIvXt5nDsR8GNez_3EXs00vb5pTQViqIJlZI3tWUUUK384CD6CibjDyZRoPZlwMsTlBDC2klpef-CKFcTJSPVM1Dqz_8dOGtru91yV2HerFSNTEIt2sX3-PX8Q/s1600/Cara+Membuat+Breadcrumbs+SEO+Friendly+dan+Valid+HTML5.jpg" title="Breadcrumbs Valid HTML5 SEO Friendly" width="320" /></a></div>
Sudah sekitar satu minggu saya tidak bisa mengakses internet, dan akhirnya saya akan membuat suatu postingan tentang salah satu komponen penting saat anda ingin membangun sebuah template.              Breadcrumbs memang salah satu bagian penting dalam template karena breadcrumbs membantu untuk menampilkan tentang informasi indeks postinganmu dan kategori dari postinganmu, tentu saja hal ini akan meningkatkan SEO ( Search Engine Optimalization ) pada blog anda. 
 
Menggunakan breadcrumbs memiliki beberapa manfaat bagi pengunjung maupun search engine ( faktor SEO ) seperti yang telah saya katakan sebelumnya, namun jika kita lebih rincikan keuntungannya maka akan seperti berikut. 
 
Keuntungan Bagi Para Pengunjung 
 
<ul>
<li>1. Menunjukan kategori apa yang sesuai dengan postingan yang ia buka</li>
<li>2.memberikan tanda dan mengetahui di bagian mana pengunjung web atau blog kita saat berada dalam web atau blog kita, selain itu untuk mengikuti kembali ke halaman utama atau kategori lainnya.</li>
<li>3.Memudahkan navigasi pengunjung untuk berpindah dari satu halaman ke halaman lainnya</li>
</ul>
 
 
Keuntungan Bagi Pemilik Blog 
 
<ul>
<li>1. Mempercepat indeks dari google search engine</li>
<li>2. Mempermudah "calon pengunjung " untuk melihat kategori dari postingan yang ingin ia carijika kita mengunjungi google search engine untuk mencari sesuatu pastinya salah satu hal yang penting adalah melihat label/kategori postingan tersebut, karena kita akan mampu mengetahui postingan itu sesuai dengan keinginan kita atau tidak.</li>
<li>3. Menurunkan Bounce Ratedengan adanya breadcrumbs di blog kita, maka pengunjung akan mudah untuk bernavigasi sehingga pengunjung tidak hanya mengunjungi satu postingan tapi akan melihat postingan kita lainnya tentu ini akan menurunkan bounce rate blog kita. Read More : <a href="http://blogger-nesia.blogspot.com/2014/01/cara-menurunkan-bounce-rate-di-blog.html" rel="nofollow" target="_blank">Cara Menurunkan Bounce Rate Di Blog</a></li>
</ul>
 
 
Banyak sekali Breadcrumbs bertebaran di internet namun breadcrumbs satu ini merupakan salah satu yang terbaik karena valid HTML5 dan SEO friendly. 
 
<div class="BStitle">
cara pemasangan di blog</div>
 
 
<ul>
<li>Step 1  Buka blogger.com lalu pilih blog  anda</li>
<li>Step 2  Pilih template lalu edit html</li>
<li>Step 3  Cari kode ]]></b:skin> dengan mengklik   <key>CTRL</key> +<key>F</key> </li>
<li>Step 4  Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi</li>
</ul>
<blockquote class="tr_bq">
.breadcrumbs a:hover, .status_msg a:hover {text-decoration: underline;}.breadcrumbs a, .status_msg a {color:#5B5B5B;}.breadcrumbs, .status_msg {width: 720px;background: #FEFFE;-webkit-box-shadow: 0 0 15px #222;-moz-box-shadow: 0 0 15px #222;box-shadow: 0 0 10px #888;-moz-border-radius: 4px;-khtml-border-radius: 4px;-webkit-border-radius: 4px;border-radius: 4px;padding: 10px;margin-top: 2px;font-size: 10px;margin-bottom: 25px;text-transform: uppercase;color: #666;} </blockquote>
 Step 5  Sekarang cari kode yang mirip dengan <b:includable id='main' var='top'>  Step 6  Selanjutnya ganti kode  <b:includable id='main' var='top'> tadi dengan kode berikut 
<blockquote class="tr_bq">
<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'><b:if cond='data:blog.pageType == &quot;static_page&quot;'><div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187; <data:blog.pageName/></div><b:else/><b:if cond='data:blog.pageType == &quot;item&quot;'><b:loop values='data:posts' var='post'><b:if cond='data:post.labels'><div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' itemprop='url'>Home</a><b:loop values='data:post.labels' var='label'>  &#187; <a expr:href='data:label.url' itemprop='url'><data:label.name/></a></b:loop>&#187; <data:post.title/></div><b:else/><div class='breadcrumbs'><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &#187; Unlabelled &#187; <data:post.title/></div></b:if></b:loop><b:else/><b:if cond='data:blog.pageType == &quot;archive&quot;'><div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/></div><b:else/><b:if cond='data:blog.pageType == &quot;index&quot;'><div class='breadcrumbs'><b:if cond='data:blog.pageName == &quot;&quot;'><a expr:href='data:blog.homepageUrl'>Home</a> &#187; All posts<b:else/><a expr:href='data:blog.homepageUrl'>Home</a> &#187; Posts filed under <data:blog.pageName/></b:if></div></b:if></b:if></b:if></b:if></b:if></b:includable><b:includable id='main' var='top'><b:include data='posts' name='breadcrumb'/></blockquote>
 
Step 7  Simpan lalu cek bog anda untuk melihat hasilnya
 
 
 
Jika anda memiliki breadcrumbs di blog anda ,anda cukup mengahpus kodenya (kurang  lebih seperti kode yang ada di breadcrumbs ini ). Namun jika anda hanya ingin membuat breadcrumbs lama anda menjadi valid HTML5 dan SEO friendly maka anda bisa membaca prosedur lengkapnya di postingan sumber 
<a href="http://www.bloggerspice.com/2013/09/html5-valid-seo-friendly-breadcrumbs.html#.UjghJtLwaHQ" rel="nofollow" target="_blank">klik disini</a> 
 
Saya harap anda berhasil memasang breadcrumbs ini,dan dapatkan hasil yang memuaskan ,sekian postingan saya wassalamualaikum wr.wb.

Breadcrumbs Valid HTML5 SEO Friendly

Sudah sekitar satu minggu saya tidak bisa mengakses internet, dan akhirnya saya akan membuat suatu postingan tentang salah satu komponen p...

Baca selengkapnya »

blogger-nesia

[Title][featuredpost][random][5]

4 Jenis Komentator Dari Blogging

Cara Mengubah Warna di Blogspot

Cara Membuat Tombol Back To Top Ala Kang Ismet

Cara Membuat Label Dengan Bounce Counter Di Blogspot

Tombol Facebook Slide Out Share Di Blog

Breadcrumbs Valid HTML5 SEO Friendly

Labels

Popular

statistik

Labels