$type=ticker$count=12$cols=4$cate=0$show=post$hide=mobile

$type=grid$count=4$tbg=rainbow$meta=0$snip=0$rm=0$show=home$ic=show

Tutorial Pasang Notice Box Info Blog Valid HTML5 dan Full Responsive Tanpa Jquery

Widget Blog Notice Fixed on Top Valid HTML5/CSS3/Responsive for Mobile & Desktop - Tutorial Memasang Notice Info Keren dan elegan tanpa JQuery akan saya bahas disini dikarenakan banyak nya pesan masuk pada Facebook dan email saya dan beberapa komentar dari sahabat blogger

Tutorial Pasang Widget Notify Info Blog Keren by Blog X Komo
Widget Blog Notice Fixed on Top Valid HTML5/CSS3/Responsive for Mobile & Desktop - Tutorial Memasang Notice Info Keren dan elegan tanpa JQuery akan saya bahas disini dikarenakan banyak nya pesan masuk pada Facebook dan email saya dan beberapa komentar dari sahabat blogger untuk meminta izin menggunakan notice info pada blog seperti yang saya gunakan saat ini (Bisa lihat pada gambar di atas). Tutorial yang akan saya berikan ini hanya menggunakan HTML, CSS dan Javascript saja jadi widget ini bisa di bilang ringan dan tidak memerlukan load blog yang lama dan berat karna tidak menggunakan JQuery yang mem-block Rendering Dari proses Robot.txt milik Google.
     Sebelum lanjut ke tutorial, saya mau ucapin terimakasih sama mas +Adhy Suryadi yang sudah nge-share Artikel ini : Modifikasi Widget Profil Blogger Seperti Profil Google dan Javascript Close Box Dengan Klik Di Luar Box. Karna Blog Kompiajaib[dot]com saya jadi memiliki ide untuk membuat widget ini, belum lagi mas Adhy lebih suka menggunakan Javascript ketimbang Jquery (sama seperti saya) makanya saya suka berkunjung ke blog nya mas Adhy buat nyari ide untuk mempercantik blog saya sendiri :D . Yah karna modifikasi kita banyak yang suka makanya banyak yang tanya bagaimana cara membuat nya? Tentu sesama blogger kita tidak boleh pelit untuk berbagi informasi. Tapi walaupun begitu kita perlu tahu bagaimana harus menghargai suatu karya ataupun usaha orang lain :) karna saya bikin ini tidak semudah yang di pikirkan jadi alangkah baiknya untuk Tag Element yang akan saya bagikan pada artikel ini jangan di ubah/ di ganti Biarkan Seperti apa adanya (Tag Element: Xkomo).
     Widget Notice Info Tanpa Jquery yang aman di gunakan untuk semua jenis template, namun pastikan kalau blog kamu menggunakan menu fixed pada bagian top/bottom. Dalam artikel ini akan saya bahas tuntas mengenai cara memasang widget notice info pada blog dengan counter angka Full Responsive untuk semua jenis tampilan screen di blog :) jadi silahkan di simak baik baik yah :wee

Tutorial

  • Buka Blogger[dot]com
  • Pilih Blog yang ingin di pasang widget ini.
  • Template > Edit HTML (Gunakan CTRL + F untuk memudahkan dalam pencarian kode di dalam edit HTML)
  • Pastikan Icon Awesome sudah terinstal/terpasang pada blog kamu.
[<link href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>]
Info:
Jika belum terpasang. Silahkan Pasang di atas </head>
Baca Artikel ini:
  • Cara Memasang Font Awesome agar tidak kena Block Rendering (Coming Soon)
  • Simpan CSS ini di atas </style> atau ]]></b:skin>
[/* Box Info Xkomo.com---------------------------*/.xkomo-box{background-size: 32px 32px; border-radius: 50%; display: block; height: 32px; width: 32px; position: fixed; top: 11px; right: 27px; z-index: 99999;}.icon-box{background-color: rgba(66, 133, 244, 0.8);padding: 8px 13px;border-radius: 100%;color: rgba(255, 255, 255, 0.5);margin-right: 5px;
}.icon-box:hover { background-color: rgba(66, 133, 244, 1); padding: 8px 13px; border-radius: 100%; color: rgba(255, 255, 255, 1); margin-right: 5px;}.notif-info{background-color: rgba(215, 215, 215, 0.5); padding: 5px 8px; border: 1px solid #eee; margin: 5px 0px;}.notif-info a{text-decoration: none;}.notif-info:hover {cursor:pointer;opacity:0.8;transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;}.xkomo-box-info { float: left; margin: 0 55px 0 0; background-color: rgb(66, 147, 255); padding: 10px 15px; border-radius: 100%; color: white;}#xkomobox{background:#fff;border:1px solid #ccc;color:#333;font-size:14px;font-family: 'Open Sans', Helvetica, Arial, sans-serif;line-height:1.2em;top:60px;right:-381px;padding:15px;position:fixed;max-width:300px;width:auto;box-shadow: 0 2px 10px rgba(0,0,0,.2);z-index:10000;}#xkomobox:before{content:"";width:0;height:0;position:absolute;top:-22px;right:14px;border:11px solid transparent;border-color:transparent transparent #ccc;}#xkomobox:after{content:"";width:0;height:0;position:absolute;top:-19px;right:15px;border:10px solid transparent;border-color: transparent transparent #fff;}.xkomoclose{background:none;border:none;position:absolute;top:0px;right:0px;cursor:pointer;font-size:18px;font-weight:700;color:#888;}.xkomoclose:focus{outline:none}.xkomo-box-info:hover{opacity:0.8;transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;}.count-box:hover{opacity:0.5;border-radius:10px;}.count-box:active,.count-box:focus{visibility: hidden;}.count-box {width: 18px;height: 18px;line-height: 18px;text-align: center;background-color: rgb(255, 36, 0);border-radius: 5px;color: #fff;display: inline-block;font-size: 12px;position: absolute;padding: 0 2px; top: -1px;left: -13px;transition: all 0.3s ease-out;-webkit-transition: all 0.3s ease-out;}]
Info:
Silahkan Atur Posisi Icon Notice Box Info nya dengan mengubah Value top: 11px; dan right: 27px; pada Tag Element .xkomo-box{...} Sesuka kamu.
  • pasang Kode HTML berikut pada Tag pembungkus Navigasi / Menu pada Blog kamu.
[<div class='xkomo-box' onclick="document.getElementById('xkomobox').style.right='15px';"> <i class="fa fa-info xkomo-box-info"></i> <div class='count-box'>4</div></div><div id='xkomobox'> <div class="notif-info"><i class="fa fa-info icon-box"></i>Notice Info Klik disini</div> <div class="notif-info"><i class="fa fa-usd icon-box" style='padding: 10px 13px;background-color:#4CAF50;'></i>Mau Pasang Widget ini?</div> <div class="notif-info"><i class='fa fa-try icon-box' style='padding: 10px 13px;background-color:#FB8C00;'></i><a href='http://www.xkomo.com/2015/06/tutorial-pasang-notice-box-info-blog.html'title="creator">Credit By Blog X Komo</a></div> <input type="button" class='xkomoclose' onclick="document.getElementById('xkomobox').style.right='-381px';" value='&#215;' title="Close this" /></div>]
Info:
Biasanya beberapa template akan menggunakan kode berikut <nav .... > Copas Kode kesini </nav> atau kode bisa di simpan di <div class="wrapper" id="wrapper"> Copas Ke sini </div> Sesuka kamu mau letak nya di mana karna beberapa template memiliki tata letak kode HTML yang berbeda.
  • Kode HTML di atas Jika kamu pasang Di dalam Tag <nav ...> Copas disini </nav> Silahkan kamu ubah Style position:fixed :ke position:absolute Dan atur Top dan Right nya pada Kode CSS .xkomo-box{...}
  • Silahkan tambahkan JavaScript ini jika kamu ingin mengaktifkan fitur show/hide dengan klik di luar widget (tanpa klik close pada widget). Simpan JS ini di atas </body>
[<script> //<![CDATA[ var boxArray=["xkomobox"];window.addEventListener("mouseup",function(e){for(var r=0;r<boxArray.length;r++){var o=document.getElementById(boxArray[r]);e.target!=o&&e.target.parentNode!=o&&(o.style.right="-300px")}});//]]></script>]
Nah Begitu lah Tutorial Cara memasang Widget Notice Box Info Pada blog dengan kode Valid HTML5 dan Full Responsive dari saya. Jika kamu ingin memodifikasi widget ini silahkan kamu modifikasi saja kode CSS ataupun HTML nya sesuka hati kamu :) :D
Jika kamu ingin terlihat widget ini seperti berjalan atau muncul dari samping bisa tambahkan style ini:
[transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;]
Pada kode CSS #xkomobox {...}, Maka setelah di tambahkan akan menjadi seperti ini:
[#xkomobox{background:#fff;border:1px solid #ccc;color:#333;font-size:14px;font-family: 'Open Sans', Helvetica, Arial, sans-serif;line-height:1.2em;top:60px;right:-381px;padding:15px;position:fixed;max-width:300px;width:auto;box-shadow: 0 2px 10px rgba(0,0,0,.2);z-index:999;transition: all 0.5s ease-out;-webkit-transition: all 0.5s ease-out;}]

Lihat Tampilan transition Widget nya akan terlihat lebih Keren bukan :keren :hebat
Untuk Panduan Modifikasi Widget Notice Box Info sampai sini saja yah. nanti kalau ada waktu lagi akan saya lanjutkan untuk pembahasan lebih jelas nya :D Stay Tune... Karna saya akan selalu update artikel ini untuk modifikasi selanjutnya :D
Saran: Backup template sebelum melakukan Tutorial ini.
Jika kamu masih mengalami kesulitan. Silahkan tulis masalah kamu di kotak komentar yah nanti kita diskusikan bersama.

COMMENTS

BLOGGER: 6
Loading...
Mengingat blog x komo akan pindah platform dari blogger ke wordpress, jika kamu punya pertanyaan atau request update artikel silahkan join ke sini https://blog.xkomo.com/forums.
Silahkan Bookmark blog saya yang baru ya, karna kedepan blog ini akan di hapus.
Name

Accessories,5,All Weapon,4,Android,36,Anime,1,App,8,ASUS,41,ASUS Zenfone,7,Blogger,33,Clash Of Clan,2,Computer,3,CSS,6,Documentary,5,dr. Zen,2,Event,10,Facebook,15,Firmware,23,Game,9,Gemscool,1,Google,6,Google Adsense,2,Hardware,2,Internet,6,Jambi,2,Javascript,1,Komputer,3,Laptop,2,Mouse,3,Mouse Gaming,1,Mouse Macro,6,News,40,Ninja Saga,2,Notebook,4,Padfone S,1,Point Blank,1,Press Release,8,Preview,12,Review,27,Root,13,Script,3,SEO,3,Shotgun,1,Smartphone,18,Template,1,Theme,3,Tips & Tricks,2,Troubleshooting,1,Tutorial,44,Unboxing,4,Video,10,Widget,8,Windows,2,ZenEar,1,Zenfestival,1,Zenflash,1,Zenfone 2,5,Zenfone 2 Deluxe,2,Zenfone 2 Laser,9,Zenfone 3,3,Zenfone 3 Laser,1,Zenfone 3 Max,3,Zenfone 3 Zoom,1,Zenfone 4,2,Zenfone 5,5,Zenfone 6,9,Zenfone Go,1,Zenfone Max,1,Zenfone Selfie,3,Zenfone Zoom,3,ZenHow,1,ZenPad,2,Zenpower,2,Zentalk,2,Zenvestival,3,Zenvolution,1,
ltr
item
BLOG X KOMO: Tutorial Pasang Notice Box Info Blog Valid HTML5 dan Full Responsive Tanpa Jquery
Tutorial Pasang Notice Box Info Blog Valid HTML5 dan Full Responsive Tanpa Jquery
Widget Blog Notice Fixed on Top Valid HTML5/CSS3/Responsive for Mobile & Desktop - Tutorial Memasang Notice Info Keren dan elegan tanpa JQuery akan saya bahas disini dikarenakan banyak nya pesan masuk pada Facebook dan email saya dan beberapa komentar dari sahabat blogger
https://4.bp.blogspot.com/-JyQr9DcE7Q4/VYAFBKaW5xI/AAAAAAAAERk/Rh67jSjGmIs/s1600/Notice%2BInfo%2BBlog%2BX%2BKomo.gif
https://4.bp.blogspot.com/-JyQr9DcE7Q4/VYAFBKaW5xI/AAAAAAAAERk/Rh67jSjGmIs/s72-c/Notice%2BInfo%2BBlog%2BX%2BKomo.gif
BLOG X KOMO
http://www.xkomo.com/2015/06/tutorial-pasang-notice-box-info-blog.html
http://www.xkomo.com/
http://www.xkomo.com/
http://www.xkomo.com/2015/06/tutorial-pasang-notice-box-info-blog.html
true
4848727032668058109
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy