Tutorial Cara Membuat Widget keren di bawah Potingan Blog Halaman Depan

Tutorial Cara Membuat Widget keren di bawah Potingan Blog Halaman Depan

Posting Terupdate. Widget dibawah postingan halaman depan merupakan sebuah widget yang bisa membuat tampilan blog anda menjadi semakin lebih menarik dan unik. Cara membuat widget tersebut cukuplah mudah, bagi anda yang masih awam dalam widget blogger, anda tidak perlu kawatir karena di dalam blog ini akan di berikan cara memasangnya :

Berikut screnshoot widget apabila sudah berhasil :

Widget 2 Kolom Di bawah Post Halaman Depan

Langsung anda praktikkan pada blogger :

1. Template > Edit HTML
2. Copy dan Paste/tempelkan kode berikut ini di atas kode  ]]</b:skin>

#post-kiri{padding-left: 5px;width: 290px;float: left;word-wrap: break-word;overflow: hidden;margin:0 8px 15px 8px;} .post-kiri a, post-kanan a {color:#555;font-size:13px} .post-kiri ul {list-style: none;color: #;margin: 0;padding: 0;} .post-kiri li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhyphenhyphenWLQ3_uJpSjSKl8P2WrQrztsuw5xfYczrca8BUnhiAunZLY0tyq_BVuD-l5AhBgJd89ChdwwUM2CQQJlA9MUoY_PsKjW0I54eAOZGY5TQ16uvSSUekMtoUuorYUz-FWd2HyjClCex8/s1600/bullet-list.gif) no-repeat 0 10px;text-indent: 0;line-height: 1.2em;border-bottom: 1px dotted #ddd;margin: 0;padding: 3px 0 3px 12px;} .post-kiri h2 {font-size: 15px;font-family: Oswald;}
#post-kanan{padding-left: 5px;width: 290px;float: left;word-wrap: break-word;overflow: hidden;margin:0 8px 15px 8px;} .post-kanan a, post-kanan a {color:#555;font-size:13px} .post-kanan ul {list-style: none;color: #EAE9E8;margin: 0;padding: 0;} .post-kanan li {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBhyphenhyphenWLQ3_uJpSjSKl8P2WrQrztsuw5xfYczrca8BUnhiAunZLY0tyq_BVuD-l5AhBgJd89ChdwwUM2CQQJlA9MUoY_PsKjW0I54eAOZGY5TQ16uvSSUekMtoUuorYUz-FWd2HyjClCex8/s1600/bullet-list.gif) no-repeat 0 10px;text-indent: 0;line-height: 1.2em;border-bottom: 1px dotted #ddd;margin: 0;padding: 3px 0 3px 12px;} .post-kanan h2 {font-size: 15px;font-family: Oswald;}

3. Cari dengan tekan (Ctrl+F) pada keyboard kode <div id='main-wrapper'> dan Anda akan menemukan sebuah kode seperti di bawah ini:

<div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div>

4. Copy paste kode berikut ini di bawah kode </b:section> atau sebelum kode </div>

<b:if cond='data:blog.url == data:blog.homepageUrl'>                         <b:section class='post-kiri' id='post-kiri' preferred='yes'/>                         <b:section class='post-kanan' id='post-kanan' preferred='yes'/>                         </b:if>

5. Save Template ! kemudian lihat hasilnya pada tab layout blogger anda

itulah tutorial sederhana tentang Cara Membuat Widget keren di bawah Potingan Blog Halaman Depan, semoga bisa anda praktikan dan Good Luck. Semoga Berhasil... !!!

Tweet