Cara Membuat Postingan Gambar Menjadi Responsive

Cara Membuat Postingan Gambar Menjadi Responsive - Responsive berarti bisa menyesuaikan ukuran berdasarkan device apapun. Jadi jika membuat postingan berupa gambar, akan lebih baik jika gambar tersebut mampu menjadi responsive, sehingga ukuran nya dapat menyesuaikan sesuai dari mana pengunjung mengakses situs sobat, entah itu dari PC, Laptop,Mobile, dll, intinya gambar tersebut dapat menyesuaikanya.

Untuk membuat Gambar Menjadi Responsive, ternyata tidaklah begitu sulit, cobalah tips ini, sobat tinggal menambahkan kode CSS kedalam template blogspot yang sobat gunakan. Bagaimana Caranya ?? Yuk lihat dibawah ini :

1. Masuk ke mode Edit HTML pada template

2. Letakkan kode css dibawah ini tepat diatas </style> atau ]]</b:skin>

.separator a{margin-left:0px !important;margin-right:0px !important;}
.post img{max-width:100%;height:auto;}

3. Langkah Terakhir save template.

Itulah tips singkat  Cara Membuat Postingan Gambar Menjadi Responsive, semoga bermanfaat.

Cara Mudah Memasukan File PDF,EXEL,POWERPONT Ke Dalam Postingan Blog

Cara Mudah Memasukan File PDF,EXEL,POWERPONT Ke Dalam Postingan Blog - Siapa tahu sobat blogger ingin memasukan file seperti exel,powerpoint,pdf kedalam postingan blog nya, apabila belum tahu caranya silahkan ikuti postingan saya kali ini. Sesekali mungkin perlu juga kita menambahkan file pendukung kedalam postingan kita agar pembaca blog kita semakin betah membaca artikel kita, semakin lengkap artikel kita maka akan semakin baik dimata pembaca dan juga mbah google.

Okey langsung saja ya berikut cara nya bagaimana cara memasukan file pdf,dll, kedalam postingan blog kita :

1. Pertama : Login dulu ke email gmail
2. Kedua : Setelah login masuk ke https://drive.google.com
3. Ketiga : Setelah login, pilih file yang akan diupload. Lihat gambar :

Upload File

Pilih File

Proses Upload Berjalan

4. Langkah Keempat : Setalah upload selesai klik file yang sudah kita upload dan Klik Share.

5. Langkah Kelima : Setelah itu pilih Press Change dan Pilih Public On The Web

6. Langkah Keenam : Setelah itu klik quick acces tool bar dan pilih  Embed Code dan Copy kodenya kedalam postingan HTML blogspot.

7. Langkah Ketujuh : Paste kode hasil embed kedalam postingan blogspot, pakai HTML ya jangan pilih yang compose.

Oke cukup sekian artikel Cara Mudah Memasukan File PDF,EXEL,POWERPONT Ke Dalam Postingan Blog. Semoga bermanfaat.

Cara Membuat Widget Iklan Menarik Seperti Google Adsense

Cara Membuat Widget Iklan Menarik Seperti Google Adsense - Membuat tampilan iklan memang gak bisa asal-asalan ya sob, selain penempatan iklan yang tepat, penampilan iklan yang menarik juga menjadi faktor penentu agar pengunjung mau mengeklik iklan yang ada di blog atau web kita.

Iklan - iklan yang ada biasanya berbentuk banner dan juga iklan berbentuk text. Untuk iklan berbentuk banner, untuk membuat nya agar terlihat menarik sepertinya lebih mudah, kita tinggal membuat banner semenarik mungkin maka selesai deh iklan banner kita. Lalu bagaimana kalau kita mau menampilkan jenis iklan berbentuk text tapi bisa terlihat menarik, mungkin kita bisa mencontoh nih, iklan text milik nya Google Adsense, penampilanya terlihat menarik walaupun hanya berbentuk text. Lihat penampakanya dibawah ini :

Okey,,menarik kan ?? Lalu bagaimana cara membuatnya ?? Yuk kita bahas dibawah ini :



1. Login ke Akun Blogger Anda. Lalu Masuk ke Dashboard >> Template >> Edit HTML
2. Masukan Script Berikut diatas Code </head>

<script src='https://googledrive.com/host/0B3pi8P5BWqm1OHB4Zks1aWR0Nnc/iklan-teks-ga.js' type='text/javascript'/>

3. Lalu Masukan Code CSS Berikut Tepat diatas Code ]]></b:skin> atau </style>

* Iklan Teks
----------------------------------------------- */
#iklan-teks {
  width:304px;
  height:259px;
  background-color:white;
  position:relative;
  overflow:hidden;
  margin:0 auto;
}
#iklan-teks h2.iklan-header {
  cursor:pointer;
  background-color:white;
  background-image:none;
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  border-top:1px solid #d8d8d8;
  padding:10px;
  margin:0 0;
  position:relative;
  text-transform:none;
  letter-spacing:0;
}
#iklan-teks h2.iklan-header:first-child {
  border-top:none;
}
#iklan-teks h2.active {
  display: none;
}
#iklan-teks h2.iklan-header:before{
  content:"";
  width:0;
  height:0;
  position:absolute;
  top:20px;
  right:15px;
  border:5px solid transparent;
  border-color:#b2b2b2 transparent transparent;
}
#iklan-teks div {
  height:100px;
  padding:10px 70px 10px 10px;
  font:normal 13px Verdana, Tahoma,Serif;
  color:white;
  border-top:1px solid #d8d8d8;
}
.judul {
  font:normal 20px Verdana, Tahoma,Serif;
  color:blue;
  margin:0 0 5px 0;
}
a.judul{
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue !important;
  text-decoration:none;
  display:inline-block;
}
a:hover.judul {
  font:normal 20px Verdana, Tahoma,Serif !important;
  color:blue;
  text-decoration:underline;
}
.isi-iklan a{
  font:normal 13px Verdana, Tahoma,Serif;
  color:green;
  text-decoration:none;
  display:block;
  margin-bottom:10px;
}
.isi-iklan a:hover{
  color:green;
  text-decoration:none;
}
.isi {
  padding-top:15px;
  color:#222;
  text-align:left !important;
}
.panah-besar {
  background: #4d90fe;
  border-radius: 50%;
  cursor: pointer;
  height: 34px;
  float: right;
  margin-right: -60px;
  margin-top: -40px;
  width: 34px;
  text-align: center;
  line-height: 34px;
}
.panah-besar:hover {
  background: #4472bd;
}
.info-icon {
  width:15px;
  height:15px;
  position:absolute;
  top:0;
  right:0;
  cursor:pointer;
}
.info-iklan {
  background:#d3d3d3;
  width:100px;
  height:15px;
  border-bottom-left-radius:4px;
  position:absolute;
  top:0;
  right:0;
  color:#000;
  font:normal 11px Arial,Sans-Serif;
  text-align:left;
  overflow:hidden;
  padding-right:19px;
  padding-left:5px;
  display:none;
}

3. Lalu Buatlah Sebuah Widget HTML/Javascript lalu isi dengan Code Berikut :


<div id="iklan-teks">
    <!-- iklan ke 1 -->
    <div data-header="Blogger Tutorial" style="border-top:none">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net' target='_blank'>Blogger Tutorial</a>
            <a href='http://blog.kangismet.net' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Blogger Tutorials and Free Blogger Templates.</span>
            <a class='panah-besar' href='http://blog.kangismet.net' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a>
        </span>
    </div>
    <!-- iklan ke 2 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 3 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
            <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- iklan ke 4 -->
    <div data-header="Pasang Iklan di Sini">
        <span class='isi-iklan'><a class='judul' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>Pasang Iklan di Sini</a>
            <a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'>blog.kangismet.net</a>
        <span class='isi'>Pasang iklan Anda di sini, hanya 35 ribu / bulan.
            <a class='panah-besar' href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img style='margin-top:7px;margin-left:2px;width:12px;height:19px' alt='arrow' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXAjU0QhSzGOffEOLcurnLdhv4cAH7nlgCl0vHmsom9Pw8RKJB-3xxVrL6AWobW2Fb1vgN3OrUMSlME68MBcqNqZbfs3VYV7A9XFm2ywK8t1BKtLJ3BifJfOoK6wSkcv70dEC17jpiwkM/s1600/icon_chevron_white.png'/></a></span>
        </span>
    </div>
    <!-- info -->
    <span class='info-iklan'>Iklan oleh Kang Ismet</span>
    <span class='info-icon'><a href='http://blog.kangismet.net/2012/12/pasang-iklan-di-blog-kang-ismet.html' target='_blank'><img alt='info' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCd_BqtXKtwhceZtm-3hqTzHU6vAJitBsfErFb7cLoWiKp6Chtm77F0t7EaEpBrMC51lKSZ8k45zt0UCP1AoXDnwxo8xo5I26VQD4ZvINGGO6Ljyntw2LtoilSGGDFnmlvCA0xz9lC5ks/s1600/info-iklan.png'/></a></span>    
</div>

4. Save dan Lihat Hasilnya.

Okey sob,,cukup sekian artikel Cara Membuat Widget Iklan Menarik Seperti Google Adsense. Semoga tips ini bermanfaat.

Cara Menonaktifkan Komentar Link Aktif Di Blogspot

Cara Menonaktifkan Komentar Link Aktif Di Blogspot - Sangat menjengkelkan apabila ada blogger yang berkomentar meninggalkan live link/link hidup atau yang biasa disebut dengan istilah nyepam. Jika sobat memiliki blog yang sudah memiliki visitor lumayan tinggi, pasti akan semakin banyak blogger yang memberikan komentar pada blog sobat. Kita sebagai pemilik blog seharusnya senang dengan hal ini, tapi apa boleh buat, kenyataanya kita malah dibuat was-was akibat ulah beberapa blogger yang suka nyepam dengan meninggalkan link hidup saat komentar. Jika hal ini dibiarkan terus maka akan mengganggu kesehatan SEO sobat di mata mbah google.

Untuk itu kita perlu memberikan proteksi pada blog kita yang bisa secara otomatis membuat Link hidup tadi menjadi mati. Jadi sobat blogger gak perlu capek-capek lagi menghapus satu persatu komentar yang berisi Link hidup tadi. Contoh lihat screenshot milik saya dibawah ini :

Bagaimana cara membuat nya ?? Yuk kita lihat cara mudah dibawah yaitu Cara Menonaktifkan Komentar Link Aktif Di Blogspot :

1. Pertama Simpan salah satu JavaScript ini di atas </body>

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang nyepam di sini!";
            content[i].className = "spammer-detected";
        }
    }
} 
blockLinks('comment-holder', 'p');
//]]>
</script> 

2. Save atau simpan, dan lihatlah hasilnya.

Cukup mudah bukan ?? Dengan menggunakan cara ini sobat gak perlu khawatir lagi jika ada para blogger yang ingin nyepam di blog sobat.  Okey, selamat praktek dan selamat mencoba.

Happy Blogging

Cara Membuat Tombol Like To Download Di Blogspot

Cara Membuat Tombol Like To Download - Malam sob,, kali ini saya akan share salah satu tips yang bisa sobat gunakan untuk mendapatkan dan menambah Like fanpage sobat. Pernah gak sob lagi berkunjung ke sebuah blog, lalu kita ingin mendownload sesuatu tapi kita diminta untuk me like fanpage terlebih dahulu,baru setelah itu link download nya akan terbuka ?? Nah kalau sobat mengalami hal seperti ini, mau gak mau kan pasti kita akan mengikuti perintahnya terlebih dahulu untuk bisa mendapatkan file yang akan kita download. So, tips ini seperti nya lumayan cukup ampuh untuk menambah like fanpage kita.

Note : Sobat harus menyiapkan sesuatu ( Bisa ebook, video tutorial,dsb ) yang bisa membuat pengunjung me Like sebagai imbalan atas Like nya

Cara Membuat Tombol Like To Download :

1. Silahkan sobat masuk ke link ini Tombol Like To Download 
2. Kemudian Isi form yang diminta dan ikuti petunjuknya.

3.Setelah itu, sobat akan melihat preview dan kodenya. Salin kode embed dan tempel ke website atau blog.

4. Setelah menambahkan kode ke blog, pengunjung sobat akan melihat instruksi untuk me-”Like” sebelum download bisa dilakukan, dan setelah mereka mengklik “Like”, maka tombol download akan muncul.

Okey, sampai disini sudah selesai sob langkah pembuatanya. Bagaimana cukup mudah kan  Membuat Tombol Like To Download ? Jika ada yang kurang jelas dan ingin ditanyakan silahkan berkomentar dibawah sob. Trims

Cara Membuat Halaman Muka Blog Tersendiri

Tips Blog - Cara Membuat Halaman Muka Blog Tersendiri ini berguna buat sobat yang ingin menampilkan halaman muka blog sobat tanpa ada daftar postingan. Mugkin sekali-kali sobat ingin bereksperimen dengan blog kesayanganya untuk menciptakan sesuatu yang berbeda dari sebelumnya. Tips ini saya ambil blog DTE. Baik langsung saja berikut cara membuat nya :

Pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode yang kurang lebih tampak seperti ini:

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>

Tepat di atas kode tersebut, letakkan kode ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:section class='main' id='homepage'></b:section>
<b:else/>

 dan tepat di bawahnya, letakkan kode ini:

</b:if>

 sehingga hasilnya akan menjadi seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:section class='main' id='homepage'></b:section>
<b:else/>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
  </b:section>
</b:if>

Klik Simpan Template. Sekarang masuklah ke halaman Tata Letak. Jika berhasil, seharusnya widget posting akan menghilang, digantikan oleh sebuah navigasi untuk menambahkan widget baru seperti ini:

Dari elemen itu sobat bisa menambahkan widget yang hanya akan ditampilkan pada halaman muka.Widget bisa berupa apa saja. Misalnya seperti teks ucapan selamat datang seperti gambar di atas, widget daftar isi, slideshow otomatis, atau yang lainnya.

Demikian sob tutorial Cara Membuat Halaman Muka Blog Tersendiri. Semoga Bermanfaat.

Source code : www.dte.web.id

Cara Membuat Fixed Header Blog

Cara Membuat Fixed Header Blog -  Pada tutorial kali ini saya akan mencoba share tutorial bagaimana cara membuat fixed header blog seperti di blog saya ini. Selain logo blog yang akan kita pasang, widget ini juga terdapat kolom search untuk memudahkan pengunjung mencari artikel-artikel blog sobat. Seperti apa tutor nya, langsung saja dibawah ini :

Cara Membuat Fixed Header Blog :

1. Login ke Blogger

2. Pilih Template >> Edit HTML

3. Cari kode ]]></b:skin>, copy kode dibawah ini dan letakkan tepat diatas kode ]]></b:skin>

/* Floating Menu
----------------------------------------------- */
#top-menuwrapper{background-color: #fff;border-top:3px solid #F4661A;box-shadow: 0px 1px 2px rgba(0,0,0,0.3);height:76px;width:100%;position:fixed;top:0;left:0;z-index:999;overflow:hidden;border-bottom:3px solid #F4661A}
#top-menuwrap{width:1100px;margin:0 auto;}
#top-menu{width:100%}
#top-menu ul{list-style: none;margin-right:250px}
#top-menu ul li{float:right}
#top-menu ul li a{line-height:34px;padding:5px 0;margin-left:25px;color:#999;font-size:30px;text-transform:uppercase;display:block;text-decoration:none;}
#top-menu ul li a:hover{color:#555;}
.logo{float:left;background:#fff;}
.logo img{margin-top:-16px;}

/* Kotak Pencarian
----------------------------------------------- */
#search-wrapper{float:right;padding-right:210px;}
#search-form-feed {
width:210px; /* lebar kotak penelusuran */
position:fixed;
top:26px;
margin:0 0 10px;
padding:0 0;
font:normal normal 11px Arial,Sans-Serif;
color:#333;
z-index:9999;
}
#feed-q-input {
display:block;
width:70%;

height:16px;

border:1px solid #ccc;
background-color:white;
padding:5px 5px;
font:normal normal 13px Tahoma,Arial,Sans-Serif;
color:#ccc;
margin:0 0;
}
#feed-q-input:focus {
border-color:#F4661A;
color:#333;
outline:none;
}
#sbutt {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOaJCbkF95tEmjc8CJrul5NEi2PhjXVD-7DvAIWDu8WZpdlMXIuoxQWssoT5LkNuq63TIREQnjl6Px-9NxDMkYI8sT3jD_PwAWCNFW9YtGnSLDxzCgFh93mf26gLkLIaT0JGvmj3ryAE0/s1600/search.png)no-repeat;
color:none;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 1px;
margin: 0px;
border:none;
width:58px;
height:28px;
cursor: pointer;
margin-top:-28px;
float:right;
}
#search-result-container {
width:550px;
height:320px;
overflow:auto;
position:absolute;
top:100%;
right:0;
z-index:999;
background-color:#f2f2f2;
border:1px solid #ddd;
padding:10px 10px 0;
margin:10px 0 0;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
display:none;
}
#search-result-container mark {
background-color:yellow;
color:black;
}
#search-result-container a {
text-decoration:none;
color:#0D3E71;
font-weight:bold;
font-size:12px;
display:block;
}
#search-result-container a:hover {
color:#052748;
}
#search-result-container h4 {
margin:0 0 10px;
font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;
color:#B50001;
}
#search-result-container ol {
background:transparent;
border:none;
margin:0 0 10px;
padding:0 0;
}
#search-result-container li {
margin:0 0 1px;
padding:7px 8px;
list-style:none;
border:1px solid #B7C1CE;
background-color:white;
overflow:hidden;
word-wrap:break-word;
text-align:left;
}
#search-result-container li img {
display:block;
float:left;
margin:0 10px 4px 0;
border:1px solid #B7C1CE;
background-color:#F5F5F5;
padding:2px 2px;
}
#search-result-loader {
position:absolute;
top:100%;
left:0px;
z-index:999;
background-color:#ED702B;
color:white;
padding:3px 5px;
margin:-2px 0 0;
font:normal bold 10px Arial,Sans-Serif;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
display:none;
}

4. Sekarang Cari Kode <body> , dan letakan kode dibawah ini tepat dibawah <body>

<div id='top-menuwrap'>
<div id='search-wrapper'>
<div id='search-form-feed'>
<form action='/search' onsubmit='return updateScript();'>
<input id='feed-q-input' name='q' onfocus='this.value=&apos;&apos;;' onkeyup='resetField();' type='text' value='Cari di sini...'/><input class='btnSearch' id='sbutt' type='submit' value=''/>
</form>
<div id='search-result-container'/>
<div id='search-result-loader'>Loading...</div>
</div>
<script type='text/javascript'>
//<![CDATA[
var searchFormConfig = {
    url: "Url-Blog-Anda", // URL Blog
    numPost: 9999, // Jumlah maksimal temuan
    summaryPost: true, // 'true' jika ingin menampilkan deskripsi posting
    summaryLength: 400, // Jumlah karakter ringkasan posting
    resultTitle: "Hasil penelusuran yang di temukan", // Judul hasil pencarian
    noResult: "Tidak Di Temukan!!!", // Deskripsi 'tak ditemukan'
    resultThumbnail: true, // 'true' untuk menampilkan thumbnail posting
    thumbSize: 40, // Ukuran & resolusi thumbnail
    fallbackThumb: "http://reader-download.googlecode.com/svn/trunk/images/no-image-72x72.png" // Fallback thumbnail untuk posting tak bergambar
};
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/blogger-quick-search.js' type='text/javascript'/>
</div></div>

5. Sekarang Cari Kode </head> dan letakan kode ini di bawah kode </head>

<div id='top-menuwrapper'>
<div id='top-menuwrap'>
<div id='top-menu'>
<div class='logo'>
<a href='Url-Blog-Anda' target='_blank'><img alt='Home' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4qGan-mFQgJCyZ07mqHKeMY37D09eLqbvzYJeUNJ5iSxV8ZtYVKstIs8_B1ml_nvrxcu4u-XGVPeQvrGI0MaJM4Db3Ge1L0vdurOgGbYwvcpd1VUPR-FJ0lLmb_PQy2s7ulfymG7-Ryw/s1600/henrylogov2.png' style='padding:0px;'/></a>
</div>
<ul>
</ul>
</div>
</div>
</div>

Catatan:

Ganti Kode Warna #F4661A dengan kode warna yang sobat inginkan, untuk melihat pilihan warna klik disini

Ganti Kode Url-Blog-Anda dengan Alamat Url blog sobat !

Ganti Kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4qGan-mFQgJCyZ07mqHKeMY37D09eLqbvzYJeUNJ5iSxV8ZtYVKstIs8_B1ml_nvrxcu4u-XGVPeQvrGI0MaJM4Db3Ge1L0vdurOgGbYwvcpd1VUPR-FJ0lLmb_PQy2s7ulfymG7-Ryw/s1600/henrylogov2.png dengan kode gambar logo yang sobat inginkan!

Sampai disini tutor nya sudah selesai sob, jika sobat praktekan dan ada eror berarti ada langkah-langkah yang mungkin terlewat.

Cukup sekian Tutor Cara Membuat Fixed Header Blog. Semoga Bermanfaat

Cara Membuat Tombol Demo dan Download

Cara Membuat Tombol Demo dan Download - Ini adalah cara mudah untuk membuat tombol demo dan download. Tombol ini bisa sobat pergunakan untuk berbagai macam keperluan di blog sobat. Dengan memakai tombol ini tentunya bisa memudahkan sobat dalam membuat tombol, dari pada harus upload image satu persatu. Oiya, tombol ini adalah full CSS, jdi membuat tampilan lebih menarik dan tidak lemot untuk di load.

Cara Membuat : Tambahkan kode di bawah ini sebelum ]]></b:skin>

/* -- Kang Ismet Button --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

Untuk penggunaannya, buat kode seperti ini ketika membuat postingan (gunakan mode HTML)

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://blog.kangismet.net" target="_blank">Demo</a></li>
<li><a class="download" href="http://blog.kangismet.net" target="_blank">Download</a></li>
</ul>
</div>
<div class="clear"></div>

Okey,, cukup sekian artikel Cara Membuat Tombol Demo dan Download.

Scrpt by : blog.kangismet.net

Cara Membuat Blog Menjadi Responsive

Cara Membuat Blog Menjadi Responsive - Responsive design adalah kemampuan website untuk mampu menyesuaikan tampilan template nya kedalam berbagai macam gadget yang digunakan oleh pengunjung, seperti Laptop, Tablet, Smart Phone dengan resolusi layar yang berbeda-beda. Design Responsive saat ini memang sedang naik daun, karena seperti yang kita ketahui, saat ini orang mengakses internet mayoritas adalah dari gadget mereka. Untuk akan lebih baik jika blog atau website kita memiliki kemampuan untuk Responsive.

Tutorial ini saya dapat dari mdf-blog.blogspot.com. Dimana dia share bagaimana cara nya membuat blog kita ( Khusus blogger ) bisa menjadi Responsive Design. Saya sendiri belum mencoba si sob, tapi tips ini sudah dicoba dan work hasilnya oleh sang pembuat tips nya.

Dalam penerapanya disini kita menambahkan kode @media only screen and (max-width:800px) yang artinya ukuran tampilan website/blog tidak boleh lebih dari 800 pixel contoh:

@media only screen and (max-width:800px)
{ #outer-wrapper {width:750px; margin:0 auto;} //ukuran tampilan website
#main-wrapper {width:750px;} //ukuran page atau isi
#sidebar-wrapper {width:750px;} //ukuran sidebar
#footer {width:750px;} //ukuran footer }

Dengan contoh diatas maka tampilan website menjadi satu colom, yaa karena ga mungkin untuk tampilan 800 pixel website dengan 2 colom saya rasa kurang bagus.

Berikut cara untuk membuat tampilan website/blog menjadi responsive:

1. Copy code berikut ini dan letakkan dibawah kode <head>

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

2. Kemudian Copy code berikut ini dan letakkan dibawah kode ]]></b:skin>

<style>@media only screen and (min-width:768px) and (max-width:989px) {#outer-wrapper {width:730px; margin:0 auto }Kode CSS lainya }@media only screen and (max-width:767px) {#outer-wrapper {width:540px; margin:0 auto }Kode CSS lainya }@media only screen and (max-width: 580px) {#outer-wrapper { width: 500px }Kode CSS lainya }@media only screen and (max-width: 490px) {#outer-wrapper { width: 430px }Kode CSS lainya }@media only screen and (max-width: 479px) {#outer-wrapper { width: 280px }Kode CSS lainya }@media screen and (max-width: 260px) {#outer-wrapper { width: 210px }Kode CSS lainya }</style>

Kode tersebut di gunakan untuk membuat tampilan blog menjadi responsive. Untuk kode CSS-nya sobat bisa liat ID setiap elemen seperti Sidebar, main-wrapper, outer-wrapper, footer dan lain-lain karena pada setiap template ID setiap elemen bisa saja berbeda. Untuk melihat hasilnya bisa lihat disini Smart Responsive Tester for Web Designers klik tombol Lauch the tool. kemudian masukan alamat website atau blog sobat lalu klik Test.

Okey, cukup sekian tutorial Cara Membuat Blog Menjadi Responsive. Semoga bermanfaat.


Thanks to mdf-blog.blogspot.com buat tutornya.
Source

Cara Membuat Widget Fixed Scroll

Cara Membuat Widget Fixed Scroll - Bingung mau ngasih judul apa di postingan ini, cuma intinya tips ini berguna buat sobat yang ingin menampilkan suatu widget di blog, entah widget di sidebar, menu atas, atau header, dll posisinya tetap berada diatas ketika mouse kita scroll kebawah.

Tips ini sangat berguna untuk menampilkan widget kesayangan sobat ataupun menu-menu andalan di blog, agar tidak kehilangan pandangan dari pembaca blog sobat, sehingga kemungkinan pengunjung akan melihat atau mengeklik widget tersebut sangatlah tinggi kemungkinanya.

Cara Membuat : Cara nya sangatlah mudah :

Pertama : Paste kode dibawah ini di atas tag </ body> dalam template Blogger sobat, kemudian paste kode dibawah ini diatasnya:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<SCRIPT>
$(document).ready(function() {
var div = $('#YOUR_WIDGET_ID');
var start = $(div).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(div).css('position',((p)>start) ? 'fixed' : 'static');
$(div).css('top',((p)>start) ? '0px' : '');
});
});
</SCRIPT>

Kedua : Ubahlah tulisan yang berwarna biru diatas, dengan widget ID sobat, misal ID Header-Wrapper atau Footer-Wrapper , dll.

Ketiga : Save dan lihatlah hasilnya.

Cukup sekian, terima kasih telah membaca artikel Cara Membuat Widget Fixed Scroll. Semoga artikel ini bermanfaat.


Source code : http://viralpatel.net

Cara Membuat Contact Form Melayang

Cara Membuat Contact Form Melayang - Haloo selamat siang sobat blogger, kali ini saya akan share mengenai tips membuat tampilan berbeda pada Contact form bawaan blogger. Contact form ini, biasanya umumnya kan di letakkan di bagian sidebar atau  pada halaman tersendiri atau halaman statis. Jika sobat merasa bosan soal tata letak contact form ini, mungkin bisa mencoba salah satu tips berikut, yaitu meletakkan contact form menjadi Floating atau melayang.

Screen Shot :

Cara Membuat :

1. Template sobat pertama kali harus sudah terpasang J Query, jika belum silahkan cari tutorial cara memasang J Query di blog.

2. Tambahkan Contact Form bawaan blogger di Add Gadget pada halaman pengeditan Layout.

3. Tambahkan kode berikut sebelum ]]></b:skin> :



/*Floating Contact Form by BloggerItems.com*/
.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #09f;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

4. Tambahkan kode berikut sebelum kode </body>
 

<script type='text/javascript'>
//<![CDATA[
/*Floating Contact Form by BloggerItems.com*/
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>

5. Save Template dan Selesai

Source

Manfaat Fungsi Hashtag Di Facebook

Fungsi Hashtag Di Facebook - Jika sobat aktif di Twitter pasti sudah tahu apa itu hashtag, dan sekarang ini fitur hashtag hadir telah di Facebook. Hashtag adalah kata-kata dan frasa yang diawali dengan simbol hash (#),dengan beberapa kata yang menyambung,seperti : #ESue346022 is my favorite PC game. Dengan menggunakan simbol hash di depan Esue346022,orang-orang dapat mencari isitilah #ESue346022 tersebut. Kata-kata yang di beri label ini akan muncul di hasil mesin pencari.

Hashtag Seperti yang sudah kita kenal di twitter sering di gunakan di twitter untuk mengkategorikan tweets, karena semua tweet dengan hashtag yang sama terkait. Oleh karena itu, mencari hashtags adalah cara yang baik untuk memantau topik panas atau tren. Misalnya #eyangSubur atau #AryaWiguna ,dan masih banyak lagi.

nah saat ini facebook akhirnya merangkul hashtag dengan tujuan mempermudah pengguna facebook untuk pengguna untuk menemukan konten yang sudah di Facebook.
sebagai contoh berikut
ketika saya klik hastag di status orang misal
eh sekarang fb udah bisa pakai #hestek
maka akan keluar semua hastag yang berkaitan dengan kata terebut

Fitur hashtag ini tentunya cukup memudahkan sebagai pencarian kata yg saling berkaitan.

Source

Plugin Feed Rotator Sidebar Blogspot

Plugin Feed Rotator Sidebar Blogspot  - Plugin ini akan menampilkan posting terbaru sobat dalam bentuk slide di sidebar blog sobat. Widget keren hasil kreasi DTE blog ini memang bisa menambah kesan elegant pada tampilan blog sobat. Kalau tidak percaya, langsung saja lihat live demonya :

Cara Memasangnya juga sangat mudah sob, tinggal tambahkan kode dibawah ini ke dalam Add Gadget HTML blog :

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://nama_blog.blogspot.com" // URL blog Anda
});
</script>

Konfigurasinya : Silahkan ganti alamat URL dengan URL blog sobat. Dan selesai

Cara Membuat Widget Posting Terbaru Berdasarkan Label

Cara Membuat Widget Posting Terbaru Berdasarkan Label  - Tips ini akan membuat blog sobat terkesan lebih rapi dan memudahkan pembaca untuk menelusuri artikel blog sobat. Pada intinya widget ini adalah widget recent post biasa, namun memiliki kemampuan untuk menggandakan diri agar bisa menampilkan daftar posting terbaru lebih dari satu buah berdasarkan label yang spesifik. Untuk lebih jelasnya silahkan lihat live demonya :

Cara Membuat :

Untuk memasang widget ini sangatlah mudah, sobat tinggal masuk Tata Letak blogspot dan tambahkan Add Gaget HTML, masukkan Kode dibawah ini :

<link rel="stylesheet" type="text/css" scoped="scoped" href="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.css"/>
<style type="text/css" scoped="scoped">
/* Custom CSS */
.list-entries {
  margin:5px;
  width:270px; /* Lebar widget */
  float:left;
  font-size:11px;
}
</style>

<div id="feed-list-container"></div>
<div style="clear:both;"></div>

<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Judul Widget 1",
            url: "http://nama_blog-1.blogspot.com",
            tag: "JQuery"
        },
        {
            name: "Judul Widget 2",
            url: "http://nama_blog-2.blogspot.com",
            tag: "CSS"
        },
        {
            name: "Judul Widget 1",
            url: "http://nama_blog-3.blogspot.com",
            tag: "Widget"
        }
    ],
    numPost: 4,
    showThumbnail: true,
    showSummary: true,
    summaryLength: 80,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Selengkapnya",
        endParam: "?max-results=20"
    }
};
</script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/multi-feed/multi-feed.min.js"></script>

Konfigurasi :

Opsi	Keterangan
feedsUri	Berupa array objek dimana di dalamnya terdapat beberapa data berupa name, url dan tag: name digunakan untuk menentukan judul widget, url digunakan untuk menentukan URL feed, tag digunakan untuk menentukan tag/label posting yang ingin ditampilkan.
numPost	Digunakan untuk menentukan jumlah posting yang ingin ditampilkan
showThumbnail	Ganti nilainya menjadi false untuk menyembunyikan gambar posting
showSummary	Ganti nilainya menjadi false untuk menyembunyikan ringkasan posting
summaryLength	Digunakan untuk menentukan jumlah karakter ringkasan posting
titleLength	Digunakan untuk memotong karakter judul posting yang terlalu panjang. Ganti nilainya menjadi angka untuk memotong karakter sebanyak angka tersebut, atau set sebagai "auto" untuk membiarkan judul posting sebagai apa adanya
thumbSize	Digunakan untuk menentukan ukuran thumbnail posting
containerId	Digunakan untuk menentukan ID kontainer yang akan digunakan untuk memuat widget
readMore	Terdiri dari text dan endParam. text digunakan untuk menentukan label tautan “Baca Selengkapnya” yang terletak di bawah masing-masing widget dan endParam digunakan untuk menentukan parameter akhir tautan tersebut (abaikan jika tidak perlu).

Tentukan label postingan mana yang akan sobat masukan di widget ini :

feedsUri: [
    {
        name: "Judul Widget 1",
        url: "http://nama_blog-1.blogspot.com",
        tag: "Blogger"
    },
    {
        name: "Judul Widget 2",
        url: "http://nama_blog-2.blogspot.com",
        tag: "WordPress"
    },
    {
        name: "Judul Widget 3",
        url: "http://nama_blog-3.blogspot.com",
        tag: "SEO"
    }
]

Setelah semua pengaturan selesai, klik save / simpan dan lihat hasilnya.

Source

Cara Membuat Widget Contact Form Super Keren

Cara Membuat Widget Contact Form Super Keren - Lagi-lagi soal contact form nih sob, kalau pada pos sebelumnya saya share cara memasang contact form di halaman statis kali saya akan share cara membuat contact yang keren banget deh pokoknya. Jujur saja saya baru lihat contact form buat blogspot yang sekeren ini. Saya ucapkan terima kasih buat kang ismet melalui blognya ww.bloggertut.com, yang telah membuat widget ini. Sebelum masuk ke cara pembuatan nya, silahkan sobat lihat live demonya :

Demo 1  Demo 2

Widget contact form ini memiliki dua pilihan warna, Dark background dan Light background, tinggal sobat sesuaikan saja dengan warna blog sobat. Dan untuk penempatanya, akan kita letakkan di halaman single post, bukan pada sidebar. Baiklah, berikut ini cara pembuatanya :

Untuk membuatnya silahkan ikuti langkah mudahnya:

Langkah 1 : Tambahkan Widget Formulir Kontak

Seperti biasa caranya, namun klik dulu Gadget Lainnya, baru Tambahkan Widget Formulir Kontak.





Widget ini jangan dihapus, nantinya akan kita sembunyikan dengan CSS. Penghapusan widget akan mengakibatkan form tidak berfungsi.

Langkah 2 : Buat Halaman Baru

Simpan kode di bawah ini pada mode HTML jangan Compose :

<div id="contact_wrap">
<h3>
Hubungi Kami</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" 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="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<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>

<style type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Langkah 3 : Tambahkan CSS (Untuk merubah Tampilan)

Untuk mempercantik tampilan, dan sekaligus menyembunyikan Contact form pada Widget di sidebar, simpan CSS dibawah ini di atas ]]></b:skin>

Light Background

/* CSS Contact Form Light Theme by BloggerTut.com */
#ContactForm1{
display:none;
}
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border-top:1px solid #dbdbdb;
border-right:1px solid #b2b2b2;
border-left:1px solid #dbdbdb;
border-bottom:1px solid #9d9d9d;
background-color:#cccccc;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#f2f2f2', endColorstr='#cccccc');
background-image:-webkit-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-moz-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-ms-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:-o-linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
background-image:linear-gradient(top, #f2f2f2 0%, #e6e6e6 50%, #cccccc 100%);
box-shadow: 1px 1px 5px #ccc;
}
#contact_wrap h3{
color: #e8f3f9;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #333 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #333;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoILzDjrS2J8mh9aiu22QH9iTiw3j0s4f3SWfPXJcUs-0qFgqfEN4iciF6J3gocYYNgtCdTx7yDc9Hn8irG5F3biSEhloayaUjeHKOVX4LbjnE_gko8es2RBhg2K1zrfIJ5pxKZ379-9w/s1600/user.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IJbeYOzxrgX9UE36hAXoAkh6YYngOwfw-C7NKswaUMpNv3yai5EV2l-gtQ1UWwztZ8iWvz6xGk4sqmP2TZsjHInh-vt2deHX6yJITtFF_0J_gDFoBplJ3kkonKrfQ-cHbDyb0kdCklg/s1600/pen.png)no-repeat 10px center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVugS95wRsQqVXs88_80U1nux77hLpFDenw4tGoddMCJ6H9iEOLNs5Sa_bprAsft9SPaEUU9VccoU-O2aBS_2zW6sduze8QjN2jmHu4VJa39rP18Y3bx1ZVDJ51FVujwVzXtX0iMrQrfw/s1600/msg2.png)no-repeat 10px 10px; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #f5f5f5 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 30px; 
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #3689b9;
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
background:#4c9bc9;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

Dark Background

/* CSS Contact Form Dark Theme by BloggerTut.com */
#ContactForm1{
display:none;
} 
#contact_wrap {
margin: auto;
width: 321px;
height: 380px;
padding: 25px;
border-radius: 1em;
border: #600 solid 1px;
border-bottom: #420000 solid 1px;
background-color:#983738;
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#bf5355', endColorstr='#983738');
background-image:-webkit-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:-moz-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:-ms-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:-o-linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
background-image:linear-gradient(top, #bf5355 0%, #a94244 50%, #983738 100%);
}
#contact_wrap h3{
color: #fff;
font-family:Georgia;
font-size: 20px;
font-style:italic;
font-weight:bold;
margin: 0 -36px 20px -36px;
padding: 12px;
text-align: center;
text-shadow: 2px 0 0 #3b5931;
-webkit-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
-moz-box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
box-shadow: inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #111;
background-color: #659156;
position: relative;
}
#contact_wrap h3:before {
content: ' ';
position: absolute;
bottom: -10px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: #000 transparent transparent transparent;
}
#contact_wrap h3:after {
content: ' ';
position: absolute;
bottom: -10px;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent transparent #000;
}
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background:#2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoILzDjrS2J8mh9aiu22QH9iTiw3j0s4f3SWfPXJcUs-0qFgqfEN4iciF6J3gocYYNgtCdTx7yDc9Hn8irG5F3biSEhloayaUjeHKOVX4LbjnE_gko8es2RBhg2K1zrfIJ5pxKZ379-9w/s1600/user.png)no-repeat 10px center; 
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 40px;
background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IJbeYOzxrgX9UE36hAXoAkh6YYngOwfw-C7NKswaUMpNv3yai5EV2l-gtQ1UWwztZ8iWvz6xGk4sqmP2TZsjHInh-vt2deHX6yJITtFF_0J_gDFoBplJ3kkonKrfQ-cHbDyb0kdCklg/s1600/pen.png)no-repeat 10px center; 
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 40px;
font-family:Arial, sans-serif;
background: #2b2e31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEzqAFpjhqisgVO5RCXbDPSidQhJ41yhhUUzu24E4J2simmhETABvkfucceeEJxrzBF-DlWMMRlVrk7NURDfzkq19LDdkEaQWNRReB7FocYedRJvc4epyMO9_4F1DxmLjp5QxK2tEam4o/s1600/msg.png)no-repeat 10px 10px; 
color:#d2d2d2;
border:1px solid #ce6d6e;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
box-shadow: rgba(0, 0, 0, 0.247059) 0px 1px 3px inset, #ce6d6e 0px 1px 0px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 30px; 
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
margin: 25px 0 3px 0 0;
background-color:#005a8a;
border-radius:4px;
text-shadow: 1px 0 0 #1f4962;
-webkit-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
-moz-box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
box-shadow: inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;
background-color: #659156;
border:1px solid #333;
}
#ContactForm1_contact-form-submit:hover {
background:#5d894d;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

Silahkan sobat pilih yang Light atau Dark untuk menyesuaikan dengan template sobat.
Baiklah, cukup sekian ya Cara Membuat Widget Contact Form Super Keren ini.
Semoga Bermanfaat

Source

Cara Memasang Contact Form Di Halaman Statis

Cara Memasang Contact Form Di Halaman Statis - Widget Contact Form adalah widget yang biasa kita gunakan untuk memfasilitasi pengujung blog yang ingin mengirimkan pesan kepada kita melalui email. Widget ini merupakan widget yang cukup penting untuk kita pasang di blog, sebagai sarana mendapatkan feedback dari pengunjung, apalagi buat sobat yang memiliki toko online, maka widget contact form ini sangatlah penting keberadaanya.

Kabar baiknya, saat ini blogspot sudah menyediakan widget contact form ini, kalau biasanya kita menggunakan pihak ketiga untuk membuat contact form, seperti menggunakan EmailMeForm, FoxyForm dsb. Pada tips ini, saya akan share bagaimana memasang widget contact form pada halaman statis. Kenapa di halaman statis ? Karena banyak pengguna blogspot, terutama saya, yang kurang suka apabila widget ini di letakkan di sidebar. Jika sobat mengalamai hal yang sama seperti saya, silahkan ikuti tutorial ini, bagaimana meletakkan widget contact form di halaman statis :

Langkah 1 : Tambahkan Widget Contact Form Blogger

Untuk menambahkannya, masuk ke Setelan ► Tata Letak ► Tambahkan Gadget ► Gadget Lainnya ► Formulir Kontak

Untuk sementara biarkan Contact Form ada di widget / sidebar.

Langkah 2 : Tambahkan Halaman

Untuk menambahkannya, masuk ke Laman ► Laman baru ► Laman kosong. Tambahkan kode dibawah ini pada mode HTML bukan Compose

<form name="contact-form">
<p></p>
Nama
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
<p></p>
Alamat Email <span style="color: red; font-weight: bolder;">*</span>
<p></p>
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
<p></p>
Isi Pesan <span style="color: red; font-weight: bolder;">*</span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<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 type="text/css">
/* Menyembunyikan elemen dalam postingan */
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Pada Menu Pilihan, pilih Tekan "Enter" untuk baris baru.

Klik Publikasikan.

Langkah 3 : Meyembunyikan Widget dan Menambahkan CSS

Langkah ini adalah untuk menyembunyikan contact form yang ada di sidebar dan memodifikasi tampilan contact form. Tambahkan kode ini di atas ]]></b:skin>

/* CSS Contact Form */
#ContactForm1{
display:none;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width: 300px;
height:auto;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{
background: #fffff7;
}
#ContactForm1_contact-form-email-message{
width: 450px;
height: 175px;
margin: 5px auto;
padding: 10px;
background: #f2f2f2;
border: 1px solid #ccc;
color:#777;
font-family:Arial, sans-serif;
}
#ContactForm1_contact-form-submit {
width: 101px;
height: 35px;
float: left;
color: #FFF;
padding: 0;
margin: 10px 0 3px 0 0;
cursor: pointer;
background: #5E768D;
border: 1px solid #556f8c;
border-radius:3px;
}
#ContactForm1_contact-form-submit:hover {
background:#435c74;
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 450px;
margin-top:35px;
}

Okey, cukup sekian sob, semoga tutorial Cara Memasang Contact Form Di Halaman Statis ini bermanfaat.

Source : blog.kangismet.net