Membuat Tombol Share Artikel Dengan Search Form

 

Berikut cara membuat Tombol Share Artikel Dengan Search Form

Masukan CSS dibawah ini tepat di atas ]]></b:skin> atau </style>

/* Modifikasi widget Tombol Share */

.addthis_toolbox {width:96.5%;position:relative;background:none;border:none;box-shadow:none;margin-left:-2px;padding:5px 10px;margin-top:20px;}

.addthis_toolbox .addthis-tooltip {display:block;width:160px;padding:5px 10px;position:absolute;bottom:100%;left:10px;z-index:77;margin-bottom:30px;background:#07ACEC;text-transform:none;font:18px Oswald;color:white;text-align:center;box-shadow:none;opacity:0;visibility:hidden;transition:all 0.16s ease-out;}

.addthis_toolbox .addthis-tooltip:before {content:&quot;&quot;;position:absolute;bottom:-10px;left:10px;border-top:10px solid #07ACEC;border-right:20px solid transparent;width:0;height:0;line-height:0}

.addthis_toolbox:hover .addthis-tooltip {visibility:visible;opacity:1;margin-bottom:10px;}

#search input[type=&quot;text&quot;]:hover, #search input[type=&quot;text&quot;]:focus {width:92%;border:none;box-shadow:none;padding-left:35px;}

#search input[type=&quot;text&quot;] {background:#fff url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1zLjotjduGxo2myeD3Zk8r-RvC4eGjV8CIhU89zbb1F3pynV9FvOlU4iBXc8XnXXgYzO0LMmdSNs8rbF0leMIQkjxage-gSvbBoeN2tvP4-lEN3zlPMRU9BJfNkLyr-jfwV83PEajcjA/s200/search-c.png&quot;)no-repeat center left 6px;width:110px;font-size:13px;color:#666;padding:10px 10px 10px 25px;transition:all 0.7s ease-in-out;margin:-4px -4px -4px -4px;z-index:9;position: absolute;border:none;right:5px;}

#share-leonyli{font-size:14px;}

#share-leonyli p{float:left;display:block;}

#share-leonyli a{position:relative;float:left;box-shadow:none;display:block;color:#fafafa;padding:5px;margin:0px 3px 0px 0px;

border:none;box-shadow:none;}

#share-leonyli a:hover{box-shadow:none;}

/* Akhir modifikasi widget Tombol Share Leony Li */

Masukan HTML dibawah ini tepat di bawah post-footer

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div id='share-leonyli'>

<div class='addthis_toolbox addthis_default_style '>

<span class='addthis-tooltip'>Share This Article</span>

<form action='/search' id='search' method='get'>

<input id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value=' Search My Site...'/></form>

<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' rel='nofollow' style='background:#3b5998;' target='_blank' title='Bagikan ke Facebook'>Facebook</a>

<a expr:href='&quot;http://plus.google.com/share?url=&quot; + data:blog.url' rel='nofollow' style='background:#d64136;' target='_blank' title='Bagikan ke +Google'>+Google</a>

<a expr:href='&quot;https://twitter.com/intent/tweet?url=&quot; + data:blog.url + &quot;&amp;amp;text=&quot; + data:post.title + &quot;&amp;amp;via=LeonyLi_com&amp;amp;lang=id&quot;' rel='nofollow' style='background:#19bfe5;' target='_blank' title='Bagikan ke Twitter'>Twitter</a>

<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' style='background:#006699;' target='_blank' title='Bagikan ke Digg'>Digg</a>

<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;title=&quot; + data:post.title' rel='nofollow' style='background:#ff4006;' target='_blank' title='Bagikan ke Reddit'>Reddit</a>

<script>

//<![CDATA[

var uri = window.location.href;

var ttle = document.title;

document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' target='_blank' rel='nofollow' style='background:#ffbf00;' title='Bagikan ke LintasME'>Lintaskan</a>");

//]]>

</script>

<div class='clear'/>

</div></div>

</b:if>

Semoga Tutorial ini bermanfaat...