Cara Buat URL Gambar bp.blogspot

Salgetra|Cara Menampilan URL yang aktif digunakan dalam kode HTML pada blogspot,untuk mendapat URL gambar dengan cara berbeda bisa saja melalui Photobucket,picasa via google,flickr via yahoo,dan banyak yang lain.Namun, kali ini kita unggah/upload dengan menggunakan blogspot itu sendiri yang akan menjadi format bp.blogspot.

Ada beberapa langkah untuk mendapat URL gambar bp.blogspot.com :

1.Yang sudah pasti buka blogspot.com

2.Ada bisa menggunakan 2 tap bisa anda menggunaka pos dan menggunakan laman

3.Upload gambar yang anda inginkan.

4.Yang terblock biru, itu lah URL gambar yang kita gunaka melalui blogspot.com berformat bp.blogpsot.

Demikain cara mengunakan URL melalui blogspot.Mohon bantuannya untuk mengembangkan blog sederhana ini.

Membuat Contact Us Bawaan Blogger

Salgetra|Membuat form contact sangatlah penting bagi pula terutama bagi blog/web yang memiliki banyak pengunjung.Untuk memudahkan membuat form contact para pihak blogger telah menyediakan widget,ada banyak cara untuk membuat form contact diantaranya dengan mengunakan pihak ketiga 123contactform.com untuk caranya Klik disini,

Bisa jadi dengan adanya form contact kita mendapat lowongan kerja :-).Kita hanya memerlukan beberapa langkah untuk membuat contact formnya:

1. Buka halaman blogger nya,akan muncul sebuah pilihan,kemudian anda pilih Tata letak/layout.
2. Ada terdapat tulisan 'tambah gadget/add a gadget',disitulah dimana yang anda inginkan meletakkan contact form nya.
3. Setelah anda klik tambah gadget akan muncul layar kedua.
4. Disebelah kiri ada terdapat tulisan 'gadget lainnya' dan klik pada tulisan tersebut
5. Yang terakhir anda hanya klik 'fotmulir kontak/contact form'

Jika anda kurang paham anda bisa lihat gambar dibawah

Cara Membuat Contact Us Diblog via 123contactform

Salgetra|Form Contact us ialah pilihan lain bagi pengunjung blog kita untuk berkomunikasi dengan cara melalui pesan pribadi kepada penulis/karangan blog.Agar mudah berkomikasi tentang hal-hal yang penting atau semacamnya.Form Contact memiliki kekurangan antaranya para pengunjung bisa iseng mengirim pesan yang bisa membuat kita kesal,itu hanya sebagainnya.

Cara membuat layanan form contact us memiliki banya cara membuatnya,antaranya pihak blogger memiliki gadget bawaan untuk membuat form contact us caranya Klik disini.
Namun kali ini kita membuat form contact melalui 123contactform.

1. Masuk ke 123contactform
2. Klik Sign Up For Free
3. Setelah itu anda klik BASIC FREE ALWAYS
4. Isi formulir sign up nya
5. klik NEW FORM
6. klik icon BLOGGER sebelah kiri,
7. Terakhir anda Copas code scirpt HTML nya, letak di laman jangan lupa anda klik HTML di laman jangan dalam posisi COMPOSE.

Lebih bagus anda hilangkan kolom komentar untuk laman Form contact us nya.

Membuat Tombol Share Media Responisve

Pada bagian ini yaitu cara buat tombol share bersifat responsive bisa juga digunakan pada template yang tidak responsive.Tombol share ke sosial media adalah sebuah fiture yang bisa dikatakan penting karena bisa untuk memperluas penyebaran artikel blog sobat, contohnya seperti tombol vote google plus, katanya, tombol vote tersebut dapat memperbaiki peringkat blog kita di serp.Widget share social media ini terdiri atas 5 tombol, yaitu tombol share facebook, twitter, google plus, linkedin, dan pint it, berikut cara pembuatannya:

1.Silahkan masuk ke Dasboard www.blogger.com lalu ke Template > Edit HTML

2.Meletakkan CSS untuk widget social sharingnya, letakkan di atas]]></b:skin>

.sharing-post{margin:20px auto;overflow: hidden;}
.entry-social{overflow: hidden;}
.entry-social a{display: block;padding:0px;color: #FFFFFF !important;font-weight: 300;font-size:12px;}
.entry-social div{float: left;margin-right: 5px;width:95px;background-color: #ccc;margin-top:5px;transition:all .4s ease-in-out;}
.entry-social .title-sharing-post{background:none;padding: 4px 5px 4px 0;width:130px;font-size:20px;font-family: 'Trebuchet MS', sans-serif;font-weight:400;text-transform:uppercase;display:none}
.entry-social .fb{padding: 7px 5px 7px 7px;width:130px;}
.entry-social .fb:hover{background-color: #324b81;}
.entry-social .twitter,.entry-social .gplus{padding: 7px 5px 2px 7px;}
.entry-social .twitter:hover{background-color: #01A7dE;}
.entry-social .gplus:hover{background-color: #BA3227;}
.entry-social .linkedin{padding: 7px 5px 0 7px;height:27px;}
.entry-social .linkedin:hover{background-color: #136F9B;}
.entry-social div.pinterest{width:107px;}
.entry-social .pinterest a{padding: 7px 7px 2px 7px}
.entry-social .pinterest a:hover{background-color: #B01C23;}

3.Copy kode dibawah ini,dan paste kodenya dibawah<div class='post-footer-line post-footer-line-1'> atau dibawah <data:post.body/>

<div class='sharing-post'>

<div class='entry-social'>

<div class='title-sharing-post'>Share This:</div>

<div class='fb'>

    <span class='fb-like' data-layout='button_count' data-send='true' data-show-faces='false' data-width='90' expr:data-href='data:post.url'></span>

  </div>

<div class='twitter'>

<a class='twitter-share-button' data-count='horizontal' data-related='' data-via='' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' title='Share via Twitter'>Tweet</a>

  </div>

<div class='gplus'>

<span class='g-plusone' data-count='true' data-size='medium' expr:data-href='data:post.url'>

</span>

  </div>

<div class='linkedin'>

    <script expr:data-url='data:post.url' type='IN/Share'></script>

  </div>

<div class='pinterest'>

<a expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=pinterest&quot;' rel='nofollow' target='_blank' title='Pin It'><img alt='pinit' height='21' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSOLfxpHnYQOFWnF-kRrH1NVKeR1ouXJpvbmcSI4aVlBZE3lUFYpTNxP_TM8Qe0TTzYrjn6RcW5wGNxrcnNGNVNfO9Fnrwzc3nLOCKcLcVfbup1uLUeX2creBftG6AGKQHQ3j_lmP5zpXS/s1600/PinExt.png' title='Pin It' width='43'/></a>

</div>

</div>

    </div>

<div style='clear:both;'></div>

4.Copy kodenya,lewati langkah ini jika di template sobat sudah ada javascript tombol share facebook, twitter, google plus, dan linkedin, letakkan kode javascript di bawah ini tepat diatas kode </body>

<div id='fb-root'/>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;js.async=true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Javascript twitter, google plus, dan linkedin

<script async='async' src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
<script async='async' src='//platform.linkedin.com/in.js' type='text/javascript'/>
<script type='text/javascript'>
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

Sekian dan berterimakasih atas kunjungan anda di S4khra, mohon bantuan untuk perkembangan situs ini.

Kolom Komentar Facebook Responsive

Salgetra|Sangat mudah untuk membuat kolom komentar facebook  di blog,apabila pihak facebook telah menyediakan plugin untuk kolom komentar  facebook di blog.Kali ini kita akan memodifikasi kolom komentar diblog agar menjadi responsive,pengunjung bisa mengakses blog dalam bentuk apapun dalam berkomentar diblog termaksud mengunakan smartphone.Cara pembuatannya hamper sama dengan komentar facebook yang lainnya,kita hanya menambah width (lebar) menjadi 100% dan menambah java script agar width (lebar) sesuai yang kita inginkan.Apabila kita tidak menambah java script ukuran width(lebar) tidak akan berkerja.

Berikut cara buat kolom komentar bersifat responsive:

1.Pertama langsung ke edit template,lalu pasang kode ini dibawah kode <head>

<meta content='FB Profil id' property='fb:admins'/>
<meta content='app id' property='fb:app_id'/>

Silahkan ganti FB profil id dengan id facebook kamu begitu juga dengan app id

2.Kemudian anda cari </head> untuk mempermudah gunakan ' crtl+f ',copy kode berikut lalu paste diatas </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='FB profil id' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
$(selectTab).removeClass(&quot;inactive-select-tab&quot;);
$(&quot;.comments-page&quot;).hide();
$(selectTab + &quot;-page&quot;).show();
}
</script>

ganti FB profil id dengan id facebook anda

3.Masih di </head>,copy kode dibawah ini,diatas </head>

<script type='text/javascript'>
    //<![CDATA[
    $(window).bind("load resize", function(){
      var url = location.protocol+'//'+location.host+location.pathname;
      var containercm_width = $('#container-commentfb').width();
        $('#container-commentfb').html('<div class="fb-comments" ' +
        'data-href="'+url+'"' +
        ' width="' + containercm_width + '" data-num-posts="10"></div>');
        FB.XFBML.parse( );
    });
    //]]>
    </script>

4.Langkah terakhir cari kode ' <div class='comments' id='comments'> ',kemudian copy kode berikut,dibawah kode ' <div class='comments' id='comments'> ' dan save tamplatenya lihat hasilnya cara memperkecil browsernya apa kolom komentarnya berkerja seperti apa yang kita inginkan

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<div id='container-commentfb' style='width: 100%;'><fb:comments expr:href='data:post.url' num_posts='10' width='500'/></div>
</b:if>

num_posts='10' jumlah komentar yang ingin ditampilan sedangkan width;'500' adalah lebar kolom komentar facebooknya.
Demikian artikel ini,semoga bisa berguna buat anda. jangan lupa dishare dan komen.