- Awesome Floating Social Subscribing Widget Webページの外側左サイドに表示され、アイコンにポインタが移動するとちょっと大きくなるガジェット
- Spinning Social Icons Webページ中の任意の場所に表示され、アイコンにポインタが移動すると回転するガジェット
- Bloggerのダッシュボード > その他のオプション > レイアウト 「ガジェットを追加」をクリックします。どこに配置されている「ガジェットを追加」枠でもいいです。
- ガジェットを追加> HTML/JavaScript 「ガジェットを追加」のメニュー画面が別ウインドウで表示されます。「HTML/JavaScript」を探して「+」ボタンをクリックします。
- コンテンツにコードをペースト、保存 「HTML/JavaScript」の設定画面で「コンテンツ」枠にコードをペーストします。「タイトル」は空欄のまま「保存」ボタンをクリックします。
<style>
.btsnts-flt-wdt{
position:fixed;
right:10px;
top:30%;
}
.btsnts-flt-wdt img{
float:right;
clear:right;
margin:1px;
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.btsnts-flt-wdt img:hover{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}
</style>
<!-- btsnts.blogspot.com -->
<div class="btsnts-flt-wdt">
<!-- Facebook -->
<a href="http://www.facebook.com/btsnts" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOzr-szhiaYNxbmpAhT0jiY9FrOpytwmnVZrQz_SBdwvERL_4wDXRY9c15i1aNGz6Ez5Oa4s6nYApGeo6pCnLpongY70u5vOq8D0Nron5eq8EgKsxwP60p35PB2DwqQJwpUWx4/s1600/facebook.png" /></a>
<!-- Twitter -->
<a href="http://twitter.com/rahulippar" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWRfgW0v2pK78IEqdrsdEMxnCOz5AfLMQ5JId5E87juLiqARIFKL22wxDTnxhh5cjUXHHSg_Fnx5prZqau39kCqqOjawykuNJSBI5sJbRttG2Tb322OgAOUuOFD59CWLjo-6EF/s1600/twitter2.png" /></a>
<!-- RSS -->
<a href="http://feeds.feedburner.com/btsnts" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi09FX18cXeJ0vbg-J1A-cDDgcC4vulMcRTkTF1IfbDDX5XACuIB0S5h0aDB5lfdjtwSkbYRbJE06pFH26xS273Qdej37kJRRIoL9s9jlGU2NLHeK-4F9SkGoVeCiV9wMPTpXHI/s1600/Rss.png" /></a>
<!-- Email -->
<a href="Your Contact Page URL" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPYtV0JswUZibPgUeQ0JUgbO5VK8yL6wjFfTlArFe0JqqA0IWuKmJjjBgz239Jz8OjNRtpOHEAJQsx2O1M27Qr75nvUUxV_N1T0jS-nnqNuhldGfH4APlKF3cnIQ5a_mf0ITPR/s1600/Mail.png" /></a>
</div>
<!-- End -->
<style>p#hb_socialicons img {
/* Spinning Social Icons Widget By HelperBlogger */ -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; } p#hb_socialicons img:hover { -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } /* Spinning Social Icons Widget By HelperBlogger */ </style>
<center><p id="hb_socialicons"> <a href="http://www.facebook.com/btsnts/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ZCebk0iRyFnXfQ8zxqBbygo2VDtZhLLx9e1TCYLcfs8dqMmK99dC7qQzOCxnJ5HJLJe7B0NUzwMMVEVlPs3ZpiW-boCfz3bqMdLPQA3Dh7X1P1CYL2xj8qdJx-enSfTA5__r/s1600/helperblogger.com-facebook.png" /></a> <a href="http://www.twitter.com/helperblogger/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVMOggHpmXE1x4ZCiM6JP3ug40qaqtYV2zMBO074beTieW-QZEONiPZ9uFEhETx9TmQ1qN7InzvifQYMsI4HHVtgXmIJAPqQ27lUcMent5mCvX7VjbBxxWGsQ5QkzzMJwzL7H/s1600/helperblogger.com-twitter.png" /></a> <a href="https://plus.google.com/u/0/106527290580119996124"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO8Qmo66cuhqZ1kajgTZQYQDh4PWM31rZ3qfqGFxZpsnLneIvpJg15ZC6OjWifVYQylfLGIQYI2MKFSxntqspwQ1OVIf34KWjsZDjtXGutxgM-4rsow6HnUpuxNtNY_bHpxZ_u/s1600/helperblogger.com-google_plus.png" /></a> <a href="http://www.feeds.feedburner.com/hblogger/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRqR9FV-VwMy2G_Vw_Hrav0Ph_ZwYztbKHKi9_RVbyZ2UC5XfeQkfDqtPx9rHsdrem7UGw5eJL0KybH1MldpSdYkBXiAKaYbX3O0iHk9yWmTCpwtL4YOluD1uTIr89-vtINcH/s1600/helperblogger.com-rss.png" /></a> <a href="http://www.youtube.com/helperblogger1/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiPiISOIUjekzkOZHcZ22QocUAbjf_h5AHEGkBjgf1IzzHkszMJmZueUCOBledb5tfsK8i8F5SQqyC-29pnMJAWk0VXZk6AFDueQU8jGEOWB97SDpO3CgY22slmV59-aRBGY8/s1600/helperblogger.com-youtube.png" /></a> </p></center>
今回は「Awesome Floating Social Subscribing Widget」の体裁で「Spinning Social Icons」を設置したいので2つのコードをミックスしました。変更点は下記のCSSで書かれているアイコンの動作部分と表示するアイコンのコード部分を「Spinning Social Icons」側コードに置き換えました。
<style> .btsnts-flt-wdt{ position:fixed; right:10px; top:30%; } .btsnts-flt-wdt img{ float:right; clear:right; margin:1px; -webkit-transition: all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .btsnts-flt-wdt img:hover{ -moz-transform: rotate(-360deg); -webkit-transform: rotate(-360deg); -o-transform: rotate(-360deg); -ms-transform: rotate(-360deg); transform: rotate(-360deg); } </style> <!-- btsnts.blogspot.com --> <div class="btsnts-flt-wdt"> <!-- Facebook --> <a href="http://www.facebook.com/btsnts/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4ZCebk0iRyFnXfQ8zxqBbygo2VDtZhLLx9e1TCYLcfs8dqMmK99dC7qQzOCxnJ5HJLJe7B0NUzwMMVEVlPs3ZpiW-boCfz3bqMdLPQA3Dh7X1P1CYL2xj8qdJx-enSfTA5__r/s1600/helperblogger.com-facebook.png" /></a> <!-- Twitter --> <a href="http://www.twitter.com/helperblogger/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRVMOggHpmXE1x4ZCiM6JP3ug40qaqtYV2zMBO074beTieW-QZEONiPZ9uFEhETx9TmQ1qN7InzvifQYMsI4HHVtgXmIJAPqQ27lUcMent5mCvX7VjbBxxWGsQ5QkzzMJwzL7H/s1600/helperblogger.com-twitter.png" /></a> <!-- Google+ --> <a href="https://plus.google.com/u/0/106527290580119996124"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO8Qmo66cuhqZ1kajgTZQYQDh4PWM31rZ3qfqGFxZpsnLneIvpJg15ZC6OjWifVYQylfLGIQYI2MKFSxntqspwQ1OVIf34KWjsZDjtXGutxgM-4rsow6HnUpuxNtNY_bHpxZ_u/s1600/helperblogger.com-google_plus.png" /></a> <!-- RSS --> <a href="http://www.feeds.feedburner.com/hblogger/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrRqR9FV-VwMy2G_Vw_Hrav0Ph_ZwYztbKHKi9_RVbyZ2UC5XfeQkfDqtPx9rHsdrem7UGw5eJL0KybH1MldpSdYkBXiAKaYbX3O0iHk9yWmTCpwtL4YOluD1uTIr89-vtINcH/s1600/helperblogger.com-rss.png" /></a> <!-- Youtube --> <a href="http://www.youtube.com/helperblogger1/"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqiPiISOIUjekzkOZHcZ22QocUAbjf_h5AHEGkBjgf1IzzHkszMJmZueUCOBledb5tfsK8i8F5SQqyC-29pnMJAWk0VXZk6AFDueQU8jGEOWB97SDpO3CgY22slmV59-aRBGY8/s1600/helperblogger.com-youtube.png" /></a> </div> <!-- End -->
0 件のコメント :
コメントを投稿