Cara Menyembunyikan Widget Blog di Tampilan Mobile

Tutorial Blogger,- Blogger adalah sebuah layanan milik google yang disediakan secara khusus kepada pengguna internet untuk membuat sebuah blog secara gratis, blogger memiliki keistimewaan sendiri dibandingkan dengan situs pembuat blog lainnya karena blog yang di buat melalui platform blogger mampu bersaing dengan web-web besar lain di mesin pencarian khususnya Google. Hal tersebut juga tidak lepas dengan pemiliknya yaitu google yang notabene sebagai mesin pencarian sekaligus perusahaan internet terbesar di dunia untuk saat ini. Nah buat anda yang berniat membuat blog gratisan saya sarankan di blogger karena pembuatannya yang mudah sekaligus banyak sekali tutorial yang beredar di internet.

Pada kesempatan kali ini saya juga akan membagikan tutorial mengenai blogger yang saya khususkan bagi pengguna lanjut, karena jika anda masih tahap belajar mungkin tutorial ini masih membingungkan. Tutorialnya adalah menyembunyikan widget di tampilan mobile atau HP, seperti yang sudah saya katakan diatas blogger mempunyai fitur untuk mempermudah penggunanya dalam mengelola blog, salah satunya adalah fitur widget yang ada di menu tata letak. Fitur ini memungkinkan kita untuk memasang fitur tambahan di blog kita yang tempatnya bisa kita sesuaikan.

Baca: Cara menyembunyikan widget tertentu di halaman utama blog

Untuk penambahan widget tidak ada batasnya, namun perlu diperhatikan bahwa terlalu banyak menambahkan widget blog bisa memperberat loading blog, yang akhirnya malah tidak membuat nyaman pengunjung. Seperti halnya di tampilan dekstop, di tampilan mobile atau hanphone juga harus diperhatikan karena terlalu banyak menambah widget di template juga akan mempengaruhi loading blog. Nah jika menambah banyak widget di tampilan dekstop tidak terlalu berpengaruh, namun jika di tampilan mobile mungkin cukup banyak pengaruhnya. Nah untuk itu silahkan sembunyikan widget yang tidak terlalu penting di tampilan mobile, untuk caranya bisa anda ikuti dibawah ini dan tenang saja cara ini hanya menyembunyikan di tampilan mobile saja dan jika dibuka di tampilan dekstop masih ada. Ok langsung saja berikut tutorialnya.

Cara Menyembunyikan Widget di Tampilan Mobile

1. Pertama sebelum melakukan tutorial ini anda harus mengetahui dulu kode html dari widget yang ingin disembunyikan pada tampilan mobile, untuk mengetahuinya cukup mudah yaitu tinggal masuk ke tata letak lalu klik edit pada widget yang ingin disembunyikan dan lihat dibagian kode HTML di bagian URL tersebut, (biasanya ada dibagian akhir).

2. Jika sudah diketahui selanjutnya masuk ke menu template lalu pilih "Edit HTML", kemudian untuk cara cepatnya mencari kode tersebut bisa klik menu "lompat ke widget" lalu pilih kode widget yang sudah dilihat di tata letak.

3. Jika sudah ketemu silahkan klik tanda panah kecil dibagian nomor, maka otomatis akan membuka seluruh kode widget tersebut. Disini biasanya akan terdapat lagi tanda panah setelah anda klik tanda panah pertama, silahkan klik lagi.

4. Nah untuk selanjutnya silahkan tambahkan kode CSS berikut untuk menyembunyikan widget tersebut di tampilan mobile yang sudah saya tandai dengan warna merah.

  <b:widget id='HTML11' locked='false' title='' type='HTML' version='1' visible='true'>
    <b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
  </b:widget>

5. Terakhir tinggal simpan template dan coba cek di smartphone anda.

Nah mudah bukan cara menyembunyikan widget di tampilan mobile, dengan begitu blog anda jika dibuka di perangkat mobile tidak akan terlalu berat loadingnya. Demikian artikel tutorial blog yang dapat saya bagikan dan terima kasih.

Cara Mengisi Menu Navigasi Dengan URL Postingan Blog

Tutorial Blog,- Setelah sekian lama saya tidak membagikan tutorial mengenai tips blog, pada kesempatan kali ini saya akan salah satu tutorialnya yaitu cara mengisi menu navigasi dengan URL postingan. Tutorial ini saya buat karena masih banyak pengguna blogger yang kesulitan mengisi menu navigasi bawaan template, yang dimaksud disini adalah template hasil download. Jika anda menggunakan template bawaan blogger, untuk memasang dan mengisi menu navigasi cukup mudah karena hanya perlu memasang widget di tata letak. Walau pun bagitu namun menu navigasi bawaan template blogger dikhususkan untuk laman atau label.

Berbeda dengan menu navigasi dari template hasil download, dimana kita bisa mengisi menu navigasi tersebut dengan URL yang kita kehendaki, seperti bisa URL postingan, label atau url dari blog lain. Terlebih lagi menu navigasi dari template hasil download juga memiliki tampilan lebih bagus serta bermacam-macam, plus kita bisa mengatur pewarnaan beserta ukuran yang kita inginkan. Dalam mengisi menu navigasi dengan URL postingan sangat dianjurkan ketimbang dengan url label, alasannya sendiri karena mengisi url menu navigasi langsung dengan url postingan bisa meningkatkan SEO blog karena jika di klik oleh pengunjung akan langsung menuju ke postingan. Berbeda jika di isi dengan label, karena terlebih dahulu akan masuk ke menu label atau kategori yang bersangkutan. Dan mengisi menu navigas dengan url postingan juga menjadi salah satu tips sukses di terima oleh google adsense.

Biasanya untuk mengisi menu navigasi baik dengan url label atau postingan, sudah di jelaskan dalam situs yang menyediakan template yang di download, namun biasanya pengunjung akan mengabaikan pengaturan tersebut karena ingin secepatnya memakai template tersebut. Nah untuk itu yang ingin tahu bagaimana cara mengisi menu navigasi dengan URL postingan atau label bisa di ikuti tutorial yang akan saya berikan kali ini.

Cara Mengisi Menu Navigasi dengan URL Postingan

Sebelum melakukan tutorial ini pastikan template anda sudah mendukung atau sudah ada menu navigasinya, karena jika tidak anda harus membuatnya sendiri. Jika berkenan silahkan gunakan template yang sudah saya sediakan yang pasti terbaik dan sangat SEO. Baca: 10 Tamplate SEO Friendly dan Responsive 2017.

1. Pertama yang pasti silahkan login ke blogger.
2. Kemudian masuk ke menu template lalu klik "Edit HTML".

3. Setelah itu cari kode menu navigasi di template anda, biasanya kodenya terdapat kode css "menu atau nav". Gunakan (Ctrl+F) untuk mempercepat pencarian, atau jika kesulitan anda bisa tanya ke situs penyedia tempate yang anda gunakan.

4. Selanjutnya ganti tanda "#" dengan URL postingan atau url label blog anda, berikut contohnya.

<ul class='menu' id='menunav'>
<li><a class='home' href='/'>Home</a></li>
<li><a href='#'>Adsense</a></li>
<li><a href='http://blogespada.blogspot.com/2016/12/panduan-tutorial-lengkap-membuat-blog.html'>Tutorial Blog</a></li>
<li><a href='#'>Tutorial Software</a></li>
<li><a href='http://blogespada.blogspot.com/search/label/Template'>Template</a></li>
<li><a href='#'>Game</a>
<ul>

5. Terakhir tinggal simpan template.

Nah sudah pahamkan mengenai cara mengisi menu navigasi dengan url postingan atau label, demikian artikel mengenai tutorial blog yang dapat saya bagikan dan semoga berhasil.

Cara Membuat Popular Post Keren Dengan Nomor

Cara Membuat Popular Post keren dengan nomor,- Dulu di akhir tahun 2015 saya pernah membagikan tutorial membuat popular post cantik warna-warni di blog, nah kali ini saya kembali akan membagikan tutorial membuat popular post keren di blog dengan desain yang saya buat sendiri, untuk demonya bisa langsung lihat di template ini. postingan ini saya bikin karena ada request dari salah satu pengunjung yang menginginkan gaya popular post dari template ini, karena sudah membuat janji makanya saya akan secepatnya membuat tutorialnya dan maaf sekali baru bisa sekarang buatnya.

Sebelumya apa yang dimaksud dengan popular post? popular post sendiri adalah salah satu fitur yang ada pada sebuah blog yang menampilkan semua entri atau postingan yang paling banyak dilihat oleh pengunjung yang dijadikan dalam satu daftar widget. Jika anda pemilik blog berplatform blogger pastinya anda sangat mengetahui salah satu fitur popular post ini, karena saat baru pertama kali membuat blog widget yang pasti ada pertama kali adalah popular post. widget ini cukup bermanfaat karena tidak hanya menambah page view blog juga akan membuat artikel yang unggul tetap bertahan di search google. (ini sih pendapat saya).

Nah buat anda yang tertarik dengan popular post seperti di blog ini silahkan ikuti tutorial yang akan saya berikan, yang dimana popular post ini sudah saya kasih nomor yang akan membuat tampilan populat post semakin keren karena bisa dengan mudah melihat peringkat artikel paling popular tanpa menghitung peringkat. terlebih lagi popular post ini saya jamin responsive dan tanpa memberatkan loading blog. Ok langsung saja berikut tutorialnya.

Cara membuat popular post seperti blog ini

1. Pertama silahkan masuk ke blogger.
2. Semudian masuk ke menu template dan klik Edit HTML.
3. Setelah itu silahkan cari kode popular post, biasanya kode popular post seperti #PopularPosts atau .PopularPosts, jika sudah ketemu silahkan hapus semua kode popular post tersebut dan ganti dengan kode popular post dibawah ini.

/*Popular Post*/
.PopularPosts ul,.PopularPosts li,.PopularPosts li a{margin:0;padding:0;list-style:none;border-radius:10px;background:none;outline:none}
.PopularPosts ul{margin:0;list-style:none;color:black;counter-reset:num}.PopularPosts ul li{border-bottom:1px dashed #ddd;background-color:#eee;margin:0 0 0 0!important;padding:.5em 1.0em .8em .0em!important;counter-increment:num;position:relative;}
.item-thumbnail img{float:left;margin:0 10px 0 0}.PopularPosts a{color:#333!important}
.PopularPosts a:hover{color:#222!important}
.PopularPosts ul li:before,.PopularPosts ul li .item-title a,.PopularPosts ul li a{font-weight:bold;color:inherit;text-decoration:none}.PopularPosts ul li:before{content:counter(num)!important;font-weight:bold !important;
display:block;
position:absolute;
bottom:0px;
right:0px;
border-radius:16px;
background-color:#555;
color:#fff !important;
width:28px;
height:28px;
line-height:28px;
text-align:center;
padding-right:0px !important;
border:2px solid #07ACEC;display:block;position:absolute;background-color:#333;color:#fff!important;width:22px;height:22px;line-height:22px;text-align:center;bottom:0;right:0;padding-right:0!important}
.PopularPosts ul li:nth-child(1){background-color:#fff}
.PopularPosts ul li:nth-child(2){background-color:#fff}
.PopularPosts ul li:nth-child(3){background-color:#fff}
.PopularPosts ul li:nth-child(4){background-color:#fff}
.PopularPosts ul li:nth-child(5){background-color:#fff}
.PopularPosts ul li:nth-child(6){background-color:#fff}
.PopularPosts ul li:nth-child(7){background-color:#fff}
.PopularPosts ul li:nth-child(8){background-color:#fff}
.PopularPosts ul li:nth-child(9){background-color:#fff}
.PopularPosts ul li:nth-child(10){background-color:#fff}

4. Terakhir tinggal simpan template dan lihat hasilnya.

Nah biasanya jika anda menggunakan thumnail atau gambar akan membuat tampilan popular post kurang enak dilihat, oleh karena itu silahkan nonaktifkan tampilan gambar dan deksripsi popular post. untuk caranya bisa dilihat dibawah ini.

Cara membuat popular post responsive

1. Untuk caranya silahkan masuk ke menu tata letak.
2. Kemudian klik "Edit" pada widget popular post.
3. Setelah itu pada bagian tampilan silahkan hilangkan centang pada thumbnail gambar dan cuplikan.

4. Terakhir tinggal simpan.

Dengan begitu tamilan popular post blog anda hanya akan terdapat judul dan nomor saja, silahkan bereksperimen sendiri jika tampilan popular post tersebut kurang memuaskan bagi anda. sekian tutorial blog yang dapat saya share dan terima kasih.

Cara Memasang Komentar Disqus di Blog Responsive

Cara membuat kolom komentar disqus di blog,- Beberapa waktu lalu saya pernah membagikan tutorial mengenai cara memasang komentar disqus di blog (blogger), namun karena tutorial tersebut berdampak besar bagi blog seperti loading lama serta mempunyai masalah terlebih dahulu muncul kotak komentar blog sebelum komentar disqus. nah oleh karena itu saya disini kembali memberikan tutorial memasang komentar disqus diblog namun kali ini dengan cara langsung edit dari template yang akan bermanfaat membuat loading blog tidak terlalu lama.

Mungkin banyak dari anda yang pernah melihat komentar disqus di berbagai blog besar seperti blog berita atau blog yang menyediakan berbagai informasi, jangan heran karena komentar disqus memang pilihan terbaik jika ingin mengganti komentar pada blog. dimana disqus menyediakan layanan yang tidak ada pada jenis komentar lain semacam bisa berkomentar selain dengan akun disqus seperti bisa menggunakan akun facebook, twitter, google+. terlebih lagi disqus bisa menautkan komentar yang ada diblog langsung dengan akun disqus.

Terlebih lagi banyak yang mengatakan jika memasang komentar disqus di blog akan membuat blog semakin SEO yang bisa menaikan visitor blog. plus jika menggunakan komentar disqus pada blog akan menambah backlinks pada blog jika ada yang klik link dari blog kita pada akun disqus.

Dari semua kelebihan yang jarang dimiliki oleh komentar lain menjadikan disqus sebagai pilihan terbaik untuk pengganti komentar di blog, namun seperti yang saya katakan diatas jika memasang komentar disqus diblog melalui pemasangan langsung dari situsnya membuat loading blog akan menjadi lama karena script komentar disqus dipasang melalui widget blog. nah untuk mengatasi komentar tersebut silahkan gunakan cara yang saya bagikan dibawah ini agar komentar disqus diblog semakin fast loading serta responsive.

Cara Memasang Komentar Disqus Fast Loading (Responsive)

1. Pertama terlebih dahulu anda harus mempunyai Akun Disqus serta mempunyai ID disqus tersebut. untuk tutorial membuatnya bisa baca: Cara daftar dan memasang komentar disqus di blog (ID Disqus bisa anda lihat pada nomer 3 pada tutorial tersebut.

2. Kemudian sebelum memasang komentar disqus dengan tutorial ini terlebih dahulu anda harus menyembunyikan komentar bawaan blog, untuk tutorialnya bisa baca: Cara udah menyembunyikan komentar di blog.

3. Jika semua sudah anda lakukan anda lakukan berikut caranya, silahkan cari kode <div class='comments' id='comments'> di blog anda, jika sudah ketemu copy kode CSS dibawah ini dan paste tepat dibawah kode tersebut.

<script type='text/javascript'>
var mql = window.matchMedia(&#39;screen and (min-width: 600px)&#39;);if (mql.matches){
                var disqus_shortname = &quot;ID DISQUS ANDA&quot;;
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
             (function() {
                        var bloggerjs = document.createElement(&quot;script&quot;);
                        bloggerjs.type = &quot;text/javascript&quot;;
                        bloggerjs.async = true;
                        bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_item.js&quot;;
                        (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
                    })();
                (function() {
                    var bloggerjs = document.createElement(&quot;script&quot;);
                    bloggerjs.type = &quot;text/javascript&quot;;
                    bloggerjs.async = true;
                    bloggerjs.src = &quot;//&quot;+disqus_shortname+&quot;.disqus.com/blogger_index.js&quot;;
                    (document.getElementsByTagName(&quot;head&quot;)[0] || document.getElementsByTagName(&quot;body&quot;)[0]).appendChild(bloggerjs);
                })();
    var disqus_shortname = &#39;ID DISQUS ANDA&#39;;
    (function () {
        var s = document.createElement(&#39;script&#39;); s.async = true;
        s.type = &#39;text/javascript&#39;;
        s.src = &#39;//&#39; + disqus_shortname + &#39;.disqus.com/count.js&#39;;
        (document.getElementsByTagName(&#39;HEAD&#39;)[0] || document.getElementsByTagName(&#39;BODY&#39;)[0]).appendChild(s);
    }());
}
                </script>

4. Silahkan ganti kode yang saya beri warna diatas dengan kode Disqus anda. Terakhir tinggal simpan template dan lihat hasilnya.

5. Untuk cara mengimpor komentar yang lama sudah saya jelaskan pada postingan sebelumnya.

Nah itulah cara memasang komentar disqus diblog fast loading (responsive), sekian tips yang dapat saya bagikan dan good luck!

Cara Memasang Tombol Share MedSos Responsive di Blog

Cara Memasang Share Media Sosial Responsive di Blog,- Media sosial adalah sebuah media online yang sangat populer dimana penggunanya dapat berinteraksi dengan pengguna jejaring lain. serta pengguna dengan mudah berpartisipasi, berbagi, dan menciptakan informasu meliputi blog, jejaring sosial, wiki, forum dan dunia virtual lainnya. media sosial sendiri sekarang menjadi kebutuhan khusus yang harus dilakukan bagi sebagian orang, bagaimana tidak hampir semua lapisan masyarakat memiliki media untuk melakukan medsos seperti smartphone dan komputer/laptop.

Baca: Cara Buat Tombol Share di Blog ala EVO Magz

Karena banyaknya orang yang menggunakan media sosial membuat pemilik blog atau web harus pintar-pintar memanfaatkan peluang tersebut dengan cara memasang share media sosial di blog mereka, hal ini tidak lain adalah cara tepat meningkatkan visitor blog. sebagai contoh bila anda pengunjung yang membagikan artikel ke media sosial mereka secara otomatis pengguna akun lain yang tertarik dengan artikel tersebut pastinya akan mengklik tautan tersebut yang sangat bermanfaat mendatangkan tambahan visitor blog.

Nah untuk itu jangan sampai tidak memasang sahre media sosial di blog anda karena tidak cuman akan menambah visitor namun juga akan membuat blog semakin professional dengan share media sosial. namun kebanyakan memasang share media sosial di blog membuat loading blog menjadi lama alias tidak responsive. dan untuk itu saya disini akan membagikan cara memasang media sosial di blog Responsive. untuk tutorial pemasanganya bisa dilihat dibawah ini.

Cara Memasang Share Media Sosial Responsive di Blog

1. Pertama yang pasti anda harus masuk ke Blogger.
2. Kemudian masuk ke menu Template - Edit HTML
3. Selanjutnya silahkan cari kode ]]</b:skin> pada template anda, gunakan (CTRL+F) untuk mempermudah pencarian.
4. Setelah itu copy kode CSS dibawah ini lalu paste tepat diatas kode ]]</b:skin>

/* -- Tombol Share Medsos Responsive -- */
.article-share{
width: 100%;
display: block;
overflow: hidden;
}
.article-share-fb-cont, .article-share-other-cont {
float: left;
width: 114px;
padding: 5px;
height: 41px;
}
.article-share-tw-cont, .article-share-other-cont, .article-share-like-cont {
float: left;
width: 114px;
height: 41px;
padding: 5px;
}
.article-share-fb, .article-share-tw, .article-share-gp, .article-share-li, .article-share-pi {
float: left;
display: block;
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Pn-s6lMrqjS-pK85y9NoxcRmeA5nvuUpdIibperXFXQFl_rNHCQOHsBGuV3S-3yGGUVoUh9zFL9oMS8eLPL7o0r2jL1x-SurBXdpKAPbaMDHk2bga_ZpBzfzSrq3WDnTNv4wf6lNZg0/s1600/share.png') no-repeat;
width: 42px;
height: 41px;
margin-right: 3px;
}
.article-share-fb-label {
color: #2d609b;
}
.article-share-fb-label, .article-share-tw-label, .article-share-gp-label {
float: left;
width: 58px;
height: inherit;
font-size: 12px;
font-family: 'Open Sans Bold', Arial, sans-serif;
line-height: 14px;
margin: 5px 0 0 4px;
}
.article-share-tw {
background-position: 0 -43px;
}
.article-share-tw-label {
color: #00c3f3;
}
.article-share-gp {
background-position: 0 -86px;
}
.article-share-gp-label {
color: #f00;
}

5. Langkah selanjutnya adalah memunculkan tombol share media sosial tersebut di blog dengan cara cari kode berikut <data:post.body/>, biasanya kode tersebut terdapat lebih dari satu silahkan pilih kode yang terakhir lalu copy kode CSS dibawah ini dan paste dibawah kode tersebut.

<div class='article-share'>
<div class='article-share-fb-cont'>
 <a class='article-share-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'/>
   <a class='article-share-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a>
</div>
<div class='article-share-tw-cont'>
 <a class='article-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'/>
 <a class='article-share-tw-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Twitter</a>
</div>
<div class='article-share-other-cont'>
 <a class='article-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'/>
          <a class='article-share-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a>
</div>
<div class='article-share-like-cont'>
 <iframe class='article-share-like' expr:src='&quot;//www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&quot;' frameborder='0' scrolling='no' style='padding-top:12px;'/>
</div>
</div>

6. Terakhir tinggal simpan template dan lihat hasilnya.

Bila tombol share tidak muncul silahkan paste kode yang ada pada langkah no 5 dibawah kode "<data:post.body/>" yang lain. Sekain yang dapat saya bagikan dan Good luck!

Cara Membuat Subscribe Box Keren di Blog

Cara Membuat Subscibe Box atau Kotak Berlangganan Keren di Blog,- Sebelumnya saya pernah membagikan cara membuat Kotak Subscribe Box di Blog Seperti EVO Magz dan kali ini saya masih akan memberikan mengenai cara membuat subscribe box di blog seperti template arlina design. dimana subscribe box tersebut sangat bagus dan keren menurut saya makanya disini saya akan membagikanya.

Subscribe BOX atau Kotak berlangganan adalah sebuah kotak digunakan untuk memasukan email yang biasanya terdapat pada sebuah web atau blog yang bertujuan agar pengunjung dapat mengetahui update artikel melalui email mereka. seperti halnya tombol Subscribe pada situs youtube subscribe box juga memiliki cara yang sama namun disini kita perlu memasukan email lalu submit untuk berlanggan artikel dari sebuah web/blog.

Pastinya anda pernah melihat Subscribe Box/kotak berlanggganan ini pada sebuah blog, karena sudah banyak blog yangmemasang kotak berlangganan ini baik blog besar atau blog kecil. walaupun banyak yang memasangnya namun setiap kotak tampilanya berbeda-beda. yah itu juga tergantung modifikasi ang dilakukan oleh pemilik blog.

Memasang Subscribe Box ini sangatlah bermanfaat bagi pemilik situs, karena jika pengunjung sudah berlangganan artikel blog anda pengunjung tersebut akan tahu jika ada artikel baru dari blog anda dan otomatis juga akan menambah visitor blog. Namun sebelum memasang subscribe box ini terlebih dahulu blog harus didaftarkan ke Feedburner, Jika sudah punya ID feedburner baru bisa memasang ID tersebut ke Subscribe Box.

Nah buat tampilan Subscribe Box pada tutorial kali ini seperti gambar diatas, dan kotak berlangganan tersebut saya pasang pada footer. jika anda tertarik dengan Subscribe BOX seperti gambar diatas bisa langsung ikuti cara dibawah ini.

Cara Memasang Subscribe Box keren di Blog

1. Pertama silahkan masuk ke Blogger - Template dan Edit HTML

2. Kemudian Cari kode ]]></b:skin> gunakan (Ctrl+F) untuk mempermudah pencarian, jika sudah ketemu silahkan copy kode dibawah ini dan paste di atas kode tersebut.

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#444;overflow:hidden;border-top:4px solid #eee:none}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#555;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#E73037;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#E73037;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

3. Selanjutnya silahkan copy kode CSS dibawah ini lalu paste ditempat yang anda inginkan semisal jika ingin memasang diatas footer paste diatas kode <footer>

<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=EspadaBlog' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=EspadaBlog&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='EspadaBlog'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>

Note: Silahkan ganti EspadaBlog dengan ID feedburner blog anda.

4. Dan terakhir supaya subscribe box lebih responsive pada tampilan mobile silahkan tambahkan kode CSS media screen dibawah ini tepat diatas kode </style>

@media screen and (max-width:768px){
#subscribe-css p.subscribe-note{margin:0 0 20px 0;width:100%;}
.subscribe-wrapper {width:100%;}
}
@media screen and (max-width:640px){
#subscribe-css p.subscribe-note{font-size:140%}
form.subscribe-form{padding:0 10px}
.subscribe-css-email-field,.subscribe-css-email-button{padding:15px 0;text-align:center;margin:10px 0;width:100%}
}

5. Terakhir tinggal simpan template dan lihat hasilnya.

Dan itulah cara membuat Subscribe Box di blog keren seperti blog arline design, untuk warna sekaligus tampilanya bisa anda sesuaikan sendiri. sekian tips blogging yang dapat saya bagikan dan selamat mencoba.

Cara Mudah Memasang Kode Histats di Footer Blog

Cara memasang Histats di Footer Blog,- Bagi anda selaku pemilik blog tentunya anda ingin meningkatkan pengunjung/visitor blog anda, karena suksesnya sebuah blog tergantung dari berapa banyak visitor blog tersebut. untuk mengetahui pengunjung blog biasanya kita akan melihat pada statistik pada menu blogger, namun itu hanya total page today saja melainkan buka visitor. untuk mengetahui jumlah visitor blog secara detail kita bisa menggunakan fitur dari Histats.

Yang belum tahu mengenai situs Histats akan saya coba jelaskan, Histats sendiri adalah sebuah situs yang bisa kita gunakan untuk memantau jumlah visitor, jumlah page, user online. namun syaratnya kita harus membuat akun di histats lalu mendaftarkan blog ke histats dan terakhir kita diharuskan menempelkan pluigin/kode histats di blog. dengan begitu kita akan dapat mengetahui segala sesuatu yang berhubungan dengan pengunjung yang mengunjungi blog kita.

Untuk memasang kode histats ke blog terdapat dua cara yaitu kita bisa menggunakan widget tata letak dan langsung memasangnya di template. jika anda memasangnya di widget tata letak maka letak histats tersebut akan menyesuaikan struktur widget tata letak blog anda, namun bila memasangnya langsung di template kita bisa memasangnya ditempat yang kita inginkan.

Salah satu yang mungkin banyak dilakukan oleh blog lain adalah memasang histats di bagian footer, menurut saya dengan memasang pada footer blog akan membuat tampilan blog lebih professional dengan histats di footer. nah bila anda memasang kode histats di footer diharuskan memparse dulu kode tersebut, karena jika tidak kita tidak akan bisa menyimpan tempate. ok langsung saja berikut tutorialnya.

Cara Memasang Kode Histats di Footer Blog

1. Pertama silahkan daftar dan membuat kode histats, untuk tutorialnya bisa baca: Cara daftar dan memasang kode Histats di blog.

2. Kemudian saat memilih kode silahkan pilih yang standart, silahkan copy kode tersebut.

3. Selanjutnya kita akan memparse kode histats tersebut agar bisa disimpan pada template, caranya silahkan masuk ke situs www.freeformatter.com/html-escape.html

4. Setelah itu masukkan kode yang sudah dicopy sebemunya ke kotak yang sudah disediakan lalu klik Escape

5. Kemudian copy lagi kode yang sudah di parse tadi, lalu masuk ke akun blogger - template dan edit html.

6. lalu cari kode </footer> gunakan (Ctrl+F) untuk mempermudah, jika sudah ketemu paste kode yang sudah di parse tadi tepat diatas kode </footer> dengan menambahkan kode dibawah ini.

<div>
Kode Histats yang sudah diparse   </div>

7. Terakhir tinggal simpan template dan lihat hasilnya.

Untuk demonya bisa dilihat langsung di blog ini, Sekian tips mengenai cara memasang kode histats footer di blog, semoga berhasil.

Cara Membuat Widget Footer 3 Kolom di Blog

Cara memasang menu widget footer 3 kolom di blog,-  Bagi anda sebagai pemilik sebuah blog pasti tahu apa yang dimaksud dengan widget, widget sendiri istilah pada struktur tata letak pada blog yang berplatform blogger. dengan widget ini kita dengan mudah menambah berbagai macam fitur template serta menambah kode HTML/Java Script pihak ketiga. letak penambahan widget pada suatu blog tergantung dari letak widget yang berada pada tata letak template yang digunakan.

Tak jarang pemilik blog yang ingin menambah widget pada bagian tertentu pada blognya mencari cara agar bisa membuat sebuah tempat widget seperti yang di inginkan. mungkin yang banyak dicari adalah memasang sebuah menu widget pada bagian footer. kebanyakan widget di bagian footer ini banyak dipakai oleh situs/blog bergaya magazine atau berita. nah oleh karena itu banyak blogger lain yang ingin sekali memasang widget di bagian footer blog mereka.

Widget dibagian footer sendiri yang pasti tidak cuman satu melainkan ada beberapa sekaligus, seperti yang paling banyak 3 kolom hingga 4 kolom. Nah buat anda yang ingin sekali membuat widget di bagian footer dengan menu widget 3 kolom bisa mengikuti cara yang saya berikan dibawah ini, Berikut tutorialnya.

Cara Memasang Widget Footer 3 Kolom di Blog

1. Pertama silahkan masuk ke Blogger.

2. Kemudian masuk ke menu Template - Edit HTML

3. Setelah itu cari kode ]]></b:skin> untuk mempermudah gunakan (Ctrl+F), Jika sudah ketemu copy kode CSS dibawah ini lalu paste tepat diatas kode tersebut.

/* Footer 3 Coloum by Espada Blog
----------------------------------- */
#footer-wrapper{width:100%}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper{background:#242424;;background-repeat:repeat-x;background-position:top center;overflow:hidden;margin:0 auto;
padding:20px 15px 0;color:#dddddd;border-top:5px solid #07ACEC}
#footer-wrapper .left{float:left;width:34%}
#footer-wrapper .center{float:left;width:34%}
#footer-wrapper .right{float:right;width:32%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 15px 15px 0;clear:both}
#footer-wrapper .right .widget{margin:0 0 15px 0;clear:both}
#footer-wrapper h2{margin:0 0 10px 0;padding:0 0 5px;border-bottom:3px solid #555;text-transform:uppercase:none;position:relative;color:#eeeeee}
#footer-wrapper ul,#footer-wrapper ol{list-style:none;margin:0 0 0 0;padding:0 0 0 0}
#footer-wrapper li{margin:5px 0;padding:0 0 0 0}
#footer-wrapper a{color:#dddddd}
#footer-wrapper a:hover{color:#ffffff}
#footer-wrapper h2:before {content:"";position:absolute;left:0;width:180px;height:2px;
background:#07ACEC;bottom:-2px}

4. Langkah selanjutnya adalah memunculkan widget pada footer caranya silahkan copy kode dibawah ini dan paste tepat diatas kode <footer>

<!-- Footer Widget 3 Coloum Start-->
<footer id="footer-wrapper">
  <b:section class='left section' id='left' preferred='yes'>
    </b:section>
  <b:section class='center section' id='center' preferred='yes'>
    </b:section>
  <b:section class='right section' id='right' preferred='yes'>
    </b:section>
</footer>
<!-- Footer Widget 3 Coloum End -->

5. Sebenarnya pada proses ini footer 3 kolom sudah muncul dan siap digunakan, namun untuk lebih responsive serta pada tambilam mobile tidak berantakan silahkan tambahkan kode CSS Media Screen dibawah ini tepat diatas </style>.

@media screen and (max-width:768px){
#footer-wrapper .left{float:none;width:100%}
#footer-wrapper .center{float:none;width:100%}
#footer-wrapper .right{float:none;width:100%}
#footer-wrapper .left .widget,#footer-wrapper .center .widget{margin:0 0 15px;clear:both}
}

6. Terakhir simpan template dan lihat hasilnya.

Dengan begitu anda sudah bisa memasang widget pada footer di tata letak dan lihat hasilnya, sekian tips blog yang dapat saya bagikan dan selamat mencoba.

Cara Memasang Kotak Pencarian (Search Box) di Blog

Cara Memasang Search Box atau Kotak Pencarian di Blog,- Kotak Pecarian atau Search Box adalah sebuah kotak yang digunakan untuk mencari informasi atau artikel lain pada sebuah Wesite atau Blog. Kotak ini sangat bermanfaat pada blog atau Website yang memiliki banyak artikel karena mungkin informasi yang dibutuhkan pengunjung terdapat di blog tersebut. oleh karena itu Search Box sangat berguna di sebuah Blog/Website.

Search Box Sendiri tidak semua template mempunyainya, karena biasanya banyak template yang kita download dari internet atau dari bawaan blogger tidak langsung ada. namun sebenarnya blog berplatform blogger sudah menyediakanya tinggal kita cari dan pasang pada menu Tata letak. walaupun sudah disediakan, banyak blogger yang kurang menyukainya karena tampilanya yang kurang bagus. oleh karena itu banyak yang mencari kode pemasangan dari internet.

Nah berhubungan dengan Search Box atau Kotak Pencarian, disini saya juga akan membagikan tutorial mengenai memasang Search Box di blog. yang saya khususkan bagi anda-anda semua yang ingin memasang kotak pencarian di blog anda yang masih belum ada Search Box. Ok langsung saja berikut Tutorialnya,

Cara Memasang Kotak Pencarian (Search Box) di Blog

1. Pertama silahkan Masuk ke Akun Blogger - Template dan Edit HTML

2. Kemudian Silahkan cari kode ]]</b:skin>, Gunakan CTRL+F untuk mempermudah pencarian.

3. JJika sudah ketemu selanjutnya silahkan Copy kode CSS dibawah ini dan Paste tepat diatas kode ]]</b:skin>.

/* Search Box by Espada Blog
----------------------------------------------- */
#search-box{
position: relative;
border: 1px solid #ddd;
margin: 5px auto;
}
#search-form{
height: 30px;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background: #fff;
overflow: hidden;
}
#search-text{
color: #ccc;
border-width: 0;
}
#search-box input[type="text"]{
width: 100%;
padding: 7px 0 7px 7px;
outline: none;
}
#search-button{
position: absolute;
top: 0;
right: 0;
height: 30px;
margin: 0;
text-align: center;
line-height: 0;
border-width: 0;
background: whitesmoke;
cursor: pointer;
font-size: 12px;
font-weight: bold
}

4. Terakhir Simpan Template.

Langkah selanjutnya adalah memunculkan Kotak Pencarian (Search Box) di Widget Blog, untuk caranya bisa dilihat dibawah ini.

5. Selanjutnya Masuk ke Tata Letak - Tambahkan Gadget lalu Pilih HTML/Java Script.

6. Selanjutnya silahkan kasih judul atau tidak dikasih juga tidak apa-apa lalu masukkan kode CSS dibawah ini pada bagian kolom HTML.

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
  <input id='search-text' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search..&quot;;}' onfocus='if (this.value == &quot;Search..&quot;) {this.value = &quot;&quot;}' type='text' value='Search..'/>
  <button id='search-button' type='submit'>GO</button>
</form>
</div>

7. Terakhir Tinggal Simpan.

Panjang Search Box di atas akan menyesuaikan ukuran widget pada blog anda, oh ya hampir lupa search box diatas kodenya saya ambil dari Template Premium Speed up. sekian tutorial blog yang dapat saya bagikan dan Terima kasih.

Cara Menyembunyikan Judul dan Deskripsi di Header Blog

Cara Menghilangkan dan menyembunyikan header blog,- Sebuah judul dalam sebuah blog bisa dikatakan sangat penting, karena dengan membuat judul blog yang baik menjadikan blog tersebut mudah untuk dikenali, semisal bila seorang pengunjung mengunjungi blog anda dan kemudian pengunjung tersebut kembali lagi ke blog anda namun beda yang dicari, maka dengan melihat judul saja pengunjung akan dengan mdah mengetahui bahwa sebelumny pernah mengunjungi blog anda.

Namun tidak semua pemilik blog menyukai adanya judul di blog mereka, yang mungkin saja disebabkan oleh judul default tidak bagus atau tidak bisa membuat logo sama sekali. oleh karena itu banyak yang menghilangkan judul blog mereka. menghilangkan judul blog juga sudah banyak dilakukan oleh blogger lain serta dengan menghilangkan judul blog juga bisa membuat blog terlihat lebih professional karena dibagian atas hanya ada menu navigasi tanpa adanya judul.

Nah buat anda-anda semua yang ingin sekali menghilangkan judul dan deskripsi di blog, disini saya akan membagikan tutorialnya dan tutorial ini saya khususkan buat yang masih pemula/newbie, karena yang pro pasti sudah bisa mengotak-atik template. ok langsung saha berikut tutorialnya:

Cara Meyembunyikan Judul di Header Blog

1. Pertama silahkan masuk ke akun Blogger - Template dan Edit HTML.

2. Kemudian silahkan cari kode bagikan "header", setiap template mungkin berbeda-beda namun kebanyakan bertuliskan #header atau #header-Wrapper.

3. Selanjutnya Tambahkan Kode display:none; pada kode header tersebut, Contohnya:

/* -- HEADER -- */
#header {
padding: 5px;
text-align: left;
}

Kemudian tambahkan kode display:none; maka kodenya menjadi seperti berikut:

/* -- HEADER -- */
#header {
padding: 5px;
text-align: left;display:none;}

4. Terakhir tinggal Simpan template dan lihat hasilnya.

Dengan menambahkan kode display:none membuat header beserta judul akan tersembunyi dan tidak hilang, untuk memunculkanya kembali tinggal hapus kode display:none tersebut. Sekian tips blog yang dapat saya bagikan dan Semoga bermanfaat.

Cara Membuat Menu Navigasi Tetap Walaupun di Scroll

Cara Membuat Menu Navigasi Statis atau Sticky di Blog,- Template adalah sebuah elemen dasar yang membangun sebuah blog atau web yang berisi dari semua fitur seperti Sidebar, Header, Post, footer dan lain-lain. atau bisa dikatekan bahwa template adalah sebuah wadah untuk eleman lain dari blog serta sebagai tampilan sebuah website.atau blog.

Template blog juga sangat mempengaruhi kesuksesan sebuah blog, karenanya silahkan pilih template yang sudah terbukti Seo friendly atau disukai mesin penelusuran google. namun dari semua elemen yang membangun template seperti sidebar, Header, Footer dan lain-lain. disini saya akan membagikan sedikit tutorial yang mungkin bermanfaat untuk anda yaitu Cara membuat menu navigasi tetap walaupun di scroll kebawah.

Sebenarnya tutorial ini saya peruntukan bagi yang ingin sekali membuat menu navigasi sticky seperti blog lain yang menggunakan, dan cara ini bisa dibilang sedikit rumit, oleh karena itu silahkan di simak baik-baik. berikut tutrialnya:

Cara Membuat Menu Navigasi Tetap walaupun di Scroll

1. Pertama silahkan masuk ke Blogger - Template - Edit Html.

2. Kemudian Silahkan cari kode Menu navigasi, pada setiap blog kodenya berbeda-beda namun yang pasti terdapat kode (nav), sebagai contoh kode blog saya adalah #navitions.

3. Silahkan catat atau hafalkan kode tersebut, kemudian silahkan cari kode </body>, jika sudah ketemu copy kode dibawah ini dan paste diatas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

4. Selanjutnya ganti kode #nav diatas dengan kode menu navigasi yang sebelumnya ada hafalkan atau catat.

5. Biasanya menu tersebut akan berantakan, untuk mengatasinya silahkan ganti width:100%; yang ada pada kode menu seperti langkah no 2, dengan width:950px; atau jika tidak ada silahkan tambahkan sendiri. dan untuk menyesuaikanya dengan template anda bisa diganti 950px dengan ukuran lain.

Itulah cara membuat menu navigasi tetap walaupun di scroll kebawah, sekian tips blog yang dapat saya bagikan dan Semoga berhasil.