Kumpulan Kode Html Javascript Untuk Edit Tampilan Blog




Kumpulan Kode Html dan Javascript Untuk merubah tampilan blog di blogger  bagi pemula yang ingin berkereasi.Hellow sahabat blogger ,selamat datang di blog ini.Pada kesempatan kali ini saya akan membagikan artikel baru yang berjudul kumpulan kode Html atau Javascript untuk blogger pemula seperti saya ini,
Mungkin ini akan sangat panjang sekali ,karena saya akan mencoba merangkum semuanya menjadi satu postingan.Dengan cara saya akan mencari informasi mengenai blogger dan akan membuatnya sebagai postingan blog ini.Mungkin bisa saja ini kekurangan materi,Namun berhubung blog ini baru ,jadi saya memostingnya juga harus dengan serapi-rapi mungkin agar lebih bagus ,dan tentunya tidak kalah dengan blog teman-teman lainnya.Hanya saja blog ini mungkin akan memakai domain blogspot saja,karena belum mempunyai dana untuk membeli sebuah doamin Top Level.

Inilah daftar Kode script Untuk blog blogger bagi pemula.


1.Cara memasang Notifikasi leave this page saat hendak keluar dari sebuah postingan suatu Blog.
-Langkah pertama silahkan copy paste kode script berikut.

<script language="JavaScript"> window.onbeforeunload = confirmExit; function confirmExit() { return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
</script>
"Tulisan berwarna hijau silahkan di ganti dengan tulisan berdasarkan kemauan anda"
-Langkah kedua tempat pemasangan:
  • Tata letak / layout
  • Tambahkan widget / add widget
  • Html / javascript (paste) dan save
-Langkah terakhir,untuk melihat hasil silahkan close browser dan lihat notifikasinya.




2.Cara memasang kode script Anti adBlocker universal pada blog.

-Langkah pertama silahkan copy paste kode script di bawah ini.

<script>
    window.onload = function(){
    setTimeout(function() {
    var ad = document.querySelector("ins.adsbygoogle");
    if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
    ad.style.cssText = 'display:block !important';
    $(".adsbygoogle").after('<img src="https://4.bp.blogspot.com/-BpExHF0ajt4/Wl1nbB8HfGI/AAAAAAAAELA/CMzkBSPjmi4kQvqOwAlc_nhbio_RHmVXwCLcBGAs/s320/anti-ablock.jpg" alt="anti-adblock" width="300" height="250"/>');
    }
    }, 1000);
    };
</script>
<script async='async' src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

-Langkah pemasangan selanjutnya adalah
  • Pastekan kode script di atas tepat di atas tag </body> 
  • atau bisa juga dengan tambahkan gadget ,Html/javascript
Note:

-Url link dapat di ganti dengan url gambar yang anda mau (Link berwarna hijau)
-widht dan height dapat di ubah sesuai selera
-1000 : 1 detik delay setelahnya gambar baru bisa muncul


3.Cara membuat Link Open New Tab dengan mudah.

-Langkahnya adalah dengan menggunakan html seperti di bawah ini:
<a href="https://dewainside.blogspot.com" target="_blank" rel="nofollow" title="dewa inside blog">Judul Link</a>
Note:
target blank :Open new tab link
Rel noffolow : Link yang menuju situs lain
Title:Judul link yang kena cursor mouse pada pc


4.Kode Html/Script sitemap untuk blogger atau blog baru dibuat.
Membuat sitemap untuk blog dengan sangat mudah dan simpel yang di mana tampilannya hanya satu baris ke bawah,dan work alias tidak erorr jika di pasangkan pada blog dan berikut ini adalah langkah-langkahnya:

-Langkah pertama ,Silahkan copy code script di bawah ini.

<style type="text/css">
#toc{width:99%;margin:5px auto;border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);}
.labl{color:#FF5F00;font-weight:bold;margin:0 -5px;
padding:1px 0 2px 11px;background: #3498DB;
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;}
.labl a{color:#fff;}
.labl:first-letter{text-transform:uppercase;}
.new{color:#FF5F00;font-weight:bold;font-style:italic;}
.postname{font-weight:normal;background:#fff;margin-left: 35px;}
.postname li{border-bottom: #ddd 1px dotted;margin-right:5px}
</style><br />
<div id="toc">
<script src="https://cdn.jsdelivr.net/gh/penaindigo/Pena-Indigo-Code@a134f9def601a6f77332eccc35d3d20e0d3c7e49/sitemappenaindigo.js" type="text/javascript"></script><br />
<script src="/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script></div>

-Langkah kedua cara pemasangannya adalah: Silahkan buka blogger,Pilih halaman atau pages,Klik new page ,buat judul sitemap ,pilih mode Html dan save







5.Kumpulan Kode script untuk membuat kotak area tempat menaruh kode html,Css,Javascript dan tulisan biasa,Namun ini yang versi keren atau bagus saja.

Cara membuat kotak area pada saat menulis posting pada blog memang sudah di publikasikan caranya sangat dulu,Namun disini saya kembali memposting ulang mengenai hal itu dan inilah Daftar kelima dari kumpulan kode html javascript untuk blogger pemula.
Inilah kode untuk membuat kotak area copy paste pada blog yang bagus dan keren:
1.Kotak solid-samping kiri/t-align left)
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 5px solid red; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;">TULISAN DISINI </span>
2.Kotak script warna Green  (text align -left)
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: #6ddb98; border-left: 7px solid green;  padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: 'Trebuchet MS', sans-serif;">TULISAN DISINI </span></div>
3.Kotak Sederhana dengan ghostwhite
<div style="-moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-left: 7px solid rosybrown; padding: 20px; t-align: left;">
<span style="color: black;"><span style="font-family: &quot;trebuchet ms&quot; , sans-serif;">TULISAN DISINI </span>
4.Kotak dengan radius border 4px 
<div style="-moz-border-radius: 8px; -webkit-border-radius: 8px; background-color: aliceblue; border-radius: 8px; border: 4px solid #999; padding: 10px; t-align: left;">
TULISAN DISINI</div>
5.Kotak dengan border padding-outset/t-align 10px
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: darkturquoise; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">
TULISAN DISINI&nbsp;</div>
6.Kotak dengan border radius 20px,-border left-right 10px, back ground.
<div style="-moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: ghostwhite; border-left: 10px solid gray; border-radius: 20px; border-right: 10px solid gray; padding: 20px;">
TULISAN DISINI</div>
7.Kotak script border-top
<div style="-moz-border-box: 10px; -moz-border-box: 10px; -webkit-border-box: 10px; background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left; t-color: #CCFFFF;">
TULISAN DISINI</div>
8.Kotak radius 10 px webkit-border-doble 4px
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: lightskyblue; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">
TULISAN DISINI</div>
9.Kotak border-dotted 2pk dan warna bisa disesuaikan.
<div style="background-color: lightcyan; border: 2px #1b1a76 dotted; padding: 10px; text-align: left;">
TULISAN DISINI</div>
10.Kotak area copy paste scroll ke bawah suport tempat template dan html atau Css
<div style="background-color: antiquewhite; border: 2px solid blue; height: 100px; overflow: auto; padding: 5px; width: auto;">
TULSAN DISINI
"A
B
C"
</div>
Tips:Untuk cara pemasangan Kotak area copy paste pada blog,Langkahnya adalah pilih mode HTML terlebih dahulu dan pastekan kode java script kotak area di atas,Jika sudah,Kemudian klik mode COMPOSE untuk melanjutkan menulis posting dan hapus TULISAN INI pada kotak area yang muncul ,di ganti dengan kata atau pastekan kode html/javascript lainnya.


6.Cara membuat Tombol Berlangganan atau subscribe yang bagus dan keren pada blog



Cara untuk membuat widget atau tombol berlangganan yang modelnya bagus pada blog sangat mudah untuk di buat dan berikut ini adalah langkahnya sebagai berikut.
-Langkah pertama silahkan kunjungi blogger
-Pilih tata letak
-Tambahkan ikuti lewat email
jika sudah di atas ,maka selanjutnya adalah mengunjungi feedburner.com ini bertujuan untuk melihat Id blog anda pada feedburner seperti gambar di bawah ini.


Nah langkah selanjutnya adalah memasang kode script berlangganan tersebut seperti di bawah ini.
-Langkah pertama buka blogger
-klik layout atau tata letak 
-Pilih HTml/javascript Dan pastekan kode berikut ini.

<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
</style>
<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
<p>Dapatkan Update Terbaru Inaj sense Blog !!</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=InajSenseBlog" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=InajSenseBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="bloggertrix" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukkan email anda disini"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="BERLANGGANAN" /></form>
</div></div></div>

-Dan terakhir silahkan lihat sendiri hasilnya,lumayan bagus dan silahkan di ganti ID bertulis warna kuning di ganti dengan Id blog anda






7.Cara membuat Tombol keren dan Bagus pada Blog seperti  Tombol [ Download ,Live demo ,Preview ,Dll ]
Cara mudah membuat tombol seperti download ,live demo pada postingan blog blogger,dan berikut ini adalah langkahnya sebagai berikut:



-Langkah pertama silahkan Copy paste kode Html berikut dengan cara,Masuk ke blogger,theme ,edit template dan paste di bawah ]]></b:skin>


/* -- Button DEMO and DOWNLOAD--*/
.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 }

-Langkah selanjutnya klik svae atau simpan pada template.
-Langkah terakhir ,ketika ingin menampilkannya pada postingan ,silahkan copy kode Html di bawah ini dengan pilihan HTML saat menulis posting.

<div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="http://inajesense.blogspot.com/" target="_blank">Demo</a></li>
<li><a class="download" href="http://inajesense.blogspot.com/" target="_blank">Download</a></li>
</ul>
</div>
Note:Silahkan ganti texs berwarna biru dengan alamat blog anda dan juga Demo/download 

8.Cara membuat menu sticky dengan sangat mudah pada Blog.
Menu sticky adalah tampilan pada bagian sisi widget seperti navigasi dan pages,ketika kusros di geser pada perangkat Pc maka menu yang di taruhkan html sticky akan berhenti atau melayang,tidak ikut bergerak.Menu ini sering di temukan pada blog atau website yang banyak pengunjungnya.
Berikut ini langkah untuk memasangkan blog menu sticky.

-Langkah pertama silahkan copy paste kode HTML di bawah ini pada template tepat di atas ]]></b:skin>


.sticky {
  position:fixed;
  top:10px;/* jarak dari atas*/
  z-index: 100;
}

-Jika sudah,silahkan klik save,dan langkah selanjutnya adalah copy kode html yang di pastekan tepat di atas tag </body>


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

-Ganti HTML 1 Dengan ID widget yang akan di buat menjadi menu sticky,dan klik save ,langsung lihat hasilnya.



Nah semua kode Html Dan javascript di atas,silahkan di coba pada blog anda ,karena ini semua saya dapatkan dari blog para master-master yang sering muncul di pageone google,Saya masuk ke blog nya dan mulai memulung ilmu tentang code-code html untuk blog dengan berbagai fungsi ,itu tergantung selera,Itualah di atas kumpulan kode html dan javascript untuk blogger yang mungkin sangat berperan penting untuk tampilan blog anda,baik dari segi Seo atau syarat Google adsense.



Artikel Terkait

Postingan populer dari blog ini

Begini Cara Memasang iklan penelusuran bersponsor google adsense Di Blog

Membuat Related Post Grid Untuk Template AMP Blogger

Cara Mengatasi Gagal Install Driver VGA Pada windows 7 All version

Cara membuat Link Model no follow dan Do follow

Cara Membuat Akun Google Adsense Hosted Terbaru

Tutorial Full Flash Smartphone OPPO A37 ,Lupa Pola

Cara Menampilkan Traffic Data Koneksi Internet Pada Laptop

Cara memasang artikel "Baca juga" ditengah postingan blog

Cara Mengatasi Tombol Edit Yang Hilang Pada Tata Letak Blog