CARA MEMBUAT READMORE BLOG OTOMATIS TERBARU

CARA MEMBUAT READMORE BLOG OTOMATIS
  1. Silahkan login ke akun blogger Anda
  2. Klik menu Template
  3. Klik Edit HTML
  4. Cari Kode </head>.
  5. Copy kode dibawah ini kemudian letakkan tepat di atas kode </head>
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 80;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

Selanjutnya cari kode <data:post.body/>  biasanya letaknya di kode nomor 1600-an diantara <b:includable id='post' var='post'>...</b:includable> , hapus kode tersebut dan gantikan dengan struktur kode di bawah ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:left'> <a expr:href='data:post.url'><b>Readmore</b> &#8594; <data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if><b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Ganti tulisan  Readmore dengan yang kamu inginkan.
Simpan Template dan lihat hasilnya

Struktur Kode Widget Popular Posts Dengan Rating Bintang dan Cara Pemasangannya

Widget Popular  Posts dan Cara Pemasangannya. Widget popular posts meruapakan salah satu widget yang memiliki peranan penting dalam sebuah blog. Widget ini akan memberikan informasi seputar postingan yang menjadi hal yang paling sering dibaca (populer) oleh para pembaca blog. Menjadikan widget popular post menjadi lebih menarik tentu akan lebih baik. Berikut adalah Struktur Kode "Widget Popular  Posts Dengan Rating Bintang dan Cara Pemasangannya". Semoga bermanfaat.

Langkah-langkah pemasangan widget popular posts dengan rating bintang:
  1. klik menu template
  2. klik Edit HTML
  3. cari kode <head>, kemudian letakkan kode script di bawah ini tepat setelahnya
  4. <link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
  5. Selanjutnya cari kode ]]></b:skin>, kemudian letakkan kode di bawah ini tepat sebelumnya
  6. /* Popular Post with Blue Star Rating by http://www.winmahdi.com/ */ .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}.PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1}.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#30AEE1;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f123';opacity:.9}.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85}.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8}.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75}.PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7}.PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75}.PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7}.PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}.PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7}.PopularPosts ul li:hover:before{opacity:1}.PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none}.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;}.PopularPosts .item-snippet{display:none}.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px} 
  7. terakhir klik simpan template
  8. lihat hasilnya di bagian popular posts Anda
  9. Jika berhasil akan menampilkan gambar kurang lebih seperti di bawah ini:
widget popular posts dengan rating bintang

Ganti struktur kode popular posts di atas dengan kode popular posts di bawah ini, untuk mendapatkan rating bintang warna orange.
/* Popular Post with Yellow Star Rating by http://www.winmahdi.com/ */ .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none} .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none} .PopularPosts ul{margin:0;list-style:none;color:#64707a} .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;} .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px solid #F1F1F1}.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#F29B10;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s} .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';} .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f123';opacity:.9}.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85}.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8}.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75}.PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7}.PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75}.PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7}.PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}.PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7}.PopularPosts ul li:hover:before{opacity:1}.PopularPosts ul li:first-child{border-top:none} .PopularPosts ul li:last-child{border-bottom:none}.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;} .PopularPosts ul li a:hover{color:#2476e0;} .PopularPosts .item-thumbnail{margin:0;}.PopularPosts .item-snippet{display:none}.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}  

Struktur Kode Anti Copy Paste Postingan Blog dan Cara Pemasangannya

Pada kesempatan ini blog Struktur Kode akan membagikan tips " Cara pemasangan Struktur Kode Anti Copy Paste Postingan Blog". Dengan memasang script anti copas ini biasanya semua postingan blog sudah tidak dapat di copy paste lagi, kecuali pada area tertentu misalnya pada tulisan yang berada di area blockquote blog. Simak ulasan cara memasang script anti kopi dan paste di bawah ini:

Cara Pertama
  • Login ke akun blogger
  • Klik menu Template blog
  • Klim menu Edit HTML
  • Cari kode </style> atau ]]></b:skin> (bisa gunakan Ctrl+F)
  • Kemudian letakkan kode anti copas di bawah ini tepat sebelum salah satu kode di atas.
    .post-outer {-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-user-select:none;}
  • Setelah itu letakkan kode di bawah ini tepat sebelum kode ]]></b:skin>.post blockquote,.post pre,.post code{-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-ms-user-select:text;-moz-user-select:text;}
  • Klik simpan template (Save Template)
  • Selamat artikel sudah tidak dapat di kopi kecuali pada blockquote


Cara Kedua
  • Login ke akun blogger
  • Klik menu Template blog
  • Klim menu Edit HTML
  • Cari kode </style> atau ]]></b:skin> (bisa gunakan Ctrl+F)
  • Kemudian letakkan kode anti copas di bawah ini tepat sebelum salah satu kode di atas.
    .do-not-copy {-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}
  • Klik simpan template
  • Pada saat menulis postingan, gunakan kode <div class="do-not-copy"> isi tulisan Anda yang tidak ingin di copy paste disini</div> ini pada postingan mode HTML. Dengan demikian Anda akan leluasa menentukan mana-mana saja tulisan yang tidak dapat di copy

NOTEPAD++ APLIKASI TERBAIK EDIT HTML BLOG

[Struktur Kode] Rasanya tidak berlebihan jika menyatakan Notepad++ adalah aplikasi terbaik untuk mengedit HTML blog. Kebiasaan saya sebagai blogger adalah jarang puas dengan tampilan blog, jadi sukanya edit sana edit sini. Nah, cara termudah dan terbaik dalam mengedit html blog menurut saya adalah dengan menggunakan aplikasi Notepad++. Kenapa demikian? Karena dalam menggunakannya mudah dan tentunya karena tampilan HTML di dasboard blogger sama persis dengan tampilan kode html di Notepad++. Selain itu proses pencarian kode html (Ctrl+F) di Notepad++ lebih mudah dibandingkan dengan di dashboard blogger. Sehingga sanga nyaman, dan saya ingin merekomendasikan aplikasi ini bagi temen-temen yang hobi memodifikasi tampilan blog. Sebagai perbandingan tampilan kode HTML di blogger dengan di Notepad++, silahkan lihat gambar di bawah ini.

Struktur Kode HTML Blog 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='UTF-8'/>
<meta content='EE3OxelUv2-FvMWOZp0DL7mGvh4BDlQXnVNaZjsQPHw' name='google-site-verification'/>
<meta content='0EF2E26699777A0E944F2B898864517B' name='msvalidate.01'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='tips blog, seo blog, cara buat blog, pengaturan blog, tips internet, seleksi sbmptn, usm pkn stan, manfaat hasil pertanian, hobi ngeblog, soal akuntansi perpajakan, pembahasan soal matematika' name='keywords'/>
<meta content='website' property='og:type'/>
<meta content='http://www.winmahdi.com/' property='og:url'/>
<b:include data='blog' name='all-head-content'/>

Berikut tampilan Struktur Kode HTML di dalam Notepad++


STRUKTUR KODE POPULAR POSTS TERBARU UNTUK BLOG

CARA MEMASANG WIDGET POPULAR POSTS (ARTIKEL POPULER) KEREN PADA BLOG


[Struktur Kode] Widget artikel populer merupakan widget yang penting agar terpasang dalam sebuah blog. Widget ini dapat menginformasikan kepada pemilik blog bahwa konten-konten jenis inilah yang paling sering dicari oleh pengunjung. Selain itu, bentuk widget popular posts yang menarik tentu akan memperindah tampilan blog anda. Berikut ini adalah beberapa Struktur Kode (Source Code) widget popular post yang bisa anda coba terapkan.

struktur kode widget artikel populer

Struktur Kode Popular Post#1: 

/* Popular Post  by Winmahdi.Com*/
.widget .widget-item-control a img {background: none;height: 20px !important;width: 20px !important;border: none;padding: none;box-shadow: none;-moz-box-shadow: none;-webkit-box-shadow: none;-ie-box-shadow: none;}  .PopularPosts .widget-content ul li {overflow: hidden !important;height: 73px !important;list-style-type: none !important;list-style: none;padding: 0px 0px 0px;}  .popular-posts ul {list-style-type: none !important;padding-left:0px !important;}  .popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;}  .popular-posts ul li:before {float: right;display: inline-block;position: relative;list-style-type: none;color: #000;background: rgba(247, 247, 247, 1);box-shadow: -2px 2px 10px rgba(187, 187, 187, 0.7);counter-increment: popcount;content: counter(popcount,decimal);font-size: 15px;font-weight: normal;line-height: 20px;right: 1px;top: 0px;z-index: 999999999999;padding: 0px 6px 1px 5px;border: solid #B5B5B5;border-width: 0px 1px 1px 1px;border-radius: 0px 0px 7px 7px;}  .PopularPosts .item-thumbnail {float: left;margin: 0px!important;}  .PopularPosts img {overflow: hidden !important;height: 72px;width: 72px;margin-right: 0px;padding-right: 0px !important;}  .PopularPosts .item-title a:hover {background: #f6f6f6;color: #000;}  .PopularPosts .item-title a {display: block;text-decoration: none;font-family: "Oswald",sans-serif;font-weight: normal;font-size: 14px;padding: 10px 30px 0px 78px;background: #EAEAEA;height: 62px;color: #6E6E6E;border-bottom: 1px solid #cccccc;line-height: normal;transition: all .4s ease-in-out;}
Untuk melihat panduan lengkap pemasangan silahkan klik disini.

Struktur Kode Popular Post#2:

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT4jHHLlHeJZetfRPthuSl3n1jiDHujFd3HOQJhjM6nI00GtLA_XYC3K29-ObhpzzM3u1f3XMBBm30y8MQ_hMnozpiNkIpf5kztnpLFTKPDlaJoxlq23WMb8-rg8tUjFPchcdZ6AugOCw/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 2px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:1px solid #6bb5ff;
}
.popular-posts ul
  li a:hover {color:#246eb0 !important;
}
.popular-posts .item-thumbnail img {
  webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
Untuk melihat panduan lengkap pemasangan silahkan klik disini.

 Struktur Kode Popular Post#3:

#PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out; 
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute; 
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg); 
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}
Untuk melihat panduan lengkap pemasangan silahkan klik disini.

Struktur Kode Popular Post#4:

.popular-posts ul {padding: 0;margin: 0;counter-reset: popcount;}  .popular-posts ul li {list-style: none !important;float: left;font-family:'Oswald',Arial,Tahoma,sans-serif;position: relative;width: 48%;height: 130px;overflow: hidden;margin: 2px;padding: 0 !important;border: 0;}  .PopularPosts .item-thumbnail {width: 100%;margin: 0;}  .PopularPosts ul li img {float: left;display: block;height: 130px;width: 100%;padding: 0;-webkit-transition-duration: 1.0s;-moz-transition-duration: 1.0s;-o-transition-duration: 1.0s;transition:1.0s;}  .PopularPosts ul li img:hover {overflow: hidden;transform:scale(1.06);-webkit-transform:scale(1.06);-moz-transform:scale(1.06);-o-transform:scale(1.06);}  .PopularPosts .item-title {position: absolute;right: 0;left: 0;bottom:0;padding-bottom: 0;z-index: 999;}  .PopularPosts .item-title a {display: block;padding: 5px 0px 2px 5px;background: rgba(32, 32, 32, 0.77);text-transform: capitalize;font-size: 12px;color: #fff;line-height: normal;transition: all .4s ease-in-out;}  .popular-posts ul li:hover .item-title a {background: rgba(231, 76, 60, 0.88);color: rgba(255, 255, 255, 1);text-decoration: none;}  .popular-posts ul li:before {counter-increment: popcount;float: left;position: absolute;content: counter(popcount, decimal);list-style-type: none;background: #e2e2e2;top: 0;font-size: 14px;color: #000;line-height: 20px;padding: 0px 8px 1px 1px;z-index: 4;border: solid #FFF;border-radius: 0px 0px 10px 0px;border-width: 0px 2px 2px 0px;}
Selanjutnya Copy dan pastekan Struktur kode di bawah ini tepat sebelum kode </body> dan klik simpan template.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[ $(document).ready(function() { var boi = 150; $('#PopularPosts1').find('img').each(function(n, image){ var image = $(image); image.attr({src : image.attr('src').replace(/sBd{2,4}/,'s' + boi)}); image.attr('width',boi); image.attr('height',boi); }); }); //]]></script>

Struktur Kode Popular Post#5:

/* Popular Post Pelangi shared by: www.winmahdi.com*/
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#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 10px 0px -5px; 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; }
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#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}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:”8″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:”9″}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:”10″}
#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:”6″}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:”7″}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:”5″}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:”4″}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:”3″}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:”2″}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:”1″}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}
#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;}
#PopularPosts1 img {
border-radius:200px;
width:60px; height:60px;
margin-left:4px;
}
/* Popular Post Pelangi*/

STRUKTUR KODE BLOCKQUOTE SEO FRIENDLY

CARA MEMASANG KODE BLOCKQUOTE SEO FRIENDLY DALAM BLOG

[Struktur Kode] Berikut ini adalah kumpulan Struktur Kode Blockquote Seo Friendly dan cara pemasangannya di blogger. Kode-kode ini diharapkan bisa memperindah tampilan dari postingan-postingan blog anda. Sederhana dan sangat seo friendly, dan semoga bermanfaat.

Struktur Kode Kode Blockquote

Struktur Kode Blockquote Pertama:

.post blockquote{
display:block;
background: #fff;
padding: 15px 20px 15px 45px;
margin: 0 0 20px;
position: relative;
font-family: Georgia, serif;
font-size: 16px;
line-height: 1.2;
color: #666;
text-align: justify;
border-left: 16px solid #048c5e;
border-right: 3px solid #048c5e;
-moz-box-shadow: 2px 2px 15px #ccc;
-webkit-box-shadow: 2px 2px 15px #ccc;
box-shadow: 2px 2px 15px #ccc;
}
.post blockquote::before{
content: "\201C"; /*Unicode for Left Double Quotes*/
font-family: Georgia, serif;
font-size: 60px;
font-weight: bold;
color: #999;
position: absolute;
left: 10px;
top:5px;
}
.post blockquote::after{
content: "";
}
.post blockquote a{
text-decoration: none;
background: #eee;
cursor: pointer;
padding: 0 3px;
color: #c76c0c;
}
.post blockquote a:hover{
color: #666;
}
.post blockquote em{
font-style: italic;
}                                                               
letakkan kode ini tepat sebelum kode </skin> di dalam blog anda, untuk melihat tampilan dan panduan pemasangan secara lengkap silahkan klik disini.

Struktur Kode Blockquote Kedua:

blockquote{
margin:20px;
color:#272827;
background:#e2e2e2;
border-top: 2px dashed #03a506;
border-bottom: 2px dashed #03a506;
padding: 12px 7px 12px 7px
}                                                            
letakkan kode ini tepat sebelum kode </skin> di dalam blog anda, untuk melihat tampilan dan panduan pemasangan secara lengkap silahkan  klik disini.


Struktur Kode BlockQuote Ketiga:

.post blockquote{
font-family: Georgia, Times, "Times New Roman", serif;
font-size: 16px;
border-top: solid 2px #dddddd;
border-left: solid 2px #dddddd;
border-right: solid 2px #dddddd;
border-bottom: solid 2px #dddddd;
margin: 1em 0px;
padding: 1em 1em;
font-family: Georgia, Times, "Times New Roman", serif;
font-style: italic;
font-size: 1em;
min-height: 60px;
}
.post blockquote:before {
display: block;
float: left;
content: "\201C";
font-size: 100px;
margin-right: 10px;
color: #fff;
background-color: #0bc1dd;
padding: 15px 12px 5px 8px;
width: 50px;
height: 50px;
line-height: 90px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.post blockquote cite {
position: relative;
display: block;
text-align: right;
margin-top: 5px;
color: #999;
}                                                
letakkan kode ini tepat sebelum kode </skin> di dalam blog anda, untuk melihat tampilan dan panduan pemasangan secara lengkap silahkan klik disini.

Demikianlah informasi mengenai pemasangan blockquote di blog, untuk tips lainnya silahkan berkunjung kembali.