Coretanzone: Widget

    Social Items

Cara Memasang Kotak Subscribe Keren dan Responsive di Atas Footer Blog - Seperti Template Viral Go
Kotak subscribe merupakan salah satu widget berlangganan yang sangat baik untuk dipasang di blog. Widget ini memiliki fungsi untuk mendatangkan visitor melalui semua artikel terbaru yang dikirim ke setiap email subscribe secara otomatis dan gratis tanpa ada biaya dari kedua belah pihak. Keuntungannya adalah subscribe tidak perlu lagi mengecek setiap artikel baru laman website atau blog yang diikutinya lagi, tetapi langsung masuk ke email. Sedang pemilik blog akan mendapatkan viewer yang banyak dan baik untuk seo blog.

Untuk pengguna template viral go premium, sebenarnya tidak perlu repot-repot memasangnya lagi, karena pada template viral go plus sudah terpasang kotak subscribe keren dan responsive ini. Namun pada template viral go lainnya belum terpasang. Sehingga bagi pengguna template viral go bisa mencobanya. Bagi blog yang menggunakan template lain boleh juga memasangnya, namun jika tampilannya kurang pasa maka, mungkin tidak cocok - silahkan dicoba saja dulu.

Sebelum memasang kode widget kotak subscribe keren dan responsive ini di blog, terlebih dahulu sahabat mengetahui ID FeedBurner Google sahabat yang berada di situs feedburner.google yang berada di bagian feed addres. Setelah mengetahuinya maka, silahkan ikut langkah-langkah di bawah ini untuk memasang kotak subscribe keren dan responsive di atas footer blog.

Cara Memasang Kotak Subscribe Keren dan Responsive di Atas Footer Blog - Seperti Template Viral Go

Cara Memasang Kotak Subscribe Keren dan Responsive di Atas Footer Blog


Langkah langkah dalam memasang kotak subscribe seperti yang ada pada template viral go plus adalah sebagai berikut:

1. Log in ke blog anda, kemudian pilih (klik) Tema > selanjutnya pilih (klik) Edit HTML

2. Cari kode </style> yang pertama (gunakan Ctrl+F untuk mempercepat), kemudian letakkan kode di bawah ini tepat di atasnya.

/* Footer Subscription */
#na-wrapper{background:#fff;width:100%;border-top:1px solid rgba(0,0,0,0.08)}
.invertsubs-content{max-width:970px;margin:0 auto;overflow:hidden;padding:0;position:relative}
#invertsubs-subs{text-align:center;text-transform:uppercase;width:100%;height:auto;border-radius:2px;padding:0}
#invertsubs-subs .emailfield form.invertsubs-form{position:relative;margin:0 auto 40px auto;overflow:hidden;width:65%}
#invertsubs-subs p{color:#888;padding:40px 20px 20px 20px;margin:0;overflow:hidden}
#invertsubs-subs .emailfield{padding:0 20px 10px}
#invertsubs-subs .emailfield input{width:100%;color:#888;padding:15px;font-size:13px;border:1px solid rgba(0,0,0,0.1);background:rgba(255,255,255,1)}
#invertsubs-subs .emailfield input:focus{color:#000;outline:0}
#invertsubs-subs .emailfield input::-webkit-input-placeholder{color:#888}
#invertsubs-subs .emailfield input::-moz-placeholder{color:#888}
#invertsubs-subs .emailfield input:-ms-input-placeholder{color:#888}
#invertsubs-subs .emailfield input:-moz-placeholder{color:#888}
#invertsubs-subs .emailfield .submitbutton{display:inline-block;position:absolute;right:0;top:0;background:#222;color:rgba(255,255,255,1);text-transform:uppercase;border:0;outline:0;cursor:pointer;width:20%;border-radius:0;transition:all .1s}
#invertsubs-subs .emailfield .submitbutton:active{border:0;outline:0}
#invertsubs-subs .emailfield .submitbutton:hover{background:#000;color:rgba(255,255,255,1);box-shadow:0 10px 20px -10px rgba(0,0,0,0.1)}
@media screen and (max-width:768px){
#invertsubs-subs .emailfield form.invertsubs-form{width:95%}#invertsubs-subs .emailfield .submitbutton{width:auto}}

3. Selanjutnya cari kode <footer class='footer' id='footer, kemudian letakkan kode di bawah ini tepat di atasnya.

<div id='na-wrapper'>
<div class='invertsubs-content'>
<div id='invertsubs-subs'>
<p>Subscribe Our Newsletter</p>
<div class='emailfield'>
<form action='https://feedburner.google.com/fb/a/mailverify' class='invertsubs-form' method='post' novalidate='' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=coretanzoneid&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
  <input name='email' placeholder='Your email address' title='Email' type='text'/>
  <input name='uri' type='hidden' value='coretanzoneid'/>
  <input name='loc' type='hidden' value='en_US'/>
  <input class='submitbutton' type='submit' value='Subscribe'/>
</form>
</div></div></div></div>

4. Ganti dua kode coretanzoneid dengan ID FeedBurner anda, kemudian klik simpan dan lihat blog anda.

Jika kotak subscribe-nya belum sesuai dengan template anda, silahkan letakkan kode kedua sesuai dengan kode template yang anda miliki

Sekian dulu postingan kali ini tentang cara memasang kotak subscribe keren dan responsive di atas footer Blog - seperti template Viral Go, semoga dapat bermanfaat bagi pengembangan blog anda.

Cara Memasang Kotak Subscribe Keren dan Responsive di Atas Footer Blog - Seperti Template Viral Go

Cara Membuat Kotak Subscribe Keren dan Responsive di Bawah Footer Blog
Sahabat pembaca yang berbahagi, ketemu lagi dengan saya di postingan kali ini tentang cara membuat kotak subscribe keren dan responsive di bawah foofter blog. Sahabat pembaca pasti semua sudah tau fungsi dari widget ini kan. Selain mendatangkan visitor atau pembaca blog yang banyak, juga memperindah blog.

Postingan yang saya bagikan kali ini terinspirasi dari postingan blog Arlina Design tentang subscription box yang sudah banyak digunakan oleh para blogger.

Box subscribe ala Arlina Design ini dapat anda gunakan dengan bebas untuk memperindah blog dan mendatangkan pembaca melalui feedburner google. Untuk demo tentang postingan ini, silahkan sahabat pembaca lihat langsung pada bagian bawah blog ini. (Update: saat ini saya sudah tidak menggunakannya lagi).

Sebelum sahabat pembaca sekalian menginstal widget ini diblog sahabat, terlebih dahulu sahabat membuat feeds blog terlebih dahulu. Caranya adalah silahkan masuk di feedburner.google.com, kemudian copy dan paste atau letakkan url blog sahabat di kolom Burn a feed right this instant. Setelah itu klik Next lalu klik Next lagi, kemudian sahabat membuat alamat feed (Feed Address) sesuai dengan yang diinginkan. Setelah mendapatkan alamat feed sahabat bisa langsung klik Next sampai selesai.

Cara Membuat Kotak Subscribe di Blog


Untuk sahabat pembaca yang tertarik membuat kotak subcribe ini silahkan ikuti langkah-langkahnya di bawah ini.

1. Masuk ke blogger kemudian klik Template > Edit HTML

2. Tempatkan kode CSS di bawah ini tepat di atas kode ]]></b:skin> atau </style> (untuk mempermudah gunakan Ctrl+F untuk menemukan salah satu kode tersebut)

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.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:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;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:#37b185;}
#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 tempatkan kode di bawah ini tepat di bagian atas kode footer-wrapper atau sesuaikan dengan kode blog anda.

<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=coretanzone' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=coretanzone&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='coretanzone'/><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>
</div>

4. Anda dapat mengubah warna dan lain-lain sesuai dengan yang anda inginkan dan ganti semua kode coretanzone dengan alamatalamat feed (Feed Address) milik anda.

5. Simpan template dan lihat hasilnya di blog anda.

Demikianlah postingan kali ini tentang cara membuat kotak subscribe keren dan responsive di bawah footer blog semoga bermanfaat.

Cara Membuat Kotak Subscribe Keren dan Responsive di Bawah Footer Blog

Cara Membuat Iklan Melayang Responsive dengan Tombol Close di Blog
Ketika seseorang mempunya keinginan untuk membangun sebuah blog, maka sudah pasti orang itu mempunyai tujuan. Ketika berbicara tentang tujuan membuat suatu blog maka tidak semua orang sama tujuannya. Ada orang yang membuat blog hanya untuk menghabiskan waktu senggang, ada juga yang membuat blog hanya untuk mencurahkan isi hatinya, ada juga yang membuat blog hanya sebagai hobinya saja, sedangkan ada sebagian yang membuat blog untuk kepentingan komsersial atau kepentingan bisnis.

Orang yang membuat blog dengan tujuan bisnis, sudah pasti mempercantik blognya dengan beragam postingan yang menarik, dan membuat template blognya agar menjadi responsive dan SEO agar mudah berada di rank atas pencarian google.

Salah satu hal pendukung dalam blog bisnis adalah iklan banner yang ada di blognya. Di beberapa blog atau website pasti anda sudah menemukan iklan banner melayang dengan tombol closenya. Tombol close sendiri berfungsi agar jika pengunjung blog tidak tertarik dengan iklan yang ditayangkan maka dia dapat mengclosenya tanpa harus keluar dari blog itu. Nah sekarang untuk sahabat saya akan bagikan cara memasang iklan melayang responsive dengan tombol close di blog dengan memanfaatkan kode script di bawah ini.

Cara Memasang Iklan Melayang Responsive dengan Tombol Close


1. Login ke blogger

2. Masuk ke Editor template lalu cari kode </body> (gunakan ctrl+f untuk mempermudah pencarian)

3. Setelah ditemukan Letakkan kode di bawah ini tepat di atas kode </body>

<script type="text/javascript">
$(document).ready(function() {$(&#39;img#closed&#39;).click(function(){$(&#39;#bl_banner&#39;).hide(90);});});
</script>
<div id="fixedban" style="-webkit-transform: translatez(0); bottom: 0; float: none; margin: auto; overflow: hidden; text-align: center; width: 100%; z-index: 999;">
<div>
<a href="https://www.blogger.com/null" id="close-fixedban" onclick="document.getElementById('fixedban').style.display = 'none';" style="cursor: pointer;"><img alt="close" src="https://1.bp.blogspot.com/-_A83iDM6JYc/VhtxROLILrI/AAAAAAAADK4/aM4ikIA6aqI/s1600/btn_close.gif" style="vertical-align: middle;" title="close button" /></a></div>
<div style="display: block; height: auto; margin: auto; max-width: 728px; overflow: hidden; text-align: center;">
<a href="#" title="Banner iklan disini"><img alt="Banner iklan disini" src="#" style="height: auto; max-width: 100%; vertical-align: middle;" /></a>
</div>
</div>

4. Ganti kode yang width:720 sesuai dengan ukuran iklan dan kode iklan yang anda miliki.

5. Setelah selesai simpan template blog, lalu lihat hasilnya.

Demikian tutorial singkat tentang cara memasang iklan melayang responsive dengan tombol close di blog semoga membawa manfaat bagi pembaca sekalian.

Cara Memasang Iklan Melayang Responsive dengan Tombol Close di Blog dengan Mudah

Cara Membuat Komentar Google+ (Plus) di Postingan Blog

Komentar di dalam postingan blog sangat penting untuk membangun komunikasi antara pemilik blog dengan pengunjung blog. Komentar blog juga mempunyai fungsi untuk memberikan ruang kepada pengunjung dalam bertanya tentang hal-hal yang belum dimengerti dari sebuah artikel.

Berkomentar di blog haruslah dengan kata-kata yang baik, kalimatnya sesuai dengan isi artikel, jangan sampai komentar anda hanya untuk menitipkan link saja. Komentar semacam ini menurut saya sangat jelek, lebih baik jangan berkomentar.

Komentar yang paling jelek salah satunya yang saya temui adalah mempromosikan produk tertentu yang tidak ada kaitannya dengan artikel yang dibahas. Bahkan dalam beberapa blog terdapat komentar spam yang dapat memperburuk seo. Komentar seperti ini lebih baik dihapus saja agar tidak menggaggu pengunjung lain dan mengganggu seo blog.

Di beberapa blog, saya melihat kolom komentarnya sengaja disembunyikan. Entah alasan menyembunyikan komentar itu untuk apa, tetapi bagi saya komentar yang disembunyikan akan membangun ruang yang buruk antara pengunjung dan pemilik blog. Pengunjung tidak dapat memberikan respon dan berdisukusi terkait dengan topik yang dibahas. Selain itu, komentar blog juga dibaca oleh mesin pencarian.

Memiliki komentar google plus di blog sangat membawa keuntungan bagi blog anda. Setiap orang yang berkomentar di halaman artikel blog yang dia baca akan terpublikasi secara otomatis di dalam akun google plus milik orang tersebut. Dengan demikian maka, blog anda sudah dipromosikan secara gratis tanpa harus mengeluarkan tenaga dan biaya.

Bentuk Kolom Komentar di Blogger


Bawaan Blogger

Sebagaimana sudah kita ketahui bahwa blogger mempunyai kolom komentar bawaan yang berada di paling bawah postingan. Komentar bawaan ini yang paling banyak digunakan, karena sudah tersedia dan tidak perlu lagi untuk membuatnya.

Google Plus

Google Plus merupakan salah satu jejaring sosial yang dimiliki google. Sebagaimana jejaring sosial lainnya google+ memiliki fitur komentar yang dapat dipasang di blog. Pemasangan komentar google plus ini sangatlah mudah, karena merupakan salah satu produk google yang sudah dikaitkan dengan blogger.

Disqus

Salah satu komentar yang banyak digunakan oleh blog adalah Disqus, karena tampilannya yang menarik dan pemasangannya yang mudah di blog. Kotak komentar Disqus milik pihak ketiga yang dapat dipasang di semua situs atau blog.

Memang agak ribet menggunakannya, apalagi bagi pengunjung yang bukan merupakan pengelola blog atau website. Sehingga kebanyak kolom komentar disqus berada blog yang membahas seputaran blogging atau website.

Media Sosial Lainnya

Media sosial lain yang paling banyak digunakan dalam komentar blog adalah facebook. Facebook memang sudah menjadi media sosial nomor satu untuk saat ini, banyak penggunanya, sehingga ketika dipasang di blog akan mempermudah pengunjung blog untuk berkomentar dengan menggunakan akun facebook mereka.

Cara Mengganti Komentar Blog



Cara Membuat Komentar Google+ (Plus) di Postingan Blog

Cara mengganti komentar blog dengan komentar google plus sangatlah mudah hanya dengan beberapa klik saja, yaitu sebagai berikut:

1. Pada dasbord blogger, klik Tab Setelan > Pos, komentar dan berbagi

2. Pada bagian Komentar Google+ klik/ganti "Tidak" dengan "Ya".
3. Lihat salah satu postingan blog, jika belum muncul maka pada bagian Komentar klik/ganti dengan "Tersematkan".
4. Jika belum juga muncul komentarnya, maka masuk ke halaman postingan blog, kemudian buka postingan dengan cara: Edit > Pilihan > Komentar Pembaca > Izinkan.

Penggantian url blog dapat berakibat negatif pada komentar yang ada (komentar yang sudah terpublikasi secara otomatis ke halaman google plus).

Update: saat ini google plus sudah tidak dapat digunakan lagi/sudah dihentikan oleh pihak google.

Demikianlah postingan kali ini tentang Cara Mengganti Komentar Google+ (Plus) di Postingan Blog, semoga bermanfaat.

Cara Mengganti Komentar Google+ (Plus) di Postingan Blog

Cara Membuat Tabel Keterangan Responsive di Blog
Tabel keterangan responsive - untuk apa itu? Nah sahabat pembaca sekalian pasti sudah terbiasa dengan Microsoft Office kan. Aplikasi satu ini sangat banyak manfaatnya dalam dunia kerja, terlebih office word, excel dan powerpoint. Ketiganya sangat dibutuhkan oleh setiap orang yang bekerja dengan komputer.

Di dalam ketiga aplikasi ini, sahabat pembaca pasti sudah tau bahwa bisa juga untuk membuat tabel untuk keperluan tertentu. Sahabat pembaca semua sudah pasti menggunakan ketiga aplikasi tersebut dan sudah membuat tabel di dalamnya. Hal ini juga bisa diaplikasikan di artikel blog.

Bagi anda pengguna template hasil desain Arlina Fitriani tabel seperti ini tidak perlu lagi dibuat, karena rata-rata semua templatenya sudah memiliki tabel seperti ini. Nah kali ini saya akan membagikan tutorial cara membuat tabel seperti yang ada di blog Arlina Design.

Membuat tabel di blog mempunyai beragam fungsi, bagi anda yang mempunyai blog khusus untuk membuat keterangan tentang suatu produk bisa memanfaatkan tabel ini untuk keperluan bisnis online, atau bisa juga buat yang mempunyai blog tempelate bisa memanfaatkan tabel ini untuk membuat features blog. Banyak deh kegunaannya tergantung kebutuhan anda saja.

Langkah-langkah Membuat Tabel Keterangan


Berikut ini langkah-langkah membuat tabel keterangan di dalam postingan blog.

# Langkah pertama adalah masuk di dasbord blogger kemudian pilih Tab Template lalu klik Edit HTML.

# Cari kode </style> atau </b:skin> lalu copy dan pastekan kode di bawah ini tepat di atas salah satu kode tersebut, kemudian simpan template.

/* Table Post */
table,caption,tbody{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
table{border-collapse:collapse;border-spacing:0;}
.post-body table td,.post-body table caption{border:1px solid #e9e9e9;padding:10px;text-align:left;vertical-align:top;}
.post-body table tr th {border:1px solid #457fdf;font-weight:bold;color:#fff;padding:15px 10px;text-align:left;vertical-align:top;font-size:14px}
.post-body table th {background:#4285f4;}
.post-body table.tr-caption-container {border:1px solid #f1f1f1;}
.post-body table caption{border:none;font-style:italic;}
.post-body td, .post-body th{vertical-align:top;text-align:left;font-size:13px;padding:3px 5px;}
.post-body table tr:nth-child(even) > td {background-color:#f9f9f9;}
.post-body table tr:nth-child(even) > td:hover {background-color:#fbfbfb;}
.post-body td a{color:#768187;padding:0 6px;font-size:85%;float:right;display:inline-block;border-radius:3px}
.post-body td a:hover {color:#7f9bdf;border-color:#adbce0;}
.post-body td a[target="_blank"]:after {margin-left:5px;}
.post-body table.tr-caption-container td {border:none;padding:8px;}
.post-body table.tr-caption-container, .post-body table.tr-caption-container img, .post-body img {max-width:100%;height:auto;}
.post-body td.tr-caption {color:#666;font-size:80%;padding:0px 8px 8px !important;}
table {max-width:100%;width:100%;margin:1.5em auto;}
table.section-columns td.first.columns-cell{border-left:none}
table.section-columns{border:none;table-layout:fixed;width:100%;position:relative}
table.columns-2 td.columns-cell{width:50%}
table.columns-3 td.columns-cell{width:33.33%}
table.columns-4 td.columns-cell{width:25%}
table.section-columns td.columns-cell{vertical-align:top}
table.tr-caption-container{padding:4px;margin-bottom:.5em}
td.tr-caption{font-size:80%}

Setelah anda menyimppan template maka, tahap pertama sudah selesai. Tahap selanjutnya adalah jika anda membutuhkan tabel dalam postingan maka, copy dan paste-kan kode di bawah ini di dalam postingan (perhatikan pada bagian atas postingan klik HTML lalu masukkan kode tersebut). Anda juga bisa mengeditnya terlebih dahulu di notepade sesuai dengan keterangan apa yang anda inginkan.

<table cellpadding="0" cellspacing="0" style="text-align: left;"><tbody>
<tr> <th>FEATURES</th>   <th>AVAILABILITY</th> </tr>
<tr> <td>Responsive</td>   <td>Oke</td> </tr>
<tr> <td>Multi Author Template</td>   <td>Good</td> </tr>
<tr> <td>Free Blogger Templates</td>   <td>Oke</td> </tr>
<tr> <td>Featured Slider</td>  <td>True</td> </tr>
<tr> <td>Recent Posts Widget</td>   <td>Yes</td> </tr>
<tr> <td>Unlimited Sidebar widgets</td>   <td>True</td> </tr>
<tr> <td>Ads Ready</td>  <td>True</td> </tr>
<tr> <td>Customizable Color and Fonts Options </td>  <td>True</td> </tr>
<tr> <td>Social Icons Widget</td>  <td>True</td> </tr>
<tr> <td>Author Widget</td>   <td>True</td> </tr>
<tr> <td>Featured Post Style</td>  <td>True</td> </tr>
<tr> <td>Clean Elegant Design</td>   <td>True</td> </tr>
<tr> <td>SEO Optimized</td> <td>True</td> </tr>
<tr> <td>Fully responsive</td>  <td>True</td> </tr>
<tr> <td>404 custom page</td> <td>True</td> </tr>
<tr> <td>Social Media Icons in Footer</td> <td>True</td> </tr>
<tr> <td>Responsive Navigation</td> <td>True</td> </tr>
<tr> <td>Responsive Sidebar</td> <td>True</td> </tr>
<tr> <td>Social Share functionality</td> <td>True</td> </tr>
<tr> <td>Smooth Scroll</td> <td>True</td> </tr>
</tbody> </table>

Dalam blog ini saya juga menerapkan tabel semacam ini, agar mempermudah dalam menulis artikel yang membutuhkan tabel.

Demo

FEATURES AVAILABILITY
Responsive Oke
Multi-Author Template Good
Free Blogger Templates Oke
Featured Slider True

Sesuaikan keterangan dengan kebutuhan postingan anda, hapus yang tidak perlu pada kode di atas dan semoga bermanfaat postingan tentang cara membuat tabel keterangan responsive di blog ini bermanfaat.

Cara Membuat Tabel Keterangan Responsive di Blog

Cara Memasang Widget Statistik Pengunjung Bawaan Blog
Mungkin bagi sebagian sahabat blogger menganggap bahwa memasang statistik di blog tidaklah penting, namun bagi sebagian lainnya memasang statistik di blog sangatlah penting. Alasan memasang statistik pengunjung di blog menurut saya agar pengunjung tahu seberapa populer blog yang dikelola.

Untuk mengukur seberapa banyak aktifitas yang ada di dalam blog sangat dibutuhkan alat untuk mengukurnya atau mengetahuinya. Saat ini sudah banyak situs yang menyediakan alat ukur tersebut, ada yang berbayar dan ada pula yang gratis. Apakah blogger (blogspot) juga memilikinya? Jawabannya "ya" blogger juga mempunyai alat ukur atau statistik bawaan sendiri.

Jika anda tidak ingin repot memasang statistik pihak ketiga maka, gunakan saja statistik bawaan blogger yang sudah ada, walaupun demikian statistik bawaan blogger membaca semua aktifitas yang terjadi di blog termasuk klik yang berasal dari mesin atau aplikasi tertentu.

Kita ketahui bahwa dalam dunia Internet, bukan saja manusia yang melakukan klik terhadap postingan blog tetapi ada semacam aplikasi yang dibuat khusus untuk melihat, dan mengklik postingan blog. Selama aktifitas mesin atau aplikasi di blog masih dalam taraf normal maka, tidak begitu berpengaruh terhadap SEO blog. Namun jika sudah terlalu tinggi aktifitasnya maka, akan berakibat buruk bagi blog. Bahakan bisa-bisa pengunjung blog hanyalah mesin atau aplikasi-aplikasi klik otomatis tersebut.

Cara Melihat Riwayat Penayangan Blog


Cara melihat aktifitas atau riwayat penayangan di blog adalah dengan masuk ke dasbor blogger kemudian klik tab Statistik. Setelah anda berada di laman statistik, anda bisa langsung melihat hal-hal yang terdapat di sub-tab Ikhtisar sebagai berikut:

1. Penayangan hari ini, memperlihatkan jumlah halaman yang ditelusuri pada hari ini.
2. Penayangan kemarin, memperlihatkan jumlah halaman yang ditelusuri kemarin.
3. Penayangan bulan lalu, memperlihatkan jumlah halaman yang ditelusuri selama satu bulan.
4. Riwayat penayangan sepanjang waktu, memperlihatkan semua jumlah penayangan di blog.
5. Pengikut, memperlihatkan jumlah pengikut yang mengikuti blog yang anda kelola.

Pada laman statistik ini anda juga bisa melihat sumber lalu lintas blog dan pemirsa. Maksud dari sumber lalu lintas blog adalah sumber url perujuk atau situs perujuk dimana pengunjung menemukan halaman blog anda, seperti berasal dari google.com, facebook.com, dan sejenisnya.

Sedangkan Pemirsa dapat dilihat dari beberapa opsi yaitu penayangan menurut Negara, Penayangan menurut Browser dan Penayangan Menurut Sistem Operasi. Ketiga opsi ini memperlihatkan dari negara manasajakah pengunjung blog anda berasal, browser apa yang mereka gunakan dan sistem operasi komputer apa yang digunakan untuk menelusuri halaman blog anda.

Cara Memasang Widget Statistik Pengunjung Bawaan Blog

Cara Memasang Widget Statistik Pengunjung Bawaan Blog
Setelah anda melihat secara langsung statistik blog yang ada di halaman statistik dan anda ingin memasang di blog maka, cara memasangnya adalah sebagai berikut:

1. Pada dasbord blogger klik Tab Tata Letak
2. Kemudian klik Tambahkan Gadget
3. Pilih widget (gadget) Statistik Blog
4. Kemudian Ubah Judul, Jangka waktu, Gaya, dan Opsi gaya sesuai dengan yang anda inginkan
Jika sudah selesai, klik Simpan.

Catatan

Lebih baik setelah anda memasang widget statistik di blog, atur kedudukan atau lokasi tempat widget statistik berada, agar sesuai dengan widget lain yang anda miliki di blog.

Cara Memasang Widget Statistik Pengunjung Bawaan Blog

Cara Membuat Contact Form Responsive dan Keren di Blog
Sahabat blogger yang berbahagia, apa kabar hari ini ? Mudah-mudahan semua sehat wal afiat, tidak kurang satupun, amin. Kali ini saya ingin membagikan kepada sahabat blogger sekalian tentang Cara Mudah Membuat Contact Form Keren dan Responsive di Blogger.

Halaman kontak atau contact form sangat penting bagi sebuah website atau blog. Memiliki halaman kontak akan mempermudah orang lain / pengunjung untuk menghubungi anda sebagai pemilik blog, misalnya seperti orang lain ingin memberi saran dan kritik untuk pengembangan blog atau orang lain ingin mengirim tulisannya di blog anda.

Setiap halaman kontak yang ada di blog terintegrasi dengan email, sehingga setiap pesan yang masuk dapat anda lihat di kontak masuk email. Cara membuat contact form pada tutorial kali ini tidak perlu mendaftar pada salah satu situs/website pihak ketiga yang kadang kala dalam halaman formnya terdapat iklan dan titipan link.

Membuat contact form pada tutorial kali ini hanya dengan memanfaatkan contact form bawaan blogger dan kode script yang akan dimasukkan ke dalam halaman statis. Berbeda dengan contact form milik pihak ketiga yang membatasi jumlah pesan masuk masuk (kalau tidak salah untuk yang gratis hanya 100 pesan masuk saja), contact form bawaan blogger tidak membatasi jumlah pesan masuk di email. Untuk melihat tampilan demonya silahkan lihat pada gambar di bawah ini.


Cara Membuat Contact Form Responsive dan Keren di Blog


Cara membuat contact form yang saya bagikan kali ini dibagi menjadi dua langkah mudah. Langkah pertama adalah menambabahkan contact form bawaan blogger dan langkah kedua adalah membuat halaman statis atau postingan.

Langkah Pertama

Pada langkah pertama ini kita akan menambahkan contact form bawaan blogger terlebih dahulu kemudian menyembunyikannya dengan tahap-tahap sebagai berikut:

1. Login terlebih dahulu ke halaman blogger.

2. Pada dasbor blogger klik tab "Tata Letak".

3. Selanjutnya klik "Tambahkan Ganget" dan akan muncul tab baru.

4. Pada tab tersebut tambahkan ganget, cari dan klik "Formulir Kontak" kemudian klik "Simpan".

Setelah contact form ditambahkan ke blog selanjutnya kita akan sembunyikan contact form tersebut dengan langkah-langkah sebagai berkut:

1. Pada halaman dasbor blogger pilih atau klik tab "Template" kemudian klik "Edit HTML".

2. Cari kode seperti di bawah ini, kemudian hapus pada beberapa bagian dan sisikan seperti kode di bawah ini (beberapa template kode contact formnya berbeda-beda, sesuaikan).

<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm' visible='true'>
    <b:includable id='main'>
Hapus semua kode di bagian sini
</b:includable>
  </b:widget>
</b:section-contents>

3. Simpan template.

Langkah Kedua

Setelah langkah pertama selesai sesuai dengan urutan-urutannya, sekarang kita akan menuju ke langkah kedua yaitu membuat halaman contact form di halaman statis atau postingan blog.

1. Pada dasbor blogger klik tab "Laman" kemudian buat "Laman baru".

2. Buat terlebih dahulu "Judul laman" (bisa; Contact Us, Contact Form, dsb) pada kolom judul.

3. Setelah itu pilih mode HTML (disamping mode compose)

4. Copy dan paste seluruh kode yang ada di bawah ini ke dalam laman tersebut kemudian publikasikan.

<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email *" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager{display:none}
form{color:#666}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;transition:all 0.5s ease-out}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#34495e;margin:auto;vertical-align:middle;cursor:pointer;padding:12px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;max-width:140px;border-radius:3px;color:#fff;font-weight:500;transition:all .8s ease}
#ContactForm1_contact-form-submit:hover{background:#3498db;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f6f6f6;border:none;box-shadow:none;color:#444;padding:5px 0}
.contact-form-success-message{background:#4fc3f7;border:none;box-shadow:none;color:#fff}
img.contact-form-cross{line-height:40px;margin-left:5px}
.post-body input{width:initial}
@media only screen and (max-width:640px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}}
</style>

Catatan

Untuk mempercantik halaman contact form blog lebih baik sembunyikan atau jangan bolehkan komentar pembaca.

Demikianlah postingan kali ini tentang Cara Membuat Contact Form Responsive dan Keren di Blog, semoga bermanfaat.

Cara Membuat Contact Form Responsive dan Keren di Blog

Cara memasang related posts (postingan terkait) keren di bawah postingan Blog
Sahabat pembaca blog Coretanzone yang berbahagia, ketemu lagi dengan saya dalam postingan kali ini tentang cara memasang related posts (postingan terkait) keren di bawah postingan blog. Kenapa harus memasang widget ini? Setiap pengelola blog pasti memiliki alasannya sendiri-sendiri.

Sebenarnya saat ini publisher google adsense sudah dapat menggunakan salah satu iklan terkait yang gratis disediakan oleh pihak GA untuk dipasang sebagai related di bawah postingan blog. Walaupun demikian yang saya amati saat ini hanya beberapa artikel yang sudah banyak dibaca atau dikunjungi saja yang bisa muncul iklan adsense sehingga related post yang dipasasang sendiri lebih baik ada di blog, untuk mengatasi hal tersebut.

Sedangkan bagi pemilik blog yang belum diterima GA atau tidak ingin mendaftar sebagai publisher bisa menggunakan related posts semacam ini atau yang lainnya yang diinginkan, sesuai dengan selera anda masing-masing.

Postingan terkait atau realated posts mempunyai fungsi yang sangat bagus untuk blog. Salah satu fungsi yang paling bisa dirasakan langsung adalah memudahkan pengunjung blog dalam menavigasi isi blog. Kali ini saya akan membagikan salah satu bentuk realated post menggunakan gambar yang bentuknya bulat. Untuk lebih jelasnya anda bisa lihat contoh pada gambar di atas.

Dalam membuat realated posts yang saya bagikan kali ini menggunakan CSS3. Penerapannya di blog sangat mudah, dan tampilannya sederhana dan keren, juga tidak memberatkan loading blog.

Cara Memasang Related Posts di Blog


Sebelum menerapkan widget related posts di bawah postingan terlebih dahulu back up template blog anda dengan cara, masuk ke halaman dashbord blogger kemduian klik Template > Cadangkan/Pulihkan > Unduh Template. Kalau sudah selesai silahkan ikuti langkah-langkah di bawah ini.

Langkah-langkah membuat postingan terkait di blogger adalah sebagai berikut:

1. Pada dashbord blogger klik tombol Template > Edit HTML

2. Klik ke dalam Editor HTML kemudian tekan CTRL+F (untuk membuka form pencarian di bagian atas kanan halaman Editor HTML)

3. Cari kode </head> dan letakkan kode di bawah ini tepat di atas kode tersebut.

<b:if cond="data:blog.pageType == &quot;item&quot;">
<style type="text/css">
/***** Related Psots *****/
#btnt-related-posts { display: inline-block; margin-top: 20px; padding: 40px 5%; text-align: center; width: 90%; }
#btnt-related-posts h3 { text-align: left; }
#btnt-related-posts ul { margin: 0; padding: 0; }
#btnt-related-posts ul li { border-radius: 50%; display: inline-block; list-style: none; position: relative; padding: 15px; vertical-align: top; width: 33.33%; overflow: hidden; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
#btnt-related-posts ul li .rpwrap { border-radius: 50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); position: relative; overflow: hidden; }
#btnt-related-posts li img { border-radius: 50%; display: block; width: 100%; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; }
#btnt-related-posts li:hover img { transform: scale(1.1); }
#btnt-related-posts li .re-titles { bottom: 35%; color: #fff; left: 0; margin: 0 auto; padding: 0 10px; position: absolute; right: 0; }
#btnt-related-posts li .rpoverlay { background: rgba(0, 0, 0, 0.5); bottom: 0; opacity: 0; left: 0; position: absolute; right: 0; top: 0; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; } 
#btnt-related-posts li:hover .rpoverlay { opacity: 1; }
#btnt-related-posts li .rpoverlay:hover { color: #fff; }
</style>
<script type="text/javascript">
//<![CDATA[
var ry='<h3 class="related-post-title">
<span>Related Posts</span></h3>
</br>';rn='<h3 class="related-post-title">
<span>No related article available</span></h3>
';rcomment='comments';rdisable='disable comments';commentYN='yes';
var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='http://3.bp.blogspot.com/-ZRo8fwgs65M/UZC2jMJpcLI/AAAAAAAAC5Y/EfoFQsr1wzU/s1600/BS+No+Image.gif '};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='
<li><div class="rpwrap">
<img alt="'+titles[c]+'" src="'+ thumb[c].replace("/s72-c/","/s300-c/")+'"/><a class="rpoverlay" href="'+urls[c]+'"><span class="re-titles">'+titles[c]+'</span></a><div class="clear">
</div>
</div>
</li>
</div>
';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>
'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('btnt-related-posts').innerHTML=dw};
//]]>
</script>
</b:if>

5. Langkah selanjutnya cari salah satu dari kode di baawah ini, sesuaikan dengan kode yang ada di dalam template anda.

<div class="post-footer">
(atau)
<div class="post-footer-line post-footer-line-1">
(atau)
<div class="post-footer-line post-footer-line-2">
(atau)
<div class="post-footer-line post-footer-line-3">

6. Kalau kodenya sudah ketemu, letakkan kode berikut tepat di bawah salah satu kode tersebut di atas. Sesuaikan dengan template yang anda miliki.

<b:if cond="data:blog.pageType == &quot;item&quot;">
</b:if>
<div id="btnt-related-posts">
<b:loop values="data:post.labels" var="label">
<script expr:src="&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;" type="text/javascript">
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</b:loop></div>

7. Simpan template

Demikianlah postingan kali ini tentang Cara memasang related posts (postingan terkait) keren di bawah postingan Blog, semoga bermanfaat.

Cara memasang related posts (postingan terkait) keren di bawah postingan Blog