Mempercantik Blog Dengan Membuat Halaman Intro

Mempercantik Blog Dengan Membuat Halaman Intro.Dan Sekarang Blog Sukarim Akan Berbagi Artikel Lagi Dengan Mempercantik Blog, membuat Halaman Intro Buat Sobat Yang ingin memasangnya Siahkan Simak. Awalnya sich... Mencari Di Mesin Pencarinya Mbah Google..., ya iseng - iseng cari dan mencari Dengan Kata Kunci “Mempercantik Blog Dengan Halaman Intro” pada akhirnya ketemu di Blog Sebelah Punya Kang Roni.
Baiklah Tidak Panjang Lebar Langsung Saja, saya Akan Kasih Tau Caranya Buat Sobat Yang ingin Memasangnya. Untuk Lihat Demonya Disini Atau Klik Disini.

Cara Membuat Halaman Intro Di Blog Sebagai Berikut :

1. Pertama Login Ke Blogger ~>Buka Rancangan/Desain  ~> Edit HTML

2. Download Template Lengkap Sebelum mengedit template Sobat

3. Beri Centang Pada Kotak Expand Template Widget

4. Cari kode ~>]]></b:skin> Jika Sobat Menggunakan Firefox, sebelumnya Sobat Klik Tombol ( F3 ) Maka Akan Muncul Kotak Pencarianya Seperti Contoh Gambar Di Bawah ini.( Klik Gambar Untuk Memperbesar )

Setelah Ketemu Copas Kode Dibawah ini Tepat Di Atas Kode~>]]></b:skin>
Biar Jelasnya Bisa Sobat Lihat Pada Contoh Gambar Di Bawah

#intro{ background:#CAD8C9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9GfU2nWsQSsBrFkxb6dn0H45xvrqaG2aHKTx17jShHCp7K1dIY-f6Znsbgc-vpffRJQxBlu2ptFdc9YKnMJwBCw0Mbdn4Vax9WPn-XXQuuqH9pzTrobxMoeImXCmQk7BjIP-7Gjj8hMfN/s1600/latar_thumb.jpg) repeat-x top left fixed; position:fixed; width:100%; height:100%; margin:0; padding:0; z-index:100; text-align:center; visibility:hidden; } * html #intro{ position:absolute; width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); } #intro .welcome{ color: rgb(255, 0, 0); font-weight: bold; font-style: italic; font-size:30px; margin-top:10%; margin-bottom:1%; text-shadow:1px 1px 1px #fff; } #intro a img{border:none} .gohome, .gohome a,.gohome a:visited,.gohome a:active{ color: rgb(255, 0, 0); font-weight: bold; font-style: italic; margin-top:4%; font-size:25px; text-shadow:1px 1px 1px #fff } .gohome a:hover{ color:#ffffff; text-shadow:1px 1px 1px #f00; text-decoration:none }

5. Langkah Berikutnya Sobat Cari Kode ~> </head>
Setelah ketemu  Copas Kode Dibawah ini Tepat Di Atasnya
Biar Jelasnya Bisa Sobat Lihat Pada Contoh Gambar Di Bawah

<script type='text/javascript'> //<![CDATA[ /*********************************************** * Blogger intro by http://sukarim.blogspot.com **************************************************/ var persistclose=1 var startX = 0 var startY = 0 var verticalpos="fromtop" function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body} function get_cookie(Name) { var search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) }}return returnvalue;} function closebar(){ if (persistclose) document.cookie="remainclosed=1" document.getElementById("intro").style.visibility="hidden";} function staticbar(){ barheight=document.getElementById("intro").offsetHeight var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera; var d = document; function ml(id){ var el=d.getElementById(id); if (!persistclose || persistclose && get_cookie("remainclosed")=="") el.style.visibility="visible" if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";} el.x = startX; if (verticalpos=="fromtop") el.y = startY; else{ el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight; el.y -= startY; } return el; } window.stayTopLeft=function(){ if (verticalpos=="fromtop"){ var pY = ns ? pageYOffset : iecompattest().scrollTop; ftlObj.y == (pY + startY - ftlObj.y)/0;} else{ var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight; ftlObj.y == (pY - startY - ftlObj.y)/0; } ftlObj.sP(ftlObj.x, ftlObj.y); setTimeout("stayTopLeft()", 10); } ftlObj = ml("intro"); stayTopLeft();} if (window.addEventListener) window.addEventListener("load", staticbar, false) else if (window.attachEvent) window.attachEvent("onload", staticbar) else if (document.getElementById) window.onload=staticbar //]]> </script>

6. Langkah untuk Membuat Halaman Intro, selanjutnya sobat cari kode ~> <body> Atau </body>
Setelah Ketemu,  Copas Kode Dibawah ini Tepat Dibawah Kode <body> Atau </body>
Biar Jelasnya Bisa Sobat Lihat Pada Contoh Gambar Di Bawah

<div id='intro'> <div class='welcome'> Selamat Datang Di Blog Sukarim</div> <a href='' onclick='closebar(); return false'><img alt='?? ??????' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYbZUWkCDoUQQPy48fgZZeRV0h7I8Z4thvmui1WYQZFywTIAeE80u9oXUJSkr8eL35F_AWKcUf2EwrTks-twlG-vqDOijyBR-YoatNxPAQ5d2nn_QNCdTxBjXe8XXgJ63lQne93SzsJoA/s1600/peta_indonesia.jp' title='TULISAN MUNCUL'/></a> <div class='gohome'> <a href='' onclick='closebar(); return false'>KLIK DISINI</a></div> </div>

7. Selanjutnya Save Atau Simpan Template. Biar Jelasnya Bisa Sobat Lihat Pada Contoh Gambar Di Bawah

Dan yang terakhir Sobat bisa lihat hasilnya untuk tips Mempercantik Blog Dengan Membuat Halaman Intro.

Keterangan: Untuk tulisan Atau Kode ini “Selamat Datang Di Blog Sukarim”  bisa sobat ganti dengan kata - kata yang sobat inginkan dan kode yang ini “https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYbZUWkCDoUQQPy48fgZZeRV0h7I8Z4thvmui1WYQZFywTIAeE80u9oXUJSkr8eL35F_AWKcUf2EwrTks-twlG-vqDOijyBR-YoatNxPAQ5d2nn_QNCdTxBjXe8XXgJ63lQne93SzsJoA/s1600/peta_indonesia.jp”  adalah gambar untuk Halaman Intro,.. sobat bisa menggantinya untuk menyesuaikan tema Blog Sobat,.. atau juga Sobat Bisa Menggantinya Dengan almat dibawah ini :

“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO4s29nMBJN8Yj4N_3UW33fGAwlzBhQXnzmUpI0Dd_FfNT9PJ9T_YUqNBB37OfkO1z8Q9cJnIZa6fao2y0oJFdVunF2Ozk8pnZ5dBrEZSCHje0QnyphPW0yQUQYqWtzEeAw9vXYWdhdCvP/s1600/gambar-peta_indonesia.jpg”


     Itu Terserah Sobat Mau Pilih Yang Mana, atau Buat Sendiri.

Copas Dari Link Sumber = Kang Roni Blog | Tutorial blog | optimasi seo

Semoga artikel Mempercantik Blog Dengan Halaman Intro, bermanfaat buat sobat.., terima kasih By Sukarim.