Jumat, 13 September 2013

Cara Menambahkan Social Media Sharing dibawah Posting Blog Anda

[ Add Simple Social Sharing Below Your Blogger Posts ].  Cara Menambahkan Social Media Sharing dibawah Posting Blog Anda . Salah satu tek... thumbnail 1 summary
Cara Menambahkan Social Media Sharing dibawah Posting Blog Anda

[ Add Simple Social Sharing Below Your Blogger Posts ]. 

Cara Menambahkan Social Media Sharing dibawah Posting Blog Anda. Salah satu teknik untuk meningkatkan trafik blog anda ialah dengan cara mempromosikan blog anda dengan sosial media sharing. Ini merupakan cara yang bagus untuk meningkatkan traffic blog anda. Sehingga konten blog Anda dibuat melalui tombol sosial akan tersebar di jaringan sosial yang berbeda. Twitter, Facebook dan Pinterest. Saya ingin menambahkan link berbagi sosial tanpa menambahkan JavaScript. Untungnya semua layanan ini mendukung berbagi melalui hanya mengunjungi URL. Kata lain, Anda dapat berbagi melalui HTTP GET. Widget ini menggunakan total 9 Ikon.

Sekarang kita akan menambahkan ikon social media di bawah posting blogger

  1. Buka Blogger Dashboard > Pilih Blog > Lalu ke halaman Template Blog
  2. Klik tombol Edit HTML.
  3. Dan Tambahkan Kode CSS sebelum ]]> </ b: skin>
  4.     div#social-sharing   {
        width:550px;
        height: 90;
        background: radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
        background: -o-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
        background: -ms-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
        background: -moz-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
        background: -webkit-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
        padding:10px;
        margin:0 auto;
        border: 1px solid #999;
        border-radius:5px;
        -webkit-border-radius:5px 5px 5px 5px;
        -moz-border-radius:5px 5px 5px 5px;
        -webkit-transition: all 0.6s ease-out;
        -moz-transition: all 0.6s ease-out;
        -o-transition: all 0.6s ease-out;
        -ms-transition: all 0.6s ease-out;
        transition: all 0.6s ease-out;

        }

        div#social-sharing:hover {
        -webkit-box-shadow: 1px 1px 3px #CCC inset;
        -moz-box-shadow: 1px 1px 3px #CCC inset;
        box-shadow: 1px 1px 3px #CCC inset;
        }

        #social-sharing img {
        width: 35px;
        padding: 5px;
        border: 0;
        box-shadow: 0;
        display: inline;
        opacity:1;
        filter:alpha(opacity=1); /* For IE8 and earlier */
        }

        #social-sharing img:hover {
        -webkit-transition: all 0.6s ease-out;
        -moz-transition: all 0.6s ease-out;
        -o-transition: all 0.6s ease-out;
        -ms-transition: all 0.6s ease-out;
        transition: all 0.6s ease-out;
        opacity:0.6;
        filter:alpha(opacity=60); /* For IE8 and earlier */
        }

        .social-sharing-title {
        text-align: center;
        padding: 3px 10px 2px 0px;
        margin: 0 0px 0 0;
        color: #8d0303;
        text-transform: uppercase;
        line-height: 25px;
        vertical-align: middle;
        font-size: 14px;
        }
    Anda dapat mengganti warna teks yang di tunjukkan warna merah dan anda juga dapat mengubah lebar Background dengan mengubah lebar: 550px; ditunjukkan warna biru.

  5. Selanjutnya, cari contoh Kedua tag <data:post.body/> dan paste kode berikut dibawah tag
  6. <data:post.body/>:
        <b:if cond='data:blog.pageType == &quot;item&quot;'><

        center>
        <div id='social-sharing'>
        <div class='social-sharing-title'>Do You Like This ? Please Take Five Second To Share It!</div>

        <!-- Facebook -->
        <a class='face-book' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbBCbHZR3RSgLAyCz9PUvxi-owemzzLnnFfn6ugOUxSojJbo1hFLZzWXiMcud9vuQZG4f32VEMaOuxnnUyAXuLJfVfBOC8N2GcYW2BfSlT5SHRmGucJ50KstAq-TRrefSfHrcl23IQH5D4/s1600/Facebook.gif'/></a>

        <!-- Twitter -->
        <a class='twitter' expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Z7nOu62s21hLgiJensjk0zUINmaTwUsATchtBMysydOYhFSizYcKhhm_K_Sw8jrhRzu2nE1qDaTcXH6KDX37yYZ2SDoBfFmEcblUqeZvYVOxht1aQ8gTDvNbpxCGFkfjNrapoT3TDpCL/s1600/twitter_bird.gif'/></a>

        <!-- Pinterest -->
        <a class='pint-er-est' href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXPs41wFUn4e-oWZQC_DetD5-nIuhX1lVkZJZ2cuQ4Xh-whqG8SQxnsE_fuGHtXaxMvo2Q04srvlEry1R81-WmZwfmFrTdELA7QJUOworp9cKFxTnrkICFF34mg97Kpw-KLUD2j3mJ8LTA/s1600/Pinterest.gif'/></a>

        <!-- Stumbleupon -->
        <a class='stumbleupon' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Stumble this'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPYhQAfFgTZkgQo1jjyjSm3cQVyNTmpe2ykJCifMi_dPEPrciCQUMwr4HBC9J_OByAyimbNIf8P7sA6xEdpfeuCgL5Vc_W18qcpBvNITXp4oVhtmb44F_VqkbiI1UiBN-_GGaf9NesSBbb/s1600/stumbleupn.gif'/></a>

        <!-- Delicious -->
          <a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share This On Delicious'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifDU_ATS74Gb9ABZPZgsj4wtRZNjc8qzkCzm2642KWb7gNU72788AmCY-OovvQXxVsWyh-wsGEKe0sQcAOk31X_5oKGxEfbbjvedO_fFAtJbDkOgCZyVztfYMw_oz1honYV6kXdofrm0-D/s1600/Delicious.gif'/></a>

        <!-- Reddit -->
        <a class='reddit' expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkzYyEeiD_BCngfM6i7A_k9l0bJrdmBtCSRxwbGeUV3vp7lqLrwfdX91rDjxESLCX0nHRz0I6VTTATN2D-z94xq11ZZWcFeycS5Uo8obhu317j4IASl_NBVRjGjHLXRJVC4ppj54AYNUs0/s1600/reddit.gif'/></a>

        <!-- Digg -->
        <a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;  + data:post.url' rel='nofollow' target='_blank' title='Digg This'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8YxHRxGePoOgkul1LuhM8SiQyhjgegh42DdIdBMu7AeUt56bq5ltSWK0AQ2vsreG6rRW6Y0PuD8IQtIh5_F-NnJkqciCH-jidw7e_GrE3s2USlu_delOBKUzeGeZ2sK5P01LfbA06gaB/s1600/digg.gif'/></a>

        <!-- Email -->
        <a href='mailto:?Subject=My Blogger Tricks&amp;Body=Check out this site.. http://www.myblogger-tricks.com' rel='nofollow' target='_blank' title='Email This'><img alt='Email' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhds8iGGCAoYrd04qlKcUi2qBPwtVXFYB76Nj7G2kK0vVlkzsZVPuNXydngHjgfmY8ZzgOF7FFil-XMixVA-33oFLznLS2LwxYmZwlAMQeT4jwvL1u2bZi-KS1WludM5l8T5ETxjz648Xzp/s1600/email.gif'/></a>

        <!-- addtoany -->
          <a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share On Others Networks'><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjek5yJwS4yEIruzv_3_WZku0K8h1IXW2I-WueN6944BjohN8wsrMn3gl9WmWyG-boYbrko8FMFjuYVmlr-DOZ3z0Ku4JqUBe_OU8i5L6XHebX6iXE3s7a4V9FsSnxnQhzu2MJ3ixazkOzd/s1600/share-to-any.gif'/></a>

        </div>
        </center>
  7. Lihat Preview sebelum disimpan. 
  8. Demo
[source]

Tidak ada komentar

Posting Komentar

Review diatas adalah kutipan dari website yang ada di internet dikemas menjadi informasi yang bermanfaat bagi kita semua. setiap post ada link sumber. Lengkapnya baca Disclaimer