Penulis
Muhamad Nurul Huda
Cara Membuat Subscription Box Seperti Blog Arlina Design - Tahukah kamu tentang blog yang bernama "ARLINA DESIGN " ?
Jika kamu tahu, mungkin kamu juga sudah banyak belajar mengenai tutorial - tutorial tentang blog yang ada pada blog tersebut.
Nah, kali ini saya akan membagikan tutorial yang berkaitan dengan blog tersebut.
Tutorial apakah itu ?
Seperti judul yang sudah saya tulis diatas, tutorial kali ini adalah untuk membuat " Kotak Berlangganan atau Subscription Box Ala Arlina Design ".
Maksud " Ala Arlina Design ", mungkin adalah kotak subscriptionnya mirip seperti yang ada dibagian paling bawah blog Arlina Design.
Nah, mungkin kamu pernah menjumpai sebuah blog atau blog yang ada sebuah kotak yang tujuan kotak atau menu atau widget tersebut ditambahkan ke dalam blog atau website tersebut, adalah agar kamu dapat dengan mudah mengetahui atau mendapat pemberitahuan mengenai artikel terbaru yang baru saja ditulis oleh pemilik Blog atau Website.
Sebelumnya, jika kamu sudah terbiasa mengedit template blog atau websitemu, mungkin kamu juga pernah menggunakan metode " Inspect Elemen " untuk menambah atau mengedit widget pada blogmu.
Baca dulu : |
|
Sekarang, inilah tutorialnya :
Cara Membuat Subscription Box Seperti Blog Arlina Design :
1. Log in dulu ke blogger.com jika kamu membuat blognya di Blogspot atau blogger.com
2. Pilih " Tema " atau" Template "
3. Klik " Edit HTML "
4. Tekan tombol CTRL+F untuk mencari kode ]]></b:skin> atau </style>
5. Copas kode berikut dan letakkan di atas kode ]]></b:skin> atau </style>
/* Subscribe Box */ #subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;} .subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%} .subscribe-form{clear:both;display:block;overflow:hidden} form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden} .subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0} .subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s} .subscribe-css-email-button:hover{background:#37b185;} #subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;} #subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s} #subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase} #subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none} #subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s} #subscribe-css:hover p.subscribe-note span:before{width:100%;}6. Tambahkan markup dibawah ini diantara <body> dan </body>
Ket. : Untuk tempat peletakkan markup dibawah ini bebas, yang penting diantara kedua kode tersebut.
<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p><div class='subscribe-wrapper'><div class='subscribe-form'><form action='http://feedburner.google.com/fb/a/mailverify?uri=Teknoidnet' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=Tenoidnet', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='<input name='uri' type='hidden' value='Teknoidnet'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form> </div></div> </div></div></div></div>7. Ganti kata Teknoidnet dengan id feedburner kalian
Untuk cara melihat id feedburner :
- Buka blogger.com
- Pilih Tata Letak
- Tambahkan Gadget, terserah dimanapun
- Cari dan pilih " Ikuti lewat email "
- Nah, disitu kamu akan melihat id feedburner mu
8. Klik simpan
9. Selesai
Mudah bukan ?
Terima kasih kepada Arlina Design atas tutorial yang diberikan. Oh ya, apabila kamu ingin mengunjungi blog tersebut, kamu bisa mengikuti link berikut ini :
http://www.arlinadzgn.com/Sekian " Cara Membuat Subscription Box Seperti Blog Arlina Design "
0 Response to "Cara Membuat Subscription Box Seperti Blog Arlina Design "
Post a Comment