Cara Mudah Membuat Kotak Subscribe Keren di Blog

♥ Cara Membuat Kotak Subscribe Keren di Blog

blogosmile image

Kotak langgaran artikel atau subscribe bagi blogger memiliki banyak fungsi. Apalagi bagi blogger yang jumlah pengunjungnya cukup tinggi. Kotak langganan ini bisa membantu sekaligus meningkatkan jumlah pembaca.

Postingan kali ini, BS akan membahas cara pembuatan kotak langganan dengan bentuk yang keren. Sebelumnya, kita pernah juga membuat kotak langganan serupa namun bentuk yang sederhana.
Kotak Subscribe yang akan kita buat kali ini modelnya seperti berikut:

Selain bentuknya lebih menonjol di blog, karena berwarna cerah dan punya gambar gif, kotak Subscribe ini juga sekaligus menyertakan tombol RSS, Twitter dan Google Plus. Dengan begitu pengunjung akan lebih dimudahkan berinteraksi dengan kita melalui media sosial.

Tapi sebelum membuatnya, ada baiknya Anda mengenal dulu: Apa Itu FeedBurner dan Bagaimana Membuatnya?. Hal ini penting karena kotak subscribe ini akan bertautan dengan FeedBurner.

Baiklah, untuk memasang kotak subscribe keren ini di blog Anda, ikuti langkah berikut.

• Login ke akun blogspot Anda dan masuk ke halaman layout / tata letak. 
• Klik Add a Gadget / Tambahkan Gadget
• Klik HTML/JavaScript

• Lalu copy paste script berikut dan save. 

<style>
    #dgenera-blog {
        border: 0;
        margin-bottom: 10px;
        margin: 0 auto;
            width:300px;
    }

    #email-news-subscribe .email-box{
        padding: 5px 5px;
        font-family: "Arial","Helvetica",sans-serif;
       height:38px;}
    #email-news-subscribe .email-box input.email{
        background:#FFFFFF;
        border: 1px solid #dedede;
        color: #999;
        padding: 7px 10px 8px 10px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        -o-border-radius: 3px;
        -ms-border-radius: 3px;
        -khtml-border-radius: 3px;
        border-radius: 3px;
        border-image: initial;
        font-family: "Arial","Helvetica",sans-serif;}
    #email-news-subscribe .email-box input.email:focus{color:#333}

#email-news-subscribe .email-box input.subscribe{
        background: -moz-linear-gradient(center top,#666 0,#333 100%);
        background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333));
  
        font-family: "Arial","Helvetica",sans-serif;
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:white;
    
        padding:7px 14px;
        margin-left:3px;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
        border-image: initial;}

    #email-news-subscribe .email-box input.subscribe:hover{
  
        background-image:-moz-linear-gradient(top,#333,#666);
        background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666));
        filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb);
        outline:0;-moz-box-shadow:0 0 3px #999;
        -webkit-box-shadow:0 0 3px #999;
        box-shadow:0 0 3px #999
  
        -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00);
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        border:1px solid #333;
        color:#FFFFFF;
     }

    #other-social-bar {
        padding: 0px;
        overflow: hidden;
           height:37px;
         margin-top:-8px;
    }
    #other-social-bar ul {list-style: none outside none; padding-left: 4px;}

    #other-social-bar .other-follow {
        float: left;
        overflow: hidden;
        padding:5px;
        width: 270px;}
    #other-social-bar .other-follow ul {
        list-style: none outside none;
        padding-left: 4px;}
    #other-social-bar .other-follow li {

        display:inline;
        border:0;
      }

    #other-social-bar .other-follow li a {
        font-size: 12px;
        color:#666;
        font-weight: bold; font-family:arial;
        display:inline;
        }
    #other-social-bar .other-follow li.my-rss {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb7xsPWn1LNY6W76S1EU6rrTvkAu1f4Bl27VwiFLap0TTywHmM837yvAQXuXbMQUOHuS1QEoMpABE4eVD_M2y_LkJlMOv6mHSaVrB4uBVQJa_ALuIdtuIJTmMm2IGzGcXMxFXKFcMHiGg/s400/rss-16x16.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;
            margin-left:5px;}

    #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{
    text-decoration:none;
    }
    #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
    text-decoration:underline;
    }
    #other-social-bar .other-follow li.my-twitter {
        background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmLVqDlGHsynbwi3ufxccGYSwAVz6rVOOhiEus4l03pe4ZABQADHzVHhSDWJlBRfPmyZ2fgJ8mbx8p6Pt2ummC7ZxReuikuXECgOmmSguZRrDKzlD1oFjZT7H0TxlQ4ft-UDJDs30qjE/s400/twitter%2527.png') no-repeat transparent;
        line-height: 1;
        padding: 0px 3px 1px 20px;
        width: 60px;
        margin-bottom:0px;}
    #other-social-bar .other-follow li.my-gplus {
        background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtJTHafUGaHQ-j_rPNIpRc1YCPbeeGZ1rauJPGYQAQvroT85sEi3aXibZ80Bs2mNNtzoTznWXMrOSErczSJJAKN4UO35xVLBvwq3aJkKRJp5o8Ns1ApMcVyzkBHGotLZbb6iCwzsvS0E8/s400/gplus-16x16.png) no-repeat transparent;
        line-height: 1;
        width: 60px;
        padding: 0px 3px 1px 20px;
        margin-bottom:0px;}

.emailicon {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB5IukfssKIjF-GLPaHyQ8gil7WrL6GfVBBZxF7fvoMkkEDYb-I9qoRabSLIaA6Fhf9TMBWhJK96SXSXjhEGxT02UXZ9McPc9fiNXMmrfL3q8K9XFUHD6HS_xmM0iRyqITokZOHAbnq0L1/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent;
     padding: 0px 20px 0px 95px;
    min-height:100px;
    margin: 0px;
    width: 183px;
    line-height: 20px;
    vertical-align: middle;
    font-size: 14px;
    color: rgb(51, 51, 51);
}

.emailicon p {
color:#FF8604;
font-size: 20px;
font-weight: normal;
font-family:  impact;
padding:40 0px 10px 0px;
margin:0;
padding-top: 20px;
line-height: 25px;
text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6;
}
    </style>
    <!--[if IE]>
    <style>
    #email-news-subscribe .email-box input.subscribe{
        background: #333;
        }
    </style>
    <![endif]-->

<div id="Blogoooblok-blog" >

<div class="emailicon"><p>Dapatkan Update Artikel Gratis! </p></div>
<div id="email-news-subscribe">
<div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=blogosmile', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter Email Anda Disini..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" />

<input type="hidden" value="blogosmile" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Subscribe" /> </form> </div> </div>
<div id="other-social-bar">
<ul class="other-follow">
<li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/blogosmile" target="_blank">RSS Feed</a> </li>
<li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="https://twitter.com/blogoooblok"  target="_blank">Twitter</a> </li>
<li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author"href=https://plus.google.com/u/0/+wisarahardi1/poststarget="_blank">Google Plus</a> </li>
</ul>
</div>
</div>

• Pada script diatas, perhatikan yang ditandai warna merah. Ganti dengan alamat FeedBurner Anda.
• Tulisan yang ditandai Kuning ganti dengan alamat Twitter dan Google Plus Anda.
• Tulisan yang dicetak tebal bisa Anda ganti dengan kata-kata Anda sobat sendiri

Jika telah selesai di simpan,maka hasilnya akan nampak seperti gambar diatas. Mudah bukan !!!

good luck & happy blogging :)

Cara Membuat dan Memasang Widget Flickr di Blog

Flickr merupakan sebuah situs yang digunakan untuk menyimpan gambar atau foto dan berbagi gambar atau foto tersebut sesuai keinginan pengguna. Jadi, jika Anda memiliki beberapa koleksi foto atau gambar yang sangat unik atau gambar-gambar yang Anda sendiri atau yang biasa disebut gambar selfie dan ingin agar gambar-gambar tersebut dipajang didalam blog Anda, maka salah satu cara adalah dengan menempatkan gambar tersebut pada tempat khusus yaitu dibagian sidebar atau dibagian yang lain yang mudah dilihat oleh orang lain dan sebelum menampilkan gambar-gambar tersebut, hal pertama yang harus dilakukan adalah menyimpan gambar-gambar tersebut kedalam Flickr. Ingat, sebelum membuat & memasang widget flickr di blog, Anda harus menyimpan gambar kedalam Flickr

Selanjutnya untuk membuat dan memasang widget Flickr di blog, silahkan ikuti tahapan berikut ini:

• Login ke akun Blogger Anda
• Pilih blog yang ingin dipasang widget flickr
• Klik menu Template >> Edit HTML
• Cari kode ]]></b:skin> dan salin kode css berikut sebelum
•  (di atas) ]]></b:skin>

.flickr {
width:250px /* sesuaikan lebar kolom */
}

.flickr_badge_image {
float:left;
height:60px;
margin:5px;
width:65px
}

.flickr_badge_image a {
display:block
}

.flickr_badge_image a img {
display: block;
width: 100%;
height: auto;
}

• Simpan template
• Klik menu Tata letak >> Tambahkan Gadget >> HTML/JavaScript
• dan salin kode berikut kedalam kolom

<div class="flickr">

<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=9&amp;display=latest&amp;size=s&amp;layout=x&amp;source=user&amp;user=150553214@N04">

</script>

</div>

• Simpan
• Lihat hasilnya di blog Anda

150553214@N04 ganti dengan kode user Anda di Flickr

Good Luck & Happy Blogging :)

Cara Membuat Widget Blogroll atau Blog List unik

blogroll atau bisa pula diistilahkan sebagai Blog List adalah salah satu fitur widget blog yang berfungsi untuk menempatkan daftar beberapa blog rekomendasi dari admin. Bisa pula widget Blogroll ini digunakan untuk menampilkan iklan baik berupa text atau banner.

Bagi beberapa admin, fasilitas blogroll merupakan fasilitas yang sangat efektif untuk memperkenalkan blog lain yang ia kelola. Sebaliknya, bagi pengunjung, blogroll ini juga bisa membantunya mendapatkan informasi dengan tema lain tanpa harus searching di mesin penelusuran.

Widget blogroll ini secara default telah disediakan oleh blogger. Sekarang namanya sudah berganti menjadi Blog List. Akan tetapi keduanya memiliki fungsi yang sama, hanya ganti nama saja.

Baiklah,tutorial blogging kali ini akan mengulas cara membuat widget Blogroll baik dalam bentuk bawaan blogger maupun modifikasi widget yang lebih menarik.

Widget Blog Roll atau Blog List Menarik

1. Masuk dasboard blogger.

2. Menuju menu Layout, lalu Add a gadget.

3. Cari widget Blog List. Kemudian klik.

Keterangan :

Title untuk nama widget.

Sort pada Most recently update digunakan untuk menampilkan urutan blog sesuai seringnya blog diupdate. Sedangkan untuk Alphabetically by blog title adalah urutan blog sesuai alphabet.

Show untuk menampilkan daftar blog. All blogs untuk semua blog. Icon untuk menampilkan faticon blog. Title of most of recent item untuk menampilkan judul postingan terbaru. Snippet of most recent item untuk menampilkan kata-kata awalan postingan terbaru. Thumbnail of most recent item untuk menampilkan image atau gambar tumbnail postingan terbaru. Dan Date of last update untuk menampilkan tanggal terakhir diupdate.

4. Untuk menambah daftar blog, silakan klik Add a blog to your list. Lalu isi dalam kotak popup dengan URL blog yang ingin ditambahkan. Kemudian untuk menambah list, silakan klik Add to List dan lakukan seperti tahap tadi. Demikian seterusnya hingga semua daftar terisi.

5. Akhiri dengan Save.

Widget blogroll model Text Area

1. Masuk dasboard blogger.

2. Menuju menu Layout, lalu Add a gadget.

3. Pilih HTML/JavaScript. Lalu isi area HTML dengan kode berikut.

<div style="border: 1px solid rgb(153, 153, 153);

overflow: auto;

width: 200px;

height: 200px;

text-align: center; ">

<a href="URL BLOG">JUDUL LINK</a> <br />

<a href="URL BLOG">JUDUL LINK</a> <br />

<a href="URL BLOG">JUDUL LINK</a> <br />

<a href="URL BLOG">JUDUL LINK</a> <br />

</div>

Keterangan :

Ganti URL BLOG (https://blogosmile.blogspot.com/) dengan URL blog yang diinginkan. Demikian pula JUDUL LINK (blogosmile) disesuaikan dengan keinginan. Silakan masukkan semua link yang ada.

Kode width dan height yang tertulis 200px bisa dirubah sesuai layout yang ada agar tampilan lebih tepat.

4. Akhiri dengan Save.

Widget blogroll model Marquee

1. Masuk dasboard blogger.
2. Menuju menu Layout, lalu Add a gadget.
3. Pilih HTML/JavaScript. Lalu isi area HTML dengan kode berikut. 

<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

<a href="URL BLOG">JUDUL LINK</a> <br />
<a href="URL BLOG">JUDUL LINK</a> <br />
<a href="URL BLOG">JUDUL LINK</a> <br />
<a href="URL BLOG">JUDUL LINK</a> <br />
</marquee>

Keterangan :
Ganti URL BLOG dengan URL blog yang ingin dimasukkan dalam dalam blogroll. Ganti JUDUL LINK sesuai keinginan.
Untuk direction adalah mode pergerakan scroll. Pada mode ini adalah mode blogroll bergerak ke atas. Untuk menggantinya dengan pergerakan ke bawah, ganti kode up dengan kodedown.Bisa pula mode bergerak horizontal ke kiri menggunakan :

kode left dan right untuk bergerak ke kanan.

Untuk height atau tinggi widget juga bisa diatur sendiri.
Catatan, untuk mode bergerak ke bawah atau down, 

maka kode <br /> jangan dihilangkan.

4. Akhiri dengan Save. Dan lihat hasilnya akan seperti pada sidebar blog BS

good luck & happy blogging:)

• SAMPLE BLOGROL