Test Slide
-
Title #1
Content Text...
-
Title #2
Content Text...
-
Title #3
Content Text...
-
Title #4
Content Text...
Modern T
Modern T
Live Preview Download BuzzMag is a high quality, use-friendly, creative corporate business blog blogger template.
Live Preview Download BuzzMag is a high quality, use-friendly, creative corporate business blog blogger templ...
Live Preview Download Viral Mag is a multipurpose magazine blogger template that allows you to create a fully functional viral site in a few simple steps.
Live Preview Download Viral Mag is a multipurpose magazine blogger template that allows you to create a fully fun...
-
Title #1
Content Text...
-
Title #2
Content Text...
-
Title #3
Content Text...
-
Title #4
Content Text...
Cara Buat Toko Online
Cara Buat Toko Online
Ecommerce Website Online Store
Published on Jan 13, 2016 Learn to create an eCommerce website from scratch with WordPress. No coding or experience ...
1. Silahkan loggin ke blogger dengan akun blog anda. 2. Klik button icon PENSIL pada blog yang ingin anda tambahkan artikel.
Persiapan Sebelum Mengganti icon blog : Pertama anda harus menyiapkan ICON persegi ( harus persegi )
Kenapa saya harus mengganti template? Agar tampilan blog anda lebih fresh dan menarik.
free-cpanel-hosting
cpanel + hosting
cpanel + hosting
Free CPanel Hosting We offer you unique feature that no one else can give you - free web hosting account with Basic CPanel control panel
EXAMPLE>>> http://ainunx.thefreecpanel.com/ Features you will Enjoy Free Site Builder Don't know how to code your...
-
Title #1
Content Text...
-
Title #2
Content Text...
-
Title #3
Content Text...
-
Title #4
Content Text...
-
Title #1
Content Text...
-
Title #2
Content Text...
-
Title #3
Content Text...
-
Title #4
Content Text...
Videos News
Videos News
AccessPress Store - How to set HomePage
AccessPress Store – A next generation WooCommerce theme fully built in customizer! We call it next generation because it i...
-
Title #1
Content Text...
-
Title #2
Content Text...
-
Title #3
Content Text...
-
Title #4
Content Text...
Chatbox Slide Vertikal Dengan jQuery di Blog
Oke, tidak pakai lama, langsung saja ke langkah-langkah pembuatannya :
- Login ke Blogger dengan akun anda.
- Kemudian pilih Rancangan >> Edit HTML
- Seperti biasa klik Download Template Lengkap biar aman
- Jangan lupa centang Expand Template Widget
- Selanjutnya cari kode ]]></b:skin>, jika sudah ketemu letakkan kode CSS dibawah ini tepat sebelum atau diatas kode ]]></b:skin> tersebut:
.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0} - Setelah itu cari kode </head> setelah itu copas kode dibawah ini dan taruh diatasnya.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
Jika anda telah memasang script Jquery ini sebelumnya anda dapat meninggalkan langkah diatas - Masukan kode Javascript berikut dibawah script jQuery tadi:
<script type="text/javascript"> $(document).ready(function(){ $(".trigger").click(function(){ $(".panel").toggle("fast"); $(this).toggleClass("active"); return false; }); }); </script> - Kemudian cari lagi kode berikut ini <body>
- Setelah itu masukkan kode dibawah ini kemudian taruh diatasnya
<div class="panel">
Kode script ChatBox Anda atau bisa diganti dengan kode widget atau apa sajalah terserah.....
</div>
<a class="trigger" href="">ChatBox</a> - Dan yang terakhir Save Template anda.
About Me
Subscribe to:
Post Comments (Atom)
Rekomendasi
Example : https://ainun1000.000webhostapp.com/
https://langkah1.000webhostapp.com/
https://1000000.000webhostapp.com/
https://ainun.000webhostapp.com
http://aisyah.cuccfree.com/
http://ainunx.cuccfree.com/
http://7ainun.cuccfree.com
http://ainunxxx.totalh.net
http://axxx.a0001.net
http://aiva.es.cx
http://ainunnursahid.es.cx
http://ainun.co.nf
http://terindex.co.nf/
http://aisyah.rf.gd/
http://aisyah.epizy.com/
Comments
- neha jainSharma Academy UPSC IAS MPPSC … more
- benjaminjonesWow,amazing blog structure! Ho… more
- Cho co Let's face it, having the … more
- chintia limDapatkan Penghasilan Tambahan … more
- chintia limDapatkan Penghasilan Tambahan … more
No comments: