Sunday 30 September 2018

Update Button Follow Twitter Untuk Di Blog Dan Website

Update Button Follow Twitter Untuk Di Blog Dan Website




Kemaren sudah dibahas membuat button share Twitter di blog dan website, hari ini membahas cara memasang button follow Twitter, merujuk dari update button show di Twitter Developer. Twitter Developer membuat empat model tampilan untuk button folow, pertama tampilan default, yaitu menampilkan nama dan jumlah follower. Kedua menampilkan nama tanpa jumlah folowwer. Dan yang ketiga, tampilan screen icon twitter tanpa username dan tanpa jumlah follower, Dan yang terakhir tampilan untuk ukuran besar, ukuran itu untuk tampilan ketiga model tampilan tadi, dapat ditampilkan dalan ukuran kecil dan besar.




Antara ukuran besar dengan ukuran yang kecil perbedaannya tidak terlalu besar. hanya sedikit lebih besar dan sedikit lebih kecil. Untuk lebih jelasnya bisa dilihat di Twitter Deeveloper, sekalian untuk memudahkan pemahaman dari a[a yang akan dijelaskan disini tentang cara membuatnya. Klik link ini, "https://developer.twitter.com/en/docs".


Sekarang kita akan langsung pada tahapan kerjanya. Canya sebagai berikut.


  1. Untuk Tampilan default, ganti nama username dengan username Anda; 

    <a class="twitter-follow-button"
  href="https://twitter.com/Ahmadhanafiah">
Follow @Ahmadhanafiah</a>


    hasilnya seperti ini:


  2. Ukuran default tanpa menampilkan nama dn jumlah follower; 

    <a class="twitter-follow-button"
  href="https://twitter.com/Ahmadhanafiah" data-show-screen-name="false" data-show-count="false">
Follow @Ahmadhanafiah</a>


    Hasilnya seperti ini;


  3. Ukuran default hanya menampilkan nama 

    <a class="twitter-follow-button"
  href="https://twitter.com/Ahmadhanafiah" data-show-count="false">
Follow @Ahmadhanafiah</a>


    Hasilnya :


  4. Ukuran besar 

    <a class="twitter-follow-button"
  href="https://twitter.com/Ahmadhanafiah" data-size="large">
Follow @Ahmadhanafiah</a>


    hasilnya:




  5. Terakhir copy paste kode di bawah ini, di bawah <body> atau dimana saja yang sesuai tata letak yang sudah Anda buat deainnya..dengan desain website Anda


  6. tambahkan kode di bawah ini di antara </title> dan </head> 

     <script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>


  7. selesai


Dari beberapa tampilan disana, Anda tinggal memilih tampilan yang mana yang Anda sukai untuk ditampilkan di blog ataupun di website Anda.


Demikan cara menambahkan button share twitter dari Twitter Developer.


Semoga bermanfaat.




Artikel Terkait



Update Button Follow Twitter Untuk Di Blog Dan Website
Update Button Share Twitter Untuk Di Blog Dan Website
Fungsi Night Mode Pada Platform Media Sosial
Kode Akses Akun Twitter Jika Handphone Hilang
Protect Twitter From Adult Account
Cara Mengetahui Akun Twitter Palsu
Twitter - Tips Cara Setting data pengguna
Tip Memasang Lencana Profile Twitter di Blog Dan Website
Wow! Twitter Bisa 2 x 140 Karakter tweet
Tips Memasang Postingan Twitter di Blog Dan Website
di No comments:

Saturday 29 September 2018

Update Button Share Twitter Untuk Di Blog Dan Website

Update Button Share Twitter Untuk Di Blog Dan Website




Twitter Developer untuk tombol share, ada tiga hal yang harus ditambahkan, pertama link rel, javascript dan kode button share. Untuk membuat kode tombol berbeda dengan facebook yang memberikan kemudahan dengan pebuatan secara automatis, sedangkan untk di Twitter, harus diubah secara manual.




Untuk lebih jelasnya langsung saja ke cara pembuatan tombol share Twitter, Dan sambil mengikuti tahapan langkahnya setiap proses, bisa dilihat di Twitter Deeveloper, agar dapat dipahami dengan penjelasan Twitter di sana, klik link ini, "https://developer.twitter.com/en/docs". Sedangkan di sini langsung pada pembuatannya.


Untuk membuat plugin button share halaman website to Twitter, caranya sebagai berikut.


  1. Desain tombol share Twitter, ada dua, yang satu ukuran default, dan satu lagi ukuran besar. Untuk ukuran default kodenya seperti ini; 

    <a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Update%20Button%20Share%20Twitter%20Untuk%20Di%20Blog%20Dan%20Website">Tweet</a>


    hasilnya seperti ini:


  2. Ukuran besar; 

    <a class="twitter-share-button" href="https://twitter.com/intent/tweet?text=Update%20Button%20Share%20Twitter%20Untuk%20Di%20Blog%20Dan%20Website" data-size="large">Tweet</a>


    Hasilnya seperti ini;


  3. Copy paste kode tersebut di bawah <body> atau dimana saja yang sesuai tata letak yang sudah Anda buat deainnya..dengan desain website Anda


  4. tambahkan kode di bawah ini di antara </title> dan </head> 

    <link rel="canonical" href="https://aha-sarangkomputer.blogspot.com/2018/09/update-button-share-twitter-untuk-di-blog-dan-website.html">
<link rel="me" href="/web/tweet-button">


  5. Ganti url link "https://aha-sarangkomputer.blogspot.com/2018/09/update-button-share-twitter-untuk-di-blog-dan-website.html" dengan url link website Anda


  6. terakhir, tambahkan kode di bawah ini, di antara </head> dan <bodyd>; 

     <script>window.twttr = (function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0],
    t = window.twttr || {};
  if (d.getElementById(id)) return t;
  js = d.createElement(s);
  js.id = id;
  js.src = "https://platform.twitter.com/widgets.js";
  fjs.parentNode.insertBefore(js, fjs);

  t._e = [];
  t.ready = function(f) {
    t._e.push(f);
  };

  return t;
}(document, "script", "twitter-wjs"));</script>


  7. selesai


Untuk di blogspot, baik versi desktop maupun versi mobile, penambahan tombol share twitter tidak dibutuhkan lagi, karena blogger sudah menambahkan fitur tombol share, bahkan untuk ponsel smartphone, diaplikasi browsernya sudah menyediakan fitur share. Sedangkan untuk website, yang wajib ada button share, yaitu pada versi desktop, sedangkan untuk versi mobile dapat dipasangkan atau juga diabaikan, karena sudah bisa mengandalkan fitur share pada aplikasi browser ponsel. Namun semua sangat tergantung ANda dan keinginan klien Anda, yang dibuatkan websitenya.




Demikan cara menambahkan button share twitter dari Twitter Developer.

Semoga bermanfaat.




Artikel Terkait



Update Button Share Twitter Untuk Di Blog Dan Website
Fungsi Night Mode Pada Platform Media Sosial
Kode Akses Akun Twitter Jika Handphone Hilang
Protect Twitter From Adult Account
Cara Mengetahui Akun Twitter Palsu
Twitter - Tips Cara Setting data pengguna
Tip Memasang Lencana Profile Twitter di Blog Dan Website
Wow! Twitter Bisa 2 x 140 Karakter tweet
Tips Memasang Postingan Twitter di Blog Dan Website
di No comments:

Friday 28 September 2018

Update Button Share Facebook Untuk Di Blog Dan Website

Update Button Share Facebook Untuk Di Blog Dan Website


Mobile page Web page
Bagikan
Bagikan


Update Facebook Developer untuk tombol share, memberikan kode dua versi, untuk website dan webmobile, juga dengan tiga pilihan tampilan button, box-count, button-count dan button, dengan dua ukuran button. Button share sekarang mungkin sudah menjadi seperti aksesories saja, karena fungsinya sudah dapat tergantikan oleh aplikasi share pada semua merk ponsel sekarang. Sedangkan untuk di pada website ini masih tetap dibutuhkan bagi pembacanya yang membuka website melalui pc atau laptop.




Namun untuk di blogspot, blogspot sendiri sudah tersedia button share sehingga sudah pasti tidak dibutuhkan lagi. Untuk memasang button share di blogspot. Sedangkan pada desain website Anda harus mendapatkan kode pluginnya, untuk membuat atau mendapatkan kode plugin button share halamn website Anda, maka caranya, Anda dapat mengunjungi situs developer Facebook. Untuk masuk ke web Facebook Developer, linknya ini, "https://developers.facebook.com/docs/plugins/". Di sana plugin yang tersedia yaitu, plugin group, plugin fanpage ( halaman ), semat post, semat video, semat image, plugin komentar dan plugin like. Dan yang terbaru adalah plugin group.


Untuk membuat plugin button share halaman website to Facebook, Anda dapat menggunakan fitur plugin share-button dengan tampilan button share default. Untuk button share pada website dengan web mobile berbeda dalam membuat kode pluginnya, namun kode script untuk keduanya sama. Caranya sangat seperti cara membuat button like, Anda hanya mengisi link website, mengatur ukuran dan model kemudian klik tombol mendapatkan kode. Selanjutnya kode tersebut Anda copy paste ke halaman webpage Anda mengikuti tata letak.


Disini kami coba buat untuk lebih memudahkan lagi cara memasangkan kode button share tersebut pada halaman website Anda. Tahapan langkahnya sebagai berikut:


  1. Copy paste kode script di bawah ini di atas


  2. setelah masuk, buka windows baru dibrowser, ketik url facebook developer diatas <body> ; 

     <div id="fb-root"></div>
  <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.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>


  3. Kemudian kode button sharenya, untuk

    1. Website

      copy paste kode dibawah ini pada tempat yang Anda inginkan di antara <body> dan </body>; 

      <div class="fb-share-button" data-href="http://www. namadomain.com/namajudul.html( atau)url halaman website" data-layout="button" data-size="large" data-mobile-iframe="false"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.namadomain.com%2F2018%2F09%2Fnamajudul.html&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Bagikan</a></div>


    2. Web mobile

      copy paste kode dibawah ini pada tempat yang Anda inginkan di antara <body> dan </body> atau di media display css body; 

      <div class="fb-share-button" data-href="https://www.namadomain.com/namajudul.html" data-layout="button" data-size="large" data-mobile-iframe="true"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.namadomain.com%2F2018%2F09%2Fnamajudul.html&amp;src=sdkpreparse" class="fb-xfbml-parse-ignore">Bagikan</a></div>


  4. Selesai


Sekarang tombol share sudah jadi, langkah selanjutnya, Anda tinggal menguji coba hasilnya. kemudian bandingkan dengan hasil dari tombol share yang ada di perangkat smartphone Anda untuk membagikan update postingan ke halaman facebook Anda. Karena yang dibuat adalah desain default, maka untuk membuat tombol share ke sosial media lainnya, harus presisi lebar dan panjangnya, agar match pada tampilan di web page Anda.




Demikan cara menambahkan button share profile facebook dari update terbaru facebook developer.


Semoga bermanfaat.



Artikel Terkait



Update Button Share Facebook Untuk Di Blog Dan Website
Update Button Follow Facebook Untuk Di Blog Dan Website
Cara Aktifkan 2 Faktor Keamanan Facebook
Berkarir Di Facebook
Cara Menghasilkan Uang Di Facebook
Facebook Tips Cara Settings Data Pengguna
Snooze Button Fitur Baru Facebook
Tips Memulihkan Account Facebook Karena Handphone Hilang Atau Dicuri
Tips Cara Sign Up Facebook Yang Baik Dan Benar
Tip Cara Mengetahui Asli Atau Palsu Profile Facebook
Ujicoba Photo Telanjang Oleh Facebook
Tip Tambah Plugin FanPage Facebook
Tips Create FanPage Facebook
di No comments:

Thursday 27 September 2018

Update Button Follow Facebook Untuk Di Blog Dan Website

Update Button Follow Facebook Untuk Di Blog Dan Website




Facebook Developer telah membuat update per Februari 2018 untuk plugin Facebook. Plugin Facebook ini fasilitas fitur untuk menautkan link Facebook untuk disematkan di blog dan website. Untuk yang sekarang plugin sudah dapat automatis dapat di copy paste code, kemudian dipasangkan di blog atau website. Yang dihilangkan plugin Follow Akun Facebook atau Profile Facebook, plugin ini diganti dengan plugin button like, like-button.




Kode plugin sudah auto copy kode, karena untuk mendapatkan kode Anda harus login ke web Facebook Developer, untuk masuk ke web Facebook Developer, linknya ini, "https://developers.facebook.com/docs/plugins/". Di sana plugin yang tersedia yaitu, plugin group, plugin fanpage ( halaman ), semat post, semat video, semat image, plugin komentar dan plugin like. Dan yang terbaru adalah plugin group. Untuk mengaktifkan plugin ini, facebook menyediakan dua mode, menggunakan iframe dan menggunakan javascript.


Untuk membuat plugin button follow Profile Facebook, Anda dapat menggunakan fitur plugin like-button dengan tampilan button like baku atau ukuran default, untuk membuat setelan Anda tinggal mencentang atau tidak mencentak checkbox sebelum melakukan set kode. Untuk lebih jelasnya, caranya sebagai berikut:


  1. Login ke akun facebbok di pc atau Laptop


  2. setelah masuk, buka windows baru dibrowser, ketik url facebook developer diatas


  3. Akan terbuka halaman Plugin sosial


  4. Pilih tombol suka


  5. Scrol ke bawah, jangan diubah url


  6. kemudian bisa diisi lebar / width dengan ukuran pixel, atau daoat dikosongkan untuk ukuran default.


  7. Tata letak, dapat disesuaikan dengan keinginan, dapat memilih box_count, button_counts atau button


  8. Ukuran layout dapat dipilih besar atau kecil.


  9. Wajah teman Facebook dapat ditampilkan atau tidak, untuk tidak ingin ditampilkan kosongkan checkbox


  10. Setelah selesai klik tombol "dapatkan kode"


  11. Copy paste kode di website, d sini;

    1. Website 

      <html>
<head>
  <title>Your Website Title</title>
    <!-- You can use open graph tags to customize link previews.
    Learn more: https://developers.facebook.com/docs/sharing/webmasters -->
  <meta property="og:url"           content="https://www.your-domain.com/your-page.html" />
  <meta property="og:type"          content="website" />
  <meta property="og:title"         content="Your Website Title" />
  <meta property="og:description"   content="Your description" />
  <meta property="og:image"         content="https://www.your-domain.com/path/image.jpg" />
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <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.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your like button code -->
  <div class="fb-like" 
    data-href="https://www.your-domain.com/your-page.html" 
    data-layout="standard" 
    data-action="like" 
    data-show-faces="true">
  </div>

</body>
</html>
</pre>


    2. Blogger



      1. Klik "Tata Letak"


      2. Klik add gadget


      3. Pilih html/javascript


      4. copy paste kode yang didapatkan disana semuanya di sini: 

        <div class="fb-like" data-href="https://yourname.blogspot.com/hyperlink.html" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div>
<div id="fb-root"></div>
  <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.src = "https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>


  12. selesai


Untuk yang lainnya seperti membagikan update postingan ke halaman facebook, dapat dibuatkan di Facebook developer menggunakan javascript dan atau dapat langsung di fitur tanda titik tiga vertikal disebelah kanan postingan, dengan mode menggunakan iframe.




Demikan cara menambahkan button follow profile facebook dari update terbaru facebook developer.


Semoga bermanfaat.



Artikel Terkait



Update Button Follow Facebook Untuk Di Blog Dan Website
Cara Aktifkan 2 Faktor Keamanan Facebook
Berkarir Di Facebook
Cara Menghasilkan Uang Di Facebook
Facebook Tips Cara Settings Data Pengguna
Snooze Button Fitur Baru Facebook
Tips Memulihkan Account Facebook Karena Handphone Hilang Atau Dicuri
Tips Cara Sign Up Facebook Yang Baik Dan Benar
Tip Cara Mengetahui Asli Atau Palsu Profile Facebook
Ujicoba Photo Telanjang Oleh Facebook
Tip Tambah Plugin FanPage Facebook
Tips Create FanPage Facebook
di No comments:

Wednesday 26 September 2018

Blogger - Membuat Menu Bar Drop Drown

Blogger - Membuat Menu Bar Drop Drown


Kembali membahas desain blogger, kali ini membuat menu bar pada Blogger yang disesuaikan dengan keinginan tidak menggunakan menu bar standard yang dikeluarkan gadget Blogger. Menu bar yang dibahas adalah membuat membuat menu bar drop down dimana desain ini pun dapat diterapkan di desain website.


Pada beberapa bulan yang lalu telah dibahas cara membuat menu bar atau menu tab yang standard, yaitu gadget menu bar keluaran blogger, postingan pada tanggal 06 Maret 2018, dengan judul "How To Create Menu Tabs, yang dapat dibaca lagi di sini. Sekarang akan dibahas menu bar cutomize dengan membuat fungsi drop dwonn.


Membuat menu bar drop down, Anda harus membuat css agar menu bar drop dwon berfungsi. Dalam pembahasannya, dari mulai membuat kode css sampai cara memasangnya di template blogger atau tata letak blogger. Yang pertama cara kode css agar menu bar drop down bekerja dengan baik.


Untuk membuat kode css menu dropdown caranya sebagai berikut 


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.navbar {
    overflow: hidden;
    background-color: #32cd32;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.dropdown {
    float: left;
    overflow: hidden;
}

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    
}

.dropdown-content a:hover {
    background-color: #32cd32;
    color:red;
}

.dropdown:hover .dropdown-content {
    display: block;
    
}
</style>


<div class="navbar">
  <a href="#home">Home</a>
  <a href="#news">Profile</a>
  <div class="dropdown">
    <button class="dropbtn">Articles
      <i class="fa fa-caret-down"></i>
    </button>
    <div class="dropdown-content">
      <a href="#">Aha Sarang Komputer</a>
      <a href="#">Aha Dua Permata</a>
      <a href="#">Bila</a>
    </div>
  </div> 
</div>



Pada variable layout label div Anda ubah sesuai apa yang Anda inginkan pada judulnya, seperti "home", "profile" dan lain - lain. Begitupun pada kode warna hexsadesimal, dapat diganti dengan warna lain atau pun dengan kode warna rgb. Kemudian kode tersebut simpan di ;


  1. Buka Blogger


  2. Klik "Tata Letak"


  3. Klik edit bar "crosscol"


  4. Kemudian akan terbuka halaman gadgets Blogger, pilih "html/javascript"


  5. Copy paste kode tersebut di sini


  6. selesai


Hasilnya akan seperti di bawah ini:




Kode tersebut juga dapat di simpat di template, dengan meng-copy kode di bawah <style> dan di atas </style> ke template di bawah skin style. Namun cara ini tidak praktis, jadi sebaiknya Anda yang masih pemula tidak menyimpan di template, karena jika ada kode di template yang tidak sengaja terhapus dengan tidak sengaja dan Anda tidak tahu mana yang terhapus, akan menjadi maslah pada tampilan bloggspot Anda. Jadi menyimpan di "Tata Letak" itu lebih praktis.





Untuk memasang menu bar drop down pada desain website, kode css, yaitu kode antara <style> dan di atas </style> di simpan di bawah </title> dan di atas </head>. Sedangkan kode layout di bawah <body>.


Demikian cara membuat membuat desain kostum atau customize menu bar dengan menggunakan menu bar drop down.


Semoga bermanfaat dan sukses.




Artikel Terkait:

di No comments: