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 →

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

Popular

Labels

Comments

Advertisement

Labels

Blog Archive