New Apps

CB Simple Store Template Blog Toko Online SEO Responsive Terbaru

CB Simple Store - Template Blog Toko Online SEO Friendly, Mobile Friendly, User Friendly, Responsive, Terbaru!

Template Online Shop ini untuk Anda yang sedang bingung atau mencari template blogger online store. Buatlah blog dan pasang template ini, maka Anda sudah punya toko online untuk menjalani bisnis online yang sedang ngetrend.

Available link for download

Memasang Komentar Facebook Responsive di Bawah Posting Blog

Cara memasang komentar Facebook responsive di bawah posting blog. Namun, sebelum memutuskan membuat kotak komentar Facebook, pertimbangkan lagi. Pasalnya, kolom komentar Facebook mengandung risiko:

1. Banjir komentar spam dan sampah --link hidup, link aktif,  komentar promosi, link judi, pornografi, dll.
2. Komentar Facebook memberatkan loading blong, mengurangi kecepatan tampilan halaman.

<meta content=Kode ID Facebook admin property=fb:admins/> 
<meta content=Kode ID Aplikasi Facebook property=fb:app_id/>

2. Kode jQuery
Pasang di atas kode </head>

<script type="text/javascript"> 
//<![CDATA[ $(window).bind("load resize", function(){ 
var url = location.protocol+//+location.host+location.pathname; 
var containercm_width = $(#container-commentfb)
.width(); $(#container-commentfb)
.html(<div class="fb-comments" + data-href="+url+" + width=" + containercm_width + " data-num-posts="10"></div>); FB.XFBML.parse( ); }); 
//]]> 
</script>

3. Kode HTML/XML
Pasang di bawah kode <data:post.body/>
<b:if cond=data:blog.pageType == &quot;item&quot;> 

Available link for download

Navigasi Menu Blog Responsive Dropdown Simple ala Maskolis

Navigasi Menu Blog Responsive Dropdown Simple hasil desain Maskolis. Diterapkan di template seo friendly & responsive karya Creating Website.

Demo Navigasi Menu Blog Responsive Dropdown Simple ini ada di navigasi menu blog ini. Gambar di bawah ini ilustrasi lain sebagai inspirasi pewarnaan.


KODE CSS:
Simpan di atas kode ]]></b:skin> atau </style>

#menu{background:#464646;color:#eee;height:35px;font-size,width:100%;background:#3771b5;color:#fff;font-family:Arial;margin:0x;font-weight:700;text-transform:uppercase}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:left;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";width:0;height:0;border-width:5px 6px;border-style:solid;border-color:transparent transparent transparent #eee ;position:absolute;top:13px;right:9px}
@media only screen and (max-width:768px) {
#menu{position:relative}
#menu ul{background:#838383;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:left}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}}

KODE HTML:
  <nav id=menu itemscope=itemscope itemtype=http://schema.org/SiteNavigationElement>
<input type=checkbox/>
<label>&#8801;<span>Navigation</span></label>
<ul>
<li><a href=/ title="Home">Home</a></li>
<li><a href=# title="Menu 1">Menu 1</a></li>
<li><a class=prett href=# title="Drop Menu">Drop Menu</a>
<ul class=menus>
<li><a href=# title="Drop Menu1">Drop Menu 1</a></li>
<li><a href=# title="Drop Menu2">Drop Menu 2</a></li>
<li><a href=# title="Drop Menu3">Drop Menu 3</a></li>
</ul>
</li>
<li><a href=# title="Menu 2">Menu 2</a></li>
<li><a class=prett href=# title="Drop Menu1">Drop Menu 1</a>
<ul class=menus>
<li><a href=# title="Drop Menu 1">Drop Menu 1</a></li>
<li><a href=# title="Drop Menu 2">Drop Menu 2</a></li>
<li><a href=# title="Drop Menu 3">Drop Menu 3</a></li>
</ul>
</li>
  <li><a class=trigger2 href=http://www.contohblog.com target=_blank>Blog Partner</a></li>
</ul>
</nav>
<div class=clear/>

Simpan kode HTML di atas kode:
<div id=content-wrapper> atau <div id=main-wrapper>

Available link for download