Tunggu Sebentar...

10/16/2016

Cara Membuat Widget Box Sosmed Lengkap Keren V2 di Blog

Baca Juga



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

3 . Terdapat Tombol  Fanspage Facebook  

4 . Terdapat Tombol  di 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://2.bp.blogspot.com/-U7qQVPPosyY/V7MFUYwQCgI/AAAAAAAABb8/h62NbRRWVVYkqYiWbnDdL2oTysJUxslawCLcB/s1600/1425552_947192545329368_741774408016981906_n.jpg=" data-src="https://2.bp.blogspot.com/-U7qQVPPosyY/V7MFUYwQCgI/AAAAAAAABb8/h62NbRRWVVYkqYiWbnDdL2oTysJUxslawCLcB/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://lh3.googleusercontent.com/lUQcK29uPNQzy9gVVKuCuVIso6amDmTXH1rsbIXukGeBp0BOJIYtwCE8BbNTVv_UArIBFg=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

Artikel Terkait

Seorang Pelajar yang Ingin Berbagi Ilmu Pengalaman yang diketahui nya kepada seluruh Umat Manusia, dan Semoga Ilmu yang ia bagikan tersebut bermanfaat. Amin

11 komentar

Wah keren juga nih, kebetulan ane lagi bingung mau nyari widget seperti itu...
Makasih mas sangat membantu sekali....

iya mas sama sama semoga bermanfaat

Mantap Tutornya Bos...
ijin nyimak

Muter2 ane nyari scriptnya gak temu2 ehh ketemu diblog sini :D
makasih gan makin keren blog saya

Work gan keren banget widgetnya makasih ya

bagus, tapi nggak berwarna, kalau ganti warnanya bisa gan.

mantap gan tutorialnya, nanti bias saya terrapin di blog saya

Makasih tutorial nya gan mantep nih biar blog lebih keren lagi hehe

================================================================
~ Jika ingin men Copy Paste harap masuk kan sumber link artikel saya di postingan sobat
~Dilarang Berkomentar link aktif , jika ada yang memasuk kan link aktif maka kami akan Hapus dan kami anggap Spam
~ Komentar lah dengan Bahasa yang Baik dan Relevan dengan sesuai artikel terkait tersebut . Terimakasih
================================================================
EmoticonEmoticon