6 Widget yang Penting pada Blog

Blogger adalah salah satu platform paling terkenal untuk membuat dan membuat blog gratis. Blogger adalah produk Google untuk memberi kesempatan bagi blogger baru untuk menguji keterampilan mereka di platform gratis. Mereka menawarkan paket hosting gratis dan hebat dengan kecepatan tinggi dan bandwidth tinggi.

Setiap blog yang di-hosting di Blogger akan memiliki .blogspot di ujung domainnya (sebelum .com).

Yah, kita semua tahu betapa hebatnya Blogger, tetapi banyak dari kita selalu mengeluh tentang keterbatasannya.

Pengguna Worpress memiliki begitu banyak plugin di mana mereka dapat mengoptimalkan blog mereka untuk membuatnya SEO friendly dan hal terbaik tentang WordPress adalah bahwa strukturnya sudah dioptimalkan untuk SEO sedangkan pengguna Blogger harus melakukan semuanya sendiri.

Pengguna WordPress dapat menginstal gadget warna-warni yang berbeda di blog mereka sesuai dengan kebutuhan mereka karena mereka memiliki begitu banyak plugin untuk tujuan ini.

Misalnya jika mereka ingin memasang formulir langgan Berlangganan Kami di blog mereka, maka mereka dapat melakukannya dengan mudah dengan memasang beberapa plugin seperti Mailmunch tetapi jika pengguna Blogger ingin melakukan hal yang sama maka dia harus mengacaukan semua pengkodean keras seperti HTML5, CSS dll.

Dengan mempertimbangkan semua fakta ini saya memutuskan untuk membuat posting tentang beberapa widget Blogger mengagumkan yang dapat membuat Blog Blogspot Anda Blog PRO. Saya harap Anda akan suka menginstalnya di Template Anda.

Semua dalam satu berlangganan adalah salah satu widget favorit saya ketika datang ke Blogger. Dengan menggunakan gadget ini Anda dapat meminta pembaca untuk mengikuti Anda di GPlus, Twitter, Facebook atau mereka dapat berlangganan newsletter Anda.

Anda dapat menginstalnya di Blog Anda dengan mudah dengan mengikuti langkah-langkah sederhana ini.

First Go to: Yoursite–> Layout–> Tambah Gadget–> Sekarang pilih HTML / Javascript

Sekarang masukkan kode ini di area konten:

.w2b-facebook {background:#ffffff;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}

.w2b-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}

.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}

.w2b-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}

.w2b-twitter a.twitter-follow-button {display: block;}

.w2b-twitter iframe {margin: 9px 11px;}

.w2b-emailbox {background-color: #e3edf4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}

.w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}

.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}

.w2b-emailbox input.emailu:focus {color: #333;}

.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}

.w2b-emailbox input.submitu:hover {text-decoration: none;}

.w2bDefault {border: 1px solid #cc7c00;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%);}

.w2bDefault: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%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}

.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}

</style>

</div>

(function() {

var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;

po.src = "https://apis.google.com/js/plusone.js";

var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);

})();/*]]>*/

</script>

<span>Recommend on Google</span>

</div>

<a href="https://twitter.com/articlesteller" class="twitter-follow-button" data-show-count="true">Follow @Articlesteller</a>

</div>

<tr>

<td>

</td>

</td>

</tr>

</table>

</form>

</div>

Widget ini didukung oleh GeekBlogging.

Hal-Hal Yang Harus Dilakukan Setelah Menginstal Kode

Sekarang ketika Anda telah menginstal kode di layout Blogger Anda, hal berikutnya adalah mengubah semua alamat jaringan sosial dengan alamat dan ID asli Anda. Dan jangan lupa untuk mengubah "articlesteller " dari mana saja dengan ID Feedburner asli Anda atau ID profil media sosial.

Jika Anda telah melakukan semuanya dengan benar maka selamat Anda baru saja menginstal "All in one Subscription form" ke dalam Blog Anda.

Kotak Penulis Yang Tampan

Satu lagi tambahan hebat dalam inventaris widget kami adalah kotak penulis untuk memberikan tampilan yang lebih profesional kepada blog kami.

Jadi sekarang kami akan mencoba memasang kotak penulis di blog blogspot merek kami yang baru.

Untuk menginstal kotak pengarang yang tampak hebat ini, Anda harus terlebih dahulu mengacaukan kode HTML templates Anda.

Cukup kunjungi Yoursite–> Templates–> Edit Html dan kemudian cari baris ini:

<div class = 'post-footer-line post-footer-line-1 ′>

Setelah Anda menemukannya, hal berikutnya yang perlu Anda lakukan adalah memperkenalkan kode baru di template Anda tepat di bawah kode di atas.

Pengkodean akan sedikit panjang tetapi Anda dapat menyalin dan menempelkannya

<div class="author-box"> <img class="avatar avatar-70 photo" src="http://articlesteller.com/wp-content/uploads/2015/05/aa.jpg" alt="" width="70" height="70" /><b>About the Author</b> <div style="text-align: justify; font-family: verdana; color: #000000;">Write Something About yourself <center> <a style="text-decoration: none; font-size: 70%;" href=" Your Blog link ">Your Blog Name</a></center></div> <strong>Follow me on</strong> <a href="http://facebook.com/Articlesteller"><img style="width: 16px; height: 17px;" src="http://articlesteller.com/wp-content/uploads/2015/05/fb_icon.png" alt="" /></a><a href="http://twitter.com/HusnainMz"> <img style="width: 16px; height: 17px;" src="http://articlesteller.com/wp-content/uploads/2015/05/download.png" alt="Mountain View" /></a><a href="https://plus.google.com/+HusnainMeerzadehh/posts"><img style="width: 16px; height: 17px;" src="http://articlesteller.com/wp-content/uploads/2015/05/google-plus-icon.png" alt="" /></a></div>

Sekarang cari tag </ b: skin> dan sebelum itu, salin dan tempel CSS ini:

.author-box {

background: #F7F7F7;

margin: 20px 0 40px 0;

padding: 10px;

border: 4px solid #E6E6E6;

overflow: auto;

}

.author-box p {

margin: 0;

padding: 0;

}

.author-box img {

background: #FFFFFF;

float: left;

margin: 0 10px 0 0;

padding: 4px;

border: 1px solid #E6E6E6;

-moz-border-radius: 130px;

-webkit-border-radius: 130px;

border-radius: 130px;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

transition: all 0.3s ease;

padding:4px;

border:1px solid #fff !important;

}

.author-box img:hover {

border-radius: 0 0 0 0;

-moz-transform: scale(1.2) rotate(-711deg) ;

-webkit-transform: scale(1.2) rotate(-711deg) ;

-o-transform: scale(1.2) rotate(-711deg) ;

-ms-transform: scale(1.2) rotate(-711deg) ;

transform: scale(1.2) rotate(-711deg) ;

}

Hal-Hal Yang Harus Dilakukan Setelah Menginstal Kode

Anda dapat mengganti frasa acak ini dengan frasa yang Anda inginkan dalam kotak penulis Anda. Temukan frasa ini "Tulis Sesuatu Tentang Anda" dan ganti seluruh paragraf dengan deskripsi diri kita.

Menu Dropdown Yang Cerdas

Salah satu lap utama yang dilakukan pencipta Blogger adalah mereka tidak menambahkan menu tarik-turun di Blogger. Tetapi kita masih bisa menginstal menu dropdown dengan menggunakan beberapa kode. Ada begitu banyak menu dropdown di internet yang dapat Anda unduh dengan mudah. Setiap menu memiliki gaya dan warna yang berbeda.

Pertama Anda perlu mengunjungi halaman kode HTML template Anda kemudian cari </ header> dan tepat di bawahnya tempel kode ini:

</pre>

<li class="wcnavlist"><span class="wclink">Categories</span>

<ul>

<li>

<ul>

<li><a href="#">Blogger</a></li>

<li><a href="#">Widgets</a></li>

<li><a href="#">Plugins</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">Wordpress</a></li>

<li><a href="#">Wp plugins</a></li>

<li><a href="#">Wp Themes</a></li>

<li><a href="#">Traffic</a></li>

</ul>

</li>

<li>

<ul>

<li><a href="#"> JavaScript </a></li>

<li><a href="#"> Jquery </a></li>

<li><a href="#"> Responsive </a></li>

<li><a href="#"> Web design </a></li>

<li><a href="#"> Blogging Tips </a></li>

<li><a href="#"> Facebook </a></li>

<li><a href="#"> Twitter </a></li>

<li><a href="#"> Make money </a></li>

<li><a href="#"> Adsense </a></li>

</ul>

</li>

<li>

<ul>

<li><a href="#"> Services </a></li>

<li><a href="#"> Contact us </a></li>

<li><a href="#"> About us </a></li>

<li><a href="#"> Disclaimer</a></li>

<li><a href="#"> Privacy Policy </a></li>

<li><a href="#"> Terms of use </a></li>

</ul>

</li>

</ul>

</li>

<li class="wcnavlist"><a class="wclink" href="#">Guest Post</a></li>

<li class="wcnavlist"><a class="wclink" href="#">Contact Us</a></li>

<li class="wcnavlist"><a class="wclink" href="#">Services</a></li>

<li class="wcnavlist"><a class="wclink" href="#">Privacy Policy</a></li>

</ul>

<pre>

Sekarang buka blog Anda untuk mengetahui pengaruh apa yang telah dibuat oleh pengkodean baru ini.

Saya juga ingin berbagi beberapa menu dropdown lainnya dengan Anda.
Cukup kunjungi halaman ini dan Anda akan menemukan beberapa dropdown yang bagus untuk blog blogspot Anda.

Facebook Likebox

Kita semua memiliki keterlibatan sosial dalam kehidupan kita. Sebagai manusia, kami senang bertemu dan berbagi cerita dengan orang lain. Untuk tujuan ini banyak perusahaan telah memperkenalkan situs web media sosial mereka di mana orang dapat bertemu dengan orang lain.

Sebagai Blogger Anda akan suka untuk menghubungkan penggemar Anda di halaman media sosial Anda di mana mereka dapat mengikuti Anda dan blog Anda. Untuk ini, Anda harus terlebih dahulu membuat halaman Facebook Anda dan kemudian Anda harus meminta pembaca Anda untuk menyukainya.

Tentunya, Anda tidak dapat menjangkau setiap pembaca di kaki Anda sendiri. Anda harus menginstal sesuatu di blog Anda yang secara otomatis akan meminta setiap pengunjung untuk menyukai halaman Anda.

Untuk ini kami akan menginstal Facebook Likebox sederhana dari tempat penggemar Anda dapat menyukai halaman Anda hanya dengan mengklik tombol seperti. Ini juga cara yang bagus untuk menunjukkan kekuatan mengikuti penggemar Anda.

Pertama kunjungi Blog Anda dan kemudian pindah ke bagian tata letak dan kemudian klik Tambahkan tombol gadget baru.

Sekarang pilih HTML / Javascript gadget dan tempel kode berikut di area konten:

</pre>

<pre class="code"><iframe src="//www.facebook.com/plugins/likebox.php?href=<span style=" width="300" height="150"><strong>paste your facebook page url here</strong>&height=258&show_faces=true&colorscheme=light&stream=false&border_color&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowTransparency="true"></iframe></pre>

<pre>

Ganti saja baris ini “tempel url halaman facebook Anda di sini” dengan URL halaman facebook asli Anda Now Enjoy!

Ikon Media Sosial

Anda juga ingin menambahkan beberapa ikon media sosial di Blog Anda. Karena kami tidak memiliki ketersediaan opsi ini di Blogger, kami akan menggunakan beberapa kode untuk menikmati fitur ini.

Untuk pindah ke bagian tata letak Blog Anda lagi dari dasbor Anda - kemudian klik tombol Tambah gadget dan sekarang pilih HTML / Javascript.

Sekarang tempelkan kode ini di area konten:

<style>

.fb {

background:rgba(87,104,176,35);

width:50px;

height:50px;

transition:width 1s;

overflow:hidden;

font-size: 20px;

box-shadow: 2px 4px 1px grey;

border-radius: 51px 50px 50px 50px;

}

.fb:hover {

width:150px;

}

.tw {

background:rgba(14,174,284,1);

width:50px;

height:50px;

transition:width 1s;

overflow:hidden;

font-size: 20px;

box-shadow: 2px 4px 1px grey;

border-radius: 51px 50px 50px 50px;

}

.tw:hover {

width:150px;

}

.gp {

background:rgba(202,58,48,4);

width:50px;

height:50px;

transition:width 1s;

overflow:hidden;

font-size: 20px;

box-shadow: 2px 4px 1px grey;

border-radius: 51px 50px 50px 50px;

}

.gp:hover {

width:150px;

}

.pt {

background:rgba(192,24,16,1);

width:50px;

height:50px;

transition:width 1s;

overflow:hidden;

font-size: 20px;

box-shadow: 2px 4px 1px grey;

border-radius: 51px 50px 50px 50px;

}

.pt:hover {

width:150px;

border-radius: 51px 50px 50px 50px;

}

.fbtxt {

margin-left: 50px;

margin-top: 11px;

color: white;

}

.image img {

height: 50px;

width: 50px;

float:left;

transition: transform 2s, width 2s, height 2s;

}

.image img:hover {

transform: rotate(360deg);

-webkit-transform:rotate(360deg);

width:62px;

-webkit-animation:example 2s infinite linear; /* Chrome, Safari, Opera */

animation:example 2s infinite linear

}

/* Chrome, Safari, Opera */

@-webkit-keyframes example {

from {transform:rotate(0deg);}

to {transform:rotate(360deg);}

}

/* Standard syntax */

@keyframes example {

from {transform:rotate(0deg);}

to {transform:rotate(360deg);}

}

</style>

<div class='fb'><a href="####" target='blank' class='image'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuWQ8Vh0rkdBf5_I3LmRPrQWACal3O7sPz3yz92hXWabBxx1ct8RQPTQ0vB3taQDeoUYLZGSYJen1ISMAlA9APpYoJgvb051tkptHEUS2ORMtu_FOdAcFQmVNivJoVwUu1gtgVtxz8wwg/s320/facebook-icon-circle.png" width="360" height="200" alt="" /></a><div class='fbtxt'>Facebook</div></div>

<div class='tw'><a href="####" target='blank' class='image'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOasZZ4W8FyIo5dbla7HUVKHLzIK5DI6F2y83ZLMN29cfEA7Kw9H-V-7qozqK-yJJPuJAJ0SCZ6VPVyGWXSt3YFcY27u1avJHBveOtdEmKNBMdN4AV9Yv35hOpK-zaE6dyeysKv4iUPXY/s1600/twitter.png" width="360" height="200" alt="" /></a><div class='fbtxt'>Twitter</div></div>

<div class='gp'><a href="####" target='blank' class='image'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5uXPW8kFq70fOgcBUn1P-CIdz4IuDgiXhRPk1G5ygMlIW_nOKBsrC8PK9aXtBWnWgKOOCjLx4z9jsKmXyOwru9rZFmP1L8Ga9P3fS2cUB5hNK5qUn9GeKdaKo50E55UJ6t2brYZr_8fs/s1600/google-plus-icon.png" width="360" height="200" alt="" /></a><div class='fbtxt'>Google+</div></div>

<div class='pt'><a href="####" target='blank' class='image'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpLRH88nmBssuNTA93C6fiKX6f8YxquGQlHd27ecN1Xr5aLdj7X05-hA64Bb_Eo436bEmYvkDBFrC7pOiwiJL8yVg4tw5JSeaL5JjrqFrvB8IeO9W_AspukLeUZo0RdH7StGn4Kl6iQOY/s1600/pinterest-icon1.png" width="360" height="200" alt="" /></a><div class='fbtxt'>Pinterest</div></div>

</pre>

<pre>

Hanya mengganti hash (####) dengan alamat jaringan sosial Anda sendiri.

Widget Pos Populer

Satu hal lagi yang paling banyak dimiliki oleh blog Pro adalah widget Posting Populer dari tempat pembaca Anda dapat mengetahui bahwa pos apa yang sedang tren di blog Anda.

Untuk memasang widget yang menarik dan menarik ini kita akan masuk ke bagian template dan kemudian kita akan mengklik tombol Edit HTML.

Sekarang temukan ]]> </ b: skin> dalam kode template Anda dan posting kode ini di bawah ini:

.popular-posts ul{padding-left:0px;}

.popular-posts ul li {background: #FFF no-repeat scroll 5px 10px;

list-style-type: none;

margin:0 0 5px 0px;

padding:5px 5px 5px 20px !important;

border: 1px solid #dcdcdc;

border-radius:10px;

-moz-border-radius:10px;

-webkit-border-radius:10px;

}

.popular-posts ul li:hover {

background:#FF8040;

}

.popular-posts ul li a

{

text-decoration:none;

font:14px Georgia, verdana;

color:#222222;

}

.popular-posts ul li a:hover {

text-decoration:none;

color:#fff;

}

Anda dapat menginstal banyak widget posting populer lainnya juga dengan mencari di Google.

Panduan Membuat Artikel Konten Pilar dengan Mudah

6 Widget yang Penting pada Blog

You May Also Like

No comments:

Most Popular

Domain and Hosting

Recent Posts

Blog Archive

Popular Posts

Random Posts

Artikel Terbaik

Social Media

Hosting dan Domain

Tags

Rekomendasi

Facebook