Tampilkan postingan dengan label blogspot. Tampilkan semua postingan

Cara Membuat Memasang Button Share Artikel

Tidak ada komentar


Membuat tombol share artikel/posting ke berbagai social bookmark saat ini seperti sudah menjadi satu kebutuhan bagi seorang web msater, termasuk juga para blogger biasa. Karena dengan memasang tombol/button share artikel ini akan menambah jumlah backlink kita di situs situs public hosted seperti  Facebook, Twitter, Reddit, Digg, StumbleUpon, Myspace, Google Buzz atau mungkin Google Plus One (+1). Pada artikel ini, kami akan sedikit mengulas script yang bisa anda terapkan di blog anda agar bisa menampilkan social bookmark.
Dibawah ini ada 3 script untuk membuat tombol/button share artikel berikut preview gambarnya yang kami ambil dari situs penyedia share butta addthis.com :
1.       Kode script button share style-1:
<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71feed783c3890"></script>
<!-- AddThis Button END -->
2.       Kode script button share style-2:
<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71ff8750bee738"></script>
<!-- AddThis Button END -->
3.       Kode script button share style-3:
<!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script>
<!-- AddThis Button END -->

Cara pemasangan ketiga script di atas adalah sebagai berikut :
      1.       Login ke dashboard blogger anda.
      2.       Pilih Rancangan > Edit HTML, centang Expand widget template.
     3.       Cari kode <data:post.body/>  atau kode <div class='post-header-line-1'/>  pada template anda (   salah satunya saja ! ) dan letakkan script button sharenya diatas kode tadi.
     4.       Save template dan lihat hasilnya.

4.  Side Page Share button
>> Login ke dashboard blogger anda.
>> Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
>> Copy script dibawah ini dan paste kedalam gadget baru tadi.
      <style>
    #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
    #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
    .fb_share_count_top {width:48px !important;}
    .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
    .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
    .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
    </style>
    <div id="pageshare" title="Get this code from yokotrix.blogspot.com">
    <div class="sbutton" id="fb">
    <a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript">
    </script></div>
    <div class="sbutton" id="rt">
    <script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript">
    </script></div>
    <div class="sbutton" id="gb">
    <a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz">
    <script src="http://www.google.com/buzz/api/button.js" type="text/javascript">
    </script>
    </a></div>
    <div class="sbutton" id="gplusone">
    <script src="http://apis.google.com/js/plusone.js" type="text/javascript">
    </script>
    <g:plusone size="tall"></g:plusone></div>
    </div>

           >> Save / Simpan.

    Semoga bermanfaat. :D

    tag : share button, social bookmark, cara, membuat, addthis.com, twitter, facebook, berbagi

    sumber : http://rayhanzhampiet.blogspot.com/2011/09/cara-membuat-floating-share-button.html

    How To Edit Costumize Mobile Template Blogspot

    Tidak ada komentar


    I was surprised this morning when i visited a blog hosted on blogger with my mobile phone and got the mobile view displayed. Blogger launched it's mobile version about a couple of months back but only high end devices could be automatically detected and I decided to use a third party script from mobstac.

    There has been a lot of improvement on the new blogger mobile template as it now detects a wider range of mobile devices including mobile browsers like Opera Mini. You can as well edit the new mobile template and select your desired blogger mobile theme:

    -Log in to draft.blogger.com

    -Click on the settings drop down and select Template

    -Click the mobile template settings icon

    -If you haven't enabled it before, select "Yes, show a mobile version of your current template"

    - From here you can select from the available mobile theme.



    I hope the option to edit mobile theme HTML will be made available soon as the current mobile themes are somehow limited in terms of functionality.

    Google Adsense For Mobile

    Google adsense for mobile displays on the mobile theme if you have added at least one of your google adsense ads through blogger widget. I didn't enable ads between posts but I saw one adsense for mobile unit when viewing this blog with an Android smartphone. It seems ads are only enabled for high end mobile devices as I couldn't see them when viewing through Opera Mini. Just like I said earlier, certain improvements need to be done to perfect this new, exciting feature.



    this article was copied from the source below. For more information copy and paste the link on your address bar.


    source : http://www.doncaprio.com/2011/08/edt-customize-blogger-mobile-template.html

    tag : edit, costumize, blogspot, mobile, template, web, adsense mobile, android, apple, handphone blog