Man Seo: Widget

Showing posts with label Widget. Show all posts

Tuesday, December 20, 2016

Cara Membuat Form Contact Blog Pada Halaman Blog

Membuat Form Contact Blog Pada Halaman Blog - Form contact adalah aplikasi yang digunakan untuk dapat mengirimkan pertanyaan dengan data-data yang harus di isikan pada form dan dikirimkan kepada server admin. Form contack ini harus ada pada halaman blog karena untuk memudahkan pengunjung apabila ada hal yang ingin ditanyak mengenai blog yang sedang mereka kunjungi. Membuat form contact pada halaman blog ini sangat mudah untuk dapat membuat form contact sendiri di halaman statis blog. Halaman statis adalah halaman yang bukan halaman postingan blog tetapi halaman yang ada disamping blog maksudnya adalah halaman ini tidak akan muncul pada halaman awal blog.

Membuat form contact ini sangat mudah untuk dilakukan yang perlu kamu lakukan adalah dengan mengikuti langkah-langkah berikut ini dengan teliti dan cermat.

Masuk Akun Blog Kamu
Pilih Tab Layout/Tata Letak
Pilih Add Gadget dan Pilih More Gadget lalu pilih Contact Form [+]
Lalu Simpan/Save
Lalu kamu masuk ke Tab Laman/Pages
Pilih New Page
Berikan Judul "Kontack" / "Contact" / "Contact Us" Lalu pilih Tab HTML
Masukan Script Dibawah Ini

Salin Script ini :

<div dir="ltr" style="text-align: left;" >
Silahkan isi form di bawah ini untuk menghubungi kami. Jika tidak ada halangan dan kesibukan lainnya, admin akan langsung merespon dengan cepat pesan yang Anda kirimkan.
<br />
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" /><br />
<div class="clear">
</div>
<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>
</div>

Lalu kamu simpan dan publish. Setelah itu kamu masuk ke Tab "Edit Template -> Edit HTML" Lalu kamu masukan script dibawah ini Sebelum tag </body> atau Setelah <body> :

Baca Juga :

</style>
<b:if cond='data:blog.pageType == "static_page"'>
<style type='text/css'>
/* Contact form */
#ContactForm1_contact-form-email,#ContactForm1_contact-form-name{width:70%;height:auto;margin:5px auto 15px;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}
#ContactForm1_contact-form-email-message:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus{background:#fffff7;outline:0}
#ContactForm1_contact-form-email-message{width:95%;height:170px;margin:5px auto;padding:10px;background:#ebebeb;border:1px solid #ccc;color:#777;font-family:Arial,sans-serif;border-radius:3px;box-shadow:0 4px 0 0 #c7c5c7}
#ContactForm1_contact-form-submit{display:block;height:35px;float:left;color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#f4836a;box-shadow:0 4px 0 0 #c75b45;border:1px solid #eb7d67;border-radius:3px;text-shadow:0 1px 0 #de5135}
#ContactForm1_contact-form-submit:hover{background-color:#f5785f}
#ContactForm1_contact-form-submit:active{position:relative;top:2px;box-shadow:0 2px 0 0 #c75b45}
#ContactForm1_contact-form-submit:focus{outline:0}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:15px;text-align:left}
@media screen and (max-width:768px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:96%}
}
@media screen and (max-width:480px){#ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message,#ContactForm1_contact-form-name{width:94%}.post-body{margin:0 15px}
}
</style>

Lalu Save Template Dan Lihat Hasil Jadi yang kita buat tadi :

DEMO

Semoga berhasil dan semoga bermanfaat bagi kamu yang hendak memasang contact form pada blog di halaman static blog. Sekian artikel tentang Cara Membuat Form Contact Blog Pada Halaman Blog lihat artikel tentang blogging lainnya di Manseo.

Monday, December 19, 2016

Cara Mengetahui Id Widget Pada Blog

Mengatahui Id Widget Pada Blog - Id widget blog merupakan bagian penting dari widget blog untuk mengetahui widget tersebut agar tidak tertukar dengan widget yang lainnya. Id widget dapat diketahui dengan cara mengetahui id widget blog pada tutorial ini.

Untuk dapat mengetahui id widget blog kamu harus melakukan langkah pertama yaitu niat. Karena jika tidak ada niat kamu pasti malas untuk mengetahui id widget blog ini. Jika sudah siapkan jiwa dan raga mu agar kamu siap dalam menjalankan tutorial kali ini.

Untuk dapat mengetahui id widget blog, yang harus kamu lakukan adalah sebagai berikut :

Masuk ke dashboard blog kamu
Lalu pilih tab layout
Pilih widget yang akan kamu ingin ketahui dengan cara melihat dari ujung url widget

Perhatikan gambar dibawah ini :

id widget blog

Perhatikan yang ada pada lingkaran merah diatas. Yaps benar itu adalah id blog widget kamu dan jika kamu ingin memasang widget sticky kamu perlu mengganti #HTML dengan #HTML(id-widget-blog).

Sekian artikel tutorial blogging kali ini mengenai Cara Mengetahui Id Widget Pada Blog. Lihat juga Cara Membuat Sticky Widget Pada Blog. Semoga artikel kali ini dapat bermanfaat ya. Masih banyak artikel tentang tutorial blogging lainnya loh di Manseo.

Tutorial Blog Widget | Olid Design 9:16 AM

Cara Membuat Sticky Widget Sidebar Pada Blog

Membuat Sticky Widget Sidebar Pada Blog - Membuat sticky widget sidebar dengan mudah pada blog agar widget yang diinginkan mengikuti saat discroll kebawah. Cara yang digunakan pada blog ini sangat mudah dan berhasil seratus persen. Fungsi dari sticky ini adalah untuk menunjukan widget sidebar yang ingin di perlihatkan oleh blogger kepada para pembaca agar pembaca melihat widget tersebut tanpa melewatinya.

Responsive Sticky Widget

Sticky widget dapat dibuat dengan mudah mengikuti script berikut yang dapat kamu lakukan dengan mudahnya. Yuk langsung saja kita praktekan langkah berikut untuk bisa membuat widget ini.

Baca Juga :

Widget pertama adalah sebagai berikut :

Masuk akun blog kamu
Pilih tab Edit HTML

Salin script dibawah ini sebelum tag ]]>[/b:skin] :

.sticky {
position:fixed;
top:10px;
z-index: 100;
}

Lalu Save dan salin script dibawah ini sebelum tag </body> :

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML8').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML8').addClass('sticky');
} else {
$('#HTML8').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>

Lalu kamu ganti #HTML8 menjadi id blog widget yang akan kamu jadikan sticky widget

Baca Juga :

Cara Mengetahui Id Widget Pada Blog

Kemudian save template lalu lihat hasilnya dan semoga berhasil dan apabila script diatas tidak berhasil, Kamu bisa mengikuti langkah kedua dibawah ini,

Widget Kedua Sebagai Berikut :

Ikuti langkah-langkahnya sebagai berikut:

Masuk ke akun blog kamu
Pilih tab Layout
Pilih add gadget
Pilih html/javascript

Lalu kamu salin kode berikut :

<style>
.sticky {
position:fixed;
top:10px;
z-index: 100;
}
</style>
<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#HTML8').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#HTML8').addClass('sticky');
} else {
$('#HTML8').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>

Lalu kamu ubah #HTML8 menjadi id blog kamu, Setelah itu kamu save dan lihat hasilnya dan semoga berhasil ya. Sekian pembahasan tutorial kali ini tentang Cara Membuat Sticky Widget Side Bar Pada Blog semoga bermanfaat dan lihat artikel tentang blogging di Manseo.

Widget | Olid Design 7:20 AM

Cara Membuat Recent Post Sederhana Pada Blog

Membuat Recent Post Sederhana Pada Blog - Recent post adalah salah satu widget blog yang harus ada pada tampilan website atau blog dengan kata lain widget ini harus ada pada widget blog atau widget wajib. Recent post ini sangat berguna bagi para pendatang yang ingin melihat update terbaru dari blog yang mereka kunjungi ketika mereka sedang berada pada salah satu postingan blog.

Recent post sederhana ini sangat mudah untuk dilakukan karena kamu hanya mensalin sebuah script dibawah ini dengan mudah dan pasti 100% berhasil pada widget blog kamu. Recent post sederhana sangat cepat dan tidak berat ketika koneksi jaringan kita kurang stabil. Kesederhanaan merupakan ciri agar blog disukai oleh google.

Widget Recent Post

Sunday, December 18, 2016

Tutorial Blog Widget | Olid Design 7:33 AM

Cara Membuat Widget Recent Post Blog Sederhana Berdasarkan Label

Cara Membuat Widget Recent Post Blog Sederhana Berdasarkan Label - Widget biasa digunakan para blogger untuk dapat mempermudah para readers melihat apa yang ada pada blog tersebut. Widget selalu digunakan oleh para blogger karen widget dapat membantu para readersnya. Pada pembahasan kali ini akan membahas bagaimana cara membuat widget recent post sederhana berdasarkan label di blog kamu. Widget recent post adalah widget yang dapat memberikan informasi postingan yang baru saja di update oleh admin blogger. Terkadang banyak blogger yang ingin widget recent post ini sangat cantik atau indah di pandang dan tahukah kamu bahwa widget recent post yang disukai oleh google adsense adalah dengan kriteria kesederhanaannya.

Widget Recent Post Blog

Widget recent post ini bisa kamu ubah sesuai dengan kebutuhan kamu sebagai admin blog kamu. Widget recent post ini menurut blog ini adalah sangat penting karena widget recent post dapat berpengaruh pada tampilan halaman blog kamu. Karena widget ini sangat membantu dalam menemukan artikel terbaru ketika readers berada di salah satu postingan blog kamu.

Pada langkah ini hal yang kamu harus lakukan adalah dengan niat terlebih dahalu ya karena segala sesuatu harus diawali dengan niat. Pada langkah kedua siapkan jiwa dan raga kamu untuk bisa membuat widget recent post ini.

Baca Juga :

Langkah selanjutnya adalah dengan memperhatikan langkah-langkah pasti ini untuk bisa membuat widget recent post. Langkah-langkah untuk bisa membuat widget ini sebagai berikut:

Pilih Tab Layout
Pilih Add Gadget
Pilih Html/JavaScript
Salin Script dibawah ini :

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = true;
var showpostdate = false;</script>
<script type="text/javascript" src="/feeds/posts/default/-/Free Template?orderby=updated&alt=json-in-script&callback=rcentbytag"></script>

Keterangan :

Var numpost = 5; ubah menjadi sesuai dengan keinginan kamu
Var showpostthumbnails = true; ubah false atau true sesuai dengan keingan kamu apakah kamu ingin menunjukan post dengan bentuk thumbnail ? rekomendasi adalah true
Var Showpostdate = false; untuk menunjukan tanggal post, Rekomendasi adalah false; untuk tidak menunjukan tanggal post
Free Template = ubah menjadi nama dari label post yang kamu inginkan.

Jika sudah disalin, Langkah selanjutnya adalah dengan cara menyimpan script tersebut dengan pilih tombol " Save/Simpan ". Lalu lihat hasil dari tutorial widget blog kali ini semoga berhasil ya teman blogger. Sekian artikel widget blog kali ini tentang Cara Membuat Widget Recent Post Blog Sederhana Berdasarkan Label. Semoga bermanfaat artikel kali ini ya teman blogger salam blogger indonesia.