Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Memasang Widget Social Subscribe Minimalis With CSS

Widget Social Subscribe CSS Memasang Widget Social Subscribe Minimalis With CSS – lama rasanya tidak membahas widget social subscribe, dan pada tutorial kali ini kembali akan membahas widget media social subscribe yang sederhana menggunakan CSS. Widget social subscribe ini bisa diterapkan dengan mudah didalam area posting, tepatnya di bawah posting blog. Jika pada tutorial Cara Membuat Author Box Dibawah Posting Blogger widget social subscribe sudah sekaligus saya gabungkan pada widget tersebut, namun apabila ingin memasang widget social subscribe saja maka cara pemasangannya pun masih sama persis seperti pada tutorial tersebut. Untuk membuat widget social subscribe agar tampil di bawah posting blog caranya bisa mengikuti langkah-langkah yang ada dibawah. Seperti tampilannya yang sederhana, untuk membuat widget social subscribe ini juga cukup sederhana dan dengan warna-warna yang sudah sesuai dengan warna widget aslinya. Apabila ingin memasangnya kedalam blog, berikut tutorialnya untuk cara Memasang Widget Social Subscribe Minimalis With CSS di bawah posting blog.

1. Login akun blogger.
2. Selanjutnya klik Template dan pilih Edit HTML.
3. Copy kode berikut ini lalu paste di atas kode ]]></b:skin>
.widgetsubscribe {
position: relative;
margin: 15px auto;
padding: 8px 3px;
width:500px;
border: 1px solid #52e052;
background: #e9fbe9;
}
.titlesubscribe p{
background: #52e052;
width:73px;
left: -12px;
margin-top: 0px;
font: bold 14px Tahoma;
padding: 5px 0px 6px 10px;
position: relative;
float:left;
}
.titlesubscribe :before {
content: ' ';
position: absolute;
bottom: -8px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 0 8px;
border-color: #55B05A transparent transparent transparent;
}
.titlesubscribe :after {
content: ' ';
position: absolute;
top: -8px;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 8px 8px;
border-color: transparent transparent #52A435 transparent;
}
.subscribe-social{
overflow: hidden;
}
.subscribe-social a{
display: block;
color: #fff !important;
font: bold 12px Tahoma;
text-align: center;
text-decoration: none;
transition: border-radius 0.50s;
padding: 7px 0px;
}
.subscribe-social a:hover{
border-radius: 10px 0px;
}
.subscribe-social div{
float: left;
margin-right: 5px;
width: 79px;
}
.subscribe-social .subscribefacebook a{
background: #3B5999;
}
.subscribe-social .subscribefacebook a:hover{
background: #52e052;
}
.subscribe-social .subscribetwitter a{
background: #01BBF6;
}
.subscribe-social .subscribetwitter a:hover{
background: #52e052;
}
.subscribe-social .subscribegoogleplus a{
background: #D54135;
}
.subscribe-social .subscribegoogleplus a:hover{
background: #52e052;
}
.subscribe-social .subscriberss a{
background: #fb8938;
}
.subscribe-social .subscriberss a:hover{
background: #52e052;
}
.subscribe-social .subscribeyoutube a{
background: #ff0000;
}
.subscribe-social .subscribeyoutube a:hover{
background: #52e052;
}
.subscribe-social .subscribeyoutube{
margin-right: 0;
}
4. Copy lagi kode berikut ini kemudian paste dibawah kode <data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='widgetsubscribe'>
<div class='titlesubscribe'>
<p>Subscribe</p></div>
<div class='subscribe-social'>
<div class='subscribefacebook'>
<a href='https://www.facebook.com/andestyle' target='_blank' title='Follow Me on Facebook'>Facebook</a>
</div>
<div class='subscribetwitter'>
<a href='https://twitter.com/rizkyandes' target='_blank' title='Follow Me on Twitter'>Twitter</a>
</div>
<div class='subscribegoogleplus'>
<a href='https://plus.google.com/104093787575230359634' target='_blank' title='Follow Me on Google+'>Google+</a>
</div>
<div class='subscriberss'>
<a href='http://feeds.feedburner.com/masandes' target='_blank' title='Subscribe on RSS'>RSS</a>
</div>
<div class="subscribeyoutube">
<a href="http://youtube.com/AndesJunkies" target="_blank" title='Subscribe on Youtube'>Youtube</a>
</div>
</div>
</div>
</b:if>
Keterangan:
Ganti tulisan warna merah dengan social ID masing-masing.

5. Langkah terkahir klik Simpan Template dan lihat hasilnya.

Demikian langkah-langkah tutorial cara Memasang Widget Social Subscribe Minimalis With CSS di bawah posting blog, sangat mudah tentunya.

Berlangganan artikel via email

31 Response to "Memasang Widget Social Subscribe Minimalis With CSS"

avatar
Anonymous

Hmmmm keren... tujuan widget ini kan untuk permudah visitor utk berbagi tulisan kita di jejaring sosialnya mereka...

Balas

cakep banget penampakannya...apa lg warna warni

Balas
avatar
Anonymous

Hadir lagi Mas Andes,. di postingan yang baru keren
Dan sudah pasti,. valid html5 script nya yah Mas..?

Izin simak yah Mas,. sukses terus,.semangat 45.. hhhh

Balas

Yang jelas topiknya lagi social media terus nih mas..lagi anget nih di search engine

Balas

bisa jadi pilihan nih bagi para modifer blogg...
kalau di pakai di motor bisa gak mas ?

Balas
avatar
Anonymous

mantab nih sudah css.

Balas
avatar
Anonymous

tutornya cakep banget daaah kaya orangnya. ^_^

Balas

widget ini fungsinya untuk apa y...mf sy masih pemula :)

Balas
avatar
Anonymous

wah keren nih CSS nya :D

Balas

oke aku simpan deh ini scrip nya thx yah

Balas
avatar
Anonymous

simple and perfect gan, cocok buat blog responsive :)

Balas
avatar
Anonymous

Wih keren banget nie blognya mas andes ampe puyeng ane ngubek2 nie blog banyak banget tutorialnya, jadi bingung sendiri mo coba praktekin yang mana dulu gitu hehehe...

Balas
avatar
Anonymous

keren deh biar tambah mungil tampilan widget sosial subscribenya sehingga tidak memakan tempat....

Oh ya mas mau tanya kalau mau mematikan klik kanan dan block supaya nggak dicopas, tapi email subscribernya supaya bisa diklik gimana caranya yah, soalnya saya beberapa kali nyoba email subsribernya jadinya nggak bisa diklik buat masukin alamat email, mungkin mas Andes tahu caranya, terimakasih

Balas

dicoba yang pas dihati aja mas hehe...

Balas

Mantap kang widgetnya keren...Apalagi pake css

Balas

Mantap kang widgetnya keren...Apalagi pake css

Balas

pada kode <body> di sisipi kode kayak gini ya mas:
oncontextmenu="return false" onmousedown="return false" onselectstart="return false" onkeypress="return false"

itu buat disable fungsi mouse mas.
oncontextmenu="return false" buat disable klik kanan.
onmousedown="return false" buat disable klik block ke bawah.
onselectstart="return false" buat disable seleksi block.
onkeypress="return false" buat disable fungsi keyboard, seperti Ctrl+C, Ctrl+F dll.

seperti itu mouse sudah tidak berfungsi, jadi untuk form2 isian juga tidak bisa di isi. saran saya kalo bener2 tidak diperlukan mending tidak usah di gunakan :)

Balas

Satu lagi nih widget keren dari mas Andes..
Ayo... Sayang anak....sayang anak...hehe :)

Balas

Kalo anyes di mesin pendingin ya mas :)

Balas

Wah sepertinya widget ini keren mas. Tapi saya sudah payang widget jejaring sosial biasa aja. Mau pasang lagi nanti malah kebanyakan widget jejaring sosial :D

Tutorial di blog ini bagus-bagus. Saya mau follow ah :D

Balas
avatar
Anonymous

waw keren mas...sayang blogku loadingnya uda keberatan :(

Balas

mau pasang ini tapi kode ]]> ndak ketemu mas, malah error deh belog saya, sampai keringat dingin ehheeh... nanti deh saya coba lagi kalau sudah tenang, minum air putih dulu harusnya hehehe

Balas

saya bantuin mikul deh kang... ringan sama dijinjing terlalu berat ya tinggalkan saja eheheh

Balas

sepuluh ribu tiga kan, mas?

Balas

yang penting pada bagian CSS mang, taruh aja di atas kode ini mang..

#Attribution1 {

Balas

Oh jadi memang nggak bisa yah, makasih banyak mas Andes :)

Balas

buat motor kodenya angus mas hahaha..

Balas

yang tampil kok cuma kata katanya doang ya? warna2nya gak tampil ..

gmna solusinya gan?

Balas

solusinya betulkan dulu kredit link template

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Memasang Widget Social Subscribe Minimalis With CSS" ini bermanfaat, share ke jejaring sosial.
Konversi Kode