◄ Min  Size Fonts: + | - | ± Color: ■ ■ ■ ■ Max ►
Home › › › › › Add Widget Social Popup Windows 8 Style for Blogger

Add Widget Social Popup Windows 8 Style for Blogger

Follow This Blog
Jadi malas mosting, kepotong libur kepanjangan :D Tadinya postingan kali ini mau memosting links resource keren punya! Karena banyak dan memerlukan skill dalam menulis, jadi diurungkan alias di tunda sampai waktu 'ntah kapan ;))
Tak lupa AA Koben mengucapkan "Maaf lahir & bathin kepada seluruh fans, visitor, subscriber etc" Untuk mempertahankan eksistensi blogging, gue sudah pilihkan satu tutorial instan mengenai Widget popup keren dengan gaya tampilan seperti windows 8!

Prinsip kerja mungkin se-type dengan artikel dari Master Adhy Suryadi yg berjudul membuat pesan pembuka ketika masuk blog www.kompiajaib.com/2014/06/membuat-pesan-pembuka-ketika-masuk-blog.html Penambahan terjadi pada kode CSS windows 8 style!windows-8-styleOriginal resource: www.exeideas.com/2013/07/windows-8-style-pop-up-social-widget.html

Karena pada source sumber CSS code sudah mengalami compress, maka tugas AA mem-beauty-kan kembali kode tersebut :P Supaya dalam pengeditan tidak terlalu sulit (readable)
Copy kode ke dalam text editor (notepad)

<!-- This Is A CopyRight Code.It Is Free To Use But With HTML Design Code.If AnyOne Found To Be Changing This Code Should Be Under Legal Action Via DMCA. -->
<style type="text/css">
/***********************************************
* Windows 8 Style POP-Up Social Widget by EXEIdeas (www.exeideas.com)
* This notice must stay intact for use.
***********************************************/
#exestylepopupdiv {
position:absolute;
}
#exestylepopupdiv {
z-index:9999999;
display:block;
top:0;
left:0;
width:100%;
height:100%;
position:fixed;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0W0TCKTctBUewDcSVQLIBsipCakFm30Krk0gXi10rstIholBJ8WNL7_NN23oPQsNYmuxDxwclAWkQXZLEfbHAFKGKVB1BUgUoDsBy-UnWc6aiqQo727UnDk4pgAUqvuFNCbl8dV0KPQ/s128/exeideasopacity0.5.png');
margin:0;
overflow-y:auto;
}
#exestylepopup {
overflow:none;
}
.exestylepopup {
width:700px;
height:400px;
position:fixed;
top:50%;
left:50%;
margin-top:-200px;
margin-left:-350px;
}
#boxes {
margin:0 auto;
width:700px;
height:400px;
}
#exe-facebook {
position:relative;
float: left;
width:445px;
height:195px;
color:#fff;
font:15px Arial;
text-align:center;
background-color:#2C84EE;
text-decoration:none;
line-height:175px;
}
#exe-facebook-hide {
display:none;
background-color:#2C84EE;
color:#fff;
position:absolute;
top:0;
left:0;
width:445px;
height:195px;
box-shadow:0 0 6px 3px #2C84EE;
-webkit-box-shadow:0 0 6px 3px #2C84EE;
-o-box-shadow:0 0 6px 3px #2C84EE;
-ms-box-shadow:0 0 6px 3px #2C84EE;
}
#exe-twitter {
position:relative;
float: left;
width:245px;
height:195px;
margin-left:10px;
color:#fff;
font:15px Arial;
text-align:center;
background-color:#00BBE2;
text-decoration:none;
line-height:175px;
}
#exe-twitter-hide {
display:none;
background-color:#00BBE2;
color:#fff;
position:absolute;
top:0;
left:0;
width:245px;
height:195px;
box-shadow:0 0 6px 3px #00BBE2;
-webkit-box-shadow:0 0 6px 3px #00BBE2;
-o-box-shadow:0 0 6px 3px #00BBE2;
-ms-box-shadow:0 0 6px 3px #00BBE2;
}
#exe-google {
position:relative;
float: left;
width:245px;
height:195px;
margin-top:10px;
color:#fff;
font:15px Arial;
text-align:center;
background-color:#E51400;
text-decoration:none;
line-height:175px;
}
#exe-google-hide {
display:none;
background-color:#E51400;
color:#fff;
position:absolute;
top:0;
left:0;
width:245px;
height:195px;
box-shadow:0 0 6px 3px #E51400;
-webkit-box-shadow:0 0 6px 3px #E51400;
-o-box-shadow:0 0 6px 3px #E51400;
-ms-box-shadow:0 0 6px 3px #E51400;
}
#exe-rss {
position:relative;
float: left;
width:445px;
height:195px;
margin-left:10px;
margin-top:10px;
color:#fff;
font:15px Arial;
text-align:center;
background-color:#fd9f13;
text-decoration:none;
line-height:175px;
}
#exe-rss-hide {
display:none;
background-color:#fd9f13;
color:#fff;
position:absolute;
top:0;
left:0;
width:445px;
height:195px;
line-height:0;
box-shadow:0 0 6px 3px #fd9f13;
-webkit-box-shadow:0 0 6px 3px #fd9f13;
-o-box-shadow:0 0 6px 3px #fd9f13;
-ms-box-shadow:0 0 6px 3px #fd9f13;
}
.gradient {
background: -moz-linear-gradient(-45deg,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear,left top,right bottom,color-stop(0%,rgba(0,0,0,0.25)),color-stop(100%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(-45deg,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(-45deg,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(-45deg,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(135deg,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 100%);
}
.exefixedfooteremailsubscribebox input.email {
padding:7px 10px 7px 10px;
font-family:"Arial","Helvetica",sans-serif;
width:218px;
font-size:12px;
-webkit-border-radius:5px;
border-radius:5px;
width:400px;
}
.exefixedfooteremailsubscribebox input.subscribe {
background-color:#f0f0f0;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:6px 18px;
text-decoration:none;
text-shadow:1px 1px 0 #fff;
-webkit-box-shadow:inset 0 1px 0 0 #fff;
box-shadow:inset 0 1px 0 0 #fff;
background: -webkit-gradient( linear,left top,left bottom,color-stop(0.05,#f0f0f0),color-stop(1,#c9c9c9) );
background: -moz-linear-gradient( center top,#f0f0f0 5%,#c9c9c9 100% );
}
.exefixedfooteremailsubscribebox input.subscribe:hover {
background-color:#c9c9c9;
background: -webkit-gradient( linear,left top,left bottom,color-stop(0.05,#c9c9c9),color-stop(1,#f0f0f0) );
background: -moz-linear-gradient( center top,#c9c9c9 5%,#f0f0f0 100% );
}
</style>
<!--[if gte IE 9]><style type="text/css">.gradient{filter:none}</style><![endif]-->
<!--[if lte IE 6]><style type="text/css">html{overflow-x:auto;overflow-y:hidden}</style><![endif]-->
<div id="exestylepopupdiv">
<div id="exestylepopup" class="exestylepopup">
<div id='boxes'>
<div id="exe-facebook" class="gradient" onmouseover="document.getElementById('exe-facebook-hide').style.display='block'" onmouseout="document.getElementById('exe-facebook-hide').style.display='none'">
<img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh18AcTA5-DvEZot7HjgC691ZHkmUc1u5u8Ox4HCJLvE202nAhhRTxVys8Xojq0eh0GcLQaWbMlprhU2z7gEWZs4zp73b_QvcAW5-ErkcEI37VP-gom5l48QsNEbzrPtsWDArYPKUsrkg/s64/facebook-white-64-64.png" width="64px" height="64px" alt="Facebook"/>Facebook
<div id="exe-facebook-hide">
<!-- Facebook Like -->
<div style="margin-top:80px;">
<iframe src="https://www.facebook.com/plugins/like.php?href=https://www.facebook.com/pages/Tutorial-Blog-for-Stylish-Blogger/122292581115426&amp;send=false&amp;layout=button_count&amp;width=100&amp;show_faces=false&amp;font&amp;colorscheme=light&amp;action=like&amp;height=90" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:100px;height:90px;" allowtransparency="true">
</iframe>
</div>
<!-- Facebook Like -->
</div>
</div>
<div id="exe-twitter" class="gradient" onmouseover="document.getElementById('exe-twitter-hide').style.display='block'" onmouseout="document.getElementById('exe-twitter-hide').style.display='none'">
<img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjElY9IWROm7jK1P2T_m_Kf_EkqKLgln91604wwNvI2I2ft8hgHie3NfD2HOsFwUPn_3F-O29xdgwOfG6-cjeWl6MjuFCNFLDCk4TZExJ7UCRvXwPZwESZBWKdWp2juHpWe9-l3USKvAw/s64/twitter-white-64-64.png" width="64px" height="64px" alt="Twitter"/>Twitter
<div id="exe-twitter-hide">
<div style="margin-left:11px;margin-top:15px;">
<a href="https://twitter.com/YOUR-ACCOUNT" class="twitter-follow-button" data-show-count="false" data-size="medium">Follow</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs)}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
<div id="exe-google" class="gradient" onmouseover="document.getElementById('exe-google-hide').style.display='block'" onmouseout="document.getElementById('exe-google-hide').style.display='none'">
<img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvtpv2d9xe9lG_r8Wjgs34lEldKZ11BA9rMIUy73dIdZ7WCtYcy0Z0dtks6cgGEh8AEmRi7hkKF7m-MRGjuMPm5nlsR-wwB5LL0KoUDsywSThv8CdjE5ETLWvVUUAONS-wZBwGKgcWLg/s64/googleplus-white-64-64.png" width="64px" height="64px" alt="GooglePlus"/>Google Plus
<div id="exe-google-hide">
<div style="margin-top:20px;">
<a target="_blank" href="//plus.google.com/106979433441667164665" rel="publisher" style="text-decoration:none;display:inline-block;color:#333;text-align:center;font:13px/16px arial,sans-serif;white-space:nowrap;"><span style="display:inline-block;font-weight:bold;vertical-align:top;margin-right:5px;margin-top:8px;">Add on</span><img src="http://ssl.gstatic.com/images/icons/gplus-32.png" alt="Google+" style="border:0;width:32px;height:32px;"/></a>
</div>
</div>
</div>
<div id="exe-rss" class="gradient" onmouseover="document.getElementById('exe-rss-hide').style.display='block'" onmouseout="document.getElementById('exe-rss-hide').style.display='none'">
<img align="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyvFaexeSEIJPkBwPE0GYIaQTx9E4wLE6Otz95wF-sTCsQRWTR0gAnpPomrDkmIxjYSrUJM5v01883bZ1_F0QCILPHN5atSxhwLS2L_q17mU_Qptm_9HUS_i_svqFP6jzT8OYLtano1A/s64/rss-white-64-64.png" width="64px" height="64px" alt="RSS"/>RSS
<div id="exe-rss-hide">
<div style="margin-top:50px;">
<div class="exefixedfooteremailsubscribebox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=beben-koben','popupwindow','scrollbars=yes,width=550,height=520');return true">
<input class="email" type="text" id="email" name="email" value="Masukan Alamat E-mail Anda Disini..." /><input type="hidden" value="beben-koben" name="uri"/>
<p><input class="subscribe" name="commit" type="submit" value="Subscribe Us into your E-Mail"/></p>
</form>
<center style="color:#333;margin-top:10px;font-size:10px;">E-Mail Will Be Delivered By FeedBurner.</center>
</div>
</div>
</div>
</div>
</div>
<center class="gradient" style="padding:10px;background-color:#66CD00;color:#fff;cursor: pointer;text-align:center;margin-top:10px" onmouseup="document.getElementById('exestylepopupdiv').style.display='none'">
<p>Terimakasih sudah mengunjungi blog ini, jangan lupa datang lagi...</p>
</center>
</div>
</div>
<!-- Windows 8 Style POP-Up Social Widget By EXEIdeas DIV End -->

Note (Click Ctrl + F) cari dan gantikan dengan link/account masing²:

>> www.facebook.com/pages
>> twitter.com/YOUR-ACCOUNT
>> plus.google.com
>> feedburner.google.com

Simpan seluruh kode hasil editan dengan teknik Add a Gadget ► HTML/JavaScript

Happy coding \m/
Loading...
XAdd Widget Social Popup Windows 8 Style for Blogger
Membuat widget social popup keren dengan gaya tampilan tema windows 8
Subscribe my posts Register For Free!
, , , ✎
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE