Cara Membuat Widget Box Sosmed Lengkap Keren V2 di Blog

Cara Membuat Widget Box Sosmed Lengkap Keren V2 di Blog ~ Halo sobat Blogger kembali lagi ya dengan saya Aldi Andreansyah selaku Admin dari Blog ini yang Alhamdulilah di postingan kali ini saya membagi kan lagi nih Box Sosmed V2 dari versi sebelum nya yaitu Box Sosmed V1 dan saya pasti nya membagi kan artikel bertentangan Blogging lagi yaa yaitu Cara Membuat Widget Box Sosmed Lengkap Keren V2 di Blog .

Mengapa saya mengatakan Widget Box Sosmed V2 ini karena di Versi ini di Box nya bisa dapat di katakan fitur Sosial Media nya Lengkap yaitu dengan Adanya Tampilan Akun Google+,FB,Twitter,Instagram,RSS Feeds dan Youtube .

Seperti biasa nya sebelum kita membuat Widget tersebut ada kala nya kita mengetahui tentang widget Sosmed V2 itu tersebut , Widget Sosmed V2 tersebut terdapat di dalam nya yaitu :

1 . Terdapat Box dan di dalam nya terdapat Menu Background (Latar Belakang) dan Border (Garis Tebal) seperti tampilan Box Sosmed V1 sebelumnya

2 . Terdapat Heading Teks Lengkap keren seperti V1 sebelum nya

Baca Artikel Terkait : Cara Membuat Heading Teks Judul Lengkap Keren di Blog

3 . Terdapat Tombol  Fanspage Facebook  

Baca Artikel Terkait : Cara Membuat Widget Box Like Fanspage Melayang di Blog

4 . Terdapat Tombol  di akun Twitter

Baca Artikel Terkait : Tutorial Membuat/Mengubah URL Akun Twitter

5 . Terdapat Tombol di akun Google+

6 . Terdapat Tombol RSS Feed akun sendiri

7 . Terdapat Tombol akun Intstagram sendiri

8. Terdapat tombol akun Youtube Sendiri

9 . Terdapat tombol akun Linkedin Sendiri

Oke mungkin cukup sekian pembahasan yang terdapat di dalam widget Box Sosmed V2 tersebut . Langkah selanjutnya oke kita Langsung saja kita ke tujuan Cara Membuat Widget Box Sosmed Lengkap Keren V2 nya di bawah :

1 .Langkah Pertama (Tata Letak)
 pastikan sobat sudah Log~In di akun Blogger -> Tata Letak -> Tambah Gadget isi Script HTML di bawah ini di menu yang di inginkan sobat lalu klik Simpan/save .

<div class="authorbox">

<h2 class="author-title">

Penulis

</h2>

<img alt="Penulis" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpE8Nz6UJdHEV2nAKBUXs7bk57e-CQceHggHVxMGXetQFGLG1VFjqlqXsyq1X3v2moSWZDEQfrcDtN1ypSkA7KYvUUq7heRjXd502Ryf_r0G9EThs9SA7ngeFpT3qdtEE8GyPS06ftrNU/s1600/1425552_947192545329368_741774408016981906_n.jpg=" data-src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlpE8Nz6UJdHEV2nAKBUXs7bk57e-CQceHggHVxMGXetQFGLG1VFjqlqXsyq1X3v2moSWZDEQfrcDtN1ypSkA7KYvUUq7heRjXd502Ryf_r0G9EThs9SA7ngeFpT3qdtEE8GyPS06ftrNU/s1600/1425552_947192545329368_741774408016981906_n.jpg" width="120" height="120" />

<a class="authorname" href="https://plus.google.com/+AldiAndreansyah" rel="Penulis" target="_blank" title="Aldi Andreansyah">Aldi Andreansyah</a>

<a class="authorname-url" href="https://plus.google.com/+aldiandreansyah" rel="Penulis" target="_blank" title="google.com/+aldiandreansyah">google.com/+aldiandreansyah</a>

<div class="sosmed-author">

<ul>

<li><a href="https://www.facebook.com/kivliiesholawaters" target="_blank" title="Facebook" rel="nofollow"><i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i></a></li>

<li><a href="https://twitter.com/mr_kivliie" target="_blank" title="Twitter" rel="nofollow"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a></li>

<li><a href="https://www.google.com/+aldiandreansyah" target="_blank" title="Google+" rel="nofollow"><i class="fa fa-google-plus-square fa-2x" aria-hidden="true"></i></a></li>

<li><a href="//www.youtube.com/c/aldiandreansyah" target="_blank" title="Youtube" rel="nofollow"><i class="fa fa-youtube-square fa-2x" aria-hidden="true"></i></a></li>

<li><a href="https://www.linkedin.com/in/aldiandreansyah" target="_blank" title="LinkedIn" rel="nofollow"><i class="fa fa-linkedin-square fa-2x" aria-hidden="true"></i></a></li>

<li><a href="https://www.instagram.com/kivliie_sholawaters" target="_blank" title="Instagram" rel="nofollow"><i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li>

</ul>

<div class="clear"></div>

<a class="button-author" href="http://www.blogger.com/follow-blog.g?blogID=7559214632370258218" target="_blank" title="Follow This Blog">Follow This Blog</a>

<a class="button-author" href="http://www.blogger.com/follow-blog.g?blogID=7559214632370258218" rel="nofollow" target="_blank" title="Subscribe This Blog">Subscribe This Blog <i aria-hidden="true" class="fa fa-paper-plane"></i></a>

</div>

</div>

Keterangan : Ubah Teks yang saya sudah warnai dengan URL URL Sobat

2 . Langkah kedua (Template)
letak kan lah javascript font awesome ini di bawah tepat di atas </head> jika sobat sudah memiliki javascript font awesome nya sobat pun dapat tidak menaruh nya lagi .

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

3 . Langkah ketiga (Template)
Letakkan CSS di bawah ini tepat di atas </head> atau b:skin atau </style>

<style type='text/css'>
.sosmed-author,a.authorname,h2.author-title,a.authorname-url{display:block;text-align:center}
.authorbox{width:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqHfj3yqUKzUisUpL_y4xryQHP9wuRBgY6-R7NxGVTAi2ncOsLf4wUgqmcNV4Ws8dpl7jgerwm93MSfpBQs8p5WRzJWgeHMKMUB375tmUdHD4nyfUPGWul-9N8biMFudGTJGaINKQdi68/s300-fcrop64=1/,00001ad4fffff235) top center no-repeat #fff;border:1px solid #dedede;border-radius:3px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px 0 0;margin:0 auto;}
h2.author-title{font-weight:bold;text-decoration:none;margin:0 auto 10px;font-size:22px;color:#fff!important}
.authorbox img{margin:55px auto 0;border-radius:100%;display:block}
a.authorname{margin:10px auto;font-weight:400;font-size:20px!important;text-decoration:none;}
a.authorname-url{margin:0 auto 10px;font-weight:400;font-size:16px!important;text-decoration:none;}
.sosmed-author li,.sosmed-author ul{list-style:none}
.sosmed-author ul{margin:0!important;padding:0!important}
.sosmed-author{margin:0 auto!important;padding:10px 0;background:#dfdfdf;border-top:1px solid #dedede}
.sosmed-author li{display:inline-block;margin-right:10px}
.sosmed-author li:last-child{margin-right:0}
.sosmed-author li a,a.authorname,a.authorname-url{color:#555!important;transition:all .4s ease-out}
.sosmed-author li a:hover,a.authorname:hover,a.authorname-url:hover{color:#111!important}
a.button-author{display:block;background:#4d90fe;border:1px solid #3079ed;color:#fff!important;font-weight:bold;font-size:16px!important;margin:10px 10px 0;padding:5px;text-align:center;border-radius:3px;transition:all .4s ease-out;text-decoration:none}
a.button-author:hover{background:#357ae8;border:1px solid #2f5bb7}
</style>

4 . Langkah keempat (Template)
Letakkan Javascript atau JQuery di bawah tepat di atas </body> fungsi memasang JQuery ini untuk Mendeteksi akun Google+ sobat

<script>
//<![CDATA[
var imgDefer = document.getElementsByTagName("img");
for (var i = 0; i < imgDefer.length; i++) {
    if (imgDefer[i].getAttribute("data-src")) {
        imgDefer[i].setAttribute("src", imgDefer[i].getAttribute("data-src"));
    }
}
//]]>
</script>

Mungkin cukup sekian Artikel Cara Membuat Widget Sosmed Lengkap Keren V2 di Blog , Semoga Bermanfaat dan Work 100% , Amin

Share this post