Multi Author Box Dengan Kotak Berlangganan

Oke sob...
Kali ini akan kita bahas cara membuat author box dengan kotak berlangganan artikel. Satu WIDGET dua FUNGSI. 

Tenang sob...
... Untuk sobat yang mempunyai blog dengan lebih dari 2 pengurus, dapat menggunakan author blog yang satu ini, karena akan menyesuaikan dengan data akun gmail yang penulis gunakan, yaitu foto, nama, dan intro atau perkenalannya.

Kemudian widget yang satu ini 100% responsive sob. Jadi widget ini dapat digunakan di semua ukuran layar, dan akan menyesuaikan sendiri dengan ukuran layarnya. Untuk testing, dibawah sudah saya pakai widget ini, silahkan klik Ikon Restore Down di browser sobat, di samping ikon Close, di pojok kanan atas.

Silahkan drag sisi samping dari browser, dan atur lebarnya. Widget ini akan menyesuaikan dengan lebar browser sobat.

Setidaknya, seperti ini lah tampilan dari widget responsive ini.

Ukuran Laptop

Ukuran Laptop

Ukuran Tablet

Ukuran Tablet

Ukuran SmartPhone

Ukuran Smartphone


Apa tujuan dibuat Author Box?

...tentu agar pengunjung mengetahui siapa dalang dibalik artikel yang dia baca, membuat author box pada blog juga akan menambah kesan professional pada suatu blog, yang penting gak asal asalan yah...

Apa tujuan dibuat Kotak Berlangganan Artikel?

Yang ini unik...
... sebagian besar blogger termasuk saya, enggan untuk memasang kotak berlangganan artikel di blog.  Alasannya ber macam macam. Padahal, widget satu ini sangat penting untuk meningkatkan visitor yang aktif dan tidak sekedar numpang lewat. Pengunjung yang setia mempunyai pengaruh besar terhadap blog sobat.

Bilang saja sobat mempunyai 10 orang yang berlangganan di blog sobat, dan setiap sobat membuat artikel, akan ada pemberitahuan kepada 10 orang tersebut. Kemudian orang orang tersebut berkunjung ke blog sobat. Ini akan mendrongkrak visitor sobat.

Baiklah... Mari kita memasangnya...

  • Login ke blogger
  • Klik Template
  • Klik Edit HTML
3 point diatas saya anggap sobat blogger sudah mengerti dan tidak akan saya perinci lagi dengan screen shots.

  • Klik CTRL + F untuk mempermudah pencarian.
  • Ketikkan <data:post.body/>
  • Copy kode dibawah ini tepat di bawah kode <data:post.body/>

<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <div class="author-wrapper"><br/>
      Ditulis Oleh : <br/>
      <img class='author-img' expr:alt='data:post.author' expr:src='data:post.authorPhoto.url'/>
      <div><H4><data:post.author/></H4></div>
      <div><i><data:post.authorAboutMe/></i></div>
  </div><br/>
  <hr/>
    Dapatkan Update Informasi Terbaru Melalui Email !!
<div class="sidebar-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=pc-blogz" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=pc-blogz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="PC-Blogz" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Masukan email anda disini..."/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Berlangganan" />
</form>
</div>
</div>
</div>

Untuk tulisan berwarna merah, sobat bisa menggantinya dengan kata kata sobat sendiri.
Untuk tulisan berwarna biru, ganti dengan FeedBurner blog sobat.

Jika kode <data:post.body/> ada lebih dari satu di template blog sobat, itu tergantung template blog sobat, paste di kode yang terakhir. Tapi tidak sedikit juga yang bekerja pada kode kedua. Silahkan sobat sesuaikan sendiri.

Langkah ke 2 :

  • Masih di Edit HTML.
  • Klik CTRL + F untuk mempermudah pencarian.
  • Ketikkan ]]></b:skin>
  • Copy kode dibawah ini dan letakkan tepat di atas kode ]]></b:skin>

 #sidebar-subscribe-box{width:100%;margin:auto; margin-top:10px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(http://2.bp.blogspot.com/-Y3hbgki8hXE/UXZE9IlUi4I/AAAAAAAAAgI/gIGB-L-HKHo/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:none}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(http://3.bp.blogspot.com/-DfHJzP9Mlh4/UXZE9ONhVnI/AAAAAAAAAgM/5xtMqb9biR4/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:100%}
 .sidebar-subscribe-box-email-button{background:#007abe;border:1px solid #009cff;color:#fff;cursor:pointer;font-weight:700;padding:5px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-align:center;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#00496c}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2); -webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:5px;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
.author-img{width: 110px;height: 110px;border: solid 2px black;border-radius: 15px;-webkit-border-radius: 15px;-moz-border-radius: 15px;-o-border-radius: 15px;}

Jangan lupa untuk klik pratinjau terlebih dahulu, untuk menghindari crash.

Oh iya...
Widget Kotak berlangganan artikel saya ambil dari salah satu post di PULO BLOG. Dengan sedikit keahlian coding. Saya memodifnya dan menggabungkannya dengan Multi Author Box by me.

Do With Your Own Risk.

Saran dan kritik silahkan berkomentar. No SPAM ya...

Membuat Multi Author Box Responsive Sekaligus Kotak Berlangganan Artikel Di Blog

Oke sob... Kali ini akan kita bahas cara membuat author box dengan kotak berlangganan artikel. Satu WIDGET dua FUNGSI. Tenang sob... ... Untuk sobat yang mempunyai blog dengan lebih dari 2 pengurus, dapat menggunakan author blog yang satu ini, karena akan menyesuaikan dengan data akun gmail yang penulis gunakan, yaitu foto, nama, dan intro atau perkenalannya. Kemudian widget yang satu ini 100% responsive sob. Jadi widget ini dapat digunakan di semua ukuran layar, dan akan menyesuaikan sendiri dengan ukuran layarnya. Untuk testing, dibawah sudah saya pakai widget ini, silahkan klik Ikon Restore Down di browser sobat, di samping ikon Close, di pojok kanan atas. Silahkan drag sisi samping dari browser, dan atur lebarnya. Widget ini akan menyesuaikan dengan lebar browser sobat. Setidaknya, seperti ini lah tampilan dari widget responsive ini.

Labels: ,
This is the most recent post.
Older Post

Post a Comment

Jangan buang waktu percuma untuk membuat komentar SPAM atau sekedar mencari backlink. Karena kedua komentar tersebut akan langsung dihapus.
Admin online 12/7

Author Name

MKRdezign

Contact Form

Name

Email *

Message *

Theme images by Ollustrator. Powered by Blogger.