Download Template: Desain Blog

Desain Blog

Sabtu, 27 Mei 2017

Cara Memasang Link Media Sosial di Sidebar Blogger

Cara Memasang Link Media Sosial di Sidebar Blog Blogger.

MEDIA SOSIAL merupakan salah satu SEO tools sekaligus Backlink Maker. Dalam dunia SEO dikenal dengan sebutan Social Media Optimization (SMO) atau pengoptimalan media sosial.

Media Sosial juga termasuk salah satu Pilar SEO (SEO Pillars) selain LINK dan CONTENT.

Karenanya, wajib hukumnya kita membuat akun media sosial dan memasang linknya di blog kita. Selain untuk menambah teman dan follower, juga bermanfaat bagi SEO Blog.

Berikut ini salah satu style atau desain link media sosial yang dipasang di sidebar blogger, seperti dalam gambar ilustrasi posting di atas.

Cara #1 Memasang Link Media Sosial di Sidebar Blogger

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Copas kode berikut ini

<style>
/* Social Media */
#socialcounter{overflow:hidden;margin:0 0 20px 0}
#socialcounter ul{margin:0}
#socialcounter ul a{color:#fff}
#socialcounter ul li.social_item-wrapper{float:left;width:48%;text-align:center;margin:0 4% 10px 0;color:#fff}
#socialcounter ul li a.social_item{position:relative;display:block;opacity:.9;height:50px;line-height:50px;overflow:hidden}
#socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0}
.social_icon{float:left;line-height:50px;width:41px;font-size:1.3rem}
#socialcounter ul li a.social_item.social_facebook{background:#3F5B9B}
.fa-facebook.social_icon{background:#2E4372}
#socialcounter ul li.social_item-wrapper:hover .fa-facebook.social_icon{background:#3F5B9B}
#socialcounter ul li.social_item-wrapper:hover .social_facebook{background:#2E4372}
#socialcounter ul li a.social_item.social_twitter{background:#1C97DE}
.fa-twitter.social_icon{background:#1571A5}
#socialcounter ul li.social_item-wrapper:hover .fa-twitter.social_icon{background:#1C97DE}
#socialcounter ul li.social_item-wrapper:hover .social_twitter{background:#1571A5}
#socialcounter ul li a.social_item.social_youtube{background:#E22020}
.fa-youtube.social_icon{background:#B31919}
#socialcounter ul li.social_item-wrapper:hover .fa-youtube.social_icon{background:#E22020}
#socialcounter ul li.social_item-wrapper:hover .social_youtube{background:#B31919}
#socialcounter ul li a.social_item.social_rss{background:#E86321}
.fa-rss.social_icon{background:#C2521B}
#socialcounter ul li.social_item-wrapper:hover .fa-rss.social_icon{background:#E86321}
#socialcounter ul li.social_item-wrapper:hover .social_rss{background:#C2521B}
#socialcounter ul li a.social_item.social_google-plus{background:#E82C2C}
.fa-google-plus.social_icon{background:#BF2424}
#socialcounter ul li.social_item-wrapper:hover .fa-google-plus.social_icon{background:#E82C2C}
#socialcounter ul li.social_item-wrapper:hover .social_google-plus{background:#BF2424}
#socialcounter ul li a.social_item.social_instagram{background:#8E714D}
.fa-instagram.social_icon{background:#6F583C}
#socialcounter ul li.social_item-wrapper:hover .fa-instagram.social_icon{background:#8E714D}
#socialcounter ul li.social_item-wrapper:hover .social_instagram{background:#6F583C}
#socialcounter ul li a.social_item.social_pinterest{background:#CA2027}
.fa-pinterest.social_icon{background:#AB1B21}
#socialcounter ul li.social_item-wrapper:hover .fa-pinterest.social_icon{background:#CA2027}
#socialcounter ul li.social_item-wrapper:hover social_pinterest{background:#AB1B21}
@media screen and (max-width:240px) {
#socialcounter ul li.social_item-wrapper{float:none;width:100%}
#socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0 4% 10px 0}
}
</style>
<div id='socialcounter'>
<ul class='social-counter'>
<li class='social_item-wrapper'><a class='social_item social_facebook' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook social_icon'/><span class='social_num'>Facebook</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_twitter' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter social_icon'/><span class='social_num'>Twitter</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_youtube' href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube social_icon'/><span class='social_num'>Youtube</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_rss' href='#' rel='nofollow' target='_blank'><i class='fa fa-rss social_icon'/><span class='social_num'>RSS</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_google-plus' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus social_icon'/><span class='social_num'>Google+</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_instagram' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram social_icon'/><span class='social_num'>Instagram</span></a>
</li>
</ul>
</div>

3. Ubah link media sosialnya (tanda pagar #)
4. Save!

Cara #2 Memasang Link Media Sosial di Sidebar Blogger

1. Template > Edit HTM:
2. Copas kode berikut ini di atas kode ]]></b:skin>

/* Social Media */
#socialcounter{overflow:hidden;margin:0 0 20px 0}
#socialcounter ul{margin:0}
#socialcounter ul a{color:#fff}
#socialcounter ul li.social_item-wrapper{float:left;width:48%;text-align:center;margin:0 4% 10px 0;color:#fff}
#socialcounter ul li a.social_item{position:relative;display:block;opacity:.9;height:50px;line-height:50px;overflow:hidden}
#socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0}
.social_icon{float:left;line-height:50px;width:41px;font-size:1.3rem}
#socialcounter ul li a.social_item.social_facebook{background:#3F5B9B}
.fa-facebook.social_icon{background:#2E4372}
#socialcounter ul li.social_item-wrapper:hover .fa-facebook.social_icon{background:#3F5B9B}
#socialcounter ul li.social_item-wrapper:hover .social_facebook{background:#2E4372}
#socialcounter ul li a.social_item.social_twitter{background:#1C97DE}
.fa-twitter.social_icon{background:#1571A5}
#socialcounter ul li.social_item-wrapper:hover .fa-twitter.social_icon{background:#1C97DE}
#socialcounter ul li.social_item-wrapper:hover .social_twitter{background:#1571A5}
#socialcounter ul li a.social_item.social_youtube{background:#E22020}
.fa-youtube.social_icon{background:#B31919}
#socialcounter ul li.social_item-wrapper:hover .fa-youtube.social_icon{background:#E22020}
#socialcounter ul li.social_item-wrapper:hover .social_youtube{background:#B31919}
#socialcounter ul li a.social_item.social_rss{background:#E86321}
.fa-rss.social_icon{background:#C2521B}
#socialcounter ul li.social_item-wrapper:hover .fa-rss.social_icon{background:#E86321}
#socialcounter ul li.social_item-wrapper:hover .social_rss{background:#C2521B}
#socialcounter ul li a.social_item.social_google-plus{background:#E82C2C}
.fa-google-plus.social_icon{background:#BF2424}
#socialcounter ul li.social_item-wrapper:hover .fa-google-plus.social_icon{background:#E82C2C}
#socialcounter ul li.social_item-wrapper:hover .social_google-plus{background:#BF2424}
#socialcounter ul li a.social_item.social_instagram{background:#8E714D}
.fa-instagram.social_icon{background:#6F583C}
#socialcounter ul li.social_item-wrapper:hover .fa-instagram.social_icon{background:#8E714D}
#socialcounter ul li.social_item-wrapper:hover .social_instagram{background:#6F583C}
#socialcounter ul li a.social_item.social_pinterest{background:#CA2027}
.fa-pinterest.social_icon{background:#AB1B21}
#socialcounter ul li.social_item-wrapper:hover .fa-pinterest.social_icon{background:#CA2027}
#socialcounter ul li.social_item-wrapper:hover social_pinterest{background:#AB1B21}
@media screen and (max-width:240px) {
#socialcounter ul li.social_item-wrapper{float:none;width:100%}
#socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0 4% 10px 0}
}

3. Save!
4. Layout > Add a Gadget > pilih HTML/JavaScript
5. Copas kode berikut ini

<div id='socialcounter'>
<ul class='social-counter'>
<li class='social_item-wrapper'><a class='social_item social_facebook' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook social_icon'/><span class='social_num'>Facebook</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_twitter' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter social_icon'/><span class='social_num'>Twitter</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_youtube' href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube social_icon'/><span class='social_num'>Youtube</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_rss' href='#' rel='nofollow' target='_blank'><i class='fa fa-rss social_icon'/><span class='social_num'>RSS</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_google-plus' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus social_icon'/><span class='social_num'>Google+</span></a>
</li>
<li class='social_item-wrapper'><a class='social_item social_instagram' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram social_icon'/><span class='social_num'>Instagram</span></a>
</li>
</ul>
</div>

Bisa juga kode HTML-nya dipasang langsung di Template, yaitu di bawah kode <div id='sidebar'> atau <div class='sidebar'> dan sejenisnya.

PASANG LINK KE AWESOME FONT

Karena kode Link Media Sosial di Sidebar Blogger di atas menggunakan font awesome untuk memunculkan icon media sosialnya, jangan lupa pastikan di template blog Anda sudah terpasang link ke font awesome seperti ini:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Posisinya biasaya di atas kode </head>
Jika belum ada, pasang kode tersebit di atas kode </head>

Demikian Cara Memasang Link Media Sosial di Sidebar Blogger.*

Continue reading →

Minggu, 14 Mei 2017

Cara Memasang Related Post Gambar Thumbnail di Bawah Postingan Blog

Desain Blog 23.05 No Comments

Cara Memasang Related Post Gambar Thumbnail di Bawah Postingan Blog

RELATED POSTS atau posting terkait sangat penting dipasang di bawah postingan blog. Fungsinya sebagai tautan internal (internal link) yang disarankan Google dan bisa menambah pageviews blog.

Berikut ini Cara Memasang Related Post Gambar Thumbnail di Bawah Postingan Blog, berupa gambar thumbnail dan judul tulisan. Kode dan tutorialnya disadur dari HelpLogger.

Berikut ini penampakannya:

Related Posts Widget Features:

9 attractive styles to match your needs

Show Title, excerpt & thumbnails

Display simple related posts with titles / summaries / post date

Choose whether to display the post thumbnails or not

Ability to control the thumbnail image size

Option to choose square or round thumbnails

Show post text excerpts

Control the length of the post excerpt / title

Determine the number of related posts to display

Cara Memasang Related Post Gambar Thumbnail

1. Template > Edit HTML

2. Copas kode berikut ini di atas kode </head>

<style type='text/css'>
.related-posts-container{margin:55px 0px;}.related-posts-container h4{font:20px 'Open Sans', sans-serif;margin-bottom:20px;}.related-posts-container ul,.related-posts-container ul li{list-style: none;margin: 0;padding: 0;}.related-posts-container ul li a{text-transform:capitalize !important;font:bold 13px 'Open Sans', sans-serif;outline: 0;}.related-snippets{margin-top:5px;font:italic 12px 'Open Sans', sans-serif;}.related-posts-1 li{list-style:inside none disc !important;}.related-posts-1 li,.related-posts-2 li{border-top:1px solid rgba(0,0,0,0.04);padding:0.8em 0 !important;}.related-posts-1 li:first-child,.related-posts-2 li:first-child{border-top:medium none;}li.related-post-item{margin:0 3% 3% 0 !important;width:22.7%;float:left;list-style:none;position:relative;}li.related-post-item:last-child{margin:0 0 2% !important;}.related-thumb-large{width:100%;height:auto;border:none;margin:0px auto 10px;padding:0 !important;}.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{padding-left:74px;}.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){margin:0 0 4% !important;}.related-posts-8 li,.related-posts-9 li{background-color:#ffffff;box-shadow:0 0 4px rgba(180, 180, 180, 0.55);width:42% !important;float:left;margin:0 4% 4% 0 !important;padding:3% !important;}.related-thumb{float:left;height:64px;margin-right:10px;object-fit:cover;width:64px;}.related-posts-6 li,.related-posts-6 a{line-height:0 !important;}.related-posts-6 .related-thumb-large{margin-bottom:0;}.related-posts-7 li.related-post-item{margin:0 !important;width:25% !important;}.related-wrapper{position:absolute;left:0px;right:0;top:0px;bottom:0;margin:0 auto;z-index:4;background:rgba(77,77,77,0.2);}.related-wrapper-inner{position:relative;height:100%;z-index:99;width:100%;display:table;vertical-align:middle;text-align:center;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}.related-wrapper .related-title{vertical-align:middle;display:table-cell;color:#ffffff;font:bold 16px 'Open Sans', sans-serif;padding:0 20px;}.related-date{margin-top:5px;font:italic 11px 'Open Sans', sans-serif;color:#999999;}
</style>

3. Cari kode berikut ini:

<b:includable id='postQuickEdit' var='post'>

3. Scroll ke bawah hingga menemukan kode </b:includable>
4. Tepat di bawah kode tersebut ada kode "postQuickEdit" berikut ini: </b:includable>

Copas kode berikut ini di atas kode </b:includable>

<b:if cond='data:blog.pageType == "item"'>
<div class='related-posts-container' id='related-posts-widget'/>
<div style='clear: both;'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
var relatedSettings = {
blogURL:"<data:blog.homepageUrl/>",
relatedHeading:"<h4><span>Related Posts</span></h4>",
relatedPosts:4,
relatedStyle:4,
thumbnailSize:"w300-h200-p-nu",
defaultThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqMBMYZdXRRzO-bvv5mTG0bPDE0Yv5g8ondIZUZpgjFHJbBKyXe1fOkwCNT3WUjYQo9oFNA0-ooo1c6V28Wv62s03k1bR1qhEKDOi7xGpimFn133aFgjMzMNbyWzMh6Q0lm91GybVmb_13/w300-c-h200/no-thumb.png",
roundThumbs:false,
titleLength:"auto",
snippetLength:45,
centerText:false,
openNewTab:false
};</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(//$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,q,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',g=d.openNewTab?' target="_blank"':"",i=d.centerText?"text-align:center;":"",j=d.roundThumbs?"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;":"",k='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"…":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(//s[0-9]+(-c)?/,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=["January","February","March","April","May","June","July","August","September","October","November","December"],u=l.split("-")[2].substring(0,2),v=l.split("-")[1],w=l.split("-")[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"…":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"</a></li>":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"</div></a></li>":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"</div></div></div></a></li>":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"></a></li>':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(//$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</b:if>

Save!

Demikian Cara Memasang Related Post Gambar Thumbnail di Bawah Postingan Blog.*

Continue reading →

Jumat, 12 Mei 2017

Kode Anti-Copas Postingan Blog - Mematikan Fungsi Klik Kanan Mouse

Blogging Desain Blog 11.27 No Comments

Cara Memasang Kode Anti-Copas Postingan Blog - Mematikan Fungsi Klik Kanan Mouse

UNTUK mempersulit pengunjung yang akan copy paste (copas) atau menyalin konten postingan blog, maka kita bisa pasang Kode Anti-Copas Postingan Blog untuk Mematikan Fungsi Klik Kanan Mouse (Disable Right Click), mendisable Ctrl+C (Copy) dan Ctrl+U (View Page Source).

Kode Anti-Copas ini sifatnya tidak mutlak, artinya masih bisa dijebol atau ditembus oleh pengguna, misalnya dengan menonaktifkan JavaScript di browser atau menggunakan aplikasi Print Friendly.

Jadinya memang akan sia-sia, namun setidaknya akan mempersulit.

Banyak blogger luar negeri yang mengatakan, sebaiknya kita tidak usah pasang kode anti-copas atau kode mematikan fungsi klik kanan mouse ini. Penjelasannya ada di Site Point. Intinya, akan merugikan blogger sendiri --selain masih bisa ditembus, mengganggu, bikin kapok pengunjung (gak akan balik lagi), dan lainnya.

Kode Anti-Copas Postingan Blog - Mematikan Fungsi Klik Kanan Mouse

Berikut ini beberarapa Kode Anti-Copas Postingan Blog - Mematikan Fungsi Klik Kanan Mouse, dari berbagai sumber.

1. Disable Klik Kanan SEMUA POSTING

Ganti kode <body> dengan kode berikut ini:

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

Kode Anti Copas / Matikan Klik Kanan Kouse Lainnya:
Pasang di Layout > Add a Gadget > HTML/JavaScript

<script type="text/javascript">
var clickMessage = "Right Click is Disabled";
$("document").ready(function(){
$(".post").on('contextmenu', function() {
alert(clickMessage);
return false;
});
});
</script>

ATAU

<script language="JavaScript">

</script>

2. Disable Klik Kanan POSTINGN TERTENTU

Simpan di akhir tulisan > di mode HTML

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'/>

3. Disable Klik Kanan BAGIAN TERTENTU (BLOCKQUOTES)
Simpan di atas kode ]]></b:skin> atau </style>

.post-body {-webkit-touch-callout: none; -khtml-user-select: none; -moz-user-select: -moz-none; -ms-user-select: none; user-select: none; text-align: justify;} blockquote {-webkit-touch-callout: text; -khtml-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text;}

ATAU

.post blockquote{background:#f7f7f7;color:#2b2b2b;font-family:sans-serif;font-size:13px;line-height:17px;margin:5px 0;padding:10px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}
body{-webkit-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none}

Bagian --teks, kode, atau kalimat-- yang bisa diklik hanya bagian yang diberi tanda kutipan (Quote) atau di-Block Quote.

Demikian Kode Anti-Copas Postingan Blog untuk Mematikan Fungsi Klik Kanan Mouse yang bisa Select-All and Copy.*

Continue reading →

Kamis, 11 Mei 2017

Cara Modifikasi Judul (H2) Widget pada Sidebar dan Footer Blog

Blogging Desain Blog 21.28 No Comments

Cara Modifikasi Judul (H2) Widget pada Sidebar dan Footer Blog agar Lebih Menarik dan Stylish.

Jika kita memperhatikan salah satu tips dari MyBlogsIdeas yang membahasa tentang Internet Marketer, di bagian sidebar terlihat judul setiap widget akan terlihat unik dan menarik.

Judul Widget di Sidebar ini terkesan sederhana namun keren, seperti desain tampilan widget Recent Post by Label di Evo Magz Blogger Template.

Widget merupakan salah satu bagian penting dalam sebuah situs, entah website personal maupun blog.

Tidak hanya sebagai sebuah navigasi yang terdapat di setiap halaman blog, namun juga berfungsi sebagai menu navigasi internal maupun eksternal. Tautan kedalam postingan --juga link ke blogger lain sangat penting dalam SEO Blog.

Hal yang sering disampaikan para master blogger terkait faktor diterimanya blog kita sebagai publisher Google Adsense salah satunya kelengkapan menu navigasi, termasuk setting widget yang rapi dan memudahkan pengunjung mengeksplorasi konten blog kita.

Berikut ini cara memodifikasi Judul (H2) Widget pada Sidebar dan Footer blog agar lebih menarik dan enak dipandang mata (eye catching).

Modifikasi Tampilan Judul (H2) pada Widget dan Footer Blog

Di bawah ini ada dua buah kode CSS yang bisa digunakan untuk melakukan modifikasi judul widget (H2) dan footer blog biar lebih menarik dan cantik. Simple, namun elegan dan kelihatan profesional

Kode Modifikasi Judul (H2) Widget

#sidebar-wrapper h2 {overflow: hidden;position: relative;font-family: 'Oswald';font-size: 15px;font-weight: 500;color: #666;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;}
#sidebar-wrapper h2:after {content: '';display: inline-block;position: absolute;height: 14px;top: 0;margin: 13px 0 12px 10px;width: 100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhD4JJ250YuHA2G4gp9bYasxW6D_TBh9mYt7CTgUwIOcwHV5X1RCSmyIyYqjTPuiGEs8dmQY-qEZzDvAFwhCTgxpVuFu33WlhCdby5TXSfaSod-FZnWLMD_irLTbjeJRfwGSUReApNmoB/s1600/repeat-bg.png)repeat;}

Penjelasan Kode:

sidebar-wrapper h2 adalah kode judul widget blog. Bisa saja berbeda dengan kode template blog Anda. Silakan cek, apakah sidebar-wrapper atau sidebar saja atau lainnya yang menunjukkan itu kode sidebar blog Anda.

Kode Modifikasi Judul (H2) Footer

#footer-wrapper h2 {overflow: hidden;position: relative;font-family: 'Oswald';font-size: 15px;font-weight: 500;color: #fff;padding: 10px 0;text-transform: uppercase;display: block;letter-spacing: 1px;}
#footer-wrapper h2:after {content: '';display: inline-block;position: absolute;height: 14px;top: 0;margin: 13px 0 12px 10px;width: 100%;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxhD4JJ250YuHA2G4gp9bYasxW6D_TBh9mYt7CTgUwIOcwHV5X1RCSmyIyYqjTPuiGEs8dmQY-qEZzDvAFwhCTgxpVuFu33WlhCdby5TXSfaSod-FZnWLMD_irLTbjeJRfwGSUReApNmoB/s1600/repeat-bg.png)repeat;}
#footer-wrapper ul,#footer-wrapper ol {list-style-type:none;margin:0 0 0 0;padding:0 0 0 0;}

Cara Memasang Kode Modifikasi Judul (H2) Widget dan Footer Blog

1. Masuk ke akun Blogger Anda.
2. Pilih template > Sesuaikan > Tingkat lanjut > Pilih CSS
3. Copas kedua kode di atas

4. Terapkan!

Bisa juga dengan cara

1. Tema > Edit HTML

2. Simpan di atas kode ]]</b:skin> atau </style>

Ini penampakan hasil modifikasi judul widget sidebar dan footer (h2) blog dengan kode di atas.

Demikian tips atau cara memodifikasi judul (H2) Widget pada Sidebar Blog dan Footer Widget agar lebih menarik dan profesional.*

Continue reading →

Minggu, 16 April 2017

Cara Membuat Navigasi Menu Responsive di Atas Header Blog

Blogging Desain Blog 23.41 No Comments

NAVIGASI menu responsive (mobile-friendly, ramah seluler) di atas header blog merupakan trending desain website/blog saat ini. Berikut ini penampakan menu responsive di HP dan di Desktop.

Tampilan Mobile/Responsive.

Tampilan Desktop.*

Cara Membuat Navigasi Menu Responsive di Atas Header Blog

1. Kode HTML
Tambahkan kode berikut ini di bawah kode <body> di template blog Anda,

<ul class="topnav" id="myTopnav">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>

2. Kode Add CSS:

Tambahkan kode navigasi menu responsive di atas header blog berikut ini di atas kode ]]></b:skin>

ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: #555;}
ul.topnav li.icon {display: none;}
@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;}
}

3. Kode Add JavaScript

Copas kode JS berikut ini di atas kode </body> atau </header>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

Demikian Cara Membuat Navigasi Menu Responsive di Atas Header Blog.
(Source)

Continue reading →

Senin, 10 April 2017

Cara Menginstal WordPress Menggunakan FTP

Blogging Desain Blog WordPress 06.51 No Comments

CARA Menginstal CMS WordPress menggunakan File Transfer Protocole (FTP), misalnya Wins Cpanel, sangat mudah. Untuk menginstal WordPress menggunakan FTP, Anda harus memiliki software FTP .

Hal pertama yang perlu Anda lakukan adalah men-download versi terbaru dari WordPress. Unzip file, dan menggunakan software FTP untuk meng-upload file ke dalam direktori web host pilihan Anda.

Jika Anda ingin menginstal WordPress di domain utama, maka Anda ingin menginstalnya di /public_html/ direktori.

Jika Anda ingin dalam subfolder, maka upload di folder /public_html/namafolder/
Setelah Anda selesai meng-upload WordPress, login ke control panel (CPanel) hosting Anda untuk membuat database.

Dalam contoh ini kita menggunakan cPanel web hosting:

Anda akan melihat field untuk membuat database baru. Masukkan nama database Anda, dan klik “Create Database”

Sekarang Anda telah membuat database baru Anda, sekarang saatnya untuk menjalankan instalasi.

Buka link URL di mana Anda upload WordPress. Jika dalam domain utama, maka cukup ketik alamat domain domainanda.com.

Anda akan melihat halaman seperti ini:

Klik pada tombol untuk membuat halaman konfigurasi.

Halaman berikutnya akan menunjukkan informasi yang Anda butuhkan untuk memiliki (nama database, username database dan password, database host, dan table prefix).

Anda masukkan sesuai dengan database yang sudah anda buat sebelumnya.

Setelah Anda memasukkan informasi, klik pada tombol submit. Ini akan membawa Anda ke halaman yang memiliki tombol Run Install. Klik tombol tersebut.

Pada layar berikutnya, Anda akan melihat form untuk memasukkan informasi website Anda. Informasi ini akan menjadi judul situs Anda, username, password, dan email.

Klik Install WordPress dan tunggu proses instalasi. Pada layar berikutnya, Anda akan melihat catatan Sukses dengan username dan password Anda.

Klik pada tombol login dan... happy blogging!

Demikian Cara Menginstal WordPress Menggunakan FTP untuk Blog Selfhosted Anda.

Sumber

Cara Menggunakan Wins Cpanel

Setelah download install WinSCP dari winscp.net, buka WinSCP

File Protocol: Pilih “FTP” atau “SFTP”
Host name: ftp.namadomain.xyz. Contoh: jika nama domain anda adalah google.com maka ftp.google.com
Username: username cPanel atau username ftp yang anda buat di cPanel > FTP Accounts
Password: password cPanel atau password ftp yang anda buat di cPanel > FTP Accounts
Klik “Login” untuk masuk.

Continue reading →

Selasa, 14 Februari 2017

Cara Memasang Related Posts Gambar Responsive di Bawah Posting Blogger

Blogging Desain Blog 03.10 No Comments

Cara Memasang Related Posts Gambar Responsive di Bawah Posting Blogger

RELATED Posts adalah widget blogger yang biasa ditampilkan di bagian bawah tiap posting blog berisi posting terkait, artikel yang satu label/kategori, sekaligus internal link dan navigasi yang baik untuk meningkatkan pageviews.

Banyak sekali jenis atau desain widget related post untuk blogger, salah satunya seperti gambar di bawah ini, terdiri dari judul tulisan dan gambar (image) thumbnail. Kelebihannya adalah responsive (mobile-friendly).

Cara Memasang Related Posts Gambar Responsive

Berikut ini Cara Memasang Related Posts Gambar Responsive di Bawah Posting Bloggersebagaimana telah dipasang di blog ini.

1. Template > Edit HTML

2. Simpan kode berikut ini di atas kode ]]>

/* Related Posts */
.related-post{margin:30px 0 0;position:relative;padding:0 0 10px}
.related-post h4 {color:#333;text-align:center;letter-spacing:1px;font-size:120%;font-weight:700;text-transform:uppercase;position:relative;padding:15px 20px;margin:0 0 20px}
.related-post h4:after {content:"";position:absolute;width:4px;height:4px;background:#E73037;border-radius:50%;bottom:0;left:46%;box-shadow:1em 0 0 0 #E73037,2em 0 0 0 #E73037}
.related-post ul{margin:0;padding:0}
.related-post-style-3,.related-post-style-3 li{margin:auto;text-align:left;padding:0;list-style:none;word-wrap:break-word}
.related-post-style-3 li a{color:#64707a;font-weight:700;font-size:13px;line-height:1.4em}
.related-post-style-3 li:hover a,.related-post-style-3 li a:hover{color:#E73037}
.related-post-style-3 .related-post-item{display:inline-block;float:left;width:29.2%;height:220px;padding:0;margin-left:3%;margin-bottom:15px;position:relative;overflow:hidden}
.related-post-style-3 .related-post-item:focus{outline:none;border:none}
.related-post-style-3 .related-post-item-thumbnail{display:block;margin:0 0 10px;width:100%;height:125px;}
/* CSS Item Responsive */
@media only screen and (max-width:640px){.related-post-style-3 .related-post-item {width:45.4%;}}
@media screen and (max-width:414px){.related-post-style-3 .related-post-item {width:100%;margin:0;padding:10px;}}

3. Pasang kode HTML & JavaScript Related Posts Gambar Responsive berikut ini di atas kode <div class='post-footer'> yang kedua.

<div class='related-post' id='related-post'>
<script type='text/javascript'>
var mql = window.matchMedia('screen and (min-width: 992px)');if (mql.matches){
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage: "<data:blog.homepageUrl/>",
widgetTitle: "<h4>You Might Also Like</h4>",
numPosts:6,
summaryLength:0,
titleLength: "auto",
thumbnailSize: 200,
noImage: "http://2.bp.blogspot.com/-pcWHSqKq44g/U6ZtZ5js6SI/AAAAAAAADu0/iR9lOJhGLKE/s1600/no-image.png",
containerId: "related-post",
newTabLink: false,
moreText: "Read More",
widgetStyle: 3,
callBack: function() {}
};}
</script>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script><script type='text/javascript'>
//<![CDATA[
/*! Related Post Widget for Blogger */
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>You Might Also Like</h4>",widgetStyle:1,homePage:"http://namabloganda.blogspot.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"…":t;r=("media$thumbnail" in x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(//s[0-9]+(-c)?/,"/s"+d.thumbnailSize+"-c"):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"…":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(//$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script>
</div>

4. Ganti kode yang warna merah.
5. Save atau Simpan Template!

Cara Memasang Related Posts Gambar Responsive di Bawah Posting Blogger.

Sumber

Continue reading →

Sabtu, 11 Februari 2017

Cara Membuat Slider Gambar Responsive di Blogger Tanpa Javascript

Desain Blog 19.21 No Comments

Cara Membuat Slider Gambar (Image) Responsive di Blogger Tanpa Javascript. Pure CSS Responsive Slider - Without Javascript. Fast Loading & User Friendly!

SLIDER yaitu tampilan animasi posting blog berupa gambar besar atau kecil yang bergerak otomatis ataupun manual di halaman depan blog.

Image Slider --disebut juga Featured Post Slider atau Content Image Slider-- biasanya dipasang di blog toko online ataupun blog lembaga/organisasi, untuk menonjolkan konten yang penting di homepage.

Penampilan slidernya seperti gambar ilustrasi di atas. Posisinya di atas widget Blog posts. Posting dan dan gambar yang ditampilkan dipilih sendiri (manual), karena slider ini tanpa javascript sehingga fast loading alias ringan. Anda harus mengganti url gambar dan kata-katanya.

Cara Membuat Slider Gambar Responsive

PASANG KODE HTML
Letakkan di antara kode <body> dan </body> atau di atas kode </body>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='width:100%;max-width:540px;margin:5px auto 20px;'> <div style='position: relative;height: 0; padding-bottom: 45%;'> <div style='position: absolute;height: 100%; width: 100%;'><div id='pure-slider'><input checked id='s1' name='num' type='radio'/><input id='s2' name='num' type='radio'/><input id='s3' name='num' type='radio'/><input id='s4' name='num' type='radio'/><input id='s5' name='num' type='radio'/><div class='dikiri'> <label for='s1'>‹</label> <label for='s2'>‹</label> <label for='s3'>‹</label> <label for='s4'>‹</label> <label for='s5'>‹</label> </div><div class='dikanan'> <label for='s1'>›</label> <label for='s2'>›</label> <label for='s3'>›</label> <label for='s4'>›</label> <label for='s5'>›</label> </div>
<div class='chaild'><label for='s1'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEily48koGESK-2afWsU0_JsWRG07QBYQd70w4gWL_Jud18WKSLheI5W3o-0JsQ0Qa8HpOkHNkSVN4osT2s6QjjQHfjm6co_A6VwvR99RznJFDa7sr52OSI30Cm_N-MXIWCSV7GsaPJUQWU9/s320-Ic42/how%252520to%252520blog%252520small.jpg'/> <span>
<b>Hello world</b>
<br/>Welcome and enjoy!</span></a></div>
<div class='chaild'><label for='s2'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizzyvjHykcSaEWU7HskQUFqiWeYutQi5wzKNSWxADRcPTZBDBIn6UO3L_AA0W8THSnAUE9waySRYWEX230BEEEMxVscxGxfPovZUSzae0dbDORYihwD5ywBF9JD-zw275ov2vhyphenhyphennRX7Ys9/s300-Ic42/blog%252520blogger%252520blogging.jpg'/><span>
<b>Assalamu'alaikum!</b>
<br/>This is sample text aja</span></a></div>
<div class='chaild'><label for='s3'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg54tt7tTMtLQYhGTd7H3imScuv0TQ4gm8vr6Ch9rOd_EkmHh3PpluRIgpn4JUkb4n9P7ju-cJhXqMSK3phfRZalLEqbrQgwcyr3O5Q-3g5NgAMzK2ikQNUt4RLl-NprOQ9y9OZkKlvrCAt/s500-Ic42/kontify-blogger-template.jpg'/><span>
<b>Halow Semuanyah!</b>
<br/>This is sample text ajah</span></a></div>
<div class='chaild'><label for='s4'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBGb__5mwx5JFMrxbPLGzKb5gupkIO-9N3UMM4NwBM47qIx65Z3aWyy4LnJoB4kLsLjA5kSR4HRQbiRjhNqmz3yfwsrySQj0Al304XbkvdBZEolDNa-R0CLlLbf9MOFuuns-Ai2DKKlyLk/s610-Ic42/Cara-Membuat-Breadcrumbs.png'/><span>
<b>Good Luck!</b>
<br/>This is sample text aja #000</span></a></div>
<div class='chaild'><label for='s5'> </label><a href='javascript:void(0);'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQxkAyxJowgW82DvbEbtNJWDxzp3S8RC-LgLGat89CQ-bpCKDaNaUFIo-Rvm1Uwxaed_kS-qpRuNy1wZK1-BdyAc8snBjmw708Q9hvIBliMinNu3b87jrpH31y8cw0JJBiSMUncsmk_Rxg/s680-Ic42/how-to-add-related-posts-in-blogger.jpg'/><span>
<b>Lorep Ipsum</b>
<br/>Dolor Sit Amet Amet Jabang Bayee</span></a></div>
</div>
</div>
</div></div>
</b:if>

KODE CSS
Pasang di atas kode <head>

<style>
#pure-slider{width:auto;height:100%;position:relative;overflow:hidden;background:#000;margin:0;padding:0}
#pure-slider .chaild{list-style:none;margin:0;padding:0}
#pure-slider .chaild label{position:absolute;bottom:5px;left:10px;z-index:12;background:#000;color:#FFF;width:12px;height:12px;border-radius:100%;border:2px solid #9C9C9C;text-align:center;cursor:pointer;padding:0}
#pure-slider .chaild:nth-child(9) label{left:28px}
#pure-slider .chaild:nth-child(10) label{left:46px}
#pure-slider .chaild:nth-child(11) label{left:64px}
#pure-slider .chaild:nth-child(12) label{left:82px}
#pure-slider .chaild img{border:none;outline:none;position:absolute;top:0;left:-100%;width:100%;height:100%;opacity:.2;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out}
#pure-slider a{text-decoration:none!important}
#pure-slider .chaild span{cursor:default;display:block;position:absolute;right:0;bottom:-52px;left:0;height:37px;background-color:rgba(0,0,0,0.8);font:normal 11px/26px Arial,Sans-Serif;color:#FFF;text-align:left;font-size:13px;opacity:0;visibility:hidden;-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-ms-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out;transition:all 1s ease-in-out;line-height:18px;padding:7px 10px 26px}
#pure-slider .chaild b{font-size:18px;line-height:20px}
#pure-slider input#s1:checked ~ .chaild:nth-child(8) label,#pure-slider input#s2:checked ~ .chaild:nth-child(9) label,#pure-slider input#s3:checked ~ .chaild:nth-child(10) label,#pure-slider input#s4:checked ~ .chaild:nth-child(11) label,#pure-slider input#s5:checked ~ .chaild:nth-child(12) label{background:#1F63A7;border-color:#fff}
#pure-slider .chaild input:checked ~ img,#pure-slider .chaild input:checked ~ a img{top:0;left:0}
#pure-slider input#s1:checked ~ .chaild:nth-child(8) a img,#pure-slider input#s2:checked ~ .chaild:nth-child(9) a img,#pure-slider input#s3:checked ~ .chaild:nth-child(10) a img,#pure-slider input#s4:checked ~ .chaild:nth-child(11) a img,#pure-slider input#s5:checked ~ .chaild:nth-child(12) a img{left:0;opacity:1}
#pure-slider input#s1:checked ~ .chaild:nth-child(9) a img,#pure-slider input#s2:checked ~ .chaild:nth-child(10) a img,#pure-slider input#s3:checked ~ .chaild:nth-child(11) a img,#pure-slider input#s4:checked ~ .chaild:nth-child(12) a img{left:100%}
#pure-slider input#s1:checked ~ .chaild:nth-child(10) a img,#pure-slider input#s2:checked ~ .chaild:nth-child(11) a img,#pure-slider input#s3:checked ~ .chaild:nth-child(12) a img{left:200%}
#pure-slider input#s1:checked ~ .chaild:nth-child(11) a img,#pure-slider input#s2:checked ~ .chaild:nth-child(12) a img{left:300%}
#pure-slider input#s1:checked ~ .chaild:nth-child(12) a img{left:400%}
#pure-slider input#s2:checked ~ .chaild:nth-child(8) a img,#pure-slider input#s3:checked ~ .chaild:nth-child(9) a img,#pure-slider input#s4:checked ~ .chaild:nth-child(10) a img,#pure-slider input#s5:checked ~ .chaild:nth-child(11) a img{left:-100%}
#pure-slider input#s3:checked ~ .chaild:nth-child(8) a img,#pure-slider input#s4:checked ~ .chaild:nth-child(9) a img,#pure-slider input#s5:checked ~ .chaild:nth-child(10) a img{left:-200%}
#pure-slider input#s4:checked ~ .chaild:nth-child(8) a img,#pure-slider input#s5:checked ~ .chaild:nth-child(9) a img{left:-300%}
#pure-slider input#s5:checked ~ .chaild:nth-child(8) a img{left:-400%}
#pure-slider input#s1:checked ~ .chaild:nth-child(8) a span,#pure-slider input#s2:checked ~ .chaild:nth-child(9) a span,#pure-slider input#s3:checked ~ .chaild:nth-child(10) a span,#pure-slider input#s4:checked ~ .chaild:nth-child(11) a span,#pure-slider input#s5:checked ~ .chaild:nth-child(12) a span{bottom:0;z-index:10;opacity:1;visibility:visible}
#pure-slider input{display:none}
#pure-slider .dikiri{position:absolute;top:50%;margin-top:-30px;bottom:26px;left:0;z-index:11}
#pure-slider .dikanan{position:absolute;top:50%;margin-top:-30px;bottom:26px;right:0;z-index:11}
#pure-slider .dikiri label,#pure-slider .dikanan label{display:none;font-size:60px;font-weight:700;line-height:90%;color:#000;background:#fff;opacity:.2;padding:0 7px 5px}
#pure-slider .dikiri label:hover,#pure-slider .dikanan label:hover{opacity:.4;cursor:pointer}
#pure-slider .dikiri label{border-radius:0 20px 20px 0;padding-left:3px}
#pure-slider .dikanan label{border-radius:20px 0 0 20px;padding-right:3px}
#pure-slider input#s1:checked ~ .dikiri label:nth-child(5),#pure-slider input#s1:checked ~ .dikanan label:nth-child(2),#pure-slider input#s2:checked ~ .dikiri label:nth-child(1),#pure-slider input#s2:checked ~ .dikanan label:nth-child(3),#pure-slider input#s3:checked ~ .dikiri label:nth-child(2),#pure-slider input#s3:checked ~ .dikanan label:nth-child(4),#pure-slider input#s4:checked ~ .dikiri label:nth-child(3),#pure-slider input#s4:checked ~ .dikanan label:nth-child(5),#pure-slider input#s5:checked ~ .dikiri label:nth-child(4),#pure-slider input#s5:checked ~ .dikanan label:nth-child(1){display:block}
</style>

Save! Simpan Template.

Code Source

Continue reading →

Cara Membuat Sidebar Multi Tab di Blogger

Blogging Desain Blog 19.12 No Comments

Cara Membuat Sidebar Multi Tab di Blogger.

YANG dimaksud Sidebar Multi Tab yaitu tabel widget yang dipasang di sideba blog, terdiri dari tiga widget yang disatukan di satu tempat.

Penampilannya seperti dalam gambar ilustrasi posting ini.

Sidebar Multi Tab ini biasanya dipasang di blog magazine style, atau di blog yang banyak pasang widget untuk menhemat ruang di sidebar blogger.

Dengan Sidebar Multi Tab ini penampilan blog tampak profesional, bagus, dan memudahkan pengunjung klik navigasi menu di sidebar atau tautan internal blog kita, sehingga bisa meningkatkan jumlah pageviews.

Tips ini akan memberikan panduan langkah membuat Sidebar Multi Tab di Sidebar Blogger.

Cara Membuat Sidebar Multi Tab di Blogger

1. Masuk ke akun Blogger
2. Pilih template >> Edit HTML3. Cari kode ]]></b:skin> atau </style>4. Letakkan kode berikut ini tepat di atasnya

/* CSS Tabs */ .tabs, .tably {margin:0 0;} .tabs .tably {padding:0 0;} .tabs-menu {color:#0f9abb;padding:0 0;margin:0;margin-bottom:0;border:1px solid #e0e0e0;} .tabs-menu li {margin-bottom:0;margin-top:0;font-size:14px;font-family:'Oswald';font-weight:400;text-transform:uppercase;height:37px;line-height:37px;width:33.3%;list-style:none;text-align:center;display:inline-block;padding:0 0;background:transparent;color:#0f9abb;cursor:pointer;position:relative;transition:all 0.1s linear;} .tabs-menu li:hover {background:#363636;color:#fff;} .tabs-menu .active-tab {background:#0fa9cd;color:#fff;} .tabs-menu .active-tab:hover {background:#10b1d7;color:#fff;} .tabs-menu .active-tab:after {top:100%;left:50%;border:solid transparent; content: " ";height:0;width:0;position:absolute;pointer-events:none;border-color: rgba(136,183,213,0);border-top-color:#0fa9cd;border-width:8px;margin-left:-8px;} .tabs-content {padding:10px;background:#f9f9f9;border:1px solid #e0e0e0;border-top:none;margin-bottom:15px;} .tabs-content .sidebar li {margin:0 0;padding:0 0 0 0;} .tabs-content .widget li {background:#f9f9f9;color:#666;float:none!important;} .tabs-content .widget ul {background:#f9f9f9;color:#666;overflow:visible;} .tabs-content .Label li {background:#f9f9f9;color:#666;float:left;padding:5px;margin-left:3px;text-align:left;width:44%;transition:.3s linear;}

5. Copas script berikut ini di atas kode </head>

<script type='text/javascript'> $(function() { $(".tabs-1").mtabs(); }); </script>

6. Letakkan script dibawah ini diatas kode </body>

<script type='text/javascript'> //<![CDATA[ !function(a){"use strict";var b=function(b,c){var d=this;d.element=b,d.$element=a(b),d.tabs=d.$element.children(),d.options=a.extend({},a.fn.mtabs.defaults,c),d.current_tab=0,d.init()};b.prototype={init:function(){var a=this;a.tabs.length&&(a.build(),a.buildTabMenu())},build:function(){var b=this,c=b.options,d=c.tab_text_el,e=c.container_class;b.tab_names=[],b.$wrapper=b.$element.wrapInner('<div class="'+e+'" />').find("."+e),b.tabs.wrapAll('<div class="'+c.tabs_container_class+'" />'),b.tabs.each(function(c,e){var f,g=a(e),h=d;f=g.find(h).filter(":first").hide().text(),b.tab_names.push(f)}),a.isFunction(c.onReady)&&c.onReady.call(b.element)},buildTabMenu:function(){for(var b,c=this,d=c.options,e=d.tabsmenu_el,f=c.tab_names,g="<"+e+' class="'+d.tabsmenu_class+'">',h=0,i=f.length,j=function(){var a=arguments;return d.tmpl.tabsmenu_tab.replace(/\{[0-9]\}/g,function(b){var c=Number(b.replace(/\D/g,""));return a[c]||""})};i>h;h++)g+=j(h+1,f[h]);g+="</"+e+">",c.$tabs_menu=a(g).prependTo(c.$wrapper),b=c.$tabs_menu.find(":first")[0].nodeName.toLowerCase(),c.$tabs_menu.on("click",b,function(b){var d=a(this),e=d.index();c.show(e),b.preventDefault()}).find(":first").trigger("click")},show:function(b){var c=this,d=c.options,e=d.active_tab_class;c.tabs.hide().filter(":eq("+b+")").show(),c.$tabs_menu.children().removeClass(e).filter(":eq("+b+")").addClass(e),a.isFunction(d.onTabSelect)&&b!==c.current_tab&&d.onTabSelect.call(c.element,b),c.current_tab=b},destroy:function(){var a=this,b=a.options.tab_text_el;a.$tabs_menu.remove(),a.tabs.unwrap().unwrap(),a.tabs.removeAttr("style"),a.tabs.children(b+":first").removeAttr("style"),a.$element.removeData("mtabs")}},a.fn.mtabs=function(c,d){return this.each(function(){var e,f=a(this),g=f.data("mtabs");e="object"==typeof c&&c,g||f.data("mtabs",g=new b(this,e)),"string"==typeof c&&g[c](d)})},a.fn.mtabs.defaults={container_class:"tabs",tabs_container_class:"tabs-content",active_tab_class:"active-tab",tab_text_el:"h1, h2, h3, h4, h5, h6",tabsmenu_class:"tabs-menu",tabsmenu_el:"ul",tmpl:{tabsmenu_tab:'<li class="tab-{0}"><span>{1}</span></li>'},onTabSelect:null}}(window.jQuery,window,document); //]]> </script>

7. Simpan kode HTML sidebar multitab blogger berikut ini di atas kode <aside id='sidebar-wrapper'> atau <div id='sidebar-wrapper'>

<div class='tabs tabs-1'> <b:section class='tably tably-1 section animated fadeIn' id='tably-1' showaddelement='yes'/> <b:section class='tably tably-2 section animated fadeIn' id='tably-2' showaddelement='yes'/> <b:section class='tably tably-3 section animated fadeIn' id='tably-3' showaddelement='yes'/> </div>

8. Save! Simpan Template.
9. Untuk mengatur widgetnya, masuk ke halaman Layout/Tata Letak dan Add a Gadget di masing-masing tiga widget multitab tadi.

Demikian Cara Membuat Sidebar Multi Tab di Blogger.*

Sumber

Continue reading →

Download Template

Sabtu, 27 Mei 2017

Cara Memasang Link Media Sosial di Sidebar Blogger

Cara #1 Memasang Link Media Sosial di Sidebar Blogger

Cara #2 Memasang Link Media Sosial di Sidebar Blogger

Minggu, 14 Mei 2017

Cara Memasang Related Post Gambar Thumbnail di Bawah Postingan Blog

Cara Memasang Related Post Gambar Thumbnail

Jumat, 12 Mei 2017

Kode Anti-Copas Postingan Blog - Mematikan Fungsi Klik Kanan Mouse

Cara Memasang Kode Anti-Copas Postingan Blog - Mematikan Fungsi Klik Kanan Mouse

Kode Anti-Copas Postingan Blog - Mematikan Fungsi Klik Kanan Mouse

Kamis, 11 Mei 2017

Cara Modifikasi Judul (H2) Widget pada Sidebar dan Footer Blog

Modifikasi Tampilan Judul (H2) pada Widget dan Footer Blog

Minggu, 16 April 2017

Cara Membuat Navigasi Menu Responsive di Atas Header Blog

Cara Membuat Navigasi Menu Responsive di Atas Header Blog

Senin, 10 April 2017

Cara Menginstal WordPress Menggunakan FTP

Selasa, 14 Februari 2017

Cara Memasang Related Posts Gambar Responsive di Bawah Posting Blogger

Cara Memasang Related Posts Gambar Responsive

Sabtu, 11 Februari 2017

Cara Membuat Slider Gambar Responsive di Blogger Tanpa Javascript

Cara Membuat Slider Gambar Responsive

Cara Membuat Sidebar Multi Tab di Blogger

Popular

Labels

Comments

Advertisement

Labels

Blog Archive