JeritanBlog telah ditukar nama BelajarBlogs...
Home » » Menambah widget Sosial beserta Subscribe Via Email

Menambah widget Sosial beserta Subscribe Via Email

Hari ini saya akan membaut tutorial bagaimana untuk Menambah widget Sosial beserta Subscribe Email.Ikon ini akan berputar apabila meletakkan poit tetikus.Jika berminat bolehlah ikuti tutorial dibawah ini.











Langkah 1
1. Login ke Blogger, Klik Layout :




2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak; 
3. Pilih HTML/Javascript;



Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.






<style>
#socialegytricks{
width:244px;
padding:10px 10px 0px 9px;
background:#000 url(http://4.bp.blogspot.com/-QkIj_Y7ylh0/UBLdRg56bpI/AAAAAAAADfA/16sPq2FPhg0/s1600/HP-Laptop-Luster.png)no-repeat top left;
box-shadow:5px 7px 5px #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:20px;}
p#socialegytricksp img {
    -moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
padding-right:10px;}
p#socialegytricksp img:hover {
    -moz-transform: rotate(420deg);
    -webkit-transform: rotate(420deg);
    -o-transform: rotate(420deg);
    -ms-transform: rotate(420deg);
    transform: rotate(420deg);}
egytricksform.emailout{
margin:20px;
display:block;
clear:both;
padding:50px;
float:right;
}
.egytrickstxt{
font-size:16px;
color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;
text-decoration:none;
border:1px solid #D3D3D3;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: 1px 1px 2px #CCC inset;
box-shadow: 1px 1px 2px #CCC inset;
width:240px;
height:30px;
}
.egytricksbtn{
color:#666;
font-weight:bold;
text-decoration:none;
padding:10px 20px;
border:4px solid #D3D3D3;
cursor: pointer;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-goog-ms-border-radius: 4px;
border-radius: 20px;
background: #fbfbfb;
background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
</style>
<br />
<div id="socialegytricks">
<center><p id="socialegytricksp">
<a href="http://feeds.feedburner.com/yourfeedname">
<img border="0" src=" http://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48x48.png " /></a>
<a href="https://plus.google.com/google+name">
<img border="0" src=" http://2.bp.blogspot.com/-88F1IMlPog0/UCM_cDdjh5I/AAAAAAAABiE/vexbC6LvSe8/s1600/TNT.png " /></a>
<a href="https://twitter.com/yourtwittername">
<img border="0" src=" http://2.bp.blogspot.com/-yGQ699YjaIg/UCM_mbpqjiI/AAAAAAAABic/oXlWlYXmIoo/s1600/TNT.png " /></a>
<a href="http://www.facebook.com/yourfacebookname">
<img border="0" src=" http://1.bp.blogspot.com/-7H0aiZ-89Uk/UCM_Wk-hkeI/AAAAAAAABh8/IXJ9NDN6NzQ/s1600/TNT.png " /></a></p></center>
<p style='color:#666;
font-weight:bold;
font-family:Georgia,Times New Roman,Trebuchet MS;'>Get Quality Updates Into Your Inbox FREE !!</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailout' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=your feed name here&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=550&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='your feed name here'/>
<center><input name='loc' type='hidden' value='en_US'/>
<input class='egytrickstxt' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your Email&quot;;}' onfocus='if (this.value == &quot;Enter your Email&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your Email'/>
<input alt='' class='egytricksbtn' title='' type='submit' value='Submit'/>
</form><center>
</div>


Nota :
Jangan lupa tukar warna merah ...

1 ulasan: