Bu Plagen (Widget) ən çox axtarılan və bəyənilənlər sırasındadır.Həmdəki bu plagen blogunuz üçün çox vacibdir.
Bu Widget-i blogunuza quraşdırmaq asandır.Bunun üçün aşağıdakəları izləmək lazımdır.
<style type="text/css">
#flipboard_btrix{ width:300px;}
ul.flipboard_btrix{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_btrix li{
display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_btrix li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a img{
border-width: 0;
}
ul.flipboard_btrix li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#btrix-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVb0dgWdTAdTQ90dmovnoLZgCob9lFh5cp8J7io_f9Aj7GgWujKDbNxYCukH2CaGgGp9EUkPsyHeXqebnPSkQK_U2F2RRWTmvAKithdVBlDDjy38E0T7VgP9UhrCVn2iDhWzTEv6J7EEon/s1600/green.png) no-repeat scroll center center transparent;
width: 290px;
height: 50px;
disaply: block;
}
form#btrix-searchform {
display: block;
padding: 7px 16px;
margin: 0;
}
form#btrix-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#btrix-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="flipboard_btrix">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_btrix">
<li><a href="http://www.facebook.com/blogoyren facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih35UzTO9D_zj3v0a4DZME_dCBN0FAgFWYC3OXXd6ft3nLag_gy3xR1SVo7yXrP5IbGiinoBC2SC76jf-yq1M6g-IcM-pElWoRz-dwEM5gfPAYWinhj3NMPEYKQlVJiX1IdEUryC89HydK/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBuC2pG9gULABW832VWdOU918m2CNvK33E_ANu5RBqs_trRYNxBxrou50IsdL6nAbw0LRKtOi3SA5g_I516_XDdmUPCNaqxLmmxzyAhwKL1BnHyemGrfuODNY_WGTQMPe9wiDA_Ydn2KKp/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/blogoyren twitte"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-W3weXL4-XhthiedhENxUrWgObMXwb5oLZedIx1oE9XppwljQCS-D33W4MZvdYMHZxomumKj1OUZ5DxBvzWS7O6JLw23i8CLT49kNgmDIiU-K6SQvFY7vDt6fCLNn7NvSOMQ4I33wOM3L/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/blogoyren feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM0-cLmdfOCl2zV6OdtIWjmLPmYUgnrArZV1YqDguDflsQrqbzPIwnAaF1Bu9ONKyRQpvJvQrmN3ydyax9EjmnRN1V6VdJJhPtygaw8Kk-5zJWtogA44lEwr3K-NaFBJB58nFxOxtsRYGX/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="btrix-searchbox">
<form action="/search" id="btrix-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
</div>
Bu Widget-i blogunuza quraşdırmaq asandır.Bunun üçün aşağıdakəları izləmək lazımdır.
- Social Media Widget-i blogga necə quraşdıraq
1. Menyuya (Dashborad) daxil oluruq.
2. Layout -a (Yerleşim) daxil oluruq.
3. Add Gadget (Gadget ekle) əlavə edirik və aşağıdakı kodu HTML/Javascript-ə atırıq.
<style type="text/css">
#flipboard_btrix{ width:300px;}
ul.flipboard_btrix{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_btrix li{
display: inline-block;width: 55px; height: 50px;margin-right: -px; background: white;font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_btrix li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_btrix li a img{
border-width: 0;
}
ul.flipboard_btrix li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_btrix li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#btrix-searchbox {
border-radius: 5px;
background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVb0dgWdTAdTQ90dmovnoLZgCob9lFh5cp8J7io_f9Aj7GgWujKDbNxYCukH2CaGgGp9EUkPsyHeXqebnPSkQK_U2F2RRWTmvAKithdVBlDDjy38E0T7VgP9UhrCVn2iDhWzTEv6J7EEon/s1600/green.png) no-repeat scroll center center transparent;
width: 290px;
height: 50px;
disaply: block;
}
form#btrix-searchform {
display: block;
padding: 7px 16px;
margin: 0;
}
form#btrix-searchform #s {
padding-left: 24px !important;
padding: 7.5px;
margin: 0;
width: 198px;
font-size: 16px;
font-family: georgia;
font-style: italic;
color: #666666;
vertical-align: top;
border: none;
background: transparent;
}
form#btrix-searchform
#sbutton {
margin: 0;
padding: 0;
height: 40px;
width: 74px;
vertical-align: top;
border: none;
background: transparent;
}
</style>
<div id="flipboard_btrix">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_btrix">
<li><a href="http://www.facebook.com/blogoyren facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih35UzTO9D_zj3v0a4DZME_dCBN0FAgFWYC3OXXd6ft3nLag_gy3xR1SVo7yXrP5IbGiinoBC2SC76jf-yq1M6g-IcM-pElWoRz-dwEM5gfPAYWinhj3NMPEYKQlVJiX1IdEUryC89HydK/s1600/btrix_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBuC2pG9gULABW832VWdOU918m2CNvK33E_ANu5RBqs_trRYNxBxrou50IsdL6nAbw0LRKtOi3SA5g_I516_XDdmUPCNaqxLmmxzyAhwKL1BnHyemGrfuODNY_WGTQMPe9wiDA_Ydn2KKp/s1600/btrix_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/blogoyren twitte"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-W3weXL4-XhthiedhENxUrWgObMXwb5oLZedIx1oE9XppwljQCS-D33W4MZvdYMHZxomumKj1OUZ5DxBvzWS7O6JLw23i8CLT49kNgmDIiU-K6SQvFY7vDt6fCLNn7NvSOMQ4I33wOM3L/s1600/btrix_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/blogoyren feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM0-cLmdfOCl2zV6OdtIWjmLPmYUgnrArZV1YqDguDflsQrqbzPIwnAaF1Bu9ONKyRQpvJvQrmN3ydyax9EjmnRN1V6VdJJhPtygaw8Kk-5zJWtogA44lEwr3K-NaFBJB58nFxOxtsRYGX/s1600/btrix_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="btrix-searchbox">
<form action="/search" id="btrix-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == "") {this.value = "Search...";}" onfocus="if (this.value == "Search...") {this.value = ""}" type="text" value="Search..." />
<input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
</form>
</div>
</div>
Bunları dəyişmək lazımdır.
- blogoyren twitter dəyişib öz twitter profil adini əlavə edirsen
- blogoyren facebook dəyişib öz facebook profil adını əlavə edirsen
- Google plus dəyişib öz goole İD adresini əlavə edirsen
- blogoyren feed dəyişib öz goole feedburner adresini əlavə edirsen
5. İndi HTML/Javascript save (Kaydet) edirsən.
6. Buda Son..........
Hiç yorum yok:
Yorum Gönder