September 2018

Sunday, 30 September 2018

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.

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:


Follow @Ahmadhanafiah

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;


Follow @Ahmadhanafiah

Ukuran default hanya menampilkan nama

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

Hasilnya :


Follow @Ahmadhanafiah

Ukuran besar

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

hasilnya:


Follow @Ahmadhanafiah

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

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>

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.

Saturday, 29 September 2018

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.

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:

Tweet

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;

Tweet

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

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">

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

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>

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.

Friday, 28 September 2018

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:

Copy paste kode script di bawah ini di atas

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>

Kemudian kode button sharenya, untuk

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>

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>

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.

Thursday, 27 September 2018

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:

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

Akan terbuka halaman Plugin sosial

Pilih tombol suka

Scrol ke bawah, jangan diubah url

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

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

Ukuran layout dapat dipilih besar atau kecil.

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

Setelah selesai klik tombol "dapatkan kode"

Copy paste kode di website, d sini;

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>

Blogger

Klik "Tata Letak"

Klik add gadget

Pilih html/javascript

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>

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.

Wednesday, 26 September 2018

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 ;

Buka Blogger

Klik "Tata Letak"

Klik edit bar "crosscol"

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

Copy paste kode tersebut di sini

selesai

Hasilnya akan seperti di bawah ini:

Preview

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.

	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

	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

	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

	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

Sunday, 30 September 2018

Update Button Follow Twitter Untuk Di Blog Dan Website

Artikel Terkait

Saturday, 29 September 2018

Update Button Share Twitter Untuk Di Blog Dan Website

Artikel Terkait

Friday, 28 September 2018

Update Button Share Facebook Untuk Di Blog Dan Website

Artikel Terkait

Thursday, 27 September 2018

Update Button Follow Facebook Untuk Di Blog Dan Website

Artikel Terkait

Wednesday, 26 September 2018

Blogger - Membuat Menu Bar Drop Drown

Artikel Terkait:

Entri Populer

Blog Archive