Add Widget Social Popup Windows 8 Style for Blogger

Add Widget Social Popup Windows 8 Style for Blogger - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Add Widget Social Popup Windows 8 Style for Blogger, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article HTML, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Add Widget Social Popup Windows 8 Style for Blogger
link : Add Widget Social Popup Windows 8 Style for Blogger

Also Read


Add Widget Social Popup Windows 8 Style for Blogger

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/AVvXsEiG0N5ABEd-uJRgP6IU8s5UqEE5bjlY6SB3nJqlY2m-78B2WrGRjnvdyXbnYwTT1aj_sV3UfNz-eO9eoprs0haljPhq5QyT_auLvlcX92PRM1foa5oE62FohNZszZQtVDJDe5UDe01_Lg/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/AVvXsEgk2ZhmIbY_zp9t13kdTt5_QuIqWsCZQl5533Lp6Ut0hHHry_S-rhWNCb2slQznRSl9lvUBVCYIPUZL6CeOn1Pu1jdhm3mqNe1I_IcJKK3mNcF63rapRR0_XBgHY5kTSO5PL73VanlUkQ/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/AVvXsEjwXU4snuOsiWLTnX5VA4m82x4ca-vHU2W2uELuCIlDG0btq53jjJsPs6PNuj4zNtTvKrdTWXkO-UdbnMWOwrkF-AlQaToKY4TY592273iniZsrJRXLeCD2dZF3ywuALzODiXqkIDPt4w/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/AVvXsEiK10VZUWbfMvDj7uX7QuZm525CSddQKHf29raAn3dHCwbx4M4Kz293nHRV53P8b4-kHRT2XJp0-zBPyIJkMZ0MTtVaQVqlXQ0L89eH9-_Jm52lnupGzVKFvZ74csQ19RGw7ZopSMIWzg/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/AVvXsEgSDdKTQktKqIm8iLECVqR4HCrD9u4SvgFUSR5bopQZhenBo7QH1P0fxPy8bmUwBhfGS3qpU-byq7yIxVJVQ1eSu9WCJOHiQVpo6amsSTPyzCBee1cOlq6eQLRMSNWU4AKCYgDDNO16Ow/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/


Thus articles Add Widget Social Popup Windows 8 Style for Blogger

that is all articles Add Widget Social Popup Windows 8 Style for Blogger This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Add Widget Social Popup Windows 8 Style for Blogger with the link address https://autopostingblogspot.blogspot.com/2014/08/add-widget-social-popup-windows-8-style.html

0 Response to "Add Widget Social Popup Windows 8 Style for Blogger"

Posting Komentar