» » CARA MEMBUAT All-in-One Social Share, Subscribe & Connect Widget DI BLOGSPOT

CARA MEMBUAT All-in-One Social Share, Subscribe & Connect Widget DI BLOGSPOT

Ivankgribatako
Add Comment
WIDGET SOSIAL MEDIA
Rabu, 30 Desember 2015
All-in-One Social Share, Subscribe & Connect Widget for Blogger 




*  login dulu yaa
*  klik template
*  edit HTML
*  cari kode nich ]]></b:skin>
*  dan copas dibawah kode dan letakkan diatas kode ]]></b:skin>
/* All-in-one-social share widget by queen go blog-------------------------------*/
.dhi_menu,.dhi_menu ul,.dhi_menu li,.dhi_menu a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}
.dhi_menu {
    height: 34px;
    width: 304px;
    background: #b8b8bc;
    background: -webkit-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: -moz-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: -o-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: -ms-linear-gradient(top, #b8b8bc 0%,#38383a 10%);
    background: linear-gradient(top, #b8b8bc 0%,#38383a 10%);
}
.dhi_menu:hover {
    height: 34px;
    width: 304px;
    background: #4c4e5a;
    background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
    background: linear-gradient(top, #4c4e5a 0%,#2c2d33 10%);
}
.dhi_menu li {
    list-style: none;
    float: left;
    display: block;
    height: 40px;
}
.dhi_menu li a {
    display: block;
    padding: 0 14px;
    margin: 6px 0;
    line-height: 25px;
    text-decoration: none;
    border-left: 1px solid #393942;
    border-right: 1px solid #4f5058;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: bold;
    font-size: 13px;
    color: #f3f3f3;
    text-shadow: 1px 1px 1px rgba(0,0,0,.6);
    -webkit-transition: color .2s ease-in-out;
    -moz-transition: color .2s ease-in-out;
    -o-transition: color .2s ease-in-out;
    -ms-transition: color .2s ease-in-out;
    transition: color .2s ease-in-out;
}
.dhi_menu li:first-child a {
    border-left: none;
}
.dhi_menu li:last-child a {
    border-right: none;
}
.dhi_menu li:hover > a {
    color: #FFCC00;
}
.dhi_menu ul {
    position: absolute;
    left: 0;
    opacity: 0;
    background: #1f2024;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -webkit-transition: opacity .25s ease .1s;
    -moz-transition: opacity .25s ease .1s;
    -o-transition: opacity .25s ease .1s;
    -ms-transition: opacity .25s ease .1s;
    transition: opacity .25s ease .1s;
}
.dhi_menu li:hover > ul {
    opacity: 1;
}
.dhi_menu ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    -webkit-transition: height .25s ease .1s;
    -moz-transition: height .25s ease .1s;
    -o-transition: height .25s ease .1s;
    -ms-transition: height .25s ease .1s;
    transition: height .25s ease .1s;
}
.dhi_menu li:hover > ul li {
    height: 36px;
    overflow: hidden;
    padding: 0;
}
.dhi_menu ul li a {
    width: 75px;
    padding: 4px 0 4px 40px;
    margin: 0;
    border: none;
    border-bottom: 0px solid #353539;
}
.dhi_menu ul li:last-child a {
    border: none;
}
.dhi_menu a.twitter {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie27L2o1AmeK0PsgDBDuYzXAA5F7Xq2RcD1Qa702HBmauVLTqa5LLS9pXoa93XEB9qCXpJ0-1M93ntVurPXPQhdwgO17pzQLmZUgcW25sD5g2lUbngrv_jqzyUIa3GSFJJ5dJ5LPcJp3Q/s1600/03-twitter-20.png) no-repeat 6px center;
    background-color: #0ba6f7;
}
.dhi_menu a.comment {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4759HbNSYrFmV66E4kioqHE6ckbHa5DRsXTatMKKwf6egWOh6cy8j3-e0SdbpGy4J7rvirlpdzZwKXd-_8ugjqfAoehbMm4pLzQkKvkQ5LaDIyg3XENjFK_P6fxaNam4mRHNrLDUW0RM/s1600/bubble-24-20.png) no-repeat 6px center;
    background-color: #999999;
}
.dhi_menu a.share {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-OOtjB6cijodVv9iTdVl7p3xoEGGjkR0Qa2F15EoEU_zhYc7CU4q7duqAgTbmqcyTO5IPzSbgAk4fxc7msiEHtLo18fYEuxyAA4pHMikhjdctD6cP6l9a7FjheaWM0umTtZzbOp1OKE/s1600/06-facebook-20.png) no-repeat 6px center;
    background-color: #003366;
}
.dhi_menu a.plus {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkKo3_pl76VTys9OrD3P0mgoCL0KNCpJDWQcNEFM2EivlXkTsUbV1oBz8ZTCJfhCZyvInAHz_JhBS4E5fN6WR8H24Mqo59-LUIO0qDxOdykRhY0acgF2KelVKG2NX4r48PYxYTY-oEaog/s1600/40-google-plus-20.png) no-repeat 6px center;
    background-color: #dc311b;
}
.dhi_menu a.rss {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuF7zcHwokOAzUrltTVlyBzirvjce29KTvA2HwEsvl0fML9Q9XZP0GHNRcy_aOykWnP91OL74NFM9GzONtkwJrVq8j5quNNx5vk-Se_pRy2U_liGeXbf9y-oCVMC3pbfRFD61cvjF1_rU/s1600/60-rss-20.png) no-repeat 6px center;
    background-color: #FF6600;
}
.dhi_menu a.newsletter {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcvSX8whTWiBD_l5yXjtNl9hf84D27Wskb-h5EC7Iw_xeJjgTSNuyF2Y6NxzkkQC8rzITefAX01w2DtyT59q3IT2pKg8jQxHqK8lAGDLgWd-SlrwD9Fwtgv-FZ42FhhXOUTFMpBn2YfDU/s1600/Black_Email.png) no-repeat 6px center;
    background-color: #3b3c3c;
}
.dhi_menu a.faq {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhroPzql2JY2MiQYjzX53agJKYaKLkijEGbbneXzdGbHZ80mI_FltfhbWZZ6FKojGNsGjDHBd3c0cmeznVg4ybM7Wv4sFWfUyNytKS7YmbR5zBl6CWPVU7YuUmJVATvV4uBQdBH1DHXX34/s1600/question-faq-128.png) no-repeat 6px center;
    background-color: #CDBFAC;
}
.dhi_menu a.follow {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie27L2o1AmeK0PsgDBDuYzXAA5F7Xq2RcD1Qa702HBmauVLTqa5LLS9pXoa93XEB9qCXpJ0-1M93ntVurPXPQhdwgO17pzQLmZUgcW25sD5g2lUbngrv_jqzyUIa3GSFJJ5dJ5LPcJp3Q/s1600/03-twitter-20.png) no-repeat 6px center;
    background-color: #0ba6f7;
}
.dhi_menu a.fanpage {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY-OOtjB6cijodVv9iTdVl7p3xoEGGjkR0Qa2F15EoEU_zhYc7CU4q7duqAgTbmqcyTO5IPzSbgAk4fxc7msiEHtLo18fYEuxyAA4pHMikhjdctD6cP6l9a7FjheaWM0umTtZzbOp1OKE/s1600/06-facebook-20.png) no-repeat 6px center;
    background-color: #1950bf;
}
.dhi_menu a.youtube {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0W3cZ-mETF3WjMfUEaWaume3OsnqD_NK-dB6Ld_0gefDXtXQOAXrsjMKOrZiSAK3WgYC6nLrd2hCF1FadUuYichrw1MAmNmZpyC6BJFjgVxLW0AkorbjsjH6jhQ6idhlNoRL-RHHPPzE/s1600/18-youtube-20.png) no-repeat 6px center;
    background-color: #880000;
}
.dhi_menu a.google {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkKo3_pl76VTys9OrD3P0mgoCL0KNCpJDWQcNEFM2EivlXkTsUbV1oBz8ZTCJfhCZyvInAHz_JhBS4E5fN6WR8H24Mqo59-LUIO0qDxOdykRhY0acgF2KelVKG2NX4r48PYxYTY-oEaog/s1600/40-google-plus-20.png) no-repeat 6px center;
    background-color: #dc311b;
}
*  selanjutnya cari kode ini <data:post.body/>
*  dan copy kode dibawah, letakkan tepat dibawah kode <data:post.body/>
<ul class='dhi_menu'>
<li>    <a href='#'>
Share &#9660;
</a> <ul> <li>
<a class='twitter' data-via='labstrike' expr:href='&quot;
http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot;
+ data:post.url ' rel='nofollow' target='_blank' title='Tweet This!'>Twitter</a>
</li> <li>
<a class='share' expr:href='&quot;http://www.facebook.com/share.php?
v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot;
+ data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,
&apos;toolbar=0,status=0,width=626,height=436&apos;);
return false;' rel='nofollow' target='_blank' title='Share this on Facebook'>Share</a>
</li> <li>
<a class='comment' href='#comments1' id='cmtbtn'>Comment</a>
</li> <li>
<a class='plus' expr:href='&quot;https://plus.google.com/share?url=&quot;
+ data:post.url + &quot;&amp;imageurl=&quot;'
rel='nofollow' target='_blank' title='Post on GoogleBuzz'> Google+</a>
</li> </ul> </li> <li>
<a href=''>Subscribe &#9660;
</a> <ul> <li>
<a class='rss' href='http://feeds.feedburner.com/xxxxxxx' target='_blank'>RSS</a>
</li> <li>
<a class='newsletter' href='http://feedburner.google.com/fb/a/mailverify?uri=xxxxxxx'
target='_blank'>Newsletter</a>
</li> <li>
<a class='faq' href='#faq' target='_blank'>FAQ</a>
</li> </ul> </li> <li>
<a href='#'>Connect &#9660;
</a> <ul> <li>
<a class='follow' href='http://twitter.com/xxxxxxx' target='_blank'>Follow</a>
</li> <li>
<a class='fanpage' href='http://facebook.com/xxxxxxx' target='_blank'>Fanpage</a>
</li> <li>
<a class='youtube' href='https://www.youtube.com/user/xxxxxxx' target='_blank'>YouTube</a>
 </li> <li>
<a class='google' href='https://plus.google.com/xxxxxxx/' target='_blank'>Google+</a>
</li> </ul> </li> </ul>
>>> CATAT  YAA <<<
        { Ganti yg tertulis xxxxxx dgn url link anda }
[ terakhir silahkan di save ]

 ***  SELAMAT  MENIKMATI  ***

Baca Juga Artikel Terkait Lainnya

Thanks For Your Comment Here
Langganan: Posting Komentar (Atom)