Tutorial Blog Unik: Post

Cara Membuat Related Post / Artikel Terkait Di Blog

<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Related Post / Artikel Terkait Di Blog</b> - Bertemu lagi dengan saya, <b><a href="http://fahmifanirius.ga/">Fahmi Fanirius Blog</a></b> yang membahas <b>tutorial blogger pemula</b>. Master juga bisa ikut. =)) Sore ini, saya akan bahas tutorial lagi yang banyak dipakai oleh setiap blog, bahkan hampir semua blog maupun web menggunkan tutorial ini. Tutorial tersebut sering disebut dengan <b><a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-related-post-artikel.html">Cara Membuat Related Post / Artikel Terkait Di Bawah Postingan Blog</a></b></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<img alt="Cara Membuat Related Post / Artikel Terkait Di Blog" height="149" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja5VXahj2RA8uuD2jaxNEiD58szIAZ6fcElCSIabEuamlQHMSBDnWN3ZjnfjIPKk8-4PFVinXJnnhXTqgiYQDhWNpWXoTnRP9MWA2Ck0zKOXUf5xL0P77tcINAsbH2ZEwQFsHpqxbeLTDb/s320/related+posts+blogspot.png" title="Cara Membuat Related Post / Artikel Terkait Di Blog" width="320" /></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Bahkan, banyak juga kalangan blogger mengatakan bahwa sebuah <b>artikel terkait</b> <b>atau related post </b>itu wajib. Kemungkinan sebab nya adalah untuk menaikkan trafik blog tersebut. Logika nya begini, ketika pengunjung sobat selesai membaca artikel sobat yang super menarik untuk dibaca, maka sengaja atau pun tidak sengaja pengunjung tersebut akan membaca <b>artikel terkait / related post di bawah postingan blog</b> tersebut. <b>Artikel terkait</b> yang dimaksudkan disini adalah artikel atau post mempunyai tag yang sama</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Dengen tutorial <b>artikel terkait atau related post</b>, pengunjung sobat dapat menjelajahi semua artikel blog sobat jika artikel tersebut saling terkait atau mengaitkan. Dengan ini, pageview atau penayangan blog sobat akan naik. Maka dari itu, sebuah <b>related post atau artikel terkait di bawah postingan blog</b> sangat penting. Karena <b>salah satu cara untuk menaikkan trafik blog</b> sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Dan disini, saya akan beri tutorial tersebut. Namun, sebelum saya akan jelaskan, disini saya mempunyai 2 cara yang berbeda dan tampilan yang berbeda juga. Maaf, disini saya tidak mempunyai demo nya. Tetapi, tutorial ini 100% work jika sobat membaca nya dengan teliti dan seksama.</span><br />
<br />
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><b><span style="font-size: large;"> Cara Membuat Artikel Terkait Di Bawah Postingan Blog</span></b></span></h2>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;"> 1. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">2. Klik template/rancangan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Edit HMTL</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Cari kode</span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"> <span style="line-height: 19.2000007629395px; text-align: justify; white-space: normal;"><span style="color: cyan;"><data:post.body/></span></span> </span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar lebih memudahkan untuk mencari, klik kolom edit HTML, kemudian tekan secara bersamaan pada keyboard Ctrl+F)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5. Setelah ketemu, copast kode dibawah ini. Letakkan kode dibawah ini tepat DIBAWAH kode </span><span style="background-color: #0b5394; color: cyan; font-family: Arial, Helvetica, sans-serif; line-height: 19.2000007629395px; text-align: justify;"><data:post.body/></span><br />
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: auto;">
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>
</span></code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
6. Simpan</span><br />
<br />
<h2 style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: large;"><b>Cara Membuat Artikel Terkait Menggunakan Linkwithin</b></span></span></h2>
<br />
<span style="font-family: Arial, Helvetica, sans-serif;">Contoh tampilan related posts dari Linkwithin</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div style="text-align: center;">
<img alt="Cara Membuat Related Post / Artikel Terkait Di Blog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc7E2HhZIQ4UCTfT_60wAvy2Qa2P0Bmd3w5QB_C2R2kzD3kJ1Vlbh2oGzUOmIaL1MF40TZegjKKzMLlyrTsNlS4Thg7SZNx6B3qfCFNjHV2SoekV1_6xzoQ3IW3-o3Ywvct5Cug-eAmhI/s1600/%2528rian-share4u.blogspot.com%2529.PNG" title="Cara Membuat Related Post / Artikel Terkait Di Blog" /></div>
<div style="text-align: center;">
<br /></div>
<span style="font-family: Arial, Helvetica, sans-serif;"> 1. Kunjungi dulu situs linkwithin. Klik disini <a href="http://www.linkwithin.com/" rel="nofollow"><b>www.linkwithin.com</b></a></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Related Post / Artikel Terkait Di Blog" height="216" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8jTasqdRL6rKXIfUUCi1PN9jvAwS5PvzxzXrnK5k5kqc8dSkx8c7Sl503gMvCIjfIwkaGoriEu99Bygbr5Cc6NMU1k9UJs_66blIhM0mUhRua1t-kO6KFyLAfrJ-VXmIzlDftV493WGM/s1600/linkwithin-ab.png" title="Cara Membuat Related Post / Artikel Terkait Di Blog" width="320" /></span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
2. Isi dulu form yang tersedia.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan:</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Email</b>: Isi dengan email sobat. Jika sobat masih belum punya email, buat dulu email nya. (<span style="color: red;">Baca juga</span>: <a href="http://www.fahmifanirius.ga/2014/11/cara-membuat-email-baru-gmail-mudah-di.html"><b>Cara Membuat Email Baru Gmail Mudah Di Google Terbaru 2015</b></a>)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Blog link</b>: Isi dengan nama URL blog sobat yang akan diberi related post.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Platform</b>: Pilih blogger. Jika sobat menggunakan wordpress, ya pilih wordpress.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Width</b>: Pilih jumlah artikel terkait thumbnail yang akan ditampilkan (max 5 post).</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">Jika sobat ingin related post yang terang, centang tulisan: My blog has light text on a dark background. Jika ingin gelap, jangan dicentang.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">3. Klik Get Widget!</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">4. Tunggu beberapa saat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">5. Setelah itu, akan muncul script HTML/JavaScript, kemudian copy script tersebut.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">6. Login Blogger</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">7. Template/rancangan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">8. Edit HTML</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">9. Cari kode </span><br />
<pre><span style="font-family: Arial, Helvetica, sans-serif;"><span style="color: cyan;"></body></span> </span></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">(agar mempermudah pencarian, klik kolom Edit HTML, kemudian tekan Ctrl+F secara bersamaan pada keyboard)</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">10. Copy kemudian paste dan letakkan kode dibawah ini tepat DIATAS kode <span style="background-color: #0b5394; color: cyan;"></body></span></span><br />
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;"><b:if cond='data:blog.pageType != &quot;item&quot;'><span style="color: cyan;"><b>Paste kan script related post linkwithin disini</b></span></b:if></span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;">11. Simpan</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;">*Keterangan: Ganti tulisan </span><b style="color: cyan; font-family: Arial, Helvetica, sans-serif;">Paste kan script related post linkwithin disini </b><span style="font-family: Arial, Helvetica, sans-serif;">dengan kode script related post tadi.</span><span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <span style="font-family: Arial, Helvetica, sans-serif;">Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger</strike></span></a></b></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="content-box-infoindong">
<div itemscope="" itemtype="http://schema.org/Review">
<div itemprop="itemReviewed" itemscope="" itemtype="http://schema.org/Thing">
</div>
<table><tbody>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Judul </span></td> <td width="60%"><span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara Membuat Related Post / Artikel Terkait Di Blog</span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Deskripsi </span></td> <td width="60%"><div style="text-align: justify;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Cara membuat related post / artikel terkait di blog menggunakan 2 cara yang akan membuat pengunjung Anda menjangkau semua laman web/blog Anda.</span></div>
</div>
</td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author </span></td> <td width="60%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="author">Google</span></span></td> </tr>
<tr align="justify"> <td width="20%"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;">Author Rating </span></td> <td width="60%"><div itemprop="reviewRating" itemscope="" itemtype="http://schema.org/AggregateRating">
<div style="text-align: left;">
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif; font-size: x-small;"><span itemprop="ratingValue">95%</span>/       <span itemprop="bestRating">100%</span> Suara Dari 2964 votes</span></div>
</div>
</td></tr>
</tbody></table>
</div>
</div>
</div>

Post Tutorial Blogger Widget Cara Membuat Related Post / Artikel Terkait Di Blog

Cara Membuat Related Post / Artikel Terkait Di Blog - Bertemu lagi dengan saya, Fahmi Fanirius Blog yang membahas tutorial blogger pemula...

Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog

6:35 AM Admin 23

<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<div dir="ltr" style="text-align: left;" trbidi="on">
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog</b> - Banyak sekali tutorial yang membahas tentang adanya <b>Drop Cap (Huruf Besar) pada awal postingan blog.</b> <b>Drop Cap (Huruf Besar)</b> ini sangatlah populer di dunia blogger ini, banyak sekali para blogger yang <b>menggunakan Huruf besar pada awal penulisan artikel</b> mereka sobat. Untuk <b>memasang fitur Drop Cap di blog</b> tidaklah sulit sobat,karena hanya menambahkan sedikit saja sebuah ramuan di template sobat. Nah,sebuah ramuan tersebut adalah ramuan yang dibuat dengan menggunakan kode CSS (Cascading Style Sheet) .</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1rAo1bb644Ri1kvEQmYpscrgQQS0mIUxgBa6zbHoMbRsCDONpK5PCJV0IhXWoxJm9Ra4RrEach9n8i06_zjslIaQxcl93ERxnhnWdl4qi6Ba6OB3MlibM_Ls78f1Vtrbq5qC-tNTK2hVS/s1600/membuat-auto-drop-cap-di-postingan-blog.jpeg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: black; font-family: Arial, Helvetica, sans-serif;"><img alt="Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1rAo1bb644Ri1kvEQmYpscrgQQS0mIUxgBa6zbHoMbRsCDONpK5PCJV0IhXWoxJm9Ra4RrEach9n8i06_zjslIaQxcl93ERxnhnWdl4qi6Ba6OB3MlibM_Ls78f1Vtrbq5qC-tNTK2hVS/s1600/membuat-auto-drop-cap-di-postingan-blog.jpeg" title="Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog" /></span></a></div>
<div class="separator" style="clear: both; text-align: center;">
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
<span style="font-family: Arial, Helvetica, sans-serif;"><b>Fitur Drop Cap</b> ini <b>pada awal postingan</b> akan <b>membuat tulisan</b> atau <b>artikel blog memiliki style koran atau majalah</b> karena banyak koran/majalah yang <b>menggunakan style Drop Cap</b> ini. Jadi, <b>Drop Cap</b> ini adalah suatu teknik dalam memperindah tampilan blog pada umumnya dan khususnya pada <b>tampilan postingan</b> sobat.</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Tapi, tutorial <b>Membuat Auto Drop Cap Pada Postingan di Blog</b> ini auto otomatis. Jadi, sobat gak perlu lagi buat heading susah payah. Karena setiap sobat menulis artikel di postingan, akan secara otomatis muncul drop cap nya atau huruf besar. Nah, <b>cara membuat Drop Cap</b> sebagai berikut :</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<b><a href="http://www.fahmifanirius.ga/2015/01/cara-membuat-drop-cap-huruf-besar-pada.html" title="Cara membuat Drop Cap di dalam artikel blog">Cara membuat Drop Cap di dalam artikel blog</a></b> :</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">1. Sobat harus Sign-In terlebih dahulu ke blogger.</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">2. Pilih template dan pilih tombol costumize untuk menuju halaman blogger template designer.</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">3. Klik advanced dan klik add css</span></div>
</div>
<div style="text-align: center;">
<div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;">4. Copy-paste kode dibawah ini pada kolom yang tersedia :</span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div>
</div>
<pre><code><span style="font-family: Arial, Helvetica, sans-serif;">
/* kode untuk huruf awal
----------------------------------------------- */
.awal {
float:left;
color: #000000;
background:#ffffff;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
</span></code></pre>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
</span> <br />
<div style="text-align: left;">
<span style="background-color: white; font-family: Arial, Helvetica, sans-serif; line-height: 18.4799995422363px;">5. Lalu klik Apply to blog.</span></div>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
Nah, mudahkan sobat<b> memasang tampilan Drop Cap </b>ini? Tetapi, sobat juga harus ingat tentang satu hal ini. <b>Tampilan Drop Cup</b> tidak akan langsung <b>muncul di postingan blog</b> sobat. Untuk <b>memunculkan Drop Cup pada awal postingan</b>,sobat perlu <b>menyisipkan </b>sedikit kode saat menulis artikel sobat. Kode yang disisipkan sebagai berikut :</span><br />
<br />
<pre><code><div style="text-align: left;">
<span style="font-family: Arial, Helvetica, sans-serif;"><span class="awal">huruf awal</span>
</span></div>
</code></pre>
</div>
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 18.4799995422363px;"><br />
</span> <span style="background-color: white; line-height: 18.4799995422363px;"><b>Ingatlah :</b></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 18.4799995422363px;"><br />
</span> <span style="background-color: white; line-height: 18.4799995422363px;">Kode tersebut disisipkan saat sobat menulis dalam mode <b>Edit HTML</b> dan bukan dalam mode <b>Compuse</b> ya sobat. <b>Drop Cap</b> tidak akan muncul jika sobat menulis dalam mode Compuse.</span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white; line-height: 18.4799995422363px;"><br />
</span> <span style="background-color: white; line-height: 18.4799995422363px;"><b>Tambahan :</b></span></span><br />
<span style="font-family: Arial, Helvetica, sans-serif;"><br />
<span style="background-color: white; line-height: 18.4799995422363px;"><b>#000000</b> adalah warna font dari<b> Drop Cap</b> dan <b>#ffffff</b> adalah warna background. Untuk melihat kode warna,sobat bisa mengunjungi </span><span style="line-height: 18.4799995422363px;"><u><b><a href="http://www.fahmifanirius.ga/p/blog-page_8.html">Kode Warna</a></b></u></span></span></div>

Post Tutorial Blogger Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog

Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog - Banyak sekali tutorial yang membahas tentang adanya Drop Cap (Huruf Besar...

Cara Membuat Post Popular Warna Warni

10:23 PM Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div style="text-align: left;">
<b><span style="font-family: Arial,Helvetica,sans-serif;">Cara Membuat Post Popular Warna Warni</span> </b>- Bagi kalian pecinta warna warni/colorful beruntung sekali. Saya akan menjelaskan <a href="http://www.fahmifanirius.ga/2014/06/cara-membuat-post-populer-warna-warni.html" target="_blank">Cara Membuat Widget Post Popular Warna Warni</a> post/artikel populer digunakan untuk menayangkan artikel pada web Anda yang sering dikunjungi oleh visitor. Tapi, kali ini widget populernya warna warni. </div>
<br />
Bagaimana menurut Anda? Saya yakin banyak sekali para pembuat web yang membuat <b>populer post/most populer dengan tampilan warna-warni</b> seperti gambar dibawah ini. Tapi tentu orang yang awam tentang blog yang sangat ingin membuat popular post warna-warni kebingungan. Apakah termasuk Anda?<br />
<br />
Kalau iya, ini nih, caranya:</div>
<div style="text-align: justify;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyNAea2Yo1aAcO_nxM59wUt5srt2eL46hDPZSbdvWoknGfbchao_c7X_prnl92De6qGJhNH5PqIHcSgbF3rcybK59tax0SeylQNytpzKy_s9MTciS_7ip-20Y9fba3W8Em6MNzIL5YPU4J/s1600/Screenshot_1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Post Popular Warna Warni" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyNAea2Yo1aAcO_nxM59wUt5srt2eL46hDPZSbdvWoknGfbchao_c7X_prnl92De6qGJhNH5PqIHcSgbF3rcybK59tax0SeylQNytpzKy_s9MTciS_7ip-20Y9fba3W8Em6MNzIL5YPU4J/s1600/Screenshot_1.png" title="Cara Membuat Post Popular Warna Warni" /></a></div>
<div style="text-align: justify;">
<br /></div>
<div style="text-align: center;">
1. Login Blogger</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
2. Tata letak/layout</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
3. Add gadget</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
4. Pilih "Entri Populer" atau Popular Post (dalam bhs Inggris)</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
5. Hilangkan centang pada tulisan "Thumbnail Gambar" atau Image Thumbnail</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
6. Atur berapa entri/post sesuai dengan keinginan kalian</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
7. Simpan perubahan</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
8. Tetap diTata letak/layout, pilih add gadget</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
9. HTML/JavaScript</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
10. Copy paste kode dibawah ini pada kolom HTML/JavaScript</div>
<br />
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 400px; overflow: auto; padding: 10px; text-align: left; width: 500px;">
<blockquote class="tr_bq">
<span style="background-color: #0b5394;"><span style="color: cyan;"><style type='text/css'>
</span></span><br />
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">/*----- popular post warna warni by warnarozack.blogspot.com-----*/</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; 
-webkit-text-stroke-width: 0px; color: #333333; display: block; 
font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; 
font-style: normal; font-variant: normal; font-weight: normal; 
letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; 
min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; 
text-decoration: none !important; text-indent: 0px; text-transform: 
none; white-space: normal; widows: 2; word-spacing: 0px;}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li 
.item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child:after,</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li:after,</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li:after,</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li:after,</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li:after,</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li:after,</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li
 + 
li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px
 solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px 
#000;-moz-box-shadow: 0px 0px 5px 
#000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li + li:after{content:"3"}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child + li:after{content:"2"}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li:first-child:after{content:"1"}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;">#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 
0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px 
#000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}</span></span></div>
<div>
<span style="background-color: #0b5394;"><span style="color: cyan;"></style></span></span></div>
</blockquote>
</div>
<br />
<div style="text-align: center;">
11. Simpan perubahan </div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
Lihat hasilnya.</div>
<div style="text-align: center;">
<br /></div>
<br />
<div style="text-align: left;">
Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. </div>
<div style="text-align: left;">
Semoga berhasil... ˆ⌣ˆ</div>
<br />
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger </strike></span></a></b></div>
</div>

Post Tutorial Blogger Warna Warni Widget Cara Membuat Post Popular Warna Warni

Cara Membuat Post Popular Warna Warni - Bagi kalian pecinta warna warni/colorful beruntung sekali. Saya akan menjelaskan Cara Membuat Wi...

Cara Membuat Recent Post Keren Dan Responsive Di Blog

1:49 AM Unknown 0

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="text-align: justify;">
<div style="text-align: left;">
<b><span style="font-family: Verdana,sans-serif;"><a href="http://tutorialblogger.co.vu/" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"></span></a><span style="font-family: Arial,Helvetica,sans-serif;"><b>Cara Membuat Recent Post Keren Dan Responsive Di Blog</b></span></span></b> - Kali ini tutorialnya cukup mudah. Yaitu <a href="http://www.fahmifanirius.ga/2014/04/cara-pasang-animasi-recent-post.html" target="_blank">Cara Membuat Recent Post Keren Dan Ringan Di Blog</a> Recent post? Apa itu? Recent Post adalah postingan blog terakhir. Samalah, dengan Late Post (Postingan Terakhir). Recent post memudahkan visitor/pengunjung untuk membaca artikel atau konten yang Anda buat terkahir kali.</div>
<br />
Dengan recent post ini, jelas akan menarik visitor atau pengunjung Anda agar melihat postingan terakhir yang Anda buat. Tentunya, ketika visitor Anda tertarik dengan artikel Anda, semakin banyak penayangan blog Anda. Gitu.<br />
<br />
<br />
<div style="text-align: left;">
Recent Post ini bergerak yang dibuat sangat keren dan ringan.</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcSBs6CtIyYOAdsyL4jtqpQAW_8erAEG9s-Lv0SMyPea6BYgZU4GCIyjz0YbOZYRLmvg_6RESe37cbeYW8ygQlUJJMsHrzmSGDRprzGMo324aKQQ3ykGjoOeTpyU1QT6fpYqcg2AwnHWU/s1600/aaaa.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Recent Post Keren Dan Responsive Di Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcSBs6CtIyYOAdsyL4jtqpQAW_8erAEG9s-Lv0SMyPea6BYgZU4GCIyjz0YbOZYRLmvg_6RESe37cbeYW8ygQlUJJMsHrzmSGDRprzGMo324aKQQ3ykGjoOeTpyU1QT6fpYqcg2AwnHWU/s1600/aaaa.gif" title="Cara Membuat Recent Post Keren Dan Responsive Di Blog" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2_T9JgREg40iXrnimMDcU2XzJ83KKqE6E9z1idjrVIYgsU1m1OiIdE1fIn1VYkZ9gLaeMVhmlSHpmCZvY8ulQdzrXBFD3ao3NNO-169cUE3Oxx2VwpGZ35HpQeiJ8SDYjWw6BsVIDkLBd/s1600/coba.gif" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br /></a></div>
<br /></div>
<div style="text-align: center;">
<a href="http://www.fahmifanirius.ga/2014/04/cara-pasang-animasi-recent-post.html" target="_blank">Gimana sih, cara membuat recent post yang keren dan ringan di blog?</a></div>
<div style="text-align: center;">
<br />
1. Login Blogger</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
2. Tata letak/layout</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
3. Add gadget</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
4. HTML/JavaScript</div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
5. Copy kode dibawah ini, kemudian paste pada kolom HTML/JavaScript</div>
<div style="text-align: center;">
<br /></div>
<div style="background: #e0eff7; border: 3px dashed #0159f8; height: 280px; overflow: auto; padding: 10px; text-align: left; width: 500px;">
<style type="text/css"><br />
#rp_plus_img{height:377px;}<br />
#rp_plus_img li {height:60px;padding:5px;list-style:none;<br />
background-color:#ffffff;<br />
border:solid 1px #000000;}<br />
#rp_plus_img a{color:#00000;}<br />
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;<br />
text-align:justify;<br />
-moz-border-radius: 5px;}<br />
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}<br />
</style><br />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br />
<script type="text/javascript" src="https://sites.google.com/site/unwanted86/javascript/recentpost.js"></script><br />
<script type="text/javascript"><br />
var speed = 1500;<br />
var pause = 3500;<br />
$(document).ready(function(){<br />
rpnewsticker();<br />
interval = setInterval(rpnewsticker, pause);<br />
});<br />
</script><br />
<ul id="rp_plus_img"><br />
<script style="text/javascript"><br />
var numposts = 5;<br />
var numchars = 0;<br />
</script><br />
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script><br />
</ul><small><a
 
href="http://tutorialblogger.co.vu"
 target="_blank">get this widget here</a></small></div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
6. Simpan perubahan </div>
<div style="text-align: center;">
<br /></div>
<div style="text-align: center;">
7. Lihat hasilnya<br />
<br /></div>
Jangan lupa, ketika sudah mencoba dan berhasil, beri komentar... Kalau masih gagal, coba lagi. Semoga berhasil... ˆ⌣ˆ<br />
<br />
<div style="text-align: right;">
<b><a href="http://www.fahmifanirius.ga/p/tutorial-blogger.html" target="_blank"><span style="font-family: Arial,Helvetica,sans-serif;"><strike>Tutorial Blogger </strike></span></a></b></div>
</div>

Animasi Post Tutorial Blogger Cara Membuat Recent Post Keren Dan Responsive Di Blog

Cara Membuat Recent Post Keren Dan Responsive Di Blog - Kali ini tutorialnya cukup mudah. Yaitu Cara Membuat Recent Post Keren Dan Ringa...

Cara Membuat Related Post / Artikel Terkait Di Blog

Cara Membuat Drop Cap (Huruf Besar) Pada Awal Postingan Blog

Cara Membuat Post Popular Warna Warni

Cara Membuat Recent Post Keren Dan Responsive Di Blog

Terpopuler

Kategori

Arsip Blog