Sobat Portal Blog- Kali ini saya akan bagikan cara memasang atau membuat kotak pencarian dan sosial share dengan mudah. Kotak pencarian digunakan untuk memudahkan pengunjung blog kita mencari informasi yang dibutuhkan, sedangkan sosial share digunakan untuk memudahkan pengunjung mengikuti blig juga dapat meningkatkan pengunjung diblog. Tutorial ini saya ambil dari salah satu Master blog di CB Blogger.
Untuk contoh gambarnya seperti yang saya pasang di Portal Blog berikut : |
| Portal Blog |
Cara Membuat Kotak Pencarian Berikut Sosial Share
Pertama yang harus dilakukan adalah memastikan akun sosial kita sudah tersedia, baik Facebook, Tweeter, Google+, Pinterest, Feedburner, dan Linkedin.
1. Buka layout
Cari >> Tata Letak seperti dalam gambar berikut ini:
Kemudian akan muncul gambar berikut ini :
Kede yang harus anda masukkan adalah dibawah ini:
<!-- SEARCH BOX --><style>#search-box {position: relative;width: 100%;margin: 0;}#search-form {height: 30px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}#search-box input[type="text"]{width: 90%;padding: 7px 0 12px 1em;color: #333;outline: none;}#search-button {position: absolute;top: 0;right: 0;height: 32px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 32px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}</style><div id='search-box'><form action='/search' id='search-form' method='get' target='_top'><input id='search-text' name='q' placeholder='Search here...' type='text'/><button id='search-button' type='submit'><span>Search</span></button></form></div><!-- SEARCH BOX END -->
<!-- SOCIAL PROFILE END --><div class='widget-content'><style>#socialwidget {width: 300px;margin:10px 1px 10px 1px;} .TZ-social{padding:0 5px 15px;} .TZ-social img:hover{opacity:0.8} .googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;} .TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;} .TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;} #widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;} .TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);} .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);} </style> <div id='socialwidget'> <div class='TZ-social'> <!-- social ico --> <center>
<a href='http://facebook.com/username' rel='nofollow' style='margin-right: 15px;' target='_blank'> <img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNybPanrwLiVllDqkFG3ohwViDCBpzF4jOqVSW9_tL_ZikKyeKuJHlTLd7yuXsnk8ZHZdAIp1NU_2968_uemwt_6R7ClTwWNxkjsw35A_EhcOKFi6SMQ8BrYjOuLQup1hY751fJ9z_Io4/s1600/facebook.png'/></a>
<a href='http://twitter.com/username' rel='nofollow' style='margin-right: 12px;' target='_blank'> <img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZbekk3ro_GlfTiiE49t4YXoQANN1zpt8MLDSBzcbF3zLm_4uU4jVPYLDBC3RPwUib1pWLMzZil7FCNY_62af58LcjdOyxzpGmUjx9_o5JqNlv-P03IiqbBEK5riDiQ-2p1FeDON81cXA/s1600/twitter.png'/></a>
<a href='https://plus.google.com/ID Number/posts' rel='me' style='margin-right: 12px;' target='_blank'> <img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGDknO4mNZ3_SS3hzEsvDeMDM_BVmx93ZcUZVLY3lapNETMyrDv2ouBRNxijQtf7WlOkf0C6NzFXtDl-AxURFwtTAWmTWrSDMwyBNveh0x44XooftiBjlmHd8XjSAM8QwiUH1ISirhYQE/s1600/gplus.png'/></a>
<a href='http://www.pinterest.com/username' style='margin-right: 12px;' target='_blank'> <img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCK1CJnaz7qnM37qa_PHREGqvpY4ypvSmSi-T-DC22MvHTMk_clNbmzFi9DsOgUQy4vB5B71MhwCtNCiVbIYnBhtmu8czG4ytfI0RygswHOPl0IPR9l9LmUF8D4InYorxLCJjTkhlkOiQ/s1600/pinterest.png'/></a>
<a href='http://feeds.feedburner.com/Feedburner ID' rel='nofollow' style='margin-right: 12px;' target='_blank'> <img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP6ymxfGFfK4NYVF2bMu70QjjHPQtjvZ5sdxxLT6pyYvcJxArYjj0_nNLyJgKWXczpG4R8XgkEk9U8KT6KoQOYQ0HsjdRqYHNT0AkJ4BOno0w8VfhG2TEAvEl7jPe4Gungx6bD8ijrjZM/s1600/rss.png'/></a>
<a href='http://www.linkedin.com/in/username' rel='nofollow' style='margin-right: 12px;' target='_blank'> <img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeyMyA0mQjyg5mzeLHpkFNhkcFQrkvlCkismtZurp-EK7VxYmvfVaP3kyHdXdQSZ8P3nLn2dPG2djQQMsWTuGNaj3z847FE9m6SI8k1Aa1DkuYJSXb2nX73wDZALHKYHrrf3g_e5GJC3Y/s1600/linkedin.png'/></a>
</center> </div> </div></div><!-- SOCIAL PROFILE END -->
2. Jangan lupa gantilah kode ID yang bertanda merah dengan ID Sosial Share yang sudah anda persiapkan.
3. kemudian SAVE
Demikian Cara membuat kotak pencarian dan sosial share media dengan sangat mudah. Semoga bermanfaat.
Advertisement
