Cara Membuat Widget Sosmed Lengkap Keren ala Simplify 2 di Blog

Cara Membuat Widget Sosmed Lengkap Keren ala Simplify 2 di Blog ~ Halo sobat AA Sciences kembali lagi ya dengan saya Aldi Andreansyah yang dimana menjadi Admin dan juga Penulis di Blog ini hehe, Alhamdulilah nih sobat AS saya di kali ini mulai lagi aktif pada sebelum nya saya sibuk sekali soal nya dengan belajar edit edit template agar template yang saya gunakan menjadi bagus dan Alhamdulilah ini laah hasil nya walaupun template beli ( Premium ) hehe .
Pribadi keutamaan saya , saya lebih mementingkan kenyamanan pengunjung agar enak melihat blog saya tersebut dan saya harapkan sobat setia pembaca AA Sciences memang menyukai tampilan di Blog saya ini ya hehe .

Membuat atau menambah Widget Sosmed Lengkap Keren memang adalah salah satu cara untuk mempercantik tampilan blog kita sendiri dengan ada nya akun sosial media tersebut,sebelum kita memasang widget sosmed lengkap keren ini ada kalanya terlebih dahulu memiliki akun sosial media ini karena bertujuan untuk mempermudah para pembaca maupun pengunjung setia yang mampir di blog kita mengetahui bahwa kita memiliki akun sosial media .

Widget Sosmed Lengkap Keren ala Simplify 2 ini sebelumnya di gunakan/bawaan dari template simplify 2 yang dimana template ini di buat oleh salah satu seorang yang tidak asing lagi yang menurut saya dia ahli dalam web designer yaitu siapa lagi kalo bukan mbak Arlina , sudah banyak template template yang ia buat dengan karya nya sendiri, bahkan template tersebut pun sudah banyak di berikan secara cuma cuma ( Gratis ) maupun template yang berbayar ( Premium ) ,
memang tidak jauh dari tampilan Gratis nya dengan Berbayar nya ( Premium ) yang dimana template gratis tersebut tampilan nya kurang full sesuai ( bagus ) di banding template premium nya, memang template Premium sudah tidak asing lagi , biasa nya template premium ini lebih banyak di pakai oleh khalayak website perusahaan terkenal karena dengan ada nya template premium tersebut tersebut memungkinkan para pengunjung lebih betah di dalam website tersebut karena ada tampilan yang amat memuaskan hehe.

Sebelum nya template yang saya gunakan ini pun template premium asli dari punya nya mbak Arlina yang dimana fitur template ini cukup memuaskan menurut saya karena, Template ini memiliki fitur :

1 . Fast Loading Page Speed + GT Metrix 90%an keatas
2 . Full Responsive
3 . Smooth Menu Dropdown
4 . Valid Disqus Comment HTML 5
5 . Widget Melayang / Sticky di Sidebar dan masih banyak yang lain nya yg mungkin tidak saya sebutkan keseluruhan , bagaimana ajib bukan template nya hehe ? jika kalian berminat dengan tampilan blog saya ini kalian bisa hubungi saya dengan akun saya.

Widget Sosmed Keren Simplify 2 ini pun pertama nya memiliki empat 4 fitur akun sosmed yaitu hanya facebook , twitter , blogger , google+ dan saya pun alhamdulilah mencoba menambahkan 2 fitur yaitu akun Instagram dan Youtube dan sehinga menjadi enam fitur akun sosmed keren nya yaitu dari akun facebook , twitter , blogger , google+ , instagram , youtube dan bahkan bisa sobat buat sendiri widget tersebut yang ingin diinginkan semau sobat, itu juga jika kalian bisa hehe , ya saya harapkan kalian dapat bisa ya mengatur/membuat nya sendiri.

Oke langsung saja ya kita ke TKP nya langsung yaitu Cara Membuat Widget Sosmed Lengkap Keren ala Simplify 2, langsung saja simak baik baik tutorial lengkap nya di bawah ini :

Langkah Pertama :
Pastikan Login blogger terlebih dahulu jika sudah lalu -> Template -> Edit HTML -> CTRL+F ( search ) -> b:skin atau <style>

Langkah Kedua :
Isikan CSS di bawah ini tepat di dalam menu yang sudah di cari tersebut di dalam bagian b:skin atau <style> tersebut :

 /* Social Media sidebar by aldiandreansyah.blogspot.com*/
#socialcounter{overflow:hidden;margin:0 0 20px 0}
#socialcounter h2 {margin:0 0 10px 0;}
#socialcounter ul{margin:0}
#socialcounter ul a{color:#fff}
#socialcounter ul li.social_item-wrapper{float:left;width:48%;text-align:center;margin:0 4% 10px 0;color:#fff}
#socialcounter ul li a.social_item{position:relative;display:block;opacity:.9;height:50px;line-height:50px;overflow:hidden}
#socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0}
.social_icon{float:left;line-height:50px;width:41px;font-size:1.3rem}
#socialcounter ul li a.social_item.social_facebook{background:#3F5B9B}
.fa-facebook.social_icon{background:#2E4372}
#socialcounter ul li.social_item-wrapper:hover .fa-facebook.social_icon{background:#3F5B9B}
#socialcounter ul li.social_item-wrapper:hover .social_facebook{background:#2E4372}
#socialcounter ul li a.social_item.social_twitter{background:#1C97DE}
.fa-twitter.social_icon{background:#1571A5}
#socialcounter ul li.social_item-wrapper:hover .fa-twitter.social_icon{background:#1C97DE}
#socialcounter ul li.social_item-wrapper:hover .social_twitter{background:#1571A5}
#socialcounter ul li a.social_item.social_rss{background:#E86321}
.fa-user-plus.social_icon{background:#C2521B}
#socialcounter ul li.social_item-wrapper:hover .fa-user-plus.social_icon{background:#E86321}
#socialcounter ul li.social_item-wrapper:hover .social_rss{background:#C2521B}
#socialcounter ul li a.social_item.social_google-plus{background:#E82C2C}
.fa-google-plus.social_icon{background:#BF2424}
#socialcounter ul li.social_item-wrapper:hover .fa-google-plus.social_icon{background:#E82C2C}
#socialcounter ul li.social_item-wrapper:hover .social_google-plus{background:#BF2424}
#socialcounter ul li a.social_item.social_instagram{background:#8E714D}
.fa-instagram.social_icon{background:#6F583C}
#socialcounter ul li.social_item-wrapper:hover .fa-instagram.social_icon{background:#8E714D}
#socialcounter ul li.social_item-wrapper:hover .social_instagram{background:#6F583C}
#socialcounter ul li a.social_item.social_youtube{background:#E22020}
.fa-youtube.social_icon{background:#B31919}
#socialcounter ul li.social_item-wrapper:hover .fa-youtube.social_icon{background:#E22020}
#socialcounter ul li.social_item-wrapper:hover .social_youtube{background:#B31919} 

Langkah ketiga :
Isikan Meta Tag di bawah ini agar bertujuan widget sosmed lengkap tersebut tampil sempurna dari icon font awesome nya maupun kotak nya tersebut.

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<script type='application/ld+json'>{ &quot;@context&quot;: &quot;http://schema.org&quot;, &quot;@type&quot;: &quot;WebSite&quot;, &quot;url&quot;: &quot;<data:blog.homepageUrl/>&quot;, &quot;potentialAction&quot;: { &quot;@type&quot;: &quot;SearchAction&quot;, &quot;target&quot;: &quot;<data:blog.homepageUrl/>?q={search_term}&quot;, &quot;query-input&quot;: &quot;required name=search_term&quot; } }</script>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<meta expr:content='data:blog.pageName + &quot;, &quot; + data:blog.pageTitle + &quot;, &quot; + data:blog.title' name='keywords'/></b:if></b:if>

Langkah Keempat :
Isikan HTML nya di bawah ini tepat di Tata Letak -> Tambah Gadget -> HTML/Javascript isikan HTML di bawah ini atau pun dapat juga kalian tambahkan di bagian Template -> Edit HTML -> CTRL+F -> cari <div class ='sidebar'/> maupun sejenis nya lalu isikan lagi script HTML nya di bagian bawah kode tersebut :

 <div id='socialcounter'>
<h2><span>Ikuti Saya Melalui</span></h2>
    <ul class='social-counter'>
        <li class='social_item-wrapper'><a class='social_item social_facebook' href='https://www.facebook.com/kivliiesholawaters' rel='nofollow' target='_blank' title='Follow us on Facebook'><i class='fa fa-facebook social_icon'/><span class='social_num'>Facebook</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_twitter' href='https://twitter.com/mr_kivliie' rel='nofollow' target='_blank' title='Follow us on Twitter'><i class='fa fa-twitter social_icon'/><span class='social_num'>Twitter</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_rss' href='https://www.blogger.com/follow-blog.g?blogID=7559214632370258218' rel='nofollow' target='_blank' title='Follow our blog'><i class='fa fa-user-plus social_icon'/><span class='social_num'>Blogger</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_google-plus' href='https://plus.google.com/+aldiandreansyah' rel='nofollow' target='_blank' title='Follow us on Google+'><i class='fa fa-google-plus social_icon'/><span class='social_num'>Google+</span></a>
        </li>
       <li class='social_item-wrapper'><a class='social_item social_instagram' href='https://www.instagram.com/kivliie_sholawaters' rel='nofollow' target='_blank'><i class='fa fa-instagram social_icon'/><span class='social_num'>Instagram</span></a>
        </li>
       <li class='social_item-wrapper'><a class='social_item social_youtube' href='https://www.youtube.com/aldiandreansyah' rel='nofollow' target='_blank'><i class='fa fa-youtube social_icon'/><span class='social_num'>Youtube</span></a>
        </li>
    </ul>
</div> 

Langkah terakhir :
Lalu Klik save/simpan dan coba cek dan lihatlah blog sobat apakah bekerja atau tidak ya saya harapkan work 100% amin.

Mungkin cukup sekian saja mengenai artikel dari seputar blogger yang berjudul Cara Membuat Widget Sosmed Lengkap Keren ala Simplify 2,semoga bermanfaat dan work selalu.

Share this post