Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts
Form Contact Us merupakan pilihan salah satu pilihan para pengunjung blog untuk berkomunikasi terhadap para penulis artikel .
Pada kali ini kami akan memberikan cara membuat layanan contatct us kepada sobat sekalian supaya bisa membantu para visitor sobat untuk berkomunikasi terhadap sobat.
Keuntungan menggunakan form ini :
- Pengunjung dapat menyampaikan pertanyaan dengan topik dari salah satu artikel di blog anda dan jika anda dapat menjawab pertanyaan tersebut maka pengunjung akan merasa senang karena pertanyaannya dijawab dan mungkin pengunjung tersebut akan sering mengunjungi blog Anda.
- Pengunjung juga dapat memberi kritik dan saran dimana secara tidak lansung akan membuat Anda mengembangkan blog agar dapat lebih baik lagi demi kenyamanan pengunjung.
- Layanan contact person ini juga salah satu yang harus blog Anda miliki jika ingin di setujui oleh Google AdSense.
Cara membuat layanan Contact Us ada banyak macam. Bisa dibuat sendiri jika menguasai script HTML, atau juga menggunakan layanan gratis di internet ataupun menggunakan widget gratis dari blogspot.
Langkah-langkah berikut ini :
- Kunjungi 123ContactForm.com
- Buatlah akun dengan mengklik tombol SIGN UP FOR FREE
- Pilih pendaftaran yang gratis saja dan klik SIGN UP
- Isi formulir akun jika sudah klik Create Account.
- Selanjutnya, Anda akan diminta untuk memilih layanan apa yang akan digunakan. 123ContactForm memberi banyak layanan, namun karena kita sekarang membuat contact form, maka pilih Contact Form disebelah kiri.
- Setelah memilih Contact Form, Anda akan diminta untuk membuat nama dari halaman kontak yang anda buat, seperti : Contact Us atau Contact Form atau yang lainnya.
- Silahkan Anda edit contact form tersebut menggunakan tools yang ada di sebelah kiri, Anda bisa menambahkan atau menghapus field. Jika selesai mengedit, klik CONTINUE untuk menuju ke langkah selanjutnya.
- Kemudian Anda akan diminta untuk menotifikasi email jika ada yang menggunakan form Anda. Jika sudah melakukan perubahan, klik SAVE lalu Continue.
- Langkah terakhir, Anda tinggal copas code scirpt HTML contact form nya, klik pilihan Blogger yang ada di sebelah kiri, lalu copy code script HTML tersebut kedalam blog Anda.
Modelnya pun cukup beragam, ada yang berbaris kesamping, ada pula artikel terkait yang memanjang kebawah. Untuk tutorial kita kali ini, kita akan membuat related post yang bentuknya memanjang kebawah dengan maksimal 5 tulisan.
Ikuti langkah-langkah brikut ini :
- Login ke Blogger.com , pilih menu Tema > Edit Html
- Setelah itu cari code </head> dengan cara CTRL + F untuk lebih cepat cari code
- Jika sudah ketemu code tadi silahkan copy script dibawah ini dan letakkan sesudah code </head>
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>
 |
| Contoh Tata Letak Menaruh Script |
- Cari code <data:post.body/> , kemudian copy script dibawah ini dan letakkan dibawah kode <data:post.body/>
Note : Jika menemukan dua <data:post.body/> letakkan script ke code yang pertama.
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>
 |
| Contoh Tata Letak Menaruh Script |
Khusus tulisan berwarna merah pada script bisa diganti sesuai keinginan. Setelah semua beres, jangan lupa menyimpannya dengan menekan tombol Simpan Template, lalu kembali ke blog Anda. Refrest dan kini related post atau artiker terkait akan segera muncul.
 |
Dalam pembuatan postingan blog tentunya sebagai blogger ingin menampilkan halaman blognya menarik, terkadang disaat kita ingin menyisipkan sesuatu didalam postingan seperti memasang text link, memasang script HTML, dan lain sebagainya. Namun itu semua tidak bisa didapatkan secara otomatis dari blogspot, maka caranya yaitu dengan kita membuat sendiri. Bagi Anda yang masih bingung dan tidak tahu caranya, disini saya akan membagikan cara mudah membuat kotak script pada postingan blog. Sebelum ke langkah-langkah pemasangannya, saya akan memberikan beberapa kriteria atau tampilan kotaknya sesuai style nya masing-masing, bisa Anda lihat contohnya dibawah ini.
1. Style Minimalis
1. Style Minimalis
<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">Pasang Kode Script Anda Di Sini</div>
2. Style Left Border
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #FEBF80; border-left: 5px solid #FF3300; border-radius: 10px; padding: 10px; t-align: left;">Pasang Kode Script Anda Disini</div>
3. Style Dotted
<div style="background-color: #d580fe; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">Pasang Kode Script Anda Disini</div>
4. Style Double
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Pasang Kode Script Anda Disini</div>
5. Style Dashed
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed
#aaa; padding: 10px; t-align: left;">Pasang Kode Script Anda Disini</div>
#aaa; padding: 10px; t-align: left;">Pasang Kode Script Anda Disini</div>
6. Style Scroll
<div style="background-color: #82cafa; border: 2px #006400 solid; height: 50px; overflow: auto; padding: 10px; text-align: left; width: 300px;">Pasang
Kode Script Anda Disini</div>
Kode Script Anda Disini</div>
Cara Membuat Kotak Script Postingan
Untuk memasang kotak yang ada di dalam postingan, baik itu digunakan untuk menempatkan kode script ataupun informasi-informasi yang lain. Disini saya bagikan beberapa kriteria bentuk kontak dan tampilannya, silahkan disesuaikan dengan selera Anda sendiri ingin menggunakan yang mana. Dalam pemasangannya pun sangat mudah, silahkan ikuti langkah-langkahnya berikut ini :Langkah ke #1. Silahkan buka postingan baru yang ingin Anda pasang kotak didalam postingannya, selanjutnya ketikan text pada posisi "Compose"
Langkah ke #2. Selanjutnya copy salah satu kode script diatas sesuai keinginan Anda, kemudian letakan kode script tepat dibawah text yang Anda tulis tadi, dan harus dalam posisi edit "HTML".
Langkah ke #3. Setelah Anda memasang kode script untuk kotaknya, selanjutnya silahkan Anda isikan kode script atau informasi lain yang di inginkan.
Bagaimana mudah bukan?, Sekian dulu uraian dari saya dalam pembahasan mengenai cara mudah membuat kotak script pada postingan blog, semoga pembahasannya ini bisa bermanfaat dan selamat mencoba.
Source : kanguem
Untuk Memasang Fanspage Facebook di Blog terlebih dahulu anda harus memiliki fans page facebook tentang blog anda. Fans page facebook dapat memudahkan anda untuk promosi blog, promosikan postingan blog agar dapat pengunjung organik dari facebook sehingga menjadikan blog mudah dikenal orang dan banyak pengunjung.
Facebook merupakan media sosial yang sangat populer di Indonesia dan juga belahan dunia sehingga dengan mudah kita bisa membuat fans page facebook untuk blog dengan jumlah like yang sangat banyak dan bisa dikatakan media promosi yang sangat ampuh apalagi anda yang Bisnis Online dengan membuat Online Shop atau Toko Online.
Semakin banyak penggemar fans page yang like halaman facebook maka semakin baik, ini dapat dilihat tingkat populer blog yang bermanfaat dengan konten yang berkualitas. dengan memiliki blog yang kaya konten dan artikel yang bermanfaat untuk orang banyak rasanya sayang kalau tidak dipopulerken dengan facebook, karena dengan 1 like facebook maka akan ada banyak pemberitahuan dan nantinya akan mendatangkan like fans page juga.
Langkah langkah
- Login ke Blogger.com
- Kemudian pilih menu Tata Letak > Tambahkan Gatget > HTML/JavaScript
- Kemudian copy code berikut ini
<iframe name="f2579ef3ff88908" width="320px" height="1000px" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" title="fb:page Facebook Social Plugin" src="https://www.facebook.com/v2.5/plugins/page.php?adapt_container_width=true&app_id=&channel=http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FXBwzv5Yrm_1.js%3Fversion%3D42%23cb%3Df4389127ece03c%26domain%3Dwriteup-wiechan1906.blogspot.com%26origin%3Dhttp%253A%252F%252Fwriteup-wiechan1906.blogspot.com%252Ff144bab2ba048c4%26relation%3Dparent.parent&container_width=320&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2FWieChanJatim%2F&locale=en_US&sdk=joey&show_facepile=true&small_header=false&width=320" style="border: none; visibility: visible; width: 320px; height: 214px;" class=""></iframe>
Note : Ubah tulisan merah dengan username fanspage sobat Bagus 98 . letak username fanspage bisa dilihat di gambar brikut ini
- Hasilnya akan tampak seperti gambar berikut ini
Itulah pembahasan seputar cara menampilkan FansPage di blog/web. Semoga bermanfaat.
Menyematkan kotak dalam tulisan blog terlihat menarik dan indah. Banyak blogger menggunakan kotak dalam postingan untuk menaruh informasi penting, salah satunya adalah script HTML, Java dan sebagainya. Namun kotak yang disematkan dalam postingan ini tidak disediakan defuld oleh blogspot, olehnya itu kita dituntut membuatnya sendiri. Caranya mudah, ikuti langkah-langkah berikut ini.
- Login ke Blogger.com dan buat postingan
- Copy Scrip dibawah ini
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">Sobat Bagus 98 ( ubah tulisan merah sesuai keinginan )</div>
- Pilih mode HTML kemudian pastekan scripnya seperti gambar dibawah
- kembali ke Compose untuk melihat kotaknya akan seperti gambar dibawah
- Selanjutnya sobat Bagus 98 tinggal mengubah "Sobat Bagus 98 ( ubah tulisan merah sesuai keinginan )" Dengan tulisan maupun scrip yang ingin digunakan didalam kotak tersebut , tentu mudah bukan ?
Penjelasan Tentang Scriptnya
<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">Sobat Bagus 98 ( ubah tulisan merah sesuai keinginan )</div>
text-align: left;">Sobat Bagus 98 ( ubah tulisan merah sesuai keinginan )</div>
- border 3px = Ketebalan kotak script
- #1780dd = warna kotak script
- padding: 10px = Panjang kotak kebawah untuk lebarnya otomatis ke ujung
- Background-color#ffffff = Warna dalam kotak
- text-align: left; = Posisi tulisan didalam kotak kiri
- Double; = Bentuk Kotak ( Bisa diganti dengan kode brikut ini atau dihilangkan juga bisa )
Sobat Bagus 98 ( Dashed )
Sobat Bagus 98 ( Dotted )
Sobat Bagus 98 ( Groove )
Sobat Bagus 98 ( Inset )
Sobat Bagus 98 ( Outset )
Sobat Bagus 98 ( Ridge )
Sobat Bagus 98 ( Solid )
Nah itulah penjelasajan code HTML untuk membuat kotak dalam postingan . bisa dimodifikasi sesuai selera
Sumber : Google.com
Langkah Langkah Membuat Tombol Download Ala Arlina
- Buka Blogger.com
- Buka menu tema kemudian edit html .
- Kemudian cari code ]]></b:skin> untuk mempercepat pencarian klik CTRL + F
- Jika sudah menemukan code ]]></b:skin> Copy code dibawah ini dan letakkan di atas code ]]></b:skin> kemudian simpan tema
#wrap {
margin: 20px auto;
text-align: center;
}.btn {
display: inline-block;
position: relative;
font-weight: 700;
background: #3cc091;
padding: 9px 18px;
margin: 0 3px;
border-radius: 3px;
opacity: 1;
border: 0;
text-transform: uppercase;
transition: all .3s ease-out;
}.btn:hover, .btn:active {
background: #374760;
}
a.btn {
color: rgba(255,255,255,1);
}
- Sekarang sobat tinggal buat postingan dan pada halaman postingan sobat bagus 98 silahkan pindah dari Commpose ke HTML yang ada pada bagian pojok kiri atas dan pastekan code berikut ini
<div id="wrap"> <a class="btn" href="Link bray" rel="”nofollow”" target="_blank">Direct<i class="fa fa-paper-plane"></i></a></div> <a class="btn" href="Link bro" rel="”nofollow”" target="_blank">Download<i class="fa fa-download"></i></a>
- Silahkan ubah tulisan Kuning "Link Bray / Bro" dengan link sobat Bagus 98
- Silahkan ubah tulisan Merah dengan kemauan sobat Bagus 98
- Jika sudah semua kemudian pertinjau / Publikasikan . tidak lebih tampilanya akan seperti ini
Subscribe to:
Posts (Atom)
